var distanceSourisVisagePrecedent = 0;

var animationEnCours = 0;

var matriceCaracteres = new Array(
new Array(new Array(" ","/","/","/","/","/","/","/","/","/","/","/",""),new Array(" ","|"," ","","~","","","","~"," "," ","|",""),new Array("","|","","","0","","","","0","","","|",""),new Array("","|","","","","","","","","","","|",""),new Array("","|","","","","","",")","","","","|",""),new Array("","|","","","","","","","","","","|",""),new Array("","","\\","","","<","-","-","\>","","/","",""),new Array("","","","\\","_","_","_","_","_","/","","","")),
new Array(new Array("","","/","/","/","/","/","/","/","/","/","",""),new Array("","/","","","~","","","","~","","","\\",""),new Array("","|","","","0","","","","0","","","|",""),new Array("","|","","","","","","","","","","|",""),new Array("","|","","","","","",")","","","","|",""),new Array("","|","","","","","","","","","","|",""),new Array("","","\\","","","<","-","-","\>","","/","",""),new Array("","","","\\","_","_","_","_","_","/","","","")),
new Array(new Array("","","/","|","|","|","|","|","|","|","|","",""),new Array("","/","","","","","","","","","","\\",""),new Array("","|","","","o","","","","o","","","|",""),new Array("","|","","","","","","","","","","|",""),new Array("","|","","","","","",")","","","","|",""),new Array("","|","","","","","","","","","","|",""),new Array("","","\\","","","<","~","~","\>","","/","",""),new Array("","","","\\","_","_","_","_","_","/","","","")),
new Array(new Array("","","/","|","|","|","|","|","|","|","\\","",""),new Array("","/","","","","","","","","","","\\",""),new Array("","|","","","¤","","","","¤","","","|",""),new Array("","|","","","","","","","","","","|",""),new Array("","|","","","","","",")","","","","|",""),new Array("","|","","","","","","","","","","|",""),new Array("","","\\","","","<","~","~","\>","","/","",""),new Array("","","","\\","_","_","_","_","_","/","","","")),
new Array(new Array("","","/","\\",",",",",",",",",",","/","\\","",""),new Array("","/","","","","","","","","","","\\",""),new Array("","|","","","¤","","","","¤","","","|",""),new Array("","|","","","","","","","","","","|",""),new Array("","|","","","","","",")","","","","|",""),new Array("","|","","","","","","","","","","|",""),new Array("","","\\","","","","~","~","","","/","",""),new Array("","","","\\","_","_","_","_","_","/","","","")),
new Array(new Array("","","/","(","_","_","_","_","_",")","\\","",""),new Array("","/","","","","","","","","","","\\",""),new Array("","|","","","¤","","","","¤","","","|",""),new Array("","|","","","","","","","","","","|",""),new Array("","|","","","","","","}","","","","|",""),new Array("","|","","","","","","","","","","|",""),new Array("","","\\","","",",","~","~",",","","/","",""),new Array("","","","\\","_","_","_","_","_","/","","","")),
new Array(new Array("","","/","(","_","_","_","_","_",")","\\","",""),new Array("","/","","","","","","","","","","\\",""),new Array("<","","","(","¤",")","","(","¤",")","","",">"),new Array("","|","","","","","","","","","","|",""),new Array("","|","","","","","","}","","","","|",""),new Array("","|","","","","","","","","","","|",""),new Array("","","\\","","",",","~","~",",","","/","",""),new Array("","","","\\","_","_","_","_","_","/","","",""))
);


function animation(action)
{
	//Calcul des distance de la souris par rapport au CENTRE du visage en X et en Y (on tient compte de la position de l'élément englobant)
	var distanceSourisVisageX = (document.getElementById("animation").parentNode.offsetLeft + document.getElementById("animation").offsetLeft + document.getElementById("animation").offsetWidth/2) - action.clientX;
	var distanceSourisVisageY = (document.getElementById("animation").parentNode.offsetTop + document.getElementById("animation").offsetTop + document.getElementById("animation").offsetHeight/2) - action.clientY;
	
	//distance absolue de la souris par rapport au visage (pythagore)
	var distanceSourisVisageCourant = Math.sqrt(distanceSourisVisageX*distanceSourisVisageX + distanceSourisVisageY*distanceSourisVisageY);
	distanceSourisVisageCourant = Math.floor(distanceSourisVisageCourant);
	
	//si la souris va de gauche à droite on lance la marche avant tous les 50 pixels
	if (distanceSourisVisageCourant > (distanceSourisVisagePrecedent + 50))
	{
		animationArriere();
		distanceSourisVisagePrecedent = distanceSourisVisageCourant;
	}
	
	//si la souris va de droite à gauche
	if (distanceSourisVisageCourant < (distanceSourisVisagePrecedent - 50))
	{
		animationAvant();
		distanceSourisVisagePrecedent = distanceSourisVisageCourant;
	}
	return;
}

function animationAvant()
{
	var animation = document.getElementById("matriceCaracteresHTML");
	var lignes = animation.getElementsByTagName("tr");
	var i=0;
	var y=0;
	
	for(i=0; i<lignes.length; ++i)
	{
		cellules = lignes[i].getElementsByTagName("td");
		
		for(y=0; y<cellules.length; ++y)
		{
			cellules[y].innerHTML = matriceCaracteres[animationEnCours][i][y];
		}	
	}
	
	if(animationEnCours <6)
	{
		animationEnCours++;
	}
	else if(animationEnCours==6)
		document.getElementById("texte").innerHTML = "mais aussi un Vampire !!";
	else;
	return;	
}

function animationArriere()
{
	var animation = document.getElementById("matriceCaracteresHTML");
	var lignes = animation.getElementsByTagName("tr");
	var i=0;
	var y=0;
	
	for(i=0; i<lignes.length; ++i)
	{
		cellules = lignes[i].getElementsByTagName("td");
		
		for(y=0; y<cellules.length; ++y)
		{
			cellules[y].innerHTML = matriceCaracteres[animationEnCours][i][y];
		}	
	}
	if(animationEnCours > 0)
	{
		document.getElementById("texte").innerHTML = "Je suis un exemple de contenu intéractif,";
		animationEnCours--;
	}
	else;
	return;		
}