Add author timeline

- application.js > make logo/author links clickable
- index.html, style.css > add timeline section

index.html

@@ -32,5 +32,8 @@ <h1><a href="#">Twittler</a></h1>
       </div>
     </div>
 
+    <!-- Timeline goes here -->
+    <div id="timeline"></div>
+
   </body>
 </html>

js/application.js

@@ -4,12 +4,18 @@ $(document).ready(function(){
    * Global Variables *
    ********************/  
 
+  var $logo = $('#logo');
+  var $logo_link = $logo.find('a');
+
   var $stream = $('#stream');
   var $stream_post = $stream.children('.post').first();
   var $stream_author = $stream_post.children('.author').children('a');
   var $stream_timestamp = $stream_post.children('.timestamp');
   var $stream_message = $stream_post.children('.message');
-
+  var streaming = false;
+
+  var $timeline = $('#timeline');
+
   var index = streams.home.length - 1;
   var interval;
 
@@ -33,13 +39,32 @@ $(document).ready(function(){
     $stream_message.text('');
   };
 
+  var resetStream = function(){
+    $stream_post.clearQueue(); // stop animations
+    clearInterval(interval);  // stops interval
+    $timeline.empty();  // deletes timeline posts
+    streaming = false;
+  };
+
+  var postTimeline = function(tweet){
+    var post = $('<div>').addClass('post').addClass('white');
+    var author = $('<div>').addClass('author').text('@' + tweet.user);
+    var timestamp = $('<div>').addClass('timestamp').text(formatTime(tweet.created_at));
+    var message = $('<div>').addClass('message').text(tweet.message);
+
+    post.append(author).append(timestamp).append(message);
+    $timeline.append(post);
+  };
+
   var showStream = function(){
 
+   resetStream();
+   streaming = true;
    $stream.fadeIn('slow');
 
    interval = setInterval(function show(){
     index = streams.home.length - 1;
-    while(index >= 0){
+    while(index >= 0 && streaming){
       var tweet = streams.home[index];
       $stream_post.fadeIn({
     	      duration: "slow", 
@@ -53,6 +78,32 @@ $(document).ready(function(){
     return show;
     }(), 10000);
   };
+
+  var showTimeline = function(){
+
+    resetStream(); 
+
+    // fades out stream
+    $stream.fadeOut("fast", function(){
+
+      // adds nodes to DOM
+      var author = $stream_author.text().replace('@', ''); 
+      _.each(streams.users[author],function(e){
+        postTimeline(e);
+      });    
+
+     // fades in timeline
+     $timeline.fadeIn("slow");
+    });
+  };
+
+
+  /******************
+   * Event Handlers *
+   ******************/ 
+
+  $logo_link.on('click', function () {if(!streaming) {showStream();}});
+  $stream_author.on('click', showTimeline);
 
   /****************
    * Default code *

style.css

@@ -74,6 +74,18 @@ h1 {
  transform: translateY(-50%);
 }
 
+
+/* Timeline */
+#timeline {
+  width:600px;
+  position:relative;
+  margin: 96px auto;
+  display:none;
+  z-index:2;
+}
+
+
+
 /* Post */
 
 .post {
@@ -107,3 +119,10 @@ h1 {
   opacity:1;
   font-size:16pt;
 }
+
+.white {
+  background:#fff;
+  color:#000;
+  margin-bottom:56px;
+}
+