diff -r 150ccacec493 -r a07c2128b7c1 player/js/player.js
--- a/player/js/player.js	Fri Jun 07 17:36:27 2013 +0200
+++ b/player/js/player.js	Mon Jun 10 18:36:46 2013 +0200
@@ -16,8 +16,6 @@
         myMedia,
         $(".video-container"),
         {
-            width: 1000,
-            height: 560,
             autostart: true,
             url_transform: function(src) {
                 return [{
@@ -32,9 +30,9 @@
     );
     
     myMedia.on("timeupdate", function(t) {
-        var progress = $(".progress-indicator"),
-            pos = ($(".chapters-bar").width() - 2 * progress.width()) * t / myMedia.duration;
-        progress.css("left",pos);
+        var pos = $(".chapters-bar").width() * t / myMedia.duration;
+        $(".progress-indicator").css("left",pos);
+        $(".elapsed").css("width", pos);
     });
     myMedia.on("play", function() {
         $(".play-button").addClass("pause");
@@ -43,9 +41,27 @@
         $(".play-button").removeClass("pause");
     });
     
+    function showAtMousePos(evt) {
+        var pos = evt.pageX - $(".timeline").offset().left;
+        $(".mouse-progress-indicator").css("left", pos);
+        return pos;
+    }
+    
+    $(".timeline").mouseenter(function(e) {
+        $(".mouse-progress-indicator").show();
+        showAtMousePos(e);
+    }).mouseleave(function(e) {
+        $(".mouse-progress-indicator").hide();
+    }).mousemove(showAtMousePos)
+    .click(function(e) {
+        myMedia.setCurrentTime( showAtMousePos(e) * myMedia.duration / $(".timeline").width());
+    });
+    
     var tags = myProject.getTags().sortBy(function(t) {
             return - t.getRelated("annotation").length;
-        }).slice(0,12),
+        }).slice(0,20).sortBy(function(t) {
+            return t.title;
+        }),
         tagTemplate = _.template('<li data-tag-id="<%- id %>" class="tag"><%- title %></li>'),
         clickedTag = null,
         lastTag = null;
@@ -54,18 +70,16 @@
     
     $(".tags-title").mouseenter(function() {
         $(".tags-list").stop().slideDown();
-    });
-    $(".tags").mouseleave(function() {
-        $(".tags-list").stop().slideUp();
-    });
-    
-    $("body").click(function() {
+    }).click(function() {
         if (clickedTag) {
             $(".found").removeClass("found");
             clickedTag = null;
         }
         return false;
     });
+    $(".tags").mouseleave(function() {
+        $(".tags-list").stop().slideUp();
+    });
     
     function showTag(tagId) {
         $(".found").removeClass("found");
@@ -84,7 +98,11 @@
     }, function() {
         showTag(clickedTag);
     }).click(function() {
-        clickedTag = lastTag;
+        if (clickedTag == lastTag) {
+            clickedTag = null
+        } else {
+            clickedTag = lastTag;
+        }
         return false;
     });
     
@@ -164,16 +182,7 @@
         }
         return false;
     });
-    
-    $(".progress-indicator").draggable({
-        axis: "x",
-        containment: "parent",
-        drag: function(e, ui) {
-            var t = myMedia.duration * parseInt(ui.helper.css("left")) / ( $(".chapters-bar").width() - 2 * ui.helper.width() );
-            myMedia.setCurrentTime(t);
-        }
-    });
-    
+        
     var pictoTemplate = _.template(
         '<li class="<%- type %>"><span class="picto"><a href="#"></a></span>'
         + '<span class="picto-title"><%- annotation.title %></span></li>'
@@ -263,7 +272,7 @@
         
         annotationinfo.both.addClass("current");
         
-        $(".chapters-bar").addClass("annotation-onscreen");
+        $(".timelines").addClass("annotation-onscreen");
         
         var annotationDiv = $(".annotation-templates ." + annotationinfo.type + "-annotation").clone();
         
@@ -504,7 +513,7 @@
                 switch (annotationinfo.annotation.content.markup) {
                     case "html":
                         annotationDiv.find(".text-contents").html(text);
-/*
+
                         var ps = annotationDiv.find(".text-contents>p"),
                             groups = [],
                             last, group;
@@ -523,7 +532,7 @@
                         groups.forEach(function(g) {
                             $(g.master).replaceWith($('<div class="column-group">').append(g.contents));
                         });
-*/
+
                     break;
                     default:
                         annotationDiv.find(".text-contents").html(
@@ -558,22 +567,94 @@
         }
         return false;
     });
+    
+    function fullScreen() {
+        var isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen,
+            el = document.querySelector("body"),
+            requestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"],
+            cancelMethods = ["cancelFullScreen","mozCancelFullScreen","webkitCancelFullScreen"];
+        if (isFull) {
+            for (var i = 0; i < cancelMethods.length; i++) {
+                if (typeof document[cancelMethods[i]] === "function") {
+                    document[cancelMethods[i]]();
+                    break;
+                }
+            }
+        } else {
+            for (var i = 0; i < requestMethods.length; i++) {
+                if (typeof el[requestMethods[i]] === "function") {
+                    el[requestMethods[i]]();
+                    break;
+                }
+            }
+        }
+        return false;
+    }
+    
+    $(".full-screen").click(fullScreen);
+    
+    $(".about").click(function() {
+        closeAnnotation();
+        var aboutBox = $(".annotation-templates .about-box").clone().appendTo($(".main-video"));
+        aboutBox.find(".close-annotation").click(closeAnnotation);
+        aboutBox.css({ top: Math.floor(($(".main-video").height() - aboutBox.height())/2)+"px" });
+    });
    
     function closeAnnotation(e) {
         currentAnnotation = null;
         $(".chip, .pictolist li").removeClass("current");
-        $(".chapters-bar").removeClass("annotation-onscreen");
+        $(".timelines").removeClass("annotation-onscreen");
         $(".annotation audio, .annotation video").each(function() {
             try {
                 this.pause();
-            } catch(e) { }
+            } catch(err) { }
         });
         $(".main-video .annotation").hide().remove();
         if (!!e) {
             myMedia.play();
         }
         return false;
-    }   
+    }
+    
+    var videoRatio = null;
+    
+    function repositionElements() {
+        var videoel = $(".video-container video");
+        if (!videoRatio) {
+            videoRatio = videoel.width() / videoel.height();
+        }
+        if (!videoRatio) {
+            return;
+        }
+        var container = $(".main-video"),
+            ch = container.height(),
+            cw = container.width(),
+            vw = Math.min(cw, ch * videoRatio),
+            vh = vw / videoRatio,
+            dw = (cw - vw) / 2,
+            dh = (ch - vh) / 2;
+        videoel.css({
+            width: vw,
+            height: vh,
+            "margin-top": dh
+        });
+        $(".pictolist").css({
+            left: dw,
+            bottom: dh
+        });
+    }
+    
+    $(".video-container video").on("loadedmetadata",repositionElements);
+    
+    $(window).resize(repositionElements);
+    
+    $(document).keydown(function(e) {
+        if (e.keyCode === 122) {
+            fullScreen();
+            return false;
+        }
+    });
+      
 });
 
 };
\ No newline at end of file