// funzioni di utilità
function addListener(element, baseName, handler){
	if(window.addEventListener){alert('Moz');
		element.addEventListener(baseName,handler,false);
	}
	else if(window.attachEvent){alert('IE');
		element.attachEvent('on'+baseName,handler);
	}
}
function setInnerDivSize(){
	var innerDiv=document.getElementById("innerDiv");
	//centro
    innerDiv.style.width = imgWidth;
    innerDiv.style.height = imgHeight;
}

function centra(){
  	//per centrare l'immagine..... funz solo su IE ?!?!?!?!?!
	var innerDiv=document.getElementById("innerDiv");
	innerDiv.style.top =  -((imgHeight/2)-(divHeight/2));
    innerDiv.style.left =  -((imgWidth/2)-(divWidth/2));
}

function setOuterDivSize(){
	var outerDiv=document.getElementById("outerDiv");
	outerDiv.style.width = divWidth;
	outerDiv.style.height = divHeight;
}
function stripPx(value){
	if(value == "") return 0;
	return parseFloat(value.substring(0,value.length-2));
}
function showInfo0(){
	document.getElementById('back_0').style.display="block";
	document.getElementById('info_0').style.display="block";
}
function showInfo1(){
	document.getElementById('back_1').style.display="block";
	document.getElementById('info_1').style.display="block";
}
function showInfo2(){
	document.getElementById('back_2').style.display="block";
	document.getElementById('info_2').style.display="block";
}
function showInfo3(){
	document.getElementById('back_3').style.display="block";
	document.getElementById('info_3').style.display="block";
}
function showInfo4(){
	document.getElementById('back_4').style.display="block";
	document.getElementById('info_4').style.display="block";
}
function showInfo5(){
	document.getElementById('back_5').style.display="block";
	document.getElementById('info_5').style.display="block";
}
function showInfo6(){
	document.getElementById('back_6').style.display="block";
	document.getElementById('info_6').style.display="block";
}
function setPointer(){style.cursor='pointer';}
function disableDrag(){dragging=false; document.getElementById('outerDiv').onmousedown = null;}
function setPoints(){
	var innerDiv=document.getElementById("innerDiv");

			img0 =document.createElement("img");
        img0.src="img/freccDx.gif";
        img0.style.position="absolute";
        img0.style.left='450px';
        img0.style.top='398px';
        img0.zIndex=0;
        img0.setAttribute("id","img_0");
        img0.setAttribute("class","point");
        img0.style.cursor='pointer';
        img0.setAttribute("title","punto 1 per maggiori informazioni cliccazzz");

		if(img0.addEventListener)
			img0.addEventListener('click',showInfo0,false);
		else if(img0.attachEvent)
			img0.attachEvent('onclick',showInfo0);
		//ora lo posso appendere
		innerDiv.appendChild(img0);

		//e per disabilitare il dragging aggiungo
		if(document.getElementById('info_0').addEventListener){
			document.getElementById('info_0').addEventListener('mouseover',disableDrag,false);
		}
		else if(document.getElementById('info_0').attachEvent){
			document.getElementById('info_0').attachEvent('onmouseover',disableDrag);
		}


    		img1 =document.createElement("img");
        img1.src="img/freccDx.gif";
        img1.style.position="absolute";
        img1.style.left='596px';
        img1.style.top='341px';
        img1.zIndex=0;
        img1.setAttribute("id","img_1");
        img1.setAttribute("class","point");
        img1.style.cursor='pointer';
        img1.setAttribute("title","punto 2");

		if(img1.addEventListener)
			img1.addEventListener('click',showInfo1,false);
		else if(img1.attachEvent)
			img1.attachEvent('onclick',showInfo1);
		//ora lo posso appendere
		innerDiv.appendChild(img1);

		//e per disabilitare il dragging aggiungo
		if(document.getElementById('info_1').addEventListener){
			document.getElementById('info_1').addEventListener('mouseover',disableDrag,false);
		}
		else if(document.getElementById('info_1').attachEvent){
			document.getElementById('info_1').attachEvent('onmouseover',disableDrag);
		}


    		img2 =document.createElement("img");
        img2.src="img/freccDx.gif";
        img2.style.position="absolute";
        img2.style.left='567px';
        img2.style.top='499px';
        img2.zIndex=0;
        img2.setAttribute("id","img_2");
        img2.setAttribute("class","point");
        img2.style.cursor='pointer';
        img2.setAttribute("title","punto 3");

		if(img2.addEventListener)
			img2.addEventListener('click',showInfo2,false);
		else if(img2.attachEvent)
			img2.attachEvent('onclick',showInfo2);
		//ora lo posso appendere
		innerDiv.appendChild(img2);

		//e per disabilitare il dragging aggiungo
		if(document.getElementById('info_2').addEventListener){
			document.getElementById('info_2').addEventListener('mouseover',disableDrag,false);
		}
		else if(document.getElementById('info_2').attachEvent){
			document.getElementById('info_2').attachEvent('onmouseover',disableDrag);
		}


    		img3 =document.createElement("img");
        img3.src="img/freccDx.gif";
        img3.style.position="absolute";
        img3.style.left='721px';
        img3.style.top='727px';
        img3.zIndex=0;
        img3.setAttribute("id","img_3");
        img3.setAttribute("class","point");
        img3.style.cursor='pointer';
        img3.setAttribute("title","punto 4 come 7");

		if(img3.addEventListener)
			img3.addEventListener('click',showInfo3,false);
		else if(img3.attachEvent)
			img3.attachEvent('onclick',showInfo3);
		//ora lo posso appendere
		innerDiv.appendChild(img3);

		//e per disabilitare il dragging aggiungo
		if(document.getElementById('info_3').addEventListener){
			document.getElementById('info_3').addEventListener('mouseover',disableDrag,false);
		}
		else if(document.getElementById('info_3').attachEvent){
			document.getElementById('info_3').attachEvent('onmouseover',disableDrag);
		}


    		img4 =document.createElement("img");
        img4.src="img/freccDx.gif";
        img4.style.position="absolute";
        img4.style.left='645px';
        img4.style.top='779px';
        img4.zIndex=0;
        img4.setAttribute("id","img_4");
        img4.setAttribute("class","point");
        img4.style.cursor='pointer';
        img4.setAttribute("title","Appena aggiunto punto 5");

		if(img4.addEventListener)
			img4.addEventListener('click',showInfo4,false);
		else if(img4.attachEvent)
			img4.attachEvent('onclick',showInfo4);
		//ora lo posso appendere
		innerDiv.appendChild(img4);

		//e per disabilitare il dragging aggiungo
		if(document.getElementById('info_4').addEventListener){
			document.getElementById('info_4').addEventListener('mouseover',disableDrag,false);
		}
		else if(document.getElementById('info_4').attachEvent){
			document.getElementById('info_4').attachEvent('onmouseover',disableDrag);
		}


    		img5 =document.createElement("img");
        img5.src="img/freccDx.gif";
        img5.style.position="absolute";
        img5.style.left='620px';
        img5.style.top='828px';
        img5.zIndex=0;
        img5.setAttribute("id","img_5");
        img5.setAttribute("class","point");
        img5.style.cursor='pointer';
        img5.setAttribute("title","Punto 6");

		if(img5.addEventListener)
			img5.addEventListener('click',showInfo5,false);
		else if(img5.attachEvent)
			img5.attachEvent('onclick',showInfo5);
		//ora lo posso appendere
		innerDiv.appendChild(img5);

		//e per disabilitare il dragging aggiungo
		if(document.getElementById('info_5').addEventListener){
			document.getElementById('info_5').addEventListener('mouseover',disableDrag,false);
		}
		else if(document.getElementById('info_5').attachEvent){
			document.getElementById('info_5').attachEvent('onmouseover',disableDrag);
		}


    		img6 =document.createElement("img");
        img6.src="img/freccDx.gif";
        img6.style.position="absolute";
        img6.style.left='164px';
        img6.style.top='709px';
        img6.zIndex=0;
        img6.setAttribute("id","img_6");
        img6.setAttribute("class","point");
        img6.style.cursor='pointer';
        img6.setAttribute("title","Punto 7 come 4");

		if(img6.addEventListener)
			img6.addEventListener('click',showInfo6,false);
		else if(img6.attachEvent)
			img6.attachEvent('onclick',showInfo6);
		//ora lo posso appendere
		innerDiv.appendChild(img6);

		//e per disabilitare il dragging aggiungo
		if(document.getElementById('info_6').addEventListener){
			document.getElementById('info_6').addEventListener('mouseover',disableDrag,false);
		}
		else if(document.getElementById('info_6').attachEvent){
			document.getElementById('info_6').attachEvent('onmouseover',disableDrag);
		}


    }

