// JavaScript Document
/* variables*/
var largeur_bloc_commande=120 ;// constante qui d‚finie la taille du bloc du curseur


function Commande()
{

//d‚finition des variables

var largeurEcran =document.getElementById("Ecran").offsetWidth; // r‚cupŠre largeur du div ‚cran
var hauteurEcran =document.getElementById("Ecran").offsetHeight;// r‚cupŠre la hauteur du div ‚cran



/* ce bloc contient la loupe qui donne accŠs au curseur de d‚finition 
de la taille de l'‚cran
*/
//cr‚ation du bloc loupe. Il est visible au d‚part
var e=document.createElement("div");
e.setAttribute("id","DivLoupe");
e.style.width =200+ "px";
e.style.height = 100 + "px";
e.style.top=12+"px";
e.style.left=10+"px";
e.style.zIndex=20;
e.style.position="absolute";
e.style.display="block";
e.style.backgroundColor = document.getElementById("Ecran").style.backgroundColor; 


var e1 = document.createElement("img");
e1.setAttribute("id","PhotoLoupe");
e1.style.position="absolute";
e1.style.display="block";
e1.style.width=50+ "px";
e1.style.top=0+"%";
e1.style.left=40 +"px";
e1.setAttribute("src","Images/cursor/loupe.gif");
e1.style.cursor="pointer";
e.appendChild(e1);


var e2 = document.createElement("div");
e2.setAttribute("id","TextLoupe");
e2.style.display="block";
e2.style.position="absolute";
e2.style.top=50+"px";
e2.style.left=5+"px";
e2.style.width=170+"px";
e2.style.height=10+"px";
e2.innerHTML="Cliquer sur la loupe pour régler la taille de l'écran";
e2.style.fontSize=10+"pt";
e2.style.zIndex="10";
e2.style.color="#3485a0";
e.appendChild(e2);

var d = document.getElementById("Ecran");
d.appendChild(e);


//cr‚ationdu block destin‚ au curseur; Il est non visible au  d‚part
e = document.createElement("div");
e.setAttribute("id","Bloc_Commande");
e.style.position="absolute";
e.style.display="block";
e.style.width=largeur_bloc_commande+"px";
e.style.height=largeur_bloc_commande/5+"px";
e.style.top=2+"%";
e.style.left=1+"%";
e.style.backgroundColor=document.getElementById("Ecran").style.backgroundColor;



var img1 = document.createElement("img");
img1.setAttribute("id","cadre_cursor");
img1.setAttribute("src","Images/Cursor/cadre_cursor.gif");
img1.setAttribute("alt","");
img1.setAttribute("alt","");
img1.style.position="absolute";
img1.zIndex=10;
img1.style.display="block";
img1.style.left=20+"%";

img1.style.top=0+"%";
img1.style.width=100+"%";
img1.style.height=100+"%";
img1.style.zIndex=3

var img2 = document.createElement("img");
img2.setAttribute("id","Cursor");
img2.setAttribute("src","Images/Cursor/cursor.gif");
img2.setAttribute("alt","");
img2.style.position="absolute";
img2.style.display="block";
img2.style.left=22+"%";
img2.style.top=-10+"%";
img2.style.width=8+"%";
img2.zIndex=12;
img2.style.height =30 + "px";
img2.style.zIndex=5;

var img3 = document.createElement("img");
img3.setAttribute("id","fond_cursor");
img3.setAttribute("src","Images/Cursor/fond_cursor.gif");
img3.style.position="absolute";
img3.style.display="block";
img3.style.left=25+"%";
img3.zIndex=11;
img3.style.top=36+"%";
img3.style.width=82+"%";
img3.style.height=28+"%";
img3.style.zIndex=10;



var message= document.createElement("div");
message.setAttribute("id","Message");
message.style.display="block";
message.style.position="absolute";
message.style.width=200+"px";
message.style.height=10+ "px";
message.style.top=32+ "px";
message.style.left=-2+"px";
message.innerHTML="Actionner le curseur pour régler la fenêtre et cliquer pour fermer";
message.style.fontSize=12 +"pt";
message.style.color="#3485a0";
message.style.zIndex="10";



e.appendChild(img1);
e.appendChild(img2);
e.appendChild(img3);

e.appendChild(message);


var d = document.getElementById("Ecran");

document.body.insertBefore(e, d);
e.style.visibility="hidden";

// fin de la cr‚ation des objets
var e = document.getElementById("DivLoupe")
if(e.addEventListener)//ajoute l'‚v‚nement click 
    {
e.addEventListener("click", AfficherTrack,false);
    }
else
  {

e.attachEvent("onclick",AfficherTrack);
  }
e.style.visibility="visible";




//Calcul de la distance du curseur au bord gauche de l'‚cran
var cursor = document.getElementById("Cursor");
var cursorDelta =offset(cursor);// donne la distance du curseur par rapport au c“t‚ gauche de la page


  
  
  
 



/*****************************************************************
 *******************zone fonctions internes … commande*************
 *****************************************************************
 ****************************************************************/  

 
function offset(e)// fonction qui d‚termine la position du curseur par rapport au bord gauche de l'‚cran
  {
 var _offset=0;
while (e.parentNode.tagName !="BODY" )
  {
  e = e.parentNode;

  _offset=_offset + e.offsetLeft;
  }
  
return _offset;
  }
  
  
function verrouiller(event)
{ 

 
document.getElementById("Bloc_Commande").style.visibility="hidden";
document.getElementById("DivLoupe").style.visibility="visible";

}


function Deplacer(event)
{

var d = document.getElementById("Ecran");


cursor.style.left =(event.clientX-cursorDelta) +"px";
var e =document.getElementById("Ecran");
e.style.width=(largeurEcran + cursor.offsetLeft) +"px";
e.style.height=(hauteurEcran + cursor.offsetLeft) +"px";

}

function AfficherTrack()
{

var e = document.getElementById("Bloc_Commande");
var e2 = document.getElementById("fond_cursor");



if(document.addEventListener)
{
e2.addEventListener("mousemove",Deplacer,false);
e.addEventListener("click",verrouiller,false);
}
else
{
if(document.attachEvent)
{
var e = document.getElementById("Bloc_Commande");
var e2 = document.getElementById("fond_cursor");

e.attachEvent("onclick",verrouiller);
e2.attachEvent("onmousemove",Deplacer);
}
}

var e1 = document.getElementById("DivLoupe");
e1.style.visibility ="hidden";
e.style.visibility ="visible";
}
}