<div class="container clear-fix">

   <!-- ERASE BUTTON -->
  <button class="size-button erase-button" id="eraser" value="" onClick="clearCanvas()">
    <i class="fas fa-trash-alt"></i>
  </button>
  <button class="size-button photo-button" onclick="captureA()">
   <i class="fas fa-camera"></i>
  </button>
  
  <!-- COLOR -->
  <table border="0" class="colorPalette" id="no-border">
    <tr>
      <td><div class="colorSelection" id="red" value="#FF0000"></div></td>
      <td><div class="colorSelection" id="blue" value="#0000FF"></div></td>
      <td><div class="colorSelection" id="orange" value="#FFA500"></div></td>
      <td><div class="colorSelection" id="white" value="#FFFFFF"></div></td>
      <td><div class="colorSelection" id="green" value="#00FF00"></div></td>
      <td><div class="colorSelection" id="yellow" value="#FFFF00"></div></td>
      <td><div class="colorSelection" id="pink" value="#FF00FF"></div></td>
      <td><div class="colorSelection" id="purple" value="#8A2BE2"></div></td>
    </tr>
  </table>
  <!--   <input type="color" id="colorPicker"> -->
 
   <!-- CANVAS AREA -->
  <div class="canvas-area">
    <table id="pixelCanvas"></table>
  </div>
  
  <!-- LOGO PHARE -->
 <div class="projectLogo">
    <img src="https://phare-lighthouse.com/wp-content/uploads/2023/12/LePhare_Logo_litebrite04.png" alt="Le Phare">
  </div>

   <!-- POWER BUTTON -->
  <button class="size-button blink-button" id="blinker" onClick="makeGrid()"><i class="fas fa-power-off"></i></button>
</div>

* { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}

/*.clear-fix:after, .clear-fix:before {
    content: "";
    display: table;
    clear: both;
}*/

body {
    background-color: #1D4289;
}

p {
  color: #ccc;
  font: bold 10px verdana, sans-serif;
  text-align: center;
}

.container {
    margin: 30px auto;
    background: #fff;
    color: #000;
    width: 750px;
    height: 100%;
    border: 3px solid #fff;
    border-radius: 3%;
    border-style: outset;
    padding: 5px;
    display: grid;
    grid-template-columns: 22px 153px auto 153px 22px;
    grid-template-rows: 40px auto 60px;
    grid-column-gap: 0px;
    grid-row-gap: 5px;
    grid-template-areas: 
        "header header header header"
        "main" "main" "main" "main"
        "footer footer footer footer";
    /* Fixes issues with Firefox */
   -webkit-user-select: none; /* Chrome/Safari */        
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* IE10+ */
}

/* COLOR PALETTE */
 #no-border td {
    border-style: hidden;
}

.colorPalette {
    grid-area: "header";
    justify-self: start;
    align-self: center;
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
}

#colorPicker, .colorSelection {
    background-color: #BDBBBD;
    width: 25px;
    height: 25px;
    border: 3.2px solid #444;
    border-radius: 100%;
    border-style: outset;  
}

#colorPicker, .colorSelection:hover, .blink-button:hover, .erase-button:hover, .photo-button:hover{
    cursor: pointer;
}
/*
#colorPicker {
    width: 90px ;
    height: 25px;
}
*/
#white {
    background-color: #ffffff;
}

#red {
    background-color: #ff0000;
}

#blue {
    background-color: #0000FF;
}

#orange {
    background-color: #FFA500;
}

#green {
    background-color: #00FF00;
}

#lime {
    background-color: #00FF00;
}

#yellow {
    background-color: #FFFF00;
}

#pink {
    background-color: #FF00FF;
}

#purple {
    background-color: #800080;
}
/*  
h2 {
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}
*/
/* CANVAS */
.canvas-area {
    background-color: #272729;
    width: 692px;
    height: 400px;
    border: 4px solid #BABEBE;
    border-radius: 3%;
    border-style: inset;
    grid-column-start: 2;
    grid-column-end: five;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-area: "main";
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#submit-button, .erase-button, .blink-button, .photo-button{
  background-color: #FFF;
  color: #000;
  margin: 0;
  padding: 10px;
  border-radius: 100%;
  border: 3.2px solid #444;
  border-style: inset;
}

i {
  font-size: 2em;
}

.blink-button {
  background-color: #444;
  color: #fff;
  margin: 20px 0 0 0;
  grid-area: "footer";
  justify-self: center;
  align-self: end;
  grid-column-start: 7;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 3;
  outline: none;
}

.erase-button {
  background-color: #444;
  color: #fff;
  font-size: 8px;
  padding: 8px;
  grid-area: "header";
  justify-self: center;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 1;
  outline: none;
}

.photo-button {
  background-color: #444;
  color: #fff;
  font-size: 8px;
  padding: 8px;
  grid-area: "header";
  justify-self: center;
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 1;
  outline: none;
}

