//--------------------------------------------------------------------------
//	Cicle de chargement des vignettes
//--------------------------------------------------------------------------

var imgCycleCount = 0;
var thumbCount = 6;

/**
 * Lancement du procesus.
 * imgTotal = nombre total de vignettes
 * idPrefix = préfixe de l'id des images
 */ 
function cycleFadeFn(imgTotal, idPrefix) {
	if (imgCycleCount < imgTotal) { //<-- Tant qu'on ne dépasse le nombre total d'images, on continu...
		initImage (idPrefix + imgCycleCount, imgTotal, idPrefix);
	}
}

/**
 * Initialisation des propriétés des vignettes.
 */
function initImage(imageId, imgTotal, idPrefix) {
	image = document.getElementById(imageId);
	setOpacity (image, 0); //<-- Opacité de l'image à 0.
	image.style.visibility = 'visible'; //<-- visibility = hidden dans le fichier css
	onMouseOverEvent(image); //<-- onMouseOver
	onMouseOutEvent(image); //<-- onMouseOut
	fadeIn (imageId, 0, imgTotal, idPrefix);
}

/**
 * Modifie l'opacité d'une vignette.
 */
function setOpacity(imageId, opacity) {
	if (opacity == 100) {
		opacity = 99.999;
	}
	imageId.style.filter = "alpha(opacity:" + opacity + ")"; //<-- Internet Explorer
	imageId.style.KHTMLOpacity = opacity / 100; //<-- Konqueror
	imageId.style.MozOpacity = opacity / 100; //<-- Mozilla
	imageId.style.opacity = opacity / 100; //<-- standard du w3c
}

/**
 * Fait apparaître progressivement une vignette.
 * imageId = idPrefix + imgCycleCount
 * opacity = opacité de départ
 */
function fadeIn(imageId, opacity, imgTotal, idPrefix) {
	if (document.getElementById) {
		image = document.getElementById(imageId);
		image.parentNode.parentNode.style.background = 'rgb(220,220,220)'; //<-- cadre autour de l'image
		if (opacity <= 100) { //<-- Augmente l'opacité j'usqu'à 100.
			setOpacity (image, opacity);
			opacity	+= 10; //<-- Incrémentation de 10 en 10 de l'opacité.
			window.setTimeout("fadeIn('" + imageId + "'," + opacity + "," + imgTotal + ",'" + idPrefix + "')", 50);//<-- Object window.setTimeout(String fonc, Integer delai)
		} else {
			imgCycleCount ++; //<-- Quand l'opacité est à 100, passe à l'image suivante.
			cycleFadeFn (imgTotal, idPrefix); //<-- On recommence avec l'image suivante.
		}
	}
}

//--------------------------------------------------------------------------
//	Gestionnaires d'événement sur les vignettes
//--------------------------------------------------------------------------

//--> onMouseOver
function onMouseOverEvent(image) {
	if (document.getElementById) {
		image.parentNode.parentNode.onmouseover = function() {
			setOpacity(image, 70);
		}
	}
}

//--> onMouseOut
function onMouseOutEvent(image) {
	if (document.getElementById) {
		image.parentNode.parentNode.onmouseout = function() {
			setOpacity(image, 100);
		}
	}
}

//--------------------------------------------------------------------------
//	Mouvement des images
//--------------------------------------------------------------------------

var moveAr = new Array(); //<-- Contient tous les objects animés.

/**
 * Initialisation et contrôle de la fontion moveRecalFn().
 * el = element qui contient les images
 * speed = vitesse de déplacement
 * xPos = position horizontal de l'image à afficher
 * yPos = position vertical de l'image à afficher
 * enFn
 * arg0
 */	
function moveFn(el, speed, xPos, yPos, endFn, arg0) {
	if (!endFn) {
		endFn = null;
	}
	//--> Récupère l'objet correspondant à la variable el dans le document, ici le conteneur des images.
	if (typeof(el) == 'string') { //<-- typeof() renvoie une chaîne de caractères indiquant quel est le type de l'opérande.
		el = document.getElementById(el);
	}
	//--> Stokage du container dans le tableau moveAr.
	if (el.moveIndex == null) {
		el.moveIndex = moveAr.length;
	}
	moveAr[el.moveIndex] = el;
	//--> Convertit speed en décimal.
	speed = '0.' + speed;
	//--> Suspend la minuterie si on clique sur une autre vignette avant la fin.
	if (el.moveTimer) {
		clearTimeout(el.moveTimer);
	}
	//--> Déclenche une minuterie et appelle la fonction dans 0 millisecondes.
	window.setTimeout('moveRecalFn(' + el.moveIndex + ',' + speed + ',' + xPos + ',' + yPos + ',' + endFn + ',' + arg0 + ')',0);
}

