/* ################## */

/*        RqR         */

/* ################## */

var	tablero = null;
var	idTimeOut = null;
window.onload = function(){ini();};

function ini(){
	// Div informativo.
//	var info = document.createElement("div");
//	info.setAttribute("id","info");
//	info.style.top = "500px";
//	info.style.left = "10px";
//	info.style.width = "1000px";
//	info.style.height = "60px";
//	info.style.backgroundColor = "yellow";
//	info.style.display = "block";

	// Div principal (contenedor de piezas).
	var ppal = document.createElement("div");
	ppal.setAttribute("id","principal");
	ppal.style.position = "absolute";
	ppal.style.top = "50%";
	ppal.style.left = "50%";
	ppal.style.width = ""+(150*6)+"px";
	ppal.style.height = ""+(150*2)+"px";
	ppal.style.marginTop = "-"+(150)+"px";
	ppal.style.marginLeft = "-"+(150*3)+"px";
	ppal.style.backgroundColor = "black";
	ppal.style.display = "block";

	// Insertamos el nodo dentro del body
	var cBody = document.getElementsByTagName("body");
//	cBody[0].appendChild(info);
	cBody[0].appendChild(ppal);

	// Creamos piezas del puzle.
	tablero = new Tablero();
	tablero.ini();
}

function click(capa){
	var i = buscaCasilla(capa.id);
	if (tablero.movimientoPermitido(i)){
		tablero.piezasAfectadas(i);
		tablero.reposiciona();
		tablero.contenido();
		tablero.refresca();
	}
}

/* Clases */
	// Clase Tablero.
	// Esta clase es contenedora de los objetos Piezas.
function Tablero(){
	// propiedades.
	this.casilla = new Array(12);
	this.libre = 3;
	this.sentidoMovimiento = "N"; // Valores posibles: 'U'->Arriba,'D'->Abajo,'R'->Derecha,'L'->Izquierda.
	// métodos.
	this.ini = dibujaTablero;
	this.movimientoPermitido = movimientoPermitido;
	this.piezasAfectadas = piezasAfectadas;
	this.reposiciona = reposiciona;
	this.contenido = contenido;
	this.refresca = refresca;

	// Construye casilla
	var k=0,i=0,j=0;
	for (i=0;i<(150+1);i+=150){
		for (j=0;j<(150*6);j+=150){
			this.casilla[k] = new Casilla(i,j,k);
			k++;
		}
	}
}
function dibujaTablero(){
	var img = new Array(12);
	img[0] = "r_ul.jpg";
	img[1] = "r_ur.jpg";
	img[2] = "k_ul.jpg";
	img[3] = "" ; //"k_ur_b.jpg";
	img[4] = "r_ul.jpg";
	img[5] = "r_ur.jpg";
	img[6] = "r_dl.jpg";
	img[7] = "r_dr.jpg";
	img[8] = "r_dl.jpg";
	img[9] = "r_dr.jpg";
	img[10] = "r_dl.jpg";
	img[11] = "r_dr.jpg";
	var principal = document.getElementById("principal");
	var i=0;
	for (i=0;i<12;i++){
		var capa = document.createElement("div");
		capa.setAttribute("id",this.casilla[i].pieza);
		capa.onclick = function() {click(this)};
//		capa.setAttribute("onClick","click(this)");
		//Estilo.
		capa.style.position = "absolute";
		capa.style.width = ""+150+"px";
		capa.style.height = ""+150+"px";
		capa.style.display = "block";
		capa.style.overflow = "hidden";
		capa.style.top = ""+this.casilla[i].x+"px";
		capa.style.left = ""+this.casilla[i].y+"px";
		capa.style.background = "url('img/"+img[i]+"') no-repeat black center";
		capa.style.color = "white";
		if (i==tablero.libre){
			capa.style.cursor = "auto";
			capa.style.zIndex = 0;
		}else{
			capa.style.cursor = "pointer";
			capa.style.zIndex = 5;
		}
		// Incorporamos el elemento al contenedor.
		principal.appendChild(capa);
	}
	tablero.contenido();
}

