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

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

$(document).ready(function () {

		// Internet Explorer 6?
		
		// Homepage billboard
		$('.billboard_visuals').billboard();

		// Clear input field on focus 
		$('.focusField').clearFieldOnFocus();
		
		// Make shortcuts to other sections clickable
		$('.shortcut').clickableDiv();

		// Tabs review page
		$('.vtab_box').tabs();
		
		// Slideshow
		$('.slideshow').slideShow();		
		
		// Tooltip
		$('.tooltip').tooltip({width:'175px',leftOffset:-15});
		
		// Image map with rollovers Box page 
		$('.image-map').imageMap();		
		
		// Lightboxes
		$('.item .thumbs a, .open_lightbox').each( function() {
			$(this).each( function() {																
				$(this).click( function(e) { 
					var source = $(this).attr('href');  
					var lightbox = jQuery.fn.lightbox({ 
						 overlayId : 'overlay_885-457',						
						 lightboxId : 'lightbox_885-457',
						 width : 885,
						 height : 457,
						 source: source
					});					
					lightbox.open() 
					e.preventDefault();
				});
			});
		});
		
		// Lightboxes image pan
		$('#zoom_front, #zoom_rear').click( function(e) {
			  var source = $(this).attr('href'); 
				var lightbox = jQuery.fn.lightbox({ 
			    overlayId : 'overlay_882-547',
					lightboxId : 'lightbox_882-547',
					width : 882,
					height : 547,
					source: source
				});					
				lightbox.open() 
				e.preventDefault()
		});
		
		// Choose page dropdown 
	  $('#chooseDropdown').change( function() { 
			$('option',$(this)).each(function() {
					var val = $(this).attr('value');		
					if ($(this).attr('selected')) { $('#'+val+' td, #'+val+' th',$('#chooseTable')).show(); } 
					else { $('#'+val+' td, #'+val+' th',$('#chooseTable')).hide(); };  										
			}); 
		}).change();
		
});









/* 
    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({'z-index':$slides.length-i,'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':1}).animate({'opacity':0},{duration:1500});
				 }
				 $($menuItems[index]).addClass('selected'); 
				 $($slides[index]).css({'z-index':0,'opacity':0}).animate({'opacity':1},{duration:1500}); 
				 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);



/* 
    CLICKABLE DIV
    Adds an onclick event on a DIV element, the action is taken from the first hyperlink inside the DIV
*/
(function($){
  jQuery.fn.clickableDiv = function() {
		return this.each(function() {
      var a = $(this).children('a:first');
			$(this).css({'cursor':'pointer'});
			$(this).click(function() { window.location.href= a.attr('href'); });
			$(this).mouseover( function() { a.css({'text-decoration':'underline'}); } ).mouseout( function() { a.css({'text-decoration':'none'}); } );
		});
  };
})(jQuery);



/* 
    TABS
    Reviews page
*/

(function($) {
	jQuery.fn.tabs = function(options) {
		
		settings = jQuery.extend({
			tabs : '.vtabs a',										 
			contentContainer : '.vtab_content',
			contentItems : '.vtab_content li'
		}, options);
	
		return this.each(function(){
			//
			var $tabs = $(settings.tabs);
			var $contentContainer = $(settings.contentContainer);
			var $contentItems = $(settings.contentItems);
			var selectedTabIndex;
			
			// if the url does not contain a tab ID, the first tab is shown by default
			var h = window.location.hash;
			var initTab = ( h!='' && $(h,settings.contentContainer).length ) ? h : $($tabs[0]).attr('href');
			
			// hide content items and show initial tab
			$contentItems.each( function() { $(this).hide(); });
			showTab(initTab);
			
			$tabs.each( function() {
				$(this).click( function(e) {
			    var id = $(this).attr('href');
				  showTab(id); e.preventDefault();					
			  });										
		  }); 
	
			function showTab(tabId) { 
			   // get index of tab
				 var tabIndex;
				 $tabs.each( function(i) { if($(this).attr('href') == tabId) tabIndex = i; });
				 // deselect previous tab
				 if(selectedTabIndex!= undefined) {
					 $($tabs[selectedTabIndex]).removeClass('selected');		
					 $($contentItems[selectedTabIndex]).hide();					 
				 }			 
				 // select this tab
				 $($tabs[tabIndex]).addClass('selected');	
				 $($contentItems[tabIndex]).show();  
				 selectedTabIndex = tabIndex;
			};
	
		});
	
	};	
})(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://www.adobe.com/go/getflashplayer"><img src="img/global/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 videoXml = relAttr[0];
							 var flashvars = {
									xmldata: videoXml
							 };
               var params = {
                  scale: 'noScale',
                  allowfullscreen: 'true',
									bgcolor: '#000000',
									wmode: 'opaque'
               };
               var attributes = {};
               swfobject.embedSWF("swf/videoplayer/pionplayer_vietnamese.swf", videoContainer, "640", "350", "9.0.0", "swf/videoplayer/expressInstall.swf", flashvars, params, attributes);
						 };			
					   $($slides[index]).show();
					   previousSlide = index;
						 
				 };
			};			
		});
	};
})(jQuery);



