// JavaScript Document

var diapo;
var village;
var num;
var sens;
var diapoOK;//détermine si le diaporama doit se lire ou pas;
var justClicked;

$(document).ready(function(){
	
	$("#menu a").click(function(){fCliqueInt(this);return false;});
	function fCliqueInt(element){
		$("#page").animate({opacity: 0}, 1500,  "expoEaseInOut", function(){window.location=element.href;});
	}
	
	diapoOK = true;
	village = $("#villages li:eq(0)").attr("id");
	num = 0;
	sens = true;
	justClicked = true;
	
	tabVillages = new Array();
	
	
	$("#villages a").each(function(i){
		tabVillages[i]=$("#villages li:eq("+i+")").id;
		$("#villages a:eq("+i+")").click(function(){nouveauDiaporama(this.parentNode.id); return false;});
	});
		
	$("#fondTexteNoir").css("opacity", 0);
	$("#fondTexteNoir").css("display", "block");
	$("#texte").css("display","block")
	.css("opacity", 0)
					;
	$("#villages").css("opacity",0)
					.css("display","block");
	
	$("#diaporamas li").css("opacity",0);
	
	$("#page").css("display","block");
	
	
	$("#diaporamas ul").each(function(i){
		var thisNumImg = $("#diaporamas ul:eq("+i+") li").length*715+2;
		$(this).css("width", thisNumImg+"px");
	});

	$("#villages").animate({opacity: 1, left: 0}, 1500, "expoEaseInOut", function(){fvillage()});
});

function nouveauDiaporama(idDiapo){
	village=idDiapo; 
	num=0; 
	sens=true; 
	justClicked = true; 
	$("#stopDiapo").css("display", "block");
	fvillage();
}

function fvillage(){
	stopDiaporama();
	num=0;
	sens=true;
	$("#aDroite").remove();
	$("#aGauche").remove();
	dispTexte();
}

function stopDiaporama(){
	$("#diaporamas ul").each(function(i){
		$("#diaporamas ul:eq("+i+")").stop(true, false)
		$("#diaporamas ul:eq("+i+")").each(function(j){
			$("#diaporamas ul:eq("+i+") li:eq("+j+")").stop(true, false);
		});
	});
	$("#texte").stop(true, false);
	$("#fondTexteNoir").stop(true, false);
}

function dispTexte(){
	$("#texte").animate({opacity: 0}, 500, "expoEaseIn");//disparition du texte
	$("#fondTexteNoir").animate({opacity: 0}, 500, "expoEaseIn", function(){dispDiapo()});//disparition du fondTexteNoir
}

function dispDiapo(){
	$("#diaporamas").animate({opacity: 0}, 500, "expoEaseIn",function(){masqueDiapos()});//dispatition des diapos
}

function masqueDiapos(){
	stopDiaporama();
	$("#diaporamas li").css("opacity", 0);
	$("#diaporamas").css("opacity", 1);					
	$("#diaporamas ul").css("left", 0);					
	$("#diaporamas ul").css("display", "none");					
	fAfficheVillage();
}

function fAfficheVillage(){
	$(".textevillages").css("display", "none");
	$("#texte"+village).css("display", "block");
	$("#texte").animate({opacity: 1, top: "243px"}, 500, "expoEaseIn");
	$("#diapo"+village).css("display", "block");					
	diapoOK = true; //on redémarre le diaporama
	$("#fondTexteNoir").animate({opacity: .7, top: "243px"}, 500, "expoEaseIn", afficheDiaporama());
	
	$("#stopDiapo").click(function(){
		diapoOK = false; 
		$("#stopDiapo").css("display", "none");
	});
}


function afficheDiaporama(){
	$("#villages a").css("color", "rgb(40,20,8)");
	$("#villages #"+village+" a:eq(0)").css("color", "rgb(183,207,91)");
	$("#villages a").each(function(i){
		if($("#villages a:eq("+i+")").parent().attr("id")!=village){
			$("#villages a:eq("+i+")").mouseover(function(){$(this).css("color", "rgb(183,207,91)")});
			$("#villages a:eq("+i+")").mouseout(function(){$(this).css("color", "rgb(40,20,8)")});
		}
		else{
			$("#villages a:eq("+i+")").unbind("mouseout");
		}
	});
	prepareImageDiapo();
}

function prepareImageDiapo(){
	if(!document.getElementById("diapo"+village).getElementsByTagName("li")[num].getElementsByTagName("img")[0]){
		createPhotoDiapo();
	}
	else {
		afficheImageDiapo();
	}
}

function createPhotoDiapo(){
	licourant = $("#diapo"+village+" li:eq("+num+")");
	imDiapo = document.createElement("img");
	imDiapo.src = "res/img/vignes/diapo/"+village+"-"+num+".jpg";
	imDiapo.alt = licourant.text();
	imDiapo.title = licourant.text();
	licourant.text("");
	licourant.append(imDiapo);
	imDiapo.onload=function(){
	   setTimeout(afficheImageDiapo, 1000);
   };
}

