var win = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15);
var pos = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15);
var data = new Array("http://i.imgur.com/C4hPBYh.png", "http://i.imgur.com/tSNiVaq.png", "http://i.imgur.com/lpeVQZD.png", "http://i.imgur.com/fV05mxv.png", "http://i.imgur.com/qG406mu.png", "http://i.imgur.com/bmmbnI4.png", "http://i.imgur.com/ezwRxvV.png", "http://i.imgur.com/FHeFAlO.png", "http://i.imgur.com/RJHwEyZ.png", "http://i.imgur.com/u314b2o.png", "http://i.imgur.com/uXNqhO5.png", "http://i.imgur.com/cmKzD4L.png", "http://i.imgur.com/C2TUHPZ.png", "http://i.imgur.com/UZI73jr.png", "http://i.imgur.com/sBPfd0r.png", "http://i.imgur.com/AfwRvYQ.png");


function winCheck(){
    var success = true;
    for(var i = 0; i < win.length;i++){
        if(win[i] !== pos[i]){
            success = false;
            break;
        }
    }
    if (success){
        window.alert("win?");
    } else {
        window.alert("De schuifpuzzel is nog niet correct opgelost");
    }
}
function renderImg(){
    var img0 = document.createElement("IMG");
    var img1 = document.createElement('img');
    var img2 = document.createElement('img');
    var img3 = document.createElement('img');
    var img4  = document.createElement('img');
    var img5 = document.createElement('img');
    var img6 = document.createElement('img');
    var img7 = document.createElement('img');
    var img8 = document.createElement('img');
    var img9 = document.createElement('img');
    var img10 = document.createElement('img');
    var img11 = document.createElement('img');
    var img12 = document.createElement('img');
    var img13 = document.createElement('img');
    var img14 = document.createElement('img');
    var img15 = document.createElement('img');

    img0.src = data[0];
    img1.src = data[1];
    img2.src = data[2];
    img3.src = data[3];
    img4.src = data[4];
    img5.src = data[5];
    img6.src = data[6];
    img7.src = data[7];
    img8.src = data[8];
    img9.src = data[9];
    img10.src = data[10];
    img11.src = data[11];
    img12.src = data[12];
    img13.src = data[13];
    img14.src = data[14];
    img15.src = data[15];

    img0.setAttribute("id", "pos0");
    img1.setAttribute("id", "pos1");
    img2.setAttribute("id", "pos2");
    img3.setAttribute("id", "pos3");
    img4.setAttribute("id", "pos4");
    img5.setAttribute("id", "pos5");
    img6.setAttribute("id", "pos6");
    img7.setAttribute("id", "pos7");
    img8.setAttribute("id", "pos8");
    img9.setAttribute("id", "pos9");
    img10.setAttribute("id", "pos10");
    img11.setAttribute("id", "pos11");
    img12.setAttribute("id", "pos12");
    img13.setAttribute("id", "pos13");
    img14.setAttribute("id", "pos14");
    img15.setAttribute("id", "pos15");

    document.getElementById("pos0").appendChild(img0);
    document.getElementById("pos1").appendChild(img1);
    document.getElementById("pos2").appendChild(img2);
    document.getElementById("pos3").appendChild(img3);
    document.getElementById("pos4").appendChild(img4);
    document.getElementById("pos5").appendChild(img5);
    document.getElementById("pos6").appendChild(img6);
    document.getElementById("pos7").appendChild(img7);
    document.getElementById("pos8").appendChild(img8);
    document.getElementById("pos9").appendChild(img9);
    document.getElementById("pos10").appendChild(img10);
    document.getElementById("pos11").appendChild(img11);
    document.getElementById("pos12").appendChild(img12);
    document.getElementById("pos13").appendChild(img13);
    document.getElementById("pos14").appendChild(img14);
    document.getElementById("pos15").appendChild(img15);
    /*
    document.getElementById("pos0").img0;
    document.getElementById("pos1").img1;
    document.getElementById("pos2").img2;
    document.getElementById("pos3").img3;
    document.getElementById("pos4").img4;
    document.getElementById("pos5").img5;
    document.getElementById("pos6").img6;
    document.getElementById("pos7").img7;
    document.getElementById("pos8").img8;
    document.getElementById("pos9").img9;
    document.getElementById("pos10").img10;
    document.getElementById("pos11").img11;
    document.getElementById("pos12").img12;
    document.getElementById("pos13").img13;
    document.getElementById("pos14").img14;
    document.getElementById("pos15").img15;
   */
   console.log("Called image refresh");
}
function editImg(i, n){
    var holdImg = data[n];
    data[n] = data[n+i];
    data[n+i] = holdImg;
    renderImg();
}
function Check(n){
var hold = pos[n];
        if (pos[n-1] === 15 && pos[n] !== 0 && pos[n] !== 4 && pos[n] !== 8 && pos[n] !== 12){
                pos[n] = pos[n-1];
                pos[n-1] = hold;
                editImg(-1, n);
        } else if (pos[n+1] === 15 && pos[n] !== 3 && pos[n] !== 7 && pos[n] !== 11 && pos[n] !== 15){
                pos[n] = pos[n+1];
                pos[n+1] = hold;
                editImg(1, n);
        } else if (pos[n-4] === 15) {
                pos[n] = pos[n-4];
                pos[n-4] = hold;
                editImg(-4, n);
        } else if (pos[n+4] === 15) {
                pos[n] = pos[n+4];
                pos[n+4] = hold;
                editImg(4, n);
        } else {
                window.alert("Dit stukje kan niet worden verschoven.");
        }
        console.log(pos);
}