paper,

    },

    ],

    colors = {

        'positive' : "#1D973D",

        'reference' : "#C5A62D",

        'negative' : "#CE0A15",

        'question' : "#036AAE"

    },

    timeWindow;

function displayTweets() {

    socket.emit('getTweets',{ "from": from, "to": to, "callback" : "display" });

    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});

    }

    paper = Raphael("timeline", 160, 600);

            displayTweets();

            getTimeline();

        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({});

        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();