diff -r 007254e97333 -r 4e1e66b2fdf1 js/playscreen.js
--- a/js/playscreen.js	Mon Apr 22 18:42:40 2013 +0200
+++ b/js/playscreen.js	Wed Apr 24 17:54:48 2013 +0200
@@ -242,7 +242,8 @@
         xscale = globW/mx,
         yscale,
         localyscale,
-        filteredSegments = [];
+        filteredSegments = [],
+        currentTweetTc = -1;
     
     function showLocal() {
     	var $c = $(".play-canvas"),
@@ -421,19 +422,54 @@
         
         var deltaY = $(".play-bottom").offset().top;
         
-        $(".play-localtweets .tweet:visible").each(function() {
+		ctx.strokeStyle = "#ccc";
+		
+        $(".play-localtweets .tweet").each(function() {
         	var el = $(this),
         		liY = + el.offset().top + el.outerHeight() / 2 - deltaY,
-        		tY = localyscale * (+el.attr("data-timestamp") - localpos + localduration / 2);
+        		t = +el.attr("data-timestamp"),
+        		tY = localyscale * (t - localpos + localduration / 2),
+                tX = localL + lxscale * (data.fiveseconds[Math.floor(t / 5)].count - lmi);
     		ctx.beginPath();
-    		ctx.strokeStyle = "#ccc";
-    		ctx.moveTo(localL, tY);
+    		ctx.moveTo(tX, tY);
     		ctx.lineTo(localR, tY);
     		ctx.lineTo(400, liY);
     		ctx.stroke();
     		$(this).css("background",colors[el.attr("data-topic-id")] || "");
         });
         
+		ctx.strokeStyle = "#000";
+        ctx.fillStyle = "#ff0";
+		
+        $(".user-tweets .tweet:visible").each(function() {
+            var el = $(this),
+                t = +el.attr("data-timestamp"),
+                hover = (t === currentTweetTc);
+            if (hover) {
+                ctx.strokeStyle = "#900";
+                ctx.lineWidth = 3;
+            }
+            if (t > localstart && t < localend) {
+                var tY = localyscale * (t - localpos + localduration / 2),
+                    tX = localL + lxscale * (data.fiveseconds[Math.floor(t / 5)].count - lmi);
+        		ctx.beginPath();
+        		ctx.arc(tX,tY,hover ? 6 : 3,0,2*Math.PI,true);
+        		ctx.fill();
+        		ctx.stroke();
+            }
+            var n = Math.floor(t / 60),
+                x = globL + xscale * data.minutes[n].count,
+                y = yscale * t;
+            ctx.beginPath();
+            ctx.arc(x,y,hover ? 6 : 3,0,2*Math.PI,true);
+            ctx.fill();
+            ctx.stroke();
+            if (hover) {
+                ctx.strokeStyle = "#000";
+                ctx.lineWidth = 1;
+            }
+        });
+        
         ctx.fillStyle = '#ffffff';
         ctx.strokeStyle = '#999999';
         ctx.font = '10px Arial,Helvetica';
@@ -549,7 +585,7 @@
 	    	.sortBy(function(w) {
 	    		return -w.score;
 	    	})
-	    	.first(39)
+	    	.first(tcLength)
 	    	.value();
     	
     	var values = _(localkeywords).pluck('score'),
@@ -560,7 +596,7 @@
     		tc = $(".play-tagcloud li");
     		
 		localkeywords.forEach(function(w, i) {
-			var size = 10 + (w.score - min) * scale,
+			var size = 12 + (w.score - min) * scale,
 				selected = (w.word === selectedWord),
 				e = $(tc[i]),
 				t = e.text();
@@ -575,8 +611,8 @@
 			}
 			selectedVisible = selectedVisible || selected;
 		});
-		if (localkeywords.length < 39) {
-			for (var i = localkeywords.length; i < 39; i++) {
+		if (localkeywords.length < tcLength) {
+			for (var i = localkeywords.length; i < tcLength; i++) {
 				$(tc[i]).text("").removeClass("selected");
 			}
 		}
@@ -588,7 +624,9 @@
 		throttledGetTweets();
     }
     
-    for (var i = 0; i < 39; i++) {
+    var tcLength = 20;
+    
+    for (var i = 0; i < tcLength; i++) {
     	$(".play-tagcloud").append("<li>");
     }
     
@@ -618,7 +656,9 @@
     	tweetstructure = {},
     	requestedtweets = {},
     	_NTWEETS = 50,
-    	selectedWord = false;
+    	selectedWord = false,
+    	lastHtml = "";
+    
     
     function showTweets() {
     	var toshow = [];
@@ -669,7 +709,7 @@
 			return b.topic.weight - a.topic.weight; 
 		});
 		
-		if (tweetstoshow.length < 8) {
+		if (tweetstoshow.length < 4) {
 			var randtweets = data.randomtweets.filter(function(tw) {
 				return (tw.timestamp > (localpos - localduration / 2)) && (tw.timestamp < (localpos + localduration / 2))
 			});
@@ -679,14 +719,14 @@
 					return rx.test(tw.data.text);
 				});
 			}
-			var mod = Math.ceil(randtweets.length / 8);
+			var mod = Math.ceil(randtweets.length / 5);
 			randtweets = randtweets.filter(function(v,k) {
 				return !(k % mod);
 			});
 			tweetstoshow = tweetstoshow.concat(randtweets);
 		}
 		
-		tweetstoshow = tweetstoshow.slice(0,10);
+		tweetstoshow = tweetstoshow.slice(0,6);
 		
 		if (selectedWord) {
 			var rx = new RegExp( '(' + selectedWord.replace(/(\W)/gm,'\\$1') + ')', 'gim' );
@@ -710,7 +750,10 @@
 		
 		var html = tweetstoshow.map(tweetTemplate).join("");
 		
-		$(".play-localtweets").html(html);
+		if (lastHtml !== html) {
+		    $(".play-localtweets").html(html);
+		}
+		lastHtml = html;
 		var h = 0;
 		$(".play-localtweets .tweet").each(function() {
 			h += $(this).outerHeight();
@@ -873,7 +916,7 @@
    	player.on("timeupdate", function(t) {
    		playTime.text(secsToString(t));
     	if (timelock) {
-    		localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, t));
+    		localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, t + localduration / 6));
     	}
     	throttledShowLocal();
    	});
