window.onload = initPage;

var fertig = "";

function initPage() {
    var table = document.getElementById("puzzle-1");
    var cells = table.getElementsByTagName("td");
    for(var i=0; i<cells.length; i++) {
        var cell = cells[i];
        cell.onclick = tileClick;
    }
    document.getElementById("gewonnen").className = "unsichtbar";
}

// Pruefen, ob die Zelle das leere Bild enthaelt
function cellIsEmpty(cell) {
    var image = cell.firstChild;
    if(image.alt == "leer") {
        return true;
    }
    else {
        return false;
    }
}

// Position des geklickten Teils ermitteln & ggf. verschieben
function tileClick() {
    // pruefen, ob geklickte Zelle leer ist
    if(cellIsEmpty(this)) {
        alert("Bitte klicke auf ein Teil mit einem Bildausschnitt.");
        return;
    }
    // Reihe & Spalte der geklickten Zelle ermitteln
    var currentRow = this.id.charAt(5); // geklickte Reihe (id="zelle*2*1")
    var currentCol = this.id.charAt(6);    // geklickte Spalte (id="zelle2*1*")
    // nach oben pruefen
    if(currentRow > 1) {
        var testRow = Number(currentRow)-1;    // Number() konvertiert Text in numerisches Format
        // Reihen-Nr. der geprueften Zelle ist 1 weniger als die der geklickten Zelle, Spalten-Nr. ist gleich
        var testCellId = "zelle" + testRow + currentCol; 
        var testCell = document.getElementById(testCellId);
        if(cellIsEmpty(testCell)) {
            swapTiles(this, testCell);
            return;
        }
    }
    // nach unten pruefen
    if(currentRow < 4) {
        var testRow = Number(currentRow)+1;
        var testCellId = "zelle" + testRow + currentCol;
        var testCell = document.getElementById(testCellId);
        if(cellIsEmpty(testCell)) {
            swapTiles(this, testCell);
            return;
        }
    }
    // nach links pruefen
    if(currentCol > 1) {
        var testCol = Number(currentCol)-1;
        var testCellId = "zelle" + currentRow + testCol;
        var testCell = document.getElementById(testCellId);
        if(cellIsEmpty(testCell)) {
            swapTiles(this, testCell);
            return;
        }
    }
    // nach rechts pruefen
    if(currentCol < 4) {
        var testCol = Number(currentCol)+1;
        var testCellId = "zelle" + currentRow + testCol;
        var testCell = document.getElementById(testCellId);
        if(cellIsEmpty(testCell)) {
            swapTiles(this, testCell);
            return;
        }
    }
    // die angeklickte Zelle ist gesperrt
    alert("Bitte klicke ein Teil neben dem leeren Feld an.");
}

//Pruefen, ob Puzzle geloest wurde
function puzzleIsComplete() {
    var tiles = document.getElementById("puzzle-1").getElementsByTagName("img");
    var tileOrder = "";
    for(var i=0; i<tiles.length; i++) {
        var num = tiles[i].src.substr(-6,2);
        //if(num != er) {
            tileOrder += num;
        //}
    }
    if(tileOrder == "010203040506070809101112131415er") {
        fertig = "ja";
    }
    else {
        fertig = "nein";
    }
}

// Teil verschieben
function swapTiles(selectedCell, destinationCell) {
    // Referenzen zu den zu tauschenden Bildern
    selectedImage = selectedCell.firstChild;
    destinationImage = destinationCell.firstChild;
    // Bilder tauschen
    selectedCell.appendChild(destinationImage);
    destinationCell.appendChild(selectedImage);
    // anzeigen, dass Puzzle geloest wurde
    puzzleIsComplete();
    if(fertig == "ja") {
        document.getElementById("gewonnen").className = "sichtbar";
        document.getElementById("puzzleTabelle").className = "weg";
        document.getElementById("ganzesBild").className = "bildAnzeigen";
    }
}