var sustancias = new Array("aluminio","cobre","hierro","mercurio","oro","plata","plomo");
var rutaSustancias = new Array("img/t1p9-aluminio.png","img/t1p9-cobre.png","img/t1p9-hierro.png","img/t1p9-mercurio.png","img/t1p9-oro.png","img/t1p9-plata.png","img/t1p9-plomo.png")
var densidades = new Array(2.70,8.93,7.87,13.50,19.30,10.50,11.30)
var aleatorioSusDen;
var aleatorioVolumen;
var volumen;
var masa;
var continuar=0;
var acumulado=0;
var veces=0;


function escribeEnunciado()
{	

	if (continuar == 0) 
	{		
			
		if (veces == 0) {
			
			aleatorioSusDen = aleat(0, 7);
			aleatorioVolumen = aleat(10, 19);
			volumen = aleatorioVolumen * 5;
			masa = Math.round(parseFloat(volumen * densidades[aleatorioSusDen]) * 100) / 100;
			//alert("AleatorioSusDen " + aleatorioSusDen);
			
			
		}
		clearObj(document.getElementById("actividad"));
		clearObj(document.getElementById("enunciado"));
		
		
		veces=1;		
		
		
		formulario = document.createElement("form");
		formulario.setAttribute("name", "form1");
		
		formulario.setAttribute("method", "POST");
		
		
		var accion = document.createElement("div");
		accion.style.background="#dbdbdb";
		accion.setAttribute("id","accion");
		accion.appendChild(document.createTextNode("Coloca la sustancia sobre la balanza para medir su masa"));
		document.getElementById("enunciado").appendChild(document.createElement("br"));
		document.getElementById("enunciado").appendChild(accion);
		document.getElementById("enunciado").appendChild(document.createElement("br"));
		//Creamos caja de texto para la masa
		//document.getElementById("enunciado").appendChild(document.createElement("BR"));
		//document.getElementById("enunciado").appendChild(document.createElement("BR"));
		
		
		
		formulario.appendChild(document.createTextNode("Masa "));
		input = document.createElement("input");
		input.setAttribute("id", "masa");
		input.setAttribute("size", "6");
		input.setAttribute("type", "text");
		input.setAttribute("onkeypress", "javascript:if(event.keyCode==13){return false;};")
		
		
		if(veces==2)
		{
			input.setAttribute("value",masa);
		}
		
		formulario.appendChild(input);
		

		
		//Creamos caja de texto para el volumen
		
		formulario.appendChild(document.createTextNode("Volumen "));
		input = document.createElement("input");
		input.setAttribute("name", "volumen");
		input.setAttribute("size", "6");
		input.setAttribute("type", "text");
		input.setAttribute("onkeypress", "javascript:if(event.keyCode==13){return false;}")
		formulario.appendChild(input);
		
		//Creamos caja de texto para la densidad
		
		formulario.appendChild(document.createTextNode("Densidad "));
		input = document.createElement("input");
		input.setAttribute("name", "densidad");
		input.setAttribute("size", "6");
		input.setAttribute("type", "text");
		input.setAttribute("onkeypress", "javascript:if(event.keyCode==13){return false;}")
		formulario.appendChild(input);
		
		
				
		input = document.createElement("input");
		input.setAttribute("type", "button");
		input.setAttribute("name", "boton");
		input.setAttribute("value", "Comprobar Masa");
		input.setAttribute("onclick", "compruebaMasa();");
		formulario.appendChild(input);
		
		formulario.appendChild(document.createElement("BR"));
		
		
		
		
		
		
		document.getElementById("enunciado").appendChild(formulario);
		
		//alert("(APARECE UNA BALANZA y EL TROCITO DE SUSTANCIA)");

		
		
		
		
		//alert("(EL NIÑO COLOCA EL TROCITO EN LA BALANZA)")
		
			var trocito = document.createElement("img");
			trocito.setAttribute("src",rutaSustancias[aleatorioSusDen]);
			trocito.setAttribute("id","trocito");
			trocito.setAttribute("style","z-index: 20;");		
			trocito.setAttribute("class","trocito");
			document.getElementById("actividad").appendChild(trocito);
			
			var balanza = document.createElement("img");
			balanza.setAttribute("id","aparato");
			balanza.setAttribute("src","img/t1p9-balanza.png");
			balanza.setAttribute("style","position:absolute;left:0px; top:30px;width:120px;");		
			document.getElementById("actividad").appendChild(balanza);
			//alert(document.getElementById("trocito").src);
			
			
			
			var resultado = document.createElement("div");
			resultado.setAttribute("id","resultado");
			resultado.setAttribute("style","color: #FFFFFF; background-color:#CCCCCC;position:absolute;width:70px;height:18px;left:250px; top:0px;background= white;border:1px solid;");
			resultado.appendChild(document.createTextNode("0 g"));
			document.getElementById("actividad").appendChild(resultado);
			
			colocaElementos();
		
		
		//alert("MUESTRA TROCITOOO!!!");
		
		
	}else if(continuar==1)
		  {
		  		
				
				
						
				
				borraDOM(document.getElementById("enunciado"));
				clearObj(document.getElementById("resultado"));
				document.getElementById("resultado").appendChild(document.createTextNode("100 mL"));
				
				
				
				document.getElementById("aparato").setAttribute("src", "img/t1p9-probeta100.png");
				document.getElementById("aparato").setAttribute("style","position:relative;left:-150px; top:10px;height:70px;");
				
				formulario = document.createElement("form");
				formulario.setAttribute("name", "form1");
				formulario.setAttribute("method", "POST");
				
				var accion = document.createElement("div");
				accion.style.background="#dbdbdb";
				accion.setAttribute("id","accion");
				document.getElementById("enunciado").appendChild(document.createElement("br"));
				accion.appendChild(document.createTextNode("Coloca el cuerpo en la probeta para medir su volumen"));
				document.getElementById("enunciado").appendChild(accion);
				document.getElementById("enunciado").appendChild(document.createElement("br"));
				
				
				
				//Creamos caja de texto para la mas
				
				formulario.appendChild(document.createTextNode("Masa "));
				input = document.createElement("input");
				input.setAttribute("name", "masa");
				input.setAttribute("type", "text");
				input.setAttribute("size", "6");
				input.setAttribute("value", masa);
				formulario.appendChild(input);
				//Creamos caja de texto para el volumen
				
				formulario.appendChild(document.createTextNode("Volumen "));
				input = document.createElement("input");
				input.setAttribute("id", "volumen");
				input.setAttribute("size", "6");
				input.setAttribute("type", "text");
				input.setAttribute("value", "");
				input.setAttribute("onkeypress", "javascript:if(event.keyCode==13){return false;};")
				
				if(veces==2)
				{
					input.setAttribute("value",masa);
				}
					
				formulario.appendChild(input);
				
				//Creamos caja de texto para la densidad
				
				formulario.appendChild(document.createTextNode("Densidad "));
				input = document.createElement("input");
				input.setAttribute("name", "densidad");
				input.setAttribute("type", "text");
				input.setAttribute("size", "6");
				input.setAttribute("value", "");
				input.setAttribute("onkeypress", "javascript:if(event.keyCode==13){return false;}")
				formulario.appendChild(input);
				
				
				formulario.appendChild(document.createElement("BR"));
				input = document.createElement("input");
				input.setAttribute("type", "button");
				input.setAttribute("name", "boton");
				input.setAttribute("value", "Comprobar Volumen");
				input.setAttribute("onclick", "compruebaVolumen();");
				
				formulario.appendChild(input);
				
				document.getElementById("enunciado").appendChild(formulario);
				
				
				//alert("(APARECE UNA PROBETA CON LÍQUIDO A LA MITAD)");
				//document.getElementById("enunciado").appendChild(document.createElement("BR"));
				//document.getElementById("enunciado").appendChild(document.createTextNode("Coloca el cuerpo en la probeta para medir su volumen"));
				//alert("(El alumno debe arrastrar el cuerpo a la boca (o dentro) de la probeta)")

			if(!document.getElementById("trocito")){
				var trocito = document.createElement("img");
			trocito.setAttribute("src",rutaSustancias[aleatorioSusDen]);
			trocito.setAttribute("id","trocito");
			trocito.setAttribute("style","z-index: 20;");		
			trocito.setAttribute("class","trocito");
			document.getElementById("actividad").appendChild(trocito);
					
			}
			colocaElementos();
			
			
				
				
		  }else if(continuar==2)
		  		{
					borraDOM(document.getElementById("enunciado"));
					borraDOM(document.getElementById("actividad"));
										
					formulario = document.createElement("form");
					formulario.setAttribute("name", "form1");
					formulario.setAttribute("method", "POST");
					
					var accion = document.createElement("div");
				accion.style.background="#dbdbdb";
				accion.setAttribute("id","accion");
				document.getElementById("enunciado").appendChild(document.createElement("br"));
				accion.appendChild(document.createTextNode("Calcula la densidad y escríbela en el hueco correspondiente"));
				document.getElementById("enunciado").appendChild(accion);
				document.getElementById("enunciado").appendChild(document.createElement("br"));
		
					//Creamos caja de texto para la masa
					
					formulario.appendChild(document.createTextNode("Masa "));
					input = document.createElement("input");
					input.setAttribute("name", "masa");
					input.setAttribute("type", "text");
					input.setAttribute("size", "6");
					input.setAttribute("value", masa);
					formulario.appendChild(input);
					
					//Creamos caja de texto para el volumen
					
					formulario.appendChild(document.createTextNode("Volumen "));
					input = document.createElement("input");
					input.setAttribute("name", "volumen");
					input.setAttribute("type", "text");
					input.setAttribute("size", "6");
					input.setAttribute("value", volumen);				
					formulario.appendChild(input);
					
					//Creamos caja de texto para la densidad
					
					formulario.appendChild(document.createTextNode("Densidad "));
					input = document.createElement("input");
					input.setAttribute("id", "densidad");
					input.setAttribute("type", "text");
					input.setAttribute("size", "6");
					input.setAttribute("value", "");
					input.setAttribute("onkeypress", "javascript:if(event.keyCode==13){return false;};")
					formulario.appendChild(input);
					input = document.createElement("input");
					input.setAttribute("type", "button");
					input.setAttribute("name", "boton");
					input.setAttribute("value", "Comprobar Densidad");
					input.setAttribute("onclick", "compruebaDensidad();");
					formulario.appendChild(input);
					
					document.getElementById("enunciado").appendChild(formulario);
					
					//alert("(DESAPARECE TODO)");
					//document.getElementById("enunciado").appendChild(document.createElement("BR"));
										
					
				}
}


