var dragbox;
var deltaX, deltaY;
var client;
var index = 10;
createClient();

function ocultar(){
	document.getElementById("div_2").style.visibility = "hidden";
}
		

function createClient() {
	try {
		client = window.XMLHttpRequest ? new XMLHttpRequest() :
		new ActiveXObject("Microsoft.XMLHTTP");
	}
	catch (e) {
		alert("Sorry, your browser is not Ajax-enabled!");
	}
}
	
function setOpacity(node,val) {
	if (document.attachEvent) {
	//if (node.filters) {
		try {
			node.style.filter = "alpha(opacity=" + val*100 + ")"; 
			//node.filters["alpha"].opacity = val*100;
		} catch (e) { }
	}
	else if (node.style.opacity) {
		node.style.opacity = val;
	}
}

function getX(node) {
	return parseInt(node.style.left);
}

function getY(node) {
	return parseInt(node.style.top);
}

function getWidth(node) {
	return parseInt(node.style.width);
}

function getHeight(node) {
	return parseInt(node.style.height);
}

function setX(node,x) {
	node.style.left = x + "px";
}

function setY(node,y) {
	node.style.top = y + "px";
}

function Evt(evt) {
	this.evt = evt ? evt : window.event;
	this.source = evt.target ? evt.target : evt.srcElement;
	this.x = evt.pageX ? evt.pageX : evt.clientX;
	this.y = evt.pageY ? evt.pageY : evt.clientY;
}

Evt.prototype.toString = function () {
	return "Evt [ x = " + this.x + ", y = " + this.y + " ]";
};

Evt.prototype.consume = function () {
	if (this.evt.stopPropagation) {
		this.evt.stopPropagation();
		this.evt.preventDefault();
	}
	else if (this.evt.cancelBubble) {
		this.evt.cancelBubble = true;
		this.evt.returnValue = false;
	}
};

Evt.addEventListener = function (target,type,func,bubbles) {
	if (document.addEventListener) {
		target.addEventListener(type,func,bubbles);
	}
	else if (document.attachEvent) {
		target.attachEvent("on"+type,func,bubbles);
	}
	else {
		target["on"+type] = func;
	}
};

Evt.removeEventListener = function (target,type,func,bubbles) {
	if (document.removeEventListener) {
		target.removeEventListener(type,func,bubbles);
	}
	else if (document.detachEvent) {
		target.detachEvent("on"+type,func,bubbles);
	}
	else {
		target["on"+type] = null;
	}
};

function dragPress(evt,nodo) {
	evt = new Evt(evt);
	//dragbox = evt.source;
	dragbox = nodo;
	nodo.style.zIndex = index;
	setOpacity(dragbox,.7);
	deltaX = evt.x - getX(dragbox);
	deltaY = evt.y - getY(dragbox);
	Evt.addEventListener(document,"mousemove",dragMove,false);
	Evt.addEventListener(document,"mouseup",dragRelease,false);
	index++;
}

function dragMove(evt) {
	evt = new Evt(evt);
	setX(dragbox,evt.x - deltaX);
	setY(dragbox,evt.y - deltaY);	
	if((evt.x - deltaX) < 0){
		//alert("HOLA");
		cambia_txt(evt.x - deltaX);
	}
	else{
		cambia_txt(evt.x - deltaX);	
	}
	comprobar_posicion(evt.x,deltaX)
	evt.consume();
}

function dragRelease(evt,nodo) {
	evt = new Evt(evt);
	//dragbox = evt.source;
	//alert(evt.x - deltaX);
	dragbox = nodo;
	setOpacity(dragbox,1);
	Evt.removeEventListener(document,"mousemove",dragMove,false);
	Evt.removeEventListener(document,"mouseup",dragRelease,false);
	if (droppedOnDropBox(evt)) {
		dragBoxDropped(evt);
	}
}

function droppedOnDropBox(evt) {
	var dropbox = evt.source;
	var x = getX(dropbox);
	var y = getY(dropbox);
	var width = getWidth(dropbox);
	var height = getHeight(dropbox);
	return evt.x > x &&
	evt.y > y &&
	evt.x < x + width &&
	evt.y < y + height;
}

function dragBoxDropped(evt) {
	client.onreadystatechange = callback;
	//client.open("get","server.php",true);
	//client.send(null);
}

function callback() {
	if (client.readyState == 4) {
		if (client.status == 200) {
			alert(client.responseText);
			createClient();
		}
		else {
			alert("Sorry, there seems to be a problem retrieving the response:\n" +
			client.statusText);
			createClient();
		}
	}
};