$(window).load(function() {
   var loader = '<div class = "progress"><div class = "inderterminate"></div></div>';
   $('#display').load(loader);
 });

 $(document).ready(function() {
   var channels = ["ESL_SC2", "OgamingSC2", "freecodecamp", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
   var userName, displayName, userStatus, userGame, userLogo;
   /*Initialize Twitch.tv*/
   Twitch.init({
     clientId: 'mhh984lb7t5nbu6xkuxsrsvnrn5u1v7'
   }, function(error, status) {
     // the sdk is now loaded
     if (error) {
       console.log(error);
     }

   });
   userData(channels);

 });

 function parseResponse(data) {
   if (data.stream === 422) {
     return {
       'message': 'Twitch account is closed',
       'status': 'Account Closed'
     };
     //422 - to check closed account
   } else if (data.stream === null) {
     return {
       'message': 'Channel is Offline',
       'status': 'Offline'
     }; //null - to check offline account
   } else {
     return {
       'message': 'Channel is Online',
       'status': 'Online'
     };
   }
 }

 function userData(channels) {
   var streamsData;
   var channelsData;
   var wholeData = {};
   for (var i = 0; i < channels.length; i++) {
     (function(i) {
       $.getJSON('https://api.twitch.tv/kraken/streams/' + channels[i] + '?client_id=mhh984lb7t5nbu6xkuxsrsvnrn5u1v7', {}).done(function(data) {
         streamsData = parseResponse(data);
         wholeData.message = streamsData.message;
         wholeData.status = streamsData.status;

       });
       $.getJSON('https://api.twitch.tv/kraken/channels/' + channels[i] + '?client_id=mhh984lb7t5nbu6xkuxsrsvnrn5u1v7', function(wholeData, data) {
         wholeData.status = streamsData.status;
         displayResult(wholeData, data);
       });
     })(i);
   }

 }

 function displayResult(wholeData, data) {
   var userName = wholeData.name;
   var displayName = wholeData.display_name;
   var userGame = wholeData.game;
   var userLogo = wholeData.logo;
   var twitchLink = wholeData.url;
   var userStatus = wholeData.status;

   if (userStatus === 'Offline') {
     var html = '<div class = "card horizontal cardBack"><div class = "card-image myImg"> ';
     html += '<img src = "' + userLogo + '" alt = "User Logo" /></div>';
     html += '<div class = "card-stacked center-align"><div class = "card-content row"><span class = "col s1 offset-s2">' + displayName + '</span></a>';
     html += '<span class = "col s2 offset-s2">' + userStatus + '</span></div>';
     html += '<div class = "card-action center-text"><a href = "https://twitch.tv/' + userName + ' " target = "_blank">Link to channel</a></div></div>'
     $('.offline').append(html);
   } else
   if (userStatus === 'Online') {
     var html = '<div class = "card horizontal cardBack"><div class = "card-image myImg"> ';
     html += '<img src = "' + userLogo + '" alt = "User Logo"/></div>';
     html += '<div class = "card-stacked center-align"><div class = "card-content row"><span class = "col s1 offset-s2">' + displayName + '</span></a>';
     html += '<span class = "col s2 offset-s2">' + userStatus + '</span>';
     html += '<span class = "col s3 offset-s1">Streaming :  ' + userGame + '</span></div>';
     html += '<div class = "card-action"><a href = "https://twitch.tv/' + userName + ' " target = "_blank">Link to channel</a></div></div>'

     $('.online').append(html);
   }

 }

 $("#online").click(function() {
   $(".offline").hide();
   $(".online").show();
 })
 $("#offline").click(function() {
   $(".online").hide();
   $(".offline").show();
 })
 $("#all").click(function() {
   $(".online").show();
   $(".offline").show();
 });