html{
  font-family:arial;
  font-weight:300;
  color: #515151;
  font-size:13px;
}

body{
  padding:20px 5px;
}

#leader{
  margin: 0 0 40px 0;
}

.correct{
  background-color: #edd271;
  color:#917308;
}

.incorrect{
  background-color: #f2f2f2;
  color:#9e9e9e;
}

.count{
  position:relative;
  display:block;
  min-height:80px;
  width:30px;
  clear:both;
  margin:0 auto 5px auto;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/152171/oscar-icon.png');
  background-size:contain;
  background-repeat:no-repeat;
  .num{
    color:#fff;
    font-size:15px;
    padding-top:200%;
    width:30px;
    text-align:center;
    display:block;
  }
}

.freeze_table{
  &:first-child{
      text-align:center;
    }
}

#vertical_scrolling_div{
    display:inline-block;
    zoom: 1;
    *display:inline;
    width:130px;
    // height:300px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#freeze_container{
    display:inline-block;
    zoom: 1;
    *display:inline;
    vertical-align:top;
    width:100px;
}
#horizontal_scrolling_div{
    display:inline-block;
    zoom: 1;
    *display:inline;
    width: 500px;
    overflow-x:scroll;
    vertical-align:top;
}

#categories{
  td{
    padding: 5px 10px;
  }
}

.freeze_table{   
    z-index:2;
  td{
    min-width:120px;
  }
}


table{
  width:auto;
  padding:0 20px;
  border-collapse: collapse; 
  th{
    padding: 10px 0;
  }
  tr{
    border-bottom: 1px solid #ccc;
  }
  td{
    position:relative;
    height:105px;
    min-width:180px;
    padding:5px;
    background-color: #fff;
  }
  
  tr:hover td{
    // color: #e05b18;
  }
  &#categories td:hover{
    cursor:pointer;
    &:before{
      display: block;
      position:absolute;
      content: attr(data-cat);
      font-size:.85em;
      top:0;
      left:0;
      width:100%;
      color:#fff;
      background-color:#444242;
      padding:2px;
    }
    &:after{
      display: block;
      position:absolute;
      content: attr(data-winner);
      font-size:.75em;
      bottom:0;
      left:0;
      width:96%;
      color:#fff;
      background-color:#444242;
      padding:2px 5px;
      text-align:right;
    }
  }

}

#winners{
  display:none;
}

$(document).ready(function() {
  
  //  update this to reflect the number of categories 
  var categoryNumber = 23;
  
  function size(){
    var w = window.innerWidth;
    var hw = w-170;
    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);

  });
  
  
  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){
      console.log(entry[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") )
            $("#leader").append(group);
        });
    
        if ($("#winners .num").html() == categoryNumber){
           $("#leader .peeps").html("Winner: ");
         }
    
        if ($("#winners").data("num") == "0"){
           $("#leader").hide();
         }
      
    size();
    
 }); // end get

  
  
});