// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

ready(() => {
  var play_cells = document.getElementsByClassName('play-cell');

  Array.prototype.forEach.call(play_cells, function(item, i){
    item.addEventListener('click', (event) => {
      var element = event.target;
      element.classList.toggle('selected');
    });
  });

  Array.prototype.forEach.call(play_cells, function(item, i){
    item.addEventListener('mouseover', (event) => {
      var element = event.target;
      var column = element.dataset.column;
      var row = element.dataset.row;
      var cells = document.querySelectorAll(`.clue-cell[data-column='${column}'], .clue-cell[data-row='${row}']`);
      Array.prototype.forEach.call(cells, function(item, i){
        item.classList.add('highlight');
      });
    });
  });

  Array.prototype.forEach.call(play_cells, function(item, i){
    item.addEventListener('mouseout', (event) => {
      var element = event.target;
      var column = element.dataset.column;
      var row = element.dataset.row;
      var cells = document.querySelectorAll(`.clue-cell[data-column='${column}'], .clue-cell[data-row='${row}']`);
      Array.prototype.forEach.call(cells, function(item, i){
        item.classList.remove('highlight');
      });
    });
  });


  var submit_button = document.getElementById('submit_board');

  // Only want to run this if we have a submit_button on the page :(
  if(submit_button){
    submit_button.addEventListener('click', (event) => {
      var boxes = []
      var selecteds = document.getElementsByClassName('selected');

      Array.prototype.forEach.call(selecteds, function(element, i){
        var row = element.dataset.row;
        var column = element.dataset.column;
        boxes.push({row: row, column: column});
        console.log(boxes);
      });

      console.log(boxes);

      $.ajax({
        type: "POST",
        url:  location.href+'/check_solution.json',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify({boxes: boxes}),
        success: (response) => {
          console.log(response);
          var element = document.getElementsByClassName('board-status')[0]
          console.log(response);
          element.textContent = response['message'];
        }
      });
    });
  }
});

ready();

  /*
   * :sadface:, can't use fetch because 
     window.fetch(location.href + '/check_solution.json' , {
     method: 'post',
     body: JSON.stringify({boxes})
     }).then((response) => {
     response = response.json();
     console.log(response);
     $('.board-status').text(data['message'])
     }).catch((err) => {
     });
     */


@@ -154,155 +154,1088 @@
 ion 
-ready(f
+puzzle_submission() %7B%0A  var submit_button = document.getElementById('submit_board');%0A%0A  // Only want to run this if we have a submit_button on the page :(%0A  if(submit_butto
 n)
- 
 %7B%0A  
-if (document.readyState != 'loading')%7B%0A    fn();%0A  %7D else %7B%0A    document.addEventListener('DOMContentLoaded', fn);%0A  %7D%0A%7D%0A%0Aready(() =%3E
+  submit_button.addEventListener('click', (event) =%3E %7B%0A      var boxes = %5B%5D%0A      var selecteds = document.getElementsByClassName('selected');%0A%0A      Array.prototype.forEach.call(selecteds, function(element, i)%7B%0A        var row = element.dataset.row;%0A        var column = element.dataset.column;%0A        boxes.push(%7Brow: row, column: column%7D);%0A        console.log(boxes);%0A      %7D);%0A%0A      console.log(boxes);%0A%0A      $.ajax(%7B%0A        type: %22POST%22,%0A        url:  location.href+'/check_solution.json',%0A        dataType: 'json',%0A        contentType: 'application/json',%0A        data: JSON.stringify(%7Bboxes: boxes%7D),%0A        success: (response) =%3E %7B%0A          console.log(response);%0A          var element = document.getElementsByClassName('board-status')%5B0%5D%0A          console.log(response);%0A          element.textContent = response%5B'message'%5D;%0A        %7D%0A      %7D);%0A    %7D);%0A  %7D%0A%7D%0A%0Afunction board_interaction()
  %7B%0A 
@@ -2447,1048 +2447,162 @@
 %7D);%0A
+%7D
 %0A%0A
-  var submit_button = document.getElementById('submit_board');%0A%0A  // Only want to run this if we have a submit_button on the page :(%0A  if(submit_butto
+function ready(f
 n)
+ 
 %7B%0A  
-  submit_button.addEventListener('click', (event) =%3E %7B%0A      var boxes = %5B%5D%0A      var selecteds = document.getElementsByClassName('selected');%0A%0A      Array.prototype.forEach.call(selecteds, function(element, i)%7B%0A        var row = element.dataset.row;%0A        var column = element.dataset.column;%0A        boxes.push(%7Brow: row, column: column%7D);%0A        console.log(boxes);%0A      %7D);%0A%0A      console.log(boxes);%0A%0A      $.ajax(%7B%0A        type: %22POST%22,%0A        url:  location.href+'/check_solution.json',%0A        dataType: 'json',%0A        contentType: 'application/json',%0A        data: JSON.stringify(%7Bboxes: boxes%7D),%0A        success: (response) =%3E %7B%0A          console.log(response);%0A          var element = document.getElementsByClassName('board-status')%5B0%5D%0A          console.log(response);%0A          element.textContent = response%5B'message'%5D;%0A        %7D%0A      %7D
+if (document.readyState != 'loading')%7B%0A    fn();%0A  %7D else %7B%0A    document.addEventListener('DOMContentLoaded', fn
 );%0A  
-  %7D);%0A  %7D%0A%7D);
+%7D%0A%7D
 %0A%0Aready(
 );%0A%0A
@@ -2601,350 +2601,73 @@
 ady(
-);%0A%0A  /*%0A   * :sadface:, can't use fetch because %0A     window.fetch(location.href + '/check_solution.json' , %7B%0A     method: 'post',%0A     body: JSON.stringify(%7Bboxes%7D)%0A     %7D).then((response) =%3E %7B%0A     response = response.json();%0A     console.log(response);%0A     $('.board-status').text(data%5B'message'%5D)%0A     %7D).catch((err) =%3E %7B%0A     %7D);%0A     */%0A
+() =%3E %7B%0A  board_interaction()%0A    puzzle_submission();%0A%7D);%0A%0Aready();
 %0A

Refactor javascript around a little.