/*
    IMAGE MAP with custom ROLLOVERS
*/

(function($){
	jQuery.fn.imageMap = function(options) {
		return this.each(function() { 
			var $map = $(this);
      var $areas = $('area',$(this));
			// replace map areas by transparent links
      $areas.each( function(i) {
				var $area = $(this);
				var href = $(this).attr('href');						
        var text = $(this).attr('alt');
				var pos = $area.attr('coords').split(',');
				var left = pos[0];
				var top = pos[1];				
				var width = pos[2]-pos[0];
				var height = pos[3]-pos[1];
				$map.prepend('<a href="'+href+'" style="cursor:help;display:block;position:absolute;z-index:'+(i+1100)+';left:'+left+'px;top:'+top+'px;width:'+width+'px;height:'+height+'px;" title="'+text+'"><img src="img/global/blank.gif" width="'+width+'" height="'+height+'" /></a>');
				$area.remove();
			});
			// add mouseover/out tooltip
			$('a',$map).click( function(e) { e.preventDefault(); });
			$('a',$map).tooltip({width:'auto',leftOffset:'center'});
		});
	};
})(jQuery);



/*
    TOOLTIP
*/

(function($){
  jQuery.fn.tooltip = function(options) {
		
		settings = jQuery.extend({
			tooltipContainer : 'tooltip',										 
			leftOffset : 0,  // nr of pixels to move tooltip to left(-) or right(+), or 'center' ( tooltip is centered tov link ) 
			width: 'auto'    // width in px or auto (width automatically takes width of tooltip content )
		}, options);
		
		return this.each(function() {

      var $a = $(this); // link
			var offset;	
			
			// change TITLE attribute of link to REL attr
			$a.attr('rel',$a.attr('title'));
			$a.attr('title','');

      // add mouseover/out event on link
      $(this).mouseover( function(e) { showTooltip(); } ).mouseout( function() { hideTooltip() } );

			// show tooltip
			function showTooltip() { 
			
			  // Append #tooltip container to the page if it doesn't exist
				if ($('#'+settings.tooltipContainer).length == 0 ) { $('body').append('<div id="'+settings.tooltipContainer+'" style="width:'+settings.width+'"><div class="tl"><div class="tr"></div></div><div class="bg_l clearfix"><div class="bg_r"><div id="tooltip_content"></div></div></div><div class="bl"><div class="br"></div></div></div>');  
				}
				var $tooltip = $('#'+settings.tooltipContainer);
				
				// Set tooltip text
				$('#tooltip_content',$tooltip).html($a.attr('rel'));
				
				// Position tooltip and show it
				var pos = $a.offset();			
				if (settings.leftOffset == 'center' ) {
					offset = Math.round(pos.left+$a.width()/2)-20;
			  } else { 
					offset = pos.left+settings.leftOffset; 
				}
				var height = $tooltip.height();
				
				$('#'+settings.tooltipContainer).css({'position':'absolute','left':+offset+'px','top':Math.round(pos.top-height),'z-index':'999'}).show();
		    
				// Take care of width 'auto' in ie6
				if (ie7 ) { if(settings.width=='auto') { $('#'+settings.tooltipContainer).css({'width':'150px'}); } }
				if (ie6) {
					if(settings.width=='auto') {
						$('#'+settings.tooltipContainer).css({'width':'100px'});
						$('#'+settings.tooltipContainer+' .tl').css({'width': $('#tooltip_content',$tooltip).width()+33});
						$('#'+settings.tooltipContainer+' .bl').css({'width': $('#tooltip_content',$tooltip).width()+47});
						$('#tooltip_content',$tooltip).css({'white-space':'nowrap'});
					}
				}
				// hide selectboxes in ie6
				if (ie6) $('select').css({'visibility':'hidden'}); 
				
			};
			function hideTooltip() { 
			  $('#'+settings.tooltipContainer).hide(); 
				// show selectboxes in ie6
			  if(ie6) $('select').css({'visibility':'visible'}); 
			};
		});
  };
})(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'
		}, 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
					$('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 { 
				  $('html').css({'height':'100%','overflow-y':'hidden'});
				}
				$('.'+settings.closeButtonClass).click(function(){$lightbox.close();});
				$('.'+settings.overlayClass).click(function(){$lightbox.close();});
			

				
			}	
			
			

			jQuery.fn.close = function() {
				$('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() { $('.lightbox_overlay').remove(); $('.lightbox').remove(); $("html").css({'height':'auto','overflow-y':'scroll'}); };