$(document).ready(function(){

  // first set the global variables
  const tr = $("tr");
  const td = $("td");
  const table = $("#pixelCanvas");
  const grid = $("#makeButton");
  let action = false;
  //default color in color picker (not black but white)
  document.querySelector('input[type="color"]').value = '#ffffff'

  // function that creates grid with the values guven (width-height = columns-rows)
  function makeGrid(){

    let columns = $("#inputHeight").val();
    let rows = $("#inputWeight").val();

    //erases previous cells (td) from <table>
    table.children().remove();

    // if : defines maximum value
    if((columns<=50 && columns>=1) && (rows<=50 && rows>=1)){
      //creates table according to input
      for(let a = 0;  a < rows; a++){
        table.append("<tr></tr>");
        for(let b = 0; b < columns; b++){
          table.children().last().append("<td></td>");
          $("td").css('background', "#fff");
        }
      }
      // message when invalid input: width-height>50 or decimal
    } else {
      alert("Please choose the quantity of columns and rows of your GRID by typing numbers between 1-60 in both height and width input areas. Thanks!");
    }
  } // makeGrid ends

  // call makeGrid function on click
  grid.on("click",
    function(event){
    event.preventDefault();
    makeGrid();
  });


  // paint canvas(3 steps)

  // 1. on click
  table.on("mousedown", "td", function(event){
    event.preventDefault();
    let aColor = $("input[type='color']").val();
    $(this).css('background', aColor);
    action = true;
  });

  // 2. click and drag
  table.on("mouseover", "td", function(event){
    event.preventDefault();
    if(action === true){
      let aColor = $("input[type='color']").val();
      $(this).css('background', aColor);
      console.log("mouseover");
   }
  });

  // 3. stop action/painting when mousedown = false
  $("body").on("mouseup", function(){
      action = false;
      console.log("mouseup");
    });


    // when double clicked, cell's color becomes white/"erased"
  table.on("dblclick", "td", function(){
    $(this).css('background', "#fff");
  });

// Erase Grid Button
  $("#clearGrid").on("click",  function(event){
    event.preventDefault();
    console.log("gio");
    $("td").css('background', "#fff");
    });
//Fill Grid button, with the selected color
  $("#fillGrid")  .on("click", function(event){
    event.preventDefault();
    let aColor = $("input[type='color']").val();
    $("td").css("background", aColor);
  })



});