function compruebaMasa()
{
	
    if(document.getElementById("masa").value == masa)
	{
			dialogo("Muy bien");
			continuar=1;
			veces=1;	
			escribeEnunciado();
	}
	else if(veces==1)
		 {
		 	dialogo("La masa es la indicada en la balanza");
			continuar=0;
			escribeEnunciado();
			veces=2;
		 } else if(veces==2)
		 		{
					dialogo("F\u00edjate mejor la pr\u00f3xima vez");
					continuar=1;
					veces=1;
					escribeEnunciado();
					
				}	
}


function compruebaVolumen()
{
    if(document.getElementById("volumen").value == volumen)
	{
			dialogo("Muy bien");
			continuar=2;
			veces=1;	
			escribeEnunciado();
	}else if(veces==1)
		  {
		 	dialogo("El volumen del s\u00f3lido es la diferencia entre el volumen actual y el que ten\u00eda la probeta");
			continuar=1;
			escribeEnunciado();
			veces=2;
			
		  } else if(veces==2)
		 		{
					dialogo("La pr\u00f3xima vez lo har\u00e1s mejor");
					continuar=2;
					escribeEnunciado();
					veces=1;
				}	
}

function compruebaDensidad()
{
	if(document.getElementById("densidad").value == densidades[aleatorioSusDen])
	{
			dialogo("Muy bien");
			continuar=0;	
			veces=0;
			escribeEnunciado();
			
	}else if(veces==1)
		  {
		 	dialogo("La densidad es la divisi\u00f3n entre la masa y el volumen");
			continuar=2;
			escribeEnunciado();
			veces=2;
		  } else if(veces==2)
		 		 { 
					dialogo("Debes hacer la divisi\u00f3n m/V");
					continuar=2;
					escribeEnunciado();
					veces=3;
				 }else if(veces==3)
				 		{
							dialogo("La densidad es " + densidades[aleatorioSusDen]+". Inténtalo de nuevo");
							continuar=0;
							veces=0;
							escribeEnunciado();
							
						}
}

