$(document).ready(function() {
  
  //  update this to reflect the number of categories 
  var categoryNumber = 23;
  
  function size(){
    var w = window.innerWidth;
    var hw = w-200;
    function updateheight() {
       var h = $("#horizontal_scrolling_div").height();
       $("#vertical_scrolling_div").css('height',h);
    }
    function updatewidth() {
      $("#horizontal_scrolling_div").css('width',hw);
      updateheight();  
    }
    updatewidth();
  }
  
  var resizeTimer;

  $(window).on('resize', function(e) {
    
    $("#horizontal_scrolling_div").hide();
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      size();
      $("#horizontal_scrolling_div").show();   
    }, 250);
    
    // updatewidth();
    // updateheight();

  });
  
  
  var gsheet = $('body').data("gsheet");
  var tab = $('body').data("sheet");
  var gshort =gsheet.substring(gsheet.lastIndexOf("/d/")+3,gsheet.lastIndexOf("/"));
  var jsondata = 'https://script.google.com/macros/s/AKfycbzGvKKUIaqsMuCj7-A2YRhR-f7GZjl4kSxSN1YyLkS01_CfiyE/exec?id='+gshort+'&sheet='+tab;
            
  $.getJSON(jsondata, function(data) {
    var entry = data.records;
    entry.sort((a, b) => (a.Your_Name > b.Your_Name) ? 1 : -1)
    var entries = entry.length;
    
    var header = entry[0];
    var categoryList = Object.entries(header).slice(3,categoryNumber+3).map(entry => entry[0]);
    var categories = [];
    $(categoryList).each(function(i){
        categories.push('<th>'+categoryList[i]+'</th>');
      });
    var categoryHeader = categories.join().replace(/\_+/g, ' ');
    $("#categories").append(categoryHeader);
    
    var people = '';
    var submissionList = '';
    
    // Compile entries
    $(entry).each(function(i){
      var choices = Object.entries(entry[i]).slice(3,categoryNumber+3).map(entry => entry[1]);
      
      var subid = entry[i].Your_Name;
      subid = subid.replace(/\s+/g, '');
      
      var person = ('<td>'+this.Your_Name+'</td>')
      var categories = [];
      $(choices).each(function(i){
        categories.push('<td>'+choices[i]+'</td>');
      });
      
      var submission = categories.join();
      
      var newperson = '<tr id="'+subid+'" class="submission" data-name="'+this.Your_Name+'">'+person+'</tr>';
      
      var newlist = '<tr id="'+subid+'" class="submission" data-name="'+this.Your_Name+'">'+submission+'</tr>';
      
      people += newperson;
      submissionList += newlist;
    });
    
    // Add all entries to table
    $("#left_table").append(people);
    $("#categories").append(submissionList);
    
    $("#categories td").each(function(){

      var submitted = $(this).text();
      var check = $(this).index();
      var winner = $('#categories #winners td:eq('+check+')').text();
      
         if (winner !== ""){
            if (submitted == winner){
              $(this).addClass("correct");
            }else{
              $(this).addClass("incorrect");
            }
         }
      

        var category = $('#categories th:eq('+check+')').text(); 
        $(this).attr("data-cat", (category));

        if ($('#categories #winners td:eq('+check+')').text() !=="") {
          var winner = $('#categories #winners td:eq('+check+')').text();
          $(this).attr("data-winner", winner);
        }
   

    });
    
    //  count correct
    $(".freeze_table tr").each(function(){
      var id = $(this).attr("ID");
      var count = $('#categories #'+id).find(".correct").length;
      countBlock = '<span class="count"><span class="num">'+count+'</span></span>';
      $('#'+id).find('td:eq(0)').prepend(countBlock);
      
      $('#'+id).attr("data-num", count);
    });
    
    var highestNum = -1;
    var windex = $('#winners').index();

    $("tr").each(function(){
      var check = $(this).index();
      
     if (check == 0 || check == windex){   
     }else{
        var num = +this.getAttribute("data-num") ;
        if (num > highestNum) 
            highestNum = num;
     }
    }).each(function(){
      var check = $(this).index();
      
      var leader = $(this).data("name");
      var number = $(this).data("num");
      var group = '<span>'+leader+' ('+number+') </span>';
        if (highestNum === +this.getAttribute("data-num") && $(this).attr("ID") != 'winners' )
            $("#leader").append(group);
        });
    
        if ($("#winners .num").html() == categoryNumber){
           $("#leader .peeps").html("Winner: ");
         }
    
        if ($("#winners").data("num") == "0"){
           $("#leader").hide();
         }
      
    size();
    
 }); // end get

  
  
});