var classMove = "drag"; // nom de class des objets draggables
var myObjectClick = null; // objet actuellement cliqué
var movable = false;
var positionXAtClick = null;
var positionYAtClick = null;
var positionXMyobjectClick = null;
var positionYMyobjectClick = null;
var tache;
//Fonction permettant d'initialiser les listeners
function init_evenement(){
//On commence par affecter une fonction à chaque évènement de la souris
	if(window.attachEvent){ // pour IE
		document.onmousedown = start;
		document.onmousemove = drag;
		document.onmouseup = drop;
		tache = document.all["tache"];
	}
	else{ // pour les autres navigateurs
		document.addEventListener("mousedown",start, false);
		document.addEventListener("mousemove",drag, false);
		document.addEventListener("mouseup",drop, false);
		tache = document.getElementById("tache");
	}
	lireCookies(); // position du tache
}

//Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe
function start(e){
	//On initialise l'évènement s'il n'a pas été créé ( sous ie )
	if(!e){
		e = window.event;
	}
	//Détection de l'élément sur lequel on a clické
	monElement = (e.target)? e.target:e.srcElement;

	if(monElement) {
		//On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables
		getClassDrag(monElement);
		if(myObjectClick){
			positionXAtClick = e.clientX; // position du curseur lors du click
			positionYAtClick = e.clientY;
			positionXMyobjectClick = parseInt(tache.offsetLeft); // position avant déplacement de l'objet cliqué
			positionYMyobjectClick = parseInt(tache.offsetTop);
			return false;
		}
	}
}

function drag(e){
	//On initialise l'évènement s'il n'a aps été créé ( sous ie )
	if(!e){
		e = window.event;
	}
	//Si l'objet est déplaçable et qu'il existe
	if(movable && myObjectClick){
		// myObjectClick.style.position = "absolute" ; // donne la propriété "absolu" à l'objet
		//On récupère la position de la souris par rapport à l'objet
		tache.style.left = e.clientX+(positionXMyobjectClick-positionXAtClick)+"px";
		tache.style.top = e.clientY+(positionYMyobjectClick-positionYAtClick)+"px";
	}
}

function drop(){
	myObjectClick = null;
	movable = false;
	positionXAtClick = null;
	positionYAtClick = null;
	positionXMyobjectClick = null;
	positionYMyobjectClick = null;
	document.cookie ="tacheX="+tache.style.left+"; path=/;";	// écrire la position du tache dans un cookie
	document.cookie ="tacheY="+tache.style.top+"; path=/;";
}

function getClassDrag(myObject){
	with(myObject){
		var x = className; // nom de la classe de l'objet
		listeClass = x.split(" "); // si l'objet à plusieurs classes
		//On parcours le tableau pour voir si l'objet est déplaçable
		for(var i = 0 ; i < listeClass.length ; i++){
			if(listeClass[i] == classMove){ // si une des classe est égale à la classe définie pour les objets draggables...
				movable = true; // l'objet est déplacable
				myObjectClick = myObject;
			}
		}
	}
}
function getCookieInfo(dataName) { // récupérer un cookie
	// longueur de la valeur recherchée
     var cookieLen = dataName.length;
	 // contenu du cookie
     var cookieData = document.cookie;
	 // longueur du cookie
     var allcookieLen = cookieData.length;
	 //
     var i = 0;
     var cookieEnd;
	 //
	 // scanne le cookie pour y rechercher la valeur demandée (paramètre de la fonction)
     while(i < allcookieLen) {
          var j = i + cookieLen;
          if (cookieData.substring(i,j) == dataName) {
               cookieEnd = cookieData.indexOf(";", j);
               if (cookieEnd == -1) {
                    cookieEnd = cookieData.length;
               }
              return unescape(cookieData.substring(j+1, cookieEnd))
         }
         i++;
     }
// message d'erreur
return "Echec : cookie non cree ?";
}

function lireCookies(){
	if(document.cookie){// si le cookie existe... on récupère les coordonnées du tache
		tache.style.left=getCookieInfo("tacheX");
		tache.style.top=getCookieInfo("tacheY");
	}
	tache.style.visibility="visible";
}

window.onload = init_evenement;