diff -r 99d281de4f31 -r 69d52a7b1b8a integration/js/edition.js
--- a/integration/js/edition.js	Thu Jun 06 17:35:51 2013 +0200
+++ b/integration/js/edition.js	Fri Jun 07 11:31:34 2013 +0200
@@ -26,8 +26,10 @@
 
 $('.timeline-annotations').on('click', '.annotation', function(e){
     e.preventDefault();
-
-    myMedia.setCurrentTime(myMedia.duration * x / $(this).width());
+    var idAnnotation = $(this).attr('data-id'),
+        annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
+    myMedia.setCurrentTime(annotation.begin);
+    openTab(annotation.type, annotation);
 });
 
 myProject.onLoad(function() {
@@ -155,8 +157,8 @@
 }
 
 function showCurrentAnnotationInTimeline(idAnnotation){
-    $('.timeline-annotations .annotation').empty();
-    $('#annotation-timeline-'+idAnnotation).html('<i class="icon-pencil"></i> '+textCurrentAnnotationEditT);
+    $('.timeline-annotations .annotation span').hide();
+    $('#annotation-timeline-'+idAnnotation+' span').show();
 }
 //display annotation view
 $('.list-current-annotations').on('click', 'a', function(e){
@@ -440,14 +442,24 @@
             //timeline
             var width = Math.floor(v.getDuration() * wTimeline / myMedia.duration),
                 left = Math.floor(v.begin * wTimeline / myMedia.duration),
-                segment = $('<div>').css({
+                dataAnntim = {
+                    left : left,
+                    width : width,
+                    color : v.color,
+                    id : v.id
+                },
+                segment = getTemplate('#tpl-annotation-in-timeline');
+                segment = Mustache.render(segment, dataAnntim);
+
+                /*
+                segment = $('<a>').css({
                     left : left,
                     width : width,
                     backgroundColor : v.color
                 }).addClass('annotation')
                 .attr('data-id', v.id)
                 .attr('id', 'annotation-timeline-'+v.id);
-
+                */
             var isInTimeline = false;
             $.each(timeline.find('li'), function(a, b){
                 if(isInTimeline) return;
@@ -596,9 +608,14 @@
                 case 'audio':
                     break;
                 case 'video':
+                    var labelModify = $(tabContent).find('.label-modify-video'),
+                        labelAdd = $(tabContent).find('.label-add-video');
                     if(viewType.content.url != ""){
                         var videoWrap = $(tabContent).find('.annotation-video-content');
                         renderVideoInfo(videoWrap, viewType.content);
+                        labelModify.show();
+                    }else{
+                        labelAdd.show();
                     }
                     break;
                 case 'text': 
@@ -729,6 +746,12 @@
 
         var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content');
         renderVideoInfo(videoWrap, currentAnnotation.content);
+
+        var labelModify = $('#tab-annotation-'+currentAnnotation.id).find('.label-modify-video'),
+            labelAdd = $('#tab-annotation-'+currentAnnotation.id).find('.label-add-video');
+
+        labelModify.show();
+        labelAdd.hide();
         
     });