/************************************/
//les variables globales
/************************************/

// l'element qui contiendra les images de l'album photo
var myImgEven;
var myImgOdd;

// compteur image
var cpt = 0;
var oddEven = 0;

// effets, animation
var myFxOdd;
var myFxEven;
// la premiere animation est prete
var animationPrete = 1;

// la premiere image n'est pas encore la
var imagePrete = 0;
// par contre le premier timer est deja ok (on veut afficher l'image tout de suite)
var timerPret = 1;
var myTimer;
var isTimerStart;
var enRecule = 0;

// thumbnail
var cptThumbnail = -1;
var tailleDivThumbnail;
var mySlideThumbnail;
var tailleReelThumbnail;
// position de l'indicateur de la photo courante dans la liste des thumbnails
var positionIndicateurPhoto = 0;

// valeur indiquant si on deplace (ou avons deplacé) le curseur des thumbnails
// car si il a bougé manuellement alors on ne dot plus faire bouger la liste
// des thumbnails
var knobMoving = false;
var knobUseByUser = false;
var deplacementAutomatique = false;

// timer qui gere le temps maximum pour le chargement d'une image
// au dela de ce temps on abandonne
var timeOutImage;
var pasImageLoader;

function goSlideShow() {
	
	// prechargement des images
	pasImageLoader = new Asset.image(pasImageSrc);
	// les boutons de navigation
	new Asset.image('components/com_anotherpicasa/assets/play_32.png');
	new Asset.image('components/com_anotherpicasa/assets/block_32.png');
	
	// fixe les proprietes css
	$('sur_cadre').setStyle('border', tailleBordureExterne + 'px solid ' + couleurExterneBordure);
	$('photo_album').setStyle('background-color', couleurInterneBordure);	
	$('cadre_photo_album').setStyle('border', taillebordure  + 'px solid '+ couleurInterneBordure);
	$('cadre_photo_album').setStyle('height', $('sur_cadre').getSize().size.y - taillebordure * 2 - tailleBordureExterne * 2);
	
	// on affiche pas le loading... la premiere fois
	cacherChargement();
	
	myImgEven = $('even_image');
	myImgOdd = $('odd_image');
	
	// fixe la premiere transition
	fixeDurationEffect(tempsCourtDeTransition, effetTransitionCourt); // premiere intro
	
	// si le slideshow se lance automatiquement
	if (lancementAutomatique == 1) {
		isTimerStart = true;
	} else {
		isTimerStart = false;
	}
	
	// lance le chargement de la premiere image
	chargeProchaineImage();
	
	initControles();
	
	if (afficherThumbnails == 1) {
		$('thumbnailsContainer').setStyle('display', 'block');
		
		$('thumbnailsContainer').setStyle('background-color', couleurInterneBordure);
		$('thumbnailsContainer').setStyle('border', tailleBordureExterne + 'px solid ' + couleurExterneBordure);
		
		// fixe la taille de la div thumbnail
		tailleReelThumbnail = tailleThumbnail + (2 * bordureThumbnail) + (marginThumbnail * 2);
		var tailleDivThumbnail = nombrePhoto * tailleReelThumbnail;
		$('thumbnails').setStyle('width', tailleDivThumbnail);
		
		// fixe les proprietes de l'indicateur de photo courante
		$('photo_courante').setStyle('width', tailleReelThumbnail - 4); /* @todo: -4 = taille border indicateur + margin */
		$('photo_courante').setStyle('height', tailleReelThumbnail - 4);
		$('photo_courante').setStyle('border', '1px solid ' + couleurBordureIndicateur);
		
		// lance le premier chargement de thumbnail
		avanceThumbnail();
	} else {
		$('thumbnailsContainer').setStyle('display', 'none');
	}
	
	initSlider();
}


/************************************/
//slider
/************************************/
function initSlider() {
	mySlideThumbnail = new Slider($('thumb_slider'), $('knob'), {
		steps: 1000,
		onChange: function(step){
			if (!deplacementAutomatique) {
				deplaceFenetreSlider(step);
			}
		},
		onComplete: function(){
			knobUseByUser = false;
		}
	}).set(0);
	
	$('thumb_slider').addEvent('mousedown', function() {
		knobMoving = true;
	});
	
	$('knob').addEvent('mousedown', function() {
		knobMoving = true;
		knobUseByUser = true;
	});
}


