var curr = null;
var dx = 0;
var dy = 0;
var cw = 0;
var ch = 0;
var ver = 0;
var maxz = 0;
var wait = false;
var moving = false;
var els = new Array();

var request = null;
var requestst = null;
function createRequest() {
    try{
        request = new XMLHttpRequest();
    }catch (trymicrosoft){
        try{
            request = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (othermicrosoft){
            try{
                request = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (failed){
                request = null;
            }
        }
    }
    if (request == null){
        alert("Error creating request object!");
    }
}

function createRequestst() {
    try{
        requestst = new XMLHttpRequest();
    }catch (trymicrosoft){
        try{
            requestst = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (othermicrosoft){
            try{
                requestst = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (failed){
                requestst = null;
            }
        }
    }
    if (requestst == null){
        alert("Error creating requestst object!");
    }
}

function updated() {
	if (request.readyState == 4) {
		//ok
	}
}

function update(el, x, y, z) {
	createRequest();
	var url = 'update.php?el=' + el + '&x=' + x + '&y=' + y + '&z=' + z + '&time=' + new Date().getTime();
	request.open('GET', url, true);
	request.onreadystatechange = updated;
	request.send(null);
}

function select(el, event) {
	
	if (curr != null) return;
	
	curr = el;
	maxz ++;
	curr.style.zIndex = maxz;
	
	var cx = curr.offsetLeft;
	var cy = curr.offsetTop;
	var tx = -100;
	var ty = -100;
	if (event.pageX) tx = event.pageX;
	else if (event.x) tx = event.x;
	if (event.pageY) ty = event.pageY;
	else if (event.y) ty = event.y;
	if ((tx == -100) || (ty == -100)) return;
	dx = cx - tx;
	dy = cy - ty;
	cw = curr.offsetWidth;
	ch = curr.offsetHeight;

    if (event.stopPropagation) event.stopPropagation();
	else event.cancelBubble = true; 

	if (event.preventDefault) event.preventDefault();
    else event.returnValue = false;
	
	if (document.addEventListener) {
        document.addEventListener("mousemove", move, true);
        document.addEventListener("mouseup", release, true);
    }
    else if (document.attachEvent) {
        document.attachEvent("onmousemove", move);
        document.attachEvent("onmouseup", release);
    }
}

function move(event) {
	if (curr == null) return;
	
	var tx = -100;
	var ty = -100;
	if (event.pageX) tx = event.pageX;
	else if (event.x) tx = event.x;
	if (event.pageY) ty = event.pageY;
	else if (event.y) ty = event.y;
	if ((tx == -100) || (ty == -100)) return;
	
	var cx = dx + tx;
	var cy = dy + ty;
	
	if (cx < 0) cx = 0;
	else if (cx > (900 - cw)) cx = 900 - cw;
	if (cy < 0) cy = 0;
	else if (cy > 500 - ch) cy = 500 - ch;
	
	
	curr.style.left = cx + 'px';
	curr.style.top = cy + 'px';
	
	if (event.stopPropagation) event.stopPropagation();
	else event.cancelBubble = true; 

	if (event.preventDefault) event.preventDefault();
    else event.returnValue = false;
}

function release(event) {
	if (document.removeEventListener) {
		document.removeEventListener("mouseup", release, true);
		document.removeEventListener("mousemove", move, true);
	}
	else if (document.detachEvent) {
		document.detachEvent("onmouseup", release);
		document.detachEvent("onmousemove", move);
	}
	
	if (event.stopPropagation) event.stopPropagation();
	else event.cancelBubble = true; 
	
	update(curr.id, curr.offsetLeft, curr.offsetTop, curr.style.zIndex);
	
	curr = null;
}

function moveel(el, x, y) {
	for (var i = 0; i < els.length; i ++) {
		if (els[i].el == el) {
			els[i].x = x;
			els[i].y = y;
			return;
		}
	}
	
	var t = new Object();
	t.el = el;
	t.x = x;
	t.y = y;
	t.cx = el.offsetLeft;
	t.cy = el.offsetTop;
	els.push(t);
	
	if (!moving) {
		moving = true;
		setTimeout("movetmr()", 50);
	}
}

function state() {
	if (requestst.readyState == 4) {
		var s = requestst.responseText;
		
		if (s == '') return;
		var data = s.split(',');
		ver = data[0];
		var i = 1;
		var n = data.length;
		while (i < n) {
			var el = "part" + data[i];
			var x = data[i + 1];
			var y = data[i + 2];
			var z = data[i + 3];
			i += 4;
			
			tmp = document.getElementById(el);
			if (tmp == null) {
				wait = false;
				return;
			}
			if (tmp != curr) {
				//if (tmp.offsetLeft != x)
				//	tmp.style.left = x + 'px';
				//if (tmp.offsetTop != y)
				//	tmp.style.top = y + 'px';
				moveel(tmp, x, y);
				if (tmp.style.z != z) {
					tmp.style.zIndex = z;
					if (z > maxz) maxz = z;
				}
			}
		}
		
		wait = false;
	}
}

function getState() {	
	createRequestst();
	var url = 'state.php?v=' + ver + '&time=' + new Date().getTime();
	requestst.open('GET', url, true);
	requestst.onreadystatechange = state;
	requestst.send(null);
}

function loop() {
	setTimeout("loop()", 3000);
	//if (!wait) {
		wait = true;
		getState();
	//}
}

function movetmr() {
	i = 0;
	n = els.length;
	while (i < n) {
		var t = els[i];
		var dx = t.cx - t.x;
		var dy = t.cy - t.y;
		if ((t.el == curr) || ((dx == 0) && (dy == 0))) {
			if (n > 1) els[i] = els[n - 1];
			delete t;
			els.pop();
			n--;
			i--;
		} else {
			mx = Math.round(dx / 4);
			my = Math.round(dy / 4);
			if ((mx == 0) && (dx != 0)) {
				if (dx < 0) mx = -1; else mx = 1;
			}
			if ((my == 0) && (dy != 0)) {
				if (dy < 0) my = -1; else my = 1;
			}
			t.cx = t.cx - mx;
			t.cy = t.cy - my;
			t.el.style.left = t.cx + 'px';
			t.el.style.top = t.cy + 'px';
		}
		
		i++;
	}
	
	if (els.length > 0) {
		setTimeout("movetmr()", 30);
	}
	else moving = false;
}