var lang = (document.location.href.indexOf("/french/") != -1) ? "fr" : "en";
var swfdesc, descidx = -1;

$(function() {		
	  /*==== onLoad ====*/
		// initialize scrollables/carousels and return the API
		var imgAPI = $("#imgsCarousel").scrollable({api:true, size:8, navi:"#naviImgs" });	
		var swfAPI = $("#swfsCarousel").scrollable({api:true, size:8, navi:"#naviSwfs" });
		
		swfdesc = document.getElementById('swfDesc').getElementsByTagName('p');
		
	$('#voltMultimediaBox a').click(function() {
		var index = $('#voltMultimediaBox a').index(this);
		
		if ( descidx !== -1 ) {
			swfdesc[descidx].style.display = 'none';
		}
		
		if ( index > 4 ) {
			index -= 4;
			hiliteThmb($('#imgsCarousel li')[index]);
		} else {
			hiliteThmb($('#swfsCarousel li')[index]);
			descidx = index;
			swfdesc[descidx].style.display = 'block';
		}
			
		return false;
	});
	
	$('#lookInside a').click(function() {
		if ( descidx !== -1 ) {
			swfdesc[descidx].style.display = 'none';
		}
		
		descidx = 0;
		swfdesc[descidx].style.display = 'block';
		
		hiliteThmb($('#swfsCarousel li')[0]);
		
		return false;
	});
    
    /*==== onChanges ====*/
    // Set the viewingArea to the 
    $("#imgsCarousel li").click(function(){
			setLargeImg(this);
			return false;
    });
    
    $("#swfsCarousel li").click(function(){
    	setSwfObj(this);
			return false;
    });
    
		$("#imgsCarousel li, #swfsCarousel li").click(function(){
			hiliteThmb(this);
			return false;
		});
		
		$("#photoNext").click(function(){
			// Determine which carousel has the "active" item
			var currCarousel = $(".scrollable ul li.active").parent("ul").parent("div");
			if ($(currCarousel).attr("id") == "imgsCarousel" ) {
				replaceImg("next");
			} else { // must be on swfsCarousel
				replaceSwf("next");
			}
			return false;
		});
		
		$("#photoPrev").click(function(){
			// Determine which carousel has the "active" item
	
			var currCarousel = $(".scrollable ul li.active").parent("ul").parent("div");
			if ($(currCarousel).attr("id") == "swfsCarousel" ) {
				replaceSwf("prev");
			} else { // must be on swfsCarousel
				replaceImg("prev");
			}
			return false;
		});
  
		/*==== functions which require jQuery init (b/c of APIs) ====*/
		function replaceImg(direction) {
			var cur_image = $("#imgLarge").attr("src").replace(/_big.jpg/, '');
			var list_item = cur_image.split("/").pop().match(/\d+/); //i.e.: volt_02
			list_item = Number(list_item); //i.e.: 2
			var carouselSize = $("#imgsCarousel").children().children().length;
			
			if (direction == "next"){

				if (list_item != carouselSize) { // if carousel is not at end, change big image and scroll carousel ahead 1
					$("#imgsCarousel li").eq(list_item-1).next("li").each(function(){
							setLargeImg(this);
							hiliteThmb(this);
							imgAPI.next();
						});
				} else { // jump to swf carousel
					$("#swfsCarousel li:eq(0)").click();
				}
			} else { // must be goin the backward
				if (list_item != 1) { // if carousel is not at end, change big image and scroll carousel ahead 1
					$("#imgsCarousel li").eq(list_item-1).prev("li").each(function(){
							setLargeImg(this);
							hiliteThmb(this);
							imgAPI.prev();
						});
				}else { // jump to swf carousel
					$("#swfsCarousel li:last").click();
				}
			}
		}
		// Updates the swf and thumbnails depending on direction
		function replaceSwf(direction) {
			var myActive = $("#swfsCarousel li.active"); 
			var list_item = $("#swfsCarousel li").index(myActive);
			list_item = Number(list_item);
			var carouselSize = $("#swfsCarousel").children().children().length-1;
			if (direction == "next") {
				if (list_item != carouselSize) {
					$(myActive).next("li").each(function(){
						setSwfObj(this);
						hiliteThmb(this);
						swfAPI.next();
					});
				} else { // jump to swf carousel
					$("#imgsCarousel li:eq(0)").click();
				}				
			} else {// must be going the backward
				if (list_item == 0) { // then jump to imgCarousel
					$("#imgsCarousel li:last").click();
				} else {
					$(myActive).prev("li").each(function(){
						setSwfObj(this);
						hiliteThmb(this);
						swfAPI.prev();
					});
				}
			}
		}
});



function setFlashContent(swf){
  //Flash setup
	var flashvars = {};
		flashvars.filePath = '/media/vehicles/common/chevrolet/volt/videos/volt_' + swf + '.flv';
		//flashvars.lang = lang;
		flashvars.version = "reg";
	var params = {};
	var attributes = {};
		attributes.id = "swfContainer";
		attributes.name = "swfContainer";
	swfobject.embedSWF("/media/vehicles/common/chevrolet/volt/videoPlayer.swf", "swfContainer", "545", "395", "9.0.0", "expressInstall.swf", flashvars, params, attributes, function(e) {
		if ( !e.success ) {
			document.getElementById('swfContainer').innerHTML = '<a id="flash_fallback" href="http://get.adobe.com/flashplayer/"><img src="/images/vehicles/chevrolet/cruze/video_fallback_' + lang + '.jpg" alt="" /></a>';
		}
	});
	
}

