<!--

// === Parámetros ===
var	img_width	= 100// Ancho de imagen
var	img_height	= 101	// Alto de imagen
var	feld_breite	= 6  //Número de imágenes en horizontal
var	feld_hoehe	= 4 // Número de imágenes en vertical
var	platzhalter	= "mordaza/leer.gif"	//Imagen vacia
var	bild	= "mordaza/bild"	//Parte de la imagen (la extensión jpg y el número son rellenados automáticamente)

// === Variables ===
var	anzahl_bilder	= feld_breite * feld_hoehe
var	gesamt	= feld_breite * feld_hoehe
var	unten	= 0
var	seite	= 0
var	spalten	= 0
var	bildquelleintern	= "BildQ"
var	bildzielintern	= "BildZ"

var	quelle	= new Array()
var	ziel	= new Array()
var	merker_stein	= -1
var	merker_feld	= -1
var	spielstatus	= 0

// === Preparación ===
if((feld_breite + 6) * img_width < 600)
{
	unten	= gesamt % 6
	if(unten <= 1)
		unten	+= 6
	gesamt	-= unten
	seite	= gesamt / 6
	spalten	= 3
}
else
{
	unten	= gesamt % 4
	if(unten <= 1)
		unten	+= 4
	gesamt	-= unten
	seite	= gesamt / 4
	spalten	= 2
}

// Mostrar en la barra de estado
function zeige(nr, zielfeld)
{
	if(spielstatus == 0)
		status	= ((zielfeld ? ziel[nr] : quelle[nr]) != -1) ? "Esta casilla puede ser elegida" : "Esta casilla está vacía"
	else
		status	= ((zielfeld ? ziel[nr] : quelle[nr]) == -1) ? "Esta casilla puede ser ocupada" : "Esta casilla no puede ser ocupada"

}

// Borrar información en la barra de estado
function loesche()
{
	status	= ""
}

// Comprobar que la imagen está cargada
function fertig()
{
	var	i
	for(i = 0; i < anzahl_bilder; i++)
		if(ziel[i] != i)
			return false

	return true
}

// Pulsar sobre la imagen
function klick(nr, zielfeld)
{
	// Aviso de no hay imagen
	if(spielstatus == 0)
	{
		if((zielfeld ? ziel[nr] : quelle[nr]) == -1)
		{
			alert("Ya existe una ficha en esta posición")
			return
		}
		merker_stein	= nr
		merker_feld	= zielfeld
		spielstatus	= 1
		return
	}

	// Aviso de imagen de origen
	if(spielstatus == 1)
	{
		if((zielfeld ? ziel[nr] : quelle[nr]) != -1)
		{
			alert("Ya existe una ficha en esta posición")
			return
		}

		if(zielfeld)
		{
			ziel[nr]	= merker_feld ? ziel[merker_stein] : quelle[merker_stein]
			document.images[bildzielintern + nr].src	= bild + ziel[nr] + ".jpg"
		}
		else
		{
			quelle[nr]	= merker_feld ? ziel[merker_stein] : quelle[merker_stein]
			document.images[bildquelleintern + nr].src	= bild + quelle[nr] + ".jpg"
		}

		if(merker_feld)
			ziel[merker_stein]	= -1
		else
			quelle[merker_stein]	= -1
		document.images[(merker_feld ? bildzielintern : bildquelleintern) + merker_stein].src	= platzhalter

		spielstatus	= 0

		if(fertig())
		{	
		alert ("Enhorabuena! lo has conseguido");
		window.open("resuelto.htm", "ventana", "width=350,height=200,top=200,left=400");
		//window.close()
		}
			

		return
	}
}

