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;

var currentDivVerticalSize = 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;
	
	currentDivVerticalSize 	= currentClientHeight-72-363;
	//alert(currentDivVerticalSize);

	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;

	currentDivVerticalSize = currentClientHeight-72-363;

	myOffset 			= (currentClientHeight-(81+200)-610);

	var objectReinit	= document.getElementById("zoneImage");

	objectReinit.style.backgroundPosition = "0px 75px";

}