/* --------------------------------------------------------------------------------
   Puzzle II

   Autor: Dietmar Rabich
   Datei: spiel.js

   Copyright (c) Dietmar Rabich, Duelmen.
   Alle Rechte vorbehalten.

   Diese Datei stammt von http://skripte.rabich.de/.

   Das Entfernen oder Veraendern dieser Informationen ist
   ohne ausdrueckliche Zustimmung des Autors nicht gestattet.

   Aenderungen:
   5.10.2003  Erstellung
-------------------------------------------------------------------------------- */

// === Parameter ===
var	img_width	= 60;	// Bildbreite
var	img_height	= 60;	// Bildhoehe
var	feld_breite	= 6;	// Anzahl Bilder horizontal
var	feld_hoehe	= 4;	// Anzahl Bilder vertikal
var	platzhalter	= "puzzle3/bilder\/leer.gif";	// Bild fuer Platzhalter
var	bild		= "puzzle3/bilder\/puzzle";	// Bildsegment (Nummer und .jpg werden automatisch ergaenzt)

// === Variablen ===
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;

// === Vorbereitungen ===
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;
}

// Anzeige in der Statuszeile
function zeige(nr, zielfeld)
{
	if(spielstatus == 0)
		status	= ((zielfeld ? ziel[nr] : quelle[nr]) != -1) ? "Dieser Stein kann gew\u00E4hlt werden." : "Das Feld ist leer.";
	else
		status	= ((zielfeld ? ziel[nr] : quelle[nr]) == -1) ? "Dieses Feld kann gew\u00E4hlt werden." : "Hier liegt bereits ein Stein.";

}

// Information in der Statuszeile loeschen
function loesche()
{
	status	= "";
}

// Pruefen, ob Bild fertig ist
function fertig()
{
	var	i;
	for(i = 0; i < anzahl_bilder; i++)
		if(ziel[i] != i)
			return false;

	return true;
}

// Klick auf Bild auswerten
function klick(nr, zielfeld)
{
	// Noch kein Bild gemerkt
	if(spielstatus == 0)
	{
		if((zielfeld ? ziel[nr] : quelle[nr]) == -1)
		{
			alert("Da liegt doch gar kein Stein!");
			return;
		}
		merker_stein	= nr;
		merker_feld	= zielfeld;
		spielstatus	= 1;
		return;
	}

	// Quellbild gemerkt
	if(spielstatus == 1)
	{
		if((zielfeld ? ziel[nr] : quelle[nr]) != -1)
		{
			alert("Da liegt schon ein Stein!");
			return;
		}

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

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

		spielstatus	= 0;

		if(fertig())
			alert("Geschafft! Herzlichen Gl\u00FCckwunsch!");

		return;
	}
}