// Casillas de juego
function spielfeld()
{
	// Zielfeld (in der Mitte)
	function zielfeld()
	{
		var	z	= ""
		var	i
		var	j
		var	nr

		z	+= "<TABLE BORDER=\"0\" CELLSPACING=\"0\" CELLPADDING=\"1\">\n"
		for(i = 0; i < feld_hoehe; i++)
		{
			z	+= "<TR ALIGN=\"CENTER\" VALIGN=\"MIDDLE\">\n"
			for(j = 0; j < feld_breite; j++)
			{
				nr	= feld_breite * i + j
				z	+= "<TD><A HREF=\"javascript:klick(" + nr + ", true)\" onMouseOver=\"zeige(" + nr + ", true); return true\" onMouseOut=\"loesche()\"><IMG SRC=\"" + platzhalter + "\" WIDTH=\"" + img_width + "\" HEIGHT=\"" + img_height + "\" BORDER=\"1\" NAME=\"" + bildzielintern + nr + "\" ALT=\"\"></A></TD>\n"
			}
			z	+= "</TR>\n"
		}
		z	+= "</TABLE>"

		return z
	}

	// Casillas de origen ( izquierda, derecha y abajo)
	function wahlfeld(nr)
	{
		var	i
		var	j
		var	offset	= 0
		var	nr

		z	= ""

		z	+= "<TABLE BORDER=\"0\" CELLSPACING=\"0\" CELLPADDING=\"4\">\n"

		if(nr == 1 || nr == 2)
		{
			offset	= (nr == 1) ? 0 : (spalten * seite)

			for(i = 0; i < seite; i++)
			{
				z	+= "<TR ALIGN=\"CENTER\" VALIGN=\"MIDDLE\">\n"
				for(j = 0; j < spalten; j++)
				{
					nr	= offset + spalten * i + j
					z	+= "<TD><A HREF=\"javascript:klick(" + nr + ", false)\" onMouseOver=\"zeige(" + nr + ", false); return true\" onMouseOut=\"loesche()\"><IMG SRC=\"" + bild + String(quelle[nr]) + ".jpg\" WIDTH=\"" + img_width + "\" HEIGHT=\"" + img_height + "\" BORDER=\"1\" NAME=\"" + bildquelleintern + nr + "\" ALT=\"\"></A></TD>\n"
				}
				z	+= "</TR>\n"
			}
		}
		else if(nr == 3)
		{
			offset	= 2 * spalten * seite

			z	+= "<TR ALIGN=\"CENTER\" VALIGN=\"MIDDLE\">\n"
			for(i = 0; i < unten; i++)
			{
				nr	= offset + i
				z	+= "<TD><A HREF=\"javascript:klick(" + nr + ", false)\" onMouseOver=\"zeige(" + nr + ", false); return true\" onMouseOut=\"loesche()\"><IMG SRC=\"" + bild + String(quelle[nr]) + ".jpg\" WIDTH=\"" + img_width + "\" HEIGHT=\"" + img_height + "\" BORDER=\"1\" NAME=\"" + bildquelleintern + nr + "\" ALT=\"\"></A></TD>\n"
			}
			z	+= "</TR>\n"
		}

		z	+= "</TABLE>"

		return z
	}

	with(document)
	{
		writeln("<DIV ALIGN=\"CENTER\">")
		writeln("<TABLE BORDER=\"0\" CELLSPACING=\"1\" CELLPADDING=\"4\">")
		writeln("<TR ALIGN=\"CENTER\" VALIGN=\"MIDDLE\">")
		writeln("<TD ROWSPAN=\"2\" WIDTH=\"30%\">" + wahlfeld(1) + "</TD>")
		writeln("<TD WIDTH=\"40%\">" + zielfeld() + "</TD>")
		writeln("<TD ROWSPAN=\"2\" WIDTH=\"30%\">" + wahlfeld(2) + "</TD>")
		writeln("</TR>")
		writeln("<TR ALIGN=\"CENTER\" VALIGN=\"MIDDLE\">")
		writeln("<TD WIDTH=\"40%\">" + wahlfeld(3) + "</TD>")
		writeln("</TR>")
		writeln("</TABLE>")
		writeln("</DIV>")
	}
}

// Mezclar piezas
function init()
{
	var	i

	spielstatus	= 0

	for(i = 0; i < anzahl_bilder; i++)
	{
		quelle[i]	= i
		ziel[i]	= -1
	}

	var	a
	var	b
	var	temp
	for(i = 0; i < 4 * anzahl_bilder; i++)
	{
		a	= Math.floor(Math.random() * anzahl_bilder)
		b	= Math.floor(Math.random() * anzahl_bilder)
		temp	= quelle[a]
		quelle[a]	= quelle[b]
		quelle[b]	= temp
	}
}

// Nuevo juego
function neues_spiel()
{
	var	i
	init()

	for(i = 0; i < anzahl_bilder; i++)
	{
		document.images[bildquelleintern + i].src	= (quelle[i] == -1) ? platzhalter : (bild + quelle[i] + ".jpg")
		document.images[bildzielintern + i].src	= (ziel[i] == -1) ? platzhalter : (bild + ziel[i] + ".jpg")
	}
}

//-->