# HG changeset patch
# User ymh <ymh.work@gmail.com>
# Date 1442585380 -7200
# Node ID b4c525005cde93e81ff230d00397a90debb87be6
# Parent  fb11ffa108c8c94085a88a852686e058edfb4e72
upgrade metadataplayer

diff -r fb11ffa108c8 -r b4c525005cde src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.js
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.js	Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.js	Fri Sep 18 16:09:40 2015 +0200
@@ -15,14 +15,14 @@
     display_or_write: false,
     starts_hidden: false,
     hide_without_segment: false,
-    segments_annotation_type: "chap"
+    segments_annotation_type: "chap",
 };
 
 IriSP.Widgets.AnnotationsController.prototype.template = 
     "<div class='Ldt-AnnotationsController'>"
     + "<div class='Ldt-AnnotationsController-ButtonsContainer'>"
+    + "    <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowCreateAnnotationButton'>{{l10n.write}}</div>"
     + "    <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowAnnotationsListButton'>{{l10n.display}}</div>"
-    + "    <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowCreateAnnotationButton'>{{l10n.write}}</div>"
     + "</div>"
     + "</div>"
 
@@ -46,18 +46,51 @@
     this.writeButton_$ = this.$.find(".Ldt-AnnotationsController-ShowCreateAnnotationButton");
     
     this.writeButton_$.click(function(){
-        _this.player.trigger("CreateAnnotation.toggle");
+        if (!_this.writeButton_$.hasClass("selected")){
+            _this.player.trigger("CreateAnnotation.show")
+        }
+        else {
+            _this.player.trigger("CreateAnnotation.hide")
+        }
         if (_this.display_or_write){
             _this.player.trigger("AnnotationsList.hide");
         }
     });
     this.displayButton_$.click(function(){
-        _this.player.trigger("AnnotationsList.toggle");
+        if (!_this.displayButton_$.hasClass("selected")){
+            _this.player.trigger("AnnotationsList.show")
+        }
+        else {
+            _this.player.trigger("AnnotationsList.hide")
+        }
         if (_this.display_or_write){
             _this.player.trigger("CreateAnnotation.hide");
         }
     })
-    this.onMediaEvent("timeupdate", "onTimeUpdate")
+    
+    if(this.hide_without_segment){
+        this.onMediaEvent("timeupdate", function(){
+            _this.refresh();
+        })
+        this.onMediaEvent("settimerange", function(_timeRange){
+            _this.refresh(_timeRange);
+        })
+        this.segments = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
+        this.currentSegment = false
+    }
+    
+    this.onMdpEvent("CreateAnnotation.hide", function(){
+        _this.writeButton_$.toggleClass("selected", false);
+    })
+    this.onMdpEvent("CreateAnnotation.show", function(){
+        _this.writeButton_$.toggleClass("selected", true);
+    })
+    this.onMdpEvent("AnnotationsList.hide", function(){
+        _this.displayButton_$.toggleClass("selected", false);
+    })
+    this.onMdpEvent("AnnotationsList.show", function(){
+        _this.displayButton_$.toggleClass("selected", true);
+    })
     
     if (this.starts_hidden) {
         this.visible = true
@@ -70,25 +103,57 @@
     
 };
 
