--- a/client/css/controlpanel.css	Tue Feb 21 15:28:05 2012 +0100
+++ b/client/css/controlpanel.css	Tue Feb 21 19:20:44 2012 +0100
@@ -8,9 +8,7 @@
     background-image: -ms-linear-gradient(right, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
     top: 0; height: 100%;
     border-right: 4px solid #666666;
-}
-#btv-cp-container:hover {
-    left: 0;
+    z-index: 20;
 }
 .btv-cp-line {
     position: relative; width: 100%; height: 100%; margin: 0 auto;

--- a/client/css/main.css	Tue Feb 21 15:28:05 2012 +0100
+++ b/client/css/main.css	Tue Feb 21 19:20:44 2012 +0100
@@ -1,3 +1,7 @@
+#canvas div {
+    z-index: 5;
+}
+
 #podium-container {
     position: absolute;
     width: 1480px;
@@ -59,4 +63,21 @@
 }
 .btv-tweet-text {
     clear: both;
-}
\ No newline at end of file
+}
+
+#btv-tooltip {
+    display: none; position: absolute; z-index: 8; font-size: 20px; background: #0031ff; color: #ffffff;
+    width: 350px; padding: 10px; margin: -30px 0 0 -380px; border-right: 5px solid;
+}
+
+.btv-tooltip-arrow {
+    position: absolute; width: 35px; height: 50px; top: 30px; left: 370px; background: url('../img/tooltip-arrow.png');
+}
+
+.btv-tooltip-name {
+    font-weight: bold;
+}
+
+.btv-tooltip-image {
+    float: left; margin: 0 10px 10px 0;
+}

Binary file client/img/tooltip-arrow.png has changed

--- a/client/js/main.js	Tue Feb 21 15:28:05 2012 +0100
+++ b/client/js/main.js	Tue Feb 21 19:20:44 2012 +0100
@@ -78,6 +78,37 @@
     }
 }
 
+function showTooltip(_t, _x, _y) {
+    $("#btv-tooltip").html('<img class="btv-tooltip-image" src="'
+        + _t.profile_image_url
+        + '" /><p class="btv-tooltip-name"><span>'
+        + _t.from_user
+        + '</span> (<span>'
+        + _t.from_user_name
+        +'</span>)</p><p>'
+        + _t.text
+        +'</p><div class="btv-tooltip-arrow"></div>').show().css({
+            "left": _x + "px",
+            "top": _y + "px",
+        })
+}
+
+function hideTooltip() {
+    $("#btv-tooltip").hide();
+}
+
+function showControlPanel() {
+    $("#btv-cp-container").dequeue().animate({
+            "left": 0
+        });
+}
+
+function hideControlPanel() {
+    $("#btv-cp-container").dequeue().animate({
+            "left": "-315px"
+        });
+}
+
 $(function() {
     columnCounts = columnKeywords.map(function() {
         return 0;
@@ -137,7 +168,7 @@
                             var _id = toDel[_j].id_str;
                             world.DestroyBody(b2bod[_id]);
                             
-                            $('#'+_id).delay(10).hide("slow").queue(function() {
+                            $('#'+_id).fadeTo(500, 0, function() {
                                 $(this).remove(); 
                             });
                         }
@@ -156,6 +187,8 @@
         }
     });
     
+    $("#btv-cp-container").mouseover(showControlPanel).mouseout(hideControlPanel);
+    
     $("#btv-cp-champ-filtre").keyup(function() {
         updateLastTweetList();
     });

--- a/client/js/tweetvote-anim.js	Tue Feb 21 15:28:05 2012 +0100
+++ b/client/js/tweetvote-anim.js	Tue Feb 21 19:20:44 2012 +0100
@@ -433,39 +433,23 @@
   
 
 	$("#"+t.id_str).mouseover(function() {
-    console.log(t.id_str);
-
-		$("#tooltip-bulle .tweet-screen-name").text(t.from_user);
-		$("#tooltip-bulle .tweet-full-name").text(t.from_user_name);
-		$("#tooltip-bulle .tweet-text").text(t.text);
-		$("#tooltip-bulle .tweet-time").text(t.created_at);
-		$("#tooltip-bulle .tweet-img-avatar").attr( 'src' , t.profile_image_url );
-		var thisX = parseInt($(this).css('left'),10)+10;
-
-		 $('#bulle-tooltip-template').css('visibility','visible');
-		 //$('#bulle-tooltip-template').css('top', thisX).css('left', thisY);
-		$(this).css('cursor','pointer');
-		if(thisX<960/2){
-			$('#accolade-left').css('visibility','visible');
-		}else{
-			$('#accolade-right').css('visibility','visible');
-		}
-	    
-	});
-  
-	$("#"+t.id_str).mouseout(function() {
-		$('#bulle-tooltip-template').css('visibility','hidden');
-    $('#accolade-right').css('visibility','hidden');
-		$('#accolade-left').css('visibility','hidden');
-		$(this).css('cursor','auto');
-		
-		//$(this).dequeue();
+	    var _of = $(this).offset();
+	    $(this).css({
+	        "cursor": "pointer"
+	    });
+	    showTooltip(t, _of.left, _of.top);  
+	}).mouseout(hideTooltip).click(function() {
+        addTweetToSelection(t.id_str);
+	    $(this).fadeTo(100,.25, function() {
+	        $(this).fadeTo(100,1);
+	        showControlPanel();
+	    })
 	});
    
-  $("#"+t.id_str).click(function() {
+/*  $("#"+t.id_str).click(function() {
 		if(!isMouseDragging) {
             fancyBoxTwitter(t.from_user, (t.candidats && t.candidats.length ? candidats[t.candidats[0]].couleur : '#666699'));
 //      window.open("https://twitter.com/#!/"+t.from_user+"/status/"+t.id_str);
     }
-  });  
+  });   */
 }
\ No newline at end of file

--- a/client/main.html	Tue Feb 21 15:28:05 2012 +0100
+++ b/client/main.html	Tue Feb 21 19:20:44 2012 +0100
@@ -88,6 +88,8 @@
             </div>
             <div id="btv-bigtweet">
             </div>
+            <div id="btv-tooltip">
+            </div>
         </div>
 
     </body>