<div class="row-fluid">
  <div class="span12">
    <div id="listId">
      <input type="text" class="search" placeholder="Search...">
      <ul class="pagination"></ul>
      <ul id="filter"></ul>
      <ul class="list" id="resources-container">
      </ul>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.min.js"></script>
<script type="text/javascript" src="//cdn2.hubspot.net/hubfs/595438/js/list.min.js"></script>
<script type="text/javascript" src="//cdn2.hubspot.net/hubfs/595438/js/list.pagination.min.js"></script>
<script>

var listObj;

function to_json(workbook) {
    var json;
    workbook.SheetNames.forEach(function(sheetName) {
		json = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
	});
	return json
}

function process_wb(wb) {
	var output = to_json(wb);
    list_html = '';
    filter_list = '';
    var categories = [];
    $(output).each(function(){
        categories.push(this.category);
        list_html += '<li><a href="' + this.url + '" target="_blank">';
        if(this.img){
            list_html += '<img src="'+this.img+'" alt="'+this.title+'"/>';
        }
        list_html += '<h3 class="name fontSize18 marginB10">'+ this.title+'</h3>';
        
        if(this.category){
            list_html += '<span class="category">' + this.category + '</span></a></li>';
        }
    });
    var unique_categories = [];
      $.each(categories, function(i, e) {
        if ($.inArray(e, unique_categories) == -1) unique_categories.push(e);
      });

    $.each(unique_categories, function(){
        filter_list += "<li>" + this + "</li>";
    });
    document.getElementById('resources-container').innerHTML = list_html;
    document.getElementById('filter').innerHTML = filter_list;
    
    var options = {
        valueNames: [ 'name', 'description' ,'category' ],
        page: 8,
        plugins: [
          ListPagination({})
        ]
      };
    
    listObj = new List('listId', options);
}

$(document).ready(function(){
  var url = "";

  var oReq;
  if(window.XMLHttpRequest) oReq = new XMLHttpRequest();
  else if(window.ActiveXObject) oReq = new ActiveXObject('MSXML2.XMLHTTP.3.0');
  else throw "XHR unavailable for your browser";

  oReq.open("GET", url, true);

  if(typeof Uint8Array !== 'undefined') {
    oReq.responseType = "arraybuffer";
    oReq.onload = function(e) {
      if(typeof console !== 'undefined') console.log("onload", new Date());
      var arraybuffer = oReq.response;
      var data = new Uint8Array(arraybuffer);
      var arr = new Array();
      for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
      var wb = XLSX.read(arr.join(""), {type:"binary"});
      process_wb(wb);
    };
  } else {
    oReq.setRequestHeader("Accept-Charset", "x-user-defined");
    oReq.onreadystatechange = function() { if(oReq.readyState == 4 && oReq.status == 200) {
      var ff = convertResponseBodyToText(oReq.responseBody);
      if(typeof console !== 'undefined') console.log("onload", new Date());
      var wb = XLSX.read(ff, {type:"binary"});
      process_wb(wb);
    } };
  }

  oReq.send();

  $('#filter').on('click', 'li', (function(){
    filter_text = $(this).text();
    filter_text = filter_text.replace(/&/g, "&amp;")
    active = $(this).hasClass('active');
    $('#filter li').removeClass('active');

    if(!active){
      $(this).addClass('active');
    }
    if($(this).hasClass('active')){
      listObj.filter(function(item) {

        if (item.values().category ==filter_text) {
          return true;
        } else {
          return false;
        }
      });
    }else{
      listObj.filter();
    }

  }));
});
</script>