// Spielfeld ausgeben
function spielfeld()
{
	// Zielfeld (in der Mitte)
	function zielfeld()
	{
		var	z	= "";
		var	i;
		var	j;
		var	nr;

		z	+= "<table><tbody>";
		for(i = 0; i < feld_hoehe; i++)
		{
			z	+= "<tr>";
			for(j = 0; j < feld_breite; j++)
			{
				nr	= feld_breite * i + j;
				z	+= "<td><a href=\"#\" onclick=\"klick(" + nr +
						", true);return true;\" onmouseover=\"zeige(" + nr +
						", true); return true;\" onmouseout=\"loesche();\"><img src=\"" + platzhalter +
						"\" width=\"" + img_width +
						"\" height=\"" + img_height +
						"\" style=\"width: " + img_width +
						"px; height: " + img_height +
						"px;\" id=\"" + bildzielintern + nr +
						"\" alt=\"\" title=\"\" \/><\/a><\/td>";
			}
			z	+= "<\/tr>";
		}
		z	+= "<\/tbody><\/table>";

		return z;
	}

	// Quellfelder (links, rechts und unten)
	function wahlfeld(nr)
	{
		var	i;
		var	j;
		var	offset	= 0;
		var	nr;

		z	= "";

		z	+= "<table><tbody>";

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

			for(i = 0; i < seite; i++)
			{
				z	+= "<tr>";
				for(j = 0; j < spalten; j++)
				{
					nr	= offset + spalten * i + j;
					z	+= "<td><a href=\"#\" onclick=\"klick(" + nr +
							", false);return true;\" onmouseover=\"zeige(" + nr +
							", false);return true;\" onmouseout=\"loesche();\"><img src=\"" + bild + String(quelle[nr]) +
							".jpg\" width=\"" + img_width +
							"\" height=\"" + img_height +
							"\" style=\"width: " + img_width +
							"px; height: " + img_height +
							"px;\" id=\"" + bildquelleintern + nr +
							"\" alt=\"\" title=\"\" \/><\/a><\/td>";
				}
				z	+= "<\/tr>";
			}
		}
		else if(nr == 3)
		{
			offset	= 2 * spalten * seite;

			z	+= "<tr>\n";
			for(i = 0; i < unten; i++)
			{
				nr	= offset + i;
				z	+= "<td><a href=\"#\" onclick=\"klick(" + nr +
						", false);return true;\" onmouseover=\"zeige(" + nr +
						", false);return true;\" onmouseout=\"loesche();\"><img src=\"" + bild + String(quelle[nr]) +
						".jpg\" width=\"" + img_width +
						"\" height=\"" + img_height +
						"\" style=\"width: " + img_width +
						"px; height: " + img_height +
						"px;\" id=\"" + bildquelleintern + nr +
						"\" alt=\"\" title=\"\" \/><\/a><\/td>";
			}
			z	+= "</tr>";
		}

		z	+= "<\/tbody><\/table>";

		return z;
	}

	with(document)
	{
		writeln("<table><tbody><tr>");
		writeln("<td rowspan=\"2\" style=\"width: 30%;\">" + wahlfeld(1) + "<\/td>");
		writeln("<td style=\"width: 40%;\">" + zielfeld() + "<\/td>");
		writeln("<td rowspan=\"2\" style=\"width: 30%;\">" + wahlfeld(2) + "<\/td>");
		writeln("<\/tr><tr>");
		writeln("<td style=\"width: 40%;\">" + wahlfeld(3) + "<\/td>");
		writeln("<\/tr><\/tbody><\/table>");
	}
}

// Steine merken und mischen
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;
	}
}

// Steine in Ausgangsposition legen
function neues_spiel()
{
	var	i;
	init();

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

// Hilfe
function hilfe()
{
	var	breite	= (img_width + 2) * feld_breite + 32;
	var	hoehe	= (img_height + 2) * feld_hoehe + 96;

	var	w	= open("", "PuzzleIIHilfe", "resizable,location=0,toolbar=0,statusbar=0,dependend,directories=0,menubar=0,scrollbars=0,height=" + String(hoehe) + ",width=" + String(breite) + ",innerHeight=" + String(hoehe) + ",innerWidth=" + String(breite))
	with(w.document)
	{
		var	i, j;

		open("text/html")
		writeln("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
		writeln("<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.1\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml11\/DTD\/xhtml11.dtd\">");
		writeln("<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"de\">");
		writeln("<head>");
		writeln("<title>Puzzle II - Hilfe<\/title>");
		writeln("<meta http-equiv=\"CONTENT-TYPE\" content=\"text\/html; CHARSET=UTF-8\">");
		writeln("<meta http-equiv=\"CONTENT-SCRIPT-TYPE\" content=\"text\/javascript\">");
		writeln("<meta http-equiv=\"CONTENT-STYLE-TYPE\" content=\"text\/css\">");
		writeln("<style><!--");
		writeln("body {font-family: sans-serif;}");
		writeln("table {margin-left: auto; margin-right: auto; border-spacing: 1px; border: 1px solid #000; padding: 2px;}");
		writeln("table td {width: 50px; height: 50px; padding: 0; text-align: center; vertical-align: middle; border: 1px solid; font-size: large;}");
		writeln("a {color: #00f; background-color: #fff;}");
		writeln("--><\/style>");
		writeln("<\/head>");
		writeln("<body onload=\"self.focus()\">")
		write("<div style=\"text-align: center;\">")
		writeln("<table><tbody>")
		for(i = 0; i < feld_hoehe; i++)
		{
			write("<tr>");
			for(j = 0; j < feld_breite; j++)
				write("<td><img src=\"" + bild + String(feld_breite * i + j) +
					".jpg\" width=\"" + img_width +
					"\" height=\"" + img_height +
					"\" style=\"width: " + img_width +
					"px; height: " + img_height +
					"px;\" alt=\"\" title=\"\"><\/td>");
			write("<\/tr>");
		}
		writeln("<\/tbody><\/table>");
		write("<p><a href=\"#\" onclick=\"self.close();return true;\">Schlie&szlig;en<\/a><\/p><\/div>");
		writeln("<\/body>");
		writeln("<\/html>");
		close();
	}
}

// EOF