var timestamp= new Array();
var scores = new Array();

//var zindex= 0;

window.onload = function(){
	check();
	makeEditable("nick");
	setInterval("check()",1000);
}

function check(){
// provo con prototype
	var success	= function(response){refresh(response);}
	var failure	= function(response){refreshFailure(reponse);}
/*
  	var url = 'getJson.php'
	var param='cachebuster='+new Date().getTime();
	var myAjax = new Ajax.Request(url, {method:'get', parameters:param, onSuccess:success, onFailure:failure});
*/
	PassAjaxResponseToFunction('getJson.php?cachebuster='+new Date().getTime(),'refresh');
}

function refreshFailure(response){
	alert('problema di refresh');
}

function refresh(response){
	//var response=syncGetRequest('getJson.php')
	var updateScores = false;
	var JSON = eval("({"+response+"})");
	for (var i in JSON.puzzle) {
		if (JSON.puzzle[i].timestamp != timestamp[i] && i!="extend") { //controllare questa storia dell'EXtend!!!
			timestamp[i] = JSON.puzzle[i].timestamp;
			var id = JSON.puzzle[i].id;
			var nick = JSON.puzzle[i].ip;

			//alert(id);
			document.getElementById(id).style.top = JSON.puzzle[i].top;
			document.getElementById(id).style.left = JSON.puzzle[i].left;
			document.getElementById(id).title = JSON.puzzle[i].ip;
			document.getElementById(id).style.zIndex = JSON.puzzle[i].timestamp;;
			//zindex=zindex + 1;
				// controllo se è nella posizione giusta e lo blocco
				//$x=$sizeBox*fmod($i,$nCols); $sizebox=50
				//$y=$sizeBox*floor($i/$nCols); $nCols=$image_width/$sizeBox; $nCols =800/50 = 16
			var x = 50 * (i % 16);
			var y = 50 * Math.floor(i / 16);
			//if (i==191) alert(JSON.puzzle[i].left+"- "+ x+" ---- "+JSON.puzzle[i].top+" - "+y); // && JSON.puzzle[i].left==x) 
			if (JSON.puzzle[i].top==y+"px" && JSON.puzzle[i].left==x+"px") {
				//document.getElementById(id).style.zindex = 1;
				document.getElementById(id).className="locked";
				//alert("OK!!! pezzo giusto id:" +i+ " - " +x +"px - "+ y+ "px");
				if (typeof scores[nick] == "undefined" ) 
					scores[nick]=0;
				scores[nick] += 1;
				updateScores = true;
				}
		}		
	}
	if (updateScores) {
			//alert("update");
			var res = "<h3>SCORES</h3><table border='1'>";
			for (var j in scores) { // lcosì non funziona, l'ultimo elemento è strano
				if (j != "extend" ) 
					res=res+"<tr><td>"+j+"</td><td>"+scores[j]+"</td></tr>";
			
			}	
			res=res+"</table>";
			document.getElementById("scores").innerHTML=res;
	}
	
}

