var ie = document.all;
  var nn6 = document.getElementById&&!document.all;
  var isdrag = false;
  var ox,oy;
  var dobj;
  var xOriginal;
  var yOriginal;
  var NumPiezas=3;
  var piezaSelec=-1;
  var colocados=0;
  var margen = 20;
  var dureza= new Array(NumPiezas);
 // colocaElementos();
 var fotosSustancias = new Array( "img/t1p3-talco.png", "img/t1p3-yeso.png", "img/t1p3-calcita.png", "img/t1p3-fluorita.png", "img/t1p3-apatito.png", "img/t1p3-ortoclasa.png", "img/t1p3-cuarzo.png", "img/t1p3-topacio.png", "img/t1p3-corindon.png","img/t1p3-diamante.png");
 var preguntas = new Array("Ordena de mayor a menor dureza los siguientes minerales, arrastr\u00e1ndolos al hueco correspondiente:","Ordena de menor a mayor dureza los siguientes minerales, arrastr\u00e1ndolos al hueco correspondiente:");
 
 var pregunta;
 
 var posInic= new Array();
 var posFin= new Array();
 posInic[0]= new Array("","");
 posInic[1]=new Array("",""); 
 posInic[2]=new Array("","");
 posFin[0]=new Array("","");
 posFin[1]=new Array("","");
 posFin[2]=new Array("","");
 var dragable= new Array(NumPiezas);
 
 var ordenes=new Array();
 var orden;
 var encontrado;
 var index=0;
 var i;
 


 //for(i=0;i<NumPiezas;i++)
 //alert(ordenes[i]);
 


 
 
  
 
 
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))
			piezaSelec = i;
			
		if(dragable[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) {
		//alert(dobj.offsetLeft+" "+dobj.offsetTop+ " "+posFin[piezaSelec][0]+" "+posFin[piezaSelec][1]);
		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) {
		
			dobj.style.left = posFin[piezaSelec][0]; //xOriginal;
			dobj.style.top = posFin[piezaSelec][1]; //yOriginal;
			dragable[piezaSelec]=0;
			colocados++;
			if (colocados == NumPiezas) {
				dialogo("Muy bien");
				clearObj(document.getElementById("actividad"));
				colocaElementos();
			}
		}
		else{
			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 pieza;
	var cajon;
	var insertados= new Array(NumPiezas);
	var mineral;
	
	colocados=0;
	pregunta= aleat(0, preguntas.length);
	
	
	for(var j=0;j<NumPiezas;j++){
		
		pieza=document.createElement("img");
		mineral = aleat(0,10);
		while(inArray(mineral, insertados)){mineral = aleat(0,10);}
		insertados[j]=mineral;
		dureza[j]=mineral;
		pieza.setAttribute("src",fotosSustancias[mineral]);
		pieza.setAttribute("id","pieza"+j);
		pieza.setAttribute("class","pieza");
		pieza.setAttribute("style","width:40px;height:40px;");
		document.getElementById("actividad").appendChild(pieza);
		dragable[j]=1;
		}
	

	for(j=0;j<NumPiezas;j++){
		cajon=document.createElement("div");
		cajon.setAttribute("id","cajon"+j);
		cajon.setAttribute("class","cajon");
		cajon.setAttribute("style","border: 1px dashed;width:39px;height:39px;");
		document.getElementById("actividad").appendChild(cajon);
					
		}
		var enunciado=document.createElement("div");
		enunciado.setAttribute("id","enunciado");
		enunciado.setAttribute("class","enunciado");
		enunciado.setAttribute("style","background-color:#CCCCCC;z-index:1;");
		enunciado.appendChild(document.createTextNode(preguntas[pregunta]));
		
		document.getElementById("actividad").appendChild(enunciado);
		
		
		
		if(pregunta)
			ordenaVector(dureza);			
		else
			ordenaVectorInv(dureza);
			
		 for (var i = 0; i < NumPiezas; i++) {
 			for (j = 0; j < NumPiezas; j++) {
				if (dureza[i] == insertados[j]) 
					posFin[j][0] = (i * 40 + 350) + 'px';
			}
 					posFin[i][1]="40px";
 		}
 
 for (i = 0; i < NumPiezas; i++) {
 	posInic[i] = new Array(i * 40 + (50+i) + "px","40px");
 }	
						
		document.getElementById("cajon0").style.left= posFin[0][0];
		document.getElementById("cajon0").style.top= posFin[0][1];		
		
		document.getElementById("cajon1").style.left= posFin[1][0];
		document.getElementById("cajon1").style.top= posFin[1][1];
		
		document.getElementById("cajon2").style.left= posFin[2][0];
		document.getElementById("cajon2").style.top= posFin[2][1];

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