// JavaScript Document
//pCanvas : canvas servant à l'affichage de la visionneuse
//pType : type de transition entre chaque diapo ->fonduEnchaine deplacementHorizontalGD deplacementHorizontalDG deplacementVerticalHB deplacementVerticalBH
//pListeImages : tableau de tableaux de type : new Array("adresseImage",largeurImage,hauteurImage,xImage,yImage,"légende de l'image","lien au clic");

//ajout de la fonction bind pour les navigateurs n'en disposant pas
if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be fBound is not callable");
    var aArgs = Array.prototype.slice.call(arguments, 1), 
        fToBind = this, 
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP ? this : oThis || window, aArgs.concat(Array.prototype.slice.call(arguments)));    
        };
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
  };
}

function Visionneuse(pUl,pType,pDuree) {
	this.diaporama = document.getElementById(pUl);
	
	this.chargementEnCours = true;//variable permettant de savoir si le chargement de la premiere image est terminé
	
	this.fonctionnement = true;//vaut true si la visionneuse doit fonctionner

	this.type = pType;
	this.largeur = this.diaporama.offsetWidth;
	this.hauteur = this.diaporama.offsetHeight;
	this.duree = pDuree;//durée d'apparition de l'image
		
	this.compteurImage = -1;//numero de l'image en cours d'affichage
	this.compteurImagesChargees = 0;//<--------
	this.temoinTransition = false;//si true une transition est en cours
	//
	this.valeur = 0;//variable qui évolue lors d'une transition pour passer d'une image à l'autre
	this.valeurEaseInOut = 0;//variable qui évolue progeressivement lors d'une transition pour passer d'une image à l'autre
	this.infosImage1 = new Array();
	this.infosImage2 = new Array();
	this.infosElement1 = new Array();
	this.infosElement2 = new Array();
	//creation du tableau de la liste des images 
	this.infosElements = new Array();

	//masquage des éléments de la liste	
	for(var i=0;i<this.diaporama.children.length;i++){
		this.infosElements[i]=this.diaporama.children[i];
		this.diaporama.children[i].style.display = "none";
	}
	//verification du chargement des images contenues dans la liste
	this.totalLoad = 0;

	while(this.totalLoad <= this.diaporama.children.length){
		if(this.totalLoad < this.diaporama.children.length){
			for(var i=0;i<this.diaporama.children.length;i++){
				//alert(this.infosElements[i].getElementsByTagName("IMG")[0].complete + "->" + i + " = " + this.totalLoad);
				if(this.infosElements[i].getElementsByTagName("IMG")[0].complete){
					this.totalLoad++;
				}
			}
		}else{
			this.start();
			break;
		}
	}
}
 
