/* Variables Globales */
var tetris; 									// Es el objeto que contendrá el interfaz;
//var colores=["#FF0000","#FFFF00","#00FF00","#FF00FF","#0000FF","#00FFFF"]; 	// Colores de las piezas
var TAM_PIEZA=20;
var ALTO_TABLERO=23;
var ANCHO_TABLERO=16;
var BLOQUES_PIEZA=4;
/* Objetos */

// Objeto Pieza
Pieza = function (tipo,posx,posy) {
	this.tipo=new TipoPieza(tipo);
	this.posx=posx;
	this.posy=posy;
	
	this.inicializar();
};

Pieza.prototype.inicializar = function() {
}

Pieza.prototype.pintar = function () {
	var pieza="";
	var posx;
	var posy;
	for (var i=0;i<4;i++) {
		for (var j=0;j<4;j++) {
			if (this.tipo.forma[i][j]!=0) {
				posx=(this.posx+j)*(TAM_PIEZA);
				posy=(this.posy+i)*(TAM_PIEZA);
				pieza+="<div class='pieza"+(this.tipo.id+1)+"' style='position:absolute;top:"+(posy)+"px;left:"+(posx)+"px;width:"+(TAM_PIEZA)+"px;height:"+(TAM_PIEZA)+"px;'></div>";
				}
			}	
		}
	return pieza;
};

Pieza.prototype.moverDerecha = function() {
	this.posx++
};

Pieza.prototype.moverIzquierda = function() {
	this.posx--
};

Pieza.prototype.moverAbajo = function() {
	this.posy++
};

Pieza.prototype.moverArriba = function() {
	this.posy--
};

Pieza.prototype.girarDerecha = function() {
	this.tipo.rotar("d");
};

Pieza.prototype.girarIzquierda = function() {
	this.tipo.rotar("i");
};

// Objeto TipoPieza
TipoPieza = function (tipo) {
	this.id=tipo;
	this.forma=new Array();
	//this.color=color;
	
	this.inicializar();
};

TipoPieza.prototype.inicializar = function() {
	var l1=BLOQUES_PIEZA;
	var l2=BLOQUES_PIEZA;
	for (var i=0;i<l1;i++) {
		this.forma[i]=new Array();
		for (var j=0;j<l2;j++) {
			this.cambiarForma(i,j,0);
			}
		}
	switch (this.id) {
		case (0):
			this.cambiarForma(0,2,2);
			this.cambiarForma(1,2,2);
			this.cambiarForma(2,1,2);
			this.cambiarForma(2,2,2);
			this.puntuacion=7;
			/*
			{0 0 2 0}
			{0 0 2 0}
			{0 2 2 0}
			{0 0 0 0}  	
			*/
			break;
		case(1):
			this.cambiarForma(0,1,3);
			this.cambiarForma(1,1,3);
			this.cambiarForma(2,1,3);
			this.cambiarForma(2,2,3);
			this.puntuacion=7;
			/*
			{0 3 0 0}
			{0 3 0 0}
			{0 3 3 0}
			{0 0 0 0} 	
			*/
			break;
		case(2):
			this.cambiarForma(1,1,4);
			this.cambiarForma(1,2,4);
			this.cambiarForma(2,0,4);
			this.cambiarForma(2,1,4);
			this.puntuacion=10;
			/*
			{0 0 0 0}
			{0 4 4 0}
			{4 4 0 0}
			{0 0 0 0}	
			*/
			break;			
		case(3):
			this.cambiarForma(1,0,5);
			this.cambiarForma(1,1,5);
			this.cambiarForma(2,1,5);
			this.cambiarForma(2,2,5);
			this.puntuacion=10;
			/*
			{0 0 0 0}
			{5 5 0 0}
			{0 5 5 0}
			{0 0 0 0}  	
			*/
			break;			
		case(4):
			this.cambiarForma(1,1,6);
			this.cambiarForma(2,0,6);
			this.cambiarForma(2,1,6);
			this.cambiarForma(2,2,6);
			this.puntuacion=10;
			/*
			{0 0 0 0}
			{0 6 0 0}
			{6 6 6 0}
			{0 0 0 0}  	
			*/
			break;			
		case(5):
			this.cambiarForma(1,1,7);
			this.cambiarForma(1,2,7);
			this.cambiarForma(2,1,7);
			this.cambiarForma(2,2,7);
			this.puntuacion=5;
			/*
			{0 0 0 0}
			{0 7 7 0}
			{0 7 7 0}
			{0 0 0 0}  	
			*/
			break;			
		case(6):
			this.cambiarForma(0,1,8);
			this.cambiarForma(1,1,8);
			this.cambiarForma(2,1,8);
			this.cambiarForma(3,1,8);
			this.puntuacion=5;
			/*
			{0 8 0 0}
			{0 8 0 0}
			{0 8 0 0}
			{0 8 0 0}  	
			*/	
			break;
		}
};		

TipoPieza.prototype.cambiarForma = function(i,j,valor) {
	this.forma[i][j]=valor;
}