function deplaceFenetreSlider(step) {
	var myTaille = $('thumbnails').getSize().size.x - $('thumbnails').getParent().getSize().size.x;
	if (myTaille <= 0) {
		// il n'y a pas assez de thumbnail pour remplir la fenetre on ne fait donc rien
	} else {
		var decalage = (((myTaille * step) / 1000.0) * -1).toInt();
		$('thumbnails').setStyles({
			'margin-left': decalage
		});
		var deplX = positionIndicateurPhoto + decalage + marginIndicateurPhoto;
		$('photo_courante').setStyle('margin-left', deplX);
	}
}

/************************************/
//fonctions de chargement des images
/************************************/
function chargeProchaineImage() {
	var cptImage = cpt * nombreElementTableau;
	var imgSource = tableauImage[cptImage];
	var cptCourant = cpt;

	
	
	
	var myLoader = new Asset.image(imgSource, {
		onload:	function() {
			imagePrete = 1;
			tableauImage[cptImage + 4] = myLoader.width;
			tableauImage[cptImage + 5] = myLoader.height;
			afficheProchaineImage();
			cacherChargement();
			
			window.clearTimeout(timeOutImage);
		},
		onerror: function() {
			erreurChargement(cptCourant);
		},
		onabort: function() {
			erreurChargement(cptCourant);
		}
	});
	window.clearTimeout(timeOutImage);
	timeOutImage = setTimeout("erreurChargement("+cpt+")", tempsTimeoutImage);
}


function erreurChargement(numero) {
	window.clearTimeout(timeOutImage);
	
	// place l'image d'erreur au lieu de l'image innaccessible
	var numTableau = numero * nombreElementTableau;
	tableauImage[numTableau] = pasImageLoader.src;
	tableauImage[numTableau + 4] = pasImageLoader.width;
	tableauImage[numTableau + 5] = pasImageLoader.height;

	// on ne traite l'erreur que si elle concerne l'image qu'on essaye de voir a l'instant
	if (numero == cpt) {
		imagePrete = 1;
		afficheProchaineImage();
		cacherChargement();
	}
}


function avanceThumbnail() {
	cptThumbnail++;
	if (cptThumbnail < (tableauImage.length / nombreElementTableau)) {
		chargeProchainThumbnail(cptThumbnail);
		setTimeout("avanceThumbnail()", vitesseChargementThumbnail);
	}
}


function chargeProchainThumbnail(numero) {

	// recupere l'indice dans le tableau de la source du thumbnail
	var cptImageThumb = (numero * nombreElementTableau) + 3;
	
	var baliseImg = new Element('img', {
		'styles': {
	        'width': '0px',
	        'opacity': opcacityThumbnail,
	        'border': bordureThumbnail + 'px solid ' + couleurBordureThumbnail
	    },
	    'src': tableauImage[cptImageThumb],
	    'class': 'thumbnail',
	    'events': {
	        'click': function(){
	            allerImage(numero);
	        }
	    }
	});
	
	baliseImg.injectInside('thumbnails');
	
	baliseImg.addEvent('mouseenter', function(e) {
		e = new Event(e);
		baliseImg.effects({duration: 100}).start({'opacity': 1});
		e.stop();
	});
	
	baliseImg.addEvent('mouseleave', function(e) {
		e = new Event(e);
		baliseImg.effects({duration: 100}).start({'opacity': opcacityThumbnail});
		e.stop();
	});
	
	var srcImage = tableauImage[cptImageThumb];
	
	var myThumbLoader = new Asset.image(srcImage, {
		
		onload:	function() {
			var fx = baliseImg.effects({duration: vitesseApparitionThumbnail}).start({'width': tailleThumbnail});
		},
		onerror: function() {
			baliseImg.setStyle('width', tailleThumbnail);
			baliseImg.setStyle('height', tailleThumbnail);
			/* @todo: afficher une image par défaut */
		},
		onabort: function() {
			baliseImg.setStyle('width', tailleThumbnail);
			baliseImg.setStyle('height', tailleThumbnail);
			/* @todo: afficher une image par défaut */
		}
	});
}



/************************************/
//fonctions d'effets de transition
/************************************/
function fixeDurationEffect(val, type) {
	myFxEven	= new Fx.Style('even_image','opacity', {duration:val, transition: type});
	myFxOdd		= new Fx.Style('odd_image',	'opacity', {duration:val, transition: type});
}