-IriSP.Widgets.AnnotationsController.prototype.onTimeUpdate = function(){
+IriSP.Widgets.AnnotationsController.prototype.refresh = function(_timeRange){
+    _timeRange = typeof _timeRange !== 'undefined' ? _timeRange : false ;
+    
+    if(!_timeRange){
+        if (this.media.getTimeRange()){
+            _timeRange = this.media.getTimeRange();
+        }
+    }
+    
     if (this.hide_without_segment){
-        _currentTime = this.media.getCurrentTime() 
-        _segmentsAnnotations = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
-        _currentSegments = _segmentsAnnotations.filter(function(_segment){
-            return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
-        });
-        if (_currentSegments.length == 0){
+        if (!_timeRange && !this.media.getTimeRange()){
+            _currentTime = this.media.getCurrentTime() 
+            _currentSegments = this.segments.filter(function(_segment){
+                return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+            });
+            if(_currentSegments.length > 0){
+                currentSegment = true;
+            }
+            else {
+                currentSegment = false;
+            }
+        }
+        else {
+            var _timeRangeBegin = _timeRange[0],
+                _timeRangeEnd = _timeRange[1];
+            _currentSegments = this.segments.filter(function(_segment){
+                return (_timeRangeBegin == _segment.begin && _timeRangeEnd == _segment.end)
+            });
+            if(_currentSegments.length > 0){
+                currentSegment = true;
+            }
+            else {
+                currentSegment = false;
+            }
+        }
+        if (!currentSegment && _currentSegments.length == 0){
             if (this.visible){
                 this.hide();
-                _this.player.trigger("CreateAnnotation.hide");
-                _this.player.trigger("AnnotationsList.hide");
+                this.writeButton_$.toggleClass("selected", false);
+                this.displayButton_$.toggleClass("selected", false);
+                this.player.trigger("CreateAnnotation.hide");
+                this.player.trigger("AnnotationsList.hide");
             }
         }
         else {
             if (!this.visible){
                 this.show();
-                _this.player.trigger("CreateAnnotation.hide");
-                _this.player.trigger("AnnotationsList.hide");
+                this.writeButton_$.toggleClass("selected", false);
+                this.displayButton_$.toggleClass("selected", false);
+                this.player.trigger("CreateAnnotation.hide");
+                this.player.trigger("AnnotationsList.hide");
             }
         }
     }
diff -r fb11ffa108c8 -r b4c525005cde src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.css
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.css	Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.css	Fri Sep 18 16:09:40 2015 +0200
@@ -1,9 +1,14 @@
 /* AnnotationsListWidget */
 
+#ui-datepicker-div
+{
+    display: none;
+}
+
 .Ldt-AnnotationsListWidget {
     border: none; margin: 0; padding: 0;
     overflow: auto;
-    max-height: 480px;
+    max-height: 380px;
 }
 .Ldt-AnnotationsListWidget a {
     text-decoration: none;
@@ -40,11 +45,12 @@
 	margin: 4px 2px;
 }
 
-ul.Ldt-AnnotationsList-ul {
+ul.Ldt-AnnotationsList-ul, ul.Ldt-AnnotationsList-ul-toDelete  {
     list-style: none;
-    padding: 2px;
-    margin: 0;
+    padding: 0px;
+    margin: 0px;
 }
+
 li.Ldt-AnnotationsList-li {
     width: 100%;
     clear: both;
@@ -68,6 +74,21 @@
     max-height: 100%;
     margin: 0 auto;
 }
+
+.Ldt-AnnotationsList-DeleteButton {
+	margin: 0px;
+	float: right;
+	font-size: 20px;
+	position: relative;
+	top: -50px;
+	left: -5px;
+	color: #787878
+}
+.Ldt-AnnotationsList-DeleteButton:hover {
+	color: #f7268e;
+	cursor: pointer;
+}
+
 .Ldt-AnnotationsList-Duration {
     color: #f7268e;
     float: right;
@@ -139,4 +160,26 @@
 
 .Ldt-AnnotationsList-Play:hover {
     background-position: 0 bottom;
+}
+
+.Ldt-AnnotationsList-ScreenMain{
+	margin: 0px;
+	padding: 0px;
+}
+
+.Ldt-AnnotationsList-ScreenDelete, .Ldt-AnnotationsList-ScreenSending, 
+.Ldt-AnnotationsList-ScreenError, .Ldt-AnnotationsList-ScreenSuccess{
+	margin-top: 15px;
+	width: 100%
+	text-align: center;
+	vertical-align: middle;
+	font-size: 14px;
+	font-weight: bold;
+	color: #68273C;
+}
+
+a.Ldt-AnnotationsList-Close {
+    position: absolute; right: 2px;
+    display: inline-block; width: 17px; height: 17px; margin: 4px;
+    background: url(img/widget-control.png);
 }
\ No newline at end of file
diff -r fb11ffa108c8 -r b4c525005cde src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js	Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js	Fri Sep 18 16:09:40 2015 +0200
@@ -12,6 +12,9 @@
 IriSP.Widgets.AnnotationsList.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.AnnotationsList.prototype.defaults = {
+    pre_draw_callback: function(){
+        return this.importUsers();
+    },
     /*
      * URL when the annotations are to be reloaded from an LDT-like segment API
      * e.g.
@@ -37,12 +40,33 @@
     start_visible: true,
     show_audio : true,
     show_filters : false,
+    keyword_filter: true,
+    date_filter: true,
+    user_filter: true,
+    segment_filter: true,
+    latest_contributions_filter: false,
+    current_day_filter: true,
+    show_header : false,
+    custom_header : false,
+    annotations_count_header : true,
     show_creation_date : false,
-    show_timecode : true, 
+    show_timecode : true,
     /*
      * Only annotation in the current segment will be displayed. Designed to work with the Segments Widget.
      */
+    allow_annotations_deletion: false,
+    /*
+     * URL to call when deleting annotation. Expects a mustache template with {{annotation_id}}, ex /api/anotations/{{annotation_id}}/
+     */
+    api_delete_endpoint : "",
+    api_delete_method: "DELETE",
+    api_users_endpoint: "",
+    api_users_method: "GET",
+    make_name_string_function: function(params){
+        return params.username ? params.username : "Anonymous";
+    },
     filter_by_segments: false,
+    segment_filter: true,
     segments_annotation_type: "chap",
     /*
      * Set to a username if you only want to display annotations from a given user
@@ -51,7 +75,6 @@
     /*
      * Show a text field that filter annotations by username
      */
-    filter_by_user: false,
     tags : true,
     polemics : [{
         keyword: "++",
@@ -68,41 +91,126 @@
     }]
 };
 
+IriSP.Widgets.AnnotationsList.prototype.importUsers = function(){
+    if (!this.source.users_data){
+        this.usernames = Array();
+        var _this = this,
+            _list = this.getWidgetAnnotations(),
+            usernames_list_string = "";
+        
+        _list.forEach(function(_annotation){
+            if(_this.usernames.indexOf(_annotation.creator) == -1){
+                _this.usernames.push(_annotation.creator);
+            }
+        });
+        this.usernames.forEach(function(_username){
+            usernames_list_string+=_username+","
+        })
+        usernames_list_string = usernames_list_string.substring(0, usernames_list_string.length - 1);
+        _url = Mustache.to_html(this.api_users_endpoint, {usernames_list_string: encodeURIComponent(usernames_list_string), usernames_list_length: this.usernames.length});
+        return IriSP.jQuery.ajax({
+            async: false,
+            url: _url,
+            type: "GET",
+            success: function(_data) {
+                _this.source.users_data = _data.objects
+            },
+            error: function(_xhr, _error, _thrown) {
+                console.log(_xhr)
+                console.log(_error)
+                console.log(_thrown)
+            }
+        })
+    }
+}
+
 IriSP.Widgets.AnnotationsList.prototype.messages = {
     en: {
         voice_annotation: "Voice Annotation",
-        now_playing: "Now playing..."
+        now_playing: "Now playing...",
+        everyone: "Everyone",
+        header: "Annotations for this content",
+        segment_filter: "All cuttings",
+        latest_contributions: "Latest contributions",
+        close_widget: "Close",
+        confirm: "Confirm",
+        cancel: "Cancel",
+        annotation_deletion_delete: "You will delete this annotation : ",
+        annotation_deletion_sending: "Your deletion request is being sent ... ",
+        annotation_deletion_success: "The annotation has been deleted.",
+        annotation_deletion_error: "There was an error contacting the server. The annotation has not been deleted."
     },
     fr: {
         voice_annotation: "Annotation Vocale",
-        now_playing: "Lecture en cours..."
+        now_playing: "Lecture en cours...",
+        everyone: "Tous",
+        header: "Annotations sur ce contenu",
+        segment_filter: "Tous les segments",
+        latest_contributions: "Dernières contributions",
+        close_widget: "Fermer",
+        confirm: "Confirmer",
+        cancel: "Annuler",
+        annotation_deletion_delete: "Vous allez supprimer cette annotation: ",
+        annotation_deletion_sending: "Votre demande de suppression est en cours d'envoi ... ",
+        annotation_deletion_success: "L'annotation a été supprimée.",
+        annotation_deletion_error: "Une erreur s'est produite en contactant le serveur. L'annotation n'a pas été supprimée."
     }
 };
 
 IriSP.Widgets.AnnotationsList.prototype.template =
-    '<div class="Ldt-AnnotationsListWidget">'
-    + '{{#show_filters}}'
-    + '<div class="Ldt-AnnotationsList-Filters">'
-    +    '<input class="Ldt-AnnotationsList-filter-text" type="text" value="Mot-clés"></input>'
-    +    '<select class="Ldt-AnnotationsList-filter-dropdown"></select>'
-    +    '<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox">Toutes annotations</label>'
-    + '</div>'
-    + '{{/show_filters}}'
-    + '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
-    + '<ul class="Ldt-AnnotationsList-ul">'
-    + '</ul>'
+    '{{#show_header}}<p class="Ldt-AnnotationsList-header">'
+    +     '{{#custom_header}}{{custom_header}}{{/custom_header}}'
+    +     '{{^custom_header}}{{l10n.header}}{{/custom_header}}'
+    + '</p>{{/show_header}}'
+    + '<div class="Ldt-AnnotationsListWidget">'
+    +     '<div class="Ldt-AnnotationsList-ScreenMain">'
+    +         '{{#show_filters}}'
+    +         '<div class="Ldt-AnnotationsList-Filters">'
+    +             '{{#keyword_filter}}<input class="Ldt-AnnotationsList-filter-text" id="Ldt-AnnotationsList-keywordsFilter" type="text" value=""></input>{{/keyword_filter}}'
+    +             '{{#user_filter}}<select class="Ldt-AnnotationsList-filter-dropdown" id="Ldt-AnnotationsList-userFilter"><option selected value="">{{l10n.everyone}}</option></select>{{/user_filter}}'
+    +             '{{#date_filter}}<label class="Ldt-AnnotationsList-filter-date">Date: <input id="Ldt-AnnotationsList-dateFilter" type="text"></input></label>{{/date_filter}}'
+    +             '{{#segment_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-ignoreSegmentsFilter">{{l10n.segment_filter}}</label>{{/segment_filter}}'
+    +             '{{#latest_contributions_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-latestContributionsFilter">{{l10n.latest_contributions}}</label>{{/latest_contributions_filter}}'
+    +         '</div>'
+    +         '{{/show_filters}}'
+    +         '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
+    +         '<ul class="Ldt-AnnotationsList-ul">'
+    +         '</ul>'
+    +     '</div>'    
+    +     '{{#allow_annotations_deletion}}'
+    +     '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenDelete">'
+    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>' 
+    +         '<ul class="Ldt-AnnotationsList-ul-ToDelete"></ul>'
+    +         '{{l10n.annotation_deletion_delete}} <a class="Ldt-AnnotationsList-ConfirmDelete">{{l10n.confirm}}</a> <a class="Ldt-AnnotationsList-CancelDelete">{{l10n.cancel}}</a>'
+    +     '</div>'
+    +     '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenSending">'
+    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'  
+    +         '{{l10n.annotation_deletion_sending}}'
+    +     '</div>'
+    +     '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenSuccess">'
+    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'  
+    +         '{{l10n.annotation_deletion_success}}'
+    +     '</div>'
+    +     '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenError">'
+    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'  
+    +         '{{l10n.annotation_deletion_error}}'
+    +     '</div>'
+    +     '{{/allow_annotations_deletion}}'
     + '</div>';
 
 IriSP.Widgets.AnnotationsList.prototype.annotationTemplate = 
     '<li class="Ldt-AnnotationsList-li Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">'
-    + '<div class="Ldt-AnnotationsList-ThumbContainer">'
+    + '<div id="{{id}}" class="Ldt-AnnotationsList-ThumbContainer Ldt-AnnotationsList-Annotation-Screen Ldt-AnnotationsList-Annotation-ScreenMain">'
     + '<a href="{{url}}" draggable="true">'
     + '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
     + '</a>'
     + '</div>'
+    + '{{#allow_annotations_deletion}}'
+    + '<div id={{id}} class="Ldt-AnnotationsList-DeleteButton">&#10006;</div>'
+    + '{{/allow_annotations_deletion}}'
     + '{{#show_timecode}}<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>{{/show_timecode}}'
     + '<h3 class="Ldt-AnnotationsList-Title" draggable="true">'
-    + '<a href="{{url}}">{{{htitle}}}</a>'
+    + '<a {{#url}} href="{{url}}" {{/url}}>{{{htitle}}}</a>'
     + '</h3>'
     + '<p class="Ldt-AnnotationsList-Description">{{{hdescription}}}</p>'
     + '{{#created}}'
@@ -119,7 +227,7 @@
     + '{{/tags}}'
     + '</ul>'
     + '{{/tags.length}}'
-    + '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-annotation-id="{{id}}">{{l10n.voice_annotation}}</div>{{/audio}}'
+    + '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-annotation-id="{{id}}">{{l10n.voice_annotation}}</div>{{/audio}}'    
     + '</li>';
 
 // obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project
@@ -139,6 +247,11 @@
     }, this.metadata));
 };
 
+IriSP.Widgets.AnnotationsList.prototype.showScreen = function(_screenName) {
+    this.$.find('.Ldt-AnnotationsList-Screen' + _screenName).show()
+        .siblings().hide();
+}
+
 IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function() {
     var _currentTime = this.media.getCurrentTime();
     var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);
@@ -177,15 +290,23 @@
     _list = _list.filter(function(_annotation) {
         return _annotation.found !== false;
     });
-    if (this.filter_by_segments) {
+    
+    if ((this.filter_by_segments)&&(!(this.show_filters && this.segment_filter && this.ignoresegmentcheckbox_$[0].checked))) {
         /*
          *  A given annotation is considered "in" segment if the middle of it is between the segment beginning and the segment end. 
          *  Note this is meant to be used for "markings" annotations (not segments)
          */
         _segmentsAnnotation = this.currentSource.getAnnotationsByTypeTitle(this.segments_annotation_type)
-        _currentSegments = _segmentsAnnotation.filter(function(_segment){
-            return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
-        });
+        if (this.media.getTimeRange()){
+            _currentSegments = _segmentsAnnotation.filter(function(_segment){
+                return (_this.media.getTimeRange()[0] == _segment.begin && _this.media.getTimeRange()[1] == _segment.end)
+            });
+        }
+        else {
+            _currentSegments = _segmentsAnnotation.filter(function(_segment){
+                return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+            });
+        }
         if (_currentSegments.length == 0) {
             _list = _list.filter(function(_annotation){
                 return false;
@@ -197,6 +318,10 @@
                 return (_currentSegments[0].begin <= _annotation_time && _currentSegments[0].end >= _annotation_time)
             });
         }
+        if(this.annotations_count_header && this.annotations_count != _list.length){
+            this.annotations_count = _list.length;
+            this.refreshHeader();
+        }
     }
     if (this.show_only_annotation_from_user){
         _list = _list.filter(function(_annotation){
@@ -209,6 +334,7 @@
             return Math.abs((_annotation.begin + _annotation.end) / 2 - _currentTime);
         }).slice(0, this.limit_count);
     }
+    
     if (this.newest_first) {
         _list = _list.sortBy(function(_annotation) {
             return -_annotation.created.valueOf();
@@ -219,6 +345,49 @@
         });
     }
     
+    if (this.show_filters){
+        if (this.user_filter){
+            _username = this.userselect_$[0].options[this.userselect_$[0].selectedIndex].value;
+            if (_username != "false")
+            {
+                _list = _list.filter(function(_annotation){
+                    return _annotation.creator == _username
+                })
+            }
+        }
+        if (this.keyword_filter){
+        _keyword = this.keywordinput_$[0].value;
+            if (_keyword != ""){
+                _list = _list.filter(function(_annotation){
+                   return _annotation.description.toLowerCase().match(_keyword.toLowerCase());
+                });
+            }
+        }
+        if (this.date_filter){
+            if(this.datefilterinput_$[0].value != ""){
+                _date = this.datefilterinput_$.datepicker("getDate");
+                _list = _list.filter(function(_annotation){
+                    return ((_annotation.created.getDate() == _date.getDate())&&(_annotation.created.getMonth() == _date.getMonth())&&(_annotation.created.getFullYear() == _date.getFullYear()));
+                });
+            }
+        }
+        if (this.latest_contributions_filter && this.latestcontributionscheckbox_$[0].checked){
+            _list = _list.sortBy(function(_annotation) {
+                return -_annotation.created.valueOf();
+            });
+            this.usernames.forEach(function(_user){
+                
+                latest_ann = _list.filter(function(_annotation){
+                    return _annotation.creator == _user;
+                })[0];
+                _list = _list.filter(function(_annotation){
+                    return _annotation.id == (latest_ann ? latest_ann.id : false) || _annotation.creator != _user;
+                });
+            });
+        }
+        
+    }
+    
     var _ids = _list.idIndex;
     
     if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds) || this.searchString !== this.lastSearch) {
@@ -246,10 +415,21 @@
             );
             var _title = "",
                 _description = _annotation.description,