//var immagine = ;

var dragging = false;
var top;
var left;
var dragStartTop;
var dragStartLeft;
var imgWidth;//=document.getElementById('immagine').width;
//;
var imgHeight;//=document.getElementById('immagine').height;
//;
var divWidth=500;
var divHeight=600;
var newtop=0;
var newleft=0;
var mousepX;
var mousepY;

function init(){
	//definizione del browser

	//dimensioni dell'immagine
	imgWidth=document.getElementById('immagine').width;
    imgHeight=document.getElementById('immagine').height;

    //setOuterDivSize(divWidth+'px',divHeight+'px');
    setOuterDivSize();

	setInnerDivSize();


	var outerDiv = document.getElementById("outerDiv");
	outerDiv.onmousedown = startMove;
	outerDiv.onmousemove = processMove;
	outerDiv.onmouseup = stopMove;
	outerDiv.onmouseout = stopMove;
			document.onkeypress = showkey;
			//per fucking IE
	outerDiv.ondragstart = function(){return false;}
	setPoints();
	//centra();
}
function showkey(event){
	//per fucking IE
	if(!event) event = window.event;
	//event =(event)?event:window.event;

	var info=document.getElementById('info');
	info.innerHTML='<b>Copiare e incollare in coda all\'array dei punti</b>';
	//if(event.ctrlKey)mod();
	if(event.charCode=="99"){
	    //alert('ciao');
		var tempcopia=",array("+mousepX+","+mousepY+",\"Commento\",\"PuntoX: titolo\",\"pgX.html\")";
	    prompt("Copia punto",tempcopia);
	    
		//su moz nn esiste window.clipboardData
		//window.clipboardData.setData("Text",tempcopia);
	    //alert(window.clipboardData.getData("Text"));

	    //alert(mousepX+' '+mousepY);
	}
}


