// Code optimized and commented by Yacine SOUADDA

var diapo = {

	nbSlide : 0, //Nombre de slides dans l'animation
	nbCurrent : 1, //Element de départ si on préfére
	elemCurrent : null, //Variable qui va permettre de stocker l'élement html actuellement affiché
	elem : null, //Variable qui va nous dire dans quel div je veux initialiser mon diaporama afin de rendre l'animation plus dynamique
	timer : null,
	
	init : function(elem){
		this.nbSlide = elem.find(".slide").length; //On récupère dans le code le nombre de slide
		
		//navigation
		elem.find(".navigation img").click(function(){diapo.gotoSlide($(this).attr("alt"));})
		
		//initialisation du diaporama
		this.elem = elem; //Définir la variabla "elem"
		elem.find(".slide").hide(); //cacher tous les elements contenant la classe slide
		elem.find(".slide:first").show(); //Faire apparaitre l'élément contenant le premier ".slide"
		this.elemCurrent = elem.find(".slide:first"); //Actualiser la variable elemCurrent avec le premier slide qu'on fait apparaitre
		this.elem.find(".navigation img[alt='1']").addClass("active"); //Ajoute la class"active" à la première image du navigateur pour l'initialiser
		
		//Timer
		diapo.play();

		//Stop quand la souris passe dessus
		elem.mouseover(diapo.stop);
		elem.mouseout(diapo.play);
	},

	gotoSlide : function(num){
		if(num==this.nbCurrent){return false;} //test si l'image qu'il va charger est la même que celle qui est visible
		/* Animation en fadeIn/fadeOut
		this.elemCurrent.fadeOut();
		this.elem.find("#slide"+num).fadeIn();
		*/
		/*Animation en slide*/
		var sens =1;
		//if(num<this.nbCurrent){sens = -1;}
		var cssDeb = {"left" : sens*this.elem.width()};
		var cssFin = {"left" : -sens*this.elem.width()};
		this.elem.find("#slide"+num).show().css(cssDeb);
		this.elem.find("#slide"+num).animate({"top":0,"left":0},500);
		this.elemCurrent.animate(cssFin,500);
		this.elem.find(".navigation img[alt]").removeClass("active"); //Enlève la class "active" à toutes les images de la navigation
		this.elem.find(".navigation img[alt="+num+"]").addClass("active"); //Ajoute la class "active" à l'image sélectionné afin d'en faire un marqueur de page
		this.nbCurrent = num;
		this.elemCurrent = this.elem.find("#slide"+num);
	},
	
	next : function(){
		var num = this.nbCurrent+1;
		if(num>this.nbSlide){
			num = 1;
		}
		this.gotoSlide(num);
	},
	
	stop : function(){
	window.clearInterval(diapo.timer);
	},

	play : function(){
	window.clearInterval(diapo.timer);
	diapo.timer = window.setInterval("diapo.next()",5000);
	}

}

$(function(){
diapo.init($('#infosSlideArea')); //quand la fonction sera complétement chargé, démarrer la fonction diapo dans la div contenant l'id en paramètre dans la fonction
});