-                _thumbnail = (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail);
+                _thumbnail = (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail)
+            
             // Update : display creator
             if (_annotation.creator) {
-                _title = _annotation.creator;
+                var _users = _this.source.users_data.filter(function(_user_data){
+                    return _user_data.username == _annotation.creator
+                }),
+                    _user = {};
+                if (_users.length == 0){
+                    _user.username = _annotation.creator
+                }
+                else{
+                    _user = _users[0]
+                }
+                _title = _this.make_name_string_function(_user);
             }
             if (_annotation.title) {
                 var tempTitle = _annotation.title;
@@ -288,7 +468,8 @@
                 url : _url,
                 tags : _tags,
                 specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
-                l10n: _this.l10n
+                l10n: _this.l10n,
+                allow_annotations_deletion: _this.allow_annotations_deletion
             };
             if (_this.show_audio && _annotation.audio && _annotation.audio.href && _annotation.audio.href != "null") {
                 _data.audio = true;
@@ -334,6 +515,9 @@
                 .mouseout(function() {
                     _annotation.trigger("unselect");
                 })
+                .click(function() {
+                    _annotation.trigger("click");
+                })
                 .appendTo(_this.list_$);
             IriSP.attachDndData(_el.find("[draggable]"), {
                 title: _title,
@@ -377,6 +561,8 @@
                 _$.html(IriSP.textFieldHtml(_$.text(), rx));
             });
         }
+
+        this.$.find(".Ldt-AnnotationsList-DeleteButton").click(_this.functionWrapper("onDeleteClick"))
     }
     
     if (this.ajax_url) {
@@ -392,17 +578,90 @@
     return _list.length;
 };
 
+IriSP.Widgets.AnnotationsList.prototype.onDeleteClick = function(event){
+    
+    ann_id = event.target.id;
+    delete_preview_$ = this.$.find(".Ldt-AnnotationsList-ul-ToDelete");
+    delete_preview_$.html("");
+    _list = this.getWidgetAnnotations()
+    _list = _list.filter(function(_annotation){
+        return _annotation.id == ann_id
+    })
+    var _annotation = _list[0],
+        _title = "",
+        _this = this;
+    if (_annotation.creator) {
+        var _users = _this.source.users_data.filter(function(_user_data){
+            return _user_data.username == _annotation.creator
+        }),
+            _user = {};
+        if (_users.length == 0){
+            _user.username = _annotation.creator
+        }
+        else{
+            _user = _users[0]
+        }
+        _title = _this.make_name_string_function(_user);
+    }
+    if (_annotation.title) {
+        var tempTitle = _annotation.title;
+        if( tempTitle.substr(0, _title.length + 1) == (_title + ":") ){
+            _title = "";
+        }
+        _title = _title + ( (_title=="") ? "" : ": ") + _annotation.title;
+    }
+    var _created = false;
+    if (this.show_creation_date) {
+        _created = _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString();
+    }
+    var _data = {
+            id : _annotation.id,
+            media_id : _annotation.getMedia().id,
+            htitle : IriSP.textFieldHtml(_title),
+            hdescription : IriSP.textFieldHtml(_annotation.description),
+            begin : _annotation.begin.toString(),
+            end : _annotation.end.toString(),
+            created : _created,
+            show_timecode : this.show_timecode,
+            tags : false,
+            l10n: this.l10n,
+            allow_annotations_deletion: false
+    }
+    _html = Mustache.to_html(this.annotationTemplate, _data)
+    delete_preview_$.html(_html)
+    
+    this.$.find(".Ldt-AnnotationsList-ConfirmDelete").click(function(){
+        _this.sendDelete(ann_id);
+    });
+    
+    this.showScreen("Delete");    
+}
+
+IriSP.Widgets.AnnotationsList.prototype.refreshHeader = function() {
+    var annotation_count_string = " (" + this.annotations_count +" annotations)";
+    this.$.find('.Ldt-AnnotationsList-header').html("");
+    this.$.find('.Ldt-AnnotationsList-header').html(
+        this.custom_header && typeof this.custom_header == "string"? this.custom_header + annotation_count_string : this.l10n.header + annotation_count_string
+    );
+}
+
 IriSP.Widgets.AnnotationsList.prototype.hide = function() {
+    var _this = this;
     if (this.visible){
         this.visible = false;
-        this.widget_$.slideUp()
+        this.widget_$.slideUp(function(){
+            _this.$.find('.Ldt-AnnotationsList-header').hide();            
+        });
+        this.showScreen("Main")
     }
 }
 
 IriSP.Widgets.AnnotationsList.prototype.show = function() {
     if(!this.visible){
         this.visible = true;
-        this.widget_$.slideDown()
+        this.$.find('.Ldt-AnnotationsList-header').show();
+        this.widget_$.slideDown();
+        this.showScreen("Main")
     }
 }
 
@@ -417,18 +676,88 @@
     }
 };
 
+IriSP.Widgets.AnnotationsList.prototype.revertToMainScreen = function(){
+    if (this.$.find(".Ldt-AnnotationsList-ScreenMain").is(":hidden")){
+        this.showScreen("Main");
+    }
+}
+
+IriSP.Widgets.AnnotationsList.prototype.sendDelete = function(id){
+    var _this = this,
+        _url = Mustache.to_html(this.api_delete_endpoint, {annotation_id: id})
+    
+    IriSP.jQuery.ajax({
+        url: _url,
+        type: this.api_delete_method,
+        contentType: 'application/json',
+        success: function(_data) {
+            _this.showScreen('Success');
+            window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 2000));
+            _this.currentSource.getAnnotations().removeId(id);
+            _this.player.trigger("AnnotationsList.refresh");
+        },
+        error: function(_xhr, _error, _thrown) {
+            IriSP.log("Error when sending annotation", _thrown);
+            _this.showScreen('Error');
+            window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 2000));
+        }
+    });
+    this.showScreen('Sending');
+}
+
 IriSP.Widgets.AnnotationsList.prototype.draw = function() {
-    
     this.jwplayers = {};
     this.mashupMode = (this.media.elementType === "mashup");
     
     this.renderTemplate();
     
     var _this = this;
-        
+    
     this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
     this.widget_$ = this.$.find(".Ldt-AnnotationsListWidget");
     
+    if (this.show_filters){
+        if (this.user_filter){
+            this.userselect_$ = this.$.find("#Ldt-AnnotationsList-userFilter");
+            this.userselect_$.change(function(){
+                _this.player.trigger("AnnotationsList.refresh");
+            });
+            this.userselect_$.html("<option selected value='false'>"+this.l10n.everyone+"</option>");
+            this.usernames.forEach(function(_user){
+                _this.userselect_$.append("<option value='"+_user+"'>"+_user+"</option>");
+            });
+        }
+        if (this.keyword_filter){
+            this.keywordinput_$ = this.$.find("#Ldt-AnnotationsList-keywordsFilter");
+            this.keywordinput_$.keyup(function(){
+                _this.player.trigger("AnnotationsList.refresh");
+            });
+            
+        }
+        if (this.segment_filter){
+            this.ignoresegmentcheckbox_$ = this.$.find("#Ldt-AnnotationsList-ignoreSegmentsFilter");
+            this.ignoresegmentcheckbox_$.click(function(){
+                _this.player.trigger("AnnotationsList.refresh");
+            });
+        }
+        if(this.date_filter){
+            this.datefilterinput_$ = this.$.find("#Ldt-AnnotationsList-dateFilter");
+            this.datefilterinput_$.datepicker({ dateFormat: 'dd/mm/yy' });
+            this.datefilterinput_$.change(function(){
+                _this.player.trigger("AnnotationsList.refresh")
+            })
+            if (this.current_day_filter){
+                currentDate = new Date();
+                this.datefilterinput_$.datepicker("setDate",currentDate);
+            }
+        }
+        if(this.latest_contributions_filter){
+            this.latestcontributionscheckbox_$ = this.$.find("#Ldt-AnnotationsList-latestContributionsFilter");
+            this.latestcontributionscheckbox_$.click(function(){
+                _this.player.trigger("AnnotationsList.refresh");
+            });
+        }
+    }
     
     this.source.getAnnotations().on("search", function(_text) {
         _this.searchString = _text;
@@ -449,6 +778,11 @@
             _this.currentSource.getAnnotations().trigger("clear-search");
         }
     });