function movimientoPermitido(id){
	// Comprueba que la pieza no esté actualmente en movimiento.
	var	pieza = document.getElementById(tablero.casilla[id].pieza);
	// Compara fila.
	if (tablero.casilla[id].x==tablero.casilla[tablero.libre].x){
		// Controla que la pieza no esté en movimiento vertical.
		if (parseInt(pieza.style.top) != tablero.casilla[id].x){
			return false;
		}
		//Calcula sentido del movimiento.
		if (tablero.casilla[id].y >tablero.casilla[tablero.libre].y){
			tablero.sentidoMovimiento = "L";
		}else if (tablero.casilla[id].y<tablero.casilla[tablero.libre].y){
			tablero.sentidoMovimiento = "R";
		}else{
			tablero.sentidoMovimiento = "N";
			return false;
		}
		return true;
	}
	// Compara columna.
	if (tablero.casilla[id].y==tablero.casilla[tablero.libre].y){
		// Controla que la pieza no esté en movimiento horizontal.
		if (parseInt(pieza.style.left) != tablero.casilla[id].y){
			return false;
		}
		//Calcula sentido del movimiento.
		if (tablero.casilla[id].x >tablero.casilla[tablero.libre].x){
			tablero.sentidoMovimiento = "U";
		}else if (tablero.casilla[id].x<tablero.casilla[tablero.libre].x){
			tablero.sentidoMovimiento = "D";
		}else{
			tablero.sentidoMovimiento = "N";
			return false;
		}
		return true;
	}else{
		return false;
	}
}
function piezasAfectadas(id){
	var i;
	var x = 0, cx = tablero.casilla[id].x;
	var y = 0, cy = tablero.casilla[id].y;
	// Calcula rango de piezas afectadas.
	for (i=0;i<12;i++){
		x = tablero.casilla[i].x;
		y = tablero.casilla[i].y;
		if (tablero.casilla[tablero.libre].x==x){
			if (tablero.sentidoMovimiento=="L" && y>tablero.casilla[tablero.libre].y && y<=cy){
				tablero.casilla[i].afectada = true;
				continue;
			}else if (tablero.sentidoMovimiento=="R" && y>=cy && y<tablero.casilla[tablero.libre].y){
				tablero.casilla[i].afectada = true;
				continue;
			}else{
				tablero.casilla[i].afectada = false;
				continue;
			}
		}else if (tablero.casilla[tablero.libre].y==y){
			if (tablero.sentidoMovimiento=="U" && x>tablero.casilla[tablero.libre].x && x<=cx){
				tablero.casilla[i].afectada = true;
				continue;
			}else if (tablero.sentidoMovimiento=="D" && x>=cx && x<tablero.casilla[tablero.libre].x){
				tablero.casilla[i].afectada = true;
				continue;
			}else{
				tablero.casilla[i].afectada = false;
				continue;
			}
		}else{
				tablero.casilla[i].afectada = false;
		}
	}
	tablero.casilla[tablero.libre].afectada = true;
}
function reposiciona(){
	var i;
	var aux = tablero.casilla[tablero.libre].pieza;
	if (tablero.sentidoMovimiento=="L" || tablero.sentidoMovimiento=="U"){
		for (i=0;i<12;i++){
			if (tablero.casilla[i].afectada){
				tablero.casilla[tablero.libre].pieza = tablero.casilla[i].pieza;
				tablero.libre = i;
			}
		}
	}else{
		for (i=11;i>=0;i--){
			if (tablero.casilla[i].afectada){
				tablero.casilla[tablero.libre].pieza = tablero.casilla[i].pieza;
				tablero.libre = i;
			}
		}
	}
	tablero.casilla[tablero.libre].pieza = aux;
}
// trabaja con las capas en pantalla.
function refresca(){
	var i;
	var capa = null;
	for (i=0;i<12;i++){
		capa = document.getElementById(tablero.casilla[i].pieza);
		if (tablero.casilla[i].afectada){
//			capa.style.top = ""+this.casilla[i].x+"px";
//			capa.style.left = ""+this.casilla[i].y+"px";
			if (i==tablero.libre){
				capa.style.top = ""+tablero.casilla[tablero.libre].x+"px";
				capa.style.left = ""+tablero.casilla[tablero.libre].y+"px";
				capa.style.zIndex = 0;
			}else{
				capa.style.zIndex = 5;
				switch (tablero.sentidoMovimiento){
					case "R":
						derecha(i);
						break;
					case "L":
						izquierda(i);
						break;
					case "U":
						arriba(i);
						break;
					case "D":
						abajo(i);
						break;
				}
			}
		}
	}
}
function buscaCasilla(pieza){
	var i;
	for (i=0;i<12;i++){
		if (pieza==tablero.casilla[i].pieza){
			break;
		}
	}
	if (i>=12){
		return -1;
	}else{
		return i;
	}
}

	// Clase Casilla.
