var streams = [
  "ESL_SC2",
  "OgamingSC2",
  "cretetion",
  "freecodecamp",
  "storbeck",
  "habathcx",
  "RobotCaleb",
  "noobs2ninjas",
  "syntag",
  "playoverwatch",
  "sonicofficial",
  "kongregate",
  "japanese_restream",
  "riotgames"
];

function getChannelInfo(type, name) {
  return "https://wind-bow.glitch.me/twitch-api/" + type + "/" + name;
}

function loadDefault(list) {
        $('#displayBox').empty();

  
  list.forEach(function(channel) {
    var game, status;
    // determine whether or not the channel is streaming
    $.getJSON(getChannelInfo("streams", channel), function(streamData) {
      //console.log("Checking " + streamData.stream + " for " + channel);
      //console.debug(streamData.stream === null);
      if (streamData.stream === null) {
        game = "Offline";
        status = "warning";
      } else if (streamData.stream === undefined) {
        game = "Account Closed";
        status = "danger";
      } else {
        game = "Playing: <strong>"+streamData.stream.game+"</strong>";
        status = "success";
      }
      
      //console.log("Displaying "+ channel + " as "+ game);

      // display channel information
      $.getJSON(getChannelInfo("channels", channel), function(infoData) {
        
        var img = infoData.logo != null ? infoData.logo : "http://lorempixel.com/150/150/";
        var url = infoData.url;
        var banner = infoData.profile_banner != null ? infoData.profile_banner : "http://via.placeholder.com/300x100?text=:(";
        var followers = infoData.followers;
        var display_name = infoData.display_name != null ? infoData.display_name : channel;
        //console.log(infoData);

        $("#displayBox").append(
          showChannel(status, banner, channel, display_name, img, game, url)
        );
      });
    });
  });
}

function showChannel(status, banner, channel, display_name, img, game, url) {
  
    var channelBox = '<div class="panel animated fadeInUp channelBox"><div class="alert-'+status+'">' +
    '<a href="'+url+'" target="_blank">' +
    '<div class="banner" style="background: url(\''+banner+'\'); background-size: cover;"></div>'+
    '<div><img src="'+img+'" alt="'+channel +'">' +
    display_name + "<div class=\"small gray\">" +game + "</div>" +
    "</a></div>";
    if (status == "success")
      channelBox += '<div class="status small text-center">Online Now</div>';
    channelBox += "</div></div>"
  return (channelBox);
}

function makeActive(box){
     $('.panel-heading ul li').removeClass("activeBorder");
    $(box).addClass("activeBorder");
  }

$('#showAll').on('click', function(){
    $('.channelBox .alert-warning').parent().fadeIn();
    $('.channelBox .alert-success').parent().fadeIn();
   makeActive(this);
  });
  $('#showOnline').on('click', function(){
    $('.channelBox .alert-warning').parent().fadeOut();
    $('.channelBox .alert-success').parent().fadeIn();
     makeActive(this);
  });
  $('#showOffline').on('click', function(){
    $('.channelBox .alert-success').parent().fadeOut();
    $('.channelBox .alert-warning').parent().fadeIn();
     makeActive(this);
  });
  
  $("form").on('submit', function(){
    event.preventDefault();
  });
  
  // Thanks https://stackoverflow.com/a/35045402
  function debounce(fn, duration) {
  var timer;
  return function(){
    clearTimeout(timer);
    timer = setTimeout(fn, duration);
  }
}
  
  $('#searchChannel').on('keyup', debounce(function(){
    var term = $('#searchChannel').val();


    if (term.length > 0){
      // search through our users and re-load
      var results = "";
      results = streams.filter(function(s){
        return s.toLowerCase().indexOf(term.toLowerCase()) > -1;
      });
      console.log("Results: "+results);
      loadDefault(results);   
    } else {
      loadDefault(streams);
      $('#showAll').click();
    }
  }, 500));

$(function() {
  loadDefault(streams);
});