function afficheImageDiapo(){//apparition de l'image de diapo;
	//alert("photo "+village+" numero "+num+" chargee");

	$("#diaporamas ul").stop(true, false);
	if(justClicked==true){//c'est la première photo du diaporama qu'on voit
		justClicked=false;
		$("#diapo"+village+" li:eq("+num+")").animate({opacity: 1}, 1000, "expoEaseInOut", function(){if(diapoOK==true)afficheGaucheDroite()});
	}
	else{
		$("#diapo"+village+" li:eq("+num+")").stop(true, false);
		$("#diapo"+village+" li:eq("+num+")").css("opacity", 1);
		
		var tabXDiapo = new Array();
		tabXDiapo[0] = 0;
		$("#diaporamas img").each(function(i){
			tabXDiapo[i+1] = tabXDiapo[i]+parseInt($("#diapo"+village+" img:eq("+i+")").css("width"))+5					   
		});
		var x = tabXDiapo[num]*-1;


		$("#diapo"+village+" li:eq("+num+")").css("opacity", 1);
		$("#diapo"+village).animate({left: String(x)+"px"}, 3000, "expoEaseInOut", function(){	
			afficheGaucheDroite();
		});
	}
}

function afficheGaucheDroite(){
	//alert(num);
	//$("#debug").text($("#debug").text()+"||num afficheGaucheDroite = "+num);
	if($("#diapo"+village+" li").length>1){//si il y a plus d'une diapo
		if(num>0){//si la dipo courante est au moins la deuxième
			//affiche aGauche
			createBouton("aGauche", "<", "revoir la photo precedente", document.getElementById("diaporamas"));
			$("#aGauche").css({left: "5px", bottom: "5px"})
			$("#aGauche").click(function(){
				$("#aDroite").remove();
				$("#aGauche").remove();
				//stopDiaporama();
				//$("#debug").text($("#debug").text()+"||clique gauche. num = "+num+"||");
				sens=false;
				fAfficheSuivante();
			});
			$("#aGauche").mouseover(function(){diapoOK = false});
		}
		else{
			$("#aGauche").remove();
		}
		if(num<$("#diapo"+village+" li").length-1){
			//affiche aDroite
				//alert("afficheDroite");
			var boutonADroite = document.createElement("p");
			boutonADroite.id="aDroite";
			createBouton("aDroite", ">", "voir la photo suivante", document.getElementById("diaporamas"));
			$("#aDroite").css({left: "22px", bottom: "5px"})
			$("#aDroite").click(function(){
				$("#aDroite").remove();
				$("#aGauche").remove();
				//stopDiaporama();
				sens=true;
				fAfficheSuivante();
			});
			$("#aDroite").mouseover(function(){diapoOK = false});
		}
		else{
			$("#aDroite").remove();
		}
	}
	else{
		$("#aDroite").remove();
		$("#aGauche").remove();
	}
	if(diapoOK==true)fAfficheSuivante();
}


function fAfficheSuivante(){//apel de l'image suivante
	if(sens==true){
		if(num<Number($("#diapo"+village+" li").length-1)){
			num++;
			prepareImageDiapo();
		}
		else{
			if(diapoOK==true){
				var villageCourant;
				$("#villages li").each(function(i){
					if($("#villages li:eq("+i+")").attr("id")==village){
						villageCourant=i;
					}
				});
				var villageSuivant = villageCourant+1;
				if(villageSuivant<$("#villages li").length){
					var prochainVillage = $("#villages li:eq("+villageSuivant+")").attr("id");
					//alert(prochainVillage);
					setTimeout(function(){nouveauDiaporama(prochainVillage)}, 3000);
				}
			}
		}
	}
	else{
		if(num>0){
			num--;
			prepareImageDiapo();
			//alert("appel de afficheDiaporama("+num+", "+village+")");
		}
	}
	//$("#debug").text($("#debug").text()+"||"+"num depuis fAfficheSuivante apres calcul : "+num+"||");
}


function mouseOverDiaporama(){
	$("diapo"+village).stop(true, false);
}

function createBouton(i, t, tt, p){
	var bouton = document.createElement("p");
	bouton.id= i;
	p.appendChild(bouton);
	$("#"+i).css("background","rgb(200,200,200)")
		.css("color","rgb(80,80,80)")
		.css("border","1px solid black")
		.css("width","12px")
		.css("height","12px")
		.css("line-height","10px")
		.css("text-align","center")
		.css("font-family","Georgia")
		.css("font-size","12px")
		.css("font-weight","bold")
		.css("position","absolute")
		.css("cursor","pointer")
		.css("padding",0)
		.attr("title", tt)
		.css("opacity",1)
		.text(t);
}