// pfichier : string : chemin du fichier contenant les informations (txt ou xml).
// pid : string : identifiant de la div devant contenir le diaporama à afficher.
// psens : int[0->2] : si 0, défilement dans l'ordre normal | si 1, défilement dans l'ordre inverse | si 2, défilement au hasard
// pintervalle : int{> 0} : intervalle en secondes entre chaque changement automatique.
// ptransition
// pfleches : [string]
//			(fac) [0] : string : id de la div de la flèche gauche
//			(fac) [1] : string : id de la div de la flèche droite
// ppuces : [id, img1, img2]
//			(fac) [0] : string : identifiant de la div allant contenir les liens
//			(fac) [1] : string : image (point, vignette...) indiquant une image non séléctionnée
//			(fac) [2] : string : image correspodnant à l'image en cours
// plegende : (facultatif) string : id de la div contenant la légende
// ppreloader : (facultatif) string : id de l'élément faisant office de preloader. Le CSS display de cet élément passera à none une fois les images chargées
// pvignette : booléen : afficher ou non les vignettes
function Diaporama(pfichier, pid, psens, pintervalle, ptransition, pfleches, ppuces, plegende, ppreloader, pvignette)
{
	var fichier;
	var iddiv;
	var sens;
	var intervalle;
	var transition;
	var sync;
	var vitesseTr;
	var tiles;
	var fleches;
	var puces;
	var legende;
	var easein;
	var easeout;
	var preloader;
	var vignette;

	var titre = "Sans titre";
	// Tableau contenant les informations des photos. medias[0->n] : {'img' : chemin de l'image, 'alt' : optionnel - description, 'largeur' : largeur de l'image sous la forme "0000px", 'hauteur' : hauteur de l'image sous la forme "000px"}
	var medias;
	
	var cycleDiapo;
	
	
	// Lit le fichier XML et remplit les variables de l'objet Diaporama
	this.lireFichierXML = function() {
		var lignes = false;
		
		$.ajax({
			async: false,
			type: 'GET',
			url: this.fichier,
			success: function(xml) {
				medias = new Array($(xml).find('photo').size());
				titre = $(xml).find('titre').text();
				var dossier = $(xml).find('dossier').text();
				var cpt = 0;
				$(xml).find('photo').each(function() {
					medias[cpt] = {'img' : dossier+"/"+$(this).find('nom').text(), 'alt' : $(this).find('legende').text(), 'width' : -1, 'height' : -1};
					cpt++;
				});
			}
		});
	}

	// Remplit la div de l'ID indiqué par des <img /> au style adapté à la taille
	this.remplirDiv = function() {
		for(var cpt = 0; cpt < medias.length; cpt++)
		{	$('#'+this.iddiv).append('<img src="'+medias[cpt].img+'" alt="'+medias[cpt].alt+'" class="diapo" />');	}
	}

	// Crée la gestion de puces permettant l'accès direct à une image
	this.eventsLiens = function() {
		var l = $('#'+this.puces[0]);
		var self = this;
		
		for(var cpt = 0; cpt < medias.length; cpt++)
		{
			l.append('<img src="'+this.puces[(cpt == 0 ? 2 : 1)]+'" id="'+this.puces[0]+'_'+cpt+'" class="puce" />');
			(function (cpt) {
				$('#'+self.puces[0]+'_'+cpt).click(function() { $('#'+self.iddiv+'_vignette').remove(); self.cycleDiapo.cycle(cpt); });
				if(self.vignette)
				{
					$('#'+self.puces[0]+'_'+cpt).mouseover(function() {
						var decalRight =  parseInt( $(".puces").css("margin-right").slice(0, -2) )
								+ parseInt(	  (medias.length - cpt - 1)
										* (	  parseInt( $(".puce:first").css("width").slice(0, -2) )
											+ parseInt( $(".puce:first").css("margin-right").slice(0, -2) )
										  )
									  )
								- parseInt( medias[cpt].width * self.vignette / 200 )
								+ parseInt(	  parseInt( $(".puce:first").css("width").slice(0, -2) )
										/ 2
									  );
						var decalTop =	  parseInt( $('#'+self.puces[0]).parent().css("margin-top").slice(0, -2) )
								- ( medias[cpt].height * self.vignette / 100 )
								- 10;
								
						decalTop = Math.round(decalTop);

						var img = $('<img id="'+self.iddiv+'_vignette_'+cpt+'" src="'+medias[cpt].img+'"/>').css("margin-right", decalRight).css("width", self.vignette+"%").css("height", self.vignette+"%");
						var e = $('<div id="'+self.iddiv+'_vignette" class="vignette"></div>').css("margin-top", decalTop).append(img).hide();
						
									
						$('#'+self.iddiv).after(e);
						e.fadeIn(300);
					});
					$('#'+self.puces[0]+'_'+cpt).mouseout(function() { $('#'+self.iddiv+'_vignette').fadeOut(200).remove(); });
				}
			})(cpt);
		}
	}
	
	
	// Démarrage du diaporama
	// Effecue toutes les tâches de démarrage
	this.demarrer = function() {
		this.lireFichierXML(this.fichier);

		// On remplit sur le DOM la div d'id "diaporama" avec les infos contenues dans la variable medias crée par remplirVars
		this.remplirDiv();
		
		var self = this;
		var hauteur = $('#'+this.iddiv).css("height").slice(0, -2);
		var largeur = $('#'+this.iddiv).css("width").slice(0, -2);
		
		// Dans le cas d'une transition de type "tiles", création de la variable
		if(this.transition instanceof Object)
		{
			if(this.transition.tiles == 'quadrillage') {
				var fullIndexPool = [];
				var indexPool = [];

				for(i=0; i < this.transition.colonnes*this.transition.lignes; i++)
				{	fullIndexPool[i] = i;	}
				
				this.tiles =
				{
					cols: this.transition.colonnes,
					cssAfter:
					{	top: 0	},
					cssBefore:
					{	top: 0	},
					order:
						function(i)
						{
							if(!indexPool.length)
							{
								indexPool = fullIndexPool.slice(0);
							}

							var
								randomIndex = Math.floor(Math.random()*indexPool.length),
								returnIndex = indexPool[randomIndex];
								indexPool.splice(randomIndex, 1);

							return returnIndex;
						},
					rows: this.transition.lignes
				};
			}
			else if(this.transition.tiles == "lignesVert") {
				this.tiles =
				{
					cols: this.transition.nb,
					cssAfter:
					{	top: 0	},
					cssBefore:
					{	top: (this.transition.sens ? -200 : 200)	}
				}
			}
			else if(this.transition.tiles == "lignesHorz") {
				this.tiles =
				{
					cssAfter:
					{	left: 0	},
					cssBefore:
					{
						top: 0,
						left: (this.transition.sens ? -200 : 200)
					},
					rows: this.transition.nb
				}
			}
			else if(this.transition.tiles == "spirale") {				
				var addition = true;
				var posx = Math.round(this.transition.nb/2);
				var posy = posx;
				var ordre = [(posy-1)*this.transition.nb+posx-1];
				
				for(var cpt = 1; cpt < this.transition.nb+1; cpt++)
				{
					for(var cpt1 = 0; cpt1 < cpt; cpt1++)
					{
						if(addition)	{	posx++;	}
						else		{	posx--;	}
						ordre.push((posy-1)*this.transition.nb+posx-1);
					}
					if(cpt != this.transition.nb)
					{
						for(var cpt2 = 0; cpt2 < cpt; cpt2++)
						{
							if(addition)	{	posy++;	}
							else		{	posy--;	}
							ordre.push((posy-1)*this.transition.nb+posx-1);
						}
					}
					addition = !addition;
				}
				

				this.tiles =
				{
					cols: this.transition.nb,
					cssAfter:
					{	top: 0	},
					cssBefore:
					{	top: 0	},
					order:	function(i)
						{	return ordre[i];	},
					rows: this.transition.nb,
					tileAnimationDelay: 5
				}
			}
			
			this.transition = 'tiles';
		}
		
		// On masque tous les éléments du diaporama, ils ne s'afficheront qu'une fois la page prête
		$('#'+this.iddiv).css("visibility", "hidden");
		$('#'+this.puces[0]).css("visibility", "hidden");
		$('#'+this.fleches[0]).css("visibility", "visible");
		$('#'+this.fleches[1]).css("visibility", "visible");
		$('#'+this.preloader).css("visibility", "visible");
		
		var self = this;
		// Pré-loader
		$(window).load(function() {
			// La page et les images sont chargés. On masque l'élément de préchargement.
			$('#'+self.preloader).css("display", "none");
			// On retire l'attribut CSS "display: none;" des éléments du diaporama (flèches, etc.) 
			$('#'+self.iddiv).css("visibility", "visible");
			$('#'+self.puces[0]).css("visibility", "visible");
			$('#'+self.fleches[0]).css("visibility", "visible");
			$('#'+self.fleches[1]).css("visibility", "visible");

			self.cycleDiapo = $('#'+self.iddiv).cycle({
				backwards: (self.sens == 1 ? true : false),
				random: (self.sens == 2 ? true : false),
				timeout: self.intervalle,
				next: (self.fleches ? '#'+self.fleches[1] : null),
				prev: (self.fleches ? '#'+self.fleches[0] : null),
				speed: (self.intervalle < 2000 ? 500 : 1000),
				easeIn: (self.easein.length > 1 ? self.easein : null),
				easeOut: (self.easeout.length  > 1 ? self.easeout : null),
				before: function(prec, suiv, opts) {
					// Changement de la puce indiquant l'image en cours
					for(var cpt = 0; cpt < medias.length; cpt++)
					{
						if(medias[cpt].img.substring(medias[cpt].img.lastIndexOf("/")+1) == suiv.src.substring(suiv.src.lastIndexOf("/")+1))
						{	$('#'+self.puces[0]+'_'+cpt).attr("src", self.puces[2]);	}
						else
						{	$('#'+self.puces[0]+'_'+cpt).attr("src", self.puces[1]);	}
					}
					
					// Positionnement de l'image si elle est trop grande
					// if(suiv.height > hauteur)
					// {	$(suiv).css("margin-top", -(suiv.height - hauteur) / 2);	}
					// if(suiv.width > largeur)
					// {	$(suiv).css("margin-left", -(suiv.width - largeur) / 2);	}
					
					// Adaptation de la transition dans le cas de transitions différentes si -> gauche ou -> droite
					//alert(opts.currSlide);
				},
				after: function(prec, suiv, opts) {
					// Changement de la légende
					$('#'+self.legende).css("display", (suiv.alt.length > 1 ? "block": "none"));
					$('#'+self.legende).html(suiv.alt);
				},
				fx: self.transition,
				tiles: self.tiles,
				sync: self.sync,
				speed: self.vitesseTr
			});
		});
		
		// On remplit l'élément du DOM d'id indiqué avec les numéros des medias à afficher (permettant d'accéder directement à un élément)
		if(this.puces)
		{	this.eventsLiens();	}

		for(var cpt = 0; cpt < medias.length; cpt++)
		{
			medias[cpt].width = $('#'+this.iddiv+' img:eq('+cpt+')').width();
			medias[cpt].height = $('#'+this.iddiv+' img:eq('+cpt+')').height();
		}
	}
	
	this.cycleDiapo = null;
	this.fichier = pfichier;
	this.iddiv = pid;
	this.sens = psens;
	this.intervalle = pintervalle * 1000;
	this.transition = ptransition.nom;
	this.sync = ptransition.sync;
	this.vitesseTr = (ptransition.vitesse ? ptransition.vitesse * 1000 : 1000);
	this.fleches = pfleches;
	this.puces = ppuces;
	this.legende = plegende;
	this.easein = ptransition.ease[0];
	this.easeout = ptransition.ease[1];
	this.preloader = ppreloader;
	this.vignette = (pvignette > 0 ? pvignette : false);

	this.demarrer();
}

