var ie = document.all;
  var nn6 = document.getElementById&&!document.all;
  var isdrag = false;
  var ox,oy;
  var dobj;
  var xOriginal;
  var yOriginal;
  var NumPiezas=4;
  var piezaSelec=-1;
  var margen = 25;
  var fin=1;
 // colocaElementos();
 
 var isDragable = new Array(1,1,1,1);
 var posInic= new Array();
 var posFin= new Array();
 


 
 posInic[0]= new Array("85px","330px");
 posInic[1]= new Array("280px","275px");
 posInic[2]= new Array("185px","250px");
 posInic[3]= new Array("10px","250px");
 
 
 posFin[0]= new Array("440px","240px");
 posFin[1]= new Array("448px","172px");
 posFin[2]= new Array("450px","10px");
 posFin[3]= new Array("488px","50px");
 
function movemouse(e) {
  if (isdrag) {
	dobj.style.left = (nn6 ? tx + e.clientX - ox : tx + event.clientX - ox)+'px';
	dobj.style.top  = (nn6 ? ty + e.clientY - oy : ty + event.clientY - oy)+'px';
	return false;
  }
}
 
function selectmouse(e) {
	
	
	var fobj = nn6 ? e.target : event.srcElement;
	var topelement = nn6 ? "HTML" : "BODY";
	while (fobj.tagName != topelement && fobj.className != "pieza") {
		fobj = nn6 ? fobj.parentNode : fobj.parentElement;
	}
	
	
	
	if (fobj.className == "pieza") {
		
		for(i=0; i<NumPiezas; i++)	
		if(fobj.id == ("pieza" +(i+1)))
			piezaSelec = i;
			
		if(isDragable[piezaSelec])
		isdrag = true;
		
		dobj = fobj;
		
	
	
		
		
		
		
		tx = parseInt(dobj.style.left + 0,10);
		ty = parseInt(dobj.style.top + 0,10);
		ox = nn6 ? e.clientX : event.clientX;
		oy = nn6 ? e.clientY : event.clientY;
		document.onmousemove = movemouse;
		return false;
	}
}

function upmouse(){
	if (isdrag) {
		
		
		if (dobj.offsetLeft < parseInt(posFin[piezaSelec][0]) + margen && 
			dobj.offsetLeft > parseInt(posFin[piezaSelec][0]) - margen &&
			dobj.offsetTop < parseInt(posFin[piezaSelec][1]) + margen &&
			dobj.offsetTop > parseInt(posFin[piezaSelec][1]) - margen) {
		
			//alert(piezaSelec + " Izda=" + dobj.offsetLeft+" Top=" + dobj.offsetTop);
			dobj.style.left = posFin[piezaSelec][0];//xOriginal;
			dobj.style.top = posFin[piezaSelec][1];//yOriginal;
			isDragable[piezaSelec]=0;
			
			fin=1;
			 for(i=0; i< NumPiezas; i++)
 				if(isDragable[i])
					fin=0;
			if (fin) {
				dialogo("Muy bien!!");
				colocaElementos();
				 for(i=0; i< NumPiezas; i++)
 				isDragable[i]=1;
				
			}
		}
		else{
			//alert(piezaSelec + " Izda=" + dobj.offsetLeft+" Top=" + dobj.offsetTop);
			dobj.style.left = posInic[piezaSelec][0];//xOriginal;
			dobj.style.top = posInic[piezaSelec][1];//yOriginal;
			
		}
		
	}
	isdrag = false;
}

document.onmousedown = selectmouse;
document.onmouseup = upmouse;



function colocaElementos(){	

		var enunciado=document.createElement("div");
				
		enunciado.appendChild(document.createTextNode("Prepara el utillaje para la medida del punto de ebullici\u00f3n."));
		enunciado.style.position="absolute";
		enunciado.style.background="#dbdbdb";
		enunciado.style.left="20px" ;
		enunciado.style.top="230px" ;
		document.getElementById("actividad").appendChild(enunciado);	
		
		document.getElementById("cajon1").style.right= '10px';
		document.getElementById("cajon1").style.top= '10px';		
		

		document.getElementById("pieza1").style.left= posInic[0][0];
		document.getElementById("pieza1").style.top=posInic[0][1];
		
		document.getElementById("pieza2").style.left= posInic[1][0];
		document.getElementById("pieza2").style.top=posInic[1][1];

		
		document.getElementById("pieza3").style.left= posInic[2][0];
		document.getElementById("pieza3").style.top= posInic[2][1];
		
		document.getElementById("pieza4").style.left= posInic[3][0];
		document.getElementById("pieza4").style.top= posInic[3][1];
		
}