function startMove(event){
	//per fucking IE
	if(!event) event = window.event;

	dragStartLeft = event.clientX;
	dragStartTop = event.clientY;
	var innerDiv = document.getElementById("innerDiv");
	innerDiv.style.cursor="-moz-grab";


	top  = stripPx(innerDiv.style.top);
	left = stripPx(innerDiv.style.left);
	dragging = true;
	return false;
}

function processMove(event){


	var innerDiv = document.getElementById("innerDiv");


	//fuck IE
	if(!event) event = window.event;

	if(dragging){
	    //resetto info
	    var info=document.getElementById('info');
	    info.innerHTML='';
		//nuova posizione
		newtop = top +(event.clientY -dragStartTop);
		newleft = left +(event.clientX -dragStartLeft);
		//per la gestione dello sbordo
		if(newtop>50)newtop=50;
		if(newleft>30)newleft=30;
		//if((-newtop+divHeight)>imgHeight)newtop=-imgHeight+divHeight;
		if(newtop<-(imgHeight-divHeight+50))newtop=-(imgHeight-divHeight+50);
		//if(-newleft+divWidth>imgWidth)newleft=-imgWidth+divWidth;
		if(newleft<-(imgWidth-divWidth+30))newleft=-(imgWidth-divWidth+30);
		//aggiorno
		innerDiv.style.top = newtop+"px";
		innerDiv.style.left = newleft+"px";
	}
	//se si volgiono visualizzare le coordinate
	if(true){

        var coord=document.getElementById('coord');
        mousepX = event.clientX-(400)-newleft-5;
        mousepY = event.clientY-(10)-newtop-5;
        var printure='&nbsp;<b>X:</b> '+
		             (mousepX)+
					 '&nbsp;&nbsp;&nbsp;<b>Y:</b> '+
					 (mousepY);
        coord.innerHTML=printure;
	}


}

function stopMove(){
	var innerDiv = document.getElementById("innerDiv");
	innerDiv.style.cursor = "";
	dragging = false;
}