/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* PSEUDO CLASS GARDEN */
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
function Garden(params) {

	defaults = {
		playEnCours: true, // Lecture automatique ou non.
		isSurDisplayed: true // Affichage pleine fenêtre du diaporama ou repli en haut de page.
	};
	params = $.extend(defaults, params);
	
	var isSurDisplayed = params.isSurDisplayed; // true : le diaporama (div #garden-sur) est déplié, false : il est replié en haut.
	var playEnCours = params.playEnCours; // true si la lecture est en cours, false sinon.
	var hauteurFenetre = document.documentElement.clientHeight; // Hauteur de la fenêtre de navigation.
	var hauteurDivMarge = $("#garden-marge").height(); // Hauteur du div #garden-marge en pixels.
	var rapportLargeurHauteurImages = 1.6; // Rapport largeur sur hauteur des images.
	var nbrPhotos = $("#garden-photos").children().length; // Nombre de photos du diaporama.	
	var displayedPhoto = 0; // Id de la photo actuellement affichée.
	var fadingPhoto = -1; // Id de la photo en train de fader (prochainement affichée, sauf si interrompue)
	var photoDestination = 0; // Id de la photo que l'utilisateur souhaite finalement afficher.	
	var positionPcts = 0; // Position courante du curseur.
	var lecture; // Objet lecture.

	/*------------------------------------------------------------------------*/
	/*------------------------------------------------------------------------*/
	/* FONCTIONS UTILITAIRES */
	/*------------------------------------------------------------------------*/
	/*------------------------------------------------------------------------*/
	/*
	 * Recalcule la hauteur de la fenêtre de navigation
	 */
	function resetHauteurFenetre() {
		hauteurFenetre = document.documentElement.clientHeight;
	}
	/*------------------------------------------------------------------------*/
	/*
	 * Retourne la photo correspondant à une abscisse x (en %);
	 */
	function getPhotoByAbscisse(x) {
		return Math.floor(x * nbrPhotos / 100);
	}
	/*------------------------------------------------------------------------*/
	/*
	 * Précharge les images.
	 */
	function precharger() {
		if(playEnCours)
			reprendreLecture = true;
		pause();
		var tabImages = new Array();
		$("#garden-photos img").each(function() {
			tabImages.push($(this).attr('src'));
		});
		var compteurChargement = 0;		
		tabChargements = new Array();
		for(var i in tabImages) {			
			tabChargements[i] = new Image();
			tabChargements[i].onload = function() {
				compteurChargement++;
				if(compteurChargement==tabImages.length) {
					$("img#gardenPhoto_img0").attr('src', 'img/garden/photos/chargement.gif');
					if(reprendreLecture)
						play();	
				}
			};
			tabChargements[i].src = tabImages[i];			
		}
	}
	/*------------------------------------------------------------------------*/
	/*------------------------------------------------------------------------*/
	/* MODIFICATIONS DE L'AFFICHAGE */
	/*------------------------------------------------------------------------*/
	/*------------------------------------------------------------------------*/
	/*
	 * Fait monter (replie) le div #garden-sur.
	 */
	function up() {
		$("a.garden-fleche").css('display', 'none');
		$("#garden-sur").animate({
			height: hauteurDivMarge
		}, 1000, function() {
			isSurDisplayed = false;                       
			//resizeImages();
			$("a#garden-btnUpDown img").attr('src', 'img/garden/down.png');
		});
	}
	/*------------------------------------------------------------------------*/
	/*
	 * Fait descendre (déplie) le div #garden-sur.
	 */
	function down() {
		$("#garden-sur").animate({
			height: hauteurFenetre
		}, 1000, function() {
			isSurDisplayed = true;
			//resizeImages();
			$("a.garden-fleche").css('display', 'block');
			$("a#garden-btnUpDown img").attr('src', 'img/garden/up.png');
		});
	}
	/*------------------------------------------------------------------------*/
	/*
	 * Resize les images sans les déformer ni laisser apparaître de marges (donc par tronquage).
	 */
	function resizeImages() {
		largeurConteneur = $("#garden-sur").width();
		hauteurConteneur = $("#garden-sur").height();		
		actuelRapport = largeurConteneur / hauteurConteneur;		
		if(actuelRapport >= rapportLargeurHauteurImages) { // Resizing en faveur de la largeur
			$("#garden-photos img").css('width', '100%');
			$("#garden-photos img").css('height', 'auto');
		} else { // Resizing en faveur de la hauteur
                        $("#garden-photos img").css('width', 'auto');
                        $("#garden-photos img").css('height', $("#garden-photos").height());
		}	
	}
	/*------------------------------------------------------------------------*/
	/*
	 * Masque tous les photos (display:none et z-index:1000) sauf la photo actuellement affichée.
	 */
	function masquerPhotos() {
		for(i=0; i<=nbrPhotos; i++) {
			if(i != displayedPhoto) {
				$("img#gardenPhoto_img"+i).css('display', 'none');
				$("img#gardenPhoto_img"+i).css('z-index', '1000');
			} else {
				$("img#gardenPhoto_img"+i).css('display', 'block');
				$("img#gardenPhoto_img"+i).css('z-index', '2000');					
			}
		}			
	}

	/*------------------------------------------------------------------------*/
	/*
	 * Termine l'effet de fade en cours.
	 */
	function stopFade(numImage) {
		$("img#gardenPhoto_img"+displayedPhoto).css('z-index', '1000');
		$("img#gardenPhoto_img"+displayedPhoto).css('display', 'none');
		$("img#gardenPhoto_img"+numImage).css('z-index', '2000');
		$("img#gardenPhoto_img"+numImage).css('display', 'block');
		displayedPhoto = numImage;	
		fadingPhoto = -1;
	}
	/*------------------------------------------------------------------------*/
	/*
	 * Affiche une nouvelle image par effet de fade.
	 */
	function switchImage() {
		if(fadingPhoto != -1)
			stopFade(fadingPhoto);
		fadingPhoto = photoDestination;
		$("img#gardenPhoto_img"+photoDestination).css('z-index', '3000');
		$("img#gardenPhoto_img"+photoDestination).fadeIn(1200, function() {
			stopFade(photoDestination);
		});		
	}
	/*------------------------------------------------------------------------*/
	/*
	 * Remplit la jauge de positionPcts %.
	 */
	function remplirJauge() {
		$("#garden-jaugeIn").css('width', positionPcts+'%');
	}
	/*------------------------------------------------------------------------*/
	/*
	 * Place les numéros des photos.
	 */
	function placeNumsPhotos() {
		for(i=0; i<nbrPhotos; i++) {
			positionDebutSectionPcts = 100 / nbrPhotos * i;
			$("#garden-btnContainer").append('<div id="num'+i+'" style="position: absolute; left: ' + (1+positionDebutSectionPcts) + '%;">0' + (i+1) + '</div>');
		}
	}
	/*------------------------------------------------------------------------*/
	/*
	 * Place le bouton play/pause au niveau de la photo de destination.
	 */
	function pacerBtnPlayPause() {
		positionDebutSectionPcts = 100 / nbrPhotos * photoDestination;
		$("a#btnPlayPause").css('left', (3+positionDebutSectionPcts)+'%');
	}
	/*------------------------------------------------------------------------*/
	/*
	 * Avance la jauge de pctsAvance %.
	 */
	function avancer(pctsAvance) {
		positionPcts += pctsAvance;
		if(positionPcts > 100)
			positionPcts = 0;
		remplirJauge(positionPcts);
		if(getPhotoByAbscisse(positionPcts) != photoDestination) {
			photoDestination = getPhotoByAbscisse(positionPcts);
			switchImage();
			pacerBtnPlayPause();
		}
	}
	/*------------------------------------------------------------------------*/
	/*
	 * Passe le slider en lecture.
	 */
	function play() {
		vitesse = 5; // vitesse d'avancement en % par seconde.
		refreshTime = 0.02; // délai de rafraîchissement du curseur entre chaque pas, en secondes.
		clearInterval(lecture);
		avanceeParRefresh = vitesse * refreshTime;		
		lecture = setInterval(function(){
			avancer(avanceeParRefresh);
		}, refreshTime*1000);
		$("a#btnPlayPause img").attr('src', 'img/garden/pause.png');
		playEnCours = true;		
	}
	/*------------------------------------------------------------------------*/
	/*
	 * Stoppe la lecture du slider.
	 */
	function pause() {
		clearInterval(lecture);
		$("a#btnPlayPause img").attr('src', 'img/garden/play.png');
		playEnCours = false;
	}
	/*------------------------------------------------------------------------*/
	/*------------------------------------------------------------------------*/
	/* INTERFACE */
	/*------------------------------------------------------------------------*/
	/*------------------------------------------------------------------------*/
	/*
	 * Evénement redimensionnement de la fenêtre.
	 */
	this.resizingFenetre = function() {
		resetHauteurFenetre();
		var hauteurDivSiteContainer = hauteurFenetre - hauteurDivMarge;
		$("#garden-siteContainer").css('height', hauteurDivSiteContainer+'px');		
		if(isSurDisplayed) {
			$("#garden-sur").css('height', hauteurFenetre+'px');
			$("a.garden-fleche").css('display', 'block');
			$("a#garden-btnUpDown img").attr('src', 'img/garden/up.png');
		}
		else {
			$("#garden-sur").css('height', hauteurDivMarge+'px');
			$("a.garden-fleche").css('display', 'none');
			$("a#garden-btnUpDown img").attr('src', 'img/garden/down.png');
		}
		resizeImages();
	};
	/*------------------------------------------------------------------------*/
	/*
	 * Evènement clic sur le bouton upDown : repliage ou dépliage du div #garden-sur.
	 */
	this.upDown = function() {
		if(isSurDisplayed)
			up();
		else
			down();
		
	};
	/*------------------------------------------------------------------------*/
	/*
	 * Evénement passage à la photo suivante.
	 */
	this.next = function() {
		if(photoDestination == nbrPhotos-1)
			photoDestination = 0;
		else
			photoDestination++;
		switchImage();
		positionPcts = 100 / nbrPhotos * photoDestination;
		remplirJauge();
		pacerBtnPlayPause();
	};
	/*------------------------------------------------------------------------*/
	/*
	 * Evénement passage à la photo précédente.
	 */
	this.previous = function() {
		if(photoDestination==0)
			photoDestination = nbrPhotos-1;
		else
			photoDestination--;
		switchImage();
		positionPcts = 100 / nbrPhotos * photoDestination;
		remplirJauge();
		pacerBtnPlayPause();
	};
	/*------------------------------------------------------------------------*/
	/*
	 * Evénement clic sur le slider à la position d'abscisse xClicPxls.
	 */
	this.clicOnSlider = function(xClicPxls) {
		positionPcts = xClicPxls * 100 / $("#garden-slider").width();
		remplirJauge();
		photoDestination =getPhotoByAbscisse(positionPcts);
		if(photoDestination != displayedPhoto) {
			pacerBtnPlayPause();
			switchImage();
		}
	};
	/*------------------------------------------------------------------------*/
	/*
	 * Evénement clic sur le bouton play / pause.
	 */
	this.playPause = function() {
		if(playEnCours)
			pause();
		else
			play();
	};
	/*------------------------------------------------------------------------*/
	/*------------------------------------------------------------------------*/
	/* CONSTRUCTION ET RETURN */
	/*------------------------------------------------------------------------*/
	/*------------------------------------------------------------------------*/	
	this.resizingFenetre();
	masquerPhotos();
	placeNumsPhotos();
	pacerBtnPlayPause();
	if(playEnCours)
		play();	
	//precharger();	
	return this;
	/*------------------------------------------------------------------------*/
}
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* EXECUTION */
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
$(document).ready(function() {
	// Instanciation.
	garden = new Garden({
		playEnCours: true,
		isSurDisplayed: true
	});
	// Event redimensionnement de la fenêtre.
	$(window).resize(function() {
		garden.resizingFenetre();
	});
	// Event clic sur l'un des boutons Monter/descendre
	$("a#garden-btnUpDown, a#garden-btnContact").click(function() {
		garden.upDown();
		return false;
	});
	// Event clic sur la flêche Précédente.
	$("a#garden-btnPrec").click(function() {
		garden.previous();
		return false;
	});
	// Event clic sur la flêche Suivante.
	$("a#garden-btnSuiv").click(function() {
		garden.next();
		return false;
	});	
	// Event clic sur le slider.
	$("#garden-slider").click(function(e){
		garden.clicOnSlider(e.pageX - this.offsetLeft);
	});	
	// Event clic sur le bouton play / pause.
	$("a#btnPlayPause").click(function() {
		garden.playPause();
		return false;
	});
});
/*----------------------------------------------------------------------------*/