+    
+    this.$.find(".Ldt-AnnotationsList-Close").click(function(){
+        _this.showScreen("Main");
+    })
+    
     this.source.getAnnotations().on("search-cleared", function() {
         _this.throttledRefresh();
     });
@@ -480,15 +814,20 @@
         }, this.refresh_interval);
     }
     
+    if (this.annotations_count_header){
+        this.annotations_count = false;
+    }
+    
     this.onMdpEvent("AnnotationsList.toggle","toggle");
     this.onMdpEvent("AnnotationsList.hide", "hide");
     this.onMdpEvent("AnnotationsList.show", "show");
     
-    this.onMdpEvent("createAnnotationWidget.addedAnnotation", "refresh");
+    this.onMdpEvent("createAnnotationWidget.addedAnnotation", this.throttledRefresh);
     var _events = [
         "timeupdate",
         "seeked",
-        "loadedmetadata"
+        "loadedmetadata",
+        "settimerange"
     ];
     for (var _i = 0; _i < _events.length; _i++) {
         this.onMediaEvent(_events[_i], this.throttledRefresh);
@@ -496,9 +835,13 @@
     
     this.throttledRefresh();
     
+    this.showScreen("Main");
+    this.$.find(".Ldt-AnnotationsList-CancelDelete").click(function(){
+        _this.showScreen("Main")
+    });
+    
     this.visible = true;
     if (!this.start_visible){
         this.hide();
     }
-    
 };
diff -r fb11ffa108c8 -r b4c525005cde src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.css
--- a/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.css	Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.css	Fri Sep 18 16:09:40 2015 +0200
@@ -43,7 +43,8 @@
     color: #ff3b77
 }
 
-.Ldt-CreateAnnotation-Submit {
+.Ldt-CreateAnnotation-Submit,
+.Ldt-CreateAnnotation-Cancel{
     position: absolute;
     bottom: 7px;
     right: 7px;
diff -r fb11ffa108c8 -r b4c525005cde src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js
--- a/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js	Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js	Fri Sep 18 16:09:40 2015 +0200
@@ -51,7 +51,10 @@
     project_id: "",
     after_send_timeout: 0,
     close_after_send: false,
-    tag_prefix: "#"
+    tag_prefix: "#",
+    pause_when_displaying: false,
+    custom_send_button: false,
+    custom_cancel_button: false,
 };
 
 IriSP.Widgets.CreateAnnotation.prototype.messages = {
@@ -60,6 +63,7 @@
         to_time: "to",
         at_time: "at",
         submit: "Submit",
+        cancel: "Cancel",
         add_keywords_: "Add keywords:",
         add_polemic_keywords_: "Add polemic attributes :",
         your_name_: "Your name:",
@@ -81,6 +85,7 @@
         to_time: "à",
         at_time: "à",
         submit: "Envoyer",
+        cancel: "Annuler",
         add_keywords_: "Ajouter des mots-clés\u00a0:",
         add_polemic_keywords_: "Ajouter des attributs polémiques\u00a0:",
         your_name_: "Votre nom\u00a0:",
@@ -111,7 +116,8 @@
     + '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator empty" value="{{creator_name}}" {{#creator_field_readonly}}readonly{{/creator_field_readonly}}/>{{/show_creator_field}}</h3>'
     + '<textarea class="Ldt-CreateAnnotation-Description empty" placeholder="{{l10n.type_description}}"></textarea>'
     + '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>'
-    + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />'
+    + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{#custom_send_button}}{{custom_send_button}}{{/custom_send_button}}{{^custom_send_button}}{{l10n.submit}}{{/custom_send_button}}" />'
+    + '<input type="button" class="Ldt-CreateAnnotation-Cancel" value="{{#custom_cancel_button}}{{custom_cancel_button}}{{/custom_cancel_button}}{{^custom_cancel_button}}{{l10n.cancel}}{{/custom_cancel_button}}" />'
     + '{{#show_mic_record}}<div class="Ldt-CreateAnnotation-RecBlock"><div class="Ldt-CreateAnnotation-RecLabel">Add voice annotation</div>'
     + '    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="220" height="160">'
     + '        <param name="movie" value="{{record_swf}}" />'
@@ -223,6 +229,9 @@
             }
         });
     }