if  (document.getElementById){

(function(){

//Stop Opera selecting anything whilst dragging.
if (window.opera){
document.write("<input type='hidden' id='Q' value=' '>");
}

var n = 500;
var dragok = false;
var y,x,d,dy,dx;

function move(e){
if (!e) e = window.event;
 if (dragok){
  d.style.left = dx + e.clientX - x + "px";
  d.style.top  = dy + e.clientY - y + "px";
  return false;
 }
}

function down(e){
if (!e) e = window.event;
var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){
 temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
 }
if (temp.className == "dragclass"){
	 if (window.opera){
	  document.getElementById("Q").focus();
	 }
	 dragok = true;
	 temp.style.zIndex = temp.style.zIndex + 1;    //controllare se può andar bene come soluzione
	 d = temp;
	 dx = parseInt(temp.style.left+0);
	 dy = parseInt(temp.style.top+0);
	 x = e.clientX;
	 y = e.clientY;
	 document.onmousemove = move;
	 return false;
	 }
}

function up(e){
if (!e) e = window.event;
var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){
 temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
	}
dragok = false;
document.onmousemove = null;


id=temp.id;
var top=temp.style.top;
var left=temp.style.left;
var nick=document.getElementById("nick").innerHTML;

//var response=syncGetRequest('putChange.php?id='+id+'&top='+top+'&left='+left);
// provo con prototype
	var success	= function(t){putchageSuccess(t);}
	var failure	= function(t){putchageFailed(t);}

  	var url = 'putChange.php?id='+id+'&nick='+nick+'&top='+top+'&left='+left;
	var param='id='+id+'&nick='+nick+'&top='+top+'&left='+left;
	var myAjax = new Ajax.Request(url, {method:'get', parameters:param, onSuccess:success, onFailure:failure});



//PassAjaxResponseToFunction('putChange.php?id='+id+'&nick='+nick+'&top='+top+'&left='+left,'empty');

}

document.onmousedown = down;
document.onmouseup = up;

})();
}

function putchageSuccess(t){
//alert("change OK!")
}

function putchageFailed(t){
alert("putchange error")
}


function empty(response) {
}

function asyncGetRequest(request,callback) {
try {
	var httpRequest = new XMLHttpRequest();
	
    httpRequest.open("GET", request, false, null, null);  
    httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    httpRequest.send('');
  }catch (e){
    alert('An error has occured calling the external site: '+e);
    return false;
	} 

  //Make sure we received a valid response
  switch(httpRequest.readyState) {
    case 1,2,3:
      alert('Bad Ready State: '+httpRequest.status);
      return false;
    break;
    case 4:
      if(httpRequest.status !=200) {
        alert('The server respond with a bad status code:'+httpRequest.status);
        return false;
      } else {
        var response = httpRequest.responseText;
      }
    break;
  }
  return response;
}

// EDIT IN PLACE
function makeEditable(id){
	Event.observe(id, 'click', function(){edit($(id))}, false);
	Event.observe(id, 'mouseover', function(){showAsEditable($(id))}, false);
	Event.observe(id, 'mouseout', function(){showAsEditable($(id), true)}, false);
}

function edit(obj){
	Element.hide(obj);
	
	var textarea = '<div id="'+obj.id+'_editor"><textarea id="'+obj.id+'_edit" name="'+obj.id+'" rows="1" cols="30">'+obj.innerHTML+'</textarea>';
	var button	 = '<span><input id="'+obj.id+'_save" type="button" value="SAVE" /> OR <input id="'+obj.id+'_cancel" type="button" value="CANCEL" /></span></div>';
	
	new Insertion.After(obj, textarea+button);	
		
	Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false);
	Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)}, false);
	
}

function showAsEditable(obj, clear){
	if (!clear){
		Element.addClassName(obj, 'editable');
	}else{
		Element.removeClassName(obj, 'editable');
	}
}

function saveChanges(obj){
	
	var new_content	=  escape($F(obj.id+'_edit'));

	obj.innerHTML	= "Saving...";
	cleanUp(obj, true);

	var success	= function(t){editComplete(t, obj);}
	var failure	= function(t){editFailed(t, obj);}

  	var url = 'changeNick.php';
	var pars = 'id='+obj.id+'&nick='+new_content;
	var myAjax = new Ajax.Request(url, {method:'post', postBody:pars, onSuccess:success, onFailure:failure});

}

function cleanUp(obj, keepEditable){
	Element.remove(obj.id+'_editor');
	Element.show(obj);
	if (!keepEditable) showAsEditable(obj, true);
}

function editComplete(t, obj){
	obj.innerHTML	= t.responseText;
	showAsEditable(obj, true);
}

function editFailed(t, obj){
	obj.innerHTML	= 'Sorry, the update failed.';
	cleanUp(obj);
}