diff -r 7d9c576bfaac -r c28048fb63b4 tweetcast/nodejs/client/js/script.js
--- a/tweetcast/nodejs/client/js/script.js	Mon Oct 17 17:40:58 2011 +0200
+++ b/tweetcast/nodejs/client/js/script.js	Tue Oct 18 16:19:08 2011 +0200
@@ -1,10 +1,11 @@
 var socket,
+    paper,
     tweetData = {
         "tweetcount" : 0,
         "position" : -1,
         "zoomLevel" : 3,
         "timeLevel" : 2
-    }
+    },
     zoomLevels = [
         {
             "description" : "160 tweets per page",
@@ -26,7 +27,14 @@
             "className" : "full",
             "displayCount" : 6
         }
-    ];
+    ],
+    colors = {
+        'positive' : "#1D973D",
+        'reference' : "#C5A62D",
+        'negative' : "#CE0A15",
+        'question' : "#036AAE"
+    },
+    timeWindow;
 
 function tweetToHtml(tweet) {
 	html = '<li class="tweet ' + zoomLevels[tweetData.zoomLevel].className;
@@ -73,33 +81,106 @@
 	return html;
 }
 
-function getTweets() {
+function displayTweets() {
     var to = tweetData.position + 1,
         from = Math.max(0, to - zoomLevels[tweetData.zoomLevel].displayCount);
-    socket.emit('getTweets',{ "from": from, "to": to });
+    socket.emit('getTweets',{ "from": from, "to": to, "callback" : "display" });
 }
 
 function setZoom(level) {
     tweetData.zoomLevel = Math.max(0, Math.min( zoomLevels.length - 1 , level ) );
-    getTweets();
+    displayTweets();
+}
+
+function setTimeZoom(level) {
+    tweetData.timeLevel = Math.max(0, Math.min( 3, level ));
+    getTimeline();
+}
+
+function getTimeline() {
+    socket.emit('getTimeline',{"level":tweetData.timeLevel});
+}
+
+function showTimeWindow() {
+    if (timeWindow) {
+        timeWindow.remove();
+        timeWindow = null;
+    }
+    if (tweetData.tweetsOnDisplay && tweetData.timelineOnDisplay) {
+        var dtfintl = new Date ( tweetData.timelineOnDisplay[ tweetData.timelineOnDisplay.length - 1 ].end ),
+            dtdebtl = new Date ( tweetData.timelineOnDisplay[0].start ),
+            dtfintw = new Date( tweetData.tweetsOnDisplay[0].created_at ),
+            dtdebtw = new Date( tweetData.tweetsOnDisplay[ tweetData.tweetsOnDisplay.length - 1 ].created_at ),
+            scaleY = 600 / ( dtfintl - dtdebtl );
+        timeWindow = paper.rect( 0, scaleY * ( dtfintl - dtfintw ), 600, scaleY * ( dtfintw - dtdebtw )).attr({"stroke":"#000080","fill":"#8080ff","fill-opacity":.2});
+    }
 }
 
 $(document).ready(function() {
+    paper = Raphael("timeline", 160, 600);
     socket = io.connect('http://' + S_IO_HOST + ':' + S_IO_PORT );
     socket.on('tweetSummary', function (data) {
         if (tweetData.position == tweetData.tweetcount - 1) {
             tweetData.position = data.tweetcount - 1;
-            getTweets();
+            displayTweets();
+            getTimeline();
         }
         tweetData.tweetcount = data.tweetcount;
     });
     socket.on('tweets', function (data) {
-        tweetData.tweetsOnDisplay = data;
-        data.reverse();
-        html = '';
-        for (var i in data) {
-            html += tweetToHtml(data[i]);
+        switch (data.callback) {
+            case "display":
+                tweetData.tweetsOnDisplay = data.tweets;
+                tweetData.tweetsOnDisplay.reverse();
+                html = '';
+                for (var i in tweetData.tweetsOnDisplay) {
+                    html += tweetToHtml(tweetData.tweetsOnDisplay[i]);
+                }
+                $("#tweetlist").html(html);
+                showTimeWindow();
+                break;
+        }
+    });
+    socket.on('timeline', function (data) {
+        tweetData.timelineOnDisplay = data.timeline;
+        paper.clear();
+        timeWindow = null;
+        var max = 0;
+        for (var i in data.timeline) {
+            max = Math.max(max, data.timeline[i].tweets.length);
+        }
+        var scaleX = 160 / max,
+            scaleY = 600 / data.timeline.length,
+            tmptw = [];
+        for (var i = 0; i < tweetData.tweetcount; i++) {
+            tmptw.push({});
         }
-        $("#tweetlist").html(html);
+        for (var i = 0; i < data.timeline.length; i++) {
+            for (var j = 0; j < data.timeline[i].tweets.length; j++) {
+                var coul = "#585858";
+                for (var k in data.timeline[i].annotations) {
+                    if (data.timeline[i].annotations[k].indexOf(data.timeline[i].tweets[j]) != -1) {
+                        coul = colors[k];
+                    }
+                }
+                tmptw[data.timeline[i].tweets[j]].y = i;
+                tmptw[data.timeline[i].tweets[j]].x = j;
+                paper.rect(scaleX * j + (scaleX > 3 ? .5 : 0), 600 - ((i+1) * scaleY) + (scaleY > 3 ? .5 : 0), scaleX - (scaleX > 3 ? 1 : 0), scaleY - (scaleY > 3 ? 1 : 0)).attr({"stroke":"none","fill":coul});
+            }
+        }
+        for (var i = 0; i < data.arcs.length; i++) {
+            var x1 = scaleX * (tmptw[data.arcs[i].from].x + .5),
+                x2 = scaleX * (tmptw[data.arcs[i].to].x + .5),
+                y1 = 600 - scaleY * (tmptw[data.arcs[i].from].y + .5),
+                y2 = 600 - scaleY * (tmptw[data.arcs[i].to].y + .5),
+                d = "M"+x1+" "+y1+"C";
+            if (y1 == y2) {
+                d += x1+" "+(y1 - 60)+" "+x2+" "+(y2 - 60);
+            } else {
+                d += (x1 + 60)+" "+y1+" "+(x2 + 60)+" "+y2;
+            }
+            paper.path(d+" "+x2+" "+y2);
+        }
+        showTimeWindow();
     });
 });
\ No newline at end of file