var torx = true;
var rows, cols;
function BuildBoard() {
    //  document.getElementById("div").innerHTML = "TURN:";
    var btnId = 0;
    rows = +prompt("enter border size(rows)");
    cols = +prompt("enter border size(cols)");
    if (cols != rows) {
        alert("ROWS AND COLS MUST BE THE SAME");
        BuildBoard();
    }
    var sh, am;
    // document.getElementById("restart").style.marginTop = 300;
    //document.getElementById("restart").innerHTML = "<button width='250px' height='250px' onclick='BuildBoard();'> +        <img height='100%' width='100%' src='restart.jpg' /> +   </button>"
    var strBuildTable = "<table border='1'>";
    for (sh = 0; sh < rows; sh++) {
        strBuildTable += "<tr>";
        for (am = 0; am < cols; am++) {
            strBuildTable += "<td width='" + 500 / cols + "px' height='" + 500 / rows + "px'  id='" + btnId.toString() + "' onclick='ButtonClick(this);' style='background-color:skyblue'>";
            strBuildTable += "<img width='100%' height='100%' src='empty.png'>";
            strBuildTable += "</td>";
            btnId++;
        }
        strBuildTable += "</tr>";
    }
    strBuildTable += "</table>";
    document.getElementById("board").innerHTML = strBuildTable;
    document.getElementById("restart").innerHTML = "<button style='width:250px;height:200px;background-color:lightskyblue;color:whitesmoke;font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-size:'100px' onclick='BuildBoard();'>Reset game</button>"
    //document.write(strBuildTable);
}
function ButtonClick(BtnThis) {
    var idnum = BtnThis.id;
    var rowclicked = Math.floor(idnum / cols);
    var colclicked = idnum % cols;
    var i = 0;
    var down = (cols * rows) - (cols-colclicked);
    while (i < rows) {
        if (document.getElementById(down).style.backgroundColor === "skyblue") {
            if (torx === true) {
                document.getElementById(down).style.backgroundColor = "dodgerblue";
                document.getElementById(down).innerHTML = "<img height='100%' width='100%' src='Yellow.png' />"
                document.getElementById("tor").innerHTML = "Turn: O";
                torx = false;
                //down = down - cols;
                break;
            }
            else {
                document.getElementById(down).style.backgroundColor = "blue";
                document.getElementById(down).innerHTML = "<img height='100%' width='100%' src='Red.png' />"
                document.getElementById("tor").innerHTML = "Turn: X";
                torx = true;
             //   down = down - cols;
                break;
            }
        }
        down = down - cols;
        i++;
    }
    // alert(rowclicked, ",", colclicked);


        var bodekcol = 0, counter = 0;
        while (bodekcol < rows && document.getElementById(idnum).style.backgroundColor === document.getElementById(colclicked + counter).style.backgroundColor) {
            bodekcol++;
            counter = counter + cols;
        }
        if (bodekcol === rows) {
            if (torx === true) {
                document.getElementById("div").innerHTML = "<img height='350' width='350' src='win.png' />"

            }
            else {
                document.getElementById("div").innerHTML = "<img height='350' width='350' src='win.png' />"

            }
        }

}