<!--

// === Parameter ===
var        img_width        = 50        // Bildbreite
var        img_height        = 50        // Bildhoehe
var        feld_breite        = 6        // Anzahl Bilder horizontal
var        feld_hoehe        = 4        // Anzahl Bilder vertikal
var        platzhalter        = "puzzleimages/leer.gif"        // Bild fuer Platzhalter
var        bild        = "puzzleimages/puzz1_"        // 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\xE4hlt werden." : "Das Feld ist leer."
        else
                status        = ((zielfeld ? ziel[nr] : quelle[nr]) == -1) ? "Dieses Feld kann gew\xE4hlt 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.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("Geschafft! Herzlichen Gl\xFCckwunsch!")

                return
        }
}

// Spielfeld ausgeben
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
        }

        // Quellfelder (links, rechts und unten)
        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>")
        }
}

// 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.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")
        }
}

// Hilfe
function hilfe()
{
        var        breite        = (img_width + 2) * feld_breite + 32
        var        hoehe        = (img_height + 2) * feld_hoehe + 96

        var        w        = open("", "PuzzleIIHilfe", "resizable=1,location=0,toolbar=0,statusbar=0,dependend=1,directories=0,menubar=0,scrollbars=0,height=" + String(hoehe) + ",width=" + String(breite) + ",innerHeight=" + String(hoehe) + ",innerWidth=" + String(breite))
        with(w.document)
        {
                open("text/html")
                write("<HTML><HEAD><TITLE>Puzzle II - Hilfe</TITLE>")
                writeln("<META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"text/html; CHARSET=iso-8859-1\">")
                writeln("<META HTTP-EQUIV=\"CONTENT-SCRIPT-TYPE\" CONTENT=\"text/javascript\"></HEAD>")
                write("<BODY BGCOLOR=\"#000033\" TEXT=\"#F9F9F9\" LINK=\"#F9F9F9\" ALINK=\"#F9F9F9\" VLINK=\"#F9F9F9\" onLoad=\"self.focus()\">")

                var        i
                var        j

                writeln("<TABLE BORDER=\"0\" CELLPADDING=\"0\" CELLSPACING=\"0\" WIDTH=\"100%\" HEIGHT=\"100%\">")
                writeln("<TR ALIGN=\"LEFT\" VALIGN=\"TOP\"><TD><SMALL>So sieht das fertige Bild aus:</SMALL></TD></TR>")
                writeln("<TR ALIGN=\"CENTER\" VALIGN=\"MIDDLE\"><TD><TABLE BORDER=\"0\" CELLSPACING=\"1\" CELLPADDING=\"0\">")
                for(i = 0; i < feld_hoehe; i++)
                {
                        write("<TR ALIGN=\"CENTER\" VALIGN=\"MIDDLE\">")
                        for(j = 0; j < feld_breite; j++)
                                write("<TD><IMG SRC=\"" + bild + String(feld_breite * i + j) + ".jpg\" WIDTH=\"" + img_width + "\" HEIGHT=\"" + img_height + "\" BORDER=\"0\" ALT=\"\"></TD>")
                        write("</TR>")
                }
                writeln("</TABLE></TD></TR>")
                writeln("<TR ALIGN=\"CENTER\" VALIGN=\"BOTTOM\"><TD><SMALL>[ <A HREF=\"javascript:self.close()\">Schlie&szlig;en</A> ]</SMALL></TD></TR></TABLE>")
                writeln("</BODY></HTML>")
                close()
        }
}

//-->