function create_game_field(x, y){
  var div = document.getElementById("game_field");

  var table = document.createElement("table");
  var tableBody = document.createElement("tbody");

  //Creating the table
  for(var i = 1; i <= x; i++){
      //Creates a table row
      var row = document.createElement("tr");
      //Set ID for that <tr> element of type "row-*"
      row.setAttribute("id", "row-"+i);

      for(var j = 1; j <= y; j++){
          //Create a <td> element and put it at the end of the table
          var cell = document.createElement("td");
          //Set ID for that <td> element of type "col-*-*"
          cell.setAttribute("id", "col-"+i+"-"+j);
          var cellText = document.createTextNode(".");
          cell.appendChild(cellText);
          row.appendChild(cell);
      }

      //Now add the row to the end of the table
      tableBody.appendChild(row);

      //Add the <tbody> element in the <table>
      table.appendChild(tableBody);

      //Append <table> into <div id="game_field">
      div.appendChild(table);
  }
};

//Function that returns a random number between min (included) and max (included)
function getRandomInteger(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
};

//This function adds Battleship (5 squares) on the field;
//quantity - number of battleships,
//string - "horizontal" or "vertical" positioning of the ship
function createBattleship(quantity, string){
    for(var i = 1; i <= quantity; i++){
        if(string == "horizontal"){
            do{
                //random number between 0 and 9 (included) for the row
                var row = getRandomInteger(0, 9);
                //random number between 0 and 5 (included) for the column
                var col = getRandomInteger(0, 5);
            }while(isEmpty(row, col, 5, "horizontal") != true);

            for(var j = 0; j < 5; j++){
                game_field[row][col] = 1;
                col++;
            }

            requiredShots += 5;
        }else if(string == "vertical"){
            do{
                //random number between 0 and 5 (included) for the row
                var row = getRandomInteger(0, 5);
                //random number between 0 and 9 (included) for the column
                var col = getRandomInteger(0, 9);
            }while(isEmpty(row, col, 5, "vertical") != true);

            for(var j = 0; j < 5; j++){
                game_field[row][col] = 1;
                row++;
            }

            requiredShots += 5;
        }else{
            alert("Something went wrong. I can't position the Battleship w/o correct info");
        }
    }
};

//This function adds Destroyer (4 squares) on the field;
//quantity - number of destroyers,
//string - "horizontal" or "vertical" positioning of the ship
function createDestroyer(quantity, string){
    for(var i = 1; i <= quantity; i++){
        if(string == "horizontal"){
            do{
                //random number between 0 and 9 (included) for the row
                var row = getRandomInteger(0, 9);
                //random number between 0 and 6 (included) for the column
                var col = getRandomInteger(0, 6);
            }while(isEmpty(row, col, 4, "horizontal") != true);

            for(var j = 0; j < 4; j++){
                game_field[row][col] = 1;
                col++;
            }

            requiredShots += 4;
        }else if(string == "vertical"){
            do{
                //random number between 0 and 6 (included) for the row
                var row = getRandomInteger(0, 6);
                //random number between 0 and 9 (included) for the column
                var col = getRandomInteger(0, 9);
            }while(isEmpty(row, col, 4, "vertical") != true);

            for(var j = 0; j < 4; j++){
                game_field[row][col] = 1;
                row++;
            }

            requiredShots += 4;
        }else{
            alert("Something went wrong. I can't position the Destroyer w/o correct info");
        }
    }
}

//This function returns "true" if there is enough space
//to position a ship w/o overlap; otherwise returns "false"
function isEmpty(x, y, count, string){
    var empty = true;

    if(string == "horizontal"){
        for(var i = 0; i < count; i++){
            if(game_field[x][y] == 1){
                empty = false;
                y++;
            }
        }
    }

    if(string == "vertical"){
        for(var i = 0; i < count; i++){
            if(game_field[x][y] == 1){
                empty = false;
                x++;
            }
        }
    }

    return empty;
}

//The following array will be used as a game field
//0 - empty space w/o battleship
//1 - battleship
//Battleships will be added on a random principle
var game_field = [
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0]
];

//Variable with the number of successful shots;
//You need 13 successful shots to complete a game with 1 battleship and 2 destroyers;
//1 * 5 squares (battleship) + 2 * 4 squares (destroyer)
var successfulShots = 0;

//Variable with the number of successful shots a Player needs to complete the game;
//This variable will be changed for every ship, added to the game field
var requiredShots = 0;

//Variable with the number of all shots (missed and successful)
var allShots = 0;

$(document).ready(function(){
    //Create game field with size 10x10 cells
    create_game_field(10, 10);

    //Add table header with numbers from 1 to 10 for each column
    $("table").prepend("<thead></thead>");
    $("thead").append("<tr></tr>");
    for (var number = 1; number <= 10; number++){
        $("table thead tr").append("<td>"+number+"</td>");
    }

    createBattleship(1, "horizontal");
    createDestroyer(1, "horizontal");
    createDestroyer(1, "vertical");
    console.log(game_field);

    //We will keep the input field's coordinates in two separate variables
    var input_index_1, input_index_2;

    $("input").on("change", function(){
       switch($("input").val().substring(0, 1)){
           case "A": input_index_1 = 1; break;
           case "B": input_index_1 = 2; break;
           case "C": input_index_1 = 3; break;
           case "D": input_index_1 = 4; break;
           case "E": input_index_1 = 5; break;
           case "F": input_index_1 = 6; break;
           case "G": input_index_1 = 7; break;
           case "H": input_index_1 = 8; break;
           case "I": input_index_1 = 9; break;
           case "J": input_index_1 = 10; break;
           default: alert("Incorrect coordinates! Please try again...");
       }
       input_index_2 = Number($("input").val().substring(1, 3));
    });

    $("button").on("click", function(){
        if(game_field[input_index_1 - 1][input_index_2 - 1] == 1){
            $("#col-"+input_index_1+"-"+input_index_2).text("x");
            $("#col-"+input_index_1+"-"+input_index_2).css({"color":"green", "font-weight":"bold"});

            $("#info").text("*** Success ***");
            $("#info").css("color", "green");

            successfulShots++;
            allShots++;

            game_field[input_index_1 - 1][input_index_2 - 1] = 2;

        }else if(game_field[input_index_1 - 1][input_index_2 - 1] == 0){
            $("#col-"+input_index_1+"-"+input_index_2).text("-");
            $("#col-"+input_index_1+"-"+input_index_2).css({"color":"red", "font-weight":"bold"});

            $("#info").text("*** Miss ***");
            $("#info").css("color", "red");

            allShots++;

        }else{
            $("#info").text("*** This location has already been hit ***");
            $("#info").css("color", "orange");

            allShots++;
        }

        if(successfulShots == requiredShots){
            $("#info").text("Well done! You completed the game in "+allShots+" shots");
            $("#info").css({"color":"darkblue", "font-style":"italic"});

            $("button").attr("disabled", "disabled");
        }
    });
});