+    this.$.find(".Ldt-CreateAnnotation-Cancel").click(function() {
+        _this.player.trigger("CreateAnnotation.hide");
+    });
     this.$.find(".Ldt-CreateAnnotation-Close").click(function() {
         _this.close_after_send
         ? _this.hide()
@@ -270,6 +279,9 @@
 IriSP.Widgets.CreateAnnotation.prototype.show = function() {
     if (!this.visible){
         this.visible = true;
+        if (this.pause_when_displaying){
+            this.media.pause();
+        }
         this.showScreen('Main');
         this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666").addClass("empty");
         if (this.show_title_field) {
diff -r fb11ffa108c8 -r b4c525005cde src/ldt/ldt/static/ldt/metadataplayer/CurrentSegmentInfobox.css
--- a/src/ldt/ldt/static/ldt/metadataplayer/CurrentSegmentInfobox.css	Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CurrentSegmentInfobox.css	Fri Sep 18 16:09:40 2015 +0200
@@ -39,10 +39,96 @@
 	font-weight: bold;
 }
 
+textarea.Ldt-CurrentSegmentInfobox-DescriptionInput.Ldt-CurrentSegmentInfobox-Description{
+	display: inline-block;
+	width: 95%;
+}
+
 .Ldt-CurrentSegmentInfobox-Tags{
 }
 
 .Ldt-CurrentSegmentInfobox-NoSegment{
 	font-size: 15px;
 	font-weight: bold;
+}
+
+.Ldt-CurrentSegmentInfobox-SubmitButton{
+	display: inline-block;
+    background-color: #d93c71;
+    color: #ffffff;
+    float: right;
+    cursor: pointer;
+    height: 14px;
+    width: 100px;
+    margin: 2px;
+    margin-top: 5px;
+    padding: 2px;
+    font-size: 11px;
+    border: 1px solid;
+    border-color: #eca3bc #631e34 #36101c #e16e93;
+    cursor: pointer;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.Ldt-CurrentSegmentInfobox-CancelButton{
+	display: inline-block;
+    background-color: #d93c71;
+    color: #ffffff;
+    float: right;
+    cursor: pointer;
+    height: 14px;
+    width: 100px;
+    margin: 2px;
+    margin-top: 5px;
+    margin-right: 5px;
+    padding: 2px;
+    font-size: 11px;
+    border: 1px solid;
+    border-color: #eca3bc #631e34 #36101c #e16e93;
+    cursor: pointer;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.Ldt-CurrentSegmentInfobox-CreateTagButton{
+	display: block;
+    background-color: #d93c71;
+    color: #ffffff;
+    cursor: pointer;
+    height: 14px;
+    width: 75px;
+    margin: 2px;
+    padding: 2px;
+    font-size: 11px;
+    border: 1px solid;
+    border-color: #eca3bc #631e34 #36101c #e16e93;
+    cursor: pointer;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.Ldt-CurrentSegmentInfobox-Tags-Li-Input{
+	width: 80px;
+}
+
+.Ldt-CurrentSegmentInfobox-CreateTagButton:hover, .Ldt-CurrentSegmentInfobox-CancelButton:hover,
+.Ldt-CurrentSegmentInfobox-SubmitButton:hover{
+	background-color: #e15581;
+	border-color: #222222 #e87d9f #f0adc3 #68273c;
+}
+
+.Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton{
+	font-weight: bold;
+	color: #d93c71
+}
+
+.Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton:hover{
+	color: #e16e93
+}
+
+.Ldt-CurrentSegmentInfobox-CreateTagInput{
+    border: 2px solid #848484;
+    margin: 5px 0;
+    padding: 4px;
 }
\ No newline at end of file
diff -r fb11ffa108c8 -r b4c525005cde src/ldt/ldt/static/ldt/metadataplayer/CurrentSegmentInfobox.js
--- a/src/ldt/ldt/static/ldt/metadataplayer/CurrentSegmentInfobox.js	Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CurrentSegmentInfobox.js	Fri Sep 18 16:09:40 2015 +0200
@@ -8,69 +8,296 @@
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.defaults = {
     annotation_type: "chap",
-    readonly: true,
-    empty_message: false
+    editable_segments: false,
+    empty_message: false,
+    project_id: false,
+    api_serializer: "ldt_annotate",
+    api_method: "PUT",
+    api_endpoint_template: "",
+    new_tag_button: true,
 };
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.template = 
-    "<div class='Ldt-CurrentSegmentInfobox'>" 
-    + "    <div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title'>{{title}}</div>" 
-    + "    <div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description'>{{description}}</div>" 
-    + "    <div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags'>"
-    + '        {{#tags.length}}'
-    + '        <ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
-    + '        {{#tags}}'
-    + '            {{#.}}'
-    + '            <li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
-    + '                <span>{{.}}</span>'
-    + '            </li>'
-    + '            {{/.}}'
-    + '        {{/tags}}'
-    + '        </ul>'
-    + '        {{/tags.length}}'
-    + "    </div>" 
-    + "</div>"
+      '<div class="Ldt-CurrentSegmentInfobox">'
+    +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>'
+    +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description">{{description}}</div>' 
+    +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
+    +         '{{#tags.length}}'
+    +         '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
+    +         '{{#tags}}'
+    +             '{{#.}}'
+    +             '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
+    +                 '<span>{{.}}</span>'
+    +             '</li>'
+    +             '{{/.}}'
+    +         '{{/tags}}'
+    +         '</ul>'
+    +         '{{/tags.length}}'
+    +     '</div>'
+    + '</div>'
 
+IriSP.Widgets.CurrentSegmentInfobox.prototype.editTemplate = 
+      '<div class="Ldt-CurrentSegmentInfobox">'
+    +     '<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="{{title}}"></input>'   
+    +     '<div class="Ldt-CurrentSegmentInfobox-CancelButton">{{cancel}}</div>'
+    +     '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>'
+    +     '<textarea class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-DescriptionInput Ldt-CurrentSegmentInfobox-Description">{{description}}</textarea>'
+    +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
+    +     '{{#new_tag_button}}'
+    +         '<div class="Ldt-CurrentSegmentInfobox-CreateTagButton">{{new_tag}}</div>'
+    +     '{{/new_tag_button}}'
+    +     '{{^new_tag_button}}'
+    +         '<input class="Ldt-CurrentSegmentInfobox-CreateTagInput" placeholder="{{new_tag}}"></input>'
+    +     '{{/new_tag_button}}'
+    +         '{{#tags.length}}'
+    +         '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
+    +         '{{#tags}}'
+    +             '{{#.}}'
+    +             '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
+    +                 '<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="{{.}}"></input>'
+    +                 '<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">{{delete_tag}}</div>'
+    +             '</li>'
+    +             '{{/.}}'
+    +         '{{/tags}}'
+    +         '</ul>'
+    +         '{{/tags.length}}'
+    +     '</div>'
+    + '</div>'
+    
 IriSP.Widgets.CurrentSegmentInfobox.prototype.messages = {
     fr : {
+        submit : "Soumettre",
+        cancel : "Annuler",
+        new_tag : "Nouveau tag",
+        delete_tag : "Supprimer",
         empty : "Le player vidéo ne lit actuellement aucun segment"
     },
     en: {
-        empty: "The player currently doesn't read any segment"
+        submit : "Submit",
+        cancel : "Cancel",
+        new_tag : "New tag",
+        delete_tag : "Delete tag",
+        empty : "The player currently doesn't read any segment"
     }
 }    
     
 IriSP.Widgets.CurrentSegmentInfobox.prototype.draw = function() {
     var _this = this;
     this.segments = this.getWidgetAnnotations();
-    
     this.renderTemplate();
+    this.currentSegment = false;
+    this.clearBox();
     this.refresh();
+    this.onMediaEvent("timeupdate", "refresh");
+    this.onMediaEvent("settimerange", function(_timeRange){
+        var _segmentBegin = _timeRange[0],
+            _segmentEnd = _timeRange[1],
+            _list = _this.segments.filter(function(_segment){
+                return _segment.begin.milliseconds == _segmentBegin.milliseconds && _segment.end.milliseconds == _segmentEnd.milliseconds
+            });
+        if (_list.length >0){
+            _this.$.toggleClass("editing", false);
+            if (_this.currentSegment.id != _list[0].id){
+                _this.currentSegment = _list[0];
+                _data = {
+                    title: _this.currentSegment.title,
+                    description : _this.currentSegment.description,
+                    tags : _this.currentSegment.getTagTexts()
+                }
+                _this.$.html(Mustache.to_html(_this.template, _data))
+                if(_this.editable_segments&&_this.currentSegment){
+                    _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));            
+                }
+            }
+        }
+    });
     
-    this.onMediaEvent("timeupdate", "refresh");
+    if(this.editable_segments&&this.currentSegment){
+        this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));        
+    }
+}
+
+IriSP.Widgets.CurrentSegmentInfobox.prototype.enableEditMode = function() {
+    var _this = this;
+    if(this.currentSegment){
+        _data = {
+            title: this.currentSegment.title,
+            description : this.currentSegment.description,
+            tags : this.currentSegment.getTagTexts(),
+            submit : this.l10n.submit,
+            cancel : this.l10n.cancel,
+            new_tag : this.l10n.new_tag,
+            delete_tag : this.l10n.delete_tag,
+            new_tag_button : this.new_tag_button,
+        }
+        this.$.toggleClass("editing", true);
+        this.$.html(Mustache.to_html(this.editTemplate, _data));
+        this.$.find(".Ldt-CurrentSegmentInfobox-CancelButton").click(this.functionWrapper("disableEditMode"));
+        if (this.new_tag_button){
+            this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click(this.functionWrapper("insertTagInput"));            
+        } else {
+            this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").keypress(this.functionWrapper("insertTagInputKeypress"));            
+        }
+        this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
+        this.$.find(".Ldt-CurrentSegmentInfobox-SubmitButton").click(this.functionWrapper("onSubmit"))
+    }
+}
+
+IriSP.Widgets.CurrentSegmentInfobox.prototype.disableEditMode = function() {
+    if(this.currentSegment){
+        data = {
+            title: this.currentSegment.title,
+            description : this.currentSegment.description,
+            tags : this.currentSegment.getTagTexts()
+        }
+        this.$.toggleClass("editing", false);
+        this.$.html(Mustache.to_html(this.template, _data));
+        this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode")); 
+    }
+}
+
+IriSP.Widgets.CurrentSegmentInfobox.prototype.insertTagInput = function() {
+    if((!this.currentSegment.getTagTexts().length)&&(!this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length)){
+        this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend('<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>')
+    }
+    this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append(
+        '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
+        +'<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value=""></input>'
+        +'<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">'+this.l10n.delete_tag+'</div>'
+        +'</li>');
+    this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
+}
+
+IriSP.Widgets.CurrentSegmentInfobox.prototype.insertTagInputKeypress = function(event) {
+    var keycode = (event.keyCode ? event.keyCode : event.which);
+    if(keycode == '13'){
+        if((!this.currentSegment.getTagTexts().length)&&(!this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length)){
+            this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend('<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>')
+        }
+        this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append(
+            '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
+            +'<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="'+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val() +'"></input>'
+            +'<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">'+this.l10n.delete_tag+'</div>'
+            +'</li>');
+        this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
+        this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val("");
+        return false;
+    }
+}
+
+IriSP.Widgets.CurrentSegmentInfobox.prototype.deleteTagInput = function(clickEvent) {
+    $(clickEvent.currentTarget).parent().remove();
+}
+
+IriSP.Widgets.CurrentSegmentInfobox.prototype.onSubmit = function() {
+    new_tags_titles = this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-Input").map(function(){
+        if($(this).val()){
+            return $(this).val()
+        }
+    });
+    new_title = this.$.find(".Ldt-CurrentSegmentInfobox-TitleInput").val()
+    new_description = this.$.find(".Ldt-CurrentSegmentInfobox-DescriptionInput").val()
+    
+    var _this = this,
+        _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */
+        _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}),
+        _annotation = new IriSP.Model.Annotation(this.currentSegment.id, _export); /* Création d'une annotation dans cette source avec un ID généré à la volée (param. false) */
+    
+    _annotation.setAnnotationType(this.currentSegment.getAnnotationType().id);
+    _annotation.setMedia(this.currentSegment.getMedia().id);
+    _annotation.setBegin(this.currentSegment.begin);
+    _annotation.setEnd(this.currentSegment.end);
+    _annotation.created = this.currentSegment.created;
+    _annotation.creator = this.currentSegment.creator;
+    _annotation.title = new_title /* Champ titre */
+    _annotation.description = new_description /* Champ description */
+    var _tagIds = IriSP._(new_tags_titles).map(function(_title) {
+        var _tags = _this.source.getTags(true).searchByTitle(_title, true);
+        if (_tags.length) {
+            var _tag = _tags[0];
+        }
+        else {
+            _tag = new IriSP.Model.Tag(_title.replace(/\W/g,'_'), _this.source);
+            _tag.title = _title;
+            _this.source.getTags().push(_tag);
+        }
+        return _tag.id;
+    });
+    _annotation.setTags(_tagIds);
+    _annotation.project_id = this.project_id;
+    
+    _exportedAnnotations.push(_annotation); /* Ajout de l'annotation à la liste à exporter */
+    _export.addList("annotation",_exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */    
+    
+    _url = Mustache.to_html(this.api_endpoint_template, {annotation_id: this.currentSegment.id});
+    
+    IriSP.jQuery.ajax({
+        url: _url,
+        type: this.api_method,
+        contentType: 'application/json',
+        data: _export.serialize(), /* L'objet Source est sérialisé */
+        success: function(_data) {
+            _export.getAnnotations().removeElement(_annotation, true); /* Pour éviter les doublons, on supprime l'annotation qui a été envoyée */
+            _export.deSerialize(_data); /* On désérialise les données reçues pour les réinjecter */
+            _this.source.merge(_export); /* On récupère les données réimportées dans l'espace global des données */
+            _this.segments.forEach(function(_segment){
+                if (_segment.id == _annotation.id){
+                    _this.segments.removeElement(_segment)
+                }
+            })
+            _this.segments.push(_annotation)
+            _this.currentSegment = _annotation
+            _data = {
+                title: _this.currentSegment.title,
+                description : _this.currentSegment.description,
+                tags : _this.currentSegment.getTagTexts()
+            }
+            _this.$.html(Mustache.to_html(_this.template, _data))
+            if(_this.editable_segments&&_this.currentSegment){
+                _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));             
+            }
+            _this.$.toggleClass("editing", false);
+            _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
+        },
+        error: function(_xhr, _error, _thrown) {
+            IriSP.log("Error when sending annotation", _thrown);
+            _export.getAnnotations().removeElement(_annotation, true);
+        }
+    });
 }
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.refresh = function() {
-    var _list = this.segments;
-    
-    _currentTime = this.media.getCurrentTime();
-    _list = _list.filter(function(_segment){
-        return (_segment.begin <= _currentTime && _segment.end >= _currentTime);
-    })
-    if (_list.length > 0){
-        _currentSegment = _list[0];
-        _data = {
-            title: _currentSegment.title,
-            description : _currentSegment.description,
-            tags : _currentSegment.getTagTexts()
+    if(!this.media.getTimeRange()){
+        var _currentTime = this.media.getCurrentTime();
+        var _list = this.segments.filter(function(_segment){
+            return (_segment.begin <= _currentTime && _segment.end >= _currentTime);
+        })
+        
+        if (_list.length > 0){
+            if (this.currentSegment.id != _list[0].id){
+                this.currentSegment = _list[0];
+                _data = {
+                    title: this.currentSegment.title,
+                    description : this.currentSegment.description,
+                    tags : this.currentSegment.getTagTexts()
+                }
+                this.$.html(Mustache.to_html(this.template, _data))
+                if(this.editable_segments&&this.currentSegment){
+                    this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode"));             
+                }
+            }
         }
-        this.$.html(Mustache.to_html(this.template, _data))
+        else {
+            this.currentSegment = false;
+            this.clearBox();
+        }
     }
-    else {
-        var _empty_message = this.l10n.empty
-        if (this.empty_message) {
-            _empty_message = this.empty_message
-        }
-        this.$.find(".Ldt-CurrentSegmentInfobox").html("<div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-NoSegment'>"+_empty_message+"</div>");
+}
+
+IriSP.Widgets.CurrentSegmentInfobox.prototype.clearBox = function(){
+    var _empty_message = this.l10n.empty
+    if (this.empty_message) {
+        _empty_message = this.empty_message
     }
+    this.$.find(".Ldt-CurrentSegmentInfobox").html("<div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-NoSegment'>"+_empty_message+"</div>");
 }
\ No newline at end of file
diff -r fb11ffa108c8 -r b4c525005cde src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.css
--- a/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.css	Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.css	Fri Sep 18 16:09:40 2015 +0200
@@ -25,6 +25,8 @@
 }
 
 .Ldt-LatestAnnotation-Content{
+	max-width: 230px;
+	text-align: justify;
 }
 
 .Ldt-LatestAnnotation-Title{
@@ -37,3 +39,26 @@
 	font-size: 14px;
     font-weight: bold;
 }
+
+.Ldt-LatestAnnotation-CopyEditButton{
+	display: inline-block;
+    background-color: #d93c71;
+    color: #ffffff;
+    float: right;
+    cursor: pointer;
+    height: 14px;
+    width: 100px;
+    margin: 2px;
+    padding: 2px;
+    font-size: 11px;
+    border: 1px solid;
+    border-color: #eca3bc #631e34 #36101c #e16e93;
+    cursor: pointer;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.Ldt-LatestAnnotation-CopyEditButton:hover{
+	background-color: #e15581;
+	border-color: #222222 #e87d9f #f0adc3 #68273c;
+}
\ No newline at end of file
diff -r fb11ffa108c8 -r b4c525005cde src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.js
--- a/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.js	Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.js	Fri Sep 18 16:09:40 2015 +0200
@@ -7,6 +7,9 @@
 IriSP.Widgets.LatestAnnotation.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.LatestAnnotation.prototype.defaults = {
+    pre_draw_callback: function(){
+        return this.importUsers();
+    },
     from_user: false,
     filter_by_segment: false,
     segments_annotation_type: "chap",
@@ -16,31 +19,142 @@
      * Set to a username if you only want to display annotations from a given user
      */
     show_only_annotation_from_user: false,
+    /*
+     * Displays a button that copy currently displayed annotation into CreateAnnotation input field
+     */
+    copy_and_edit_button: false,
+    /*
+     * Allows clicks on an annotation from Annotations to display the annotation content into this widget
+     */
+    selectable_annotations: false,
     empty_message: false,
     starts_hidden: false,
+    show_header: false,
+    custom_header: false,
+    make_name_string_function: function(params){
+        return params.username ? params.username : "Anonymous";
+    }, 
 };
 
+IriSP.Widgets.LatestAnnotation.prototype.messages = {
+    fr : {
+        copy_and_edit: "Copier et Editer",
+        empty : "Aucune annotation à afficher",
+        header: "Dernière annotation"
+    },
+    en: {
+        copy_and_edit: "Copy and Edit",
+        empty: "No annotation to display",
+        header: "Last annotation"
+    }
+}
+
 IriSP.Widgets.LatestAnnotation.prototype.template = 
-    "<div class='Ldt-LatestAnnotation'>"
+    "{{#show_header}}"
+    + "<p class='Ldt-LatestAnnotation-header'>"
+    +     "{{#custom_header}}{{custom_header}}{{/custom_header}}"
+    +     "{{^custom_header}}{{l10n.header}}{{/custom_header}}"
+    + "</p>"
+    + "{{/show_header}}"
+    + "<div class='Ldt-LatestAnnotation'>"
     + "</div>";
 
 IriSP.Widgets.LatestAnnotation.prototype.annotationTemplate =
     "<div class='Ldt-LatestAnnotation-Box'>"
-    + "    <div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-CreationDate'>{{{annotation_created}}}</div>" 
-    + "    <div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Title'>{{{annotation_creator}}}{{#annotation_title}}: {{{annotation_title}}}{{/annotation_title}}</div>" 
-    + "    <div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Content'>"
+    +     "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-CreationDate'>{{{annotation_created}}}</div>" 
+    +     "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Title'>{{{annotation_creator}}}{{#annotation_title}}: {{{annotation_title}}}{{/annotation_title}}</div>" 
+    +     "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Content'>"
     +         "{{{annotation_content}}}"
-    + "    </div>"
+    +     "</div>"
+    + "{{#copy_and_edit_button}}<div class='Ldt-LatestAnnotation-CopyEditButton'>{{button_text}}</div>{{/copy_and_edit_button}}"
     + "</div>"
 
+
+IriSP.Widgets.LatestAnnotation.prototype.importUsers = function(){
+    if (!this.source.users_data){
+        this.usernames = Array();
+        var _this = this,
+            _list = this.getWidgetAnnotations(),
+            usernames_list_string = "";
+        
+        _list.forEach(function(_annotation){
+            if(_this.usernames.indexOf(_annotation.creator) == -1){
+                _this.usernames.push(_annotation.creator);
+            }
+        });
+        this.usernames.forEach(function(_username){
+            usernames_list_string+=_username+","
+        })
+        usernames_list_string = usernames_list_string.substring(0, usernames_list_string.length - 1);
+        _url = Mustache.to_html(this.api_users_endpoint, {usernames_list_string: encodeURIComponent(usernames_list_string), usernames_list_length: this.usernames.length});
+        return IriSP.jQuery.ajax({
+            async: false,
+            url: _url,
+            type: "GET",
+            success: function(_data) {
+                _this.source.users_data = _data.objects
+            },
+            error: function(_xhr, _error, _thrown) {
+                console.log(_xhr)
+                console.log(_error)
+                console.log(_thrown)
+            }
+        })
+    }
+}
+    
 IriSP.Widgets.LatestAnnotation.prototype.draw = function(){
     var _this = this;
-    
     this.renderTemplate();
     
     this.annotationContainer_$ = this.$.find('.Ldt-LatestAnnotation');
     
-    this.onMediaEvent("timeupdate", "refresh");
+    if (this.selectable_annotations){
+        this.onMdpEvent("AnnotationsList.refresh", function(){
+            _this.getWidgetAnnotations().forEach(function(_annotation){
+                _annotation.off("click");
+                _annotation.on("click", function(){
+                    var _user = {},
+                        _user_display_string = "",
+                        _users = this.source.users_data.filter(function(_user_data){
+                            return _user_data.username == _annotation.creator
+                        });
+                    if (_users.length == 0){
+                        _user.username = _annotation.creator;
+                    }
+                    else {
+                        _user = _users[0];
+                    }
+                    _user_display_string = _this.make_name_string_function(_user)
+                    _html = Mustache.to_html(_this.annotationTemplate, {
+                        annotation_created: _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString(),
+                        annotation_creator: _user_display_string,
+                        annotation_title: _annotation.title,
+                        annotation_content: _annotation.description,
+                        copy_and_edit_button: _this.copy_and_edit_button,
+                        button_text: _this.l10n.copy_and_edit,
+                    });
+                    _this.annotationContainer_$.html(_html);
+                    _this.selectedAnnotation = true;
+                });
+            }); 
+        });
+        
+        this.segments = _this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
+        this.segments.forEach(function(_segment){
+            _segment.on("click", function(){
+                _this.selectedAnnotation = false;
+            })
+        })
+        this.currentSegment = false;
+    }
+    
+    this.onMediaEvent("timeupdate", function(){
+        _this.refresh();
+    });
+    this.onMediaEvent("settimerange", function(_timeRange){
+        _this.refresh(_timeRange);
+    })
     
     if (this.starts_hidden){
         this.visible = true;
@@ -51,40 +165,59 @@
         this.show();
     }
     
+    this.selectedAnnotation = false; // This flag tells the widget if it must display last annotation (false) or clicked annotation (true)
+    this.player.trigger("AnnotationsList.refresh");
     this.refresh();
 }
 
-IriSP.Widgets.LatestAnnotation.prototype.messages = {
-    fr : {
-        empty : "Aucune annotation à afficher"
-    },
-    en: {
-        empty: "No annotation to display"
-    }
-}
 
-IriSP.Widgets.LatestAnnotation.prototype.refresh = function(){ 
-    var _currentTime = this.media.getCurrentTime() 
-    var _segmentsAnnotations = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
-    var _currentSegments = _segmentsAnnotations.filter(function(_segment){
-        return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
-    });
+IriSP.Widgets.LatestAnnotation.prototype.refresh = function(_timeRange){
+    _timeRange = typeof _timeRange !== 'undefined' ? _timeRange : false ;
+    var _this = this;
     if (this.hide_without_segment){
-        if (_currentSegments.length == 0){
+        if (!_timeRange && !this.media.getTimeRange()){
+            var _currentTime = this.media.getCurrentTime();
+            var _currentSegments = this.segments.filter(function(_segment){
+                return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+            });
+            if (_currentSegments.length == 0){
+                this.currentSegment = false;
+                this.selectedAnnotation = false;
+            }
+            else {
+                this.currentSegment = _currentSegments[0]
+            }
+        }
+        else {
+            var _segmentBegin = _timeRange? _timeRange[0] : this.media.getTimeRange()[0],
+                _segmentEnd = _timeRange? _timeRange[1] : this.media.getTimeRange()[1];
+            if ((!this.currentSegment)||(this.currentSegment.begin != _segmentBegin || this.currentSegment.end != _segmentEnd)) {
+                var _currentSegments = this.segments.filter(function(_segment){
+                    return _segment.begin == _segmentBegin && _segment.end == _segmentEnd
+                });
+                if (_currentSegments.length > 0){
+                    this.selectedAnnotation = false;
+                    this.currentSegment = _currentSegments[0];
+                }
+            }
+        }
+        if (!this.currentSegment){
             if (this.visible){
-                this.hide()
+                this.hide();
             }
         }
         else {
             if (!this.visible){
-                this.show()
+                this.show();
             }
         }
     }
-    if (this.visible){
+    
+    if (this.visible && !this.selectedAnnotation){
         var _list = this.getWidgetAnnotations();
+        
         if(this.filter_by_segment){
-            if (_currentSegments.length == 0) {
+            if (!this.currentSegment) {
                 _list = _list.filter(function(_annotation){
                     return false;
                 });
@@ -92,40 +225,68 @@
             else {
                 _list = _list.filter(function(_annotation){
                     _annotationTime = (_annotation.begin+_annotation.end)/2;
-                    return (_currentSegments[0].begin <= _annotationTime && _currentSegments[0].end >= _annotationTime);
+                    return (_this.currentSegment.begin <= _annotationTime && _this.currentSegment.end >= _annotationTime);
                 });
             }
-            _list.sortBy(function(_annotation){
-                return _annotation.created;
-            });
-            
-            var _latestAnnotation = false;
-            var _html="";
-            if (_list.length != 0){
-                _latestAnnotation = _list.pop();
-                _html = Mustache.to_html(this.annotationTemplate, {
-                    annotation_created: _latestAnnotation.created.toLocaleDateString()+", "+_latestAnnotation.created.toLocaleTimeString(),
-                    annotation_creator: _latestAnnotation.creator,
-                    annotation_title: _latestAnnotation.title,
-                    annotation_content: _latestAnnotation.description,
-                });
+        }
+        _list = _list.sortBy(function(_annotation){
+            return _annotation.created;
+        });
+        
+        var _latestAnnotation = false,
+            _html="",
+            _user_display_string = "",
+            _user = {};
+        if (_list.length != 0){
+            _latestAnnotation = _list.pop();
+            _users = this.source.users_data.filter(function(_user_data){
+                return _user_data.username == _latestAnnotation.creator
+            })
+            if (_users.length == 0){
+                _user.username = _latestAnnotation.creator;
             }
             else {
-                var _empty_message = this.l10n.empty
-                if (this.empty_message) {
-                    _empty_message = this.empty_message
-                }
-                _html = "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-NoAnnotation'>"+_empty_message+"</div>";
+                _user = _users[0];
+            }
+            _user_display_string = this.make_name_string_function(_user)
+            _html = Mustache.to_html(this.annotationTemplate, {
+                annotation_created: _latestAnnotation.created.toLocaleDateString()+", "+_latestAnnotation.created.toLocaleTimeString(),
+                annotation_creator: _user_display_string,
+                annotation_title: _latestAnnotation.title,
+                annotation_content: _latestAnnotation.description,
+                copy_and_edit_button: this.copy_and_edit_button,
+                button_text: this.l10n.copy_and_edit,
+            });
+        }
+        else {
+            var _empty_message = this.l10n.empty
+            if (this.empty_message) {
+                _empty_message = this.empty_message
             }
-            this.annotationContainer_$.html(_html);
-            
+            _html = "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-NoAnnotation'>"+_empty_message+"</div>";
         }
+        this.annotationContainer_$.html(_html);    
     }
+
+    if(this.copy_and_edit_button){
+        this.copyAndEditButton_$ = this.$.find('.Ldt-LatestAnnotation-CopyEditButton');
+        this.copyAndEditButton_$.click(this.functionWrapper("copy_and_edit"));
+    }
+}
+
+IriSP.Widgets.LatestAnnotation.prototype.copy_and_edit = function(){
+    this.player.trigger("CreateAnnotation.show");
+    this.player.trigger("AnnotationsList.hide");
+    annotationText = $('.Ldt-LatestAnnotation-Content').get(0).innerHTML;
+    
+    $('.Ldt-CreateAnnotation-Description').removeClass('empty');
+    $('.Ldt-CreateAnnotation-Description').val(annotationText);
 }
 
 IriSP.Widgets.LatestAnnotation.prototype.hide = function() {
     if (this.visible){
         this.visible = false;
+        this.$.find('.Ldt-LatestAnnotation-header').hide();
         this.annotationContainer_$.hide()
     }
 }
@@ -133,6 +294,7 @@
 IriSP.Widgets.LatestAnnotation.prototype.show = function() {
     if(!this.visible){
         this.visible = true;
+        this.$.find('.Ldt-LatestAnnotation-header').show();
         this.annotationContainer_$.show()
     }
 }
diff -r fb11ffa108c8 -r b4c525005cde src/ldt/ldt/static/ldt/metadataplayer/LdtPlayer-core.js
--- a/src/ldt/ldt/static/ldt/metadataplayer/LdtPlayer-core.js	Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/LdtPlayer-core.js	Fri Sep 18 16:09:40 2015 +0200
@@ -757,6 +757,7 @@
     this.volume = .5;
     this.paused = true;
     this.muted = false;
+    this.timeRange = false;
     this.loadedMetadata = false;
     var _this = this;
     this.on("play", function() {
@@ -781,6 +782,18 @@
             _a.trigger("enter");
             _this.trigger("enter-annotation",_a);
         });
+        
+        if (_this.getTimeRange()){
+            if (_this.getTimeRange()[0] > _time) {
+                _this.pause();
+                _this.setCurrentTime(_this.getTimeRange()[0]);
+            }
+            if (_this.getTimeRange()[1] < _time){
+                _this.pause();
+                _this.setCurrentTime(_this.getTimeRange()[1]);
+            }
+        }
+        
     });
     this.on("loadedmetadata", function() {
         _this.loadedMetadata = true;
@@ -805,6 +818,10 @@
     return this.muted;
 };
 
+Playable.prototype.getTimeRange = function() {
+    return this.timeRange;
+}
+
 Playable.prototype.setCurrentTime = function(_time) {
     this.trigger("setcurrenttime",_time);
 };
@@ -817,6 +834,16 @@
     this.trigger("setmuted",_muted);
 };
 
+Playable.prototype.setTimeRange = function(_timeBegin, _timeEnd) {
+    if ((_timeBegin < _timeEnd)&&(_timeBegin >= 0)&&(_timeEnd>0)){
+        return this.trigger("settimerange", [_timeBegin, _timeEnd]);
+    }
+}
+
+Playable.prototype.resetTimeRange = function() {
+    return this.trigger("resettimerange");
+}
+
 Playable.prototype.play = function() {
     this.trigger("setplay");
 };
@@ -840,6 +867,17 @@
 };
 
 extendPrototype(Media, Playable);
+/* */
+
+var Media = Model.Media = function(_id, _source) {
+    Playable.call(this, _id, _source);
+    this.elementType = 'media';
+    this.duration = new Time();
+    this.video = '';
+    var _this = this;
+};
+
+extendPrototype(Media, Playable);
 
 /* Default functions to be overriden by players */
     
@@ -1464,6 +1502,20 @@
         }
     });
     
+    media.on("settimerange", function(_timeRange){
+        media.timeRange = _timeRange;
+        try {
+            if (media.getCurrentTime() > _timeRange[0] || media.getCurrentTime() < _timeRange){
+                mediaEl.currentTime = (_timeRange[0] / 1000);
+            }
+        } catch (err) {
+        }
+    })
+    
+    media.on("resettimerange", function(){
+        media.timeRange = false;
+    })
+    
     media.on("setplay", function() {
         try {
             mediaEl.play();
@@ -1517,7 +1569,6 @@
         media.trigger("seeked");
     });
     
-    
 };
 /* START contentapi-serializer.js */
 
@@ -1913,6 +1964,7 @@
                 title: _data.title,
                 audio: _data.audio
             },
+            id: _data.id ? _data.id : "", // If annotation is new, id will be undefined
             tags: _data.getTagTexts(),
             media: _data.getMedia().id,
             project: _data.project_id,
@@ -2259,42 +2311,43 @@
 Metadataplayer.prototype.loadLibs = function() {
     ns.log("IriSP.Metadataplayer.prototype.loadLibs");
     var $L = $LAB
-        .script(ns.getLib("Mustache"));
+        .queueScript(ns.getLib("Mustache"));
     
     formerJQuery = !!window.jQuery;
     former$ = !!window.$;
     formerUnderscore = !!window._;
     
     if (typeof ns.jQuery === "undefined") {
-        $L.script(ns.getLib("jQuery"));
+        $L.queueScript(ns.getLib("jQuery"));
     }
     
     if (typeof ns._ === "undefined") {
-        $L.script(ns.getLib("underscore"));
+        $L.queueScript(ns.getLib("underscore"));
     }
     
     if (typeof window.JSON == "undefined") {
-        $L.script(ns.getLib("json"));
+        $L.queueScript(ns.getLib("json"));
     }
     
-    $L.wait()
-        .script(ns.getLib("jQueryUI"));
+    $L.queueWait().queueScript(ns.getLib("jQueryUI")).queueWait();
 
     /* widget specific requirements */
     for(var _i = 0; _i < this.config.widgets.length; _i++) {
         var _t = this.config.widgets[_i].type;
         if (typeof ns.widgetsRequirements[_t] !== "undefined" && typeof ns.widgetsRequirements[_t].requires !== "undefined" ) {
             for (var _j = 0; _j < ns.widgetsRequirements[_t].requires.length; _j++) {
-                $L.script(ns.getLib(ns.widgetsRequirements[_t].requires[_j]));
+                $L.queueScript(ns.getLib(ns.widgetsRequirements[_t].requires[_j]));
             }
         }
     }
     
     var _this = this;
     
-    $L.wait(function() {
+    $L.queueWait(function() {
         _this.onLibsLoaded();
     });
+    
+    $L.runQueue();
 };
 
 Metadataplayer.prototype.onLibsLoaded = function() {
@@ -2507,7 +2560,13 @@
                 _this.media = _this.source.getCurrentMedia(_mediaopts);
             }
             
-        _this.draw();
+
+        if (_this.pre_draw_callback){
+            IriSP.jQuery.when(_this.pre_draw_callback()).done(_this.draw());
+        }
+        else {
+            _this.draw();
+        }
         _this.player.trigger("widget-loaded");
     }
     
diff -r fb11ffa108c8 -r b4c525005cde src/ldt/ldt/static/ldt/metadataplayer/PopcornPlayer.js
--- a/src/ldt/ldt/static/ldt/metadataplayer/PopcornPlayer.js	Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/PopcornPlayer.js	Fri Sep 18 16:09:40 2015 +0200
@@ -101,6 +101,20 @@
         _popcorn.pause();
     });
     
+    _media.on("settimerange", function(_timeRange){
+        _media.timeRange = _timeRange;
+        try {
+            if (_media.getCurrentTime() > _timeRange[0] || _media.getCurrentTime() < _timeRange){
+                _popcorn.currentTime(_timeRange[0] / 1000);
+            }
+        } catch (err) {
+        }
+    })
+    
+    _media.on("resettimerange", function(){
+        _media.timeRange = false;
+    })
+    
     // Binding Popcorn events to media
     
     function getVolume() {
diff -r fb11ffa108c8 -r b4c525005cde src/ldt/ldt/static/ldt/metadataplayer/Segments.js
--- a/src/ldt/ldt/static/ldt/metadataplayer/Segments.js	Fri Sep 18 12:47:19 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/Segments.js	Fri Sep 18 16:09:40 2015 +0200
@@ -14,8 +14,10 @@
     overlap: .25,
     found_color: "#FF00FC",
     faded_found_color: "#ff80fc",
-    // Display creator info in segment tooltip
-    show_creator: true
+    selected_color: "#74d600",
+    faded_selected_color: "#baf9b5",
+    no_tooltip: false,
+    use_timerange: false,
 };
 
 IriSP.Widgets.Segments.prototype.template =
@@ -79,7 +81,7 @@
             color : color,
             medcolor: medcolor,
             lowcolor: lowcolor,
-            text: ((_this.show_creator && _annotation.creator) ? (_annotation.creator + " : ") : "" ) + _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1&hellip;'),
+            text: (_annotation.creator ? (_annotation.creator + " : ") : "" ) + _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1&hellip;'),
             left : _left,
             width : _width,
             top: _top,
@@ -91,17 +93,40 @@
         };
         var _html = Mustache.to_html(_this.annotationTemplate, _data),
             _el = IriSP.jQuery(_html);
