tlPaper,

    twPaper,

        "position" : 0,

        "followLast" : true,

        "timeLevel" : 2,

        "tweets" : [],

        "posIndex" : [],

        "tlChanged" : true

        'question' : "#036AAE",

        'neutre' : "#585858"

    },

    annotations = {

        'positive' : '++',

        'negative' : '--',

        'reference' : '==',

        'question' : '??'

    displaySplitting = [

        {

            positions : [ 10, 20, 22, 24, 25, 26, 27, 28, 29, 31, 33, 43, 53 ],

            classNames : [ 'icons fade', 'icons', 'quarter fade', 'quarter', 'half fade', 'half', 'full', 'half', 'half fade', 'quarter', 'quarter fade', 'icons', 'icons fade' ]

        },

        {

            positions : [ 1, 3, 5, 7, 13, 33, 53 ],

            classNames : [ 'full', 'half', 'half fade', 'quarter', 'quarter fade', 'icons', 'icons fade' ]

        }

    ],

    blockUpdate = false,

    waitUpdate = true,

    wheeldelta = 0;

function placeHolder(className) {

    return '<li class="placeholder ' + className + '"></li>';

}

function tweetToHtml(tweet, className) {

	html = '<li class="tweet ' + className + '" id="tweet_' + tweet.pos + '"';

	if (tweetData.followLast && tweet.pos == tweetData.position) {

	    html += ' style="display: none"';

	html += '>';

	if (tweet.annotations.length) {

	    html += '<div class="annotations">';

	    for (var i in tweet.annotations) {

    		html += '<div class="annotation ' + tweet.annotations[i] + '" style="width :' + (100/tweet.annotations.length) + '%"></div>';

    	}

    	html += '</div>';

	}

	html += '<div class="twmain">';

		html += a_user + '<img class="profile_image" src="' + tweet.user.profile_image_url + '" /></a>';

	html += '<h4>' + a_user + '@' + tweet.user.screen_name + '</a></h4><p class="created_at">' + new Date(tweet.created_at).toLocaleTimeString() + '</p><p class="tweet_text">';

	for (var i in tweet.entities.hashtags) {

	        "start" : tweet.entities.hashtags[i].indices[0],

	        "end" : tweet.entities.hashtags[i].indices[1],

	        "html" : '<a href="http://twitter.com/search?q=%23' + tweet.entities.hashtags[i].text + '" target="_blank">#' + tweet.entities.hashtags[i].text + '</a>'

	html += txt + '</p></li></div>';

function getUpdate() {

    tweetData.posToDisplay = [];

    if (tweetData.followLast) {

        for (var i = tweetData.tweetcount; i >= tweetData.tweetcount - 52; i--) {

            tweetData.posToDisplay.push( i > 0 ? i : -1 );

        }

        tweetData.end = tweetData.tweetcount;

        tweetData.start = Math.max(1, tweetData.end - 52);

    } else {

        for (var i = tweetData.position + 26; i >= tweetData.position - 26; i--) {

            tweetData.posToDisplay.push( i > 0 && i <= tweetData.tweetcount ? i : -1 );

        }

        tweetData.end = Math.min(tweetData.tweetcount, tweetData.position + 26 );

        tweetData.start = Math.max(1, tweetData.position - 26);

    }

    var tweetsToGet = [];

    for (var i = tweetData.start; i <= tweetData.end; i++) {

        if (!tweetByPos(i)) {

            tweetsToGet.push(i);

        }

    }

    if (tweetsToGet.length) {

        socket.emit('updateTweets', {

            "tweets" : tweetsToGet

        });

    } else {

        drawTweetList();

        //drawDisplay();

    }

    if (tweetData.tlChanged) {

        socket.emit('updateTimeline', {

            "level" : tweetData.timeLevel

        });

    } else {

        drawTimeLine();

    }

function tweetByPos(pos) {

    var index = tweetData.posIndex.indexOf(pos);

    return (index == -1 ? false : tweetData.tweets[index]);

}

function delayedUpdate() {

    blockUpdate = false;

    if (waitUpdate) {

        updateDisplay();

    }

}

function updateDisplay() {

    if (blockUpdate) {

        waitUpdate = true;

    } else {

        waitUpdate = false;

        getUpdate();

        blockUpdate = true;

        setTimeout(delayedUpdate, 100);

    }

    if (level >= 0 && level <= 4) {

        tweetData.timeLevel = level;

        tweetData.tlChanged = true;

        updateDisplay();

    }

function drawTweetList() {

    html = '';

    var i = 0;

    while (i < tweetData.posIndex.length) {

        if (tweetData.posToDisplay.indexOf(tweetData.posIndex[i]) == -1) {

            tweetData.posIndex.splice(i,1);

            tweetData.tweets.splice(i,1);

        } else {

            i++;

        }

    }

    for (var i in tweetData.posToDisplay) {

        var ds = displaySplitting[tweetData.followLast ? 1 : 0];

        for (var j in ds.positions) {

            if (ds.positions[j] > i) {

                var className = ds.classNames[j];

                break;

            }

        }

        html += ( tweetData.posToDisplay[i] != -1 ? tweetToHtml(tweetByPos(tweetData.posToDisplay[i]), className) : placeHolder(className) );

    }

    $("#tweetlist").html(html);

    if (tweetData.followLast) {

        $("#tweet_" + tweetData.position).fadeIn(500);

    }

    drawTimeWindow();

}

function drawTimeWindow() {

    twPaper.clear();

    if (!tweetData.timeline || !tweetData.timeline.length) return;

    var dtfintl = new Date ( tweetData.timeline[ tweetData.timeline.length - 1 ].end ),

        dtdebtl = new Date ( tweetData.timeline[0].start ),

        dtfintw = new Date( tweetByPos( tweetData.end ).created_at ),

        dtdebtw = new Date( tweetByPos( tweetData.start ).created_at ),

        scY = 600 / ( dtfintl - dtdebtl );

    twPaper.rect( 0, scY * ( dtfintl - dtfintw ), 300, scY * ( dtfintw - dtdebtw )).attr({"stroke":"none","fill":"#8080ff","fill-opacity":.2});

    var dtcour = new Date( tweetByPos( tweetData.position ).created_at ),

        posY = scY * ( dtfintl - dtcour ); 

    twPaper.path("M0 "+posY+"L300 "+posY).attr({"stroke":"#ff0"});

function drawTimeLine() {

    tlPaper.clear();

    if (!tweetData.timeline || !tweetData.timeline.length) return;

    tweetData.tlTweetRects = [];

    var scaleY = 600 / tweetData.timeline.length,

        max = 0;

    for (var i = 0; i < tweetData.timeline.length; i++) {

        max = Math.max(max, tweetData.timeline[i].tweets);

    var scaleX = 160 / max;

    // dessin de l'axe vertical

    tlPaper.path("M160 0L160 600").attr({"stroke":"#ccc"});

    // dessin de la date de début

    tlPaper.text(165, 592, new Date(tweetData.timeline[0].start).toLocaleTimeString()).attr({ "text-anchor" : "start", "font-size": "12px" });

    // dessin de la date de fin

    tlPaper.text(165, 7, new Date(tweetData.timeline[tweetData.timeline.length - 1].end).toLocaleTimeString()).attr({ "text-anchor" : "start", "font-size": "12px" });

    for (var i = 0; i < tweetData.timeline.length; i++) {

        var posY = 600 - (i * scaleY);

        // Si on est à une demi-heure, on trace un axe secondaire + heure

        if (i && !(new Date(tweetData.timeline[i].start).valueOf() % 1800000)) {

            tlPaper.path("M0 "+posY+"L165 "+posY).attr({"stroke":"#ccc"});

            tlPaper.text(165, posY, new Date(tweetData.timeline[i].start).toLocaleTimeString()).attr({ "text-anchor" : "start", "font-size": "12px" });

        }

        var anz = {

            "neutre" :tweetData.timeline[i].tweets

        };

        for (var j in tweetData.timeline[i].annotations) {

            anz.neutre -= tweetData.timeline[i].annotations[j];

            anz[j] = tweetData.timeline[i].annotations[j];

        }

        var posX = 0;

        for (var j in anz) {

            var largX = scaleX * anz[j];

            tlPaper.rect(posX, 600 - scaleY * (i+1), largX, scaleY).attr({"stroke": "none", "fill": colors[j]});

            posX += largX;

        }

    drawTimeWindow();

/*    for (var i = 0; i < tweetData.arcs.length; i++) {

        var x1 = scaleX * (tmptw[tweetData.arcs[i].from].x + .5),

            x2 = scaleX * (tmptw[tweetData.arcs[i].to].x + .5),

            y1 = 600 - scaleY * (tmptw[tweetData.arcs[i].from].y + .5),

            y2 = 600 - scaleY * (tmptw[tweetData.arcs[i].to].y + .5),

            d = "M"+x1+" "+y1+"C";

        if (y1 == y2) {

            d += x1+" "+(y1 - 30)+" "+x2+" "+(y2 - 30);

        } else {

            d += (x1 + 60)+" "+y1+" "+(x2 + 60)+" "+y2;

        }

        paper.path(d+" "+x2+" "+y2);

    } */

    tlPaper = Raphael("timeline", 220, 600);

    twPaper = Raphael("timewindow", 220, 600);

        if (tweetData.tweetcount != data.tweetcount) {

            tweetData.tweetcount = data.tweetcount;

            tweetData.tlChanged = true;

            if (tweetData.followLast) {

                tweetData.position = data.tweetcount;

            }

            updateDisplay();

        for (var i in data) {

            if (tweetData.posIndex.indexOf(data[i].pos) == -1) {

                tweetData.tweets.push(data[i]);

                tweetData.posIndex.push(data[i].pos);

            }

        drawTweetList();

        tweetData.timeline = data;

        drawTimeLine();

    });

    socket.on('display', function (data) {

        tweetData.tlChanged = false;

        for (var i in data.tweets) {

            if (tweetData.posIndex.indexOf(data.tweets[i].pos) == -1) {