# HG changeset patch
# User veltr
# Date 1367589216 -7200
# Node ID b557f4bae85fc9667a792b02728fa11926af3767
# Parent  933b388521f664e72e0455703234e943bc794dd5
Added tweet list animation

diff -r 933b388521f6 -r b557f4bae85f css/playscreen.css
--- a/css/playscreen.css	Thu Apr 25 13:21:59 2013 +0200
+++ b/css/playscreen.css	Fri May 03 15:53:36 2013 +0200
@@ -203,7 +203,7 @@
 }
 
 .user-tweets {
-	position: absolute; left: 420px; top: 40px; bottom: 40px; right: 60px; display: none;
+	position: absolute; top: 40px; bottom: 40px; display: none;
 	background: rgba(64,64,64,.8); border-radius: 10px; z-index: 4; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
 }
 
@@ -220,7 +220,7 @@
 }
 
 .user-tweets-list .tweet {
-	margin-bottom: 10px; cursor: hand;
+	margin: 0 0 10px 20px; cursor: hand;
 }
 
 .user-tweets-list .tweet:hover {
diff -r 933b388521f6 -r b557f4bae85f js/playscreen.js
--- a/js/playscreen.js	Thu Apr 25 13:21:59 2013 +0200
+++ b/js/playscreen.js	Fri May 03 15:53:36 2013 +0200
@@ -648,7 +648,7 @@
     var lastPos, lastDuration, lastTopics;
     
     var tweetTemplate = _.template(
-    		'<li class="tweet" data-timestamp="<%= timestamp %>" data-topic-id="<%= topic.topic %>">'
+    		'<li class="tweet" data-timestamp="<%= timestamp %>" data-topic-id="<%= topic.topic %>" data-tweet-id="<%- data.id_str %>">'
     		+ '<% if (show_link) { %><a href="#" data-user-id="<%- data.from_user_id %>"><% } %>'
     		+ '<img src="<%- data.profile_image_url %>" /><% if (show_link) { %></a><% } %>'
     		+ '<p><% if (show_link) { %><a href="#" data-user-id="<%- data.from_user_id %>"><% } %>'
@@ -1091,14 +1091,28 @@
 				show_time: true
 			});
 		},"");
-		$(".user-tweets").show();
-		$(".user-tweets-list").html(html);
+		var utl = $(".user-tweets-list");
+		utl.html(html);
+		var currentTweetLi = $(".user-tweets-list").find(".tweet[data-tweet-id='" + currentTweet + "']");
+		if (currentTweetLi.length) {
+		    currentTweetLi.css("margin-left",0);
+		    utl.scrollTop(currentTweetLi.offset().top - utl.offset().top + utl.scrollTop() - utl.height() / 2 + currentTweetLi.height() / 2);
+		}
+		  
 		$(".user-name").text(tweets[0].from_user_name);
     }
     
+    var currentTweet = 0;
+    
     $(".play-localtweets").on("click", "li a", function() {
     	var userid = $(this).attr("data-user-id");
-        $(".user-tweets").show();
+    	currentTweet = $(this).parents("li.tweet").attr("data-tweet-id");
+        $(".user-tweets").css({
+            display: "block",
+            left: $(window).width() + 20
+        }).animate({
+            left: "420px"
+        });
         $(".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]) {
@@ -1146,14 +1160,22 @@
     	return false;
     });
     
-    $(window).on("resize", throttledShowLocal);
+    $(window).on("resize", function() {
+        throttledShowLocal
+        $(".user-tweets").width($(window).width()-480);
+    });
     
     $(".close-user-tweets").click(function() {
         currentTweetTc = -1;
-        $(".user-tweets").hide();
+        $(".user-tweets").animate({
+            left: $(window).width() + 20
+        }, function(){
+            $(this).hide();
+        });
         return false;
     })
     
+    $(".user-tweets").width($(window).width()-480);
     checkOrGoNext();
 }