@@ -924,7 +967,7 @@
 			if (timelock) {
     			player.setCurrentTime(Math.max(0, Math.min(data.duration, Math.floor(posY / yscale))));
 			} else {
-				localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, Math.floor(posY / yscale)));
+				localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, Math.floor(posY / yscale) + localduration / 6));
 				throttledShowLocal();
 			}
 		}
@@ -985,8 +1028,9 @@
 	    		newlevel = Math.max(0, Math.min(zoomlevels.length - 1, currentlevel + d));
     		if (newlevel !== currentlevel) {
     			currentlevel = newlevel;
+    			var oldduration = localduration;
     			localduration = zoomlevels[currentlevel];
-    			localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, localpos));
+    			localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, localpos - (oldduration - localduration) / 6 ));
     			throttledShowLocal();
     		}
 	        totalScroll = 0;
@@ -1020,49 +1064,73 @@
     	.on("mouseleave touchend", function() {
     		clearInterval(moveInterval);
     	});
+    var usersCache = {};
     
-    $(".play-localtweets").on("click", "li", function() {
-    	player.setCurrentTime(parseInt($(this).attr("data-timestamp")));
-    	return false;
-    });
+    function showUserTweets(userid) {
+        var tweets = usersCache[userid];
+		tweets.forEach(function(tweet) {
+			tweet.timestamp = new Date(tweet.created_at).valueOf() / 1000 - deltaT;
+		});
+		tweets = tweets.filter(function(tweet) {
+		    return tweet.timestamp > 0 && tweet.timestamp < data.duration;
+		});
+		tweets.sort(function(a,b) {
+			return a.timestamp - b.timestamp;
+		})
+		var html = tweets.reduce(function(mem, tweet) {
+			return mem + tweetTemplate({
+				timestamp: tweet.timestamp,
+				topic: {topic: -1},
+				weight: 0,
+				data: tweet,
+				htext: _(tweet.text).escape(),
+				show_link: false,
+				show_time: true
+			});
+		},"");
+		$(".user-tweets").show();
+		$(".user-tweets-list").html(html);
+		$(".user-name").text(tweets[0].from_user_name);
+    }
+    
     $(".play-localtweets").on("click", "li a", function() {
     	var userid = $(this).attr("data-user-id");
-    	$.getJSON(
-			solrUrl(
-				"twitter",
-				{
-					q: "from_user_id:" + userid,
-					fl: "id_str,created_at,from_user_name,text,profile_image_url,from_user_id",
-					rows: 500
-				}
-			),
-			function(t) {
-				var tweets = t.response.docs;
-				tweets.forEach(function(tweet) {
-					tweet.timestamp = new Date(tweet.created_at).valueOf() / 1000 - deltaT;
-				});
-				tweets.sort(function(a,b) {
-					return a.timestamp - b.timestamp;
-				})
-				var html = tweets.reduce(function(mem, tweet) {
-					return mem + tweetTemplate({
-						timestamp: tweet.timestamp,
-						topic: {topic: -1},
-						weight: 0,
-						data: tweet,
-						htext: _(tweet.text).escape(),
-						show_link: false,
-						show_time: true
-					});
-				},"");
-				$(".user-tweets").show();
-				$(".user-tweets-list").html(html);
-				$(".user-name").text(tweets[0].from_user_name);
-			}
-		);
+        $(".user-tweets").show();
+        $(".user-tweets-list").html("<li class='loading'>Chargement en cours</li>");
+        $(".user-name").text($(this).parents("li.tweet").find("p a").text().replace(/(^@|:$)/g,""));
+    	if (!usersCache[userid]) {
+    	    usersCache[userid] = [];
+        	$.getJSON(
+    			solrUrl(
+    				"twitter",
+    				{
+    					q: "from_user_id:" + userid,
+    					fl: "id_str,created_at,from_user_name,text,profile_image_url,from_user_id",
+    					rows: 500
+    				}
+    			),
+    			function(t) {
+    				usersCache[userid] = t.response.docs;
+                    showUserTweets(userid);
+    			}
+    		);
+		} else {
+		    showUserTweets(userid);
+		}
 		return false;
     });
     
+    $(".user-tweets").on("click", "li", function() {
+        player.setCurrentTime(parseInt($(this).attr("data-timestamp")));
+        return false;
+    }).on("mouseenter", "li", function() {
+        currentTweetTc = parseInt($(this).attr("data-timestamp"));
+        throttledShowLocal();
+    }).on("mouseleave", "li", function() {
+        currentTweetTc = -1;
+        throttledShowLocal();
+    });
+    
     var timelock = true;
     
     $(".lock-button").click(function() {
@@ -1075,7 +1143,13 @@
     	return false;
     });
     
-    $(window).on("resize", throttledShowLocal)
+    $(window).on("resize", throttledShowLocal);
+    
+    $(".close-user-tweets").click(function() {
+        currentTweetTc = -1;
+        $(".user-tweets").hide();
+        return false;
+    })
     
     checkOrGoNext();
 }