/*Creation d'une galerie d'image à partir de miniatures placé dans le code HTML dans la balise id="galerie" ; La image_principal image dans id="image_principal" ;
	ecrire les adresses des image_principals dans le tab_image_principal en respectant l'ordre des miniatures;
	attribuer dans le HTML un id à chaque tab_miniatures à partir de 0 ,1 ,2 ... ; un attribut alt et title*/ 
	//Avantage supposé: les attributs alt des miniatures sont pris en compte par les moteurs de recherche car présent dans le HTML 


var tab_image_principal=new Array('images/moyennes/dentiste-strasbourg-consultation-3.JPG',
																	'images/moyennes/cabinet-dentaire-salle-attente-3.JPG',
																	'images/moyennes/cabinet-dentaire-salle-attente-4.JPG',
																	'images/moyennes/cabinet-dentaire-salle-attente-1.JPG',
																	'images/moyennes/cabinet-dentaire-salle-attente-2.JPG',
																	'images/moyennes/dentiste-strasbourg-consultation-2.JPG',
																	'images/moyennes/cabinet-dentaire-consultation-4.JPG',
																	'images/moyennes/cabinet-dentaire-consultation-3.JPG',
																	'images/moyennes/cabinet-dentaire-consultation-2.JPG',
																	'images/moyennes/cabinet-dentaire-consultation-hygiene.JPG');



var image_principal=document.getElementById('image_principal'); //Recuperer l'element img contenant la image_principal image
var galerie=document.getElementById('galerie');   //Recuperer la div contenant les miniatures

//Pour modifier la description de l'image courante 
var description=document.getElementById('description_image_principal');   
var description_image=document.createTextNode('');
description.appendChild(description_image);



//Construction d'un tableau ne contenant que les images (tab_miniatures) de la balise galerie
var NodesEnfant_galerie=galerie.childNodes;    //Obtenir tout les noeuds enfants sous-forme de galerie
//.. En extraire seulement les images
var tab_miniatures= new Array();

for(var i=0; i < NodesEnfant_galerie.length; i++)
{	
	if(NodesEnfant_galerie[i].tagName == 'IMG')
	{
		tab_miniatures.push(NodesEnfant_galerie[i]);
		NodesEnfant_galerie[i].onclick=new Function('var index='+NodesEnfant_galerie[i].id+';changement(index);');  //Reagir au clique sur une miniature		
	}
}


//Placer la premiere image_principal img

if(image_principal.getAttribute('src')=='#')  
{
	changement(0);
}


//Reagir au clique sur un bouton flèché

var btn_droite=document.getElementById('btn_droite');
var btn_gauche=document.getElementById('btn_gauche');

btn_droite.onmouseover=new Function('btn_droite.setAttribute("src","images/bouton_flechedroite_clique.png")');
btn_gauche.onmouseover=new Function('btn_gauche.setAttribute("src","images/bouton_flechegauche_clique.png")');
btn_droite.onmouseout=new Function('btn_droite.setAttribute("src","images/bouton_flechedroite.png")');
btn_gauche.onmouseout=new Function('btn_gauche.setAttribute("src","images/bouton_flechegauche.png")');
btn_droite.onclick=new Function('var index=recherche_index_courant()+1;changement(index);');
btn_gauche.onclick=new Function('var index=recherche_index_courant()-1;changement(index);');

function recherche_index_courant()
{
		var courant=image_principal.getAttribute("src");
		var i=0;
		while(courant!=tab_image_principal[i])
		{	
			i++;
		}
		return i;
}

//Reagir a la pression d'une touche flechée clavier
document.onkeypress = process_keypress;
function process_keypress(event) 
{
	var index_courant=recherche_index_courant();
	if(event.type == "keypress")
	{
		switch(event.keyCode)
		{	
			case 37: changement(index_courant-1); //gauche
			break; 
		  case 39: changement(index_courant+1); //droite
		  break;
		  default: null;
		}
		
	}
}

//Changer les img et leurs apparences
function changement(index_choisi)
{
	if(index_choisi>=0&&index_choisi<tab_image_principal.length)
	{	
		image_principal.setAttribute('src',''+tab_image_principal[index_choisi]);
		image_principal.setAttribute('alt',''+tab_miniatures[index_choisi].alt);
		image_principal.setAttribute('title',''+tab_miniatures[index_choisi].title);
		description_image.data=''+tab_miniatures[index_choisi].title;
		
		var i=0;
		var img=0;
		while(i < tab_miniatures.length)
		{
			if(tab_miniatures[i].id==index_choisi) 
			{
				tab_miniatures[i].style.border="#18cfe4 2px solid ";
			}
			else
			{
				tab_miniatures[i].style.border="#aaaaaa 2px double";
			}
		i++;
		}
	}
}