var socket,

    tlPaper,

    twPaper,

    tweetData = {

        "tweetcount" : 0,

        "position" : 0,

        "feedMode" : true,

        "followLast" : true,

        "zoomLevel" : 3,

        "timeLevel" : 2,

        "tweets" : [],

        "posIndex" : [],

        "tlChanged" : true,

        "tlLevelChanged" : true,

        "blockUpdate" : false,

        "waitUpdate" : true,

        "htmlBuffer" : '',

        "wheelDelta" : 0

    },

    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' ]

        }

    ];

function placeHolder(className) {

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

}

function clicTweet(tweetPos) {

    if (tweetPos != tweetData.position) {

        tweetData.position = tweetPos;

        return false;

    } else {

    }

}

function tweetToHtml(tweet, className) {

    if (!tweet) {

        return placeHolder(className);

    }

	html = '<li class="tweet ' + className + '" id="tweet_' + tweet.pos + '" onclick="return clicTweet(' + 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" style="width:' + (100/tweet.annotations.length) + '%; background:' + annotations[tweet.annotations[i]].colors.tweet + '"></div>';

    	}

    	html += '</div>';

	}

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

	a_user = '<a href="http://twitter.com/' + tweet.user.screen_name + '" target="_blank" title="' + tweet.user.name + '">';

	if (tweet.user.profile_image_url) {

		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">';

	lastend = 0;

	txt = '';

	entities = [];

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

	    entities.push({

	        "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>'

	    });

	}

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

	    entities.push({

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

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

	        "html" : '<a href="' + tweet.entities.urls[i].expanded_url + '" target="_blank">' + tweet.entities.urls[i].display_url + '</a>'

	    });

	}

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

	    entities.push({

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

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

	        "html" : '<a href="http://twitter.com/' + tweet.entities.user_mentions[i].screen_name + '" target="_blank" title="' + tweet.entities.user_mentions[i].name + '">@' + tweet.entities.user_mentions[i].screen_name + '</a>'

	    });

	}

 	entities.sort(function(a, b) { return a.start - b.start });

    for (var i in entities) {

 		txt += tweet.text.substring(lastend, entities[i].start) + entities[i].html;

        lastend = entities[i].end;

    }

	txt += tweet.text.substring(lastend);

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

	return html;

}

function getUpdate() {

    tweetData.posToDisplay = [];

        }

    } else {

        }

    }

    var tweetsToGet = [];

        }

    }

    if (tweetsToGet.length) {

        socket.emit('updateTweets', {

            "tweets" : tweetsToGet

        });

    } else {

        drawTweetList();

    }

    if (tweetData.tlChanged || tweetData.tlLevelChanged) {

        socket.emit('updateTimeline', {

            "level" : tweetData.timeLevel,

            "full" : tweetData.tlLevelChanged

        });

    } else {

        drawTimeLine();

    }

}

function tweetByPos(pos) {

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

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

}

function delayedUpdate() {

    tweetData.blockUpdate = false;

    if (tweetData.waitUpdate) {

        updateDisplay();

    }

}

function updateDisplay() {

    if (tweetData.blockUpdate) {

        tweetData.waitUpdate = true;

    } else {

        tweetData.waitUpdate = false;

        getUpdate();

        tweetData.blockUpdate = true;

        setTimeout(delayedUpdate, 300);

    }

}

function setTimeZoom(level) {

    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++;

        }

    }

            }

        }

    }

    if (tweetData.htmlBuffer != html) {

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

        tweetData.htmlBuffer = html;

    }

    if (tweetData.followLast) {

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

    }

    drawTimeWindow();

}

function drawTimeWindow() {

    twPaper.clear();

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

    var dtfintl = tweetData.timeline[ tweetData.timeline.length - 1 ].end,

        dtdebtl = tweetData.timeline[0].start,

        scY = 600 / ( dtfintl - dtdebtl );

    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