Visionneuse.prototype = { 	
	start: function() {
		//alert("demarrage visionneuse");
		this.chargementEnCours=false;//signale que le chargement est terminé
		this.infosElements[0].style.display="block";
		//this.copieTableau(this.infosImages[0],this.infosImage2);
		this.timerVisio = window.setTimeout(this.draw.bind(this),this.duree);
	},
	pause:function() {
		this.fonctionnement = false;
	},
	stop: function(){
		window.clearTimeout(this.timerVisio);
		if(this.timerTransition){
			window.clearTimeout(this.timerTransition);
		}
		this.infosElements[0].style.display="block";
		this.infosElements[0].style.opacity=1;
		this.infosElements[0].style.left="0px";
		this.infosElements[0].style.top="0px";
		for(var i=1;i<this.infosElements.length;i++){
			this.infosElements[i].style.display="none";
			this.infosElements[i].style.opacity=1;
			this.infosElements[i].style.left="0px";
			this.infosElements[i].style.top="0px";
		}
	},
	draw: function(){
		this.compteurImage++;
		this.transition();
		if(this.fonctionnement == true){
			this.timerVisio = window.setTimeout(this.draw.bind(this),this.duree);
		}
		if(this.compteurImage>=this.infosElements.length-1){
			this.compteurImage = -1;
		}
		this.temoinTransition = true;
	},
	transition: function(){
		this.valeur = 0;
		this.infosElement1 = this.infosElements[this.compteurImage];
		if(this.compteurImage < this.infosElements.length-1){
			this.infosElement2 = this.infosElements[this.compteurImage+1];
		}else{
			this.infosElement2 = this.infosElements[0];
		}
		var fnProv = eval("this." + this.type + ".bind(this);");
		this.timerTransition = window.setTimeout(fnProv,40);
	},
	fonduEnchaine: function(){
		if(this.valeur < 1){
			this.timerTransition = window.setTimeout(this.fonduEnchaine.bind(this),40);
		}else{
			this.temoinTransition = false;
		}
		if(1-this.valeur > 0){
			this.infosElement1.style.opacity=1-this.valeur;
			this.infosElement2.style.opacity=this.valeur;
			
		}
		if(this.valeur==0){
			for(var i=0;i<this.infosElements.length;i++){
				this.infosElements[i].style.display="none";
			}
			this.infosElement1.style.display="block";
			this.infosElement2.style.display="block";
		}
		this.valeur = this.valeur + 0.02;
	},
	deplacementHorizontalGD: function(){
		if(this.valeur <= this.largeur){
			this.timerTransition = window.setTimeout(this.deplacementHorizontalGD.bind(this),40);
		}else{
			this.temoinTransition = false;
		}
		this.valeurEaseInOut = this.easeInOut(0,this.largeur,this.valeur);
		this.infosElement1.style.left = (this.valeurEaseInOut) + "px";
		if(this.valeur<=this.largeur){
			this.infosElement2.style.left = (this.valeurEaseInOut-this.largeur) + "px";
		}else{
			this.infosElement2.style.left = 0 + "px";
		}
		if(this.valeur==0){
			for(var i=0;i<this.infosElements.length;i++){
				this.infosElements[i].style.display="none";
			}
			this.infosElement1.style.display="block";
			this.infosElement2.style.display="block";
		}
		this.valeur = this.valeur + (8*this.largeur/150);
	},
	deplacementHorizontalDG: function(){
		if(this.valeur <= this.largeur){
			this.timerTransition = window.setTimeout(this.deplacementHorizontalDG.bind(this),40);
		}else{
			this.temoinTransition = false;
		}
		this.valeurEaseInOut = this.easeInOut(0,this.largeur,this.largeur - this.valeur);
		this.infosElement2.style.left = (this.valeurEaseInOut) + "px";
		if(this.valeur>0){
			this.infosElement1.style.left = (this.valeurEaseInOut-this.largeur) + "px";
		}else{
			this.infosElement1.style.left = 0 + "px";
		}
		if(this.valeur==0){
			for(var i=0;i<this.infosElements.length;i++){
				this.infosElements[i].style.display="none";
			}
			this.infosElement1.style.display="block";
			this.infosElement2.style.display="block";
		}
		this.valeur = this.valeur + (8*this.largeur/150);
	},
	deplacementVerticalHB: function(){
		if(this.valeur <= this.hauteur){
			this.timerTransition = window.setTimeout(this.deplacementVerticalHB.bind(this),40);
		}else{
			this.temoinTransition = false;
		}
		this.valeurEaseInOut = this.easeInOut(0,this.hauteur,this.valeur);
		this.infosElement1.style.top = (this.valeurEaseInOut) + "px";
		if(this.valeur<=this.hauteur){
			this.infosElement2.style.top = (this.valeurEaseInOut-this.hauteur) + "px";
		}else{
			this.infosElement2.style.top = 0 + "px";
		}
		if(this.valeur==0){
			for(var i=0;i<this.infosElements.length;i++){
				this.infosElements[i].style.display="none";
			}
			this.infosElement1.style.display="block";
			this.infosElement2.style.display="block";
		}
		this.valeur = this.valeur + (8*this.hauteur/150);
	},
	deplacementVerticalBH: function(){
		if(this.valeur <= this.hauteur){
			this.timerTransition = window.setTimeout(this.deplacementVerticalBH.bind(this),40);
		}else{
			this.temoinTransition = false;
		}
		this.valeurEaseInOut = this.easeInOut(0,this.hauteur,this.hauteur - this.valeur);
		this.infosElement2.style.top = (this.valeurEaseInOut) + "px";
		if(this.valeur>0){
			this.infosElement1.style.top = (this.valeurEaseInOut-this.hauteur) + "px";
		}else{
			this.infosElement1.style.top = 0 + "px";
		}
		if(this.valeur==0){
			for(var i=0;i<this.infosElements.length;i++){
				this.infosElements[i].style.display="none";
			}
			this.infosElement1.style.display="block";
			this.infosElement2.style.display="block";
		}
		this.valeur = this.valeur + (8*this.hauteur/150);
	},
	easeInOut:function(pMin,pMax,pValeur){
		this.valeurToUn = ((pValeur-pMin)/(pMax-pMin));
		this.coef =(1-((Math.cos((1-((Math.cos(this.valeurToUn*Math.PI)+1)/2))*Math.PI)+1)/2));
		return pMax * this.coef;
	},
	copieTableau: function(pTableau1,pTableau2){
		for(var i=0;i<pTableau1.length;i++){
			pTableau2[i] = pTableau1[i];
		}
	}
}