//initialisation variables
var zone_test = null ;
var infobulle = null ;
var fond = null ;
var contenu = null ;

//au chargement de la page
window.onload = function()
{
	zone_test = document.getElementById("zone_test") ;
	var images_possibles = zone_test.getElementsByTagName("a") ;
	for(var i=0; i<images_possibles.length ; i++)
	{
		var image = images_possibles[i] ;
		classesImage = image.className.split(" ") ;
		if(classesImage[0]=="image")
		{
			image.onmouseover = creer_description ;
			image.onmouseout = supprimer_description ;
			image.onmousemove = bouger_description ;		
		}
	}
}

//faire apparaitre la zone de description en fonction de la souris
function creer_description(event)
{
	
	if(infobulle==null)
	{
		//on créé l'infobulle
		infobulle = document.createElement("div") ;
		infobulle.className = "infobulle" ;
		
		//on créé la zone de background
		fond = document.createElement("div") ;
		fond.className = "fond" ;
		
		//on colle une div de contenu
		contenu = document.createElement("div") ;
		contenu.className = "contenu" ;
		
		//on affiche du texte en fonction de la classe de l'element
		var image = this ;
		var classesImage = image.className.split(" ") ;
		contenu.innerHTML = document.getElementById(classesImage[0] + '_' + classesImage[1]).innerHTML;
		
		//on deplace la description sur la souris
		bouger_description(event)
		
		//on attache les elements
		infobulle.appendChild(fond) ;
		infobulle.appendChild(contenu) ;
		document.body.appendChild(infobulle) ;
	}
}

function supprimer_description(event)
{
	if(infobulle!=null)
	{
		//on cherche l'element a détruire et on le supprime pour eviter de se retrouver avec plusieurs div description
		var aDetruire = document.getElementsByTagName("div") ;
		for(var i=0 ; i<aDetruire.length ; i++)
		{
			if(aDetruire[i].className=="infobulle")
			{
				var el = aDetruire[i] ;
				document.body.removeChild(el) ;
			}
		}
		infobulle = null ;
	}
}

function bouger_description(event)
{	
	if(infobulle!=null)
	{
		//on initialise l'observateur souris et on récupere les coordonnées
		var e = event || window.event ;
		var posX = e.pageX || e.x ;
		var posY = e.pageY || e.y ;
		
		//on colle fond a la souris
		infobulle.style.left = posX+20 ;
		infobulle.style.top = posY-120 ;
	}
	
}