$(document).ready(function(){
  var streamers = ["ESL_SC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "OgamingSC2", "RobotCaleb", "noobs2ninjas"];
  var streamInfo = {};
  var count = 0; /* counts number of times ajax call is made to fill object.*/
  
  function updateStreamers(){
    /* because ajax is asyncronous and needs to be called 8 times, check
    the array is full before going further */
    if(count != 8){
      return;
    }
    console.log(streamInfo);
    count = 0;
    var html = "";
    for(var i = 0; i < 8; i++ ){
      var username = streamers[i];
      
      if(streamInfo[username].stream != null){
        html += '<div class="profile">';
        html += '<img src="' + streamInfo[username].stream.channel.logo + '" /></div>';
        html += '<div class="username">' + streamInfo[username].stream.channel.display_name + '</div>';
        html += '<div class="game"><span class="title">Game: </span>' + streamInfo[username].stream.channel.game + '<p class="streaming"><span class="title">Streaming: </span>'+ streamInfo[username].stream.channel.status +'</p>';
        html += '<div class="streamlink"><a href="https://www.twitch.tv/' + username + '" target="_blank">visit <i class="fas fa-angle-right"></i></a></div>';
        html += '<p class="status">Online</p>';
        /*create class/id targets from variable */
        var idclass = '.stream'+ (i + 1);
        var idbox = '#box' + (i + 1);
        $(idclass).html(html);
        html = '';
        $(idbox).addClass('online');
      } /*end if online*/
      else {
        html += '<div class="profile">';
        html += '<img src="https://res.cloudinary.com/nhast25cs/image/upload/v1520368131/twitchApp/offline.png" /></div>';
        html += '<div class="username">' + username + '</div>';
        html += '<div class="streamlink"><a href="https://www.twitch.tv/' + username + '" target="_blank">visit <i class="fas fa-angle-right"></i></a></div>';
        html += '<p class="status">Offline</p>';
        
        var idclass = '.stream'+ (i + 1);
        var idbox = '#box' + (i + 1);
        
        $(idclass).html(html);
        html = '';
        $(idbox).addClass('offline');
      } /*end else offline*/
    } /*end for*/
  }
  
  function getStreamers(){
    streamers.forEach(function(userid){
    var twitchurl = "https://wind-bow.glitch.me/twitch-api/streams/" + userid /*+ "?callback=?"*/;
  
    $.ajax( {
      type: "GET",
      url: twitchurl,
      dataType: 'json',
      
      success: function(data) {
        streamInfo[userid] = data;
        count ++;
      },
      error: function(err) { console.log("Failed to get stream..."+userid); console.log(err); },
     complete: updateStreamers
      } ); /* end ajax */
    }); /* end foreach*/
    //console.log(streamInfo);
  } /*end getStreamers*/
  
  getStreamers(); /*call the api*/
  
  /* Show or Hide streamers who are online or offline */
  /*button listeners for online/offline switch*/
  $('#btn-online').on("click", function(){
    $('.offline').hide(700);
    $('.online').show(700);
  } );
  $('#btn-offline').on("click", function(){
    $('.offline').show(700);
    $('.online').hide(700);
  } );
  $('#btn-all').on("click", function(){
    $('.offline').show(700);
    $('.online').show(700);
  } );
  $('#btn-reload').on("click", function() {
    location.reload(true);
  } );
});