var Visionneuse =
{
	
	indexDeLimageSelectionner : '',
	_nbrTotalDimage : 0,
	_numeroDeLimage : 1,
	_autoriserNavigation : true,
	
	init : function()
	{
		var a = document.getElementsByTagName('a');
		this.ajouterEcouteurAuxImages(a);
		
	},
	
	//-----------------------------------------------------
	//                              ajouterEcouteurAuxImages 
	ajouterEcouteurAuxImages : function(a)
	{
		//on compte combien de balise a il y a sur la page
		var total = a.length;
		this._nbrTotalDimage = 0;
		for(i = 0; i < total; i++)
		{
			var rel = (a[i].rel).toLowerCase();
			
			if( rel =='visionneuse')
			{	  
				this._nbrTotalDimage++;
				var cible = a[i];
				this.ajouterEcouteur(cible, 'click', Visionneuse.ouvrir)
				
				
				
			}//if(a[0].rel='phenixBox')
		}//for(i = 0; i < total; i++)
			
		
	},//ajouterEcouteur
	
	//-----------------------------------------------------
	//                                           	   ouvrir 
	ouvrir : function(event)
	{
		var lienCliquer = (navigator.userAgent.toLowerCase().indexOf("msie") > 0) ? event.srcElement.parentNode : this;

		//on stop la propagation => on annule le lien
		Visionneuse.arreterPropagationDuLien(event);
		
		//on affiche le fond noir
		Visionneuse.creerBlackHole();
		
		//on sauvegarde l'image
		Visionneuse.selectionnerLimage(lienCliquer);
		
		
		//on creer la visionneuse
		Visionneuse.creerVisionneuse(lienCliquer);
		
	
		if(Visionneuse._numeroDeLimage == 1)
		{
			var a = document.getElementById('visionneuse-precedent');
			var imagePrecedent  = a.getElementsByTagName('img')[0];
			imagePrecedent.style.visibility = 'hidden';
		}
	},//ouvrir
	
	selectionnerLimage : function(lienCliquer)
	{
		var a = document.getElementsByTagName('a');	
		
		var total = a.length;
		var j = 1;
		for(i = 0; i < total; i++)
		{
			var rel = (a[i].rel).toLowerCase();
			
			
			if( rel =='visionneuse' )
			{	 
				if(a[i].href == lienCliquer.href)
			  	{
					this.indexDeLimageSelectionner = i
					this._numeroDeLimage = j;

					return j;
					break;
				}
				j++;
			}//if(a[0].rel='phenixBox')
		}//for(i = 0; i < total; i++)
	},
	
	//-------------------------------------------------------------------------
	//                                                         			suivant
	suivant : function()
	{	
		var a = document.getElementById('visionneuse-precedent');
		var imagePrecedent  = a.getElementsByTagName('img')[0];
		
		    a = document.getElementById('visionneuse-suivant');
		var imageSuivant  = a.getElementsByTagName('img')[0];
		
		if(this._numeroDeLimage < this._nbrTotalDimage)
		{
			this.afficherAutreImage(1);
			imagePrecedent.style.visibility = 'visible';
		}
		
		if(this._numeroDeLimage >= this._nbrTotalDimage)
		{
			imageSuivant.style.visibility = 'hidden';
			
		}
	},//suivant
	
	//-------------------------------------------------------------------------
	//                                                         		  precedent
	precedent : function()
	{	
		var a = document.getElementById('visionneuse-precedent');
		var imagePrecedent  = a.getElementsByTagName('img')[0];
		
		    a = document.getElementById('visionneuse-suivant');
		var imageSuivant  = a.getElementsByTagName('img')[0];
		
		if(this._numeroDeLimage > 1)
		{
			this.afficherAutreImage(-1);
			imagePrecedent.style.visibility = 'visible';
			imageSuivant.style.visibility = 'visible';
		}
		
		if(this._numeroDeLimage < 2)
		{
			imagePrecedent.style.visibility = 'hidden';
		}
		
		if(this._numeroDeLimage < this._nbrTotalDimage)
		{
			imageSuivant.style.visibility = 'visible';
		}
	},//precedent
	
	afficherAutreImage : function(index)
	{
		if(this._autoriserNavigation)
		{
			this._numeroDeLimage += index
			this.mettreAJourLaPagination(this._numeroDeLimage);	
			
			this.indexDeLimageSelectionner += index;
			this.afficherLimage(this.indexDeLimageSelectionner);
		}
	},
	
	//-------------------------------------------------------------------------
	//                                                           afficherLimage
	afficherLimage : function(index)
	{
		if(this._autoriserNavigation)
		{
			this._autoriserNavigation = false;
			var image1 = document.getElementById('visionneuse-image1');
			var image2 = document.getElementById('visionneuse-image2');
			var suivante = document.getElementsByTagName('a')[index];
			image1.src = suivante.href;Visionneuse._autoriserNavigation = true;
			Nom = navigator.appName;
			if (Nom == 'Microsoft Internet Explorer') 
			{
				image2.src = suivante.href;
				Visionneuse._autoriserNavigation = true;
			}
			else
			{
				$('#visionneuse-image2').fadeOut('slow', function() {
					// Animation complete
					
					$('#visionneuse-image1').fadeIn(1, function() {
						// Animation complete
						image2.src = suivante.href;
						//image2.filters.alpha.opacity=100
						$('#visionneuse-image2').fadeIn(1, function() 
						{
							Visionneuse._autoriserNavigation = true;
						
						});
						//$('#visionneuse-image1').fadeOut('slow');
					});
				});
			}
		}
	},//afficherLimage
	
	//-------------------------------------------------------------------------
	//                                                  mettreAJourLaPagination
	mettreAJourLaPagination : function(index)
	{
		
		var pagination = document.getElementById('visionneuse-nombre');
		var num = pagination.getElementsByTagName('strong')[0];
		num.innerHTML = (index);
	},//mettreAJourLaPagination
	
	//-------------------------------------------------------------------------
	//                                                         ajouterEcouteur2
	ajouterEcouteur : function(id, evenement, fonction)
	{
	
	  var cible = ((typeof id) == 'object') ? id :  document.getElementById(id);
	
	    
	
	  // Internet Explorer a ses propres method d'ecouteur
	  //pour cela on doit tester sur le navigateur utiliser
	  //prend en charge la method standard qu'est addEventListener
	  //si ce n'est pas le cas on est sur Internet Explorer
	  //alors on utilise sa method qui est attachEvent
	   if (cible.addEventListener) 
	   {   
	   	  cible.addEventListener(evenement,fonction, false);
		  
		}
		else if (cible.attachEvent) 
		{
		  cible.attachEvent("on"+evenement, fonction);
		}//if (cible.addEventListener) 

	},//ajouterEcouteur2
	
	
	//-----------------------------------------------------
	//									 		 creerNoeud
	creerNoeud : function(element, idParent, attribue)
	{
		
		 var parent = (typeof idParent == 'object') ? idParent : document.getElementById(idParent);
		 
		 var noeud = document.createElement(element);
		 parent.appendChild(noeud);
	
		 if(attribue != null)
		 {
			 var total = attribue.length;
			 
			 for(var i = 0; i < total; i++)
			 {
				noeud.setAttribute(attribue[i]['attribue'],attribue[i]['valeur']);
			 }
		 }
		 return noeud;
	},
	
	creerBlackHole : function()
	{
		var attribue = new Array();
		
		attribue[0] = new Array();
		attribue[0]['attribue'] = 'id';
		attribue[0]['valeur'] = 'blackHole';
		
		attribue[1] = new Array();
		attribue[1]['attribue'] = 'href';
		attribue[1]['valeur'] = 'javascript:Visionneuse.fermer(\'blackHole\');Visionneuse.fermer(\'visionneuse\')';
				

		this.creerNoeud('a', document.getElementsByTagName('body')[0], attribue )
		
	},
	
	creerVisionneuse : function(a)
	{
		var parent = document.getElementsByTagName('body')[0];
		var attribue = new Array();

		attribue[0] = new Array();
		attribue[0]['attribue'] = 'id';
		attribue[0]['valeur'] = 'visionneuse';
		
		this.visionneuse = this.creerNoeud('div', parent, attribue );
		
	
		this.creerLimage(this.visionneuse);
		var p = this.creerNoeud('p', this.visionneuse )
		this.creerFlechePrecedente(p);
		this.creerFlecheSuivante(p);
		this.creerLaPagination(this.visionneuse );
		
		this.centrer('visionneuse', null, 'fixed');
		
		$('#visionneuse').animate({opacity: 1}, 'slow');
			this.creerFermer(this.visionneuse);
		
										 
	},//creerVisionneuse
	
	//-----------------------------------------------------
	//									 		creerFermer
	creerFermer : function(parent)
	{
		var attribue = new Array();
		
		attribue[0] = new Array();
		attribue[0]['attribue'] = 'onclick';
		attribue[0]['valeur'] = 'Visionneuse.tout_fermer()';
		
		var p = this.creerNoeud('p', parent, attribue );
		
		p.innerHTML = '<a id="fermer" href="javascript:Visionneuse.tout_fermer()"><img src="/assets/images/btn/fermer.png" alt="fermer" /></a>';
		/*
		attribue = new Array();
		
		attribue[0] = new Array();
		attribue[0]['attribue'] = 'id';
		attribue[0]['valeur'] = 'fermer';
		
		attribue[1] = new Array();
		attribue[1]['attribue'] = 'src';
		attribue[1]['valeur'] = 'javascript:Visionneuse.tout_fermer()';
		//$(p).append('<img id="visionneuse-image1" src="'+ a.href+'" />');
		var a = this.creerNoeud('a', p, attribue );
		
		attribue = new Array();
		
		attribue[0] = new Array();
		attribue[0]['attribue'] = 'src';
		attribue[0]['valeur'] ='/assets/images/btn/fermer.png';
		this.creerNoeud('img', a, attribue );
		
		*/
		
	},//creerFermer
	
	tout_fermer : function()
	{
		Visionneuse.fermer('blackHole');
		Visionneuse.fermer('visionneuse');
		Visionneuse.fermer('fermer');
	},
	
	//-----------------------------------------------------
	//									 		creerLimage
	creerLimage : function(parent)
	{
		var a = document.getElementsByTagName('a')[this.indexDeLimageSelectionner];
		var p = this.creerNoeud('p', parent );
		this.creerNoeud('div', parent, attribue );
		
		var attribue = new Array();
		
		attribue[0] = new Array();
		attribue[0]['attribue'] = 'id';
		attribue[0]['valeur'] = 'visionneuse-image1';
		
		attribue[1] = new Array();
		attribue[1]['attribue'] = 'src';
		attribue[1]['valeur'] = a.href;
		//$(p).append('<img id="visionneuse-image1" src="'+ a.href+'" />');
		this.creerNoeud('img', p, attribue );
		
		attribue = new Array();
		
		attribue[0] = new Array();
		attribue[0]['attribue'] = 'id';
		attribue[0]['valeur'] = 'visionneuse-image2';
		
		attribue[1] = new Array();
		attribue[1]['attribue'] = 'src';
		attribue[1]['valeur'] = a.href;
		this.creerNoeud('img', p, attribue );
		
		
		
	},//creerLimage
	
    //-----------------------------------------------------
	//								   creerFlechePrecedente
	creerFlechePrecedente : function(parent)
	{
		var attribue = new Array();
		attribue[0] = new Array();
		attribue[0]['attribue'] = 'id';
		attribue[0]['valeur'] = 'visionneuse-precedent';
		attribue[1] = new Array();
		attribue[1]['attribue'] = 'href';
		attribue[1]['valeur'] = 'javascript:Visionneuse.precedent()';
		var a = this.creerNoeud('a', parent, attribue )
		
		attribue = new Array();
		attribue[0] = new Array();
		attribue[0]['attribue'] = 'src';
		attribue[0]['valeur'] = '/assets/images/btn/precedent.png';
		this.creerNoeud('img', a, attribue )
		
	},//creerFlechePrecedente
	
	//-----------------------------------------------------
	//								   creerFlecheSuivante
	creerFlecheSuivante : function(parent)
	{
		var attribue = new Array();
		attribue[0] = new Array();
		attribue[0]['attribue'] = 'id';
		attribue[0]['valeur'] = 'visionneuse-suivant';
		attribue[1] = new Array();
		attribue[1]['attribue'] = 'href';
		attribue[1]['valeur'] = 'javascript:Visionneuse.suivant()';
		var a = this.creerNoeud('a', parent, attribue )
		
		attribue = new Array();
		attribue[0] = new Array();
		attribue[0]['attribue'] = 'src';
		attribue[0]['valeur'] = '/assets/images/btn/suivant.png';
		this.creerNoeud('img', a, attribue );
		
	},//creerFlecheSuivante
	
	//-----------------------------------------------------
	//								      creerLaPagination
	creerLaPagination : function(parent)
	{
		var attribue = new Array();
		attribue[0] = new Array();
		attribue[0]['attribue'] = 'id';
		attribue[0]['valeur'] = 'visionneuse-nombre';
		var p = this.creerNoeud('p', parent, attribue )
		var strong = this.creerNoeud('strong', p )
		strong.innerHTML = this._numeroDeLimage;
		p.innerHTML += '/'+this._nbrTotalDimage;
		
	},//creerLaPagination
	
	//-----------------------------------------------------
	//									 		 	centrer
	centrer : function(idCible, idConteneur, typeDePosition)
	{
	
		var cible = document.getElementById(idCible);
		var conteneur = (idConteneur == null) ? document.body :document.getElementById(idConteneur) ;
		var position = this.obtenirCentre(cible, conteneur);
		this.positionner(idCible, position[0],position[1], typeDePosition );
	
	},//centrer
	
	//-----------------------------------------------------
	//									 		 obtenirCentre
	obtenirCentre : function(cible, conteneur)
	{
		if(cible != null)
		{
			var largeurCible = cible.offsetWidth;
			var hauteurCible = cible.offsetHeight;
			var largeurConteneur =(conteneur.clientWidth);
			var hauteurConteneur = (conteneur.clientHeight);
			var top = (hauteurConteneur / 2 ) - ( hauteurCible / 2);
			var left = (largeurConteneur / 2) - (largeurCible / 2);
			//var top = (screen.height-hauteurCible)/2;
		//	var left = (screen.width-largeurCible)/2;
			var tab = new Array(top, left+50);
			return tab;
		}
	},//obtenirCentre
	
	//-----------------------------------------------------
	//									 		 positionner
	positionner : function(id, top, left, position)
	{
		 id = (typeof id == 'object') ? id : id;
		 var cible = document.getElementById(id);
		 if(position != null)
		 {
		 	cible.style.position=position;
		 }
		 cible.style.top = 30+'px';
		 cible.style.left = left+'px';
	},//positionner
	
	//-------------------------------------------------------------------------
	//												   arreterPropagationDuLien
	arreterPropagationDuLien : function(event)
	{
		//on stop la propagation du lien
		var event = event || window.event;
	
		if(event != null && event != 'undefined')
		{
			if (event.preventDefault) 
			{ 
				// Standard
	
				event.preventDefault();
				
			} else 
			{ // Pour IE
				event.returnValue = false;
			}	
		}
	},//arreterPropagationDuLien
	
	
	fermer : function(id)
	{
	
		//on cible le noeud a supprimé
		var noeud = ((typeof id) == 'object') ?  document.getElementById(id) : id;

		//on verifie que le noeud existe
		if(noeud != null)
		{
			$('#'+id).animate({opacity: 0}, 'fast', function() {
				//et on supprime le noeud
				noeud = ((typeof id) == 'object') ? id :  document.getElementById(id);
				if(noeud != null)
				{
					if(noeud.parentNode != null)
					{
						noeud.parentNode.removeChild(noeud);
						//Visionneuse.init();
					}
				}
			});
		
		}
	   
	}
	
	
}//visionneuse