/* -------------------------------------------------------------- 
  
   Pioneer VSX-AV Amplifier Product Site
	 custom.js
   
-------------------------------------------------------------- */

var $j = jQuery.noConflict();

var ie6 = ($j.browser.msie && $j.browser.version < 7 ) ? true : false;
var ie7 = ($j.browser.msie && $j.browser.version == 7 ) ? true : false;

$j(document).ready(function(){

		// Homepage billboard
		$j('.billboard_visuals').billboard();

		// Clear input field on focus 
		$j('.focusField').clearFieldOnFocus();
		
		// Slideshow
		$j('.slideshow').slideShow();		
		
		// Lightboxes
		$j('.box .thumbs a, .billboard_thumbs .thumbs a, .open_lightbox').each( function() {
			$j(this).each( function() {																
				$j(this).click( function(e) { 
					var source = $j(this).attr('href');  
					var lightbox = jQuery.fn.lightbox({ 
						 overlayId : 'overlay_885-457',						
						 lightboxId : 'lightbox_885-457',
						 width : 885,
						 height : 457,
						 source: source,
						 hideScroll: false
					});					
					lightbox.open() 
					e.preventDefault();
				});
			});
		});
		$j('#zoom_front, #zoom_rear').each( function() {
			$j(this).each( function() {																
				$j(this).click( function(e) { 
					var source = $j(this).attr('href');  
					var lightbox = jQuery.fn.lightbox({ 
						 overlayId : 'overlay_885-457',						
						 lightboxId : 'lightbox_885-457',
						 width : 885,
						 height : 457,
						 source: source,
						 hideScroll: true
					});					
					lightbox.open() 
					e.preventDefault();
				});
			});
		});

});





/* 
    BILLBOARD Homepage
		Thumb menu is generated, REL attribute contains path to thumb visuals
*/
 
(function($){
	jQuery.fn.billboard = function(options) {
		
		settings = jQuery.extend({
			 menuContainer:   '.billboard_browser',  
			 slidesContainer: '.billboard_visuals'
		}, options);
	
		return this.each(function() {
 
			var $container = $(this);
			var $slides = $container.children();		
			var $menu = $(settings.menuContainer);    
      var $menuItems;
			var previousSlide;
			// position slides 
			$container.css('position', 'relative');
			$slides.each( function(i){
				$($slides[i]).css({'position':'absolute','top':0,'left':0,'opacity':0});
			});
			// build menu
      $menuItems = buildMenu();			
			// go to first slide
		  gotoSlide(0);
			function buildMenu() {
				var menuStr = '';
				var menuItems;
				$slides.each(function() { menuStr += '<li style="background: url('+$(this).attr('rel')+') 0 0 no-repeat;"><a href="#"></a></li>' }); 
				$menu.html('<ul>'+menuStr+'</ul>');
				menuItems = $('a',$menu);					
				//add click events menu items
				$('a',$menu).each(function(i) {
						$(this).click(function(e) { gotoSlide(i); return false; });											 
				}); 
				return menuItems;
			};
			function gotoSlide(index) {
				 if (previousSlide!=undefined) { 
				   $($menuItems[previousSlide]).removeClass('selected');
				   $($slides[previousSlide]).css({'z-index':0}).animate({'opacity':0},{duration:300});
				 }
				 $($menuItems[index]).addClass('selected'); 
				 $($slides[index]).css({'z-index':1,'opacity':0}).animate({'opacity':1},{duration:300}); 
				 previousSlide = index;
			};			
		});
		
	};
})(jQuery);



/* 
    CLEAR FIELD ON FOCUS 
    Used in integrated site, to clear search field on focus
		For input text where the field label is displayed as initial value of the field 
		when the field is cleared, the initial value - stored in rel attribute - is displayed 
*/
	
(function($){
	jQuery.fn.clearFieldOnFocus = function() {
		return this.each(function() {
      var initVal = ''; if($(this).attr('value') != undefined) initVal = $(this).attr('value'); $(this).attr('rel',initVal); 
			$(this).focus(function() { if($(this).attr('value') == $(this).attr('rel')) $(this).attr('value', ''); });
			$(this).blur(function() { if($(this).attr('value') == '') $(this).attr('value', $(this).attr('rel')); });
		});
	};
})(jQuery);



/* 
    SLIDESHOW
    Lightbox pages
		Pass the number of the slide you want to show initially, eg. play_entertainment#1 shows 2nd slide
*/

