$(document).ready(function(){
  jQuery("time.timeago").timeago();
  jQuery.timeago(new Date());
  var $app = $('#app');
  $app.html('');

  var feed = $( '<div id="feed"></div>' );
  feed.appendTo("#app");

  var updateFeed = $('<button id="update-feed">Update Feed</button>');
  updateFeed.appendTo("#app");

    $("#feed").html("");
    var index = streams.home.length - 1;
    while(index >= 0){
      var tweet = streams.home[index];
      var $tweet = $('<div class="tweet"></div>');
      $tweet.text('@' + tweet.user + ': ' + tweet.message);
      $tweet.appendTo('#feed');
      index -= 1;
    }


  var renderFeed =  function(){
    $("#feed").html("");
    var index = streams.home.length - 1;
    while(index >= 0){
      var tweet = streams.home[index];
      var $tweet = $('<div class="tweet"></div>');

      $tweet.html('<p class="message">' + tweet.message +
      '</p><a class="username">@' + tweet.user +
      '</a> <img class="profile-photo" src="assets/icons/placeholder.png" />'
      + '<span class="timestamp">' + jQuery.timeago(tweet.created_at) + '</span>'
      + '<i class="comment far fa-comment"></i>'
      + '<i class="retweet far fa-retweet"></i>'
      + '<i class="like far fa-like"> </i>'
      + '<i class="share far fa-share"></i>'
      );
      $tweet.appendTo('#feed');
      index -= 1;
    }
  }

  $( "#update-feed" ).on("click", function() {
    renderFeed();
  });

  var renderFeed2 =  function(user){
    $(".tweet").text("");
  }

  $( ".username" ).on("click", function(e) {
    renderFeed2(streams.users[e.target.text]);
  })

});


// '<div class="comment"> <img src="assets/icons/placeholder.png" /> </div>'