//renvoi x
function GetElementPostionTop(xElement){
  var selectedPosY = 0;
  var theElement = document.getElementById(xElement);
  while(theElement != null){
    selectedPosY += theElement.offsetTop;
    theElement = theElement.offsetParent;
  }            		      		      
  return selectedPosY
}
//renvoi y
function GetElementPostionLeft(xElement){
  var selectedPosX = 0;
  var theElement = document.getElementById(xElement);    
  while(theElement != null){
    selectedPosX += theElement.offsetLeft;
    theElement = theElement.offsetParent;
  }             		      		      
  return selectedPosX
}


function position(e) {
var isIE = document.all;
var x = 0;
var y = 0;
//taille de la petite image 
var largeurPetiteImage = 248;
var hauteurPetiteImage = 248;
//taille de la grande image penser a mettre margin (taille/2) dans div
var largeurGrandeImage = 570;
var hauteurGrandeImage = 570;
//coeff entre la petite et la grande image (2 = 2 fois plus grande!)
var CoeffImage = 2.30;
//alert(CoeffImage);

//Récupère les valeurs x et y  - ok pour chrome, IE, safari, Firefox
if (!e) e = window.event;
	if (e)
	{
	x = isIE ? (e.clientX + document.body.scrollLeft) : e.pageX;
	y = isIE ? (e.clientY + document.body.scrollTop) : e.pageY;
}

	//coords de l'objet (petite image)	
	var imgLeft = GetElementPostionLeft('imgMoyenne');
	var imgTop = GetElementPostionTop('imgMoyenne');
	//alert("petite" +imgLeft);
	
	//coords de l'objet (grande image)
	var imgLeft2 = GetElementPostionLeft('grande');
	var imgTop2 = GetElementPostionTop('grande');
	//alert("grande" +imgLeft);	
	
	//deplacer grande image
	var image = document.getElementById("grande");
	
	//Enlever les marges d'origine du div (sinon ca les garde!!) et rendre visible!

	document.getElementById("divPourGrande").style.visibility='visible';
	document.getElementById("divPourGrande").style.left= imgLeft+largeurPetiteImage+10 + "px";
	//alert(imgLeft+largeurPetiteImage+10 );
	
	document.getElementById("divPourGrande").style.top= imgTop  + "px";
	
	document.getElementById("grande").style.marginLeft=0;
	document.getElementById("grande").style.marginTop=0;
	
	//calcul du left et top de la grande image
	//X
	document.getElementById("grande").style.left= -(((x-imgLeft)*CoeffImage)/(1 + CoeffImage)) +"px" ;

	//Y
	document.getElementById("grande").style.top=-(((y-imgTop)*CoeffImage )/(1+CoeffImage)) +"px";

}

//cacher le div avec zoom
function cacherDivZoomImage(id){
	document.getElementById(id).style.visibility='hidden';
}

function afficheMoyenneImage(moyenneImage){
	document.getElementById('imgMoyenne').src=moyenneImage;
	document.getElementById('imgMoyenne').style.height=248 +"px";
	document.getElementById('imgMoyenne').style.width=248 +"px";
}