/**.
 * Calcul du déplacement des images
 * moveIndex = conteneur
 * xPos = position horizontal de l'image à afficher
 * yPos = position vertical de l'image à afficher
 * Math.round() arrondit à l'entier le plus proche la valeur donnée en paramètre
 * parseInt() permet de convertir une variable en nombre
 * offsetLeft : valeur gauche du coin supérieur gauche
 * offsetTop : valeur du haut du coin supérieur gauche
 * Math.ceil() renvoie le plus petit entier supérieur ou égal à la valeur donnée en paramètre
 * Math.floor() retourne le plus grand entier inférieur ou égal à la valeur donnée en paramètre.
 */
function moveRecalFn(moveIndex, speed, xPos, yPos, endFn, arg0) {
	el = moveAr[moveIndex]; //<-- Récupère l'objet animé correspondant dans le tableau.
	
	//--> Déplacement horizontal
	floatDisX = Math.round(xPos - parseInt(el.offsetLeft)); //<-- floatDisX = valeur gauche (coin supérieur gauche) de l'image - valeur gauche du conteneur
	if (floatDisX > 0) { //<-- parseInt(el.offsetLeft) < xPos
		floatVelX = Math.ceil(floatDisX * speed);//<-- floatDisX > 0. Il faut arrondir à l'entier supérieur pour que floatVelX ne soit jamais = à 0, sinon la fn s'éxécute à l'infini.
	} else {
		floatVelX = Math.floor(floatDisX * speed);//<-- floatDisX < 0. Il faut arrondir à l'entier inférieur pour que floatVelX ne soit jamais = à 0, sinon la fn s'éxécute à l'infini.
	}
	el.style.left = Math.ceil(parseInt(el.offsetLeft) + floatVelX) + 'px';//<-- déplacement de conteneur
	
	//--> Déplacement vertica
	floatDisY = Math.round(yPos - parseInt(el.offsetTop));//<-- floatDisY = valeur du haut (coin supérieur gauche) de l'image - valeur du haut du conteneur
	if (floatDisY > 0) {
		floatVelY = Math.ceil(floatDisY * speed);
	} else {
		floatVelY = Math.floor(floatDisY * speed);
	}
	el.style.top = Math.ceil(parseInt(el.offsetTop) + floatVelY) + 'px';
	
	//--> Déclenche une minuterie et appelle la fonction dans 40 millisecondes.
	el.moveTimer = window.setTimeout('moveRecalFn(' + el.moveIndex + ',' + speed + ',' + xPos + ',' + yPos + ',' + endFn + ',' + arg0 + ')',40);
	
	//--> Déplacement terminé ou nul
	if(floatDisX == 0 && floatDisY == 0){
		clearTimeout(el.moveTimer); //<-- Suspend la minuterie à la fin du déplacement.
		el.moveTimer = null;
		if (endFn) {
			endFn(arg0);
		}
	}
}

/**
 * Ajout du gestionnaires d'évenement onClick sur les vignettes.
 */
function getThumbsFn() {
	var img = document.getElementsByTagName('img'); //<-- Retourne un objet NodeList ou tableau d'éléments img.
	var zoom = document.getElementById('zoom'); //<-- Renvoit une valeur de type Objet NodeList.
	var y = 0;
	for (var i = 0; i < img.length; i++) {
		if (img[i].id && img[i].id.indexOf('zoom') != 0) { //<-- indexOf() permet de rechercher la position de img[x].id dans l'element zoom.
			img[i].num	= 0 - (324 * y); //<-- (dimension de l'image + marge) x position
			y++;
			img[i].parentNode.onclick = function() {
				moveFn ('zoom', 2, this.firstChild.num, 0, null);
				showAllFn(y);
			}
		}
	}
}

/**
 * Rend visible toutes les images
 */
function showAllFn(tt) {
	for (var i = 0; i < tt; i++){
		var zoomItem = document.getElementById('zoom' + i);
		zoomItem.style.visibility = 'visible';
	}
}

/**
 * masquer toutes les images
 */
function start() {
	var zoom = document.getElementById('zoom');
	var img = zoom.getElementsByTagName('img');
	for (var i = 1; i < img.length; i++) {
		img[i].style.visibility = 'hidden';
	}
}

function loadFn() {
	if ($('zoom')) {
		cycleFadeFn (thumbCount, 'thumb'); //<-- chargement des vignettes
		getThumbsFn(); //<-- ajout évenement onclick
		var zLast	= document.getElementById('zoom' + (thumbCount - 1)); //<-- zLast = dernière vignette
		zLast.setAttribute('onload',moveFn('zoom',2,0,0,null)); //<-- Lance le déplacement du début.
		//zLast.setAttribute('onload',moveFn('zoom',2,0,0,showAllFn,thumbCount));
		//start();
	}
}

Event.observe(window, 'load', loadFn);