function Casilla(x,y,k){
	this.x = x;
	this.y = y;
	this.pieza = "capa"+k;
	this.afectada = false;
}
// funciones de movimiento.
function derecha(i){
	var capa = document.getElementById(tablero.casilla[i].pieza);
	var limite = tablero.casilla[i].y;
	var pos = parseInt(capa.style.left);
	if (pos<limite){
		++pos;
		capa.style.left = ""+pos+"px";
		setTimeout("derecha("+i+")",0)
	}
}
function izquierda(i){
	var capa = document.getElementById(tablero.casilla[i].pieza);
	var limite = tablero.casilla[i].y;
	var pos = parseInt(capa.style.left);
	if (pos>limite){
		--pos;
		capa.style.left = ""+pos+"px";
		setTimeout("izquierda("+i+")",0)
	}
}
function abajo(i){
	var capa = document.getElementById(tablero.casilla[i].pieza);
	var limite = tablero.casilla[i].x;
	var pos = parseInt(capa.style.top);
	if (pos<limite){
		++pos;
		capa.style.top = ""+pos+"px";
		setTimeout("abajo("+i+")",0)
	}
}
function arriba(i){
	var capa = document.getElementById(tablero.casilla[i].pieza);
	var limite = tablero.casilla[i].x;
	var pos = parseInt(capa.style.top);
	if (pos>limite){
		--pos;
		capa.style.top = ""+pos+"px";
		setTimeout("arriba("+i+")",0)
	}
}
// dibuja contenido según sea la casilla libre.
function contenido(){
	// Accede al script incorporado para borrarlo.
	var scpt = document.getElementsByTagName("script");
	if (scpt.length>2){
        document.getElementsByTagName("head")[0].removeChild(scpt[2]);
	}
	var capa = document.getElementById("capa3");
	capa.innerHTML = "";
	if (idTimeOut) clearTimeout(idTimeOut);
	// dá nuevo contenido.
	switch (tablero.libre){
		case 0:
//			capa.innerHTML = "1";
			break;
		case 1:
//			traeContenido("cod/exp/ventana.html","capa3");
//			traeCodigo("cod/exp/ventana.js");
			break;
		case 2:
			traeContenido("cod/contacta.html","capa3");
			break;
		case 3:
//			capa.innerHTML = "4 ";
			traeCodigo("cod/bienvenida.js");
			break;
		case 4:
//			capa.innerHTML = "5 ";
			break;
		case 5:
//			capa.innerHTML = "6 ";
			break;
		case 6:
//			capa.innerHTML = "7 ";
			break;
		case 7:
//			capa.innerHTML = "8 ";
			break;
		case 8:
//			capa.innerHTML = "9 ";
			break;
		case 9:
//			capa.innerHTML = "10 ";
			break;
		case 10:
//			capa.innerHTML = "11 ";
			break;
		case 11:
//			capa.innerHTML = "12 ";
			break;
	}
}