TipoPieza.prototype.rotar = function (direccion) {
	var formaAux=[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
	switch (direccion) {
		case "d":
			for (var i=0;i<4;i++) {
				for (var j=0;j<4;j++) {
					formaAux[j][3-i]=this.forma[i][j];
					}
				}
			break;
		case "i":
			for (var i=0;i<4;i++) {
				for (var j=0;j<4;j++) {
					formaAux[3-j][i]=this.forma[i][j];
					}
				}		
			break;
		}
	this.forma=formaAux;
};

// Objeto Tablero
Tablero = function (posx,posy) {
	this.posx=posx;
	this.posy=posy;
	this.pieza_en_juego=null;
	this.siguiente_pieza=null;
	this.comprobando=false;
	this.incrustando=false;
	this.pausa=false;
	this.inicializar();
};

Tablero.prototype.inicializar = function() {
	this.posiciones=new Array();	
	for (var i=0;i<ALTO_TABLERO;i++) {
		this.posiciones[i]=new Array();
		for (var j=0;j<ANCHO_TABLERO;j++) {	
			if (i==20)
				this.posiciones[i][j]=[1,1];
			else if (j==2)
				this.posiciones[i][j]=[1,1];
			else if (j==13)
				this.posiciones[i][j]=[1,1];
			else
				this.posiciones[i][j]=[0,0];			
				
			}
		}
	this.pieza_en_juego=new Pieza(0,6,1);
	this.siguiente_pieza=new Pieza(0,15,1);		
};

Tablero.prototype.inicializarPiezaEnJuego = function(tipo) {
	this.pieza_en_juego=new Pieza(tipo,6,1);
};

Tablero.prototype.inicializarSiguientePieza = function(tipo) {
	this.siguiente_pieza=new Pieza(tipo,15,1);		
};

Tablero.prototype.TipoSiguientePieza = function() {
	return this.siguiente_pieza.tipo.id;		
};

Tablero.prototype.incrusta = function(pieza,mostrar) {
	if (this.incrustando)
		return
	this.incrustando=true;
	for (var i=0;i<BLOQUES_PIEZA;i++) {
		for (var j=0;j<BLOQUES_PIEZA;j++) {
			if (pieza.tipo.forma[i][j]>0)
				this.posiciones[i+pieza.posy][j+pieza.posx][0]++;
			this.posiciones[i+pieza.posy][j+pieza.posx][1]+=pieza.tipo.forma[i][j];
			}	
		}
	this.incrustando=false;
};

Tablero.prototype.limpia_incrusta = function(pieza) {
	if (this.incrustando)
		return
	this.incrustando=true;
	for (var i=0;i<BLOQUES_PIEZA;i++) {
		for (var j=0;j<BLOQUES_PIEZA;j++) {
			if (pieza.tipo.forma[i][j]>0)
				this.posiciones[i+pieza.posy][j+pieza.posx][0]--;
			this.posiciones[i+pieza.posy][j+pieza.posx][1]-=pieza.tipo.forma[i][j];
			}	
		}
	this.incrustando=false;		
};

Tablero.prototype.posicion_valida = function(pieza,mostrar) {
	var valida=true;
	this.comprobando=true;
	this.incrusta(pieza,mostrar);
	for (var i=0;i<BLOQUES_PIEZA;i++) {
		for (var j=0;j<BLOQUES_PIEZA;j++) {
			if (this.posiciones[i+pieza.posy][j+pieza.posx][0]>1) {
				valida=false;
				}
			}	
		}
	this.limpia_incrusta(pieza);		
	this.comprobando=false;
	return valida;
};

Tablero.prototype.comprobar_pieza = function(valor) {
	return this.posicion_valida(this.pieza_en_juego,valor);
};

Tablero.prototype.pintar = function(gameOver) {
	var salida="";
	var posx;
	var posy;
	salida+="<div class='tablero' style='filter:alpha(opacity=80);position:absolute;top:"+(this.posy-5)+"px;left:"+(this.posx+2*TAM_PIEZA-5)+"px;width:"+(TAM_PIEZA*(ANCHO_TABLERO-6)+10)+"px;height:"+(TAM_PIEZA*(ALTO_TABLERO-3)+10)+"px;'></div>";
	for (var i=0;i<ALTO_TABLERO-3;i++) {
		for (var j=3;j<ANCHO_TABLERO-3;j++) {
			if (this.posiciones[i][j][1]!=0) {
				posx=(this.posx+j)*(TAM_PIEZA)-TAM_PIEZA;
				posy=(this.posy+i)*(TAM_PIEZA);
				salida+="<div class='pieza"+(this.posiciones[i][j][1]-1)+"' style='position:absolute;top:"+(posy-19*TAM_PIEZA)+"px;left:"+(posx-19*TAM_PIEZA)+"px;width:"+(TAM_PIEZA)+"px;height:"+(TAM_PIEZA)+"px;'></div>";
				}
			}	
		}
	if (gameOver) {
		salida+="<span class='gameOver' style='position:absolute;top:"+(this.posy-5)+"px;left:"+(this.posx+2*TAM_PIEZA-5)+"px;width:"+(TAM_PIEZA*(ANCHO_TABLERO-6)+10)+"px;height:"+(TAM_PIEZA*(ALTO_TABLERO-3)+10)+"px;'>"
		salida+="<table cellspacing=0 cellpadding=0 border=0 style='width:"+(TAM_PIEZA*(ANCHO_TABLERO-6)+10)+"px;height:"+(TAM_PIEZA*(ALTO_TABLERO-3)+10)+"px;'>"
		salida+="<tr><td style='font-family:Arial;color:white;font-size:30px;filter:glow(color=black,strength=2);' align=center>"
		salida+="<b>Game Over</b><br/></span>"
		salida+="<span style='font-family:verdana;color:white;font-size:10px;filter:glow(color=black,strength=2);'>Pulsa <I>Espacio</I> para continuar</span>"
		salida+="</td><tr>"
		salida+="</table>"
		salida+="</span>";		
		}
	else if (this.pausa) {
		salida+="<span class='pausa' style='position:absolute;top:"+(this.posy-5)+"px;left:"+(this.posx+2*TAM_PIEZA-5)+"px;width:"+(TAM_PIEZA*(ANCHO_TABLERO-6)+10)+"px;height:"+(TAM_PIEZA*(ALTO_TABLERO-3)+10)+"px;'>"
		salida+="<table cellspacing=0 cellpadding=0 border=0 style='width:"+(TAM_PIEZA*(ANCHO_TABLERO-6)+10)+"px;height:"+(TAM_PIEZA*(ALTO_TABLERO-3)+10)+"px;'>"
		salida+="<tr><td style='font-family:Arial;color:white;font-size:30px;filter:glow(color=black,strength=2);' align=center>"
		salida+="<b>Pausa</b><br/>"
		salida+="<span style='font-family:verdana;color:white;font-size:10px;filter:glow(color=black,strength=2);'>Pulsa <i>P</i> para continuar</span>"
		salida+="</td><tr>"
		salida+="</table>"
		salida+="</span>";		
		}
	else {
		salida+=this.pieza_en_juego.pintar();
		}
	salida+=this.siguiente_pieza.pintar();		
	return salida;
};

Tablero.prototype.pausar = function() {
	this.pausa=true;
};

Tablero.prototype.continuar = function() {
	this.pausa=false;
};

Tablero.prototype.pintarEstado = function() {
	var salida="";
	var posx;
	var posy;
	salida+="<span class='tablero' style='position:absolute;top:"+(this.posy-5)+"px;left:"+(this.posx+3*TAM_PIEZA-5)+"px;width:"+(TAM_PIEZA*(ANCHO_TABLERO-6)+10)+"px;height:"+(TAM_PIEZA*(ALTO_TABLERO-3)+10)+"px;'></span>";
	for (var i=0;i<ALTO_TABLERO;i++) {
		for (var j=0;j<ANCHO_TABLERO;j++) {
			if (this.posiciones[i][j][0]!=0) {
				posx=(this.posx+j)*(TAM_PIEZA-1);
				posy=(this.posy+i)*(TAM_PIEZA-1);
				salida+="<div class='pieza"+(this.posiciones[i][j][0])+"' style='position:absolute;top:"+(posy)+"px;left:"+(posx)+"px;width:"+(TAM_PIEZA)+"px;height:"+(TAM_PIEZA)+"px;'></div>";
				}
			}	
		}	
	salida+=this.pieza_en_juego.pintar();
	salida+=this.siguiente_pieza.pintar();		
	return salida;
};

Tablero.prototype.comprobar_lineas = function() {
	var lineas=new Array();
	var contador=0;
	for (var i=0;i<ALTO_TABLERO-3;i++) {
		contador=0;
		for (var j=3;j<ANCHO_TABLERO-3;j++) {
			if (this.posiciones[i][j][0]!=0) {
				contador++
				}
			}
		if (contador==10) {
			lineas.push(i);
			}
		}
	if (lineas.length>0) {
		lineas.reverse();
		var sig_linea=lineas.pop();
		for (var i=0;i<ALTO_TABLERO-3;i++) {
			if (i==sig_linea) {
				sig_linea=lineas.pop()
				for (var j=3;j<ANCHO_TABLERO-3;j++) {
					this.posiciones[i][j][1]=9;
					}
				}
			}
		setTimeout("partida_tetris.borrar_lineas()",300)
		//this.borrar_lineas();
	}
};

Tablero.prototype.borrar_lineas = function() {
	var cont=0;
	for (var i=ALTO_TABLERO-4;i>-1;i--) {
		while(this.posiciones[i][3][1]==9 && !this.comprobando) {
			this.posiciones.splice(i,1);
			var linea_en_blanco=new Array();
			for (var j=0;j<ANCHO_TABLERO;j++) {	
				if (j==2)
					linea_en_blanco[j]=[1,1];
				else if (j==13)
					linea_en_blanco[j]=[1,1];
				else
					linea_en_blanco[j]=[0,0];			

				}
			this.posiciones.unshift(linea_en_blanco);
			cont++;
		}
	}
	
	partida_tetris.nueva_linea(cont);			
};

Tablero.prototype.moverDerecha = function() {
	this.pieza_en_juego.moverDerecha();
	if (!this.comprobar_pieza()) {
		this.pieza_en_juego.moverIzquierda();
		return false;
		}
	return true;
};

Tablero.prototype.moverIzquierda = function() {
	this.pieza_en_juego.moverIzquierda();
	if (!this.comprobar_pieza())	{
		this.pieza_en_juego.moverDerecha();	
		return false;		
		}
	return true;		
};

Tablero.prototype.moverAbajo = function() {
	this.pieza_en_juego.moverAbajo();
	if (!this.comprobar_pieza())	{
		this.pieza_en_juego.moverArriba();	
		return false;		
		}
	return true;
};

Tablero.prototype.soltar = function() {
	while (this.comprobar_pieza()) {
		this.pieza_en_juego.moverAbajo();
		}
	this.pieza_en_juego.moverArriba();
	return false;
};

Tablero.prototype.girarDerecha = function() {
	this.pieza_en_juego.girarDerecha();
	if (!this.comprobar_pieza())	{
		this.pieza_en_juego.girarIzquierda();	
		return false;		
		}
	return true;		
};

Tablero.prototype.girarIzquierda = function() {
	this.pieza_en_juego.girarIzquierda();
	if (!this.comprobar_pieza())	{
		this.pieza_en_juego.girarDerecha();	
		return false;		
		}
	return true;		
};

// Objeto Música
Musica = function () {
	this.temas=new Array();
	this.actual="";
	this.loop=true;
	this.looping="infinite";
	
	this.inicializar();
};

Musica.prototype.inicializar = function() {
	document.getElementById("musica").innerHTML=this.pintar();
};

Musica.prototype.pintar = function() {
	var salida='';
	salida+='&nbsp;<bgsound id="musica_tetris" src="" loop="infinite" autostart=true hidden=true volume=-1000></bgsound>'
	return salida;
};

Musica.prototype.agregarTema = function(tema,url) {
	this.temas[tema]=url;
};

Musica.prototype.play = function(tema,loop) {
	this.inicializar();
	this.looping=loop?'infinite':'0';
	this.actual=tema;
	if (document.getElementById("musica_tetris")) {
		document.getElementById("musica_tetris").src=this.temas[tema];
		document.getElementById("musica_tetris").loop=this.looping;
		}
};

Musica.prototype.pausar = function() {
	if (document.getElementById("musica_tetris")) {
		document.getElementById("musica_tetris").volume=-2000;
		}
};

Musica.prototype.continuar = function() {
	if (document.getElementById("musica_tetris")) {
		document.getElementById("musica_tetris").volume=-1000;
		}
};

Musica.prototype.stop = function() {
	if (document.getElementById("musica_tetris"))
		document.getElementById("musica_tetris").src="";
};

// Objeto Partida
Partida = function (nivel) {
	this.puntuacion=0;
	this.num_lineas=0;
	this.nivel_inicial=nivel;
	this.terminada=true;
};

Partida.prototype.inicializar = function() {
	this.puntuacion=0;
	this.num_lineas=0;
	this.nivel_actual=this.nivel_inicial;
	this.terminada=false;
};

Partida.prototype.fin = function() {
	return this.terminada;
};

Partida.prototype.terminar_partida = function() {
	this.terminada=true;
};

Partida.prototype.agregar_puntos = function(puntos) {
	this.puntuacion+=puntos*(this.nivel_actual+1);
};

Partida.prototype.puntos = function() {
	return this.puntuacion;
};

Partida.prototype.nivel = function() {
	return this.nivel_actual;
};

Partida.prototype.agregar_lineas = function(num) {
	var nivel=this.nivel_actual
	this.num_lineas+=num
	this.nivel_actual=Math.floor(this.num_lineas/20)
	return (this.nivel_actual>nivel);
};

Partida.prototype.lineas = function() {
	return this.num_lineas;
};

Partida.prototype.pintar = function() {
	var salida=""
	salida+="<table cellspacing=0 cellpadding=0 border=0 style='width:"+(4*TAM_PIEZA)+"px;height:"+(15*TAM_PIEZA)+"px;'>"
	salida+="<tr><td style='font-family:Arial;color:white;font-size:16px;' align=center>"
	salida+="<b>Puntos</b><br/>"
	salida+=this.puntuacion+"</td></tr><tr><td style='font-family:Arial;color:white;font-size:16px;' align=center>";
	salida+="<b>Líneas</b><br/>"
	salida+=this.num_lineas+"</td></tr><tr><td style='font-family:Arial;color:white;font-size:16px;' align=center>";
	salida+="<b>Nivel</b><br/>"
	salida+=this.nivel_actual;
	salida+="</td><tr>"
	salida+="</table>"
	return salida;
};

// Objeto Interfaz
Interfaz = function (nivel) {
	this.tablero=new Tablero(TAM_PIEZA,TAM_PIEZA);
	this.musica=new Musica();
	this.partida=new Partida(nivel);
	this.pausado=false;
	this.nombreUsuario="Anónimo";
	this.min_puntuacion=min_ranking;
	this.fuera_de_juego=true;
	
	this.secuencia=null;
	this.imagenes_fondo=new Array();
	this.imagenes_fondo[this.imagenes_fondo.length]="img/fondo1.jpg";
	this.imagenes_fondo[this.imagenes_fondo.length]="img/fondo2.jpg";
	this.imagenes_fondo[this.imagenes_fondo.length]="img/fondo3.jpg";
	this.imagenes_fondo[this.imagenes_fondo.length]="img/fondo4.jpg";
	this.imagenes_fondo[this.imagenes_fondo.length]="img/fondo5.jpg";
	this.imagenes_fondo[this.imagenes_fondo.length]="img/fondo6.jpg";
	
	
	this.inicializar();
};

Interfaz.prototype.inicializar = function() {	
	// Añadimos los temas musicales
	this.musica.agregarTema("Titulo","midi/titulo.mid");
	this.musica.agregarTema("Musica1","midi/musica1.mid");
	this.musica.agregarTema("Musica2","midi/musica2.mid");
	this.musica.agregarTema("Musica3","midi/musica3.mid");
	this.musica.agregarTema("Musica4","midi/musica4.mid");
	this.musica.agregarTema("Musica5","midi/musica5.mid");	
	this.musica.agregarTema("Musica6","midi/musica6.mid");	
	this.musica.agregarTema("Musica7","midi/musica7.mid");	
	this.musica.agregarTema("Musica8","midi/musica8.mid");	
	this.musica.agregarTema("Musica9","midi/musica9.mid");
	this.musica.agregarTema("Creditos","midi/creditos.mid");
	this.musica.agregarTema("Game_Over","midi/gameover.mid");
	this.musica.agregarTema("Instrucciones","midi/instruc.mid");
	this.musica.agregarTema("Ranking","midi/ranking.mid");
	
	this.mostrar_titulo();
	//this.iniciar_partida();
};

Interfaz.prototype.iniciar_partida = function() {
	this.partida.inicializar();
	this.tablero.inicializar();
	
	this.min_puntuacion=min_ranking;
	
	this.tablero.inicializarPiezaEnJuego(this.siguientePieza());
	this.tablero.inicializarSiguientePieza(this.siguientePieza());
	
	this.musica.inicializar();
	
	this.musica.play("Musica1",true);
	
	this.fuera_de_juego=false;
	
	this.imagen_fondo=this.imagenes_fondo[0];
	document.getElementById("tetris").style.background="url('"+this.imagen_fondo+"')";	
	
	// Ponemos el fondo de la pantalla
	//this.imagen_fondo=this.imagenes_fondo[0];
	document.getElementById("tetris").style.background="none";
	
	this.secuencia=setTimeout("partida_tetris.jugar()",(10-this.partida.nivel())*50)
	this.refrescar();
};

Interfaz.prototype.jugar = function() {
	var nuevaPieza=false;
	clearTimeout(this.secuencia);
	if (!this.tablero.moverAbajo()) {
		this.tablero.incrusta(this.tablero.pieza_en_juego)
		this.pieza_colocada(this.tablero.pieza_en_juego.tipo.puntuacion)
		this.tablero.inicializarPiezaEnJuego(this.tablero.TipoSiguientePieza());	
		this.tablero.inicializarSiguientePieza(this.siguientePieza());	
		this.comprobar_lineas();
		nuevaPieza=true;
		if (!this.tablero.comprobar_pieza())
			this.partida.terminar_partida();
		}
	if (this.partida.fin()) {
		this.terminar();
		return;
		}
	else
		this.secuencia=setTimeout("partida_tetris.jugar()",(10-this.partida.nivel())*50)
	this.refrescar();	
};

Interfaz.prototype.comprobar_lineas = function() {
	this.tablero.comprobar_lineas();
	this.refrescar();
	//this.secuencia=setTimeout("partida_tetris.jugar()",1000)
};

Interfaz.prototype.borrar_lineas = function() {
	this.tablero.borrar_lineas();
};

Interfaz.prototype.terminar = function() {
	clearTimeout(this.secuencia);
	//this.pintarEstado();
	this.musica.play("Game_Over",false);
	if (this.partida.puntos()>this.min_puntuacion)
		this.pedir_nombre();
	else
		this.refrescar()
};

Interfaz.prototype.refrescar = function() {
	var salida="";
	salida+=this.pintar();		
	salida+=this.tablero.pintar(this.partida.fin());	
	document.getElementById("tetris").innerHTML=salida;
};

Interfaz.prototype.mostrar_titulo = function() {
	this.fuera_de_juego=true;
	//this.imagen_fondo=this.imagenes_fondo[0];
	//document.getElementById("fondoTetris").style.background="url('"+this.imagen_fondo+"')";
	this.cargar_ranking();
	this.musica.play("Titulo",true);
	var salida="";
	salida+="<span id='titulo' class='tablero' style='filter:alpha(opacity=80);position:absolute;top:"+(TAM_PIEZA-5)+"px;left:"+(TAM_PIEZA-5)+"px;width:"+(21*TAM_PIEZA+10)+"px;height:"+(20*TAM_PIEZA+10)+"px;'>";		
	salida+="<table cellspacing=0 cellpadding=0 border=0 style='width:"+(21*TAM_PIEZA)+"px;height:"+(20*TAM_PIEZA)+"px;'>"
	salida+="<tr><td style='font-family:Arial;color:white;font-size:16px;' align=center height=100>"
	salida+="<img src='img/titulo.gif'>"	
	salida+="</td></tr><tr><td align=center height=60>";	
	salida+="<a class='titulo' href='javascript:partida_tetris.mostrar_instrucciones()'>Instrucciones</a>"	
	salida+="</td></tr><tr><td align=center height=60>";	
	salida+="<a class='titulo' href='javascript:partida_tetris.iniciar_partida()'>Nueva Partida</a>"
	salida+="</td></tr><tr><td align=center height=60>";
	salida+="<a class='titulo' href='javascript:partida_tetris.mostrar_ranking()'>Ranking</a>"
	salida+="</td></tr><tr><td align=center height=60>";	
	salida+="<a class='titulo' href='javascript:partida_tetris.mostrar_creditos()'>Créditos</a>"
	salida+="</td></tr><tr><td style='font-family:Arial;color:white;font-size:1px;' align=center>";
	salida+="<b>&nbsp</b>"	
	salida+="</td></tr><tr><td style='font-family:Verdana;color:white;font-size:10px;' align=center height=20>";
	salida+="Diseñado y realizado por Pablo Javier García Mora"		
	salida+="</td></tr>"
	salida+="</table>"	
	salida+="</span>";
	document.getElementById("tetris").innerHTML=salida;
};

Interfaz.prototype.mostrar_instrucciones = function() {
	//this.imagen_fondo=this.imagenes_fondo[2];
	//document.getElementById("fondoTetris").style.background="url('"+this.imagen_fondo+"')";
	this.musica.play("Instrucciones",true);
	var salida="";
	salida+="<span id='titulo' class='tablero' style='filter:alpha(opacity=80);position:absolute;top:"+(TAM_PIEZA-5)+"px;left:"+(TAM_PIEZA-5)+"px;width:"+(21*TAM_PIEZA+10)+"px;height:"+(20*TAM_PIEZA+10)+"px;'>";		
	salida+="<table cellspacing=0 cellpadding=0 border=0 style='width:"+(21*TAM_PIEZA)+"px;height:"+(20*TAM_PIEZA)+"px;'>"
	salida+="<tr><td style='font-family:Arial;color:white;font-size:16px;' align=center height=100>"
	salida+="<img src='img/titulo.gif' />"	
	salida+="</td></tr><tr><td align=center height=60 class=titulo>";	
	salida+="Instrucciones"	
	salida+="</td></tr><tr><td align=center height=160>";	
	
		salida+="<table cellspacing=0 cellpadding=0 border=0 width=200>"
		salida+="<tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;border-bottom:1px solid white;' height=22>"
		salida+="Izquierda"
		salida+="</td><td width=60 align=right style='font-family:Verdana;color:white;font-size:10px;border-bottom:1px solid white;'>"
		salida+="<img src='img/izquierda.gif'> <img src='img/4.gif'>"
		salida+="</td>"
		salida+="</tr><tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;border-bottom:1px solid white;' height=22>"
		salida+="Derecha"
		salida+="</td><td width=60 align=right style='font-family:Verdana;color:white;font-size:10px;border-bottom:1px solid white;'>"
		salida+="<img src='img/derecha.gif'> <img src='img/6.gif'>"
		salida+="</td>"
		salida+="</tr><tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;border-bottom:1px solid white;' height=22>"
		salida+="Girar Izquierda"
		salida+="</td><td width=60 align=right style='font-family:Verdana;color:white;font-size:10px;border-bottom:1px solid white;'>"
		salida+="<img src='img/7.gif'>"
		salida+="</td>"
		salida+="</tr><tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;border-bottom:1px solid white;' height=22>"
		salida+="Girar Derecha"
		salida+="</td><td width=60 align=right style='font-family:Verdana;color:white;font-size:10px;border-bottom:1px solid white;'>"
		salida+="<img src='img/arriba.gif'> <img src='img/9.gif'>"
		salida+="</tr><tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;border-bottom:1px solid white;' height=22>"
		salida+="Bajar"
		salida+="</td><td width=60 align=right style='font-family:Verdana;color:white;font-size:10px;border-bottom:1px solid white;'>"
		salida+="<img src='img/abajo.gif'> <img src='img/2.gif'>"	
		salida+="</td>"	
		salida+="</tr><tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;border-bottom:1px solid white;' height=22>"
		salida+="Soltar"
		salida+="</td><td width=60 align=right style='font-family:Verdana;color:white;font-size:10px;border-bottom:1px solid white;'>"
		salida+="<img src='img/espacio.gif'>"	
		salida+="</td>"	
		salida+="</tr><tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;border-bottom:1px solid white;' height=22>"
		salida+="Pausa"
		salida+="</td><td width=60 align=right style='font-family:Verdana;color:white;font-size:10px;border-bottom:1px solid white;'>"
		salida+="<img src='img/p.gif'>"	
		salida+="</td>"		
		salida+="</tr></table>"
	
	salida+="</td><tr><td style='font-family:Arial;color:white;font-size:1px;' align=center>";	
	salida+="&nbsp"		
	salida+="</td></tr><tr><td align=center height=20>";	
	salida+="<A class='titulo2' href='javascript:partida_tetris.mostrar_titulo()'>Volver</b>"	
	salida+="</td></tr><tr><td style='font-family:Verdana;color:white;font-size:10px;' align=center height=20>";
	salida+="Diseñado y realizado por Pablo Javier García Mora"		
	salida+="</td></tr>"
	salida+="</table>"	
	salida+="</span>";
	document.getElementById("tetris").innerHTML=salida;
};

Interfaz.prototype.mostrar_creditos = function() {
	//this.imagen_fondo=this.imagenes_fondo[4];
	//document.getElementById("fondoTetris").style.background="url('"+this.imagen_fondo+"')";
	this.musica.play("Creditos",true);
	var salida="";
	salida+="<span id='titulo' class='tablero' style='filter:alpha(opacity=80);position:absolute;top:"+(TAM_PIEZA-5)+"px;left:"+(TAM_PIEZA-5)+"px;width:"+(21*TAM_PIEZA+10)+"px;height:"+(20*TAM_PIEZA+10)+"px;'>";		
	salida+="<table cellspacing=0 cellpadding=0 border=0 style='width:"+(21*TAM_PIEZA)+"px;height:"+(20*TAM_PIEZA)+"px;'>"
	salida+="<tr><td style='font-family:Arial;color:white;font-size:16px;' align=center height=100>"
	salida+="<img src='img/titulo.gif'>"	
	salida+="</td></tr><tr><td align=center height=60 class=titulo>";	
	salida+="Créditos"	
	salida+="</td></tr><tr><td align=center height=160>";	
	
		salida+="<table cellspacing=0 cellpadding=0 border=0 width=300>"
		salida+="<tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;' height=22>"
		salida+="<b>Director del Proyecto</b>"
		salida+="</td><td width=120 align=right style='font-family:Verdana;color:white;font-size:10px;'>"
		salida+="Pablo J. García (Pei)"
		salida+="</td>"
		salida+="</tr><tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;' height=22>"
		salida+="<b>Programación</b>"
		salida+="</td><td width=120 align=right style='font-family:Verdana;color:white;font-size:10px;'>"
		salida+="Pablo J. García (Pei)"
		salida+="</td>"
		salida+="</tr><tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;' height=22>"
		salida+="<b>Beta Testers</b>"
		salida+="</td><td width=120 align=right style='font-family:Verdana;color:white;font-size:10px;'>"
		salida+="Adrian García"
		salida+="</td>"
		salida+="</tr><tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;' height=22>"
		salida+="&nbsp;"
		salida+="</td><td width=120 align=right style='font-family:Verdana;color:white;font-size:10px;'>"
		salida+="Eva Casado"
		salida+="</tr><tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;' height=22>"
		salida+="&nbsp;"
		salida+="</td><td width=120 align=right style='font-family:Verdana;color:white;font-size:10px;'>"
		salida+="Alberto García"	
		salida+="</td>"
		salida+="</tr><tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;' height=22>"
		salida+="&nbsp;"
		salida+="</td><td width=120 align=right style='font-family:Verdana;color:white;font-size:10px;'>"
		salida+="Ruth Medina"	
		salida+="</td>"		
		salida+="</tr><tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;' height=22>"
		salida+="&nbsp;"
		salida+="</td><td width=120 align=right style='font-family:Verdana;color:white;font-size:10px;'>"
		salida+="Enrique Monjas"	
		salida+="</td>"	
		salida+="</tr><tr>"
		salida+="<td style='font-family:Verdana;color:white;font-size:10px;' height=22>"
		salida+="&nbsp;"
		salida+="</td><td width=120 align=right style='font-family:Verdana;color:white;font-size:10px;'>"
		salida+="Pablo Álvarez"	
		salida+="</td>"		
		salida+="</tr></table>"
	
	salida+="</td><tr><td style='font-family:Arial;color:white;font-size:1px;' align=center>";
	salida+="&nbsp"		
	salida+="</td></tr><tr><td align=center height=20>";	
	salida+="<A class='titulo2' href='javascript:partida_tetris.mostrar_titulo()'>Volver</b>"
	salida+="</td></tr><tr><td style='font-family:Verdana;color:white;font-size:10px;' align=center height=20>";
	salida+="Diseñado y realizado por Pablo Javier García Mora"		
	salida+="</td></tr>"
	salida+="</table>"	
	salida+="</span>";
	document.getElementById("tetris").innerHTML=salida;
};

Interfaz.prototype.mostrar_ranking = function() {
	//this.imagen_fondo=this.imagenes_fondo[6];
	//document.getElementById("fondoTetris").background.src=this.imagen_fondo
	//document.getElementById("fondoTetris").background="url('"+this.imagen_fondo+"')";
	this.musica.play("Ranking",true);
	var salida="";
	salida+="<span id='titulo' class='tablero' style='filter:alpha(opacity=80);position:absolute;top:"+(TAM_PIEZA-5)+"px;left:"+(TAM_PIEZA-5)+"px;width:"+(21*TAM_PIEZA+10)+"px;height:"+(20*TAM_PIEZA+10)+"px;'>";		
	salida+="<table cellspacing=0 cellpadding=0 border=0 style='width:"+(21*TAM_PIEZA)+"px;height:"+(20*TAM_PIEZA)+"px;'>"
	salida+="<tr><td style='font-family:Arial;color:white;font-size:16px;' align=center height=100>"
	salida+="<img src='img/titulo.gif'>"	
	salida+="</td></tr><tr><td align=center height=60 class=titulo>";	
	salida+="Ranking"	
	salida+="</td></tr><tr><td align=center height=160 Valign=TOP>";	
	
		salida+="<table cellspacing=0 cellpadding=0 border=0 width=200>"
		var total=ranking.length>8?8:ranking.length;
		for (var i=0;i<total;i++) {
			salida+="<tr>"
			salida+="<td style='font-family:Verdana;color:white;font-size:10px;' height=22>"
			salida+=(i+1)+" - "+ranking[i][0];
			salida+="</td><td width=100 align=right style='font-family:Verdana;color:white;font-size:10px;'>"
			salida+="<b>"+ranking[i][1]+"</b> puntos"
			salida+="</td>"
			salida+="</tr>";
			}
		salida+="</table>"
	
	salida+="</td><tr><td style='font-family:Arial;color:white;font-size:1px;' align=center>";
	salida+="&nbsp"		
	salida+="</td></tr><tr><td align=center height=20>";	
	salida+="<A class='titulo2' href='javascript:partida_tetris.mostrar_titulo()'>Volver</b>"
	salida+="</td></tr><tr><td style='font-family:Verdana;color:white;font-size:10px;' align=center height=20>";
	salida+="Diseñado y realizado por Pablo Javier García Mora"		
	salida+="</td></tr>"
	salida+="</table>"	
	salida+="</span>";
	document.getElementById("tetris").innerHTML=salida;
};

Interfaz.prototype.pedir_nombre = function() {
	this.fuera_de_juego=true;
	var salida="";
	salida+="<span id='pedir_nombre' class='tablero' style='filter:alpha(opacity=80);position:absolute;top:"+(TAM_PIEZA-5)+"px;left:"+(TAM_PIEZA-5)+"px;width:"+(21*TAM_PIEZA+10)+"px;height:"+(20*TAM_PIEZA+10)+"px;'>";		
	salida+="<table cellspacing=0 cellpadding=0 border=0 style='width:"+(21*TAM_PIEZA)+"px;height:"+(20*TAM_PIEZA)+"px;'>"
	salida+="<tr><td style='font-family:Arial;color:white;font-size:16px;' align=center height=100>"
	salida+="<img src='img/titulo.gif'>"	
	salida+="</td></tr><tr><td align=center height=60 class=titulo>";	
	salida+="Nuevo Record"	
	salida+="</td></tr><tr><td align=center height=160 Valign=TOP>";	
	
	salida+="<table cellspacing=0 cellpadding=0 border=0 width=200>"
	salida+="<tr>"
	salida+="<td style='font-family:Verdana;color:white;font-size:10px;' height=22>"
	salida+="Introduzca su nombre:"
	salida+="</td><td width=100 align=right style='font-family:Verdana;color:white;font-size:10px;'>"
	salida+="<input type='text' maxlength='10' style='width:100%;font-family:Verdana;font-size:10px;' onkeyup='partida_tetris.nombreUsuario=this.value;'>"
	salida+="</td>"
	salida+="</tr>";
	salida+="</table>"
	
	salida+="</td><tr><td style='font-family:Arial;color:white;font-size:1px;' align=center>";
	salida+="&nbsp"		
	salida+="</td></tr><tr><td align=center height=20>";	
	salida+="<A class='titulo2' href='javascript:partida_tetris.guardar_nombre()'>Volver</b>"
	salida+="</td></tr><tr><td style='font-family:Verdana;color:white;font-size:10px;' align=center height=20>";
	salida+="Diseñado y realizado por Pablo Javier García Mora"		
	salida+="</td></tr>"
	salida+="</table>"	
	salida+="</span>";
	document.getElementById("tetris").innerHTML=salida;
};

Interfaz.prototype.siguientePieza = function() {
	var pieza=10;
	while(pieza>6) {
		pieza=Math.floor(Math.random()*8)
		}
	return pieza;
};

Interfaz.prototype.nueva_linea = function(num) {
	this.partida.agregar_puntos(25*num*num);
	var nivel=this.partida.agregar_lineas(num)
	if (nivel) {
		switch(this.partida.nivel()) {
			case 1:
				this.musica.play("Musica3",true);
				break;
			case 2:
				this.imagen_fondo=this.imagenes_fondo[1];
				this.musica.play("Musica2",true);
				document.getElementById("fondoTetris").style.background="url('"+this.imagen_fondo+"')";
				break;
			case 3: 
				this.musica.play("Musica4",true);
				break;
			case 4:
				this.imagen_fondo=this.imagenes_fondo[2];
				this.musica.play("Musica5",true);
				document.getElementById("fondoTetris").style.background="url('"+this.imagen_fondo+"')";
				break;
			case 5: 
				this.musica.play("Musica6",true);
				break;				
			case 6:
				this.imagen_fondo=this.imagenes_fondo[3];
				this.musica.play("Musica7",true);
				document.getElementById("fondoTetris").style.background="url('"+this.imagen_fondo+"')";
				break;
			case 7: 
				this.musica.play("Musica8",true);
				break;				
			case 8:
				this.imagen_fondo=this.imagenes_fondo[4];
				this.musica.play("Musica9",true);
				document.getElementById("fondoTetris").style.background="url('"+this.imagen_fondo+"')";
				break;				
			}
		}	
};

Interfaz.prototype.pieza_colocada = function(puntos) {
	this.partida.agregar_puntos(puntos);
};

Interfaz.prototype.pintar = function() {
	var salida="";
	salida+="<span id='siguiente' class='tablero' style='filter:alpha(opacity=80);position:absolute;top:"+(TAM_PIEZA-5)+"px;left:"+(15*TAM_PIEZA-5)+"px;width:"+(4*TAM_PIEZA+10)+"px;height:"+(4*TAM_PIEZA+10)+"px;'></span>";
	salida+="<span id='estado' class='tablero' style='filter:alpha(opacity=80);position:absolute;top:"+(6*TAM_PIEZA-5)+"px;left:"+(15*TAM_PIEZA-5)+"px;width:"+(4*TAM_PIEZA+10)+"px;height:"+(15*TAM_PIEZA+10)+"px;'>"+this.partida.pintar()+"</span>";
	return salida;
};

Interfaz.prototype.moverDerecha = function() {
	if (this.partida.fin()) return;
	if (this.pausado) return;	
	this.tablero.moverDerecha();
	this.refrescar();
};

Interfaz.prototype.moverIzquierda = function() {
	if (this.partida.fin()) return;
	if (this.pausado) return;
	this.tablero.moverIzquierda();
	this.refrescar();
};

Interfaz.prototype.moverAbajo = function() {
	if (this.partida.fin()) return;
	if (this.pausado) return;
	this.tablero.moverAbajo();
	this.refrescar();
	clearTimeout(this.secuencia);
	this.secuencia=setTimeout("partida_tetris.jugar()",(10-this.partida.nivel)*50)
};

Interfaz.prototype.girarDerecha = function() {
	if (this.partida.fin()) return;
	if (this.pausado) return;
	this.tablero.girarDerecha();
	this.refrescar();
};

Interfaz.prototype.girarIzquierda = function() {
	if (this.partida.fin()) return;
	if (this.pausado) return;
	this.tablero.girarIzquierda();
	this.refrescar();
};

Interfaz.prototype.soltar = function() {
	if (this.fuera_de_juego) return;
	if (this.partida.fin()){
		this.mostrar_titulo();
		return;
		}
	if (this.pausado) return;
	this.tablero.soltar();
	this.refrescar();
};

Interfaz.prototype.pausa = function() {
	if (this.partida.fin()) return;
	if (!this.pausado) {
		clearTimeout(this.secuencia)
		this.tablero.pausar();
		this.musica.pausar();
		this.refrescar();
		this.pausado=true;
		}
	else {
		this.pausado=false;	
		this.tablero.continuar();
		this.musica.continuar();
		this.refrescar();		
		this.secuencia=setTimeout("partida_tetris.jugar()",(10-this.partida.nivel)*50)
		}
};

Interfaz.prototype.cargar_ranking = function() {
var fecha=new Date();
frames['cargaRanking'].location.href="cargaRank.asp?juego=1&fecha="+fecha.toGMTString();
};

Interfaz.prototype.guardar_ranking = function(nombre,puntuacion) {
var fecha=new Date();
frames['guardaRanking'].location.href="guardaRank.asp?juego=1&nombre="+escape(nombre)+"&puntuacion="+puntuacion+"&fecha="+fecha.toGMTString();
};

Interfaz.prototype.guardar_nombre = function() {
this.guardar_ranking(this.nombreUsuario,this.partida.puntos());
ranking[ranking.length]=[this.nombreUsuario,this.partida.puntos()];
ranking.sort(OrdenarRanking)
this.min_puntuacion=ranking[ranking.length-1][1];
this.mostrar_titulo();
};

function init() {
partida_tetris=new Interfaz(0);
}

function TeclaPulsada() {
var tecla = window.event.keyCode

switch(tecla) {
	case 40:partida_tetris.moverAbajo();
		break;
	case 37:partida_tetris.moverIzquierda();
		break;
	case 39:partida_tetris.moverDerecha();
		break;
	case 38:partida_tetris.girarDerecha();
		break;
	case 103:partida_tetris.girarIzquierda();
		break;
	case 36:partida_tetris.girarIzquierda();
		break;
	case 33:partida_tetris.girarDerecha();
		break;
	case 105:partida_tetris.girarDerecha();
		break;	
	case 32:partida_tetris.soltar();
		break;	
	case 80:partida_tetris.pausa();
		break;		
	}
};

function OrdenarRanking(a, b) {
return a[1] - b[1]
}; 

window.onload=init;
//document.onkeydown = TeclaSoltada
document.onkeyup =   TeclaPulsada