(function($){
	jQuery.fn.slideShow = function(options) {
		
		settings = jQuery.extend({
			 menuContainer:   '.slideshow_menu',
			 slidesContainer: '.slideshow_content'
		}, options);
	
		return this.each(function() {
															
			//															
 			var $container = $(this);
			var $slides = $(settings.slidesContainer).children();		
			var $menu = $(settings.menuContainer);    
      var $menuItems = $('a',$menu);
			var previousSlide;
			
			// position slides 
			$container.css('position', 'relative');
			$slides.each( function(i){
				$($slides[i]).css({'z-index':$slides.length-i,'position':'absolute','top':0,'left':0}).hide();
			});
			// add click events slideshow menu
	    $('a',$menu).each(function(i) {
						$(this).click(function(e) { gotoSlide(i); e.preventDefault(); });											 
				}); 
			// determine which slide to show initially
			var initSlide = 0;
      var h = window.location.hash;
			if(h!='') { initSlide = parseInt(h.replace('#',''));  };
			// go to initial slide
		  gotoSlide(initSlide);

			// Go to slide 
			function gotoSlide(index) {
				
				 if (index!=previousSlide) {
					 
					 // hide previous slide
						 if (previousSlide!=undefined) { 
							 $($menuItems[previousSlide]).removeClass('selected');						 
							 // remove video
							 if ( $($slides[previousSlide]).hasClass('video_item') ) { 
								 var relAttr = $($slides[previousSlide]).attr('rel').split('|');;
								 var videoContainer = relAttr[1]; 
								 $($slides[previousSlide]).html('<div id="'+videoContainer+'" class="video"><p><a href="http://get.adobe.com/flashplayer/"><img src="/images/g-clef/img/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p></div>');
							 }
							 $($slides[previousSlide]).hide();
						 }
						 					
					 // show current slide
					   $($menuItems[index]).addClass('selected');
					 	 // embed video
						 if ( $($slides[index]).hasClass('video_item') ) { 
						 
						   var relAttr = $($slides[index]).attr('rel').split('|');;
						   var videoContainer = relAttr[1]; 
							 var lang = $('.lightbox_inner').attr('id');
							 var youTubeUrl;
							 var flashvars = {};
               var params = {
                  scale: 'noScale',
                  allowfullscreen: 'true',
									allowscriptaccess: 'always',
									bgcolor: '#000000',
									wmode: 'opaque'
               };
               var attributes = {};
							 
							 switch(lang)
								{
								case 'fr':
									youTubeUrl = 'http://www.youtube.com/v/KQcXSU7GnKE&hl=fr&fs=1&';
									break;
								case 'be':
									youTubeUrl = 'http://www.youtube.com/v/KQcXSU7GnKE&hl=fr&fs=1&';
									break;
								case 'xx':
									youTubeUrl = 'http://www.youtube.com/v/zA1Xf5zRxsQ&hl=en&fs=1&';
									break;
								default:
									youTubeUrl = 'http://www.youtube.com/v/zA1Xf5zRxsQ&hl=en&fs=1&';
								} 
							 
							 swfobject.embedSWF(youTubeUrl, videoContainer, "640", "360", "9.0.0", "/files/swf/videoplayer/expressInstall.swf", flashvars, params, attributes);
							 
						 };			
					   $($slides[index]).show();
					   previousSlide = index;
						 
				 };
			};			
		});
	};
})(jQuery);



/*
    LIGHTBOX
*/

(function($) {
	jQuery.fn.lightbox = function(options) {
		
		// defaults, override with options
		settings = jQuery.extend({
		  overlayId : 'overlay_885-457',
			lightboxId : 'lightbox_885-457',
			overlayClass: 'lightbox_overlay',
			lightboxClass: 'lightbox',
			closeButtonClass: 'lightbox_close',
			contentClass: 'lightbox_content',
			width : 885,
			height : 457,
			source: 'blank.html',
			hideScroll: false
		}, options);
	  
		return this.each(function(){
															
			// lightbox html
		  var lightbox = '';
			lightbox += '<div id="' + settings.overlayId + '" class="' + settings.overlayClass + '"></div>';
			lightbox += '<div id="' + settings.lightboxId + '" class="' + settings.lightboxClass + '" style="width:' + (settings.width) + 'px; height:' + (settings.height) + 'px; margin-top:-' + Math.round(settings.height/2) + 'px; margin-left:-' + Math.round(settings.width/2) + 'px;">';
			lightbox += '<div class="' + settings.closeButtonClass + '"></div><div class="' + settings.contentClass + '">';
			lightbox += '<iframe width="'+(settings.width+30)+'" height="'+(settings.height+30)+'" frameborder="0" scrolling="no" allowtransparency="true" src="' + settings.source + '">&lt/iframe>';
			lightbox += '</div></div>';	
			// the iframe is bigger than the overlay to hide scrollbars in chrome, opera
			jQuery.fn.open = function() {
			  			
				$lightbox = $('body').append(lightbox);
				
				if (ie6) {
					// position for IE6
					if (settings.hideScroll) { $('html').css({'height':'100%','overflow-y':'hidden'}); }
					// position background overlay
					lightboxPos = $('.'+settings.lightboxClass).offset();
					$('.'+settings.overlayClass).css({'background-position':'center '+(lightboxPos.top-150)});
					$('.'+settings.overlayClass).focus();				
					$(window).resize( function() { 
					  if ($('.'+settings.lightboxClass).length!=0) {												 
					  	lightboxPos = $('.'+settings.lightboxClass).offset();
					  	$('.'+settings.overlayClass).css({'background-position':'center '+(lightboxPos.top-150)}); 
						};
				  });
				} else { 
				  if (settings.hideScroll) { $('html').css({'height':'100%','overflow-y':'hidden'}); }
				}
				$('.'+settings.closeButtonClass).click(function(){$lightbox.close();});
				$('.'+settings.overlayClass).click(function(){$lightbox.close();});
			}	
			
			

			jQuery.fn.close = function() {
				if (settings.hideScroll) { $('html').css({'height':'auto','overflow-y':'scroll'}); }
				$('.'+settings.overlayClass).remove();
				$('.'+settings.lightboxClass).remove();
			}
			
			
    });

	};	
})(jQuery);

// Function to close Image pan overlay // triggered from flash
function closeImagePan() { $j('.lightbox_overlay').remove(); $j('.lightbox').remove(); $j("html").css({'height':'auto','overflow-y':'scroll'}); };