

window.onload = function(){
	console.log("onload");
	var imgId = document.getElementById("idImmagine");
	
	imgId.style.top = "80px";
	imgId.style.left = "80px";
	
	// console.log("imgId.style.top: " + imgId.style.top);
	// console.log("imgId.style.left: " + imgId.style.left);
	
	document.onmousedown = calcolaCoordinate;
	document.onmouseup = stopDrag;
	
};

function stopDrag(evt) {
	// var imgId = document.getElementById("idImmagine");
	// imgId.style.top = evt.clientY;
	// imgId.style.left = evt.clientX;
	
	document.onmousemove = null;
}


function calcolaCoordinate(e) {
	if (e == null) {
		e = window.event;
	}
	
	var cliccato = (typeof(window.event) != "undefined") ? e.srcElement : e.target;
	
	if (cliccato.id == "idImmagine") {
		mouseover = true;
		
		pleft = parseInt(cliccato.style.left);
		ptop = parseInt(cliccato.style.top);
		
		//posizione iniziale in cui ho cliccato
		xcoor = e.clientX;
		ycoor = e.clientY;
		
		console.log("pleft: " + pleft);
		console.log("ptop: " + ptop);
		console.log("xcoor: " + xcoor);
		console.log("ycoor: " + ycoor);
		
		document.onmousemove = muoviImmagine;
		return false;
	}
	
	function muoviImmagine(e) {
		if (e == null) {
			e = window.event;
		}
		
		cliccato.style.left = pleft + e.clientX - xcoor + "px";
		cliccato.style.top = ptop + e.clientY - ycoor + "px";
		return false;
	}
	
}