// Adhoc Callback from thickbox.js basically to pass info from inline string param
function afterInlineDo(imgToShow){
	//alert(imgToShow); // volt_02
	if(imgToShow.indexOf("video")!=-1)
	{
		$("#imgLarge").hide();	// hide image container
		$("#swfExtra").show();	// show swf container
		//determine which was clicked
		//ar mySWF = $(el).children("a").children("img").attr("src").split("/volt_")[1]; //gives: video_01.jpg
		mySWF = imgToShow.replace("volt_",""); //gives: video_01
		setFlashContent(mySWF);
		
		var myEl;
		$("#swfsCarousel a").find("img[@src*="+imgToShow+"]").each(function(){
			myEl = $(this).parent("a").parent("li");
			hiliteThmb(myEl);
		});
		// Handle showing/hide prev/next btns depending on which thmb clicked
		var myIndex = $("#swfsCarousel li").index(myEl);
		if(myIndex == 0) {
			$("#photoPrev").removeClass("disabled");
		} else if (myIndex == $("#swfsCarousel li").length-1 ) {
			$("#photoNext").addClass("disabled"); 
		} else {
			$("#photoPrev, #photoNext").removeClass("disabled"); //remove disabled
		}
	}
	else
	{
		$("#swfExtra").hide();	// hide swf container
		$("#imgLarge").show();	// show swf container
		var myImg = '/images/vehicles/chevrolet/volt/'+ imgToShow +'_big.jpg';
		$("#imgLarge").attr("src", myImg);
		// need to pass function LI obj, we also know we only care about imgsCarousel
		// so find the Li that matches imgToShow within imgsCarousel
		var myEl;
		$("#imgsCarousel a").find("img[@src*="+imgToShow+"]").each(function(){
			myEl = $(this).parent("a").parent("li");
			hiliteThmb(myEl);
		});
		// Handle showing/hide prev/next btns depending on which thmb clicked
		var myIndex = $("#imgsCarousel li").index(myEl);
		if(myIndex == 0) {
			$("#photoPrev").removeClass("disabled");
			//$("#photoPrev").addClass("disabled");
		} else if (myIndex == $("#imgsCarousel li").length-1 ) {
			$("#photoNext").addClass("disabled"); 
		} else {
			$("#photoPrev, #photoNext").removeClass("disabled"); //remove disabled
		}
	}
}

// Accepts LI object
function setLargeImg(el){
	setFlashContent(null); //buggy IE6
	$("#swfExtra").hide();	// hide swf container
	$("#imgLarge").show();			// show image container
	
	if ( descidx !== -1 ) {
		swfdesc[descidx].style.display = 'none';
	}
	
	// update the image
 	var myImg = $(el).children("a").children("img").attr("src").split("/volt/")[1]; //gives: volt_01.jpg
 	myImg =  myImg.split(".jpg")[0]; // gives: volt_01
	myImg = '/images/vehicles/chevrolet/volt/'+ myImg +'_big.jpg';
	$("#imgLarge").attr("src", myImg);
}

// Accepts LI object
function setSwfObj(el){
	$("#imgLarge").hide();			// show image container
	$("#swfExtra").show();	// hide swf container
	//determine which was clicked
	var mySWF = $(el).children("a").children("img").attr("src").split("/volt_")[1]; //gives: video_01.jpg
	mySWF = mySWF.split(".jpg")[0]; //gives: video_01
	
	
	if ( descidx !== -1 ) {
		swfdesc[descidx].style.display = 'none';
	}
	descidx = $('#swfsCarousel li').index(el);
	swfdesc[descidx].style.display = 'block';
	
	setFlashContent(mySWF);
}

// Triggered on click, accepts LI object (within either carousel)
function hiliteThmb(el){
	$(".items li").removeClass("active");
	$(el).addClass("active");
	// If in imgsCarousel and at first LI, then disable PREV
	// Else If in swfsCarousel and at last LI, then disable NEXT
	// Else disable neither
	if($(el).parent("ul").parent("div").attr("id") == "imgsCarousel" && $("#imgsCarousel li").index(el) == 0){
		$("#photoPrev").removeClass("disabled");
	} else if ( $(el).parent("ul").parent("div").attr("id") == "swfsCarousel" && $("#swfsCarousel li").index(el) == $("#swfsCarousel li").length-1) {
		$("#photoNext").removeClass("disabled");
	} else { //disable none
		$("#photoPrev, #photoNext").removeClass("disabled");	
	}
}

// extending thickbox.js which fires after thickbox is removed
function tb_remove_callback(){
		$("#swfExtra").hide(); 
		//$("#photoNext, #photoPrev, #photoNextSwfs, #photoPrevSwfs").css("visibility","hidden");
}