-            _el.mouseover(function() {
+        _el.mouseover(function() {
                 _annotation.trigger("select");
-                _this.player.trigger('annotation-select', _annotation);
             })
             .mouseout(function() {
                 _annotation.trigger("unselect");
-                _this.player.trigger('annotation-unselect', _annotation);
             })
             .click(function() {
+                if(_this.use_timerange){
+                    if(!_this.media.getTimeRange()){
+                        _this.media.setTimeRange(_annotation.begin, _annotation.end)              
+                        _this.$segments.each(function(){
+                            var _segment = IriSP.jQuery(this);
+                            _segment.css("background", lowcolor).removeClass("selected");
+                        })
+                        _el.css("background", _this.selected_color).addClass("selected");
+                    }
+                    else if (_this.media.getTimeRange()[0]==_annotation.begin || _this.media.getTimeRange()[1]==_annotation.end){
+                        _this.media.resetTimeRange();
+                        _this.$segments.each(function(){
+                            var _segment = IriSP.jQuery(this);
+                            _segment.css("background", lowcolor).removeClass("selected");
+                            _annotation.trigger("select");
+                        })
+                    }
+                    else {
+                        _this.media.setTimeRange(_annotation.begin, _annotation.end);
+                        _this.$segments.each(function(){
+                            var _segment = IriSP.jQuery(this);
+                            _segment.css("background", lowcolor).removeClass("selected");
+                        })
+                        _el.css("background", _this.selected_color).addClass("selected");
+                    }
+                }
                 _annotation.trigger("click");
-                _this.player.trigger('annotation-click', _annotation);
             })
             .appendTo(list_$);
         IriSP.attachDndData(_el, {
@@ -118,9 +143,13 @@
                 _segment.css({
                     background: _segment.hasClass("found") ? _this.faded_found_color : _segment.attr("data-low-color")
                 });
+                _segment.css({
+                    background: _segment.hasClass("selected") ? _this.faded_selected_color : _segment.attr("data-low-color")
+                })
             });
             _el.css({
                 background: _el.hasClass("found") ? _this.found_color: color,
+                background: _el.hasClass("selected") ? _this.selected_color: color,
                 "z-index": ++zindex
             });
             if (_this.tooltip) {
@@ -134,6 +163,7 @@
             _this.$segments.each(function() {
                 var _segment = IriSP.jQuery(this);
                 _segment.css("background", _segment.hasClass("found") ? _this.found_color : _segment.attr(searching ? "data-low-color" : "data-medium-color"));
+                _segment.css("background", _segment.hasClass("selected") ? _this.selected_color : _segment.attr(searching ? "data-low-color" : "data-medium-color"));
             });
         });
         _annotation.on("found", function() {
@@ -150,15 +180,17 @@
         background : this.background,
         margin: "1px 0"
     });
-    this.insertSubwidget(
-        this.$.find(".Ldt-Segments-Tooltip"),
-        {
-            type: "Tooltip",
-            min_x: 0,
-            max_x: this.width
-        },
-        "tooltip"
-    );
+    if (!this.no_tooltip){
+        this.insertSubwidget(
+            this.$.find(".Ldt-Segments-Tooltip"),
+            {
+                type: "Tooltip",
+                min_x: 0,
+                max_x: this.width
+            },
+            "tooltip"
+        );
+    }
     this.$segments = this.$.find('.Ldt-Segments-Segment');
     this.source.getAnnotations().on("search", function() {
         searching = true;
@@ -172,9 +204,10 @@
     });
 };
 
-IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {
+IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {    
     var _x = Math.floor( this.width * _time / this.media.duration);
     this.$.find('.Ldt-Segments-Position').css({
         left: _x + "px"
     });
 };
+