--- a/player/js/player.js	Tue May 28 12:26:49 2013 +0200
+++ b/player/js/player.js	Wed May 29 17:05:34 2013 +0200
@@ -50,11 +50,19 @@
     
     $(".tags-list").html(tags.map(tagTemplate).join(""));
     
+    $(".tags-title").mouseenter(function() {
+        $(".tags-list").slideDown();
+    });
+    $(".tags").mouseleave(function() {
+        $(".tags-list").slideUp();
+    });
+    
     $("body").click(function() {
         if (clickedTag) {
             $(".found").removeClass("found");
             clickedTag = null;
         }
+        return false;
     });
     
     function showTag(tagId) {
@@ -100,6 +108,7 @@
         var element = $(chapterTemplate(chapter));
         element.click(function() {
            myMedia.setCurrentTime(chapter.begin); 
+           return false;
         }).hover(function() {
             hoveredChapter = element;
             highlightChapter();
@@ -169,11 +178,13 @@
     );
     
     var chipTemplate = _.template(
-        '<li class="chip <%- type %><%- left %>" style="left: <%- pos %>%"><span class="chip-circle">'
-        + '</span><span class="chip-title"><%- annotation.title %></span></li>'
+        '<li class="chip <%- type %><%- left %>" style="left: <%- pos %>%"><div class="chip-circle">'
+        + '</div><div class="chip-pole"></div><div class="chip-title"><%- annotation.title %></div></li>'
     );
     
-    var annotations = myProject.getAnnotationsByTypeTitle("annotations");
+    var annotations = myProject.getAnnotationsByTypeTitle("annotations").sortBy(function(a) {
+        return a.begin;
+    });
     
     var annotationinfos = annotations.map(function(annotation) {
         var annotationinfo = {
@@ -203,6 +214,7 @@
         annotationinfo.both = annotationinfo.picto.add(annotationinfo.chip);
         annotationinfo.both.click(function() {
                 openAnnotation(annotationinfo);
+                return false;
             })
             .hover(function() {
                 annotationinfo.both.addClass("hover");
@@ -210,10 +222,18 @@
                 annotationinfo.both.removeClass("hover");
             });
         annotation.on("enter", function() {
-            annotationinfo.picto.show();
+            annotationinfo.picto.show().animate({
+                height: "38px",
+                opacity: 1
+            });
         });
         annotation.on("leave", function() {
-            annotationinfo.picto.hide();
+            annotationinfo.picto.animate({
+                height: 0,
+                opacity: 0
+            }, function() {
+                annotationinfo.picto.hide();
+            });
         });
         annotation.on("found-tags", function() {
             annotationinfo.both.addClass("found");
@@ -246,6 +266,7 @@
         var annotationDiv = $(".annotation-templates ." + annotationinfo.type + "-annotation").clone();
         
         annotationDiv.appendTo($(".main-video"));
+        annotationDiv.animate({top: "20px"});
         annotationDiv.find(".close-annotation").click(closeAnnotation);
         annotationDiv.find(".annotation-title").text(annotationinfo.annotation.title);
         
@@ -264,12 +285,15 @@
                     imgel.css("margin-top","");
                     var w = imgel.width(),
                         h = imgel.height();
-                    annotationDiv.find(".slideshow-center").css("height","");
+                    annotationDiv.find(".annotation-main").css("height","");
                     annotationDiv.find(".slideshow-description").css("margin-left",w);
-                    var h2 = annotationDiv.find(".slideshow-center").height();
+                    var h2 = annotationDiv.find(".annotation-main").height();
                     if (h < h2) {
                         imgel.css("margin-top",Math.floor((h2-h)/2)+"px");
                     }
+                    if (+imgel.css("opacity") !== 1) {
+                        imgel.fadeTo(400, 1);
+                    }
                 }
                 
                 var showCurrentImage = function() {
@@ -290,7 +314,8 @@
                 
                 var nextImage = function() {
                     currentslide = (currentslide + 1) % slides.length;
-                    showCurrentImage();
+                    annotationDiv.find(".slideshow-image").fadeTo(400, 0, showCurrentImage);
+                    return false;
                 }
                 
                 var togglePlay = function() {
@@ -302,6 +327,7 @@
                     } else {
                         annotationDiv.find(".slideshow-play-pause").removeClass("pause");
                     }
+                    return false;
                 }
                 
                 var checkloaded = function() {
@@ -331,7 +357,7 @@
                     annotationDiv.find(".slideshow-next").click(nextImage);
                     annotationDiv.find(".slideshow-previous").click(function() {
                         currentslide = (currentslide ? currentslide : slides.length) - 1;
-                        showCurrentImage();
+                        annotationDiv.find(".slideshow-image").fadeTo(400, 0, showCurrentImage);
                     });
                     annotationDiv.find(".slideshow-play-pause").click(togglePlay);
                 } else {
@@ -391,8 +417,8 @@
                             width: mediaW,
                             height: mediaH,
                             url: src,
-                            autoplay: +annotationinfo.annotation.content.autostart,
-                            color: "be4477",
+                            autoplay: annotationinfo.annotation.content.autostart,
+                            color: "B8155F",
                             portrait: false,
                             title: false,
                             byline: false
@@ -431,7 +457,7 @@
                             auto_play: annotationinfo.annotation.content.autostart,
                             show_artwork: false,
                             url: src,
-                            color: "63be6c"
+                            color: "B8155F"
                         },
                         success: function(data) {
                             annotationDiv.find(".media-frame").html(data.html);