.projectLogo {
  margin: 0;
  justify-self: center;
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 3;
  grid-row-end: 3;
  outline: none;
}
/*
#sizePicker {
  grid-area: "header";
  justify-self: end;
  align-self: center;
  grid-column-start: 6;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 1;
}

#inputWidth, #inputHeight {
  background-color: #244218;
  height: 1.4em;
  width: 2em;
  border-radius: 15%;
  color: #FFF;
  text-align: center;
  font-size: 25px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
} 
*/
#pixelCanvas:hover {
  cursor: crosshair;
}

table,
tr,
td {
    border-color: transparent;
    border-radius: 100%;
}

table {
    border-collapse: collapse;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}
/* CANVAS TABLE CELLS */
div .cell-container {
  height: 20px;
  width: 20px;
  border: 1px solid #535353;
  border-radius: 100%;
}

div .circle-cell {
  height: 20px;
  width: 20px;
  border: 0;
  border-radius: 100%;
  overflow: hidden;
}

input[type=number] {
    width: 4em;
}

// (A) USING HTML2CANVAS
function captureA () {
  html2canvas(document.body).then(canvas => {
    let a = document.createElement("a");
    a.download = "allumez_votre_coeur_denfant.png";
    a.href = canvas.toDataURL("image/png");
    a.click(); // MAY NOT ALWAYS WORK!
  });
}

// WIP by beatrize
/*
  - Removed form input for height and width and just made the power button autopopulate the grid.
  - Made power button and screen light up to indicate that it turns on. 
  - Replaced eraser icon with a garbage can so people know they're clearing the entire grid lol.
*/

  let canvas = $("#pixelCanvas"); // targets canvas
  var globalColor;
  let isClicked = false;

  // creates grid
  function makeGrid() {
 /* event.preventDefault(); // prevents reload
    const heightInput = $("#inputHeight").val(); // gets user input value from #inputHeight
    const widthInput = $("#inputWidth").val(); // gets user input value from #inputWidth

    canvas.empty(); // resets canvas */

      for (let i = 0; i < 16; i++) {
      // creates rows and columns
        const row = canvas.append("<tr></tr>"); // rows
      for (let j = 0; j < 29; j++) {
        row.children().last().append('<td><div class="cell-container"><div class="circle-cell"></div><div></td>'); // appends columns with divs
        }
      }
    }

   // Selects color
  $(".colorSelection").on("click", function() {
    let color = $(this).attr("value");
    window["globalColor"] = color;
  });

  canvas.on("click", ".circle-cell", function(evt) {
    isClicked = false;
     $(this).css("background", globalColor);
  });
    canvas.on("click mousedown mouseenter", ".circle-cell", function(evt) {
    if (evt.buttons == 1) {
      $(this).css("background", globalColor);
   }
    
  });

  // erases individual pixels
  canvas.on("dblclick", ".circle-cell", function(evt) {
  $(this).css("background", "");
  });

  // quick erase drag function
  canvas.on("click mouseover", ".circle-cell", function(evt) {
  if (evt.shiftKey) {
//    if (evt.buttons === 1) { 
      $(this).css("background", "");
// } 
    }
  });

  // clears entire canvas
  function clearCanvas() {
    canvas.find(".circle-cell").css("background-color", "");
  }

  // animation
  $("#blinker").on("click", function() {
    $(this).toggleClass("toggled");
      
    if ($(this).hasClass("toggled")) {
     
      let tl = new TimelineMax()
      // lights up color cells
      tl.fromTo(
        ".circle-cell",
        0.7,
        {
          ease: Power3.easeIn,
          opacity: 1,
          pause: false
        },
        {
          ease: Power3.easeIn,
          opacity: 0.6,
          repeat: -1,
          repeatDelay: 0.3
        }, 0.5
      )
      // lights up power button
      tl.fromTo(
      ".blink-button",
      0.5,
      {
        ease: Power1.easeOut,
        css: { color:"#fff" },
        reversed: true
      },
      {
        ease: Power1.easeOut,
        css: { color: "#3CFF2A" }
      }, 0.1
      )
      // lights up canvas area
       tl.fromTo(
      ".canvas-area",
      1,
      {
        ease: RoughEase.ease.config({ 
          template: 
            Power0.easeNone, 
            strength: 1.5, 
            points: 20, 
            taper: "none", 
            randomize: true,
            clamp: true}),
        backgroundColor: "#272729",
        reversed: true
      },
      {
        ease: RoughEase.ease.config({ 
          template: 
            Power0.easeNone, 
            strength: 1.5, 
            points: 20, 
            taper: "none", 
            randomize: true,
            clamp: true}),
        backgroundColor: "#2F2E22"
      }, 0.1
      )
      /* lights up input areas
       tl.fromTo(
      ["#inputHeight", "#inputWidth"],
      0.5,
      {
        ease: Power4.easeIn,
        backgroundColor: "#244218",
        reversed: true
      },
      {
        ease: Power4.easeIn,
        backgroundColor: "#3A7714"
      }, 0.1
      ); */
    } else {
        // kills all tweens and empties canvas
        TweenMax.killAll(true);
     /* TweenMax.reverse(); */
    /*  $("#sizePicker").trigger("reset"); */
        canvas.empty();
    }
  });