// JavaScript Document

$(document).ready(function(){


	var currentImage = -1;
	var totalImages;
	var widthThumbs;
	var speedInterval = 20;
	var speedScroll = 5;
	var slideShowActive = true;
	var slideShowTimer;
	var widthThumb = 59;
	var widthThumbAndWhite = 66;
	var firstTime = true;
	
	
	// ===================================================
	function windowOnLoad()
	{
		preloadImages();
		totalImages = lstPhotos.length;
		widthThumbs = totalImages * widthThumbAndWhite;
		
		for(i=0; i<lstPhotos.length; i++) 
		{
			$("#thumbs").append('<li id="liThumb'+i+'" value="'+i+'"><img src="' + cst_pathToImagesThumbs + cst_prefixThumb + lstPhotos[i] + '" width="'+widthThumb+'" height="'+widthThumb+'" alt="" /></li>');			
		}
		
		
		
		$("#thumbs li").click(function(){
			clickThumb($(this).attr("value"));
		});
		// mouseover thumb
		$("#thumbs li").hover(function(){
			mouseOverThumb($(this).attr("value"));
		}, function() {
			mouseOutThumb($(this).attr("value"));	
		});
		
		if ( parseInt(widthThumbAndWhite*totalImages) <= parseInt($("#thumbarea").css("width")) )
		{
			$("#slideLeft").hide();
			$("#slideRight").hide();
		}
		
	}
		
	// ===================================================
	function preloadImages()
	{
		// counter
		var i = 0;
		// create object
		//imageObj = new Image();
		for(i=0; i<lstPhotos.length; i++) 
		{
			//imageObj.src=cst_pathToImages + '/' + lstPhotos[i];
		}
	}
	
	if (blnDebug) {
		$("#tdText").append("<div id=dbg style='width:100%; border:1px solid red; height:400px; overflow:scroll;'></div>");
	}
	
	// ===================================================
	// all thumbs are half opacity
	$("#thumbs img").css("opacity", "0.5");
	
	
	
	// ===================================================
	$("#thumbwrapper").hover(function(){
		mouseOverThumbWrapper();
	}, function() {
		mouseOutThumbWrapper();	
	});
	
	
	// ===================================================
	function mouseOverThumbWrapper()
	{
		dbg("mouseOverThumbWrapper");
		stopSlideShow();		
	}
	// ===================================================
	function mouseOutThumbWrapper()
	{
		dbg ("launch slideShowTimer in mouseOutThumbWrapper");
		slideShowTimer = window.setTimeout(playSlideShow, 4000);
	}
	
	// ===================================================
	// mouse over a thumb => see the image after a timeout	
	function mouseOverThumb(id)
	{
		dbg("mouseOverThumb " + id);
		stopSlideShow();
		if (currentImage != id) 
		{
			displayImage(id, true);
		}
	}
	
	// ===================================================
	// mouse out of a thumb => clear timeouts
	function mouseOutThumb(id)
	{
		$('#image img').stopTime();
		$("li[@value="+id+"] img").stopTime();
	}
	
	// ===================================================
	// click on a thumb => see the image
	function clickThumb(id)
	{
		$('#image img').stopTime();
		$("li[@value="+id+"] img").stopTime();
		displayImage(id, false);
	}
		
	// ===================================================
	function dbg(txt)
	{
		if (blnDebug) 
		{
			var debug = document.getElementById("dbg");
			debug.innerHTML += txt + "<br>";
		}
	}
	
	// ===================================================
	// main fn to play the slideshow
	function playSlideShow()
	{		
		clearTimeout(slideShowTimer);
		slideShowActive = true;		
		displayNextImage();
		//dbg ("launch slideShowTimer in playSlideShow");
		slideShowTimer = window.setTimeout(playSlideShow, 4000);
	}
	
	// ===================================================
	function stopSlideShow()
	{
		slideShowActive = false;
		clearTimeout(slideShowTimer);
	}
	
	// ===================================================
	function displayFirstImage()
	{
		currentImage = 0;
		loadImg('0', cst_pathToImages + '/' + lstPhotos[0], true);		
		//activeThumb(0);
		
		//displayImage(0, false);		
		//slideShowTimer = window.setTimeout(playSlideShow, 4000);
	}
	
	// ===================================================
	function displayNextImage()
	{
		//dbg(currentImage + ' - ' + totalImages);
		if (currentImage > (totalImages-2))
		{
			currentImage = -1;
		}
		currentImage++;
		displayImage(currentImage, false);
	}
	
	
	// ===================================================
	function displayImage(id, withTimeOut)
	{
		//dbg(id + ' - ' + totalImages);
		if (withTimeOut)
		{	
			$("#image img")			
				.oneTime("1s", function() {
					//$(this).fadeOut('fast');
					loadImg(id, cst_pathToImages+lstPhotos[id], false);
			});
				
			// active thumb of id
			/*
			$("li[@value="+id+"] img").oneTime("1s", function() {
				activeThumb(id); 
			});
			*/
		}
		else
		{
			//$('#image img').fadeOut('normal');
			loadImg(id, cst_pathToImages+lstPhotos[id], false);
			//activeThumb(id);
			
		}
		
		// POSITIONNEMENT
		if (slideShowActive)
		{
			// scroll thumbarea to see the thumb on the left		
			var diff = (parseInt($("#thumbs").css("left")) + parseInt(widthThumbAndWhite*id));
			if (diff <0) {
				$("#thumbs").css("left", (-1*parseInt(widthThumbAndWhite*id)) + "px");
			}
			
			// scroll thumbarea to see the thumb on the right
			// diff2 = différence entre taille de l'espace de visionage des vignettes et l'abscisse de la photo en cours
			
			var diff2 = parseInt($("#thumbarea").css("width")) - parseInt(widthThumbAndWhite*id)
			//dbg("diff " + diff + " - " + "diff2 " + diff2 + " - " + "left " + $("#thumbs").css("left"));
			if (diff2<=0) {			
				$("#thumbs").css("left", (diff2 - parseInt(widthThumbAndWhite)) + "px");
			}
		}
		currentImage = id;
	}
	
	// ===================================================
	function loadImg(id, imgSrc, launchSlideShow) {
		var img = new Image();  
		$(img)
			.attr('class', 'bigImage')
			.load(function () {      
				$(this).hide();
				$('#image').removeClass('loadingEnvironnement').append(this);          				
				$(this).fadeIn(1200); 
				if (launchSlideShow) { slideShowTimer = window.setTimeout(playSlideShow, 4000); }
			})
			.error(function () {      
				// notify the user that the image could not be loaded    
			})        
			.attr('src', imgSrc);
			activeThumb(id);
	}
	
	
	// ===================================================
	function activeThumb(id)
	{
		$("#thumbs img").css({ border:"0px solid red", opacity:"0.5" });
		$("li[@value="+id+"] img").css( { border:"0px solid red", opacity:"1" } );
	}
	
	// ===================================================
	// right arrow and slide right
	var timerSlideRight = null;
	$("#slideRight").hover(function(){
		dbg("slideRight OVER");
		clearInterval(timerSlideRight); 
		timerSlideRight = setInterval(slideRight, speedInterval); 		
	}, function() {
		dbg("slideRight OUT");
		clearInterval(timerSlideRight); 
	});	
	function slideRight()
	{		
		//dbg(widthThumbs + ' - ' + $("#thumbarea").css("width") + ' | ' + $("#thumbs").css("left"));
		if (parseInt($("#thumbs").css("left")) >= (parseInt($("#thumbarea").css("width")) - parseInt(widthThumbs)))
		{
			var newPos = parseInt($("#thumbs").css("left")) - speedScroll;
			$("#thumbs").css("left", newPos + "px");
		}		
	}
	
	// ===================================================
	// left arrow and slide left
	var timerSlideLeft = null;
	$("#slideLeft").hover(function(){
		dbg("slideLeft OVER");
		clearInterval(timerSlideLeft); 
		timerSlideLeft = setInterval(slideLeft, speedInterval); 		
	}, function() {
		dbg("slideLeft OUT");
		clearInterval(timerSlideLeft); 
	});
	function slideLeft()
	{
		var currentPos = parseInt($("#thumbs").css("left"));
		if (currentPos<=0)
		{
			var newPos = parseInt($("#thumbs").css("left")) + speedScroll;
			$("#thumbs").css("left", newPos + "px");
		}
	}
	
	// ===================================================
	function getEltWidth(eltId)
	{
		var elt = document.getElementById(eltId);
		if (document.all)
			return elt.offsetWidth;
		else 
			return elt.clientWidth;
	}
	

	function fadeImageEnvironnement()
	{
			$("#divEnvironnementGallery").css("visibility", "visible");
			$("#divVerticalLine").css("visibility", "visible");
			$("#divEnvironnementBkg").animate({ opacity: 'hide' }, "slow", "linear");
			displayFirstImage();
	}

	function fadeImage()
	{
		
			$("#div"+typePage+"Gallery").css("visibility", "visible");
			$("#divVerticalLine").css("visibility", "visible");
			$("#div"+typePage+"Bkg").animate({ opacity: 'hide' }, "slow", "linear");
			displayFirstImage();
	}

	
	if (launchGallery)
	{	
		windowOnLoad();
		if (launchFade) { timerSlideFadeImage = setTimeout(fadeImage, 3000); }
		else { displayFirstImage(); }
//		$("#thumbarea").hide();
//		alert($("#slideLeft").css("top") + " - " + $("#slideLeft").css("left"));
	}
	else
	{
		$("#image").hide();
		$("#slideLeft").hide();
		$("#slideRight").hide();
	}
	//playSlideShow();

});