function centrerSurPhotoCourante() {

	if (knobMoving) {
		// l'utilisateur deplace le curseur, on ne centre donc pas sur la photo
		return 0;
	}
	
	// test si il faut deplacer la fenetre
	// dans ce cas on est aux premieres photos
	var decal = ((cpt * tailleReelThumbnail) * -1) + ($('thumbnailsContainer').getSize().size.x / 2.0) - (tailleReelThumbnail / 2.0);
	if (decal > 0) {
		decal = 0;
	}
	// dans ce cas on est aux dernieres photos
	var limitMax = $('thumbnailsContainer').getSize().size.x - (nombrePhoto * tailleReelThumbnail);
	if (decal < limitMax) {
		decal = limitMax;
	}

	
	// lance l'animation de decalage de la liste des thumbnail
	new Fx.Style('thumbnails', 'margin-left').start(decal).chain(function() {
		// quand l'animation est fini on place le slider à la bonne position  
		var slideDecal = ((decal * -1000) / ($('thumbnails').getStyle('width').toInt() - $('thumbnailsContainer').getSize().size.x)).toInt();
		deplacementAutomatique = true;
		mySlideThumbnail.set(slideDecal);
		deplacementAutomatique = false;
	});
	
	// indique le decalage qui vient d'etre effectué
	return (decal.toInt() - $('thumbnails').getStyle('margin-left').toInt());
}


function afficheProchaineImage() {
	
	if ((imagePrete == 1)&&(timerPret == 1)&&(animationPrete == 1)) {

		var cptImage		= cpt * nombreElementTableau;
		var cptTitre		= cptImage + 1;
		var cptDate			= cptImage + 2;
		var cptDescription	= cptImage + 3;
		var cptWidth		= cptImage + 4;
		var cptHeight		= cptImage + 5;

		var myImgElement;
		if (oddEven == 0) {
			myImgElement = myImgEven;
		} else {
			myImgElement = myImgOdd;
		}

		
		// recupere les tailles d'image et de container pour faire les ajustements
		var imageSizeX = tableauImage[cptWidth];
		var imageSizeY = tableauImage[cptHeight];
		var containerSizeObj = $('photo_album').getSize();
		var containerSizeX = containerSizeObj.size.x;
		var containerSizeY = containerSizeObj.size.y;
		
		// affiche l'image chargée
		animationPrete = 0;
		if (oddEven == 0) {
			oddEven = 1;
			myImgEven.src = tableauImage[cptImage];
			myFxOdd.start(1,0);
			myFxEven.start(0,1).chain(function(){ animationPrete = 1; afficheProchaineImage(); });
		} else {
			oddEven = 0;
			myImgOdd.src = tableauImage[cptImage];
			myFxEven.start(1,0);
			myFxOdd.start(0,1).chain(function(){ animationPrete = 1; afficheProchaineImage(); });
		}

		// mise a l'echelle de l'image
		var deltaX = (containerSizeX - imageSizeX);
		var deltaY = (containerSizeY - imageSizeY);
		if (deltaX > deltaY) {
			var newX = (containerSizeY / imageSizeY) * imageSizeX;
			var newY = containerSizeY;
		} else {
			var newX = containerSizeX;
			var newY = (containerSizeX / imageSizeX) * imageSizeY;
		}
		
		if (newX < imageSizeX) {
			myImgElement.setStyle('width', newX);
			myImgElement.setStyle('margin-left', (containerSizeX - newX)/2);
		} else {
			myImgElement.setStyle('width', imageSizeX);
			myImgElement.setStyle('margin-left', (containerSizeX - imageSizeX)/2);
		}
		
		if (newY < imageSizeY) {
			myImgElement.setStyle('height', newY);
			myImgElement.setStyle('margin-top', (containerSizeY - newY)/2);
		} else {
			myImgElement.setStyle('height', imageSizeY);
			myImgElement.setStyle('margin-top', (containerSizeY - imageSizeY)/2);
		}
		
		
		// fixe le titre de l'image
		/* @todo: faire un effet de transition dans le meme temps que la transition entre deux images */
		document.getElementById("titre_photo").innerHTML	= tableauImage[cptTitre];
		document.getElementById("date_photo").innerHTML		= tableauImage[cptDate];

		
		if (afficherThumbnails == 1) {
			// recupere le decalage de la fenetre des thumbnails
			var retourCentrage = centrerSurPhotoCourante();
			
			// deplace le curseur du thumbnail
			var myTtailleThumbnail = (tailleThumbnail + (2 * bordureThumbnail) + (marginThumbnail * 2));
			positionIndicateurPhoto = myTtailleThumbnail * cpt;
			var deplX = positionIndicateurPhoto + $('thumbnails').getStyle('margin-left').toInt() + marginIndicateurPhoto;
			
			// si l'utilisateur deplace le curseur des thumbnails
			// alors on ne fait rien la methode set du slider fait le deplacement tout seul 
			if (!knobUseByUser) {
				if (retourCentrage == 0) {
					// si la fenetre des thumbnail n'a pas bougé alors on doit deplacer l'indicateur
					new Fx.Style('photo_courante', 'margin-left').start(deplX);
				} else {
					// la fenetre des thumbnail a bougé, donc on place l'indicateur au centre de ce deplacement
					$('photo_courante').setStyle('margin-left', deplX + retourCentrage);
				}
			}
		}

		// avance dans le tableau
		cpt++;
		if (cpt >= (tableauImage.length / nombreElementTableau)) {
			cpt = 0;
		}

		// prepare la suite
		imagePrete = 0;
		timerPret = 0;

		fixeDurationEffect(tempsEffetTransition, effetTransitionEntreImages);
		// relance la boucle
		if (isTimerStart) {
			lanceTimer();
		}
		chargeProchaineImage();
	}
}

