var classMove = "drag";
var myObjectClick = null;
var movable = false;
var positionXAtClick = null;
var positionYAtClick = null;
var positionXMyobjectClick = null;
var positionYMyobjectClick = null;
var currentClientHeight = null;
var myOffset = null;

//Fonction permettant d'initialiser les listeners
function init_evenement(){
	// Connaissance de la hauteur de la zone html dans le client
	currentClientHeight = document.documentElement.clientHeight;
	myOffset 			= (currentClientHeight-(72+363)-610);
	// On commence par affecter une fonction à chaque évènement de la souris
	if(window.attachEvent){
		document.onmousedown = start;
		document.onmousemove = drag;
		document.onmouseup = drop;
	}
	else{
		document.addEventListener("mousedown",start, false); 
		document.addEventListener("mousemove",drag, false);
		document.addEventListener("mouseup",drop, false);
	}
}

//Fonction permettant de récupèrer l'objet sur lequel on a cliqué, et l'on récupère sa classe	
function start(e){
	//On initialise l'évènement s'il n'a aps é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;
			positionYAtClick = e.clientY;
			positionXMyobjectClick = parseInt(myObjectClick.offsetLeft);
			positionYMyobjectClick = parseInt(myObjectClick.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" ;
		//On récupère la position de la souris par rapport à l'objet
		//myObjectClick.style.left = e.clientX + (positionXMyobjectClick - positionXAtClick) + "px";
		if (e.clientY + (positionYMyobjectClick - positionYAtClick)>myOffset && e.clientY + (positionYMyobjectClick - positionYAtClick)<0) {
			myObjectClick.style.top = e.clientY + (positionYMyobjectClick - positionYAtClick) + "px";
		}
		return false;
	}				
}

function drop(){
	myObjectClick = null;
	movable = false;
	positionXAtClick = null;
	positionYAtClick = null;
	positionXMyobjectClick = null;
	positionYMyobjectClick = null;
}


function getClassDrag(myObject){
	with(myObject){
		var x = className;
		listeClass = x.split(" ");
		//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){
				movable = true;
				myObjectClick = myObject;
			}
		}
	}
}

window.onload = init_evenement;
window.onresize = function() {
	currentClientHeight = document.documentElement.clientHeight;
	myOffset 			= (currentClientHeight-(81+200)-610);
	var objectReinit	= document.getElementById("zoneImage");
	objectReinit.style.backgroundPosition = "0px 75px";
}