function borraDOM(obj) {

	while(obj.firstChild) obj.removeChild(obj.firstChild);
}


  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 = 35;
  var fin=1;
 // colocaElementos();
 
 var isDragable = new Array(1,1,1,1);
 var posInic= new Array();
 var posFin= new Array();
 

 
  
 
 posInic[0]= new Array("200px","30px");
 posInic[1]= new Array("280px","275px");
 posInic[2]= new Array("185px","250px");
 posInic[3]= new Array("10px","250px");
 
 
 posFin[0]= new Array("33px","7px");
 posFin[1]= new Array("19px","-5px");
 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 != "trocito") {
		fobj = nn6 ? fobj.parentNode : fobj.parentElement;
	}
	
	
	
	if (fobj.className == "trocito" && isDragable[0]) {
		isdrag = true;
	
		dobj = fobj;	
	
		xOriginal=dobj.style.left;
		yOriginal=dobj.style.top;		
		
		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);
		piezaSelec=0;
		//alert("M: "+ margen+ " " + parseInt(posFin[continuar][0])+" " + dobj.offsetLeft);
		
		if (dobj.offsetLeft < parseInt(posFin[continuar][0]) + margen &&
		dobj.offsetLeft > parseInt(posFin[continuar][0]) - margen &&
		dobj.offsetTop < parseInt(posFin[continuar][1]) + margen &&
		dobj.offsetTop > parseInt(posFin[continuar][1]) - margen) {
		
			//alert(dobj.style.left+" "+dobj.style.top);
			dobj.style.left = posFin[piezaSelec][0];//xOriginal;
			dobj.style.top = posFin[piezaSelec][1];//yOriginal;
			//alert(dobj.style.left+" "+dobj.style.top);
			isDragable[0]=0;
		if (continuar == 0) {
			document.getElementById("accion").removeChild(document.getElementById("accion").lastChild);
			document.getElementById("accion").appendChild(document.createTextNode("Escribe la masa en el lugar correspondiente" ));
			clearObj(document.getElementById("resultado"));
			document.getElementById("resultado").appendChild(document.createTextNode(masa+" g"));
		}
		if (continuar == 1) {
			clearObj(document.getElementById("accion"));
			document.getElementById("accion").appendChild(document.createTextNode("Escribe el volumen del s\u00f3lido"));
			document.getElementById("aparato").setAttribute("src","img/t1p9-probeta100yv.png");
			document.getElementById("aparato").setAttribute("style","position:relative;left:-150px; top:10px;height:70px;");
			document.getElementById("actividad").removeChild(document.getElementById("trocito"));
			clearObj(document.getElementById("resultado"));
			document.getElementById("resultado").appendChild(document.createTextNode(100+volumen+" ml"));
		}
		
		}/*	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;
			
		}
		
		//dobj.style.left = xOriginal;
		//dobj.style.top = yOriginal;
	}
	isdrag = false;
}

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



function colocaElementos(){	

		isDragable[0]=1;
		
		if(document.getElementById("trocito")){
		document.getElementById("trocito").style.left= posInic[0][0];
		document.getElementById("trocito").style.top=posInic[0][1];
		}		
}