/***********************/
// fonctions timer
/***********************/
function timerATerme() {
	timerPret = 1;
	afficheProchaineImage();
}

function lanceTimer() {
	timerPret = 0;
	myTimer = setTimeout("timerATerme()", tempsEntreDeuxImages);
	document.getElementById("to_stop").className = "icon_navigation to_stop_stop";
}

function stopTimer() {
	timerPret = 1;
	clearTimeout(myTimer);
	document.getElementById("to_stop").className = "icon_navigation to_stop_play";
}

function toggleTimer() {
	if (isTimerStart) {
		stopTimer();
		isTimerStart = false;
	} else {
		lanceTimer();
		isTimerStart = true;
	}
}

/************************************/
//fonctions de deplacements manuels
/************************************/

function afficherChargement() {
	$('loading').setOpacity(1);
}

function cacherChargement() {
	$('loading').setOpacity(0);
}


function allerImage(numero) {
	if (animationPrete == 1) {
		knobMoving = false;
		
		afficherChargement();
		
		// si une precedente image etait deja préparé alors on annule
		imagePrete = 0;
		cpt = numero;
		fixeDurationEffect(tempsCourtDeTransition, effetTransitionCourt);
		
		clearTimeout(myTimer);
		timerPret = 1;
		chargeProchaineImage();
	}
}

function avanceImageManuel() {
	if (animationPrete == 1) {
		knobMoving = false;
		
		afficherChargement();
		
		fixeDurationEffect(tempsCourtDeTransition, effetTransitionCourt);
		clearTimeout(myTimer);
		timerATerme();
	}
}

function reculeImageManuel() {
	if (animationPrete == 1) {
		knobMoving = false;
		
		afficherChargement();
		
		// si une precedente image etait deja préparé alors on annule
		imagePrete = 0;
		
		/* @todo: à revoir, c'est nul */
		if (cpt == 1) {
			cpt = (tableauImage.length / nombreElementTableau) - 1;
		} else {
			if (cpt == 0) {
				cpt = (tableauImage.length / nombreElementTableau) - 2;
			} else {
				cpt -= 2;
			}
		}
		
		fixeDurationEffect(tempsCourtDeTransition, effetTransitionCourt);
		clearTimeout(myTimer);
		timerPret = 1;
		chargeProchaineImage();
	}
}


/************************************/
//gestion des controles
/************************************/
function initControles() {
	
	// 0 : affiche au survol
	// 1 : toujours visible
	// 2 : jamais visible
	
	if ((masquerTitre == 0)||(masquerTitre == 2)) {
		var mySlideControl = new Fx.Slide('id_info_photo', {duration: vitesseEffetControles, transition: effetTransitionTitre});
		mySlideControl.hide();
	}
	
	if ((masquerControles == 0)||(masquerControles == 2)) {
		var mySlideControl2 = new Fx.Slide('navigation_photo', {duration: vitesseEffetControles, transition: effetTransitionControles});
		// contrairement a ce qu'on pourrait croire show() => cache les controles (le div est inversé)
		mySlideControl2.show();
	}
	
	$('photo_album').addEvent('mouseenter', function(e) {
		e = new Event(e);
		if (masquerTitre == 0) {
			mySlideControl.slideIn();
		}
		if (masquerControles == 0) {
			mySlideControl2.slideOut();
		}
		e.stop();
	});
	
	$('photo_album').addEvent('mouseleave', function(e) {
		e = new Event(e);
		if (masquerTitre == 0) {
			mySlideControl.slideOut();
		}
		if (masquerControles == 0) {
			mySlideControl2.slideIn();
		}
		e.stop();
	});
}