var height = 0;
var width = 0;
var interv;
var cont = 0;
var savedSeq1 = new Array();
var savedSeq2 = new Array();
var respuesta1 = new Array();
var respuesta2 = new Array();
var EPR;
var chance = true;
var arraySplit = new Array();
var seqEnd = false;
var cont2 = 0;



function startGame() {
    height = document.getElementById("Rows").value;
    width = document.getElementById("Columns").value;
    if ((height < 6 && height > 1) && (width < 6 && width > 1)) {
        document.getElementById("message").innerHTML = "<p>PLAYING...</p>";
        drawField(width, height);
    } else {

        alert("introduzca unos valores validos por favor");
    }
    respuesta1.length = 0;
    respuesta2.length = 0;
    cont2 = 0;


}
function drawField(width, height) {



    document.getElementById("field").innerHTML = "";

    for (var i = 0; i < width; i++) {
        for (var j = 0; j < height; j++) {
            var x = (Math.random() * 256);
            var y = (Math.random() * 256);
            var z = (Math.random() * 256);
            var button = document.createElement("input");
            button.name = "buttony";
            button.type = "button";
            button.id = i + "_" + j;
            var k = i + "_" + j;
            backgroundColor = "rgba(" + x + ", " + y + ", " + z + ", 1)";
            button.class = "panel";
            button.style = "height: 50px; width : 50px; background-color:" + backgroundColor + "";
            button.savedStyle = backgroundColor;
            document.getElementById("field").appendChild(button);
            button.addEventListener("mousedown", enableEventsField);
            button.addEventListener("mousedown", changeColor);
            button.addEventListener("mouseup", originalColor);


        }
        var br = document.createElement("br");
        document.getElementById("field").appendChild(br);

    }
}
function changeColor() {
    this.style.backgroundColor = "orange";

}
function originalColor() {
    this.style.backgroundColor = this.savedStyle;

}

function enableEventsField() {
    cont2++;
    var aux = this.id;
    arraySplit.length = 0;
    arraySplit = aux.split("_");
    respuesta1.push(arraySplit[0]);
    respuesta2.push(arraySplit[1]);
    if (cont2 === cont) {
        for (var i = 0; i < respuesta1.length; i++) {
            if (savedSeq1[i] != respuesta1[i] || savedSeq2[i] != respuesta2[i]) {
                chance = false;
            }
        }

        sequence();

    }

}
function callsequence() {
    document.getElementById("but1").disabled = true;
    document.getElementById("but2").disabled = true;
    savedSeq1.length = 0;
    savedSeq2.length = 0;
    for (var i = 0; i < document.getElementById("level").value * 5; i++) {
        var a = Math.floor((Math.random() * (width)));
        var b = Math.floor((Math.random() * (height)));
        savedSeq1.push(a);
        savedSeq2.push(b);
    }
    cont = 0;
    sequence();
}
function recolor() {

    document.getElementById(savedSeq1[EPR - 1] + "_" + savedSeq2[EPR - 1]).style.backgroundColor = document.getElementById(savedSeq1[EPR - 1] + "_" + savedSeq2[EPR - 1]).savedStyle;

}
function sequence() {


    if (document.getElementById("level").value * 5 === cont) {
        document.getElementById("message").innerHTML = "<p>GAME OVER!!!!</p>";
    } else if (chance === false)
    {

        document.getElementById("message").innerHTML = "<p>YOU faileh!!!!!</p>";
    } else if (cont === cont2 + 1) {
        document.getElementById("message").innerHTML = "<p>Your turn</p>";

    } else {
        cont2 = 0;
        EPR = 0;
        cont++;
        intrv2 = setInterval(showSequence, 2000);
    }


}
function showSequence() {
    document.getElementsByName("buttony").disabled = true;
    EPR++;

    if (EPR === cont + 1) {
        respuesta1.length = 0;
        respuesta2.length = 0;
        clearInterval(intrv2);
        document.getElementsByName("buttony").disabled = false;
    } else {
        document.getElementById(savedSeq1[EPR - 1] + "_" + savedSeq2[EPR - 1]).style.backgroundColor = "black";
        setTimeout(recolor, 1000);
    }


}
function assignEvents(e) {
    document.getElementById("but1").addEventListener("mousedown", startGame);
    document.getElementById("but2").addEventListener("mousedown", callsequence);
}
document.addEventListener("DOMContentLoaded", assignEvents);