From e846bca64d04b60eb7285312b2cbe5d3689b9f78 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 7 Oct 2015 15:01:12 +0200
Subject: [PATCH 001/204] Fix Image aspect ratio

---
 src/widgets/SlideVideoPlayer.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 00d86632..2752cf25 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -23,9 +23,12 @@
     z-index: 1;
 }
 
+.Ldt-SlideVideoPlayer-pip-main .Ldt-ImageDisplay-Container {
+    min-height: 30vw;
+}
 .Ldt-SlideVideoPlayer-pip-pip {
     position: absolute;
-    width: 30%;
+    width: 30% !important;
     height: 30%;
     right: 2px;
     bottom: 2px;

From 4b9aaa09464725892fe76d36131a1361914a6a55 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 7 Oct 2015 15:01:34 +0200
Subject: [PATCH 002/204] Move pip-menu into the whole widget

---
 src/widgets/SlideVideoPlayer.css | 6 +++---
 src/widgets/SlideVideoPlayer.js  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 2752cf25..19fe2b48 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -40,12 +40,12 @@
 }
 .Ldt-SlideVideoPlayer-pip-menu {
     position: absolute;
-    top: 0px;
-    right: 0px;
+    bottom: 2px;
+    right: 2px;
     z-index: 10;
     display: none;
 }
-.Ldt-SlideVideoPlayer-pip-pip:hover .Ldt-SlideVideoPlayer-pip-menu {
+.Ldt-SlideVideoPlayer:hover .Ldt-SlideVideoPlayer-pip-menu {
     background-color: #000;
     opacity: .5;
     display: inline-block;
diff --git a/src/widgets/SlideVideoPlayer.js b/src/widgets/SlideVideoPlayer.js
index 4a0313f3..f8753a89 100644
--- a/src/widgets/SlideVideoPlayer.js
+++ b/src/widgets/SlideVideoPlayer.js
@@ -43,7 +43,7 @@ IriSP.Widgets.SlideVideoPlayer.prototype.draw = function() {
     );
 
     if (_this.mode == 'pip') {
-        _this.$.find(".Ldt-SlideVideoPlayer-panel").append('<div class="Ldt-SlideVideoPlayer-pip-menu"><div class="Ldt-SlideVideoPlayer-pip-menu-toggle"></div></div>');
+        _this.$.find(".Ldt-SlideVideoPlayer").append('<div class="Ldt-SlideVideoPlayer-pip-menu"><div class="Ldt-SlideVideoPlayer-pip-menu-toggle"></div></div>');
         _this.$.on("click", ".Ldt-SlideVideoPlayer-pip-menu-toggle", function () {
             _this.toggleMainDisplay();
         });

From bc123b39bda6c863bf6aa43dee8149406257acd5 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 9 Oct 2015 18:29:33 +0200
Subject: [PATCH 003/204] Cosmetic fixes

---
 src/widgets/EnrichedPlan.js | 40 +++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index c26c2b82..4baee77d 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -2,14 +2,14 @@
 - add callbacks
  */
 
-IriSP.Widgets.EnrichedPlan = function(player, config) {
+IriSP.Widgets.EnrichedPlan = function (player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
 }
 
 IriSP.Widgets.EnrichedPlan.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.EnrichedPlan.prototype.defaults = {
-    // Main type for slide segmentation
+    // Main type for toc segmentation
     annotation_type: "Slides",
     // If no annotation type list is specified, use all other types
     annotation_types: [],
@@ -48,26 +48,26 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
 
 IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span></div>';
 
-IriSP.Widgets.EnrichedPlan.prototype.draw = function() {
+IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
     var _this = this;
     // Generate a unique prefix, so that ids of input fields
     // (necessary for label association) are unique too.
     _this.prefix = "TODO";
     // slides content: title, level (for toc)
-    var _slides = this.getWidgetAnnotations().sortBy(function(_annotation) {
+    var _slides = this.getWidgetAnnotations().sortBy(function (_annotation) {
         return _annotation.begin;
     });
     // All other annotations
-    var _annotations = this.media.getAnnotations().filter( function (a) {
+    var _annotations = this.media.getAnnotations().filter(function (a) {
         return a.getAnnotationType().title != _this.annotation_type;
-    }).sortBy(function(_annotation) {
+    }).sortBy(function (_annotation) {
         return _annotation.begin;
     });
 
     // Reference annotations in each slide: assume that end time is
     // correctly set.
-    _slides.forEach( function (slide) {
-        slide.annotations = _annotations.filter( function (a) {
+    _slides.forEach(function (slide) {
+        slide.annotations = _annotations.filter(function (a) {
             return a.begin >= slide.begin && a.begin <= slide.end;
         });
     });
@@ -81,7 +81,7 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function() {
         return a.title.indexOf('Anonyme') < 0 ? "Own" : "Other";
     };
 
-    _slides.forEach(function(slide) {
+    _slides.forEach(function (slide) {
         var _html = Mustache.to_html(_this.slideTemplate, {
             id : slide.id,
             atitle : IriSP.textFieldHtml(slide.title),
@@ -90,7 +90,7 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function() {
             begintc: slide.begin.milliseconds,
             thumbnail: slide.thumbnail,
             show_slides: _this.show_slides,
-            notes: slide.annotations.map( function (a) {
+            notes: slide.annotations.map(function (a) {
                 return Mustache.to_html(_this.annotationTemplate, {
                     id: a.id,
                     text: IriSP.textFieldHtml(a.description || a.title),
@@ -100,9 +100,9 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function() {
                     atitle: a.title.slice(0, 20),
                     // FIXME: Temporary hack waiting for a proper metadata definition
                     category: "Ldt-EnrichedPlan-Note-" + note_category(a),
-                    filtered: ( (note_category(a) == 'Own' && ! _this.show_own_notes)
-                                || (note_category(a) == 'Other' && ! _this.show_other_notes)
-                                || (note_category(a) == 'Teacher' && ! _this.show_teacher_notes) ) ? 'filtered_out' : ''
+                    filtered: ((note_category(a) == 'Own' && !_this.show_own_notes)
+                                || (note_category(a) == 'Other' && !_this.show_other_notes)
+                                || (note_category(a) == 'Teacher' && !_this.show_teacher_notes)) ? 'filtered_out' : ''
                 });
             }).join("\n")
         });
@@ -115,25 +115,27 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function() {
     });
 
     container.on("click", ".Ldt-EnrichedPlan-Control-Checkbox", function () {
-        var classname = _.first(_.filter(this.classList, function (s) { return s != "Ldt-EnrichedPlan-Control-Checkbox"; }));
+        var classname = _.first(_.filter(this.classList, function (s) {
+            return s != "Ldt-EnrichedPlan-Control-Checkbox";
+        }));
         if (classname !== undefined) {
-            if ($(this).is(':checked')) {
+            if (IriSP.jQuery(this).is(':checked')) {
                 content.find(".Ldt-EnrichedPlan-Slide ." + classname).removeClass("filtered_out");
             } else {
                 content.find(".Ldt-EnrichedPlan-Slide ." + classname).addClass("filtered_out");
-             }
+            }
         }
 
     });
 
     container.find(".Ldt-EnrichedPlan-Search-Input").on("search", function () {
-        var q = $(this).val().toLocaleLowerCase();
+        var q = IriSP.jQuery(this).val().toLocaleLowerCase();
         if (q === "") {
             // Show all
             content.find(".Ldt-EnrichedPlan-Note").removeClass("non_matching");
         } else {
-            $(".Ldt-EnrichedPlan-Note").each( function () {
-                var node = $(this);
+            content.find(".Ldt-EnrichedPlan-Note").each(function () {
+                var node = IriSP.jQuery(this);
                 if (node.text().toLocaleLowerCase().indexOf(q) > -1) {
                     node.removeClass("non_matching");
                 } else {

From 9548116b2019590a20c28d693f66797e9ec104df Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 9 Oct 2015 18:29:54 +0200
Subject: [PATCH 004/204] Add BarSlider component

---
 src/widgets/BarSlider.css | 120 ++++++++++++++++++++++++++++++++++++++
 src/widgets/BarSlider.js  |  72 +++++++++++++++++++++++
 2 files changed, 192 insertions(+)
 create mode 100644 src/widgets/BarSlider.css
 create mode 100644 src/widgets/BarSlider.js

diff --git a/src/widgets/BarSlider.css b/src/widgets/BarSlider.css
new file mode 100644
index 00000000..52f7e445
--- /dev/null
+++ b/src/widgets/BarSlider.css
@@ -0,0 +1,120 @@
+/* */
+/* Slider Widget */
+
+.Ldt-BarSlider {
+    width: 100%;
+    height: 36px;
+    padding: 0;
+    margin: 0;
+    background-color: black;
+    background-image: none;
+    border: none;
+    border-bottom: 1px dashed #666;
+    position: relative;
+    border-radius: 0;
+}
+
+.Ldt-BarSlider .ui-slider-handle {
+    border-radius: 8px;
+    top: -2px;
+    background: #fc00ff;
+    border: 1px solid #ffffff;
+    width: 0px;
+    height: 0px;
+    border-style: solid;
+    border-color: transparent transparent transparent #ffffff;
+    border-width: 3px 0 3px 5px;
+}
+
+.Ldt-BarSlider .ui-slider-range {
+    background-color: #fff !important;
+    position: absolute !important;
+    top: 14px;
+    left: 4px;
+    height: 8px;
+    width: 0px;
+}
+
+.Ldt-BarSlider-Time {
+    position: absolute;
+    bottom: 32px;
+    background: #fff;
+    color: #000000;
+    border-radius: 0px;
+    z-index: 8;
+    font-size: 10px;
+    width: 34px;
+    border: 1px solid #999999;
+    padding: 1px;
+    margin-left: -20px;
+    display: none;
+    text-align: center;
+    font-weight: bold;
+    pointer-events: none;
+}
+
+.videoslider {
+    background-color: black;
+    height: 36px;
+    width: 100%;
+    border-bottom: 1px dashed #666;
+    position: relative;
+}
+.Ldt-BarSlider-sliderbar {
+    background-color: #999;
+    position: absolute;
+    top: 12px;
+    left: 4px;
+    right: 4px;
+    bottom: 11px;
+}
+.Ldt-BarSlider-currentbar {
+    background-color: #fff;
+    position: absolute;
+    top: 14px;
+    left: 4px;
+    width: 0px;
+    height: 8px;
+}
+.Ldt-BarSlider .rightarrow {
+    width: 0px;
+    height: 0px;
+    border-style: solid;
+    border-color: transparent transparent transparent #ffffff;
+    border-width: 3px 0 3px 5px;
+}
+.Ldt-BarSlider .leftarrow {
+    width: 0px;
+    height: 0px;
+    border-style: solid;
+    border-color: transparent transparent transparent #ffffff;
+    border-width: 3px 5px 3px 0;
+}
+.Ldt-BarSlider-currentbarhead {
+    position: absolute;
+    top: 15px;
+    left: 0px;
+}
+.Ldt-BarSlider-barmark {
+    width: 1px;
+    position: absolute;
+    top: 4px;
+    bottom: 4px;
+    background-color: #ccc;
+}
+
+.barmark:nth-of-type(4) {
+    left: 20px;
+}
+.barmark:nth-of-type(5) {
+    left: 50px;
+}
+.barmark:nth-of-type(6) {
+    left: 90px;
+}
+.barmark:nth-of-type(7) {
+    left: 140px;
+}
+.barmark:nth-of-type(8) {
+    left: 200px;
+}
diff --git a/src/widgets/BarSlider.js b/src/widgets/BarSlider.js
new file mode 100644
index 00000000..5966e8ae
--- /dev/null
+++ b/src/widgets/BarSlider.js
@@ -0,0 +1,72 @@
+/*
+ The BarSlider Widget fits right under the video
+ */
+
+IriSP.Widgets.BarSlider = function (player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.BarSlider.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.BarSlider.prototype.defaults = {
+    annotation_types: "Slides"
+};
+
+IriSP.Widgets.BarSlider.prototype.template =
+    '<div class="Ldt-BarSlider">'
+    + ' <div class="Ldt-BarSlider-sliderbar"></div>'
+    + ' <div class="Ldt-BarSlider-currentbar"></div>'
+    + ' <div class="Ldt-BarSlider-currentbarhead rightarrow"></div>'
+//    + ' <div class="Ldt-BarSlider-barmark"></div>'
+    + ' <div class="Ldt-BarSlider-Time">00:00</div>'
+    + '</div>';
+
+IriSP.Widgets.BarSlider.prototype.draw = function () {
+    var _this = this;
+
+    this.renderTemplate();
+    this.$time = this.$.find(".Ldt-BarSlider-Time");
+    this.$slider = this.$.find(".Ldt-BarSlider");
+    this.$currentbar = this.$.find(".Ldt-BarSlider-currentbar");
+    this.$currentbarhead = this.$.find(".Ldt-BarSlider-currentbarhead");
+
+    this.$slider.slider({
+        range: "min",
+        value: 0,
+        min: 0,
+        max: this.source.getDuration().milliseconds,
+        slide: function (event, ui) {
+            _this.media.setCurrentTime(ui.value);
+            _this.player.trigger("Mediafragment.setHashToTime");
+        }
+    });
+
+    this.$handle = this.$slider.find('.ui-slider-handle');
+
+    this.onMediaEvent("timeupdate", "onTimeupdate");
+    this.onMdpEvent("Player.MouseOut", "onMouseout");
+
+    this.$slider
+        .mouseover(function () {
+            _this.$time.show();
+        })
+        .mouseout(this.functionWrapper("onMouseout"))
+        .mousemove(function (_e) {
+            var _x = _e.pageX - _this.$.offset().left,
+                _t = new IriSP.Model.Time(_this.media.duration * _x / _this.width);
+            _this.$time.text(_t.toString()).css("left", _x);
+        });
+};
+
+IriSP.Widgets.BarSlider.prototype.onTimeupdate = function (_time) {
+    var _this = this,
+        pos = _this.width * _time / _this.media.duration;
+    this.$slider.slider("value", _time);
+    // Update bar position
+    this.$currentbar.css("width", pos);
+    this.$currentbarhead.css("left", pos + 4);
+};
+
+IriSP.Widgets.BarSlider.prototype.onMouseout = function () {
+    this.$time.hide();
+};

From 21c59476330ffe4620bfe71b1d986af48484db32 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 12 Oct 2015 11:25:22 +0200
Subject: [PATCH 005/204] Whitespace/semicolons fixes

---
 src/widgets/AnnotationsList.js | 523 ++++++++++++++++-----------------
 1 file changed, 259 insertions(+), 264 deletions(-)

diff --git a/src/widgets/AnnotationsList.js b/src/widgets/AnnotationsList.js
index 16c6efd7..2d0f7c0b 100644
--- a/src/widgets/AnnotationsList.js
+++ b/src/widgets/AnnotationsList.js
@@ -1,8 +1,8 @@
-IriSP.Widgets.AnnotationsList = function(player, config) {
+IriSP.Widgets.AnnotationsList = function (player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
     this.lastIds = [];
     var _this = this;
-    this.throttledRefresh = IriSP._.throttle(function(full) {
+    this.throttledRefresh = IriSP._.throttle(function (full) {
         _this.refresh(full);
     }, 800);
     this.searchString = false;
@@ -13,7 +13,7 @@ IriSP.Widgets.AnnotationsList = function(player, config) {
 IriSP.Widgets.AnnotationsList.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.AnnotationsList.prototype.defaults = {
-    pre_draw_callback: function(){
+    pre_draw_callback: function () {
         return this.importUsers();
     },
     /*
@@ -83,7 +83,7 @@ IriSP.Widgets.AnnotationsList.prototype.defaults = {
     api_delete_method: "DELETE",
     api_users_endpoint: "",
     api_users_method: "GET",
-    make_name_string_function: function(params){
+    make_name_string_function: function (params) {
         return params.username ? params.username : "Anonymous";
     },
     filter_by_segments: false,
@@ -101,50 +101,50 @@ IriSP.Widgets.AnnotationsList.prototype.defaults = {
     polemics : [{
         keyword: "++",
         background_color: "#c9ecc6"
-    },{
+    }, {
         keyword: "--",
         background_color: "#f9c5c6"
-    },{
+    }, {
         keyword: "??",
         background_color: "#cec5f9"
-    },{
+    }, {
         keyword: "==",
         background_color: "#f9f4c6"
     }]
 };
 
-IriSP.Widgets.AnnotationsList.prototype.importUsers = function(){
-    if (!this.source.users_data && this.api_users_endpoint){
+IriSP.Widgets.AnnotationsList.prototype.importUsers = function () {
+    if (!this.source.users_data && this.api_users_endpoint) {
         this.usernames = Array();
         var _this = this,
             _list = this.getWidgetAnnotations(),
             usernames_list_string = "";
 
-        _list.forEach(function(_annotation){
-            if(_this.usernames.indexOf(_annotation.creator) == -1){
+        _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 + ",";
         });
-        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});
+        var _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
+            success: function (_data) {
+                _this.source.users_data = _data.objects;
             },
-            error: function(_xhr, _error, _thrown) {
-                console.log(_xhr)
-                console.log(_error)
-                console.log(_thrown)
+            error: function (_xhr, _error, _thrown) {
+                console.log(_xhr);
+                console.log(_error);
+                console.log(_thrown);
             }
-        })
+        });
     }
-}
+};
 
 IriSP.Widgets.AnnotationsList.prototype.messages = {
     en: {
@@ -219,23 +219,23 @@ IriSP.Widgets.AnnotationsList.prototype.template =
     +         '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
     +         '<ul class="Ldt-AnnotationsList-ul">'
     +         '</ul>'
-    +     '</div>'    
+    +     '</div>'
     +     '{{#allow_annotations_deletion}}'
     +     '<div data-annotation="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenDelete">'
-    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>' 
+    +         '<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 data-annotation="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenSending">'
-    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'  
+    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'
     +         '{{l10n.annotation_deletion_sending}}'
     +     '</div>'
     +     '<div data-annotation="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenSuccess">'
-    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'  
+    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'
     +         '{{l10n.annotation_deletion_success}}'
     +     '</div>'
     +     '<div data.annotation="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenError">'
-    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'  
+    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'
     +         '{{l10n.annotation_deletion_error}}'
     +     '</div>'
     +     '{{/allow_annotations_deletion}}'
@@ -283,7 +283,7 @@ IriSP.Widgets.AnnotationsList.prototype.annotationTemplate =
 // obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project
 // + "/" + annotations[i].meta["id-ref"] + '#id=' + annotations[i].id;
 
-IriSP.Widgets.AnnotationsList.prototype.ajaxSource = function() {
+IriSP.Widgets.AnnotationsList.prototype.ajaxSource = function () {
     var _currentTime = this.media.getCurrentTime(),
         _duration = this.media.duration;
     this.lastAjaxQuery = _currentTime;
@@ -297,12 +297,12 @@ IriSP.Widgets.AnnotationsList.prototype.ajaxSource = function() {
     }, this.metadata));
 };
 
-IriSP.Widgets.AnnotationsList.prototype.showScreen = function(_screenName) {
+IriSP.Widgets.AnnotationsList.prototype.showScreen = function (_screenName) {
     this.$.find('.Ldt-AnnotationsList-Screen' + _screenName).show()
         .siblings().hide();
-}
+};
 
-IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function() {
+IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function () {
     var _currentTime = this.media.getCurrentTime();
     var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);
     if (typeof _currentAnnotation !== "undefined" && _currentAnnotation.id !== this.lastMashupAnnotation) {
@@ -337,7 +337,7 @@ IriSP.Widgets.AnnotationsList.prototype.importAnnotations = function () {
                 width: '80%',
                 minHeight: '400',
                 height: 400,
-                buttons: [ { text: "Close", click: function() { $( this ).dialog( "close" ); } },
+                buttons: [ { text: "Close", click: function () { $(this).dialog("close"); } },
                            // { text: "Load", click: function () {
                            //     // TODO
                            //     // http://www.html5rocks.com/en/tutorials/file/dndfiles/?redirect_from_locale=fr
@@ -351,7 +351,7 @@ IriSP.Widgets.AnnotationsList.prototype.importAnnotations = function () {
                                // Dummy parsing for the moment
                                var data = textarea[0].value
                                        .split(time_regexp)
-                                       .filter( function (s) { return ! s.match(/^\s*$/)});
+                                       .filter(function (s) { return !s.match(/^\s*$/); });
                                var begin = null,
                                    end = null,
                                    content = null,
@@ -389,9 +389,9 @@ IriSP.Widgets.AnnotationsList.prototype.importAnnotations = function () {
                            } } ]
             });
 
-}
+};
 
-IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
+IriSP.Widgets.AnnotationsList.prototype.refresh = function (_forceRedraw) {
     _forceRedraw = (typeof _forceRedraw !== "undefined" && _forceRedraw);
     if (this.currentSource.status !== IriSP.Model._SOURCE_STATUS_READY) {
         return 0;
@@ -404,112 +404,110 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
         if (typeof _currentAnnotation !== "undefined") {
             _currentTime = _currentTime - _currentAnnotation.begin + _currentAnnotation.annotation.begin;
             var _mediaId = _currentAnnotation.getMedia().id;
-            _list = _list.filter(function(_annotation) {
+            _list = _list.filter(function (_annotation) {
                 return _annotation.getMedia().id === _mediaId;
             });
         }
     }
-    _list = _list.filter(function(_annotation) {
+    _list = _list.filter(function (_annotation) {
         return _annotation.found !== false;
     });
-    
-    if ((this.filter_by_segments)&&(!(this.show_filters && this.segment_filter && this.ignoresegmentcheckbox_$[0].checked))) {
+
+    if ((this.filter_by_segments) && (!(this.show_filters && this.segment_filter && this.ignoresegmentcheckbox_$[0].checked))) {
+        var _currentSegments,
+            _segmentsAnnotation;
         /*
-         *  A given annotation is considered "in" segment if the middle of it is between the segment beginning and the segment end. 
+         *  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)
-        if (this.media.getTimeRange()){
-            _currentSegments = _segmentsAnnotation.filter(function(_segment){
-                return (_this.media.getTimeRange()[0] == _segment.begin && _this.media.getTimeRange()[1] == _segment.end)
+        _segmentsAnnotation = this.currentSource.getAnnotationsByTypeTitle(this.segments_annotation_type);
+        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)
+        } else {
+            _currentSegments = _segmentsAnnotation.filter(function (_segment) {
+                return (_currentTime >= _segment.begin && _currentTime <= _segment.end);
             });
         }
         if (_currentSegments.length == 0) {
-            _list = _list.filter(function(_annotation){
+            _list = _list.filter(function (_annotation) {
                 return false;
             });
-        }
-        else {
-            _list = _list.filter(function(_annotation){
-                _annotation_time = (_annotation.begin+_annotation.end)/2;
-                return (_currentSegments[0].begin <= _annotation_time && _currentSegments[0].end >= _annotation_time)
+        } else {
+            _list = _list.filter(function (_annotation) {
+                var _annotation_time = (_annotation.begin + _annotation.end) / 2;
+                return (_currentSegments[0].begin <= _annotation_time && _currentSegments[0].end >= _annotation_time);
             });
         }
-        if(this.annotations_count_header && this.annotations_count != _list.length){
+        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){
-           return _annotation.creator == _this.show_only_annotation_from_user;
+    if (this.show_only_annotation_from_user) {
+        _list = _list.filter(function (_annotation) {
+            return _annotation.creator == _this.show_only_annotation_from_user;
         });
     }
     if (this.limit_count) {
         /* Get the n annotations closest to current timecode */
-        _list = _list.sortBy(function(_annotation) {
+        _list = _list.sortBy(function (_annotation) {
             return Math.abs((_annotation.begin + _annotation.end) / 2 - _currentTime);
         }).slice(0, this.limit_count);
     }
-    
+
     if (this.newest_first) {
-        _list = _list.sortBy(function(_annotation) {
+        _list = _list.sortBy(function (_annotation) {
             return -_annotation.created.valueOf();
         });
     } else {
-        _list = _list.sortBy(function(_annotation) {
+        _list = _list.sortBy(function (_annotation) {
             return _annotation.begin;
         });
     }
-    
-    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.show_filters) {
+        if (this.user_filter) {
+            var _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.keyword_filter) {
+            var _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.date_filter) {
+            if (this.datefilterinput_$[0].value != "") {
+                var _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) {
+        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){
+            this.usernames.forEach(function (_user) {
+                var latest_ann = _list.filter(function (_annotation) {
                     return _annotation.creator == _user;
                 })[0];
-                _list = _list.filter(function(_annotation){
+                _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) {
@@ -517,12 +515,12 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
         this.lastSearch = this.searchString;
         this.lastIds = _ids;
         this.list_$.html("");
-        _list.forEach(function(_annotation) {
+        _list.forEach(function (_annotation) {
             var _url = (
-                ( typeof _annotation.url !== "undefined" && _annotation.url)
+                (typeof _annotation.url !== "undefined" && _annotation.url)
                 ? _annotation.url
                 : (
-                    ( typeof _this.source.projectId !== "undefined" && typeof _annotation.project !== "undefined" && _annotation.project && _this.source.projectId !== _annotation.project )
+                    (typeof _this.source.projectId !== "undefined" && typeof _annotation.project !== "undefined" && _annotation.project && _this.source.projectId !== _annotation.project)
                     ? Mustache.to_html(
                         _this.foreign_url,
                         {
@@ -532,50 +530,49 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
                             annotationType : _annotation.annotationType.id
                         }
                     )
-                    : document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id + '&t=' + (_annotation.begin / 1000.0)
+                    : document.location.href.replace(/#.*$/, '') + '#id=' + _annotation.id + '&t=' + (_annotation.begin / 1000.0)
                     )
             );
             var _title = "",
                 _description = _annotation.description,
                 _thumbnail = (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail);
-            if (_this.show_creator){
+            if (_this.show_creator) {
                 if (_annotation.creator) {
                     var _users = [],
                         _user = {},
                         _creator = "";
                     if (_this.source.users_data) {
-                        _users = _this.source.users_data.filter(function(_user_data){
+                        _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]
+                    if (_users.length == 0) {
+                        _user.username = _annotation.creator;
+                    } else {
+                        _user = _users[0];
                     }
-                    _creator = _this.make_name_string_function(_user);
+                    _creator = _this.make_name_string_function (_user);
                 }
             }
-            if (_this.show_title && _annotation.title){
-                    var _title = _annotation.title;
+            if (_this.show_title && _annotation.title) {
+                _title = _annotation.title;
             }
             var _bgcolor;
-            IriSP._(_this.polemics).each(function(_polemic) {
+            IriSP._(_this.polemics).each(function (_polemic) {
                 var _rgxp = IriSP.Model.regexpFromTextOrArray(_polemic.keyword, true);
                 if (_rgxp.test(_title + " " + _description)) {
                     _bgcolor = _polemic.background_color;
                 }
             });
             var _created = false;
+            var _tags;
             if (_this.show_creation_date) {
-                _created = _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString();
+                _created = _annotation.created.toLocaleDateString() + ", " + _annotation.created.toLocaleTimeString();
             }
-            if(this.tags == true){
-                var _tags = _annotation.getTagTexts();
-            }
-            else {
-                var _tags = false;
+            if (this.tags == true) {
+                _tags = _annotation.getTagTexts();
+            } else {
+                _tags = false;
             }
             var _data = {
                 id : _annotation.id,
@@ -620,10 +617,10 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
                         width: 1,
                         height: 1,
                         events: {
-                            onPause: function() {
+                            onPause: function () {
                                 _this.$.find(".Ldt-AnnotationsList-Play[data-annotation-id=" + _annotation.id + "]").text(_this.l10n.voice_annotation);
                             },
-                            onPlay: function() {
+                            onPlay: function () {
                                 _this.$.find(".Ldt-AnnotationsList-Play[data-annotation-id=" + _annotation.id + "]").text(_this.l10n.now_playing);
                             }
                         }
@@ -632,31 +629,31 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
             }
             var _html = Mustache.to_html(_this.annotationTemplate, _data),
                 _el = IriSP.jQuery(_html),
-                _onselect = function() {
+                _onselect = function () {
                     _this.$.find('.Ldt-AnnotationsList-li').removeClass("selected");
                     _el.addClass("selected");
                 },
-                _onunselect = function() {
+                _onunselect = function () {
                     _this.$.find('.Ldt-AnnotationsList-li').removeClass("selected");
                 };
-            _el.mouseover(function() {
+            _el.mouseover(function () {
                     _annotation.trigger("select");
                 })
-                .mouseout(function() {
+                .mouseout(function () {
                     _annotation.trigger("unselect");
                 })
-                .click(function() {
+                .click(function () {
                     _annotation.trigger("click");
                 })
                 .appendTo(_this.list_$);
             IriSP.attachDndData(_el.find("[draggable]"), {
-            	title: _title,
-            	description: _description,
-            	uri: _url,
+                title: _title,
+                description: _description,
+                uri: _url,
                 image: _annotation.thumbnail,
                 text: '[' + _annotation.begin.toString() + '] ' + _title
             });
-            _el.on("remove", function() {
+            _el.on("remove", function () {
                 _annotation.off("select", _onselect);
                 _annotation.off("unselect", _onunselect);
             });
@@ -665,9 +662,9 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
         });
 
         /* Correct the empty tag bug */
-        this.$.find('.Ldt-AnnotationsList-Tag-Li').each(function() {
+        this.$.find('.Ldt-AnnotationsList-Tag-Li').each(function () {
             var _el = IriSP.jQuery(this);
-            if (!_el.text().replace(/(^\s+|\s+$)/g,'')) {
+            if (!_el.text().replace(/(^\s+|\s+$)/g, '')) {
                 _el.remove();
             }
         });
@@ -686,9 +683,9 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
                 // propagate mouse clicks. If _this is a <a> then we
                 // have to specify the ancestor before which we can
                 // insert the input widget.
-                if (insertion_point === undefined)
+                if (insertion_point === undefined) {
                     insertion_point = _this;
-
+                }
                 // Insert input element
                 var input_element = $(_this.dataset.editable_type === 'multiline' ? "<textarea>" : "<input>")
                         .addClass("editableInput")
@@ -746,12 +743,13 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
                     } else {
                         _this.dataset.editable_value = n;
                         // Update annotation for storage
-                        if (_this.dataset.editable_field == 'begin')
+                        if (_this.dataset.editable_field == 'begin') {
                             an.setBegin(n);
-                        else if (_this.dataset.editable_field == 'end')
+                        } else if (_this.dataset.editable_field == 'end') {
                             an.setEnd(n);
-                        else
+                        } else {
                             an[_this.dataset.editable_field] = n;
+                        }
                         an.modified = new Date();
                         // FIXME: use user name, when available
                         an.contributor = widget.player.config.username || "COCo User";
@@ -760,7 +758,7 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
                         feedback(feedback_ok);
                     }
                 }
-                $(input_element).bind('keydown', function(e) {
+                $(input_element).bind('keydown', function (e) {
                     if (e.which == 13) {
                         e.preventDefault();
                         validateChanges();
@@ -777,26 +775,27 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
                 return widget.player.getLocalAnnotation(ident);
             };
 
-            var save_local_annotations = function() {
+            var save_local_annotations = function () {
                 widget.player.saveLocalAnnotations();
                 // Merge modifications into widget source
                 widget.source.merge(widget.player.localSource);
             };
 
-            var delete_local_annotation = function(ident) {
+            var delete_local_annotation = function (ident) {
                 widget.source.getAnnotations().removeId(ident, true);
                 widget.player.deleteLocalAnnotation(ident);
                 widget.refresh(true);
             };
 
-            this.$.find('.Ldt-AnnotationsList-Delete').click(function(e) {
+            this.$.find('.Ldt-AnnotationsList-Delete').click(function (e) {
                 // Delete annotation
                 var _annotation = get_local_annotation(this.dataset.editable_id);
-                if (confirm(Mustache.to_html(widget.l10n.confirm_delete_message, { annotation: _annotation })))
+                if (confirm(Mustache.to_html(widget.l10n.confirm_delete_message, { annotation: _annotation }))) {
                     delete_local_annotation(this.dataset.editable_id);
-                widget.refresh(true);
+                    widget.refresh(true);
+                }
             });
-            this.$.find('.Ldt-AnnotationsList-Edit').click(function(e) {
+            this.$.find('.Ldt-AnnotationsList-Edit').click(function (e) {
                 if (widget.on_edit) {
                     var _annotation = get_local_annotation(this.dataset.editable_id);
                     widget.on_edit(_annotation);
@@ -806,18 +805,19 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
                     edit_element(element[0]);
                 }
             });
-            this.$.find('.Ldt-AnnotationsList-PublishAnnotation').click(function(e) {
+            this.$.find('.Ldt-AnnotationsList-PublishAnnotation').click(function (e) {
                 var _annotation = get_local_annotation(this.dataset.editable_id);
                 // Publish annotation to the server
-                if (!confirm(Mustache.to_html(widget.l10n.confirm_publish_message, { annotation: _annotation })))
+                if (!confirm(Mustache.to_html(widget.l10n.confirm_publish_message, { annotation: _annotation }))) {
                     return;
+                }
                 var _url = Mustache.to_html(widget.api_endpoint_template, {id: widget.source.projectId});
                 if (_url !== "") {
                     var _export = widget.player.sourceManager.newLocalSource({serializer: IriSP.serializers[widget.api_serializer]});
 
                     if (widget.publish_type) {
                         // If publish_type is specified, try to set the annotation type of the exported annotation
-                        var at = widget.source.getAnnotationTypes().filter(function(at) { return at.title == widget.publish_type; });
+                        var at = widget.source.getAnnotationTypes().filter(function (at) { return at.title == widget.publish_type; });
                         if (at.length == 1) {
                             _annotation.setAnnotationType(at[0].id);
                         }
@@ -830,22 +830,22 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
                         type: widget.api_method,
                         contentType: 'application/json',
                         data: _export.serialize(),
-                        success: function(_data) {
+                        success: function (_data) {
                             $(this).addClass("published");
                             // Save the published information
                             var an = get_local_annotation(_annotation.id);
                             // FIXME: handle "published" tag
-                            an.setTags( [ "published" ]);
+                            an.setTags([ "published" ]);
                             save_local_annotations();
                             widget.player.trigger("Annotation.publish", _annotation);
                         },
-                        error: function(_xhr, _error, _thrown) {
+                        error: function (_xhr, _error, _thrown) {
                             IriSP.log("Error when sending annotation", _thrown);
                         }
                     });
                 }
             });
-            this.$.find('.Ldt-AnnotationsList-TimeEdit').dblclick(function(e) {
+            this.$.find('.Ldt-AnnotationsList-TimeEdit').dblclick(function (e) {
                 var _this = this;
                 // Use current player time
                 var an = get_local_annotation(_this.dataset.editable_id);
@@ -859,14 +859,14 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
             });
         };
 
-        this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() {
-            _this.source.getAnnotations().search(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
+        this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function () {
+            _this.source.getAnnotations().search(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g, ''));
         });
         this.$.find('.Ldt-Annotation-Timecode').click(function () {
             _this.media.setCurrentTime(Number(this.dataset.timecode));
         });
 
-        this.$.find(".Ldt-AnnotationsList-Play").click(function() {
+        this.$.find(".Ldt-AnnotationsList-Play").click(function () {
             var _el = IriSP.jQuery(this),
                 _annid = _el.attr("data-annotation-id");
             if (_this.jwplayers[_annid]) {
@@ -877,13 +877,13 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
 
         if (this.source.getAnnotations().searching) {
             var rx = _this.source.getAnnotations().regexp || false;
-            this.$.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description").each(function() {
+            this.$.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description").each(function () {
                 var _$ = IriSP.jQuery(this);
                 _$.html(IriSP.textFieldHtml(_$.text(), rx));
             });
         }
 
-        this.$.find(".Ldt-AnnotationsList-DeleteButton").click(_this.functionWrapper("onDeleteClick"))
+        this.$.find(".Ldt-AnnotationsList-DeleteButton").click(_this.functionWrapper("onDeleteClick"));
     }
 
     if (this.ajax_url) {
@@ -895,102 +895,98 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
             }
         }
     }
-    
+
     return _list.length;
 };
 
-IriSP.Widgets.AnnotationsList.prototype.onDeleteClick = function(event){
-    
-    ann_id = event.target.dataset.annotation;
-    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],
+IriSP.Widgets.AnnotationsList.prototype.onDeleteClick = function (event) {
+    var ann_id = event.target.dataset.annotation,
+        delete_preview_$ = this.$.find(".Ldt-AnnotationsList-ul-ToDelete"),
+        _list = this.getWidgetAnnotations().filter(function (_annotation) {
+            return _annotation.id == ann_id;
+        }),
+        _annotation = _list[0],
         _title = "",
         _this = this;
+    delete_preview_$.html("");
     if (_annotation.creator) {
         var _users = [],
             _user = {};
         if (_this.source.users_data) {
-            _users = _this.source.users_data.filter(function(_user_data){
+            _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]
+        if (_users.length == 0) {
+            _user.username = _annotation.creator;
+        } else {
+            _user = _users[0];
         }
-        _title = _this.make_name_string_function(_user);
+        _title = _this.make_name_string_function (_user);
     }
     if (_annotation.title) {
         var tempTitle = _annotation.title;
-        if( tempTitle.substr(0, _title.length + 1) == (_title + ":") ){
+        if (tempTitle.substr(0, _title.length + 1) == (_title + ":")) {
             _title = "";
         }
-        _title = _title + ( (_title=="") ? "" : ": ") + _annotation.title;
+        _title = _title + ((_title == "") ? "" : ": ") + _annotation.title;
     }
     var _created = false;
     if (this.show_creation_date) {
-        _created = _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString();
+        _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(){
+        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
+    };
+    delete_preview_$.html(Mustache.to_html(this.annotationTemplate, _data));
+
+    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.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
+        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() {
+IriSP.Widgets.AnnotationsList.prototype.hide = function () {
     var _this = this;
-    if (this.visible){
+    if (this.visible) {
         this.visible = false;
-        this.widget_$.slideUp(function(){
-            _this.$.find('.Ldt-AnnotationsList-header').hide();            
+        this.widget_$.slideUp(function () {
+            _this.$.find('.Ldt-AnnotationsList-header').hide();
         });
-        this.showScreen("Main")
+        this.showScreen("Main");
     }
-}
+};
 
-IriSP.Widgets.AnnotationsList.prototype.show = function() {
-    if(!this.visible){
+IriSP.Widgets.AnnotationsList.prototype.show = function () {
+    if (!this.visible) {
         this.visible = true;
         this.$.find('.Ldt-AnnotationsList-header').show();
         this.widget_$.slideDown();
-        this.showScreen("Main")
+        this.showScreen("Main");
     }
-}
+};
 
 
-IriSP.Widgets.AnnotationsList.prototype.toggle = function() {
+IriSP.Widgets.AnnotationsList.prototype.toggle = function () {
     if (!this.always_visible) {
         if (this.visible) {
             this.hide();
@@ -1000,36 +996,36 @@ IriSP.Widgets.AnnotationsList.prototype.toggle = function() {
     }
 };
 
-IriSP.Widgets.AnnotationsList.prototype.revertToMainScreen = function(){
-    if (this.$.find(".Ldt-AnnotationsList-ScreenMain").is(":hidden")){
+IriSP.Widgets.AnnotationsList.prototype.revertToMainScreen = function () {
+    if (this.$.find(".Ldt-AnnotationsList-ScreenMain").is(":hidden")) {
         this.showScreen("Main");
     }
-}
+};
 
-IriSP.Widgets.AnnotationsList.prototype.sendDelete = function(id){
+IriSP.Widgets.AnnotationsList.prototype.sendDelete = function (id) {
     var _this = this,
-        _url = Mustache.to_html(this.api_delete_endpoint, {annotation_id: id, project_id: this.project_id})
-    
+        _url = Mustache.to_html(this.api_delete_endpoint, {annotation_id: id, project_id: this.project_id});
+
     IriSP.jQuery.ajax({
         url: _url,
         type: this.api_delete_method,
         contentType: 'application/json',
-        success: function(_data) {
+        success: function (_data) {
             _this.showScreen('Success');
-            window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 2000));
+            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) {
+        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));
+            window.setTimeout(_this.functionWrapper("revertToMainScreen"), (_this.after_send_timeout || 2000));
         }
     });
     this.showScreen('Sending');
-}
+};
 
-IriSP.Widgets.AnnotationsList.prototype.draw = function() {
+IriSP.Widgets.AnnotationsList.prototype.draw = function () {
     this.jwplayers = {};
     this.mashupMode = (this.media.elementType === "mashup");
 
@@ -1038,89 +1034,88 @@ IriSP.Widgets.AnnotationsList.prototype.draw = function() {
     var _this = this;
     this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
     this.widget_$ = this.$.find(".Ldt-AnnotationsListWidget");
-    
-    if (this.show_filters){
-        if (this.user_filter){
+
+    if (this.show_filters) {
+        if (this.user_filter) {
             this.userselect_$ = this.$.find("#Ldt-AnnotationsList-userFilter");
-            this.userselect_$.change(function(){
+            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){
-                var _users = _this.source.users_data.filter(function(_user_data){
+            this.userselect_$.html("<option selected value='false'>" + this.l10n.everyone + "</option>");
+            this.usernames.forEach(function (_user) {
+                var _users = _this.source.users_data.filter(function (_user_data) {
                     return _user_data.username == _user;
                 }),
                     _user_data = {};
-                if (_users.length == 0){
+                if (_users.length == 0) {
                     _user_data.username = _user;
-                }
-                else{
+                } else {
                     _user_data = _users[0];
                 }
-                _this.userselect_$.append("<option value='"+_user+"'>"+_this.make_name_string_function(_user_data)+"</option>");
+                _this.userselect_$.append("<option value='" + _user + "'>" + _this.make_name_string_function (_user_data) + "</option>");
             });
         }
-        if (this.keyword_filter){
+        if (this.keyword_filter) {
             this.keywordinput_$ = this.$.find("#Ldt-AnnotationsList-keywordsFilter");
-            this.keywordinput_$.keyup(function(){
+            this.keywordinput_$.keyup(function () {
                 _this.player.trigger("AnnotationsList.refresh");
             });
-            
+
         }
-        if (this.segment_filter){
+        if (this.segment_filter) {
             this.ignoresegmentcheckbox_$ = this.$.find("#Ldt-AnnotationsList-ignoreSegmentsFilter");
-            this.ignoresegmentcheckbox_$.click(function(){
+            this.ignoresegmentcheckbox_$.click(function () {
                 _this.player.trigger("AnnotationsList.refresh");
             });
         }
-        if(this.date_filter){
+        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);
+            this.datefilterinput_$.change(function () {
+                _this.player.trigger("AnnotationsList.refresh");
+            });
+            if (this.current_day_filter) {
+                var currentDate = new Date();
+                this.datefilterinput_$.datepicker("setDate", currentDate);
             }
         }
-        if(this.latest_contributions_filter){
+        if (this.latest_contributions_filter) {
             this.latestcontributionscheckbox_$ = this.$.find("#Ldt-AnnotationsList-latestContributionsFilter");
-            this.latestcontributionscheckbox_$.click(function(){
+            this.latestcontributionscheckbox_$.click(function () {
                 _this.player.trigger("AnnotationsList.refresh");
             });
         }
     }
-    
-    this.source.getAnnotations().on("search", function(_text) {
+
+    this.source.getAnnotations().on("search", function (_text) {
         _this.searchString = _text;
         if (_this.source !== _this.currentSource) {
             _this.currentSource.getAnnotations().search(_text);
             _this.throttledRefresh();
         }
     });
-    this.source.getAnnotations().on("found", function() {
+    this.source.getAnnotations().on("found", function () {
         _this.throttledRefresh();
     });
-    this.source.getAnnotations().on("not-found", function() {
+    this.source.getAnnotations().on("not-found", function () {
         _this.throttledRefresh();
     });
-    this.source.getAnnotations().on("clear-search", function() {
+    this.source.getAnnotations().on("clear-search", function () {
         _this.searchString = false;
         if (_this.source !== _this.currentSource) {
             _this.currentSource.getAnnotations().trigger("clear-search");
         }
     });
-    
-    this.$.find(".Ldt-AnnotationsList-Close").click(function(){
+
+    this.$.find(".Ldt-AnnotationsList-Close").click(function () {
         _this.showScreen("Main");
-    })
-    
-    this.source.getAnnotations().on("search-cleared", function() {
+    });
+
+    this.source.getAnnotations().on("search-cleared", function () {
         _this.throttledRefresh();
     });
 
-    this.onMdpEvent("AnnotationsList.refresh", function() {
+    this.onMdpEvent("AnnotationsList.refresh", function () {
         if (_this.ajax_url) {
             if (_this.mashupMode) {
                 _this.ajaxMashup();
@@ -1131,7 +1126,7 @@ IriSP.Widgets.AnnotationsList.prototype.draw = function() {
         _this.throttledRefresh(false);
     });
 
-    this.onMdpEvent("AnnotationsList.update", function() {
+    this.onMdpEvent("AnnotationsList.update", function () {
         if (_this.ajax_url) {
             if (_this.mashupMode) {
                 _this.ajaxMashup();
@@ -1153,19 +1148,19 @@ IriSP.Widgets.AnnotationsList.prototype.draw = function() {
     }
 
     if (this.refresh_interval) {
-        window.setInterval(function() {
+        window.setInterval(function () {
             _this.currentSource.get();
         }, this.refresh_interval);
     }
-    
-    if (this.annotations_count_header){
+
+    if (this.annotations_count_header) {
         this.annotations_count = false;
     }
-    
-    this.onMdpEvent("AnnotationsList.toggle","toggle");
+
+    this.onMdpEvent("AnnotationsList.toggle", "toggle");
     this.onMdpEvent("AnnotationsList.hide", "hide");
     this.onMdpEvent("AnnotationsList.show", "show");
-    
+
     this.onMdpEvent("createAnnotationWidget.addedAnnotation", this.throttledRefresh);
     var _events = [
         "timeupdate",
@@ -1178,14 +1173,14 @@ IriSP.Widgets.AnnotationsList.prototype.draw = function() {
     }
 
     this.throttledRefresh();
-    
+
     this.showScreen("Main");
-    this.$.find(".Ldt-AnnotationsList-CancelDelete").click(function(){
-        _this.showScreen("Main")
+    this.$.find(".Ldt-AnnotationsList-CancelDelete").click(function () {
+        _this.showScreen("Main");
     });
-    
+
     this.visible = true;
-    if (!this.start_visible){
+    if (!this.start_visible) {
         this.hide();
     }
 };

From 7747262a408b38da297026d233e3600b4168a03a Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 12 Oct 2015 11:29:23 +0200
Subject: [PATCH 006/204] Forward show_title parameter to annotation template

---
 src/widgets/AnnotationsList.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/widgets/AnnotationsList.js b/src/widgets/AnnotationsList.js
index 2d0f7c0b..fb7ed0e3 100644
--- a/src/widgets/AnnotationsList.js
+++ b/src/widgets/AnnotationsList.js
@@ -595,6 +595,7 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function (_forceRedraw) {
                 show_publish: _this.show_publish,
                 show_creator: _this.show_creator,
                 show_twitter: _this.show_twitter,
+                show_title: _this.show_title,
                 twitter_param: IriSP.jQuery.param({ url: _url, text: IriSP.textFieldHtml(_title) + (_this.twitter_hashtag ? ' #' + _this.twitter_hashtag : "") }),
                 allow_annotations_deletion: _this.allow_annotations_deletion
             };

From 443dab04ca1fddb0872f492fa10749353f86f4dc Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 12 Oct 2015 11:42:28 +0200
Subject: [PATCH 007/204] Simplify importUsers code

---
 src/widgets/AnnotationsList.js | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/widgets/AnnotationsList.js b/src/widgets/AnnotationsList.js
index c6158f0b..a311ce04 100644
--- a/src/widgets/AnnotationsList.js
+++ b/src/widgets/AnnotationsList.js
@@ -117,21 +117,18 @@ IriSP.Widgets.AnnotationsList.prototype.defaults = {
 
 IriSP.Widgets.AnnotationsList.prototype.importUsers = function () {
     if (!this.source.users_data && this.api_users_endpoint) {
-        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 = IriSP._.unique(this.getWidgetAnnotations(), function (a) {
+            return a.creator;
         });
-        this.usernames.forEach(function (_username) {
-            usernames_list_string += _username + ",";
+
+        usernames_list_string = this.usernames.join(",");
+        var _url = Mustache.to_html(this.api_users_endpoint, {
+            usernames_list_string: encodeURIComponent(usernames_list_string),
+            usernames_list_length: this.usernames.length
         });
-        usernames_list_string = usernames_list_string.substring(0, usernames_list_string.length - 1);
-        var _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,

From fad0d825a18d7657fd673b9c8a02b2e25c30f726 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 12 Oct 2015 11:42:54 +0200
Subject: [PATCH 008/204] Whitespace fixes

---
 src/widgets/AnnotationsList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/AnnotationsList.js b/src/widgets/AnnotationsList.js
index a311ce04..b564841f 100644
--- a/src/widgets/AnnotationsList.js
+++ b/src/widgets/AnnotationsList.js
@@ -570,7 +570,7 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function (_forceRedraw) {
             var _created = false;
             var _tags;
             if (_this.show_creation_date) {
-                _created = _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString().replace(/\u200E/g, '').replace(/^([^\d]*\d{1,2}:\d{1,2}):\d{1,2}([^\d]*)$/, '$1$2');;
+                _created = _annotation.created.toLocaleDateString() + ", " + _annotation.created.toLocaleTimeString().replace(/\u200E/g, '').replace(/^([^\d]*\d{1,2}:\d{1,2}):\d{1,2}([^\d]*)$/, '$1$2');;
             }
             if (this.tags == true) {
                 _tags = _annotation.getTagTexts();

From 825d02a02fb57add8c79f0db5c09bfec10e1c1b3 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 12 Oct 2015 11:47:45 +0200
Subject: [PATCH 009/204] Formatting fixes

---
 src/widgets/EnrichedPlan.css | 11 +++++------
 src/widgets/EnrichedPlan.js  |  4 ++--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index d7b44287..5ab5e6fc 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -10,7 +10,7 @@
 }
 
 .Ldt-EnrichedPlan-SlideItem.filtered_out {
-    max-height: 0px;
+    max-height: 0;
     overflow: hidden;
 }
 
@@ -19,7 +19,6 @@
     width: 24px;
     color: #999 !important;
     font-size: 9px !important;
-    width: 24px;
     vertical-align: top;
 }
 
@@ -101,14 +100,14 @@
 
 .Ldt-EnrichedPlan-Controls {
     height: 36px;
-    padding: 9px 0px 6px 0px;
+    padding: 9px 0 6px 0;
     border-bottom: 1px solid #000;
     overflow-y: hidden;
     overflow-x: hidden;
     position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
+    top: 0;
+    left: 0;
+    right: 0;
     z-index: 1;
     background-color: #fff;
 }
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 4baee77d..8a4bd974 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -4,7 +4,7 @@
 
 IriSP.Widgets.EnrichedPlan = function (player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
-}
+};
 
 IriSP.Widgets.EnrichedPlan.prototype = new IriSP.Widgets.Widget();
 
@@ -18,7 +18,7 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
     show_teacher_notes: true,
     show_other_notes: true,
     show_own_notes: true
-}
+};
 
 IriSP.Widgets.EnrichedPlan.prototype.template =
       '<div class="Ldt-EnrichedPlan-Container">'

From 9298b3fee46c719f29bcaf06f7eed838e3a6e6e5 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 12 Oct 2015 16:23:29 +0200
Subject: [PATCH 010/204] Fix closing tag

---
 src/widgets/Controller.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/Controller.js b/src/widgets/Controller.js
index 2584d210..ee41c134 100644
--- a/src/widgets/Controller.js
+++ b/src/widgets/Controller.js
@@ -35,7 +35,7 @@ IriSP.Widgets.Controller.prototype.template =
     + '<div class="Ldt-Ctrl-Quiz-Create Ldt-TraceMe" ></div>'
     + '</div>'
     + '<div class="Ldt-Ctrl-Right">'
-    + '{{^disable_fullscreen}}<div class="Ldt-Ctrl-Fullscreen-Button Ldt-TraceMe" title="Passer le lecteur en plein-écran"></div{{/disable_fullscreen}}'
+    + '{{^disable_fullscreen}}<div class="Ldt-Ctrl-Fullscreen-Button Ldt-TraceMe" title="Passer le lecteur en plein-écran"></div>{{/disable_fullscreen}}'
     + '<div class="Ldt-Ctrl-spacer"></div>'
     + '<div class="Ldt-Ctrl-Time">'
     + '<div class="Ldt-Ctrl-Time-Elapsed" title="{{l10n.elapsed_time}}">00:00</div>'

From bd4ff1c0951121250266561184d6542791dc41f1 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 12 Oct 2015 18:11:07 +0200
Subject: [PATCH 011/204] Fix BarSlider display

---
 src/widgets/BarSlider.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/widgets/BarSlider.css b/src/widgets/BarSlider.css
index 52f7e445..b2b87298 100644
--- a/src/widgets/BarSlider.css
+++ b/src/widgets/BarSlider.css
@@ -9,7 +9,6 @@
     background-color: black;
     background-image: none;
     border: none;
-    border-bottom: 1px dashed #666;
     position: relative;
     border-radius: 0;
 }
@@ -73,7 +72,7 @@
     position: absolute;
     top: 14px;
     left: 4px;
-    width: 0px;
+    width: 0;
     height: 8px;
 }
 .Ldt-BarSlider .rightarrow {
@@ -93,7 +92,7 @@
 .Ldt-BarSlider-currentbarhead {
     position: absolute;
     top: 15px;
-    left: 0px;
+    left: 4px;
 }
 .Ldt-BarSlider-barmark {
     width: 1px;

From c844b902926ab5c7a3fa519f948eeb02f597252a Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 12 Oct 2015 18:11:19 +0200
Subject: [PATCH 012/204] Implement custom Coco video controller widget

---
 src/widgets/CocoController.css                |  85 ++++++++
 src/widgets/CocoController.js                 | 183 ++++++++++++++++++
 .../img/coco_video_control_facebook.svg       |  14 ++
 .../img/coco_video_control_fullscreen.svg     |   9 +
 src/widgets/img/coco_video_control_pause.svg  | 108 +++++++++++
 src/widgets/img/coco_video_control_play.svg   |   8 +
 src/widgets/img/coco_video_control_sound.svg  |  16 ++
 .../img/coco_video_control_twitter.svg        |  20 ++
 8 files changed, 443 insertions(+)
 create mode 100644 src/widgets/CocoController.css
 create mode 100644 src/widgets/CocoController.js
 create mode 100644 src/widgets/img/coco_video_control_facebook.svg
 create mode 100644 src/widgets/img/coco_video_control_fullscreen.svg
 create mode 100644 src/widgets/img/coco_video_control_pause.svg
 create mode 100644 src/widgets/img/coco_video_control_play.svg
 create mode 100644 src/widgets/img/coco_video_control_sound.svg
 create mode 100644 src/widgets/img/coco_video_control_twitter.svg

diff --git a/src/widgets/CocoController.css b/src/widgets/CocoController.css
new file mode 100644
index 00000000..afc74f40
--- /dev/null
+++ b/src/widgets/CocoController.css
@@ -0,0 +1,85 @@
+/* Player Widget */
+
+.Ldt-CocoCtrl {
+    font-family: Roboto;
+    font-size: 14px;
+    background: black;
+    color: white;
+    height: 36px;
+    position: relative;
+    overflow: hidden;
+}
+
+.Ldt-CocoCtrl div {
+    display: inline-block;
+}
+
+.Ldt-CocoCtrl-Right {
+    float: right;
+    margin-right: 4px;
+}
+
+.Ldt-CocoCtrl-button {
+    width: 32px;
+    height: 22px;
+    margin-left: 4px;
+    margin-top: 6px;
+    cursor: pointer;
+}
+
+.Ldt-CocoCtrl-Play {
+    background: no-repeat center/100% url("img/coco_video_control_play.svg");
+}
+
+.Ldt-CocoCtrl-Play-PauseState {
+    background: no-repeat center/100% url("img/coco_video_control_pause.svg");
+}
+
+.Ldt-CocoCtrl-Time {
+    vertical-align: middle;
+    margin-left: 6px;
+    height: 30px;
+}
+
+.Ldt-CocoCtrl-Sound {
+    background: url("img/coco_video_control_sound.svg");
+}
+
+.Ldt-CocoCtrl-Volume-Control {
+    display: none;
+}
+
+.Ldt-CocoCtrl-Volume-Bar {
+    height: 5px;
+    margin: 9px 3px 0;
+    background: black;
+}
+
+.Ldt-CocoCtrl-Volume-Control .ui-slider-handle {
+    width: 6px;
+    height: 19px;
+    color: white;
+    background: black;
+    top: -8px;
+    margin-left: -4px;
+    cursor: pointer;
+}
+
+.Ldt-CocoCtrl-Social .Ldt-CocoCtrl-button {
+    width: 18px;
+    height: 18px;
+    margin-left: 4px;
+    margin-bottom: 2px;
+    cursor: pointer;
+}
+
+.Ldt-CocoCtrl-Fullscreen-Button {
+    background: url("img/coco_video_control_fullscreen.svg");
+}
+
+.Ldt-CocoCtrl-Twitter-Button {
+    background: url("img/coco_video_control_twitter.svg");
+}
+.Ldt-CocoCtrl-Facebook-Button {
+    background: url("img/coco_video_control_facebook.svg");
+}
diff --git a/src/widgets/CocoController.js b/src/widgets/CocoController.js
new file mode 100644
index 00000000..8ded48d9
--- /dev/null
+++ b/src/widgets/CocoController.js
@@ -0,0 +1,183 @@
+/* Displays Play and Pause buttons, Search Button and Form, Volume Control */
+
+IriSP.Widgets.CocoController = function (player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.CocoController.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.CocoController.prototype.defaults = {
+};
+
+IriSP.Widgets.CocoController.prototype.template =
+    '<div class="Ldt-CocoCtrl">'
+    + '<div class="Ldt-CocoCtrl-button Ldt-CocoCtrl-Play Ldt-CocoCtrl-Play-PlayState Ldt-TraceMe" title="{{l10n.play_pause}}"></div>'
+    + '<div class="Ldt-CocoCtrl-Time">'
+    + '  <div class="Ldt-CocoCtrl-Time-Elapsed" title="{{l10n.elapsed_time}}">--:--</div>'
+    + '  <div class="Ldt-CocoCtrl-Time-Separator">/</div>'
+    + '  <div class="Ldt-CocoCtrl-Time-Total" title="{{l10n.total_time}}">--:--</div>'
+    + '</div>'
+    + '<div class="Ldt-CocoCtrl-Right">'
+    + '   <div class="Ldt-CocoCtrl-Social">'
+    + '       <div class="Ldt-CocoCtrl-button Ldt-CocoCtrl-Twitter-Button Ldt-TraceMe" title="{{l10n.share_twitter}}"></div>'
+    + '       <div class="Ldt-CocoCtrl-button Ldt-CocoCtrl-Facebook-Button Ldt-TraceMe" title="{{l10n.share_facebook}}"></div>'
+    + '   </div>'
+    + '   <div class="Ldt-CocoCtrl-button Ldt-CocoCtrl-Fullscreen-Button Ldt-TraceMe" title="{{l10n.fullscreen}}"></div>'
+    + '   <div class="Ldt-CocoCtrl-button Ldt-CocoCtrl-Sound" title="{{l10n.volume_control}}"></div>'
+    + '   <div class="Ldt-Ctrl-Volume-Control" title="{{l10n.volume_control}}">'
+    + '        <div class="Ldt-Ctrl-Volume-Bar"></div>'
+    + '   </div>'
+    + '</div>'
+    + '</div>';
+
+IriSP.Widgets.CocoController.prototype.messages = {
+    en: {
+        play_pause: "Play/Pause",
+        play: "Play",
+        pause: "Pause",
+        mute: "Mute",
+        unmute: "Unmute",
+        elapsed_time: "Elapsed time",
+        total_time: "Total duration",
+        volume: "Volume",
+        volume_control: "Volume control",
+        fullscreen: "Fullscreen mode"
+    },
+    fr: {
+        play_pause: "Lecture/Pause",
+        play: "Lecture",
+        pause: "Pause",
+        elapsed_time: "Temps écoulé",
+        total_time: "Durée totale",
+        volume: "Niveau sonore",
+        volume_control: "Réglage du niveau sonore",
+        fullscreen: "Mode plein écran"
+    }
+};
+
+IriSP.Widgets.CocoController.prototype.draw = function () {
+    var _this = this;
+    this.renderTemplate();
+
+    // Define blocks
+    this.$playButton = this.$.find(".Ldt-CocoCtrl-Play");
+    this.$searchBlock = this.$.find(".Ldt-CocoCtrl-Search");
+    this.$searchInput = this.$.find(".Ldt-CocoCtrl-SearchInput");
+    this.$volumeBar = this.$.find(".Ldt-CocoCtrl-Volume-Bar");
+    this.$timeElapsed = this.$.find(".Ldt-CocoCtrl-Time-Elapsed");
+    this.$timeTotal = this.$.find(".Ldt-CocoCtrl-Time-Total");
+
+    // handle events
+    this.onMediaEvent("play", "playButtonUpdater");
+    this.onMediaEvent("pause", "playButtonUpdater");
+    this.onMediaEvent("volumechange", "volumeUpdater");
+    this.onMediaEvent("timeupdate", "timeDisplayUpdater");
+    this.onMediaEvent("loadedmetadata", "volumeUpdater");
+
+    // handle clicks
+    this.$playButton.click(this.functionWrapper("playHandler"));
+
+    // Fullscreen handling
+    this.$.find(".Ldt-CocoCtrl-Fullscreen-Button").click(this.functionWrapper("toggleFullscreen"));
+    var fullscreen_event_name = IriSP.getFullscreenEventname();
+    if (fullscreen_event_name) {
+        document.addEventListener(fullscreen_event_name, function () {
+            if (IriSP.isFullscreen() && IriSP.getFullscreenElement() == _this.$[0]) {
+                _this.$.addClass("Ldt-Fullscreen-Element");
+            } else {
+                _this.$.removeClass("Ldt-Fullscreen-Element");
+            }
+        });
+    };
+
+    var _volctrl = this.$.find(".Ldt-CocoCtrl-Volume-Control");
+    this.$.find('.Ldt-CocoCtrl-Sound')
+        .click(this.functionWrapper("muteHandler"))
+        .mouseover(function () {
+            _volctrl.show();
+        })
+        .mouseout(function () {
+            _volctrl.hide();
+        });
+    _volctrl.mouseover(function () {
+        _volctrl.show();
+    }).mouseout(function () {
+        _volctrl.hide();
+    });
+
+    // Allow Volume Cursor Dragging
+    this.$volumeBar.slider({
+        slide: function (event, ui) {
+            _this.$volumeBar.attr("title", _this.l10n.volume + ': ' + ui.value + '%');
+            _this.media.setVolume(ui.value / 100);
+        },
+        stop: this.functionWrapper("volumeUpdater")
+    });
+
+    this.timeDisplayUpdater(new IriSP.Model.Time(0));
+};
+
+/* Update the elasped time div */
+IriSP.Widgets.CocoController.prototype.timeDisplayUpdater = function (_time) {
+    var _totalTime = this.media.duration;
+    this.$timeElapsed.html(_time.toString());
+    this.$timeTotal.html(_totalTime.toString());
+};
+
+/* update the icon of the button - separate function from playHandler
+   because in some cases (for instance, when the user directly clicks on
+   the jwplayer window) we have to change the icon without playing/pausing
+*/
+IriSP.Widgets.CocoController.prototype.playButtonUpdater = function () {
+    if (this.media.getPaused()) {
+        /* the background sprite is changed by adding/removing the correct classes */
+        this.$playButton
+            .attr("title", this.l10n.play)
+            .removeClass("Ldt-CocoCtrl-Play-PauseState")
+            .addClass("Ldt-CocoCtrl-Play-PlayState");
+    } else {
+        this.$playButton
+            .attr("title", this.l10n.pause)
+            .removeClass("Ldt-CocoCtrl-Play-PlayState")
+            .addClass("Ldt-CocoCtrl-Play-PauseState");
+    }
+};
+
+//FullScreen
+IriSP.Widgets.CocoController.prototype.toggleFullscreen = function () {
+    if (IriSP.isFullscreen()) {
+        IriSP.setFullScreen(this.$[0], false);
+    } else {
+        IriSP.setFullScreen(this.$[0], true);
+    }
+};
+
+IriSP.Widgets.CocoController.prototype.playHandler = function () {
+    if (this.media.getPaused()) {
+        this.media.play();
+    } else {
+        this.media.pause();
+    }
+};
+
+IriSP.Widgets.CocoController.prototype.muteHandler = function () {
+    this.media.setMuted(!this.media.getMuted());
+};
+
+IriSP.Widgets.CocoController.prototype.volumeUpdater = function () {
+    var _muted = this.media.getMuted(),
+        _vol = this.media.getVolume();
+    if (_vol === false) {
+        _vol = .5;
+    }
+    var _soundCtl = this.$.find(".Ldt-CocoCtrl-Sound");
+    _soundCtl.removeClass("Ldt-CocoCtrl-Sound-Mute Ldt-CocoCtrl-Sound-Half Ldt-CocoCtrl-Sound-Full");
+    if (_muted) {
+        _soundCtl.attr("title", this.l10n.unmute)
+            .addClass("Ldt-CocoCtrl-Sound-Mute");
+    } else {
+        _soundCtl.attr("title", this.l10n.mute)
+            .addClass(_vol < .5 ? "Ldt-CocoCtrl-Sound-Half" : "Ldt-CocoCtrl-Sound-Full");
+    }
+    this.$volumeBar.slider("value", _muted ? 0 : 100 * _vol);
+};
diff --git a/src/widgets/img/coco_video_control_facebook.svg b/src/widgets/img/coco_video_control_facebook.svg
new file mode 100644
index 00000000..f579860f
--- /dev/null
+++ b/src/widgets/img/coco_video_control_facebook.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+<path fill="#FFFFFF" d="M9,0C4.036,0,0.001,4.036,0,9c0.001,4.962,4.036,8.998,9,9c4.965-0.002,8.999-4.037,9-9
+	C17.999,4.036,13.965,0,9,0z M14.654,14.652C13.204,16.102,11.206,16.998,9,17c-2.205-0.002-4.204-0.896-5.654-2.348
+	C1.896,13.203,1,11.205,1,9c0-2.207,0.896-4.205,2.346-5.654S6.795,1,9,1c2.206,0,4.204,0.896,5.654,2.346
+	C16.104,4.795,17,6.793,17,9C17,11.205,16.104,13.203,14.654,14.652z"/>
+<g>
+	<path fill="#FFFFFF" d="M10.766,5.786H9.814c0,0-0.42,0.031-0.42,0.453c0,0.344,0,1.016,0,1.016h1.45l-0.172,1.672H9.394v4.724
+		H7.425V8.926H6.5V7.254h0.925V5.973c0-1.453,1.227-1.812,1.836-1.812s1.504,0,1.504,0V5.786z"/>
+</g>
+</svg>
diff --git a/src/widgets/img/coco_video_control_fullscreen.svg b/src/widgets/img/coco_video_control_fullscreen.svg
new file mode 100644
index 00000000..a3f3972d
--- /dev/null
+++ b/src/widgets/img/coco_video_control_fullscreen.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="32px" height="22px" viewBox="0 0 32 22" enable-background="new 0 0 32 22" xml:space="preserve">
+<polygon fill="#FFFFFF" points="30,2 24,2 29.998,8 "/>
+<polygon fill="#FFFFFF" points="2,19.998 8,20 2.001,14 "/>
+<path fill="#FFFFFF" d="M31,1v20H1V1H31 M32,0H0v22h32V0L32,0z"/>
+</svg>
diff --git a/src/widgets/img/coco_video_control_pause.svg b/src/widgets/img/coco_video_control_pause.svg
new file mode 100644
index 00000000..63a74ea5
--- /dev/null
+++ b/src/widgets/img/coco_video_control_pause.svg
@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   id="Calque_1"
+   x="0px"
+   y="0px"
+   width="32px"
+   height="22px"
+   viewBox="0 0 32 22"
+   enable-background="new 0 0 32 22"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="coco_video_control_pause.svg"><metadata
+     id="metadata11"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs9"><linearGradient
+       id="linearGradient4147"
+       osb:paint="solid"><stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop4149" /></linearGradient><linearGradient
+       id="linearGradient4141"
+       osb:paint="solid"><stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop4143" /></linearGradient><linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4141"
+       id="linearGradient4145"
+       x1="8.974576"
+       y1="10.580508"
+       x2="15.822033"
+       y2="10.580508"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.85588498,0,0,1.0101075,1.3672905,-0.1069426)" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4147"
+       id="linearGradient4151"
+       x1="8.974576"
+       y1="10.580508"
+       x2="15.822033"
+       y2="10.580508"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.85588498,0,0,1.0101075,1.3672905,-0.1069426)" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4141"
+       id="linearGradient4157"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.85588498,0,0,1.0101075,9.3672905,-0.1069426)"
+       x1="8.974576"
+       y1="10.580508"
+       x2="15.822033"
+       y2="10.580508" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4147"
+       id="linearGradient4159"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.85588498,0,0,1.0101075,9.3672905,-0.1069426)"
+       x1="8.974576"
+       y1="10.580508"
+       x2="15.822033"
+       y2="10.580508" /></defs><sodipodi:namedview
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1024"
+     inkscape:window-height="768"
+     id="namedview7"
+     showgrid="false"
+     inkscape:zoom="10.727273"
+     inkscape:cx="16"
+     inkscape:cy="11"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Calque_1" /><path
+     fill="#FFFFFF"
+     d="M0,0v22h32V0H0z M31,21H1V1h30V21z"
+     id="path5" /><rect
+     style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:url(#linearGradient4145);fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient4151);stroke-width:1.85960841;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+     id="rect4139"
+     width="4.1488662"
+     height="14.030222"
+     x="9.9043798"
+     y="3.5653973" /><rect
+     y="3.5653973"
+     x="17.904381"
+     height="14.030222"
+     width="4.1488662"
+     id="rect4155"
+     style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:url(#linearGradient4157);fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient4159);stroke-width:1.85960841;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" /></svg>
\ No newline at end of file
diff --git a/src/widgets/img/coco_video_control_play.svg b/src/widgets/img/coco_video_control_play.svg
new file mode 100644
index 00000000..7a7be026
--- /dev/null
+++ b/src/widgets/img/coco_video_control_play.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="32px" height="22px" viewBox="0 0 32 22" enable-background="new 0 0 32 22" xml:space="preserve">
+<polygon fill="#FFFFFF" points="22,10.999 12,4 12,18 "/>
+<path fill="#FFFFFF" d="M0,0v22h32V0H0z M31,21H1V1h30V21z"/>
+</svg>
diff --git a/src/widgets/img/coco_video_control_sound.svg b/src/widgets/img/coco_video_control_sound.svg
new file mode 100644
index 00000000..565a7999
--- /dev/null
+++ b/src/widgets/img/coco_video_control_sound.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="32px" height="22px" viewBox="0 0 32 22" enable-background="new 0 0 32 22" xml:space="preserve">
+<path fill="#FFFFFF" d="M31,1v20H1V1H31 M32,0H0v22h32V0L32,0z"/>
+<g>
+	<path fill="#FFFFFF" d="M22.552,6l-0.824,0.666c0.108,0.104,0.227,0.193,0.327,0.307c0.912,1.031,1.475,2.453,1.475,4.027
+		c0,1.578-0.562,2.998-1.475,4.031c-0.1,0.111-0.217,0.199-0.323,0.303L22.555,16c1.193-1.242,1.945-3.02,1.945-5
+		C24.5,9.02,23.746,7.243,22.552,6z"/>
+	<path fill="#FFFFFF" d="M20.881,7.352l-0.844,0.684c0.9,0.602,1.51,1.697,1.512,2.965c-0.002,1.267-0.61,2.363-1.508,2.966
+		l0.844,0.682C21.871,13.818,22.52,12.5,22.52,11C22.52,9.5,21.87,8.182,20.881,7.352z"/>
+	<path fill="#FFFFFF" d="M20.488,11.002c0-0.83-0.399-1.541-0.988-1.932V4l-4.001,4H9.5v6h6.001l3.999,4v-5.068
+		C20.089,12.541,20.488,11.833,20.488,11.002z"/>
+</g>
+</svg>
diff --git a/src/widgets/img/coco_video_control_twitter.svg b/src/widgets/img/coco_video_control_twitter.svg
new file mode 100644
index 00000000..9693ea63
--- /dev/null
+++ b/src/widgets/img/coco_video_control_twitter.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M9,0C4.036,0,0.001,4.035,0,9c0.001,4.963,4.036,8.998,9,9c4.965-0.002,9-4.037,9-9
+		C17.999,4.035,13.965,0,9,0z M14.654,14.652C13.204,16.102,11.206,16.998,9,17c-2.205-0.002-4.203-0.896-5.653-2.348
+		C1.896,13.203,1,11.205,1,9c0-2.207,0.896-4.205,2.346-5.654S6.794,1,9,1c2.207,0,4.205,0.896,5.655,2.346
+		C16.104,4.795,17,6.793,17,9C17,11.205,16.104,13.203,14.654,14.652z"/>
+	<path fill="#FFFFFF" d="M13.104,6.59C13.104,6.59,13.104,6.59,13.104,6.59c0-0.001,0.001-0.001,0.002-0.002
+		c0.713-0.479,0.836-1.11,0.836-1.11c-0.252,0.151-1.021,0.354-1.404,0.448c-0.398-0.396-0.945-0.641-1.551-0.641
+		c-1.214,0-2.198,0.984-2.198,2.198c0,0.104,0.017,0.202,0.03,0.302C8.233,7.762,7.464,7.658,6.733,7.359
+		C5.262,6.758,4.436,5.679,4.436,5.679S3.57,7.058,4.78,8.173l0.334,0.263c-0.474,0.07-0.979-0.197-0.979-0.197
+		s-0.188,1.409,1.713,2.023c-0.169,0.049-0.345,0.09-0.461,0.09c-0.285,0-0.489-0.08-0.489-0.08s0.149,0.678,0.815,1.098
+		c0.478,0.303,0.938,0.371,1.292,0.361c-0.134,0.131-0.428,0.35-1.061,0.617c-0.777,0.328-2.035,0.344-2.035,0.344
+		c0.915,0.535,1.682,0.824,3.312,0.85c3.435,0,5.985-2.496,5.985-6.188c0-0.001,0-0.002,0-0.003
+		c0.594-0.425,1.062-1.098,1.062-1.098s-0.448,0.163-0.761,0.258C13.358,6.555,13.216,6.578,13.104,6.59z"/>
+</g>
+</svg>

From 34b4b2972eab075143860f69e823f5e951a142bf Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 12 Oct 2015 18:12:46 +0200
Subject: [PATCH 013/204] Do not specify px units for 0

---
 src/widgets/BarSlider.css | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/widgets/BarSlider.css b/src/widgets/BarSlider.css
index b2b87298..758b9589 100644
--- a/src/widgets/BarSlider.css
+++ b/src/widgets/BarSlider.css
@@ -18,8 +18,8 @@
     top: -2px;
     background: #fc00ff;
     border: 1px solid #ffffff;
-    width: 0px;
-    height: 0px;
+    width: 0;
+    height: 0;
     border-style: solid;
     border-color: transparent transparent transparent #ffffff;
     border-width: 3px 0 3px 5px;
@@ -31,7 +31,7 @@
     top: 14px;
     left: 4px;
     height: 8px;
-    width: 0px;
+    width: 0;
 }
 
 .Ldt-BarSlider-Time {
@@ -39,7 +39,7 @@
     bottom: 32px;
     background: #fff;
     color: #000000;
-    border-radius: 0px;
+    border-radius: 0;
     z-index: 8;
     font-size: 10px;
     width: 34px;
@@ -76,15 +76,15 @@
     height: 8px;
 }
 .Ldt-BarSlider .rightarrow {
-    width: 0px;
-    height: 0px;
+    width: 0;
+    height: 0;
     border-style: solid;
     border-color: transparent transparent transparent #ffffff;
     border-width: 3px 0 3px 5px;
 }
 .Ldt-BarSlider .leftarrow {
-    width: 0px;
-    height: 0px;
+    width: 0;
+    height: 0;
     border-style: solid;
     border-color: transparent transparent transparent #ffffff;
     border-width: 3px 5px 3px 0;

From e688f0f1155aa98aaf0acf4e8d58dcd91f9674fa Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 10:07:20 +0200
Subject: [PATCH 014/204] Coding style changes

---
 src/js/html-player.js | 98 +++++++++++++++++++++----------------------
 1 file changed, 49 insertions(+), 49 deletions(-)

diff --git a/src/js/html-player.js b/src/js/html-player.js
index fe1e7796..48ae25c1 100644
--- a/src/js/html-player.js
+++ b/src/js/html-player.js
@@ -1,25 +1,25 @@
 /* HTML player, to be reused in a widget, or elsewhere */
 
-IriSP.htmlPlayer = function(media, jqselector, options) {
-    
+IriSP.htmlPlayer = function (media, jqselector, options) {
+
     var opts = options || {},
         videoURL = opts.video || media.video;
-    
+
     if (typeof opts.url_transform === "function") {
         videoURL = opts.url_transform(videoURL);
     }
-        
+
     var videoEl = IriSP.jQuery('<video>');
-    
+
     videoEl.attr({
         width : opts.width || undefined,
         height : opts.height || undefined,
         controls : opts.controls || undefined,
         autoplay : opts.autostart || opts.autoplay || undefined
     });
-    
-    if(typeof videoURL === "string"){
-        videoEl.attr("src",videoURL);
+
+    if (typeof videoURL === "string") {
+        videoEl.attr("src", videoURL);
     } else {
         for (var i = 0; i < videoURL.length; i++) {
             var _srcNode = IriSP.jQuery('<source>');
@@ -42,104 +42,104 @@ IriSP.htmlPlayer = function(media, jqselector, options) {
         videoEl.append(_trackNode);
     }
     jqselector.html(videoEl);
-    
+
     var mediaEl = videoEl[0];
-    
+
     // Binding HTML video functions to media events
-    media.on("setcurrenttime", function(_milliseconds) {
+    media.on("setcurrenttime", function (_milliseconds) {
         try {
             mediaEl.currentTime = (_milliseconds / 1000);
         } catch (err) {
-            
+
         }
     });
-    
-    media.on("setvolume", function(_vol) {
+
+    media.on("setvolume", function (_vol) {
         media.volume = _vol;
         try {
             mediaEl.volume = _vol;
         } catch (err) {
-            
+
         }
     });
-    
-    media.on("setmuted", function(_muted) {
+
+    media.on("setmuted", function (_muted) {
         media.muted = _muted;
         try {
             mediaEl.muted = _muted;
         } catch (err) {
-            
+
         }
     });
-    
-    media.on("settimerange", function(_timeRange){
+
+    media.on("settimerange", function (_timeRange) {
         media.timeRange = _timeRange;
         try {
-            if (media.getCurrentTime() > _timeRange[0] || media.getCurrentTime() < _timeRange){
+            if (media.getCurrentTime() > _timeRange[0] || media.getCurrentTime() < _timeRange) {
                 mediaEl.currentTime = (_timeRange[0] / 1000);
             }
         } catch (err) {
         }
-    })
-    
-    media.on("resettimerange", function(){
+    });
+
+    media.on("resettimerange", function () {
         media.timeRange = false;
-    })
-    
-    media.on("setplay", function() {
+    });
+
+    media.on("setplay", function () {
         try {
             mediaEl.play();
         } catch (err) {
-            
+
         }
     });
-    
-    media.on("setpause", function() {
+
+    media.on("setpause", function () {
         try {
             mediaEl.pause();
         } catch (err) {
-            
+
         }
     });
-    
+
     // Binding DOM events to media
     function getVolume() {
         media.muted = mediaEl.muted;
         media.volume = mediaEl.volume;
     }
-    
-    videoEl.on("loadedmetadata", function() {
+
+    videoEl.on("loadedmetadata", function () {
         getVolume();
         media.trigger("loadedmetadata");
         media.trigger("volumechange");
     });
-    
-    videoEl.on("timeupdate", function() {
-        media.trigger("timeupdate", new IriSP.Model.Time(1000*mediaEl.currentTime));
+
+    videoEl.on("timeupdate", function () {
+        media.trigger("timeupdate", new IriSP.Model.Time(1000 * mediaEl.currentTime));
     });
-    
-    videoEl.on("volumechange", function() {
+
+    videoEl.on("volumechange", function () {
         getVolume();
         media.trigger("volumechange");
     });
-    
-    videoEl.on("play", function() {
+
+    videoEl.on("play", function () {
         media.trigger("play");
     });
-    
-    videoEl.on("pause", function() {
+
+    videoEl.on("pause", function () {
         media.trigger("pause");
     });
-    
-    videoEl.on("seeking", function() {
+
+    videoEl.on("seeking", function () {
         media.trigger("seeking");
     });
-    
-    videoEl.on("seeked", function() {
+
+    videoEl.on("seeked", function () {
         media.trigger("seeked");
     });
-    
-    videoEl.on("click", function() {
+
+    videoEl.on("click", function () {
         if (mediaEl.paused) {
             media.play();
         } else {

From 5e17b369b8760570848c279d0a51533350277c8c Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 11:04:58 +0200
Subject: [PATCH 015/204] Coding style fixes

---
 src/widgets/SlidePreview.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/widgets/SlidePreview.js b/src/widgets/SlidePreview.js
index 0b66eaa6..886e3746 100644
--- a/src/widgets/SlidePreview.js
+++ b/src/widgets/SlidePreview.js
@@ -1,33 +1,33 @@
-IriSP.Widgets.SlidePreview = function(player, config) {
+IriSP.Widgets.SlidePreview = function (player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
-}
+};
 
 IriSP.Widgets.SlidePreview.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.SlidePreview.prototype.defaults = {
     annotation_type: "Slides"
-}
+};
 
 IriSP.Widgets.SlidePreview.prototype.template = '<div class="Ldt-SlidePreview-Container"><div class="Ldt-SlidePreview-Slides"></div></div>';
 
 IriSP.Widgets.SlidePreview.prototype.annotationTemplate = '<div data-id="{{ id }}" data-timecode="{{ ms }}" class="Ldt-SlidePreview-Item"><img title="{{ begin }} - {{ atitle }}" class="Ldt-AnnotationsList-Thumbnail" src="{{ thumbnail }}"></div>';
 
-IriSP.Widgets.SlidePreview.prototype.draw = function() {
-    var _annotations = this.getWidgetAnnotations().sortBy(function(_annotation) {
+IriSP.Widgets.SlidePreview.prototype.draw = function () {
+    var _annotations = this.getWidgetAnnotations().sortBy(function (_annotation) {
         return _annotation.begin;
     });
     var _this = this;
     _this.renderTemplate();
     var content = _this.$.find('.Ldt-SlidePreview-Slides');
 
-    this.getWidgetAnnotations().forEach(function(_a) {
+    this.getWidgetAnnotations().forEach(function (_a) {
         var _data = {
             id : _a.id,
             content : IriSP.textFieldHtml(_a.title),
             begin : _a.begin.toString(),
             ms: _a.begin.milliseconds,
             thumbnail: _a.thumbnail
-            };
+        };
         var _html = Mustache.to_html(_this.annotationTemplate, _data);
         var _el = IriSP.jQuery(_html);
         content.append(_el);

From e16cdbb91deaf31622d755d56036b017c4ce78b7 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 11:06:03 +0200
Subject: [PATCH 016/204] Use trim method

---
 src/js/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/utils.js b/src/js/utils.js
index 0c0d4564..bbfb2210 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -32,7 +32,7 @@ IriSP.loadCss = function(_cssFile) {
 IriSP.textFieldHtml = function(_text, _regexp, _extend) {
     var list = [],
         positions = [],
-        text = _text.replace(/(^\s+|\s+$)/g,'');
+        text = _text.trim();
 
     function addToList(_rx, _startHtml, _endHtml) {
         while(true) {

From 51e2e81c502ebe52a2a45cd58e48f80b0a99999b Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 11:09:05 +0200
Subject: [PATCH 017/204] Display slide titles

---
 src/widgets/SlidePreview.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/SlidePreview.js b/src/widgets/SlidePreview.js
index 886e3746..fcb268ec 100644
--- a/src/widgets/SlidePreview.js
+++ b/src/widgets/SlidePreview.js
@@ -10,7 +10,7 @@ IriSP.Widgets.SlidePreview.prototype.defaults = {
 
 IriSP.Widgets.SlidePreview.prototype.template = '<div class="Ldt-SlidePreview-Container"><div class="Ldt-SlidePreview-Slides"></div></div>';
 
-IriSP.Widgets.SlidePreview.prototype.annotationTemplate = '<div data-id="{{ id }}" data-timecode="{{ ms }}" class="Ldt-SlidePreview-Item"><img title="{{ begin }} - {{ atitle }}" class="Ldt-AnnotationsList-Thumbnail" src="{{ thumbnail }}"></div>';
+IriSP.Widgets.SlidePreview.prototype.annotationTemplate = '<div data-id="{{ id }}" data-timecode="{{ ms }}" class="Ldt-SlidePreview-Item"><img title="{{ begin }} - {{ title }}" class="Ldt-AnnotationsList-Thumbnail" src="{{ thumbnail }}"></div>';
 
 IriSP.Widgets.SlidePreview.prototype.draw = function () {
     var _annotations = this.getWidgetAnnotations().sortBy(function (_annotation) {
@@ -23,7 +23,7 @@ IriSP.Widgets.SlidePreview.prototype.draw = function () {
     this.getWidgetAnnotations().forEach(function (_a) {
         var _data = {
             id : _a.id,
-            content : IriSP.textFieldHtml(_a.title),
+            title : IriSP._.escape(_a.title),
             begin : _a.begin.toString(),
             ms: _a.begin.milliseconds,
             thumbnail: _a.thumbnail

From 37b789a457bfdcf1a8198caf7e47e5aff992b08f Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 11:19:24 +0200
Subject: [PATCH 018/204] Handle Controller.fullscreen_widget selector for
 designing fullscreen widget

---
 src/widgets/Controller.js | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/widgets/Controller.js b/src/widgets/Controller.js
index ee41c134..d12b5b15 100644
--- a/src/widgets/Controller.js
+++ b/src/widgets/Controller.js
@@ -13,6 +13,8 @@ IriSP.Widgets.Controller.prototype.defaults = {
     disable_ctrl_f: false,
     disable_fullscreen : true,
     always_show_search: false,
+    // Selector for the widget that needs to be fullscreened
+    fullscreen_widget: undefined,
     enable_quiz_toggle: undefined
 };
 
@@ -134,11 +136,14 @@ IriSP.Widgets.Controller.prototype.draw = function() {
     var fullscreen_event_name = IriSP.getFullscreenEventname();
     if (fullscreen_event_name) {
         document.addEventListener(fullscreen_event_name, function() {
-            if (IriSP.isFullscreen() && IriSP.getFullscreenElement() == _this.$[0]) {
-                _this.$.addClass("Ldt-Fullscreen-Element");
-            } else {
-                _this.$.removeClass("Ldt-Fullscreen-Element");
-            }
+            var widget = IriSP.jQuery(_this.fullscreen_widget);
+            if (widget.length) {
+                if (IriSP.isFullscreen() && IriSP.getFullscreenElement() == widget[0]) {
+                    widget.addClass("Ldt-Fullscreen-Element");
+                } else {
+                    widget.removeClass("Ldt-Fullscreen-Element");
+                }
+            };
         });
     };
 
@@ -246,10 +251,13 @@ IriSP.Widgets.Controller.prototype.playButtonUpdater = function() {
 
 //FullScreen
 IriSP.Widgets.Controller.prototype.toggleFullscreen = function() {
-    if (IriSP.isFullscreen()) {
-        IriSP.setFullScreen(this.$[0], false);
-    } else {
-        IriSP.setFullScreen(this.$[0], true);
+    var widget = IriSP.jQuery(this.fullscreen_widget);
+    if (widget.length) {
+        if (IriSP.isFullscreen()) {
+            IriSP.setFullScreen(widget[0], false);
+        } else {
+            IriSP.setFullScreen(widget[0], true);
+        }
     }
 };
 

From 419899d6ad4e3f68e30b785484ba9d960776dee6 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 11:22:45 +0200
Subject: [PATCH 019/204] Coding style fixes

---
 src/widgets/Controller.js | 101 ++++++++++++++++++--------------------
 1 file changed, 49 insertions(+), 52 deletions(-)

diff --git a/src/widgets/Controller.js b/src/widgets/Controller.js
index d12b5b15..a391ff78 100644
--- a/src/widgets/Controller.js
+++ b/src/widgets/Controller.js
@@ -1,6 +1,6 @@
 /* Displays Play and Pause buttons, Search Button and Form, Volume Control */
 
-IriSP.Widgets.Controller = function(player, config) {
+IriSP.Widgets.Controller = function (player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
     this.lastSearchValue = "";
 };
@@ -85,7 +85,7 @@ IriSP.Widgets.Controller.prototype.messages = {
     }
 };
 
-IriSP.Widgets.Controller.prototype.draw = function() {
+IriSP.Widgets.Controller.prototype.draw = function () {
     var _this = this;
     this.renderTemplate();
 
@@ -96,11 +96,11 @@ IriSP.Widgets.Controller.prototype.draw = function() {
     this.$volumeBar = this.$.find(".Ldt-Ctrl-Volume-Bar");
 
     // handle events
-    this.onMediaEvent("play","playButtonUpdater");
-    this.onMediaEvent("pause","playButtonUpdater");
-    this.onMediaEvent("volumechange","volumeUpdater");
-    this.onMediaEvent("timeupdate","timeDisplayUpdater");
-    this.onMediaEvent("loadedmetadata","volumeUpdater");
+    this.onMediaEvent("play", "playButtonUpdater");
+    this.onMediaEvent("pause", "playButtonUpdater");
+    this.onMediaEvent("volumechange", "volumeUpdater");
+    this.onMediaEvent("timeupdate", "timeDisplayUpdater");
+    this.onMediaEvent("loadedmetadata", "volumeUpdater");
 
     // handle clicks
     this.$playButton.click(this.functionWrapper("playHandler"));
@@ -111,19 +111,17 @@ IriSP.Widgets.Controller.prototype.draw = function() {
             this.$.find(".Ldt-Ctrl-Quiz-Create").addClass("Ldt-Ctrl-Quiz-Toggle-Active");
             // this.player.trigger("QuizCreator.show");
             this.$.find("#QuizEditContainer").show();
-        }
-        else
-        {
+        } else {
             this.$.find(".Ldt-Ctrl-Quiz-Enable").removeClass("Ldt-Ctrl-Quiz-Toggle-Active");
             this.$.find(".Ldt-Ctrl-Quiz-Create").removeClass("Ldt-Ctrl-Quiz-Toggle-Active");
             this.player.trigger("QuizCreator.hide");
             this.$.find("#QuizEditContainer").hide();
         }
     } else {
-            this.$.find(".Ldt-Ctrl-Quiz-Enable").hide();
+        this.$.find(".Ldt-Ctrl-Quiz-Enable").hide();
     }
 
-    this.$.find(".Ldt-Ctrl-Annotate").click(function() {
+    this.$.find(".Ldt-Ctrl-Annotate").click(function () {
         _this.player.trigger("CreateAnnotation.toggle");
     });
     this.$.find(".Ldt-Ctrl-SearchBtn").click(this.functionWrapper("searchButtonHandler"));
@@ -135,7 +133,7 @@ IriSP.Widgets.Controller.prototype.draw = function() {
     this.$.find(".Ldt-Ctrl-Fullscreen-Button").click(this.functionWrapper("toggleFullscreen"));
     var fullscreen_event_name = IriSP.getFullscreenEventname();
     if (fullscreen_event_name) {
-        document.addEventListener(fullscreen_event_name, function() {
+        document.addEventListener(fullscreen_event_name, function () {
             var widget = IriSP.jQuery(_this.fullscreen_widget);
             if (widget.length) {
                 if (IriSP.isFullscreen() && IriSP.getFullscreenElement() == widget[0]) {
@@ -154,15 +152,15 @@ IriSP.Widgets.Controller.prototype.draw = function() {
     var _volctrl = this.$.find(".Ldt-Ctrl-Volume-Control");
     this.$.find('.Ldt-Ctrl-Sound')
         .click(this.functionWrapper("muteHandler"))
-        .mouseover(function() {
+        .mouseover(function () {
             _volctrl.show();
         })
-        .mouseout(function() {
+        .mouseout(function () {
             _volctrl.hide();
         });
-    _volctrl.mouseover(function() {
+    _volctrl.mouseover(function () {
         _volctrl.show();
-    }).mouseout(function() {
+    }).mouseout(function () {
         _volctrl.hide();
     });
 
@@ -170,7 +168,7 @@ IriSP.Widgets.Controller.prototype.draw = function() {
     if (!this.disable_ctrl_f) {
         var _fKey = "F".charCodeAt(0),
             _lastCtrlFTime = 0;
-        IriSP.jQuery(document).keydown(function(_event) {
+        IriSP.jQuery(document).keydown(function (_event) {
             if (_event.keyCode === _fKey && (_event.ctrlKey || _event.metaKey)) {
                 var _time = IriSP.jQuery.now();
                 if (_time - _lastCtrlFTime > 2000) {
@@ -179,13 +177,14 @@ IriSP.Widgets.Controller.prototype.draw = function() {
                 _lastCtrlFTime = _time;
                 return false;
             }
+            return undefined;
         });
     }
 
     // Allow Volume Cursor Dragging
     this.$volumeBar.slider({
-        slide: function(event, ui) {
-            _this.$volumeBar.attr("title",_this.l10n.volume+': ' + ui.value + '%');
+        slide: function (event, ui) {
+            _this.$volumeBar.attr("title", _this.l10n.volume + ': ' + ui.value + '%');
             _this.media.setVolume(ui.value / 100);
         },
         stop: this.functionWrapper("volumeUpdater")
@@ -193,27 +192,27 @@ IriSP.Widgets.Controller.prototype.draw = function() {
 
     // trigger an IriSP.Player.MouseOver to the widgets that are interested (i.e : sliderWidget)
     this.$.hover(
-        function() {
+        function () {
             _this.player.trigger("Player.MouseOver");
         },
-        function() {
+        function () {
             _this.player.trigger("Player.MouseOut");
         });
 
     this.timeDisplayUpdater(new IriSP.Model.Time(0));
 
     var annotations = this.source.getAnnotations();
-    annotations.on("search", function(_text) {
+    annotations.on("search", function (_text) {
         _this.$searchInput.val(_text);
         _this.showSearchBlock();
     });
-    annotations.on("found", function(_text) {
-        _this.$searchInput.css('background-color','#e1ffe1');
+    annotations.on("found", function (_text) {
+        _this.$searchInput.css('background-color', "#e1ffe1");
     });
-    annotations.on("not-found", function(_text) {
+    annotations.on("not-found", function (_text) {
         _this.$searchInput.css('background-color', "#d62e3a");
     });
-    annotations.on("search-cleared", function() {
+    annotations.on("search-cleared", function () {
         _this.hideSearchBlock();
     });
     if (_this.always_show_search) {
@@ -222,7 +221,7 @@ IriSP.Widgets.Controller.prototype.draw = function() {
 };
 
 /* Update the elasped time div */
-IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function(_time) {
+IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function (_time) {
 
     // we get it at each call because it may change.
     var _totalTime = this.media.duration;
@@ -234,9 +233,9 @@ IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function(_time) {
    because in some cases (for instance, when the user directly clicks on
    the jwplayer window) we have to change the icon without playing/pausing
 */
-IriSP.Widgets.Controller.prototype.playButtonUpdater = function() {
+IriSP.Widgets.Controller.prototype.playButtonUpdater = function () {
     if (this.media.getPaused()) {
-    /* the background sprite is changed by adding/removing the correct classes */
+        /* the background sprite is changed by adding/removing the correct classes */
         this.$playButton
             .attr("title", this.l10n.play)
             .removeClass("Ldt-Ctrl-Play-PauseState")
@@ -250,7 +249,7 @@ IriSP.Widgets.Controller.prototype.playButtonUpdater = function() {
 };
 
 //FullScreen
-IriSP.Widgets.Controller.prototype.toggleFullscreen = function() {
+IriSP.Widgets.Controller.prototype.toggleFullscreen = function () {
     var widget = IriSP.jQuery(this.fullscreen_widget);
     if (widget.length) {
         if (IriSP.isFullscreen()) {
@@ -262,21 +261,19 @@ IriSP.Widgets.Controller.prototype.toggleFullscreen = function() {
 };
 
 //Quiz
-IriSP.Widgets.Controller.prototype.createQuiz = function() {
+IriSP.Widgets.Controller.prototype.createQuiz = function () {
     this.player.trigger("Quiz.hide");
     this.media.pause();
     this.player.trigger("QuizCreator.create");
 };
 
-IriSP.Widgets.Controller.prototype.toggleQuiz = function() {
+IriSP.Widgets.Controller.prototype.toggleQuiz = function () {
     this.enable_quiz_toggle = !this.enable_quiz_toggle;
     if (this.enable_quiz_toggle) {
         $(".Ldt-Ctrl-Quiz-Enable").addClass("Ldt-Ctrl-Quiz-Toggle-Active");
         $(".Ldt-Ctrl-Quiz-Create").addClass("Ldt-Ctrl-Quiz-Toggle-Active");
         this.player.trigger("Quiz.activate");
-    }
-    else
-    {
+    } else {
         $(".Ldt-Ctrl-Quiz-Enable").removeClass("Ldt-Ctrl-Quiz-Toggle-Active");
         $(".Ldt-Ctrl-Quiz-Create").removeClass("Ldt-Ctrl-Quiz-Toggle-Active");
         this.player.trigger("Quiz.deactivate");
@@ -284,7 +281,7 @@ IriSP.Widgets.Controller.prototype.toggleQuiz = function() {
     }
 };
 
-IriSP.Widgets.Controller.prototype.playHandler = function() {
+IriSP.Widgets.Controller.prototype.playHandler = function () {
     if (this.media.getPaused()) {
         this.media.play();
     } else {
@@ -292,11 +289,11 @@ IriSP.Widgets.Controller.prototype.playHandler = function() {
     }
 };
 
-IriSP.Widgets.Controller.prototype.muteHandler = function() {
+IriSP.Widgets.Controller.prototype.muteHandler = function () {
     this.media.setMuted(!this.media.getMuted());
 };
 
-IriSP.Widgets.Controller.prototype.volumeUpdater = function() {
+IriSP.Widgets.Controller.prototype.volumeUpdater = function () {
     var _muted = this.media.getMuted(),
         _vol = this.media.getVolume();
     if (_vol === false) {
@@ -309,42 +306,42 @@ IriSP.Widgets.Controller.prototype.volumeUpdater = function() {
             .addClass("Ldt-Ctrl-Sound-Mute");
     } else {
         _soundCtl.attr("title", this.l10n.mute)
-            .addClass(_vol < .5 ? "Ldt-Ctrl-Sound-Half" : "Ldt-Ctrl-Sound-Full" );
+            .addClass(_vol < .5 ? "Ldt-Ctrl-Sound-Half" : "Ldt-Ctrl-Sound-Full");
     }
     this.$volumeBar.slider("value", _muted ? 0 : 100 * _vol);
 };
 
-IriSP.Widgets.Controller.prototype.showSearchBlock = function() {
+IriSP.Widgets.Controller.prototype.showSearchBlock = function () {
     this.$searchBlock.animate({ width:"160px" }, 200);
-    this.$searchInput.css('background-color','#fff');
+    this.$searchInput.css('background-color', '#fff');
     this.$searchInput.focus();
 };
 
-IriSP.Widgets.Controller.prototype.hideSearchBlock = function() {
-    if (! this.always_show_search) {
-        this.$searchBlock.animate( { width: 0 }, 200);
+IriSP.Widgets.Controller.prototype.hideSearchBlock = function () {
+    if (!this.always_show_search) {
+        this.$searchBlock.animate({ width: 0 }, 200);
     }
 };
 
 /** react to clicks on the search button */
-IriSP.Widgets.Controller.prototype.searchButtonHandler = function() {
-    if ( !this.$searchBlock.width() ) {
+IriSP.Widgets.Controller.prototype.searchButtonHandler = function () {
+    if (!this.$searchBlock.width()) {
         this.showSearchBlock();
         var _val = this.$searchInput.val();
         if (_val) {
             this.source.getAnnotations().search(_val);
         }
-	} else {
+    } else {
         this.hideSearchBlock();
     }
 };
 
 /** this handler is called whenever the content of the search
    field changes */
-IriSP.Widgets.Controller.prototype.searchHandler = function() {
-    if ( !this.$searchBlock.width() ) {
+IriSP.Widgets.Controller.prototype.searchHandler = function () {
+    if (!this.$searchBlock.width()) {
         this.$searchBlock.css({ width:"160px" });
-        this.$searchInput.css('background-color','#fff');
+        this.$searchInput.css('background-color', '#fff');
     }
     var _val = this.$searchInput.val();
     this._positiveMatch = false;
@@ -355,7 +352,7 @@ IriSP.Widgets.Controller.prototype.searchHandler = function() {
             this.source.getAnnotations().search(_val);
         } else {
             this.source.getAnnotations().trigger("clear-search");
-            this.$searchInput.css('background-color','');
+            this.$searchInput.css('background-color', '');
         }
     }
     this.lastSearchValue = _val;

From 7be10a343f86ca8b936614658493c649c403369e Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 14:08:36 +0200
Subject: [PATCH 020/204] Preload metadata only for html player

---
 src/js/html-player.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/js/html-player.js b/src/js/html-player.js
index 48ae25c1..fca04d82 100644
--- a/src/js/html-player.js
+++ b/src/js/html-player.js
@@ -15,7 +15,8 @@ IriSP.htmlPlayer = function (media, jqselector, options) {
         width : opts.width || undefined,
         height : opts.height || undefined,
         controls : opts.controls || undefined,
-        autoplay : opts.autostart || opts.autoplay || undefined
+        autoplay : opts.autostart || opts.autoplay || undefined,
+        preload: "metadata"
     });
 
     if (typeof videoURL === "string") {

From 75349de2467e6ec8eabed31214a49dc827a1352c Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 14:09:00 +0200
Subject: [PATCH 021/204] Simplify barslider css code

---
 src/widgets/BarSlider.css | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/widgets/BarSlider.css b/src/widgets/BarSlider.css
index 758b9589..c304c7d3 100644
--- a/src/widgets/BarSlider.css
+++ b/src/widgets/BarSlider.css
@@ -14,15 +14,7 @@
 }
 
 .Ldt-BarSlider .ui-slider-handle {
-    border-radius: 8px;
-    top: -2px;
-    background: #fc00ff;
-    border: 1px solid #ffffff;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-color: transparent transparent transparent #ffffff;
-    border-width: 3px 0 3px 5px;
+    display: none;
 }
 
 .Ldt-BarSlider .ui-slider-range {
@@ -42,7 +34,7 @@
     border-radius: 0;
     z-index: 8;
     font-size: 10px;
-    width: 34px;
+    width: 5em;
     border: 1px solid #999999;
     padding: 1px;
     margin-left: -20px;

From 5140a24bb4abaf8914b3c74794e0f2722070b6be Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 14:09:29 +0200
Subject: [PATCH 022/204] Set width/height for  .Ldt-Fullscreen-Element

---
 src/widgets/CocoController.css | 5 +++++
 src/widgets/Controller.css     | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/src/widgets/CocoController.css b/src/widgets/CocoController.css
index afc74f40..5e6bd1ac 100644
--- a/src/widgets/CocoController.css
+++ b/src/widgets/CocoController.css
@@ -83,3 +83,8 @@
 .Ldt-CocoCtrl-Facebook-Button {
     background: url("img/coco_video_control_facebook.svg");
 }
+
+.Ldt-Fullscreen-Element {
+    width: 100%;
+    height: 100%;
+}
diff --git a/src/widgets/Controller.css b/src/widgets/Controller.css
index 2c8a5b2f..c4a27508 100644
--- a/src/widgets/Controller.css
+++ b/src/widgets/Controller.css
@@ -246,3 +246,7 @@ input.Ldt-Ctrl-SearchInput {
     width: 22px;
     border: none;
 }
+.Ldt-Fullscreen-Element {
+    width: 100%;
+    height: 100%;
+}

From 6206b968b5c82c64e231ca7d060d559dac2ae08f Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 14:09:41 +0200
Subject: [PATCH 023/204] Move search field out of controls

---
 src/widgets/EnrichedPlan.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 8a4bd974..8db68ff0 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -31,8 +31,8 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
     + ' <label for="{{prefix}}simplified_plan_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Own">Notes perso.</label>'
     + ' <input id="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Slide-Display" {{#show_slides}}checked{{/show_slides}} type="checkbox">'
     + ' <label for="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Slide-Display">Diapo<br/>&nbsp;</label>'
+    + ' </form>{{/show_controls}}'
     + ' <input class="Ldt-EnrichedPlan-Search-Input" type="search" incremental placeholder="Recherchez"/>'
-    + '</form>{{/show_controls}}'
     + '<div class="Ldt-EnrichedPlan-Content"></div>'
     + '</div>';
 

From f9d8c24181d65192819b94033a7690a1baa95199 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 14:10:01 +0200
Subject: [PATCH 024/204] Generate dummy toc annotation if no segmentation is
 found

---
 src/widgets/EnrichedPlan.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 8db68ff0..3c6aa38d 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -57,6 +57,17 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
     var _slides = this.getWidgetAnnotations().sortBy(function (_annotation) {
         return _annotation.begin;
     });
+    if (_slides.length == 0) {
+        // No valid segmentation defined. Let's pretend there is a
+        // unique global segment.
+        _slides = [ {
+            id: "whole",
+            title: "Whole video",
+            begin: 0,
+            end: _this.media.duration,
+            thumbnail: ""
+        } ];
+    };
     // All other annotations
     var _annotations = this.media.getAnnotations().filter(function (a) {
         return a.getAnnotationType().title != _this.annotation_type;

From e2b466efbf77f8fa90f34862b1c2480679aed61e Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 14:10:11 +0200
Subject: [PATCH 025/204] Fix fullscreen

---
 src/widgets/CocoController.js | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/widgets/CocoController.js b/src/widgets/CocoController.js
index 8ded48d9..05eeacdc 100644
--- a/src/widgets/CocoController.js
+++ b/src/widgets/CocoController.js
@@ -7,6 +7,8 @@ IriSP.Widgets.CocoController = function (player, config) {
 IriSP.Widgets.CocoController.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.CocoController.prototype.defaults = {
+    // Selector for the widget that needs to be fullscreened
+    fullscreen_widget: undefined
 };
 
 IriSP.Widgets.CocoController.prototype.template =
@@ -23,9 +25,10 @@ IriSP.Widgets.CocoController.prototype.template =
     + '       <div class="Ldt-CocoCtrl-button Ldt-CocoCtrl-Facebook-Button Ldt-TraceMe" title="{{l10n.share_facebook}}"></div>'
     + '   </div>'
     + '   <div class="Ldt-CocoCtrl-button Ldt-CocoCtrl-Fullscreen-Button Ldt-TraceMe" title="{{l10n.fullscreen}}"></div>'
-    + '   <div class="Ldt-CocoCtrl-button Ldt-CocoCtrl-Sound" title="{{l10n.volume_control}}"></div>'
-    + '   <div class="Ldt-Ctrl-Volume-Control" title="{{l10n.volume_control}}">'
-    + '        <div class="Ldt-Ctrl-Volume-Bar"></div>'
+    + '   <div class="Ldt-CocoCtrl-button Ldt-CocoCtrl-Sound" title="{{l10n.volume_control}}">'
+    + '      <div class="Ldt-CocoCtrl-Volume-Control" title="{{l10n.volume_control}}">'
+    + '          <div class="Ldt-CocoCtrl-Volume-Bar"></div>'
+    + '      </div>'
     + '   </div>'
     + '</div>'
     + '</div>';
@@ -82,11 +85,14 @@ IriSP.Widgets.CocoController.prototype.draw = function () {
     var fullscreen_event_name = IriSP.getFullscreenEventname();
     if (fullscreen_event_name) {
         document.addEventListener(fullscreen_event_name, function () {
-            if (IriSP.isFullscreen() && IriSP.getFullscreenElement() == _this.$[0]) {
-                _this.$.addClass("Ldt-Fullscreen-Element");
-            } else {
-                _this.$.removeClass("Ldt-Fullscreen-Element");
-            }
+            var widget = IriSP.jQuery(_this.fullscreen_widget);
+            if (widget.length) {
+                if (IriSP.isFullscreen() && IriSP.getFullscreenElement() == widget[0]) {
+                    widget.addClass("Ldt-Fullscreen-Element");
+                } else {
+                    widget.removeClass("Ldt-Fullscreen-Element");
+                }
+            };
         });
     };
 
@@ -145,10 +151,13 @@ IriSP.Widgets.CocoController.prototype.playButtonUpdater = function () {
 
 //FullScreen
 IriSP.Widgets.CocoController.prototype.toggleFullscreen = function () {
-    if (IriSP.isFullscreen()) {
-        IriSP.setFullScreen(this.$[0], false);
-    } else {
-        IriSP.setFullScreen(this.$[0], true);
+    var widget = IriSP.jQuery(this.fullscreen_widget);
+    if (widget.length) {
+        if (IriSP.isFullscreen()) {
+            IriSP.setFullScreen(widget[0], false);
+        } else {
+            IriSP.setFullScreen(widget[0], true);
+        }
     }
 };
 

From ae7d25535431ba79f7f68e8873753e4b58817ba7 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 16:06:58 +0200
Subject: [PATCH 026/204] Coding style fixes

---
 src/widgets/CreateAnnotation.js | 212 ++++++++++++++++----------------
 1 file changed, 104 insertions(+), 108 deletions(-)

diff --git a/src/widgets/CreateAnnotation.js b/src/widgets/CreateAnnotation.js
index f2eea61f..a8cd5c6f 100644
--- a/src/widgets/CreateAnnotation.js
+++ b/src/widgets/CreateAnnotation.js
@@ -1,6 +1,6 @@
 /* TODO: Add Social Network Sharing */
 
-IriSP.Widgets.CreateAnnotation = function(player, config) {
+IriSP.Widgets.CreateAnnotation = function (player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
     if (_this.editable_storage != '' && window.localStorage[_this.editable_storage]) {
         this.source.onLoad(function () {
@@ -35,15 +35,15 @@ IriSP.Widgets.CreateAnnotation.prototype.defaults = {
         keyword: "++",
         background_color: "#00a000",
         text_color: "#ffffff"
-    },{
+    }, {
         keyword: "--",
         background_color: "#c00000",
         text_color: "#ffffff"
-    },{
+    }, {
         keyword: "??",
         background_color: "#0000e0",
         text_color: "#ffffff"
-    },{
+    }, {
         keyword: "==",
         background_color: "#f0e000",
         text_color: "#000000"
@@ -65,7 +65,7 @@ IriSP.Widgets.CreateAnnotation.prototype.defaults = {
     custom_send_button: false,
     custom_cancel_button: false,
     custom_description_placeholder: false,
-    preview_mode: false,
+    preview_mode: false
 };
 
 IriSP.Widgets.CreateAnnotation.prototype.messages = {
@@ -169,7 +169,7 @@ IriSP.Widgets.CreateAnnotation.prototype.template =
     + '             pluginspage="http://www.macromedia.com/go/getflashplayer">'
     + '        </embed>'
     + '    </object>'
-    + '</div>{{/show_mic_record}}' 
+    + '</div>{{/show_mic_record}}'
     + '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">'
     + '{{#tags}}<li class="Ldt-CreateAnnotation-TagLi" tag-id="{{id}}" data-text="{{tag_prefix}}{{title}}"><span class="Ldt-CreateAnnotation-TagButton">{{title}}</span></li>{{/tags}}</ul></div>{{/tags.length}}'
     + '{{#polemics.length}}<div class="Ldt-CreateAnnotation-Polemics"><div class="Ldt-CreateAnnotation-PolemicTitle">{{l10n.add_polemic_keywords_}}</div><ul class="Ldt-CreateAnnotation-PolemicList">'
@@ -179,33 +179,32 @@ IriSP.Widgets.CreateAnnotation.prototype.template =
     + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Error">{{^always_visible}}<a title="{{l10n.close_widget}}" class="Ldt-CreateAnnotation-Close" href="#"></a>{{/always_visible}}<div class="Ldt-CreateAnnotation-InnerBox">{{l10n.error_while_contacting}}</div></div>'
     + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Saved">{{^always_visible}}<a title="{{l10n.close_widget}}" class="Ldt-CreateAnnotation-Close" href="#"></a>{{/always_visible}}<div class="Ldt-CreateAnnotation-InnerBox">{{l10n.annotation_saved}}</div></div>'
     + '</div></div>';
-    
-IriSP.Widgets.CreateAnnotation.prototype.draw = function() {
+
+IriSP.Widgets.CreateAnnotation.prototype.draw = function () {
     var _this = this;
-    
+
     this.begin = new IriSP.Model.Time();
     this.end = this.source.getDuration();
-    
+
     this.tag_prefix = this.tag_prefix || "";
-    
+
     if (this.tag_titles && !this.tags) {
-		if(!(this.tag_titles.length==1 && this.tag_titles[0]=="")){
-			this.tags = IriSP._(this.tag_titles).map(function(_tag_title) {
-				var _tag,
-					_tags = _this.source.getTags().searchByTitle(_tag_title, true);
-				if (_tags.length) {
-					_tag = _tags[0];
-				} else {
-					_tag = new IriSP.Model.Tag(false, _this.source);
-					_this.source.getTags().push(_tag);
-					_tag.title = _tag_title;
-				}
-				return _tag;
-			});
-        }
-        else{
-        	// we forced no tags if this.tag_titles = [''] (and not false)
-        	this.tags = true;
+        if (!(this.tag_titles.length == 1 && this.tag_titles[0] == "")) {
+            this.tags = IriSP._(this.tag_titles).map(function (_tag_title) {
+                var _tag,
+                    _tags = _this.source.getTags().searchByTitle(_tag_title, true);
+                if (_tags.length) {
+                    _tag = _tags[0];
+                } else {
+                    _tag = new IriSP.Model.Tag(false, _this.source);
+                    _this.source.getTags().push(_tag);
+                    _tag.title = _tag_title;
+                }
+                return _tag;
+            });
+        } else {
+            // we forced no tags if this.tag_titles = [''] (and not false)
+            this.tags = true;
         }
     }
     if (!this.tags) {
@@ -214,7 +213,7 @@ IriSP.Widgets.CreateAnnotation.prototype.draw = function() {
                 return -_tag.getAnnotations().length;
             })
             .slice(0, this.max_tags)
-            .map(function(_tag) {
+            .map(function (_tag) {
                 return _tag;
             });
         /* We have to use the map function because Mustache doesn't like our tags object */
@@ -223,10 +222,10 @@ IriSP.Widgets.CreateAnnotation.prototype.draw = function() {
     this.renderTemplate();
     if (this.show_mic_record) {
         this.recorder = this.$.find("embed")[0];
-        
-        window.setAudioUrl = function(_url) {
+
+        window.setAudioUrl = function (_url) {
             _this.audio_url = _url;
-        }
+        };
     }
     if (this.show_slice) {
         this.insertSubwidget(
@@ -235,7 +234,7 @@ IriSP.Widgets.CreateAnnotation.prototype.draw = function() {
                 type: "Slice",
                 show_arrow: this.show_arrow,
                 annotation_type: this.slice_annotation_type,
-                onBoundsChanged: function(_from, _to) {
+                onBoundsChanged: function (_from, _to) {
                     _this.setBeginEnd(_from, _to);
                 }
             },
@@ -243,9 +242,9 @@ IriSP.Widgets.CreateAnnotation.prototype.draw = function() {
         );
     } else {
         if (this.show_arrow) {
-            this.insertSubwidget(this.$.find(".Ldt-CreateAnnotation-Arrow"), {type: "Arrow"},"arrow");
+            this.insertSubwidget(this.$.find(".Ldt-CreateAnnotation-Arrow"), {type: "Arrow"}, "arrow");
         }
-        this.onMediaEvent("timeupdate", function(_time) {
+        this.onMediaEvent("timeupdate", function (_time) {
             // Do not update timecode if description is not empty
             if (_this.$.find(".Ldt-CreateAnnotation-Description").val().trim() == "") {
                 _this.setBeginEnd(_time, _time);
@@ -255,25 +254,25 @@ IriSP.Widgets.CreateAnnotation.prototype.draw = function() {
             };
         });
     }
-    this.$.find(".Ldt-CreateAnnotation-Cancel").click(function() {
+    this.$.find(".Ldt-CreateAnnotation-Cancel").click(function () {
         _this.player.trigger("CreateAnnotation.hide");
     });
-    this.$.find(".Ldt-CreateAnnotation-Close").click(function() {
+    this.$.find(".Ldt-CreateAnnotation-Close").click(function () {
         _this.close_after_send
         ? _this.player.trigger("CreateAnnotation.hide")
         : _this.showScreen("Main");
         return false;
     });
-    this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").click(function() {
+    this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").click(function () {
         _this.addKeyword(IriSP.jQuery(this).attr("data-text"));
         return false;
     });
-    this.$.find(".Ldt-CreateAnnotation-PolemicLi").each(function() {
+    this.$.find(".Ldt-CreateAnnotation-PolemicLi").each(function () {
         var _el = IriSP.jQuery(this),
             _kw = _el.attr("data-text"),
             _msg = _this.l10n["polemic" + _kw];
         if (_msg) {
-            _el.attr("title",_msg);
+            _el.attr("title", _msg);
         }
     });
     this.$.find(".Ldt-CreateAnnotation-Description").bind("change keyup input paste", this.functionWrapper("onDescriptionChange"));
@@ -283,21 +282,21 @@ IriSP.Widgets.CreateAnnotation.prototype.draw = function() {
     if (this.show_creator_field) {
         this.$.find(".Ldt-CreateAnnotation-Creator").bind("change keyup input paste", this.functionWrapper("onCreatorChange"));
     }
-    this.$.find("[class^='Ldt-CreateAnnotation-Control-']").click(function() {
+    this.$.find("[class^='Ldt-CreateAnnotation-Control-']").click(function () {
         var action = this.className.replace('Ldt-CreateAnnotation-Control-', '');
         switch (action) {
-            case "In":
-               // Set In bound to current player time
-               this.setBegin(_this.media.getCurrentTime());
-               break;
-            case "Out":
-               // Set In bound to current player time
-               this.setEnd(_this.media.getCurrentTime() || _this.media.duration);
-               break;
-            case "Play":
-               this.media.setCurrentTime(_this.begin);
-               this.media.play();
-               break;
+        case "In":
+            // Set In bound to current player time
+            this.setBegin(_this.media.getCurrentTime());
+            break;
+        case "Out":
+            // Set In bound to current player time
+            this.setEnd(_this.media.getCurrentTime() || _this.media.duration);
+            break;
+        case "Play":
+            this.media.setCurrentTime(_this.begin);
+            this.media.play();
+            break;
         }
         return false;
     });
@@ -308,8 +307,8 @@ IriSP.Widgets.CreateAnnotation.prototype.draw = function() {
         this.$.hide();
         this.hide();
     }
-    
-    this.onMdpEvent("CreateAnnotation.toggle","toggle");
+
+    this.onMdpEvent("CreateAnnotation.toggle", "toggle");
     this.onMdpEvent("CreateAnnotation.hide", "hide");
     this.onMdpEvent("CreateAnnotation.show", "show");
     this.$.find("form").submit(this.functionWrapper("onSubmit"));
@@ -330,15 +329,15 @@ IriSP.Widgets.CreateAnnotation.prototype.setBeginEnd = function (begin, end) {
     this.setEnd(end);
 };
 
-IriSP.Widgets.CreateAnnotation.prototype.showScreen = function(_screenName) {
+IriSP.Widgets.CreateAnnotation.prototype.showScreen = function (_screenName) {
     this.$.find('.Ldt-CreateAnnotation-' + _screenName).show()
         .siblings().hide();
 };
 
-IriSP.Widgets.CreateAnnotation.prototype.show = function() {
-    if (!this.visible){
+IriSP.Widgets.CreateAnnotation.prototype.show = function () {
+    if (!this.visible) {
         this.visible = true;
-        if (this.pause_when_displaying){
+        if (this.pause_when_displaying) {
             this.media.pause();
         }
         this.showScreen('Main');
@@ -360,8 +359,8 @@ IriSP.Widgets.CreateAnnotation.prototype.show = function() {
     }
 };
 
-IriSP.Widgets.CreateAnnotation.prototype.hide = function() {
-    if (this.visible){
+IriSP.Widgets.CreateAnnotation.prototype.hide = function () {
+    if (this.visible) {
         if (this.recorder) {
             this.recorder.stopRecord();
         }
@@ -375,7 +374,7 @@ IriSP.Widgets.CreateAnnotation.prototype.hide = function() {
     }
 };
 
-IriSP.Widgets.CreateAnnotation.prototype.toggle = function() {
+IriSP.Widgets.CreateAnnotation.prototype.toggle = function () {
     if (!this.always_visible) {
         if (this.visible) {
             this.hide();
@@ -392,25 +391,25 @@ IriSP.Widgets.CreateAnnotation.prototype.toggle = function() {
     }
 };
 
-IriSP.Widgets.CreateAnnotation.prototype.addKeyword = function(_keyword) {
+IriSP.Widgets.CreateAnnotation.prototype.addKeyword = function (_keyword) {
     var _field = this.$.find(".Ldt-CreateAnnotation-Description"),
         _rx = IriSP.Model.regexpFromTextOrArray(_keyword),
         _contents = _field.val();
-    _contents = ( !!_contents.match(_rx)
-        ? _contents.replace(_rx,"")
+    _contents = (!!_contents.match(_rx)
+        ? _contents.replace(_rx, "")
         : _contents + " " + _keyword
     );
-    _field.val(_contents.replace(/\s{2,}/g,' ').replace(/(^\s+|\s+$)/g,''));
+    _field.val(_contents.replace(/\s{2,}/g, ' ').replace(/(^\s+|\s+$)/g, ''));
     this.onDescriptionChange();
 };
 
-IriSP.Widgets.CreateAnnotation.prototype.pauseOnWrite = function() {
+IriSP.Widgets.CreateAnnotation.prototype.pauseOnWrite = function () {
     if (this.pause_on_write && !this.media.getPaused()) {
         this.media.pause();
     }
 };
 
-IriSP.Widgets.CreateAnnotation.prototype.onDescriptionChange = function(e) {
+IriSP.Widgets.CreateAnnotation.prototype.onDescriptionChange = function (e) {
     if (e !== undefined && e.keyCode == 13 && !e.shiftKey) {
         // Return: submit. Use shift-Return to insert a LF
         this.onSubmit();
@@ -424,7 +423,7 @@ IriSP.Widgets.CreateAnnotation.prototype.onDescriptionChange = function(e) {
     } else {
         _field.addClass("empty");
     }
-    this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").each(function() {
+    this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").each(function () {
         var _rx = IriSP.Model.regexpFromTextOrArray(IriSP.jQuery(this).attr("data-text"));
         if (_contents.match(_rx)) {
             IriSP.jQuery(this).addClass("selected");
@@ -436,7 +435,7 @@ IriSP.Widgets.CreateAnnotation.prototype.onDescriptionChange = function(e) {
     return !!_contents;
 };
 
-IriSP.Widgets.CreateAnnotation.prototype.onTitleChange = function() {
+IriSP.Widgets.CreateAnnotation.prototype.onTitleChange = function () {
     var _field = this.$.find(".Ldt-CreateAnnotation-Title"),
         _contents = _field.val();
     _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
@@ -450,7 +449,7 @@ IriSP.Widgets.CreateAnnotation.prototype.onTitleChange = function() {
 };
 
 
-IriSP.Widgets.CreateAnnotation.prototype.onCreatorChange = function() {
+IriSP.Widgets.CreateAnnotation.prototype.onCreatorChange = function () {
     var _field = this.$.find(".Ldt-CreateAnnotation-Creator"),
         _contents = _field.val();
     _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
@@ -463,16 +462,16 @@ IriSP.Widgets.CreateAnnotation.prototype.onCreatorChange = function() {
     return !!_contents;
 };
 
-IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() {
+IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function () {
     /* If mandatory fields are empty, we cancel the sending */
     if (!this.onDescriptionChange() || (this.show_title_field && !this.onTitleChange()) || (this.show_creator_field && !this.onCreatorChange())) {
         return false;
     }
-    
+
     if (this.recorder) {
         this.recorder.stopRecord();
     }
-    
+
     var _this = this,
         _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* We create a List to send to the server that will contains the annotation */
         _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), /* We create a source object using a specific serializer for export */
@@ -481,7 +480,7 @@ IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() {
         _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type, true), /* We get the AnnotationType in which the annotation will be added */
         _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, _export)), /* If it doesn't already exists, we create it */
         _url = Mustache.to_html(this.api_endpoint_template, {id: this.source.projectId}); /* We make the url to send the request to, must include project id */
-    
+
     /* If we created an AnnotationType on the spot ... */
     if (!_annotationTypes.length) {
         /* ... We must not send its id to the server ... */
@@ -489,50 +488,49 @@ IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() {
         /* ... And we must include its title. */
         _annotationType.title = this.annotation_type;
     }
-    
+
     /*
      * Will fill the generated annotation object's data
      * WARNING: If we're on a MASHUP, these datas must refer the ORIGINAL MEDIA
      * */
     _annotation.setMedia(this.source.currentMedia.id); /* Annotated media ID */
-    
-    if (this.post_at_segment_time){
-        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)
+
+    if (this.post_at_segment_time) {
+        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);
         });
-        if (_currentSegments.length == 0){
+        if (_currentSegments.length == 0) {
             _annotation.setBegin(this.begin); /* Widget starting timecode */
             _annotation.setEnd(this.end); /* Widget end timecode */
-        }
-        else {
+        } else {
             _annotation.setBegin(_currentSegments[0].begin); /* Segment starting timecode */
             _annotation.setEnd(_currentSegments[0].end); /* Segment end timecode */
         }
-    }
-    else {
+    } else {
         _annotation.setBeginEnd(this.begin, this.end); /* Widget end/start timecodes */
     }
     _annotation.setAnnotationType(_annotationType.id); /* Annotation type ID */
     if (this.show_title_field) {
         /* Title field, only if it's visible */
         _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val();
-    }if (this.project_id != ""){
-    	/* Project id, only if it's been specifiec in the config */
-    	_annotation.project_id = this.project_id;
+    }
+    if (this.project_id != "") {
+        /* Project id, only if it's been specifiec in the config */
+        _annotation.project_id = this.project_id;
     }
     _annotation.created = new Date(); /* Annotation creation date */
     _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); /* Description field */
-   
+
     var tagIds = Array.prototype.map.call(
         this.$.find(".Ldt-CreateAnnotation-TagLi.selected"),
-        function(el) { return IriSP.jQuery(el).attr("tag-id"); }
+        function (el) { return IriSP.jQuery(el).attr("tag-id"); }
     );
-        
-    IriSP._(_annotation.description.match(/#[^\s#.,;]+/g)).each(function(_tt) {
+
+    IriSP._(_annotation.description.match(/#[^\s#.,;]+/g)).each(function (_tt) {
         var _tag,
-            _tag_title = _tt.replace(/^#/,''),
+            _tag_title = _tt.replace(/^#/, ''),
             _tags = _this.source.getTags().searchByTitle(_tag_title, true);
         if (_tags.length) {
             _tag = _tags[0];
@@ -559,7 +557,7 @@ IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() {
         _annotation.creator = this.creator_name;
     }
     _exportedAnnotations.push(_annotation); /* Ajout de l'annotation à la liste à exporter */
-    
+
     if (this.editable_storage != '') {
         // Append to localStorage annotations
 
@@ -576,22 +574,21 @@ IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() {
         _this.player.trigger("Annotation.create", _annotation);
         _this.$.find(".Ldt-CreateAnnotation-Description").val("");
     }
-    
+
     if (_url !== "") {
         _exportedAnnotations.push(_annotation); /* We add the annotation in the list to export */
-        _export.addList("annotation",_exportedAnnotations); /* We add the list to the source object */ 
-        var _this = this;
+        _export.addList("annotation", _exportedAnnotations); /* We add the list to the source object */
         /* We send the AJAX request to the server ! */
         IriSP.jQuery.ajax({
             url: _url,
             type: this.api_method,
             contentType: 'application/json',
             data: _export.serialize(), /* Source is serialized */
-            success: function(_data) {
-                _this.showScreen('Saved'); 
-                if (_this.after_send_timeout) { 
+            success: function (_data) {
+                _this.showScreen('Saved');
+                if (_this.after_send_timeout) {
                     window.setTimeout(
-                        function() {
+                        function () {
                             _this.close_after_send
                                 ? _this.player.trigger("CreateAnnotation.hide")
                                 : _this.player.trigger("CreateAnnotation.show");
@@ -605,14 +602,14 @@ IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() {
                 if (_this.pause_on_write && _this.media.getPaused()) {
                     _this.media.play();
                 }
-                _this.player.trigger("AnnotationsList.refresh"); 
+                _this.player.trigger("AnnotationsList.refresh");
             },
-            error: function(_xhr, _error, _thrown) {
+            error: function (_xhr, _error, _thrown) {
                 IriSP.log("Error when sending annotation", _thrown);
                 _export.getAnnotations().removeElement(_annotation, true);
                 _this.showScreen('Error');
-                window.setTimeout(function(){
-                    _this.showScreen("Main")
+                window.setTimeout(function () {
+                    _this.showScreen("Main");
                 },
                                   (_this.after_send_timeout || 5000));
             }
@@ -621,4 +618,3 @@ IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() {
     };
     return false;
 };
-

From 71329d4ff8bb43eb5eca40b8f623ed4c5425673b Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 16:15:38 +0200
Subject: [PATCH 027/204] Use the description first line as title if show_title
 is false

---
 src/widgets/CreateAnnotation.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/widgets/CreateAnnotation.js b/src/widgets/CreateAnnotation.js
index a8cd5c6f..26c4e76c 100644
--- a/src/widgets/CreateAnnotation.js
+++ b/src/widgets/CreateAnnotation.js
@@ -515,7 +515,11 @@ IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function () {
     if (this.show_title_field) {
         /* Title field, only if it's visible */
         _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val();
+    } else {
+        /* Else we use the first line of the description as title */
+        _annotation.title = _annotation.description.split("\n")[0];
     }
+
     if (this.project_id != "") {
         /* Project id, only if it's been specifiec in the config */
         _annotation.project_id = this.project_id;

From 147b7fe21899157e85775fe22d1d5d5bab578411 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 16:22:38 +0200
Subject: [PATCH 028/204] Coding style fixes

---
 src/js/widgets-container/widget.js | 96 +++++++++++++++---------------
 1 file changed, 48 insertions(+), 48 deletions(-)

diff --git a/src/js/widgets-container/widget.js b/src/js/widgets-container/widget.js
index ce7edfe5..79a792b4 100644
--- a/src/js/widgets-container/widget.js
+++ b/src/js/widgets-container/widget.js
@@ -16,9 +16,9 @@ if (typeof IriSP.Widgets === "undefined") {
  */
 
 
-IriSP.Widgets.Widget = function(player, config) {
+IriSP.Widgets.Widget = function (player, config) {
 
-    if( typeof player === "undefined") {
+    if (typeof player === "undefined") {
         /* Probably an abstract call of the class when
          * individual widgets set their prototype */
         return;
@@ -31,8 +31,8 @@ IriSP.Widgets.Widget = function(player, config) {
         _config = IriSP._.defaults({}, config, (player && player.config ? player.config.default_options : {}), this.defaults),
         _this = this;
 
-    IriSP._(_config).forEach(function(_value, _key) {
-       _this[_key] = _value;
+    IriSP._(_config).forEach(function (_value, _key) {
+        _this[_key] = _value;
     });
 
     this.$ = IriSP.jQuery('#' + this.container);
@@ -59,8 +59,8 @@ IriSP.Widgets.Widget = function(player, config) {
         typeof this.messages[IriSP.language] !== "undefined"
         ? this.messages[IriSP.language]
         : (
-            IriSP.language.length > 2 && typeof this.messages[IriSP.language.substr(0,2)] !== "undefined"
-            ? this.messages[IriSP.language.substr(0,2)]
+            IriSP.language.length > 2 && typeof this.messages[IriSP.language.substr(0, 2)] !== "undefined"
+            ? this.messages[IriSP.language.substr(0, 2)]
             : this.messages["en"]
         )
     );
@@ -73,17 +73,16 @@ IriSP.Widgets.Widget = function(player, config) {
             _this.source.merge(_this.localsource);
         }
         if (_this.media_id) {
-                _this.media = this.getElement(_this.media_id);
-            } else {
-                var _mediaopts = {
-                    is_mashup: _this.is_mashup || false
-                };
-                _this.media = _this.source.getCurrentMedia(_mediaopts);
-            }
-        if (_this.pre_draw_callback){
-            IriSP.jQuery.when(_this.pre_draw_callback()).done(_this.draw());
+            _this.media = this.getElement(_this.media_id);
+        } else {
+            var _mediaopts = {
+                is_mashup: _this.is_mashup || false
+            };
+            _this.media = _this.source.getCurrentMedia(_mediaopts);
         }
-        else {
+        if (_this.pre_draw_callback) {
+            IriSP.jQuery.when(_this.pre_draw_callback()).done(_this.draw());
+        } else {
             _this.draw();
         }
         _this.player.trigger("widget-loaded");
@@ -109,23 +108,23 @@ IriSP.Widgets.Widget.prototype.template = '';
 
 IriSP.Widgets.Widget.prototype.messages = {"en":{}};
 
-IriSP.Widgets.Widget.prototype.toString = function() {
+IriSP.Widgets.Widget.prototype.toString = function () {
     return "Widget " + this.type;
 };
 
-IriSP.Widgets.Widget.prototype.templateToHtml = function(_template) {
+IriSP.Widgets.Widget.prototype.templateToHtml = function (_template) {
     return Mustache.to_html(_template, this);
 };
 
-IriSP.Widgets.Widget.prototype.renderTemplate = function() {
+IriSP.Widgets.Widget.prototype.renderTemplate = function () {
     this.$.append(this.templateToHtml(this.template));
 };
 
-IriSP.Widgets.Widget.prototype.functionWrapper = function(_name) {
+IriSP.Widgets.Widget.prototype.functionWrapper = function (_name) {
     var _this = this,
         _function = this[_name];
     if (typeof _function !== "undefined") {
-        return function() {
+        return function () {
             return _function.apply(_this, Array.prototype.slice.call(arguments, 0));
         };
     } else {
@@ -133,7 +132,7 @@ IriSP.Widgets.Widget.prototype.functionWrapper = function(_name) {
     }
 };
 
-IriSP.Widgets.Widget.prototype.getFunctionOrName = function(_functionOrName) {
+IriSP.Widgets.Widget.prototype.getFunctionOrName = function (_functionOrName) {
     switch (typeof _functionOrName) {
         case "function":
             return _functionOrName;
@@ -144,15 +143,15 @@ IriSP.Widgets.Widget.prototype.getFunctionOrName = function(_functionOrName) {
     }
 };
 
-IriSP.Widgets.Widget.prototype.onMdpEvent = function(_eventName, _functionOrName) {
+IriSP.Widgets.Widget.prototype.onMdpEvent = function (_eventName, _functionOrName) {
     this.player.on(_eventName, this.getFunctionOrName(_functionOrName));
 };
 
-IriSP.Widgets.Widget.prototype.onMediaEvent = function(_eventName, _functionOrName) {
+IriSP.Widgets.Widget.prototype.onMediaEvent = function (_eventName, _functionOrName) {
     this.media.on(_eventName, this.getFunctionOrName(_functionOrName));
 };
 
-IriSP.Widgets.Widget.prototype.getWidgetAnnotations = function() {
+IriSP.Widgets.Widget.prototype.getWidgetAnnotations = function () {
     var result = null;
     if (typeof this.annotation_type === "undefined") {
         result = this.media.getAnnotations();
@@ -168,21 +167,21 @@ IriSP.Widgets.Widget.prototype.getWidgetAnnotations = function() {
     }
 };
 
-IriSP.Widgets.Widget.prototype.getWidgetAnnotationsAtTime = function() {
+IriSP.Widgets.Widget.prototype.getWidgetAnnotationsAtTime = function () {
     var _time = this.media.getCurrentTime();
-    return this.getWidgetAnnotations().filter(function(_annotation) {
+    return this.getWidgetAnnotations().filter(function (_annotation) {
         return _annotation.begin <= _time && _annotation.end > _time;
     });
 };
 
-IriSP.Widgets.Widget.prototype.isLoaded = function() {
-    var isloaded = !IriSP._(this.__subwidgets).any(function(w) {
+IriSP.Widgets.Widget.prototype.isLoaded = function () {
+    var isloaded = !IriSP._(this.__subwidgets).any(function (w) {
         return !(w && w.isLoaded());
     });
     return isloaded;
 };
 
-IriSP.Widgets.Widget.prototype.insertSubwidget = function(_selector, _widgetoptions, _propname) {
+IriSP.Widgets.Widget.prototype.insertSubwidget = function (_selector, _widgetoptions, _propname) {
     var _id = _selector.attr("id"),
         _this = this,
         _type = _widgetoptions.type,
@@ -194,13 +193,13 @@ IriSP.Widgets.Widget.prototype.insertSubwidget = function(_selector, _widgetopti
         _selector.attr("id", _id);
     }
     _widgetoptions.container = _id;
-    if (typeof IriSP.widgetsRequirements[_type] !== "undefined" && typeof IriSP.widgetsRequirements[_type].requires !== "undefined" ) {
+    if (typeof IriSP.widgetsRequirements[_type] !== "undefined" && typeof IriSP.widgetsRequirements[_type].requires !== "undefined") {
         for (var _j = 0; _j < IriSP.widgetsRequirements[_type].requires.length; _j++) {
             $L.script(IriSP.getLib(IriSP.widgetsRequirements[_type].requires[_j]));
         }
     }
-    $L.wait(function() {
-        _this.player.loadWidget(_widgetoptions, function(_widget) {
+    $L.wait(function () {
+        _this.player.loadWidget(_widgetoptions, function (_widget) {
             if (_propname) {
                 _this[_propname] = _widget;
             }
@@ -214,11 +213,11 @@ IriSP.Widgets.Widget.prototype.insertSubwidget = function(_selector, _widgetopti
  *
  * Parameter: offset: -1 for previous annotation, +1 for next annotation
  */
-IriSP.Widgets.Widget.prototype.navigate = function(offset) {
+IriSP.Widgets.Widget.prototype.navigate = function (offset) {
     // offset is normally either -1 (previous slide) or +1 (next slide)
     var _this = this;
     var currentTime = _this.media.getCurrentTime();
-    var annotations = _this.getWidgetAnnotations().sortBy(function(_annotation) {
+    var annotations = _this.getWidgetAnnotations().sortBy(function (_annotation) {
         return _annotation.begin;
     });
     for (var i = 0; i < annotations.length; i++) {
@@ -236,38 +235,39 @@ IriSP.Widgets.Widget.prototype.navigate = function(offset) {
  *
  * Parameter: a list of annotations. If not specified, the widget's annotations will be exported.
  */
-IriSP.Widgets.Widget.prototype.exportAnnotations = function(annotations) {
+IriSP.Widgets.Widget.prototype.exportAnnotations = function (annotations) {
     var widget = this;
-    if (annotations === undefined)
+    if (annotations === undefined) {
         annotations = this.getWidgetAnnotations();
+    }
     var $ = IriSP.jQuery;
 
     // FIXME: this should belong to a proper serialize/deserialize component?
-    var content = Mustache.to_html("[video:{{url}}]\n", {url: widget.media.url}) + annotations.map( function(a) { return Mustache.to_html("[{{ a.begin }}]{{ a.title }} {{ a.description }}[{{ a.end }}]", { a: a }); }).join("\n");
+    var content = Mustache.to_html("[video:{{url}}]\n", {url: widget.media.url}) + annotations.map(function (a) { return Mustache.to_html("[{{ a.begin }}]{{ a.title }} {{ a.description }}[{{ a.end }}]", { a: a }); }).join("\n");
 
     var el = $("<pre>")
             .addClass("exportContainer")
             .text(content)
             .dialog({
                 title: "Annotation export",
-                open: function( event, ui ) {
+                open: function (event, ui) {
                     // Select text
                     var range;
                     if (document.selection) {
-		                range = document.body.createTextRange();
+                        range = document.body.createTextRange();
                         range.moveToElementText(this[0]);
-		                range.select();
-		            } else if (window.getSelection) {
-		                range = document.createRange();
-		                range.selectNode(this[0]);
-		                window.getSelection().addRange(range);
-		            }
+                        range.select();
+                    } else if (window.getSelection) {
+                        range = document.createRange();
+                        range.selectNode(this[0]);
+                        window.getSelection().addRange(range);
+                    }
                 },
                 autoOpen: true,
                 width: '80%',
                 minHeight: '400',
                 height: 400,
-                buttons: [ { text: "Close", click: function() { $( this ).dialog( "close" ); } },
+                buttons: [ { text: "Close", click: function () { $(this).dialog("close"); } },
                            { text: "Download", click: function () {
                                a = document.createElement('a');
                                a.setAttribute('href', 'data:text/plain;base64,' + btoa(content));
@@ -280,6 +280,6 @@ IriSP.Widgets.Widget.prototype.exportAnnotations = function(annotations) {
 /**
  * This method responsible of drawing a widget on screen.
  */
-IriSP.Widgets.Widget.prototype.draw = function() {
+IriSP.Widgets.Widget.prototype.draw = function () {
     /* implemented by "sub-classes" */
 };

From 7dced5ecfb72de833fc81f19aa77339215d43d3a Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 16:23:34 +0200
Subject: [PATCH 029/204] Add jscs configuration file

---
 dev/jscsrc | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 dev/jscsrc

diff --git a/dev/jscsrc b/dev/jscsrc
new file mode 100644
index 00000000..ffad064e
--- /dev/null
+++ b/dev/jscsrc
@@ -0,0 +1,68 @@
+{
+    "maxErrors": -1,
+    "requireCurlyBraces": [
+        "if",
+        "else",
+        "for",
+        "while",
+        "do",
+        "try",
+        "catch"
+    ],
+    "requireSpaceAfterKeywords": [
+        "if",
+        "else",
+        "for",
+        "while",
+        "do",
+        "switch",
+        "case",
+        "return",
+        "try",
+        "catch",
+        "function",
+        "typeof"
+    ],
+    "requireSpaceBeforeBlockStatements": true,
+    "requireParenthesesAroundIIFE": true,
+    "requireSpacesInConditionalExpression": true,
+    "requireSemicolons": true,
+    "disallowSpacesInNamedFunctionExpression": {
+        "beforeOpeningRoundBrace": true
+    },
+    "disallowSpacesInFunctionDeclaration": {
+        "beforeOpeningRoundBrace": true
+    },
+    "requireSpaceBetweenArguments": true,
+//    "requireMultipleVarDecl": "no",
+//    "requireBlocksOnNewline": true,
+    "disallowEmptyBlocks": true,
+//    "disallowSpacesInsideArrayBrackets": true,
+    "disallowSpacesInsideParentheses": true,
+//    "disallowDanglingUnderscores": true,
+    "requireCommaBeforeLineBreak": true,
+    "disallowSpaceAfterPrefixUnaryOperators": true,
+    "disallowSpaceBeforePostfixUnaryOperators": true,
+    "disallowSpaceBeforeBinaryOperators": [
+        ","
+    ],
+    "requireSpacesInForStatement": true,
+    "requireSpaceBeforeBinaryOperators": true,
+    "requireSpaceAfterBinaryOperators": true,
+    "disallowKeywords": [
+        "with",
+        "continue"
+    ],
+    "validateIndentation": 4,
+    "disallowMixedSpacesAndTabs": true,
+    "disallowTrailingWhitespace": true,
+    "disallowTrailingComma": true,
+    "disallowKeywordsOnNewLine": [
+        "else"
+    ],
+    "requireLineFeedAtFileEnd": true,
+    "requireCapitalizedConstructors": true,
+    "requireDotNotation": false,
+    "disallowNewlineBeforeBlockStatements": true,
+    "disallowMultipleLineStrings": true
+}

From 06519899bf1b891e0d1493712923b87b074f0574 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 16:30:40 +0200
Subject: [PATCH 030/204] Add missing semicolon

---
 src/widgets/AnnotationsList.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/AnnotationsList.css b/src/widgets/AnnotationsList.css
index 4e728f0f..07765a14 100644
--- a/src/widgets/AnnotationsList.css
+++ b/src/widgets/AnnotationsList.css
@@ -238,7 +238,7 @@ li.Ldt-AnnotationsList-Tag-Li:hover {
 .Ldt-AnnotationsList-ScreenDelete, .Ldt-AnnotationsList-ScreenSending, 
 .Ldt-AnnotationsList-ScreenError, .Ldt-AnnotationsList-ScreenSuccess{
 	margin-top: 15px;
-	width: 100%
+	width: 100%;
 	text-align: center;
 	vertical-align: middle;
 	font-size: 14px;

From d266e75b53f7a5fd5027efa6baf21622e3b64efd Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 16:33:09 +0200
Subject: [PATCH 031/204] Whitespace fixes

---
 src/widgets/AnnotationsList.css | 63 +++++++++++++++++++++------------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/src/widgets/AnnotationsList.css b/src/widgets/AnnotationsList.css
index 07765a14..714fe64c 100644
--- a/src/widgets/AnnotationsList.css
+++ b/src/widgets/AnnotationsList.css
@@ -1,13 +1,12 @@
 /* AnnotationsListWidget */
 
-#ui-datepicker-div
-{
+#ui-datepicker-div {
     display: none;
 }
 
 .Ldt-AnnotationsListWidget {
-    border: none; 
-    margin: 0; 
+    border: none;
+    margin: 0;
     padding: 0;
     overflow: auto;
 }
@@ -25,7 +24,7 @@
 	height: 30px;
 	vertical-align: middle;
     text-align: center;
-	
+
 }
 
 .Ldt-AnnotationsList-filter-text {
@@ -48,8 +47,8 @@
 
 ul.Ldt-AnnotationsList-ul, ul.Ldt-AnnotationsList-ul-toDelete  {
     list-style: none;
-    padding: 0px;
-    margin: 0px;
+    padding: 0;
+    margin: 0;
 }
 
 li.Ldt-AnnotationsList-li {
@@ -69,8 +68,8 @@ li.Ldt-AnnotationsList-li {
     width: 80px;
     height: 50px;
     text-align: center;
-    margin: 0px 2px 10px 2px;
-    box-shadow: #808080 0px 0px 2px;
+    margin: 0 2px 10px 2px;
+    box-shadow: #808080 0 0 2px;
 }
 .Ldt-AnnotationsList-Thumbnail {
     border: none;
@@ -90,7 +89,7 @@ li.Ldt-AnnotationsList-li {
 }
 
 .Ldt-AnnotationsList-DeleteButton {
-	margin: 0px;
+	margin: 0;
 	float: right;
 	font-size: 20px;
 	position: relative;
@@ -116,14 +115,14 @@ li.Ldt-AnnotationsList-li {
     font-size: 12px;
     margin: 2px 2px 2px 89px;
 }
-h3.Ldt-AnnotationsList-Title span.Ldt-AnnotationsList-TitleContent{
+h3.Ldt-AnnotationsList-Title span.Ldt-AnnotationsList-TitleContent {
     color: #0068c4;
     font-size: 13px;
     margin-left: 5px;
     font-weight: bold;
 }
 
-h3.Ldt-AnnotationsList-Title.Ldt-Annotation-Timecode{	
+h3.Ldt-AnnotationsList-Title.Ldt-Annotation-Timecode {
     font-size: 13px;
 }
 
@@ -158,13 +157,22 @@ ul.Ldt-AnnotationsList-Tags {
 }
 
 li.Ldt-AnnotationsList-Tag-Li {
-    display: inline-block; border: none; margin: 0 10px 5px 0; height: 23px; padding: 0 0 0 20px;
+    display: inline-block;
+    border: none;
+    margin: 0 10px 5px 0;
+    height: 23px;
+    padding: 0 0 0 20px;
     background: url(img/tag.png) left top no-repeat;
     cursor: pointer;
 }
 
 .Ldt-AnnotationsList-Tag-Li span {
-    display: inline-block; font-size: 12px; height: 19px; padding: 4px 5px 0 0; border: none; margin: 0;
+    display: inline-block;
+    font-size: 12px;
+    height: 19px;
+    padding: 4px 5px 0 0;
+    border: none;
+    margin: 0;
     background: url(img/tag.png) right top no-repeat;
 }
 
@@ -177,8 +185,13 @@ li.Ldt-AnnotationsList-Tag-Li:hover {
 }
 
 .Ldt-AnnotationsList-Play {
-    width: 125px; height: 20px; margin: 2px 0 2px 82px; text-align: center;
-    padding: 3px 5px 0 20px; font-size: 12px; cursor: pointer;
+    width: 125px;
+    height: 20px;
+    margin: 2px 0 2px 82px;
+    text-align: center;
+    padding: 3px 5px 0 20px;
+    font-size: 12px;
+    cursor: pointer;
     background: url(img/voiceannotation.png); color: #333333;
 }
 
@@ -230,13 +243,13 @@ li.Ldt-AnnotationsList-Tag-Li:hover {
 .editableInput {
     width: 80%;
 
-.Ldt-AnnotationsList-ScreenMain{
-	margin: 0px;
-	padding: 0px;
+.Ldt-AnnotationsList-ScreenMain {
+	margin: 0;
+	padding: 0;
 }
 
-.Ldt-AnnotationsList-ScreenDelete, .Ldt-AnnotationsList-ScreenSending, 
-.Ldt-AnnotationsList-ScreenError, .Ldt-AnnotationsList-ScreenSuccess{
+.Ldt-AnnotationsList-ScreenDelete, .Ldt-AnnotationsList-ScreenSending,
+.Ldt-AnnotationsList-ScreenError, .Ldt-AnnotationsList-ScreenSuccess {
 	margin-top: 15px;
 	width: 100%;
 	text-align: center;
@@ -247,7 +260,11 @@ li.Ldt-AnnotationsList-Tag-Li:hover {
 }
 
 a.Ldt-AnnotationsList-Close {
-    position: absolute; right: 2px;
-    display: inline-block; width: 17px; height: 17px; margin: 4px;
+    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

From 47a7529cc868fbee3190010b3b0fc696ae0b964d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 17:00:34 +0200
Subject: [PATCH 032/204] Put Search field inside <form>, but outside of
 configuration option

---
 src/widgets/EnrichedPlan.css | 3 +++
 src/widgets/EnrichedPlan.js  | 8 +++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 5ab5e6fc..c758b692 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -128,6 +128,9 @@
     font-size: 16px;
     width: calc(100% - 340px);
 }
+.Ldt-EnrichedPlan-Controls .Ldt-EnrichedPlan-Search-Input-Full {
+    width: 95%;
+}
 
 .Ldt-EnrichedPlan-Note.non_matching {
     display: none;
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 3c6aa38d..36dc5540 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -22,7 +22,8 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
 
 IriSP.Widgets.EnrichedPlan.prototype.template =
       '<div class="Ldt-EnrichedPlan-Container">'
-    + '{{#show_controls}}<form class="Ldt-EnrichedPlan-Controls">'
+    + '<form class="Ldt-EnrichedPlan-Controls">'
+    + '{{#show_controls}}'
     + ' <input id="{{prefix}}teacher_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Teacher" {{#show_teacher_notes}}checked{{/show_teacher_notes}} type="checkbox">'
     + ' <label for="{{prefix}}teacher_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Teacher">Notes Enseignant</label>'
     + ' <input id="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Other" {{#show_other_notes}}checked{{/show_other_notes}} type="checkbox">'
@@ -31,8 +32,9 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
     + ' <label for="{{prefix}}simplified_plan_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Own">Notes perso.</label>'
     + ' <input id="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Slide-Display" {{#show_slides}}checked{{/show_slides}} type="checkbox">'
     + ' <label for="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Slide-Display">Diapo<br/>&nbsp;</label>'
-    + ' </form>{{/show_controls}}'
-    + ' <input class="Ldt-EnrichedPlan-Search-Input" type="search" incremental placeholder="Recherchez"/>'
+    + '{{/show_controls}}'
+    + ' <input class="Ldt-EnrichedPlan-Search-Input {{^show_controls}}Ldt-EnrichedPlan-Search-Input-Full{{/show_controls}}" type="search" incremental placeholder="Recherchez"/>'
+    + ' </form>'
     + '<div class="Ldt-EnrichedPlan-Content"></div>'
     + '</div>';
 

From 6fb7f94d53088567cceeeeb04be9cbc89ce275f8 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 17:00:53 +0200
Subject: [PATCH 033/204] Allow incomplete slide information

---
 src/widgets/EnrichedPlan.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 36dc5540..f799c19f 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -98,7 +98,7 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
         var _html = Mustache.to_html(_this.slideTemplate, {
             id : slide.id,
             atitle : IriSP.textFieldHtml(slide.title),
-            level: slide.content.level || 1,
+            level: slide.content ? (slide.content.level || 1) : 1,
             begin : slide.begin.toString(),
             begintc: slide.begin.milliseconds,
             thumbnail: slide.thumbnail,

From 998690055139961731b4a7793e1d72bc2a4f7c97 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 13 Oct 2015 17:02:27 +0200
Subject: [PATCH 034/204] Do not try to display thumbnail if it is not present

---
 src/widgets/EnrichedPlan.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index f799c19f..9f7662b9 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -41,7 +41,7 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
 IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
       '<div data-id="{{ id }}" class="Ldt-EnrichedPlan-Slide">'
     + '  <div class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-SlideTimecode">{{ begin }}</div>'
-    + '  <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem {{^show_slides}}filtered_out{{/show_slides}} Ldt-EnrichedPlan-SlideThumbnail Ldt-EnrichedPlan-Slide-Display"><img title="{{ begin }} - {{ atitle }}" src="{{ thumbnail }}"></div>'
+    + '  <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem {{^show_slides}}filtered_out{{/show_slides}} Ldt-EnrichedPlan-SlideThumbnail Ldt-EnrichedPlan-Slide-Display">{{#thumbnail}}<img title="{{ begin }} - {{ atitle }}" src="{{ thumbnail }}">{{/thumbnail}}</div>'
     + '  <div class="Ldt-EnrichedPlan-SlideContent">'
     + '     <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideTitle Ldt-EnrichedPlan-SlideTitle{{ level }}">{{ atitle }}</div>'
     + '     <div class="Ldt-EnrichedPlan-SlideNotes">{{{ notes }}}</div>'

From 9659c0ddabd0828cd414a52cc848f4d0d06e428e Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 15 Oct 2015 11:03:53 +0200
Subject: [PATCH 035/204] Define styles for toc levels

---
 src/widgets/EnrichedPlan.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index c758b692..dcdda9af 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -64,6 +64,16 @@
     font-weight: 600;
 }
 
+.Ldt-EnrichedPlan-SlideTitle2 {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.Ldt-EnrichedPlan-SlideTitle3 {
+    font-size: 14px;
+    font-weight: 200;
+}
+
 .Ldt-EnrichedPlan-Note {
     font-weight: normal;
     font-size: 14px;

From 5c6697003d4c00e4f2ce250dd84a00a1d168e9a1 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 15 Oct 2015 11:13:56 +0200
Subject: [PATCH 036/204] Coding style fixes

---
 src/widgets/Quiz.js | 401 ++++++++++++++++++++++----------------------
 1 file changed, 200 insertions(+), 201 deletions(-)

diff --git a/src/widgets/Quiz.js b/src/widgets/Quiz.js
index b3d9c5b5..0b143090 100644
--- a/src/widgets/Quiz.js
+++ b/src/widgets/Quiz.js
@@ -1,21 +1,21 @@
-IriSP.Widgets.Quiz = function(player, config) {
+IriSP.Widgets.Quiz = function (player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
-}
+};
 
 IriSP.Widgets.Quiz.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Quiz.prototype.defaults = {
     // annotation_type: "at_quiz",
-	quiz_activated: true,
-	api_serializer: "ldt_annotate",
+    quiz_activated: true,
+    api_serializer: "ldt_annotate",
     analytics_api: "",
     api_method: "POST",
     user: "",
     userid:""
-}
+};
 
 IriSP.Widgets.Quiz.prototype.template = '<div class="Ldt-Quiz-Container">'
-	                                    + '<div class="Ldt-Quiz-Header">'
+                                        + '<div class="Ldt-Quiz-Header">'
                                         + '  <div class="Ldt-Quiz-Index"></div><div class="Ldt-Quiz-Score"></div>'
                                         + '</div>'
                                         + '<div class="Ldt-Quiz-Content">'
@@ -38,105 +38,104 @@ IriSP.Widgets.Quiz.prototype.template = '<div class="Ldt-Quiz-Container">'
                                         + '  </div>'
                                         + '  <div class="Ldt-Quiz-Result">Bonne réponse</div>'
                                         + '</div>'
-										+ '</div>';
+                                        + '</div>';
 
 IriSP.Widgets.Quiz.prototype.annotationTemplate = '';
 
-IriSP.Widgets.Quiz.prototype.update = function(annotation) {
-	var _this = this;
+IriSP.Widgets.Quiz.prototype.update = function (annotation) {
+    var _this = this;
 
-	if (this.quiz_activated &&
-		this.correct[annotation.id] != 1 &&
-		this.correct[annotation.id] != 0) {
+    if (this.quiz_activated &&
+        this.correct[annotation.id] != 1 &&
+        this.correct[annotation.id] != 0) {
 
-		_this.quiz_displayed = true;
+        _this.quiz_displayed = true;
 
-		//Pause the current video
-		this.media.pause();
+        //Pause the current video
+        this.media.pause();
 
-		this.annotation = annotation;
+        this.annotation = annotation;
 
-		var question = annotation.content.data.question;
-		var answers = annotation.content.data.answers;
-		var resource = annotation.content.data.resource;
+        var question = annotation.content.data.question;
+        var answers = annotation.content.data.answers;
+        var resource = annotation.content.data.resource;
 
-		$(".Ldt-Quiz-Votes").hide();
+        $(".Ldt-Quiz-Votes").hide();
         $(".Ldt-Pause-Add-Question").hide();
-		$(".Ldt-Quiz-Container .Ldt-Quiz-Title").html(question);
+        $(".Ldt-Quiz-Container .Ldt-Quiz-Title").html(question);
 
-		var i = 0;
+        var i = 0;
 
-		var score = Mustache.to_html('<span class="Ldt-Quiz-Correct-Answer">{{ correctness.0 }}</span> / <span class="Ldt-Quiz-Incorrect-Answer">{{ correctness.1 }}</span>', { correctness: this.globalScore() });
-		$(".Ldt-Quiz-Index").html(Mustache.to_html("Q{{index}}/{{total}}", { index: annotation.number + 1,
+        var score = Mustache.to_html('<span class="Ldt-Quiz-Correct-Answer">{{ correctness.0 }}</span> / <span class="Ldt-Quiz-Incorrect-Answer">{{ correctness.1 }}</span>', { correctness: this.globalScore() });
+        $(".Ldt-Quiz-Index").html(Mustache.to_html("Q{{index}}/{{total}}", { index: annotation.number + 1,
                                                                               total: this.totalAmount }));
-		$(".Ldt-Quiz-Score").html(score);
-		this.question = new IriSP.Widgets.UniqueChoiceQuestion(annotation);
-		this.resource = new IriSP.Widgets.UniqueChoiceQuestion(resource);
-
-		if (annotation.content.data.type == "multiple_choice") {
-			this.question = new IriSP.Widgets.MultipleChoiceQuestion(annotation);
-		this.resource = new IriSP.Widgets.MultipleChoiceQuestion(resource);
-		}
-		else if (annotation.content.data.type == "unique_choice") {
-			this.question = new IriSP.Widgets.UniqueChoiceQuestion(annotation);
-		this.resource = new IriSP.Widgets.UniqueChoiceQuestion(resource);
-		}
-
-		var output = "";
-		for (i = 0; i < answers.length; i++) {
-			output += '<div class="quiz-question-block"><p>' + this.question.renderQuizTemplate(answers[i], i) + '<span class="quiz-question-label">'+ answers[i].content + '</span></p></div>';
-		}
-
-
-		var QR = '';
-		//If there is an attached resource, display it on the resources overlay
-		if (resource != null) {
+        $(".Ldt-Quiz-Score").html(score);
+        this.question = new IriSP.Widgets.UniqueChoiceQuestion(annotation);
+        this.resource = new IriSP.Widgets.UniqueChoiceQuestion(resource);
+
+        if (annotation.content.data.type == "multiple_choice") {
+            this.question = new IriSP.Widgets.MultipleChoiceQuestion(annotation);
+            this.resource = new IriSP.Widgets.MultipleChoiceQuestion(resource);
+        } else if (annotation.content.data.type == "unique_choice") {
+            this.question = new IriSP.Widgets.UniqueChoiceQuestion(annotation);
+            this.resource = new IriSP.Widgets.UniqueChoiceQuestion(resource);
+        }
+
+        var output = "";
+        for (i = 0; i < answers.length; i++) {
+            output += '<div class="quiz-question-block"><p>' + this.question.renderQuizTemplate(answers[i], i) + '<span class="quiz-question-label">' + answers[i].content + '</span></p></div>';
+        }
+
+
+        var QR = '';
+        //If there is an attached resource, display it on the resources overlay
+        if (resource != null) {
             QR = '<div class="quiz-resource-block" id="resource" >' + resource + '</div>';
         };
-		$(".Ldt-Quiz-Questions").html(QR + output);
-		$(".Ldt-Quiz-Overlay").fadeIn();
+        $(".Ldt-Quiz-Questions").html(QR + output);
+        $(".Ldt-Quiz-Overlay").fadeIn();
 
-		$(".Ldt-Quiz-Submit").fadeIn();
+        $(".Ldt-Quiz-Submit").fadeIn();
 
-		//Let's automatically check the checkbox/radio if we click on the label
-		$(".quiz-question-label").click(function() {
+        //Let's automatically check the checkbox/radio if we click on the label
+        $(".quiz-question-label").click(function () {
             var input = $(this).siblings("input");
             if (input.prop('checked') && input.prop('type') == 'radio') {
                 // Already checked. Consider a double click on unique question as a validation.
-		        _this.answer();
+                _this.answer();
             } else {
                 input.prop('checked', !input.prop('checked'));
             }
-		});
-
-		//In case we click on the first "Skip" link
-		$(".Ldt-Quiz-Submit-Skip-Link").click({media: this.media}, function(event) {
-			_this.hide();
-			_this.player.trigger("QuizCreator.skip");
-			event.data.media.play();
-		});
-	}
+        });
+
+        //In case we click on the first "Skip" link
+        $(".Ldt-Quiz-Submit-Skip-Link").click({media: this.media}, function (event) {
+            _this.hide();
+            _this.player.trigger("QuizCreator.skip");
+            event.data.media.play();
+        });
+    }
 };
 
-IriSP.Widgets.Quiz.prototype.hide = function() {
-	var _this = this;
+IriSP.Widgets.Quiz.prototype.hide = function () {
+    var _this = this;
 
-	$(".Ldt-Quiz-Votes").hide();
-	$(".Ldt-Quiz-Overlay").hide();
-	$(".Ldt-Pause-Add-Question").hide();
-	_this.quiz_displayed = false;
-}
+    $(".Ldt-Quiz-Votes").hide();
+    $(".Ldt-Quiz-Overlay").hide();
+    $(".Ldt-Pause-Add-Question").hide();
+    _this.quiz_displayed = false;
+};
 
-IriSP.Widgets.Quiz.prototype.answer = function() {
-	var _this = this;
+IriSP.Widgets.Quiz.prototype.answer = function () {
+    var _this = this;
 
-    function insert_timecode_links (s) {
+    function insert_timecode_links(s) {
         return (s || "").replace(/\s(\d+:\d+)/, function (match, timecode) {
             return ' <a href="#t=' + (IriSP.timestamp2ms(timecode) / 1000) + '">' + timecode + '</a>';
         });
     };
 
-	var answers = _this.annotation.content.data.answers;
+    var answers = _this.annotation.content.data.answers;
 
     // Augment answers with the correct feedback
     var i = 0;
@@ -144,83 +143,83 @@ IriSP.Widgets.Quiz.prototype.answer = function() {
     // Signature is an array giving the answers signature: 1 for checked, 0 for unchecked
     // We cannot simply store the right answer index, since there may be multiple-choice questions
     var signature = [];
-    _this.$.find(".Ldt-Quiz-Question-Check").each( function (code) {
+    _this.$.find(".Ldt-Quiz-Question-Check").each(function (code) {
         var checked = $(this).is(":checked");
         signature.push(checked ? 1 : 0);
         var ans = answers[i];
         if ((ans.correct && !checked)
             || (!ans.correct && checked)) {
             wrong += 1;
-            IriSP.jQuery(this).parents(".quiz-question-block").append('<div class="quiz-question-feedback quiz-question-incorrect-feedback">'+ insert_timecode_links(ans.feedback) +'</div>');
+            IriSP.jQuery(this).parents(".quiz-question-block").append('<div class="quiz-question-feedback quiz-question-incorrect-feedback">' + insert_timecode_links(ans.feedback) + '</div>');
         } else {
-            IriSP.jQuery(this).parents(".quiz-question-block").append('<div class="quiz-question-feedback quiz-question-correct-feedback">'+ insert_timecode_links(ans.feedback) +'</div>');
+            IriSP.jQuery(this).parents(".quiz-question-block").append('<div class="quiz-question-feedback quiz-question-correct-feedback">' + insert_timecode_links(ans.feedback) + '</div>');
         }
         i++;
     });
 
-	if (wrong) {
-		$(".Ldt-Quiz-Result").html("Mauvaise réponse");
-		$(".Ldt-Quiz-Result").css({"background-color" : "red"});
-		this.correct[this.annotation.id] = 0;
-	} else {
-		$(".Ldt-Quiz-Result").html("Bonne réponse !");
-		$(".Ldt-Quiz-Result").css({"background-color" : "green"});
-		this.correct[this.annotation.id] = 1;
-	}
-
-	$(".Ldt-Quiz-Result").animate({height:"100%"},500, "linear", function() {
-		$(".Ldt-Quiz-Result").delay(2000).animate({ height:"0%" }, 500);
-	});
-
-	var question_number = this.annotation.number + 1;
-	var correctness = this.globalScore();
-	var score = "";
-	score += '<span class="Ldt-Quiz-Correct-Answer">' + correctness[0] +'</span> / <span class="Ldt-Quiz-Incorrect-Answer">' + correctness[1] + '</span>';
-	$(".Ldt-Quiz-Index").html("Q"+ question_number + "/" + this.totalAmount);
-	$(".Ldt-Quiz-Score").html(score);
-
-	this.submit(this.user, this.userid, this.annotation.id, wrong ? 'wrong_answer' : 'right_answer', signature.join(""));
-
-	//Hide the "Validate" button and display the UI dedicated to votes
-	$(".Ldt-Quiz-Submit").fadeOut(400, function () {
-	    $(".Ldt-Quiz-Votes").show();
+    if (wrong) {
+        $(".Ldt-Quiz-Result").html("Mauvaise réponse");
+        $(".Ldt-Quiz-Result").css({"background-color" : "red"});
+        this.correct[this.annotation.id] = 0;
+    } else {
+        $(".Ldt-Quiz-Result").html("Bonne réponse !");
+        $(".Ldt-Quiz-Result").css({"background-color" : "green"});
+        this.correct[this.annotation.id] = 1;
+    }
+
+    $(".Ldt-Quiz-Result").animate({height:"100%"}, 500, "linear", function () {
+        $(".Ldt-Quiz-Result").delay(2000).animate({ height:"0%" }, 500);
+    });
+
+    var question_number = this.annotation.number + 1;
+    var correctness = this.globalScore();
+    var score = "";
+    score += '<span class="Ldt-Quiz-Correct-Answer">' + correctness[0] + '</span> / <span class="Ldt-Quiz-Incorrect-Answer">' + correctness[1] + '</span>';
+    $(".Ldt-Quiz-Index").html("Q" + question_number + "/" + this.totalAmount);
+    $(".Ldt-Quiz-Score").html(score);
+
+    this.submit(this.user, this.userid, this.annotation.id, wrong ? 'wrong_answer' : 'right_answer', signature.join(""));
+
+    //Hide the "Validate" button and display the UI dedicated to votes
+    $(".Ldt-Quiz-Submit").fadeOut(400, function () {
+        $(".Ldt-Quiz-Votes").show();
     });
 };
 
-IriSP.Widgets.Quiz.prototype.globalScore = function() {
+IriSP.Widgets.Quiz.prototype.globalScore = function () {
     // Return 2 variables to know how many right and wrong answers there are
     var values = _.values(this.correct);
-    var ok = values.filter( function (s) { return s == 1; }).length;
-    var not_ok = values.filter( function (s) { return s == 0; }).length;
-	return [ok, not_ok];
+    var ok = values.filter(function (s) { return s == 1; }).length;
+    var not_ok = values.filter(function (s) { return s == 0; }).length;
+    return [ok, not_ok];
 };
 
-IriSP.Widgets.Quiz.prototype.refresh = function() {
-    var _annotations = this.getWidgetAnnotations().sortBy(function(_annotation) {
+IriSP.Widgets.Quiz.prototype.refresh = function () {
+    var _annotations = this.getWidgetAnnotations().sortBy(function (_annotation) {
         return _annotation.begin;
     });
 
     var _this = this;
 
-	_this.totalAmount = _annotations.length;
-	_this.number = 0;
-	_this.correct = {};
-	_this.keys = {};
+    _this.totalAmount = _annotations.length;
+    _this.number = 0;
+    _this.correct = {};
+    _this.keys = {};
 
-    _annotations.forEach(function(_a) {
-		//Fix each annotation as "non-answered yet"
-		_this.correct[_a.id] = -1;
-		_this.keys[_this.number] = _a.id;
-		_a.number = _this.number++;
+    _annotations.forEach(function (_a) {
+        //Fix each annotation as "non-answered yet"
+        _this.correct[_a.id] = -1;
+        _this.keys[_this.number] = _a.id;
+        _a.number = _this.number++;
     });
 
-}
+};
 
-IriSP.Widgets.Quiz.prototype.draw = function() {
-	var _this = this;
-	_this.quiz_displayed = false;
+IriSP.Widgets.Quiz.prototype.draw = function () {
+    var _this = this;
+    _this.quiz_displayed = false;
     this.onMediaEvent("enter-annotation", function (annotation) {
-        var an = _this.getWidgetAnnotations().filter( function (a) { return a === annotation; });
+        var an = _this.getWidgetAnnotations().filter(function (a) { return a === annotation; });
         if (an.number === undefined) {
             _this.refresh();
         }
@@ -228,82 +227,82 @@ IriSP.Widgets.Quiz.prototype.draw = function() {
             _this.update(an[0]);
         };
     });
-    this.onMdpEvent("Quiz.activate", function() {
-		_this.quiz_activated = true;
+    this.onMdpEvent("Quiz.activate", function () {
+        _this.quiz_activated = true;
     });
 
-    this.onMdpEvent("Quiz.deactivate", function() {
-		_this.quiz_activated = false;
-		_this.hide();
+    this.onMdpEvent("Quiz.deactivate", function () {
+        _this.quiz_activated = false;
+        _this.hide();
     });
 
-    this.onMdpEvent("Quiz.hide", function() {
-		_this.hide();
+    this.onMdpEvent("Quiz.hide", function () {
+        _this.hide();
     });
 
-    this.onMdpEvent("Quiz.refresh", function() {
-		_this.refresh();
+    this.onMdpEvent("Quiz.refresh", function () {
+        _this.refresh();
     });
 
-    this.onMediaEvent("pause", function() {
-		if (! _this.quiz_displayed) {
-		    $(".Ldt-Pause-Add-Question").show();
+    this.onMediaEvent("pause", function () {
+        if (!_this.quiz_displayed) {
+            $(".Ldt-Pause-Add-Question").show();
         }
     });
 
-    this.onMediaEvent("play", function() {
-	   $(".Ldt-Pause-Add-Question").hide();
+    this.onMediaEvent("play", function () {
+        $(".Ldt-Pause-Add-Question").hide();
     });
 
     // Add Ldt-Quiz-Overlay widget on top of video player
-	_this.overlay = $("<div class='Ldt-Quiz-Overlay'></div>").appendTo($('#' + _this.container));
-	_this.PauseAddQuestion = $("<div class='Ldt-Pause-Add-Question' title='Ajoutez une question !'>")
-        .on("click", function() { _this.player.trigger("QuizCreator.create"); })
+    _this.overlay = $("<div class='Ldt-Quiz-Overlay'></div>").appendTo($('#' + _this.container));
+    _this.PauseAddQuestion = $("<div class='Ldt-Pause-Add-Question' title='Ajoutez une question !'>")
+        .on("click", function () { _this.player.trigger("QuizCreator.create"); })
         .appendTo($('#' + _this.container));
-	_this.overlay.html(this.template);
+    _this.overlay.html(this.template);
 
-	$(".Ldt-Quiz-Overlay").hide();
+    $(".Ldt-Quiz-Overlay").hide();
 
-    $(".Ldt-Quiz-Submit input").click(function() {
-		_this.answer();
+    $(".Ldt-Quiz-Submit input").click(function () {
+        _this.answer();
     });
 
-	//In case we click on the first "Skip" link
-	$(".Ldt-Quiz-Submit-Skip-Link").click({ media: this.media }, function(event) {
-		_this.submit(_this.user, _this.userid, _this.annotation.id, "skipped_answer", 0);
-		_this.hide();
-		_this.player.trigger("QuizCreator.skip");
-		event.data.media.play();
-	});
-
-    $(".Ldt-Quiz-Votes-Buttons input[type=\"button\"], .Ldt-Quiz-Votes-Buttons a").click({media: this.media}, function(event) {
-		var vote_prop, vote_val;
-
-		if ($(this).hasClass("Ldt-Quiz-Vote-Useful")) {
-			vote_prop = "useful";
-			vote_val = 1;
-		} else if ($(this).hasClass("Ldt-Quiz-Vote-Useless")) {
-			vote_prop = "useless";
-			vote_val = -1;
-
-			$(".Ldt-Ctrl-Quiz-Create").addClass("button_highlight").delay(5000).queue(function() {
+    //In case we click on the first "Skip" link
+    $(".Ldt-Quiz-Submit-Skip-Link").click({ media: this.media }, function (event) {
+        _this.submit(_this.user, _this.userid, _this.annotation.id, "skipped_answer", 0);
+        _this.hide();
+        _this.player.trigger("QuizCreator.skip");
+        event.data.media.play();
+    });
+
+    $(".Ldt-Quiz-Votes-Buttons input[type=\"button\"], .Ldt-Quiz-Votes-Buttons a").click({media: this.media}, function (event) {
+        var vote_prop, vote_val;
+
+        if ($(this).hasClass("Ldt-Quiz-Vote-Useful")) {
+            vote_prop = "useful";
+            vote_val = 1;
+        } else if ($(this).hasClass("Ldt-Quiz-Vote-Useless")) {
+            vote_prop = "useless";
+            vote_val = -1;
+
+            $(".Ldt-Ctrl-Quiz-Create").addClass("button_highlight").delay(5000).queue(function () {
                 $(this).removeClass("button_highlight").dequeue();
             });
-		}else{
-			vote_prop = "skipped_vote";
-			vote_val = 0;
-		}
+        } else {
+            vote_prop = "skipped_vote";
+            vote_val = 0;
+        }
 
-		_this.submit(_this.user, _this.userid, _this.annotation.id, vote_prop, vote_val);
+        _this.submit(_this.user, _this.userid, _this.annotation.id, vote_prop, vote_val);
 
-		//Resume the current video
-		event.data.media.play();
+        //Resume the current video
+        event.data.media.play();
 
-		_this.hide();
-		$(".Ldt-Pause-Add-Question").hide();
+        _this.hide();
+        $(".Ldt-Pause-Add-Question").hide();
 
-		_this.player.trigger("QuizCreator.skip");
-	});
+        _this.player.trigger("QuizCreator.skip");
+    });
 
     _this.refresh();
 };
@@ -318,9 +317,9 @@ IriSP.Widgets.Widget.prototype.generateUid = function () {
 }
 
 //UniqueChoice Question
-IriSP.Widgets.UniqueChoiceQuestion = function(annotation) {
+IriSP.Widgets.UniqueChoiceQuestion = function (annotation) {
     this.annotation = annotation;
-}
+};
 
 IriSP.Widgets.UniqueChoiceQuestion.prototype = new IriSP.Widgets.Widget();
 
@@ -341,48 +340,48 @@ IriSP.Widgets.UniqueChoiceQuestion.prototype.renderFullTemplate = function(answe
 
 
 //MultipleChoice Question
-IriSP.Widgets.MultipleChoiceQuestion = function(annotation) {
+IriSP.Widgets.MultipleChoiceQuestion = function (annotation) {
     this.annotation = annotation;
-}
+};
 
 IriSP.Widgets.MultipleChoiceQuestion.prototype = new IriSP.Widgets.Widget();
 
-IriSP.Widgets.MultipleChoiceQuestion.prototype.renderQuizTemplate = function(answer, identifier) {
-	return '<input type="checkbox" class="quiz-question Ldt-Quiz-Question-Check Ldt-Quiz-Question-Check-'+ identifier + '" name="question['+ identifier +']" data-question="'+ identifier +'" value="' + identifier + '" /> ';
-}
+IriSP.Widgets.MultipleChoiceQuestion.prototype.renderQuizTemplate = function (answer, identifier) {
+    return '<input type="checkbox" class="quiz-question Ldt-Quiz-Question-Check Ldt-Quiz-Question-Check-' + identifier + '" name="question[' + identifier + ']" data-question="' + identifier + '" value="' + identifier + '" /> ';
+};
 
-IriSP.Widgets.MultipleChoiceQuestion.prototype.renderTemplate = function(answer, identifier) {
-	var id = this.generateUid();
-	return '<input type="checkbox" id="'+ id +'" class="quiz-question-edition Ldt-Quiz-Question-Check" name="question['+ identifier +']" data-question="'+ identifier +'" value="' + identifier + '" /><label for="'+ id +'" title="Veuillez sélectionner la ou les réponses correctes"></label>';
-}
+IriSP.Widgets.MultipleChoiceQuestion.prototype.renderTemplate = function (answer, identifier) {
+    var id = IriSP.generateUuid();
+    return '<input type="checkbox" id="' + id + '" class="quiz-question-edition Ldt-Quiz-Question-Check" name="question[' + identifier + ']" data-question="' + identifier + '" value="' + identifier + '" /><label for="' + id + '" title="Veuillez sélectionner la ou les réponses correctes"></label>';
+};
 
-IriSP.Widgets.MultipleChoiceQuestion.prototype.renderFullTemplate = function(answer, identifier) {
-	var correct = (answer && answer.correct) ? "checked" : "";
-	var id = this.generateUid();
-	return '<input type="checkbox" id="'+ id +'" '+ correct +' class="quiz-question-edition Ldt-Quiz-Question-Check" name="question['+ identifier +']" data-question="'+ identifier +'" value="' + identifier + '" /><label for="'+ id +'"></label> ';
-}
+IriSP.Widgets.MultipleChoiceQuestion.prototype.renderFullTemplate = function (answer, identifier) {
+    var correct = (answer && answer.correct) ? "checked" : "";
+    var id = IriSP.generateUuid();
+    return '<input type="checkbox" id="' + id + '" ' + correct + ' class="quiz-question-edition Ldt-Quiz-Question-Check" name="question[' + identifier + ']" data-question="' + identifier + '" value="' + identifier + '" /><label for="' + id + '"></label> ';
+};
 
-IriSP.Widgets.Quiz.prototype.submit = function(user,user_id,question,prop,val) {
+IriSP.Widgets.Quiz.prototype.submit = function (user,user_id,question,prop,val) {
     var _this = this;
-	var _url = Mustache.to_html(this.analytics_api, {id: this.source.projectId}),
-	donnees = {
-			"username": user,
-			"useruuid": user_id,
-			"subject": question,
-			"property": prop,
-		    "value": val,
+    var _url = Mustache.to_html(this.analytics_api, {id: this.source.projectId}),
+    donnees = {
+            "username": user,
+            "useruuid": user_id,
+            "subject": question,
+            "property": prop,
+            "value": val,
             "session": _this.session_id
-		};
+        };
 
-	IriSP.jQuery.ajax({
+    IriSP.jQuery.ajax({
         url: _url,
         type: this.api_method,
         contentType: 'application/json',
         data: JSON.stringify(donnees),
-        success: function(_data) {
+        success: function (_data) {
         },
-        error: function(_xhr, _error, _thrown) {
+        error: function (_xhr, _error, _thrown) {
             IriSP.log("Error when sending annotation", _thrown);
         }
     });
-}
+};

From 3c36f57525781b1324ce6fc093161f616fdf8b1f Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 15 Oct 2015 11:14:13 +0200
Subject: [PATCH 037/204] Implement IriSP.generateUuid and use it

---
 src/js/utils.js     | 11 +++++++++++
 src/widgets/Quiz.js | 33 ++++++++++++---------------------
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/js/utils.js b/src/js/utils.js
index bbfb2210..884e6846 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -202,3 +202,14 @@ IriSP.getFullscreenEventname = function () {
             || (document.msExitFullscreen && "msfullscreenchange")
             || "");
 };
+
+/**
+ * Generate a UUID
+ * Source: http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
+ */
+IriSP.generateUuid = function () {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+};
diff --git a/src/widgets/Quiz.js b/src/widgets/Quiz.js
index 0b143090..bd253454 100644
--- a/src/widgets/Quiz.js
+++ b/src/widgets/Quiz.js
@@ -307,15 +307,6 @@ IriSP.Widgets.Quiz.prototype.draw = function () {
     _this.refresh();
 };
 
-//Generates uid
-//source : http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
-IriSP.Widgets.Widget.prototype.generateUid = function () {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-        var r = Math.random()*16|0, v = c === 'x' ? r : (r&0x3|0x8);
-        return v.toString(16);
-    });
-}
-
 //UniqueChoice Question
 IriSP.Widgets.UniqueChoiceQuestion = function (annotation) {
     this.annotation = annotation;
@@ -323,20 +314,20 @@ IriSP.Widgets.UniqueChoiceQuestion = function (annotation) {
 
 IriSP.Widgets.UniqueChoiceQuestion.prototype = new IriSP.Widgets.Widget();
 
-IriSP.Widgets.UniqueChoiceQuestion.prototype.renderQuizTemplate = function(answer, identifier) {
-	return '<input type="radio" class="quiz-question Ldt-Quiz-Question-Check Ldt-Quiz-Question-Check-' + identifier + '" name="question" data-question="' + identifier + '" value="' + identifier + '" />';
-}
+IriSP.Widgets.UniqueChoiceQuestion.prototype.renderQuizTemplate = function (answer, identifier) {
+    return '<input type="radio" class="quiz-question Ldt-Quiz-Question-Check Ldt-Quiz-Question-Check-' + identifier + '" name="question" data-question="' + identifier + '" value="' + identifier + '" />';
+};
 
-IriSP.Widgets.UniqueChoiceQuestion.prototype.renderTemplate = function(answer, identifier) {
-	var id = this.generateUid();
-	return '<input type="radio" id="' + id + '" class="quiz-question-edition Ldt-Quiz-Question-Check Ldt-Quiz-Question-Check-'+ identifier +'" name="question" data-question="'+ identifier +'" value="' + identifier + '" /><label for="'+ id +'" title="Veuillez sélectionner la réponse correcte"></label>';
-}
+IriSP.Widgets.UniqueChoiceQuestion.prototype.renderTemplate = function (answer, identifier) {
+    var id = IriSP.generateUuid();
+    return '<input type="radio" id="' + id + '" class="quiz-question-edition Ldt-Quiz-Question-Check Ldt-Quiz-Question-Check-' + identifier + '" name="question" data-question="' + identifier + '" value="' + identifier + '" /><label for="' + id + '" title="Veuillez sélectionner la réponse correcte"></label>';
+};
 
-IriSP.Widgets.UniqueChoiceQuestion.prototype.renderFullTemplate = function(answer, identifier) {
-	var correct = (answer && answer.correct) ? "checked" : "";
-	var id = this.generateUid();
-	return '<input type="radio" id="'+ id +'" '+ correct +' class="quiz-question-edition Ldt-Quiz-Question-Check Ldt-Quiz-Question-Check-'+ identifier +'" name="question" data-question="'+ identifier +'" value="' + identifier + '" /><label for="'+ id +'"></label>';
-}
+IriSP.Widgets.UniqueChoiceQuestion.prototype.renderFullTemplate = function (answer, identifier) {
+    var correct = (answer && answer.correct) ? "checked" : "";
+    var id = IriSP.generateUuid();
+    return '<input type="radio" id="' + id + '" ' + correct + ' class="quiz-question-edition Ldt-Quiz-Question-Check Ldt-Quiz-Question-Check-' + identifier + '" name="question" data-question="' + identifier + '" value="' + identifier + '" /><label for="' + id + '"></label>';
+};
 
 
 //MultipleChoice Question

From 2d964a8f5395b0ff29be93ec987782870a3d93d0 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 15 Oct 2015 11:15:02 +0200
Subject: [PATCH 038/204] Use generateUuid for generating prefix

---
 src/widgets/EnrichedPlan.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 9f7662b9..73f1b327 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -54,7 +54,7 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
     var _this = this;
     // Generate a unique prefix, so that ids of input fields
     // (necessary for label association) are unique too.
-    _this.prefix = "TODO";
+    _this.prefix = IriSP.generateUuid();
     // slides content: title, level (for toc)
     var _slides = this.getWidgetAnnotations().sortBy(function (_annotation) {
         return _annotation.begin;

From 32795ec3d512fee05cb06c1a110dcb2f28a2e125 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 15 Oct 2015 16:01:28 +0200
Subject: [PATCH 039/204] Implement basic edit/delete framework (not wired yet)

---
 src/widgets/EnrichedPlan.css     | 15 +++++++++++++++
 src/widgets/EnrichedPlan.js      | 24 +++++++++++++++++++++++-
 src/widgets/img/notes_delete.svg | 15 +++++++++++++++
 src/widgets/img/notes_edit.svg   | 15 +++++++++++++++
 4 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 src/widgets/img/notes_delete.svg
 create mode 100644 src/widgets/img/notes_edit.svg

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index dcdda9af..a565d8c8 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -217,3 +217,18 @@ label:hover:before {
 label:hover:before {
     background-color: #ededed;
 }
+
+.Ldt-EnrichedPlan-EditControl span {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin: 7px;
+}
+
+.Ldt-EnrichedPlan-EditControl-Edit {
+    background: url(img/notes_edit.svg);
+}
+
+.Ldt-EnrichedPlan-EditControl-Delete {
+    background: url(img/notes_delete.svg);
+}
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 73f1b327..3c41ea54 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -8,6 +8,17 @@ IriSP.Widgets.EnrichedPlan = function (player, config) {
 
 IriSP.Widgets.EnrichedPlan.prototype = new IriSP.Widgets.Widget();
 
+IriSP.Widgets.EnrichedPlan.prototype.messages = {
+    en: {
+        delete_annotation: "Delete note",
+        confirm_delete_message: "You are about to delete {{ annotation.title }}. Are you sure you want to delete it?"
+    },
+    fr: {
+        delete_annotation: "Supprimer la note",
+        confirm_delete_message: "Vous allez supprimer {{ annotation.title }}. Êtes-vous certain(e) ?"
+    }
+};
+
 IriSP.Widgets.EnrichedPlan.prototype.defaults = {
     // Main type for toc segmentation
     annotation_type: "Slides",
@@ -48,7 +59,7 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '  </div>'
     + '</div>';
 
-IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span></div>';
+IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> <span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Delete"></span></span></div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
     var _this = this;
@@ -141,6 +152,17 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
 
     });
 
+    container.on("click", ".Ldt-EnrichedPlan-EditControl-Edit", function () {
+        _this.player.trigger("Annotation.edit", this.dataset.id);
+    });
+    container.on("click", ".Ldt-EnrichedPlan-EditControl-Delete", function () {
+        var _annotation = _this.source.getElement(this.dataset.id);
+        if (confirm(Mustache.to_html(_this.l10n.confirm_delete_message, { annotation: _annotation }))) {
+            _this.source.getAnnotations().removeElement(_annotation);
+            _this.player.trigger("Annotation.delete", this.dataset.id);
+        }
+    });
+
     container.find(".Ldt-EnrichedPlan-Search-Input").on("search", function () {
         var q = IriSP.jQuery(this).val().toLocaleLowerCase();
         if (q === "") {
diff --git a/src/widgets/img/notes_delete.svg b/src/widgets/img/notes_delete.svg
new file mode 100644
index 00000000..6f7bb799
--- /dev/null
+++ b/src/widgets/img/notes_delete.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+<g>
+	<path fill="#999999" d="M9,0C4.037,0,0,4.038,0,9c0,4.962,4.037,9,9,9s9-4.037,9-9C18,4.038,13.963,0,9,0z M9,17
+		c-4.411,0-8-3.59-8-8c0-4.412,3.589-8,8-8s8,3.588,8,8C17,13.41,13.411,17,9,17z"/>
+	<path fill="#999999" d="M12.95,4.086l-2.792-0.402c0-0.002,0.001-0.002,0.001-0.004c0-0.275-0.224-0.5-0.5-0.5H8.342
+		c-0.273,0-0.493,0.219-0.498,0.49L4.896,4.051C4.538,4.147,3.86,4.563,3.86,5.458v0.994h0.733l1.017,8.367h6.78l1.017-8.367h0.734
+		V5.458C14.142,4.606,13.395,4.196,12.95,4.086z M11.504,13.818H6.497L5.601,6.452h0.801l0.554,6.566l0.996-0.084L7.404,6.452h1.132
+		v6.521h1V6.452h1.061l-0.546,6.482l0.996,0.084L11.6,6.452H12.4L11.504,13.818z M4.86,5.452C4.862,5.143,5.072,5.043,5.088,5.03
+		l3.927-0.5l3.744,0.537c0.003,0.002,0.379,0.102,0.383,0.385H4.86z"/>
+</g>
+</svg>
diff --git a/src/widgets/img/notes_edit.svg b/src/widgets/img/notes_edit.svg
new file mode 100644
index 00000000..c9faef3a
--- /dev/null
+++ b/src/widgets/img/notes_edit.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+<g>
+	<path fill="#999999" d="M9,0C4.037,0,0,4.038,0,9c0,4.962,4.037,9,9,9s9-4.037,9-9C18,4.038,13.963,0,9,0z M9,17
+		c-4.411,0-8-3.59-8-8c0-4.412,3.589-8,8-8s8,3.588,8,8C17,13.41,13.411,17,9,17z"/>
+	<path fill="#999999" d="M12.398,8.848l-0.186-0.281l-5.8-5.814L2.952,6.213l5.736,5.736l0.357,0.248l0.09,0.047
+		c0.111,0.045,2.733,1.096,3.34,1.299c0.167,0.055,0.317,0.082,0.458,0.082c0.275,0,0.513-0.111,0.666-0.311
+		c0.279-0.367,0.184-0.879,0.084-1.244C13.374,11.039,12.477,9.006,12.398,8.848z M9.045,10.83L4.366,6.213l2.047-2.047l4.648,4.648
+		L9.045,10.83z M11.884,12.254c-0.701-0.27-1.575-0.617-2.044-0.805l1.818-1.818c0.193,0.449,0.556,1.302,0.825,2.025L11.884,12.254
+		z"/>
+</g>
+</svg>

From e4480d3306d9ef96ccc7db2e1595b75cda63f24a Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 15 Oct 2015 17:31:25 +0200
Subject: [PATCH 040/204] Preserve extra metadata info for Annotation and Media
 elements

---
 src/js/serializers/ldt-serializer.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/js/serializers/ldt-serializer.js b/src/js/serializers/ldt-serializer.js
index 1b7d00a2..82519a35 100644
--- a/src/js/serializers/ldt-serializer.js
+++ b/src/js/serializers/ldt-serializer.js
@@ -26,10 +26,11 @@ IriSP.serializers.ldt = {
                 _res.description = _data.meta["dc:description"];
                 _res.setDuration(_data.meta["dc:duration"]);
                 _res.url = _data.meta.url;
+                _res.meta = _data.meta;
                 if (typeof _data.meta.img !== "undefined" && _data.meta.img.src !== "undefined") {
                     _res.thumbnail = _data.meta.img.src;
                 }
-                return _res;        
+                return _res;
             },
             serializer : function(_data, _source, _dest) {
                 var _res = {
@@ -45,6 +46,7 @@ IriSP.serializers.ldt = {
                         "dc:duration" : _data.duration.milliseconds
                     }
                 };
+                IriSP._.defaults(_res.meta, _data.meta);
                 _dest.medias.push(_res);
                 var _list = {
                     id: IriSP.Model.getUID(),
@@ -115,7 +117,7 @@ IriSP.serializers.ldt = {
                 var _res = new IriSP.Model.AnnotationType(_data.id, _source);
                 _res.title = _data["dc:title"];
                 _res.description = _data["dc:description"];
-                return _res;        
+                return _res;
             },
             serializer : function(_data, _source, _dest) {
                 var _res = {
@@ -163,6 +165,7 @@ IriSP.serializers.ldt = {
                 if (typeof _data.content.audio !== "undefined" && _data.content.audio.href) {
                     _res.audio = _data.content.audio;
                 }
+                _res.meta = _data.meta;
                 return _res;
             },
             serializer : function(_data, _source, _dest) {
@@ -206,12 +209,13 @@ IriSP.serializers.ldt = {
                     });
                 } else {
                     _res.tags = IriSP._(_data.tag.id).map(function(_id) {
-                       return {
+                        return {
                            "id-ref" : _id
                        };
                     });
                 }
                 _res.content.title = _data.title || _res.content.title || "";
+                IriSP._.defaults(_res.meta, _data.meta);
                 _dest.annotations.push(_res);
             }
         },

From afcc9c5e9c7b80849211613b13dabf8a239d5179 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 16 Oct 2015 16:54:56 +0200
Subject: [PATCH 041/204] Set description before title

Because we may use the first line of description to populate title
---
 src/widgets/CreateAnnotation.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/widgets/CreateAnnotation.js b/src/widgets/CreateAnnotation.js
index 26c4e76c..e73162c6 100644
--- a/src/widgets/CreateAnnotation.js
+++ b/src/widgets/CreateAnnotation.js
@@ -512,6 +512,9 @@ IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function () {
         _annotation.setBeginEnd(this.begin, this.end); /* Widget end/start timecodes */
     }
     _annotation.setAnnotationType(_annotationType.id); /* Annotation type ID */
+
+    _annotation.created = new Date(); /* Annotation creation date */
+    _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); /* Description field */
     if (this.show_title_field) {
         /* Title field, only if it's visible */
         _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val();
@@ -524,8 +527,6 @@ IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function () {
         /* Project id, only if it's been specifiec in the config */
         _annotation.project_id = this.project_id;
     }
-    _annotation.created = new Date(); /* Annotation creation date */
-    _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); /* Description field */
 
     var tagIds = Array.prototype.map.call(
         this.$.find(".Ldt-CreateAnnotation-TagLi.selected"),

From 04c835128341e528f579a3e69e7f20b99e51d3d2 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 16 Oct 2015 16:55:04 +0200
Subject: [PATCH 042/204] Trim whitespaces from description

---
 src/widgets/CreateAnnotation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/CreateAnnotation.js b/src/widgets/CreateAnnotation.js
index e73162c6..dbabc407 100644
--- a/src/widgets/CreateAnnotation.js
+++ b/src/widgets/CreateAnnotation.js
@@ -514,7 +514,7 @@ IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function () {
     _annotation.setAnnotationType(_annotationType.id); /* Annotation type ID */
 
     _annotation.created = new Date(); /* Annotation creation date */
-    _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); /* Description field */
+    _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val().trim(); /* Description field */
     if (this.show_title_field) {
         /* Title field, only if it's visible */
         _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val();

From c16d66e6b9c83256d40399f7127343ad6bdccef9 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 16 Oct 2015 17:35:12 +0200
Subject: [PATCH 043/204] Increase size of action icons

---
 src/widgets/EnrichedPlan.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index a565d8c8..c818919e 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -220,8 +220,8 @@ label:hover:before {
 
 .Ldt-EnrichedPlan-EditControl span {
     display: inline-block;
-    width: 18px;
-    height: 18px;
+    width: 24px;
+    height: 24px;
     margin: 7px;
 }
 

From c708f9dd4653f69c3404999bf480cc2a7af3b6b6 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 19 Oct 2015 11:37:08 +0200
Subject: [PATCH 044/204] Use coco:category metadata

---
 src/widgets/EnrichedPlan.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 3c41ea54..de3fd18e 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -59,7 +59,7 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '  </div>'
     + '</div>';
 
-IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> <span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Delete"></span></span></div>';
+IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Delete"></span></span>{{/can_edit}}</div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
     var _this = this;
@@ -102,7 +102,8 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
 
     // Returns the note category: Own, Other, Teacher
     function note_category(a) {
-        return a.title.indexOf('Anonyme') < 0 ? "Own" : "Other";
+        var category = a.meta["coco:category"] || 'other';
+        return IriSP._.capitalize(category);
     };
 
     _slides.forEach(function (slide) {
@@ -122,6 +123,7 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
                     begin: a.begin.toString(),
                     begintc: a.begin.milliseconds,
                     atitle: a.title.slice(0, 20),
+                    can_edit: a.meta['coco:can_edit'],
                     // FIXME: Temporary hack waiting for a proper metadata definition
                     category: "Ldt-EnrichedPlan-Note-" + note_category(a),
                     filtered: ((note_category(a) == 'Own' && !_this.show_own_notes)

From 35fc3cbd7c8fcd9c789ae8972befc4a49eb686ab Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 19 Oct 2015 11:59:41 +0200
Subject: [PATCH 045/204] Define own capitalize method

---
 src/widgets/EnrichedPlan.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index de3fd18e..ab005a7b 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -100,10 +100,17 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
     var container = _this.$.find('.Ldt-EnrichedPlan-Container');
     var content = _this.$.find('.Ldt-EnrichedPlan-Content');
 
+    function capitalize(s) {
+        // This function is defined in recent versions of _
+        return s.replace(/^[a-z]/g, function (match) {
+            return match.toUpperCase();
+        });
+    };
+
     // Returns the note category: Own, Other, Teacher
     function note_category(a) {
         var category = a.meta["coco:category"] || 'other';
-        return IriSP._.capitalize(category);
+        return capitalize(category);
     };
 
     _slides.forEach(function (slide) {

From bdb8296031ce59fc681fabaf18e27d82d51b9857 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 19 Oct 2015 15:52:01 +0200
Subject: [PATCH 046/204] Remove volume bar + add mute icon

---
 src/widgets/CocoController.css                | 21 +----
 src/widgets/CocoController.js                 | 34 +-------
 .../img/coco_video_control_sound_mute.svg     | 82 +++++++++++++++++++
 3 files changed, 86 insertions(+), 51 deletions(-)
 create mode 100644 src/widgets/img/coco_video_control_sound_mute.svg

diff --git a/src/widgets/CocoController.css b/src/widgets/CocoController.css
index 5e6bd1ac..9e6ba49a 100644
--- a/src/widgets/CocoController.css
+++ b/src/widgets/CocoController.css
@@ -44,25 +44,8 @@
 .Ldt-CocoCtrl-Sound {
     background: url("img/coco_video_control_sound.svg");
 }
-
-.Ldt-CocoCtrl-Volume-Control {
-    display: none;
-}
-
-.Ldt-CocoCtrl-Volume-Bar {
-    height: 5px;
-    margin: 9px 3px 0;
-    background: black;
-}
-
-.Ldt-CocoCtrl-Volume-Control .ui-slider-handle {
-    width: 6px;
-    height: 19px;
-    color: white;
-    background: black;
-    top: -8px;
-    margin-left: -4px;
-    cursor: pointer;
+.Ldt-CocoCtrl-Sound-Mute {
+    background: url("img/coco_video_control_sound_mute.svg");
 }
 
 .Ldt-CocoCtrl-Social .Ldt-CocoCtrl-button {
diff --git a/src/widgets/CocoController.js b/src/widgets/CocoController.js
index 05eeacdc..6e508a21 100644
--- a/src/widgets/CocoController.js
+++ b/src/widgets/CocoController.js
@@ -25,10 +25,7 @@ IriSP.Widgets.CocoController.prototype.template =
     + '       <div class="Ldt-CocoCtrl-button Ldt-CocoCtrl-Facebook-Button Ldt-TraceMe" title="{{l10n.share_facebook}}"></div>'
     + '   </div>'
     + '   <div class="Ldt-CocoCtrl-button Ldt-CocoCtrl-Fullscreen-Button Ldt-TraceMe" title="{{l10n.fullscreen}}"></div>'
-    + '   <div class="Ldt-CocoCtrl-button Ldt-CocoCtrl-Sound" title="{{l10n.volume_control}}">'
-    + '      <div class="Ldt-CocoCtrl-Volume-Control" title="{{l10n.volume_control}}">'
-    + '          <div class="Ldt-CocoCtrl-Volume-Bar"></div>'
-    + '      </div>'
+    + '   <div class="Ldt-CocoCtrl-button Ldt-CocoCtrl-Sound">'
     + '   </div>'
     + '</div>'
     + '</div>';
@@ -42,8 +39,6 @@ IriSP.Widgets.CocoController.prototype.messages = {
         unmute: "Unmute",
         elapsed_time: "Elapsed time",
         total_time: "Total duration",
-        volume: "Volume",
-        volume_control: "Volume control",
         fullscreen: "Fullscreen mode"
     },
     fr: {
@@ -52,8 +47,6 @@ IriSP.Widgets.CocoController.prototype.messages = {
         pause: "Pause",
         elapsed_time: "Temps écoulé",
         total_time: "Durée totale",
-        volume: "Niveau sonore",
-        volume_control: "Réglage du niveau sonore",
         fullscreen: "Mode plein écran"
     }
 };
@@ -66,7 +59,6 @@ IriSP.Widgets.CocoController.prototype.draw = function () {
     this.$playButton = this.$.find(".Ldt-CocoCtrl-Play");
     this.$searchBlock = this.$.find(".Ldt-CocoCtrl-Search");
     this.$searchInput = this.$.find(".Ldt-CocoCtrl-SearchInput");
-    this.$volumeBar = this.$.find(".Ldt-CocoCtrl-Volume-Bar");
     this.$timeElapsed = this.$.find(".Ldt-CocoCtrl-Time-Elapsed");
     this.$timeTotal = this.$.find(".Ldt-CocoCtrl-Time-Total");
 
@@ -96,29 +88,8 @@ IriSP.Widgets.CocoController.prototype.draw = function () {
         });
     };
 
-    var _volctrl = this.$.find(".Ldt-CocoCtrl-Volume-Control");
     this.$.find('.Ldt-CocoCtrl-Sound')
-        .click(this.functionWrapper("muteHandler"))
-        .mouseover(function () {
-            _volctrl.show();
-        })
-        .mouseout(function () {
-            _volctrl.hide();
-        });
-    _volctrl.mouseover(function () {
-        _volctrl.show();
-    }).mouseout(function () {
-        _volctrl.hide();
-    });
-
-    // Allow Volume Cursor Dragging
-    this.$volumeBar.slider({
-        slide: function (event, ui) {
-            _this.$volumeBar.attr("title", _this.l10n.volume + ': ' + ui.value + '%');
-            _this.media.setVolume(ui.value / 100);
-        },
-        stop: this.functionWrapper("volumeUpdater")
-    });
+        .click(this.functionWrapper("muteHandler"));
 
     this.timeDisplayUpdater(new IriSP.Model.Time(0));
 };
@@ -188,5 +159,4 @@ IriSP.Widgets.CocoController.prototype.volumeUpdater = function () {
         _soundCtl.attr("title", this.l10n.mute)
             .addClass(_vol < .5 ? "Ldt-CocoCtrl-Sound-Half" : "Ldt-CocoCtrl-Sound-Full");
     }
-    this.$volumeBar.slider("value", _muted ? 0 : 100 * _vol);
 };
diff --git a/src/widgets/img/coco_video_control_sound_mute.svg b/src/widgets/img/coco_video_control_sound_mute.svg
new file mode 100644
index 00000000..58049259
--- /dev/null
+++ b/src/widgets/img/coco_video_control_sound_mute.svg
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   id="Calque_1"
+   x="0px"
+   y="0px"
+   width="32px"
+   height="22px"
+   viewBox="0 0 32 22"
+   enable-background="new 0 0 32 22"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="coco_video_control_sound_mute.svg"><metadata
+     id="metadata17"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs15"><linearGradient
+       id="linearGradient4149"
+       osb:paint="solid"><stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop4151" /></linearGradient><inkscape:path-effect
+       effect="spiro"
+       id="path-effect4147"
+       is_visible="true" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4149"
+       id="linearGradient4153"
+       x1="5.9325478"
+       y1="10.96191"
+       x2="28.08135"
+       y2="10.96191"
+       gradientUnits="userSpaceOnUse" /></defs><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1024"
+     inkscape:window-height="768"
+     id="namedview13"
+     showgrid="false"
+     inkscape:zoom="10.727273"
+     inkscape:cx="16"
+     inkscape:cy="11"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Calque_1" /><path
+     fill="#FFFFFF"
+     d="M31,1v20H1V1H31 M32,0H0v22h32V0L32,0z"
+     id="path3" /><g
+     id="g5"><path
+       fill="#FFFFFF"
+       d="M22.552,6l-0.824,0.666c0.108,0.104,0.227,0.193,0.327,0.307c0.912,1.031,1.475,2.453,1.475,4.027   c0,1.578-0.562,2.998-1.475,4.031c-0.1,0.111-0.217,0.199-0.323,0.303L22.555,16c1.193-1.242,1.945-3.02,1.945-5   C24.5,9.02,23.746,7.243,22.552,6z"
+       id="path7" /><path
+       fill="#FFFFFF"
+       d="M20.881,7.352l-0.844,0.684c0.9,0.602,1.51,1.697,1.512,2.965c-0.002,1.267-0.61,2.363-1.508,2.966   l0.844,0.682C21.871,13.818,22.52,12.5,22.52,11C22.52,9.5,21.87,8.182,20.881,7.352z"
+       id="path9" /><path
+       fill="#FFFFFF"
+       d="M20.488,11.002c0-0.83-0.399-1.541-0.988-1.932V4l-4.001,4H9.5v6h6.001l3.999,4v-5.068   C20.089,12.541,20.488,11.833,20.488,11.002z"
+       id="path11" /></g><path
+     style="fill:url(#linearGradient4153);fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
+     d="m 6.2457627,2.7033898 20.4152543,16.4067792 -0.186441,0"
+     id="path4145"
+     inkscape:path-effect="#path-effect4147"
+     inkscape:original-d="M 6.2457627,2.7033898 C 26.661017,19.110169 26.661017,19.110169 26.661017,19.110169 l -0.186441,0"
+     inkscape:connector-curvature="0" /></svg>
\ No newline at end of file

From 8e7185e180e53cff54e4623de5c9d8c9f37a6cf3 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 19 Oct 2015 15:42:12 +0200
Subject: [PATCH 047/204] Specify position/repeat for button background

---
 src/widgets/EnrichedPlan.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index c818919e..e86dedf1 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -210,7 +210,7 @@
 
 /* hover style just for information */
 label:hover:before {
-  border: 1px solid #4778d9!important;
+  border: 1px solid #4778d9 !important;
 }
 
 /* hover style just for information */
@@ -223,6 +223,8 @@ label:hover:before {
     width: 24px;
     height: 24px;
     margin: 7px;
+    background-position: center;
+    background-repeat: no-repeat;
 }
 
 .Ldt-EnrichedPlan-EditControl-Edit {

From 56179c565d398a4f0d21355f01c82e0f7a8304c2 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 19 Oct 2015 15:50:18 +0200
Subject: [PATCH 048/204] Transmit deleteFromDirectory parameter

---
 src/js/model.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/js/model.js b/src/js/model.js
index 330d353c..558cd110 100644
--- a/src/js/model.js
+++ b/src/js/model.js
@@ -351,14 +351,14 @@ List.prototype.removeId = function(_id, _deleteFromDirectory) {
 
 List.prototype.removeElement = function(_el, _deleteFromDirectory) {
     var _deleteFromDirectory = _deleteFromDirectory || false;
-    this.removeId(_el.id);
+    this.removeId(_el.id, _deleteFromDirectory);
 };
 
 List.prototype.removeIds = function(_list, _deleteFromDirectory) {
     var _deleteFromDirectory = _deleteFromDirectory || false,
         _this = this;
     ns._(_list).forEach(function(_id) {
-        _this.removeId(_id);
+        _this.removeId(_id, _deleteFromDirectory);
     });
 };
 
@@ -366,7 +366,7 @@ List.prototype.removeElements = function(_list, _deleteFromDirectory) {
     var _deleteFromDirectory = _deleteFromDirectory || false,
         _this = this;
     ns._(_list).forEach(function(_el) {
-        _this.removeElement(_el);
+        _this.removeElement(_el, _deleteFromDirectory);
     });
 };
 

From f77e13c867c58ff64f8874cfb0aad833b2c9c0e5 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 19 Oct 2015 15:51:18 +0200
Subject: [PATCH 049/204] Specify 100% default width instead of fixed width

---
 src/js/widgets-container/defaults.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/widgets-container/defaults.js b/src/js/widgets-container/defaults.js
index 19995a67..3738d259 100644
--- a/src/js/widgets-container/defaults.js
+++ b/src/js/widgets-container/defaults.js
@@ -114,7 +114,7 @@ IriSP.widgetsRequirements = {
 };
 
 IriSP.guiDefaults = {
-    width : 640,
+    width : "100%",
     container : 'LdtPlayer',
     spacer_div_height : 0,
     widgets: []

From d156c7d1e3c76eb0b2c7a20aa7624842948594f9 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 20 Oct 2015 14:30:25 +0200
Subject: [PATCH 050/204] Whitespace/coding style fixes

---
 src/js/model.js | 2334 +++++++++++++++++++++++------------------------
 1 file changed, 1167 insertions(+), 1167 deletions(-)

diff --git a/src/js/model.js b/src/js/model.js
index 558cd110..4f6bf7f6 100644
--- a/src/js/model.js
+++ b/src/js/model.js
@@ -4,7 +4,7 @@
 //TODO: Separate Project-specific data from Source
 
 IriSP.Model = (function (ns) {
-    
+
     function pad(n, x, b) {
         b = b || 10;
         var s = (x).toString(b);
@@ -13,13 +13,13 @@ IriSP.Model = (function (ns) {
         }
         return s;
     }
-    
+
     function rand16(n) {
-        return pad(n, Math.floor(Math.random()*Math.pow(16,n)), 16);
+        return pad(n, Math.floor(Math.random() * Math.pow(16, n)), 16);
     }
-    
-    var uidbase = rand16(8) + "-" + rand16(4) + "-", uidincrement = Math.floor(Math.random()*0x10000);
-    
+
+    var uidbase = rand16(8) + "-" + rand16(4) + "-", uidincrement = Math.floor(Math.random() * 0x10000);
+
     var charsub = [
         '[aáàâä]',
         '[cç]',
@@ -28,382 +28,382 @@ IriSP.Model = (function (ns) {
         '[oóòôö]',
         '[uùûü]'
     ];
-    
+
     var removeChars = [
         String.fromCharCode(768), String.fromCharCode(769), String.fromCharCode(770), String.fromCharCode(771), String.fromCharCode(807),
         "｛", "｝", "（", "）", "［", "］", "【", "】", "、", "・", "‥", "。", "「", "」", "『", "』", "〜", "：", "！", "？", "　",
         ",", " ", ";", "(", ")", ".", "*", "+", "\\", "?", "|", "{", "}", "[", "]", "^", "#", "/"
     ];
-    
-var Model = {},
-    _SOURCE_STATUS_EMPTY = Model._SOURCE_STATUS_EMPTY = 0,
-    _SOURCE_STATUS_WAITING = Model._SOURCE_STATUS_WAITING = 1,
-    _SOURCE_STATUS_READY = Model._SOURCE_STATUS_READY = 2,
-    extendPrototype = Model.extendPrototype = function(toClass, fromClass) {
-        var fromP = fromClass.prototype,
-            toP = toClass.prototype;
-        for (var k in fromP) {
-            if (fromP.hasOwnProperty(k)) {
-                toP[k] = fromP[k];
+
+    var Model = {},
+        _SOURCE_STATUS_EMPTY = Model._SOURCE_STATUS_EMPTY = 0,
+        _SOURCE_STATUS_WAITING = Model._SOURCE_STATUS_WAITING = 1,
+        _SOURCE_STATUS_READY = Model._SOURCE_STATUS_READY = 2,
+        extendPrototype = Model.extendPrototype = function(toClass, fromClass) {
+            var fromP = fromClass.prototype,
+                toP = toClass.prototype;
+            for (var k in fromP) {
+                if (fromP.hasOwnProperty(k)) {
+                    toP[k] = fromP[k];
+                }
             }
+        },
+        getUID = Model.getUID = function() {
+            return uidbase + pad(4, (++uidincrement % 0x10000), 16) + "-" + rand16(4) + "-" + rand16(6) + rand16(6);
+        },
+        isLocalURL = Model.isLocalURL = function(url) {
+            var matches = url.match(/^(\w+:)\/\/([^/]+)/);
+            if (matches) {
+                return (matches[1] === document.location.protocol && matches[2] === document.location.host);
+            }
+            return true;
+        },
+        regexpFromTextOrArray = Model.regexpFromTextOrArray = function(_textOrArray, _testOnly, _iexact) {
+            var _testOnly = _testOnly || false,
+                _iexact = _iexact || false;
+            function escapeText(_text) {
+                return _text.replace(/([\\\*\+\?\|\{\[\}\]\(\)\^\$\.\#\/])/gm, '\\$1');
+            }
+            var _source =
+                    typeof _textOrArray === "string"
+                    ? escapeText(_textOrArray)
+                    : ns._(_textOrArray).map(escapeText).join("|"),
+                _flags = 'im';
+            if (!_testOnly) {
+                _source = '(' + _source + ')';
+                _flags += 'g';
+            }
+            if (_iexact) {
+                _source = '^' + _source + '$';
+            }
+            return new RegExp(_source, _flags);
+        },
+        fullTextRegexps = Model.fullTextRegexps = function(_text) {
+            var remsrc = "[\\" + removeChars.join("\\") + "]",
+                remrx = new RegExp(remsrc, "gm"),
+                txt = _text.toLowerCase().replace(remrx, ""),
+                res = [],
+                charsrx = ns._(charsub).map(function(c) {
+                    return new RegExp(c);
+                }),
+                src = "";
+            for (var j = 0; j < txt.length; j++) {
+                if (j) {
+                    src += remsrc + "*";
+                }
+                var l = txt[j];
+                ns._(charsub).each(function(v, k) {
+                    l = l.replace(charsrx[k], v);
+                });
+                src += l;
+            }
+            return "(" + src + ")";
+        },
+        isoToDate = Model.isoToDate = function(_str) {
+            // http://delete.me.uk/2005/03/iso8601.html
+            var regexp = "([0-9]{4})(-([0-9]{2})(-([0-9]{2})(T([0-9]{2}):([0-9]{2})(:([0-9]{2})(\.([0-9]+))?)?(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?";
+            var d = _str.match(new RegExp(regexp));
+
+            var offset = 0;
+            var date = new Date(d[1], 0, 1);
+
+            if (d[3]) { date.setMonth(d[3] - 1); }
+            if (d[5]) { date.setDate(d[5]); }
+            if (d[7]) { date.setHours(d[7]); }
+            if (d[8]) { date.setMinutes(d[8]); }
+            if (d[10]) { date.setSeconds(d[10]); }
+            if (d[12]) { date.setMilliseconds(Number("0." + d[12]) * 1000); }
+            if (d[14]) {
+                offset = (Number(d[16]) * 60) + Number(d[17]);
+                offset *= ((d[15] == '-') ? 1 : -1);
+            }
+
+            offset -= date.getTimezoneOffset();
+            time = (Number(date) + (offset * 60 * 1000));
+            var _res = new Date();
+            _res.setTime(Number(time));
+            return _res;
+        },
+        dateToIso = Model.dateToIso = function(_d) {
+            var d = _d ? new Date(_d) : new Date();
+            return d.getUTCFullYear() + '-'
+                + pad(2, d.getUTCMonth() + 1) + '-'
+                + pad(2, d.getUTCDate()) + 'T'
+                + pad(2, d.getUTCHours()) + ':'
+                + pad(2, d.getUTCMinutes()) + ':'
+                + pad(2, d.getUTCSeconds()) + 'Z'  ;
+        };
+
+    /*
+     * List is a class for a list of elements (e.g. annotations, medias, etc. that each have a distinct ID)
+     */
+    var List = Model.List = function(_directory) {
+        Array.call(this);
+        this.directory = _directory;
+        this.idIndex = [];
+        this.__events = {};
+        if (typeof _directory == "undefined") {
+            console.trace();
+            throw "Error : new List(directory): directory is undefined";
         }
-    },
-    getUID = Model.getUID = function() {
-        return uidbase + pad(4, (++uidincrement % 0x10000), 16) + "-" + rand16(4) + "-" + rand16(6) + rand16(6);
-    },
-    isLocalURL = Model.isLocalURL = function(url) {
-        var matches = url.match(/^(\w+:)\/\/([^/]+)/);
-        if (matches) {
-            return(matches[1] === document.location.protocol && matches[2] === document.location.host);
-        }
-        return true;
-    },
-    regexpFromTextOrArray = Model.regexpFromTextOrArray = function(_textOrArray, _testOnly, _iexact) {
-        var _testOnly = _testOnly || false,
-            _iexact = _iexact || false;
-        function escapeText(_text) {
-            return _text.replace(/([\\\*\+\?\|\{\[\}\]\(\)\^\$\.\#\/])/gm, '\\$1');
+        var _this =  this;
+        this.on("clear-search", function() {
+            _this.searching = false;
+            _this.regexp = undefined;
+            _this.forEach(function(_element) {
+                _element.found = undefined;
+            });
+            _this.trigger("search-cleared");
+        });
+    };
+
+    List.prototype = new Array();
+
+    List.prototype.hasId = function(_id) {
+        return ns._(this.idIndex).include(_id);
+    };
+
+    /* On recent browsers, forEach and map are defined and do what we want.
+     * Otherwise, we'll use the Underscore.js functions
+     */
+    if (typeof Array.prototype.forEach === "undefined") {
+        List.prototype.forEach = function(_callback) {
+            var _this = this;
+            ns._(this).forEach(function(_value, _key) {
+                _callback(_value, _key, _this);
+            });
+        };
+    };
+
+    if (typeof Array.prototype.map === "undefined") {
+        List.prototype.map = function(_callback) {
+            var _this = this;
+            return ns._(this).map(function(_value, _key) {
+                return _callback(_value, _key, _this);
+            });
+        };
+    };
+
+    List.prototype.pluck = function(_key) {
+        return this.map(function(_value) {
+            return _value[_key];
+        });
+    };
+
+    /* We override Array's filter function because it doesn't return an List
+     */
+    List.prototype.filter = function(_callback) {
+        var _this = this,
+            _res = new List(this.directory);
+        _res.addElements(ns._(this).filter(function(_value, _key) {
+            return _callback(_value, _key, _this);
+        }));
+        return _res;
+    };
+
+    List.prototype.slice = function(_start, _end) {
+        var _res = new List(this.directory);
+        _res.addElements(Array.prototype.slice.call(this, _start, _end));
+        return _res;
+    };
+
+    List.prototype.splice = function(_start, _end) {
+        var _res = new List(this.directory);
+        _res.addElements(Array.prototype.splice.call(this, _start, _end));
+        this.idIndex.splice(_start, _end);
+        return _res;
+    };
+
+    /* Array has a sort function, but it's not as interesting as Underscore.js's sortBy
+     * and won't return a new List
+     */
+    List.prototype.sortBy = function(_callback) {
+        var _this = this,
+            _res = new List(this.directory);
+        _res.addElements(ns._(this).sortBy(function(_value, _key) {
+            return _callback(_value, _key, _this);
+        }));
+        return _res;
+    };
+
+    /* Title and Description are basic information for (almost) all element types,
+     * here we can search by these criteria
+     */
+    List.prototype.searchByTitle = function(_text, _iexact) {
+        var _iexact = _iexact || false,
+            _rgxp = regexpFromTextOrArray(_text, true, _iexact);
+        return this.filter(function(_element) {
+            return _rgxp.test(_element.title);
+        });
+    };
+
+    List.prototype.searchByDescription = function(_text, _iexact) {
+        var _iexact = _iexact || false,
+            _rgxp = regexpFromTextOrArray(_text, true, _iexact);
+        return this.filter(function(_element) {
+            return _rgxp.test(_element.description);
+        });
+    };
+
+    List.prototype.searchByTextFields = function(_text, _iexact) {
+        var _iexact = _iexact || false,
+            _rgxp =  regexpFromTextOrArray(_text, true, _iexact);
+        return this.filter(function(_element) {
+            var keywords = (_element.keywords || _element.getTagTexts() || []).join(", ");
+            return _rgxp.test(_element.description) || _rgxp.test(_element.title) || _rgxp.test(keywords);
+        });
+    };
+
+    List.prototype.search = function(_text) {
+        if (!_text) {
+            this.trigger("clear-search");
+            return this;
         }
-        var _source = 
-            typeof _textOrArray === "string"
-            ? escapeText(_textOrArray)
-            : ns._(_textOrArray).map(escapeText).join("|"),
-            _flags = 'im';
-        if (!_testOnly) {
-            _source = '(' + _source + ')';
-            _flags += 'g';
+        this.searching = true;
+        this.trigger("search", _text);
+        var rxsource = fullTextRegexps(_text),
+            rgxp = new RegExp(rxsource,"im");
+        this.regexp = new RegExp(rxsource,"gim");
+        var res = this.filter(function(_element, _k) {
+            var titlematch = rgxp.test(_element.title),
+                descmatch = rgxp.test(_element.description),
+                _isfound = !!(titlematch || descmatch);
+            _element.found = _isfound;
+            _element.trigger(_isfound ? "found" : "not-found");
+            return _isfound;
+        });
+        this.trigger(res.length ? "found" : "not-found", res);
+        return res;
+    };
+
+    List.prototype.searchByTags = function(_text) {
+        if (!_text) {
+            this.trigger("clear-search");
+            return this;
         }
-        if (_iexact) {
-            _source = '^' + _source + '$';
+        this.searching = true;
+        this.trigger("search", _text);
+        var rxsource = fullTextRegexps(_text),
+            rgxp = new RegExp(rxsource,"im");
+        this.regexp = new RegExp(rxsource,"gim");
+        var res = this.filter(function(_element, _k) {
+            var _isfound = rgxp.test(_element.getTagTexts());
+            _element.found = _isfound;
+            _element.trigger(_isfound ? "found" : "not-found");
+            return _isfound;
+        });
+        this.trigger(res.length ? "found" : "not-found", res);
+        return res;
+    };
+
+    List.prototype.getTitles = function() {
+        return this.map(function(_el) {
+            return _el.title;
+        });
+    };
+
+    List.prototype.addId = function(_id) {
+        var _el = this.directory.getElement(_id);
+        if (!this.hasId(_id) && typeof _el !== "undefined") {
+            this.idIndex.push(_id);
+            Array.prototype.push.call(this, _el);
         }
-        return new RegExp( _source, _flags);
-    },
-    fullTextRegexps = Model.fullTextRegexps = function(_text) {
-        var remsrc = "[\\" + removeChars.join("\\") + "]",
-            remrx = new RegExp(remsrc,"gm"),
-            txt = _text.toLowerCase().replace(remrx,""),
-            res = [],
-            charsrx = ns._(charsub).map(function(c) {
-                return new RegExp(c);
-            }),
-            src = "";
-        for (var j = 0; j < txt.length; j++) {
-            if (j) {
-                src += remsrc + "*";
-            }
-            var l = txt[j];
-            ns._(charsub).each(function(v, k) {
-                l = l.replace(charsrx[k], v);
-            });
-            src += l;
+    };
+
+    List.prototype.push = function(_el) {
+        if (typeof _el === "undefined") {
+            return;
         }
-        return "(" + src + ")";
-    },
-    isoToDate = Model.isoToDate = function(_str) {
-        // http://delete.me.uk/2005/03/iso8601.html
-        var regexp = "([0-9]{4})(-([0-9]{2})(-([0-9]{2})(T([0-9]{2}):([0-9]{2})(:([0-9]{2})(\.([0-9]+))?)?(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?";
-        var d = _str.match(new RegExp(regexp));
-    
-        var offset = 0;
-        var date = new Date(d[1], 0, 1);
-    
-        if (d[3]) { date.setMonth(d[3] - 1); }
-        if (d[5]) { date.setDate(d[5]); }
-        if (d[7]) { date.setHours(d[7]); }
-        if (d[8]) { date.setMinutes(d[8]); }
-        if (d[10]) { date.setSeconds(d[10]); }
-        if (d[12]) { date.setMilliseconds(Number("0." + d[12]) * 1000); }
-        if (d[14]) {
-            offset = (Number(d[16]) * 60) + Number(d[17]);
-            offset *= ((d[15] == '-') ? 1 : -1);
+        var _index = (ns._(this.idIndex).indexOf(_el.id));
+        if (_index === -1) {
+            this.idIndex.push(_el.id);
+            Array.prototype.push.call(this, _el);
+        } else {
+            this[_index] = _el;
         }
-    
-        offset -= date.getTimezoneOffset();
-        time = (Number(date) + (offset * 60 * 1000));
-        var _res = new Date();
-        _res.setTime(Number(time));
-        return _res;
-    },
-    dateToIso = Model.dateToIso = function(_d) {
-        var d = _d ? new Date(_d) : new Date();
-        return d.getUTCFullYear()+'-'  
-            + pad(2, d.getUTCMonth()+1)+'-'  
-            + pad(2, d.getUTCDate())+'T'  
-            + pad(2, d.getUTCHours())+':'  
-            + pad(2, d.getUTCMinutes())+':'  
-            + pad(2, d.getUTCSeconds())+'Z'  ;
-    };
-
-/*
- * List is a class for a list of elements (e.g. annotations, medias, etc. that each have a distinct ID)
- */
-var List = Model.List = function(_directory) {
-    Array.call(this);
-    this.directory = _directory;
-    this.idIndex = [];
-    this.__events = {};
-    if (typeof _directory == "undefined") {
-        console.trace();
-        throw "Error : new List(directory): directory is undefined";
-    }
-    var _this =  this;
-    this.on("clear-search", function() {
-        _this.searching = false;
-        _this.regexp = undefined;
-        _this.forEach(function(_element) {
-            _element.found = undefined;
+    };
+
+    List.prototype.addIds = function(_array) {
+        var _l = _array.length,
+            _this = this;
+        ns._(_array).forEach(function(_id) {
+            _this.addId(_id);
         });
-        _this.trigger("search-cleared");
-    });
-};
+    };
 
-List.prototype = new Array();
+    List.prototype.addElements = function(_array) {
+        var _this = this;
+        ns._(_array).forEach(function(_el) {
+            _this.push(_el);
+        });
+    };
+
+    List.prototype.removeId = function(_id, _deleteFromDirectory) {
+        var _deleteFromDirectory = _deleteFromDirectory || false,
+            _index = (ns._(this.idIndex).indexOf(_id));
+        if (_index !== -1) {
+            this.splice(_index, 1);
+        }
+        if (_deleteFromDirectory) {
+            delete this.directory.elements[_id];
+        }
+    };
 
-List.prototype.hasId = function(_id) {
-    return ns._(this.idIndex).include(_id);
-};
+    List.prototype.removeElement = function(_el, _deleteFromDirectory) {
+        var _deleteFromDirectory = _deleteFromDirectory || false;
+        this.removeId(_el.id, _deleteFromDirectory);
+    };
 
-/* On recent browsers, forEach and map are defined and do what we want.
- * Otherwise, we'll use the Underscore.js functions
- */
-if (typeof Array.prototype.forEach === "undefined") {
-    List.prototype.forEach = function(_callback) {
-        var _this = this;
-        ns._(this).forEach(function(_value, _key) {
-            _callback(_value, _key, _this);
+    List.prototype.removeIds = function(_list, _deleteFromDirectory) {
+        var _deleteFromDirectory = _deleteFromDirectory || false,
+            _this = this;
+        ns._(_list).forEach(function(_id) {
+            _this.removeId(_id, _deleteFromDirectory);
         });
     };
-};
 
-if (typeof Array.prototype.map === "undefined") {
-    List.prototype.map = function(_callback) {
-        var _this = this;
-        return ns._(this).map(function(_value, _key) {
-            return _callback(_value, _key, _this);
+    List.prototype.removeElements = function(_list, _deleteFromDirectory) {
+        var _deleteFromDirectory = _deleteFromDirectory || false,
+            _this = this;
+        ns._(_list).forEach(function(_el) {
+            _this.removeElement(_el, _deleteFromDirectory);
         });
     };
-};
-
-List.prototype.pluck = function(_key) {
-    return this.map(function(_value) {
-        return _value[_key];
-    });
-};
-
-/* We override Array's filter function because it doesn't return an List
- */
-List.prototype.filter = function(_callback) {
-    var _this = this,
-        _res = new List(this.directory);
-    _res.addElements(ns._(this).filter(function(_value, _key) {
-        return _callback(_value, _key, _this);
-    }));
-    return _res;
-};
-
-List.prototype.slice = function(_start, _end) {
-    var _res = new List(this.directory);
-    _res.addElements(Array.prototype.slice.call(this, _start, _end));
-    return _res;
-};
-
-List.prototype.splice = function(_start, _end) {
-    var _res = new List(this.directory);
-    _res.addElements(Array.prototype.splice.call(this, _start, _end));
-    this.idIndex.splice(_start, _end);
-    return _res;
-};
-
-/* Array has a sort function, but it's not as interesting as Underscore.js's sortBy
- * and won't return a new List
- */
-List.prototype.sortBy = function(_callback) {
-    var _this = this,
-        _res = new List(this.directory);
-    _res.addElements(ns._(this).sortBy(function(_value, _key) {
-        return _callback(_value, _key, _this);
-    }));
-    return _res;
-};
-
-/* Title and Description are basic information for (almost) all element types,
- * here we can search by these criteria
- */
-List.prototype.searchByTitle = function(_text, _iexact) {
-    var _iexact = _iexact || false,
-        _rgxp = regexpFromTextOrArray(_text, true, _iexact);
-    return this.filter(function(_element) {
-        return _rgxp.test(_element.title);
-    });
-};
-
-List.prototype.searchByDescription = function(_text, _iexact) {
-    var _iexact = _iexact || false,
-        _rgxp = regexpFromTextOrArray(_text, true, _iexact);
-    return this.filter(function(_element) {
-        return _rgxp.test(_element.description);
-    });
-};
-
-List.prototype.searchByTextFields = function(_text, _iexact) {
-    var _iexact = _iexact || false,
-        _rgxp =  regexpFromTextOrArray(_text, true, _iexact);
-    return this.filter(function(_element) {
-        var keywords = (_element.keywords || _element.getTagTexts() || []).join(", ");
-        return _rgxp.test(_element.description) || _rgxp.test(_element.title) || _rgxp.test(keywords);
-    });
-};
-
-List.prototype.search = function(_text) {
-    if (!_text) {
-        this.trigger("clear-search");
-        return this;
-    }
-    this.searching = true;
-    this.trigger("search", _text);
-    var rxsource = fullTextRegexps(_text),
-        rgxp = new RegExp(rxsource,"im");
-    this.regexp = new RegExp(rxsource,"gim");
-    var res = this.filter(function(_element, _k) {
-        var titlematch = rgxp.test(_element.title),
-            descmatch = rgxp.test(_element.description),
-            _isfound = !!(titlematch || descmatch);
-        _element.found = _isfound;
-        _element.trigger(_isfound ? "found" : "not-found");
-        return _isfound;
-    });
-    this.trigger(res.length ? "found" : "not-found",res);
-    return res;
-};
-
-List.prototype.searchByTags = function(_text) {
-    if (!_text) {
-        this.trigger("clear-search");
-        return this;
-    }
-    this.searching = true;
-    this.trigger("search", _text);
-    var rxsource = fullTextRegexps(_text),
-        rgxp = new RegExp(rxsource,"im");
-    this.regexp = new RegExp(rxsource,"gim");
-    var res = this.filter(function(_element, _k) {
-        var _isfound = rgxp.test(_element.getTagTexts());
-        _element.found = _isfound;
-        _element.trigger(_isfound ? "found" : "not-found");
-        return _isfound;
-    });
-    this.trigger(res.length ? "found" : "not-found",res);
-    return res;
-};
-
-List.prototype.getTitles = function() {
-    return this.map(function(_el) {
-        return _el.title;
-    });
-};
-
-List.prototype.addId = function(_id) {
-    var _el = this.directory.getElement(_id);
-    if (!this.hasId(_id) && typeof _el !== "undefined") {
-        this.idIndex.push(_id);
-        Array.prototype.push.call(this, _el);
-    }
-};
 
-List.prototype.push = function(_el) {
-    if (typeof _el === "undefined") {
-        return;
-    }
-    var _index = (ns._(this.idIndex).indexOf(_el.id));
-    if (_index === -1) {
-        this.idIndex.push(_el.id);
-        Array.prototype.push.call(this, _el);
-    } else {
-        this[_index] = _el;
-    }
-};
-
-List.prototype.addIds = function(_array) {
-    var _l = _array.length,
-        _this = this;
-    ns._(_array).forEach(function(_id) {
-        _this.addId(_id);
-    });
-};
-
-List.prototype.addElements = function(_array) {
-    var _this = this;
-    ns._(_array).forEach(function(_el) {
-        _this.push(_el);
-    });
-};
-
-List.prototype.removeId = function(_id, _deleteFromDirectory) {
-    var _deleteFromDirectory = _deleteFromDirectory || false,
-        _index = (ns._(this.idIndex).indexOf(_id));
-    if (_index !== -1) {
-        this.splice(_index,1);
-    }
-    if (_deleteFromDirectory) {
-        delete this.directory.elements[_id];
-    }
-};
-
-List.prototype.removeElement = function(_el, _deleteFromDirectory) {
-    var _deleteFromDirectory = _deleteFromDirectory || false;
-    this.removeId(_el.id, _deleteFromDirectory);
-};
-
-List.prototype.removeIds = function(_list, _deleteFromDirectory) {
-    var _deleteFromDirectory = _deleteFromDirectory || false,
-        _this = this;
-    ns._(_list).forEach(function(_id) {
-        _this.removeId(_id, _deleteFromDirectory);
-    });
-};
-
-List.prototype.removeElements = function(_list, _deleteFromDirectory) {
-    var _deleteFromDirectory = _deleteFromDirectory || false,
-        _this = this;
-    ns._(_list).forEach(function(_el) {
-        _this.removeElement(_el, _deleteFromDirectory);
-    });
-};
-
-List.prototype.on = function(_event, _callback) {
-    if (typeof this.__events[_event] === "undefined") {
-        this.__events[_event] = [];
-    }
-    this.__events[_event].push(_callback);
-};
+    List.prototype.on = function(_event, _callback) {
+        if (typeof this.__events[_event] === "undefined") {
+            this.__events[_event] = [];
+        }
+        this.__events[_event].push(_callback);
+    };
 
-List.prototype.off = function(_event, _callback) {
-    if (typeof this.__events[_event] !== "undefined") {
-        this.__events[_event] = ns._(this.__events[_event]).reject(function(_fn) {
-            return _fn === _callback;
+    List.prototype.off = function(_event, _callback) {
+        if (typeof this.__events[_event] !== "undefined") {
+            this.__events[_event] = ns._(this.__events[_event]).reject(function(_fn) {
+                return _fn === _callback;
+            });
+        }
+    };
+
+    List.prototype.trigger = function(_event, _data) {
+        var _list = this;
+        ns._(this.__events[_event]).each(function(_callback) {
+            _callback.call(_list, _data);
         });
-    }
-};
-
-List.prototype.trigger = function(_event, _data) {
-    var _list = this;
-    ns._(this.__events[_event]).each(function(_callback) {
-        _callback.call(_list, _data);
-    });
-};
-
-/* A simple time management object, that helps converting millisecs to seconds and strings,
- * without the clumsiness of the original Date object.
- */
-
-var Time = Model.Time = function(_milliseconds) {
-    this.milliseconds = 0;
-    this.setMilliseconds(_milliseconds);
-};
-
-Time.prototype.setMilliseconds = function(_milliseconds) {
-    var _ante = this.milliseconds;
-    switch(typeof _milliseconds) {
+    };
+
+    /* A simple time management object, that helps converting millisecs to seconds and strings,
+     * without the clumsiness of the original Date object.
+     */
+
+    var Time = Model.Time = function(_milliseconds) {
+        this.milliseconds = 0;
+        this.setMilliseconds(_milliseconds);
+    };
+
+    Time.prototype.setMilliseconds = function(_milliseconds) {
+        var _ante = this.milliseconds;
+        switch (typeof _milliseconds) {
         case "string":
             this.milliseconds = parseInt(_milliseconds);
             break;
@@ -415,858 +415,858 @@ Time.prototype.setMilliseconds = function(_milliseconds) {
             break;
         default:
             this.milliseconds = 0;
-    }
-    if (this.milliseconds === NaN) {
-        this.milliseconds = _ante;
-    }
-};
-
-Time.prototype.setSeconds = function(_seconds) {
-    this.milliseconds = 1000 * _seconds;
-};
-
-Time.prototype.getSeconds = function() {
-    return this.milliseconds / 1000;
-};
-
-Time.prototype.getHMS = function() {
-    var _totalSeconds = Math.abs(Math.floor(this.getSeconds()));
-    return {
-        hours : Math.floor(_totalSeconds / 3600),
-        minutes : (Math.floor(_totalSeconds / 60) % 60),
-        seconds : _totalSeconds % 60,
-        milliseconds: this.milliseconds % 1000
-    };
-};
-
-Time.prototype.add = function(_milliseconds) {
-    this.milliseconds += new Time(_milliseconds).milliseconds;
-};
-
-Time.prototype.valueOf = function() {
-    return this.milliseconds;
-};
-
-Time.prototype.toString = function(showCs) {
-    var _hms = this.getHMS(),
-        _res = '';
-    if (_hms.hours) {
-        _res += _hms.hours + ':';
-    }
-    _res += pad(2, _hms.minutes) + ':' + pad(2, _hms.seconds);
-    if (showCs) {
-        _res += "." + Math.floor(_hms.milliseconds / 100);
-    }
-    return _res;
-};
-
-/* Reference handles references between elements
- */
-
-var Reference = Model.Reference = function(_source, _idRef) {
-    this.source = _source;
-    this.id = _idRef;
-    if (typeof _idRef === "object") {
-        this.isList = true;
-    } else {
-        this.isList = false;
-    }
-    this.refresh();
-};
-
-Reference.prototype.refresh = function() {
-    if (this.isList) {
-        this.contents = new List(this.source.directory);
-        this.contents.addIds(this.id);
-    } else {
-        this.contents = this.source.getElement(this.id);
-    }
-    
-};
+        }
+        if (this.milliseconds === NaN) {
+            this.milliseconds = _ante;
+        }
+    };
 
-Reference.prototype.getContents = function() {
-    if (typeof this.contents === "undefined" || (this.isList && this.contents.length != this.id.length)) {
+    Time.prototype.setSeconds = function(_seconds) {
+        this.milliseconds = 1000 * _seconds;
+    };
+
+    Time.prototype.getSeconds = function() {
+        return this.milliseconds / 1000;
+    };
+
+    Time.prototype.getHMS = function() {
+        var _totalSeconds = Math.abs(Math.floor(this.getSeconds()));
+        return {
+            hours : Math.floor(_totalSeconds / 3600),
+            minutes : (Math.floor(_totalSeconds / 60) % 60),
+            seconds : _totalSeconds % 60,
+            milliseconds: this.milliseconds % 1000
+        };
+    };
+
+    Time.prototype.add = function(_milliseconds) {
+        this.milliseconds += new Time(_milliseconds).milliseconds;
+    };
+
+    Time.prototype.valueOf = function() {
+        return this.milliseconds;
+    };
+
+    Time.prototype.toString = function(showCs) {
+        var _hms = this.getHMS(),
+            _res = '';
+        if (_hms.hours) {
+            _res += _hms.hours + ':';
+        }
+        _res += pad(2, _hms.minutes) + ':' + pad(2, _hms.seconds);
+        if (showCs) {
+            _res += "." + Math.floor(_hms.milliseconds / 100);
+        }
+        return _res;
+    };
+
+    /* Reference handles references between elements
+     */
+
+    var Reference = Model.Reference = function(_source, _idRef) {
+        this.source = _source;
+        this.id = _idRef;
+        if (typeof _idRef === "object") {
+            this.isList = true;
+        } else {
+            this.isList = false;
+        }
         this.refresh();
-    }
-    return this.contents;
-};
-
-Reference.prototype.isOrHasId = function(_idRef) {
-    if (this.isList) {
-        return (ns._(this.id).indexOf(_idRef) !== -1);
-    } else {
-        return (this.id == _idRef);
-    }
-};
+    };
 
-/* */
+    Reference.prototype.refresh = function() {
+        if (this.isList) {
+            this.contents = new List(this.source.directory);
+            this.contents.addIds(this.id);
+        } else {
+            this.contents = this.source.getElement(this.id);
+        }
 
-var BaseElement = Model.Element = function(_id, _source) {
-    this.elementType = 'element';
-    this.title = "";
-    this.description = "";
-    this.__events = {};
-    if (typeof _source === "undefined") {
-        return;
-    }
-    if (typeof _id === "undefined" || !_id) {
-        _id = getUID();
-    }
-    this.id = _id;
-    this.source = _source;
-    if (_source !== this) {
-        this.source.directory.addElement(this);
-    }
-};
+    };
+
+    Reference.prototype.getContents = function() {
+        if (typeof this.contents === "undefined" || (this.isList && this.contents.length != this.id.length)) {
+            this.refresh();
+        }
+        return this.contents;
+    };
 
-BaseElement.prototype.toString = function() {
-    return this.elementType + (this.elementType !== 'element' ? ', id=' + this.id + ', title="' + this.title + '"' : '');
-};
+    Reference.prototype.isOrHasId = function(_idRef) {
+        if (this.isList) {
+            return (ns._(this.id).indexOf(_idRef) !== -1);
+        } else {
+            return (this.id == _idRef);
+        }
+    };
 
-BaseElement.prototype.setReference = function(_elementType, _idRef) {
-    this[_elementType] = new Reference(this.source, _idRef);
-};
+    /* */
 
-BaseElement.prototype.getReference = function(_elementType) {
-    if (typeof this[_elementType] !== "undefined") {
-        return this[_elementType].getContents();
-    }
-};
-
-BaseElement.prototype.getRelated = function(_elementType, _global) {
-    _global = (typeof _global !== "undefined" && _global);
-    var _this = this;
-    return this.source.getList(_elementType, _global).filter(function(_el) {
-        var _ref = _el[_this.elementType];
-        return _ref && _ref.isOrHasId(_this.id);
-    });
-};
-
-BaseElement.prototype.on = function(_event, _callback) {
-    if (typeof this.__events[_event] === "undefined") {
-        this.__events[_event] = [];
-    }
-    this.__events[_event].push(_callback);
-};
+    var BaseElement = Model.Element = function(_id, _source) {
+        this.elementType = 'element';
+        this.title = "";
+        this.description = "";
+        this.__events = {};
+        if (typeof _source === "undefined") {
+            return;
+        }
+        if (typeof _id === "undefined" || !_id) {
+            _id = getUID();
+        }
+        this.id = _id;
+        this.source = _source;
+        if (_source !== this) {
+            this.source.directory.addElement(this);
+        }
+    };
+
+    BaseElement.prototype.toString = function() {
+        return this.elementType + (this.elementType !== 'element' ? ', id=' + this.id + ', title="' + this.title + '"' : '');
+    };
+
+    BaseElement.prototype.setReference = function(_elementType, _idRef) {
+        this[_elementType] = new Reference(this.source, _idRef);
+    };
+
+    BaseElement.prototype.getReference = function(_elementType) {
+        if (typeof this[_elementType] !== "undefined") {
+            return this[_elementType].getContents();
+        }
+    };
 
-BaseElement.prototype.off = function(_event, _callback) {
-    if (typeof this.__events[_event] !== "undefined") {
-        this.__events[_event] = ns._(this.__events[_event]).reject(function(_fn) {
-            return _fn === _callback;
+    BaseElement.prototype.getRelated = function(_elementType, _global) {
+        _global = (typeof _global !== "undefined" && _global);
+        var _this = this;
+        return this.source.getList(_elementType, _global).filter(function(_el) {
+            var _ref = _el[_this.elementType];
+            return _ref && _ref.isOrHasId(_this.id);
         });
-    }
-};
+    };
 
-BaseElement.prototype.trigger = function(_event, _data) {
-    var _element = this;
-    ns._(this.__events[_event]).each(function(_callback) {
-        _callback.call(_element, _data);
-    });
-};
+    BaseElement.prototype.on = function(_event, _callback) {
+        if (typeof this.__events[_event] === "undefined") {
+            this.__events[_event] = [];
+        }
+        this.__events[_event].push(_callback);
+    };
 
-/* */
+    BaseElement.prototype.off = function(_event, _callback) {
+        if (typeof this.__events[_event] !== "undefined") {
+            this.__events[_event] = ns._(this.__events[_event]).reject(function(_fn) {
+                return _fn === _callback;
+            });
+        }
+    };
 
-var Playable = Model.Playable = function(_id, _source) {
-    BaseElement.call(this, _id, _source);
-    if (typeof _source === "undefined") {
-        return;
-    }
-    this.elementType = 'playable';
-    this.currentTime = new Time();
-    this.volume = .5;
-    this.paused = true;
-    this.muted = false;
-    this.timeRange = false;
-    this.loadedMetadata = false;
-    var _this = this;
-    this.on("play", function() {
-        _this.paused = false;
-    });
-    this.on("pause", function() {
-        _this.paused = true;
-    });
-    this.on("timeupdate", function(_time) {
-        _this.currentTime = _time;
-        _this.getAnnotations().filter(function(_a) {
-            return (_a.end <= _time || _a.begin > _time) && _a.playing;
-        }).forEach(function(_a) {
-            _a.playing = false;
-            _a.trigger("leave");
-            _this.trigger("leave-annotation",_a);
+    BaseElement.prototype.trigger = function(_event, _data) {
+        var _element = this;
+        ns._(this.__events[_event]).each(function(_callback) {
+            _callback.call(_element, _data);
         });
-        _this.getAnnotations().filter(function(_a) {
-            return _a.begin <= _time && _a.end > _time && !_a.playing;
-        }).forEach(function(_a) {
-            _a.playing = true;
-            _a.trigger("enter");
-            _this.trigger("enter-annotation",_a);
+    };
+
+    /* */
+
+    var Playable = Model.Playable = function(_id, _source) {
+        BaseElement.call(this, _id, _source);
+        if (typeof _source === "undefined") {
+            return;
+        }
+        this.elementType = 'playable';
+        this.currentTime = new Time();
+        this.volume = .5;
+        this.paused = true;
+        this.muted = false;
+        this.timeRange = false;
+        this.loadedMetadata = false;
+        var _this = this;
+        this.on("play", function() {
+            _this.paused = false;
         });
-        
-        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("pause", function() {
+            _this.paused = true;
+        });
+        this.on("timeupdate", function(_time) {
+            _this.currentTime = _time;
+            _this.getAnnotations().filter(function(_a) {
+                return (_a.end <= _time || _a.begin > _time) && _a.playing;
+            }).forEach(function(_a) {
+                _a.playing = false;
+                _a.trigger("leave");
+                _this.trigger("leave-annotation", _a);
+            });
+            _this.getAnnotations().filter(function(_a) {
+                return _a.begin <= _time && _a.end > _time && !_a.playing;
+            }).forEach(function(_a) {
+                _a.playing = true;
+                _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;
+        });
+    };
+
+    extendPrototype(Playable, BaseElement);
+
+    Playable.prototype.getCurrentTime = function() {
+        return this.currentTime;
+    };
+
+    Playable.prototype.getVolume = function() {
+        return this.volume;
+    };
+
+    Playable.prototype.getPaused = function() {
+        return this.paused;
+    };
+
+    Playable.prototype.getMuted = function() {
+        return this.muted;
+    };
+
+    Playable.prototype.getTimeRange = function() {
+        return this.timeRange;
+    };
+
+    Playable.prototype.setCurrentTime = function(_time) {
+        this.trigger("setcurrenttime", _time);
+    };
+
+    Playable.prototype.setVolume = function(_vol) {
+        this.trigger("setvolume", _vol);
+    };
+
+    Playable.prototype.setMuted = function(_muted) {
+        this.trigger("setmuted", _muted);
+    };
+
+    Playable.prototype.setTimeRange = function(_timeBegin, _timeEnd) {
+        if ((_timeBegin < _timeEnd) && (_timeBegin >= 0) && (_timeEnd > 0)) {
+            return this.trigger("settimerange", [_timeBegin, _timeEnd]);
         }
-        
-    });
-    this.on("loadedmetadata", function() {
-        _this.loadedMetadata = true;
-    });
-};
-
-extendPrototype(Playable, BaseElement);
-
-Playable.prototype.getCurrentTime = function() { 
-    return this.currentTime;
-};
-
-Playable.prototype.getVolume = function() {
-    return this.volume;
-};
-
-Playable.prototype.getPaused = function() {
-    return this.paused;
-};
-
-Playable.prototype.getMuted = function() {
-    return this.muted;
-};
-
-Playable.prototype.getTimeRange = function() {
-    return this.timeRange;
-}
-
-Playable.prototype.setCurrentTime = function(_time) {
-    this.trigger("setcurrenttime",_time);
-};
-
-Playable.prototype.setVolume = function(_vol) {
-    this.trigger("setvolume",_vol);
-};
-
-Playable.prototype.setMuted = function(_muted) {
-    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");
-};
-
-Playable.prototype.pause = function() {
-    this.trigger("setpause");
-};
-
-Playable.prototype.show = function() {};
-
-Playable.prototype.hide = function() {};
-
-/* */
-
-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);
-/* */
-
-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 */
-    
-Media.prototype.setDuration = function(_durationMs) {
-    this.duration.setMilliseconds(_durationMs);
-};
-
-Media.prototype.getAnnotations = function() {
-    return this.getRelated("annotation");
-};
-
-Media.prototype.getAnnotationsByTypeTitle = function(_title) {
-    var _annTypes = this.source.getAnnotationTypes().searchByTitle(_title).pluck("id");
-    if (_annTypes.length) {
-        return this.getAnnotations().filter(function(_annotation) {
-            return ns._(_annTypes).indexOf(_annotation.getAnnotationType().id) !== -1;
+    };
+
+    Playable.prototype.resetTimeRange = function() {
+        return this.trigger("resettimerange");
+    };
+
+    Playable.prototype.play = function() {
+        this.trigger("setplay");
+    };
+
+    Playable.prototype.pause = function() {
+        this.trigger("setpause");
+    };
+
+    Playable.prototype.show = function() {};
+
+    Playable.prototype.hide = function() {};
+
+    /* */
+
+    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);
+    /* */
+
+    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 */
+
+    Media.prototype.setDuration = function(_durationMs) {
+        this.duration.setMilliseconds(_durationMs);
+    };
+
+    Media.prototype.getAnnotations = function() {
+        return this.getRelated("annotation");
+    };
+
+    Media.prototype.getAnnotationsByTypeTitle = function(_title) {
+        var _annTypes = this.source.getAnnotationTypes().searchByTitle(_title).pluck("id");
+        if (_annTypes.length) {
+            return this.getAnnotations().filter(function(_annotation) {
+                return ns._(_annTypes).indexOf(_annotation.getAnnotationType().id) !== -1;
+            });
+        } else {
+            return new List(this.source.directory);
+        }
+    };
+
+    /* */
+
+    var Tag = Model.Tag = function(_id, _source) {
+        BaseElement.call(this, _id, _source);
+        this.elementType = 'tag';
+    };
+
+    extendPrototype(Tag, BaseElement);
+
+    Tag.prototype.getAnnotations = function() {
+        return this.getRelated("annotation");
+    };
+
+    /* */
+    var AnnotationType = Model.AnnotationType = function(_id, _source) {
+        BaseElement.call(this, _id, _source);
+        this.elementType = 'annotationType';
+    };
+
+    extendPrototype(AnnotationType, BaseElement);
+
+    AnnotationType.prototype.getAnnotations = function() {
+        return this.getRelated("annotation");
+    };
+
+    /* Annotation
+     * */
+
+    var Annotation = Model.Annotation = function(_id, _source) {
+        BaseElement.call(this, _id, _source);
+        this.elementType = 'annotation';
+        this.begin = new Time();
+        this.end = new Time();
+        this.tag = new Reference(_source, []);
+        this.playing = false;
+        var _this = this;
+        this.on("click", function() {
+            _this.getMedia().setCurrentTime(_this.begin);
         });
-    } else {
-        return new List(this.source.directory);
-    }
-};
-
-/* */
-
-var Tag = Model.Tag = function(_id, _source) {
-    BaseElement.call(this, _id, _source);
-    this.elementType = 'tag';
-};
-
-extendPrototype(Tag, BaseElement);
-
-Tag.prototype.getAnnotations = function() {
-    return this.getRelated("annotation");
-};
-
-/* */
-var AnnotationType = Model.AnnotationType = function(_id, _source) {
-    BaseElement.call(this, _id, _source);
-    this.elementType = 'annotationType';
-};
-
-extendPrototype(AnnotationType, BaseElement);
-
-AnnotationType.prototype.getAnnotations = function() {
-    return this.getRelated("annotation");
-};
-
-/* Annotation
- * */
-
-var Annotation = Model.Annotation = function(_id, _source) {
-    BaseElement.call(this, _id, _source);
-    this.elementType = 'annotation';
-    this.begin = new Time();
-    this.end = new Time();
-    this.tag = new Reference(_source, []);
-    this.playing = false;
-    var _this = this;
-    this.on("click", function() {
-        _this.getMedia().setCurrentTime(_this.begin);
-    });
-};
-
-extendPrototype(Annotation, BaseElement);
-
-/* Set begin and end in one go, to avoid undesired side-effects in
- * setBegin/setEnd interaction */
-Annotation.prototype.setBeginEnd = function(_beginMs, _endMs) {
-    _beginMs = Math.max(0,_beginMs);
-    _endMs = Math.max(0,_endMs);
-    if (_endMs < _beginMs)
-        _endMs = _beginMs;
-    this.begin.setMilliseconds(_beginMs);
-    this.end.setMilliseconds(_endMs);
-    this.trigger("change-begin");
-    this.trigger("change-end");
-};
-
-Annotation.prototype.setBegin = function(_beginMs) {
-    this.begin.setMilliseconds(Math.max(0,_beginMs));
-    this.trigger("change-begin");
-    if (this.end < this.begin) {
-        this.setEnd(this.begin);
-    }
-};
+    };
 
-Annotation.prototype.setEnd = function(_endMs) {
-    this.end.setMilliseconds(Math.min(_endMs, this.getMedia().duration.milliseconds));
-    this.trigger("change-end");
-    if (this.end < this.begin) {
-        this.setBegin(this.end);
-    }
-};
-
-Annotation.prototype.setDuration = function(_durMs) {
-    this.setEnd(_durMs + this.begin.milliseconds);
-};
-
-Annotation.prototype.setMedia = function(_idRef) {
-    this.setReference("media", _idRef);
-};
-
-Annotation.prototype.getMedia = function() {
-    return this.getReference("media");
-};
-
-Annotation.prototype.setAnnotationType = function(_idRef) {
-    this.setReference("annotationType", _idRef);
-};
-
-Annotation.prototype.getAnnotationType = function() {
-    return this.getReference("annotationType");
-};
-
-Annotation.prototype.setTags = function(_idRefs) {
-    this.setReference("tag", _idRefs);
-};
-
-Annotation.prototype.getTags = function() {
-    return this.getReference("tag");
-};
-
-Annotation.prototype.getTagTexts = function() {
-    return this.getTags().getTitles();
-};
-
-Annotation.prototype.getDuration = function() {
-    return new Time(this.end.milliseconds - this.begin.milliseconds);
-};
-
-/* */
-
-var MashedAnnotation = Model.MashedAnnotation = function(_mashup, _annotation) {
-    BaseElement.call(this, _mashup.id + "_" + _annotation.id, _annotation.source);
-    this.elementType = 'mashedAnnotation';
-    this.annotation = _annotation;
-    this.begin = new Time();
-    this.end = new Time();
-    this.duration = new Time();
-    this.title = this.annotation.title;
-    this.description = this.annotation.description;
-    this.color = this.annotation.color;
-    var _this = this;
-    this.on("click", function() {
-        _mashup.setCurrentTime(_this.begin);
-    });
-    this.on("enter", function() {
-        _this.annotation.trigger("enter");
-    });
-    this.on("leave", function() {
-        _this.annotation.trigger("leave");
-    });
-};
-
-extendPrototype(MashedAnnotation, BaseElement);
-
-MashedAnnotation.prototype.getMedia = function() {
-    return this.annotation.getReference("media");
-};
-
-MashedAnnotation.prototype.getAnnotationType = function() {
-    return this.annotation.getReference("annotationType");
-};
-
-MashedAnnotation.prototype.getTags = function() {
-    return this.annotation.getReference("tag");
-};
-
-MashedAnnotation.prototype.getTagTexts = function() {
-    return this.annotation.getTags().getTitles();
-};
-
-MashedAnnotation.prototype.getDuration = function() {
-    return this.annotation.getDuration();
-};
-
-MashedAnnotation.prototype.setBegin = function(_begin) {
-    this.begin.setMilliseconds(_begin);
-    this.duration.setMilliseconds(this.annotation.getDuration());
-    this.end.setMilliseconds(_begin + this.duration);
-};
-
-/* */
-
-var Mashup = Model.Mashup = function(_id, _source) {
-    Playable.call(this, _id, _source);
-    this.elementType = 'mashup';
-    this.duration = new Time();
-    this.segments = new List(_source.directory);
-    this.loaded = false;
-    var _this = this;
-    this._updateTimes = function() {
-        _this.updateTimes();
-        _this.trigger("change");
-    };
-    this.on("add", this._updateTimes);
-    this.on("remove", this._updateTimes);
-};
-
-extendPrototype(Mashup, Playable);
-
-Mashup.prototype.updateTimes = function() {
-    var _time = 0;
-    this.segments.forEach(function(_segment) {
-        _segment.setBegin(_time);
-        _time = _segment.end;
-    });
-    this.duration.setMilliseconds(_time);
-};
-
-Mashup.prototype.addAnnotation = function(_annotation, _defer) {
-    var _mashedAnnotation = new MashedAnnotation(this, _annotation),
-        _defer = _defer || false;
-    this.segments.push(_mashedAnnotation);
-    _annotation.on("change-begin", this._updateTimes);
-    _annotation.on("change-end", this._updateTimes);
-    if (!_defer) {
-        this.trigger("add");
-    }
-};
+    extendPrototype(Annotation, BaseElement);
 
-Mashup.prototype.addAnnotationById = function(_elId, _defer) {
-    var _annotation = this.source.getElement(_elId),
-        _defer = _defer || false;
-    if (typeof _annotation !== "undefined") {
-        this.addAnnotation(_annotation, _defer);
-    }
-};
-
-Mashup.prototype.addAnnotations = function(_segments) {
-    var _this = this;
-    ns._(_segments).forEach(function(_segment) {
-        _this.addAnnotation(_segment, true);
-    });
-    this.trigger("add");
-};
-
-Mashup.prototype.addAnnotationsById = function(_segments) {
-    var _this = this;
-    ns._(_segments).forEach(function(_segment) {
-        _this.addAnnotationById(_segment, true);
-    });
-    this.trigger("add");
-};
-
-Mashup.prototype.removeAnnotation = function(_annotation, _defer) {
-    var _defer = _defer || false;
-    _annotation.off("change-begin", this._updateTimes);
-    _annotation.off("change-end", this._updateTimes);
-    this.segments.removeId(this.id + "_" + _annotation.id);
-    if (!_defer) {
-        this.trigger("remove");
-    }
-};
+    /* Set begin and end in one go, to avoid undesired side-effects in
+     * setBegin/setEnd interaction */
+    Annotation.prototype.setBeginEnd = function(_beginMs, _endMs) {
+        _beginMs = Math.max(0, _beginMs);
+        _endMs = Math.max(0, _endMs);
+        if (_endMs < _beginMs) {
+            _endMs = _beginMs;
+        }
+        this.begin.setMilliseconds(_beginMs);
+        this.end.setMilliseconds(_endMs);
+        this.trigger("change-begin");
+        this.trigger("change-end");
+    };
 
-Mashup.prototype.removeAnnotationById = function(_annId, _defer) {
-    var _defer = _defer || false;
-    var _annotation = this.source.getElement(_annId);
+    Annotation.prototype.setBegin = function(_beginMs) {
+        this.begin.setMilliseconds(Math.max(0, _beginMs));
+        this.trigger("change-begin");
+        if (this.end < this.begin) {
+            this.setEnd(this.begin);
+        }
+    };
 
-    if (_annotation) {
-        this.removeAnnotation(_annotation, _defer);
-    }
-    if (!_defer) {
-        this.trigger("remove");
-    }
-};
+    Annotation.prototype.setEnd = function(_endMs) {
+        this.end.setMilliseconds(Math.min(_endMs, this.getMedia().duration.milliseconds));
+        this.trigger("change-end");
+        if (this.end < this.begin) {
+            this.setBegin(this.end);
+        }
+    };
 
-Mashup.prototype.setAnnotations = function(_segments) {
-    while (this.segments.length) {
-        this.removeAnnotation(this.segments[0].annotation, true);
-    }
-    this.addAnnotations(_segments);
-};
+    Annotation.prototype.setDuration = function(_durMs) {
+        this.setEnd(_durMs + this.begin.milliseconds);
+    };
 
-Mashup.prototype.setAnnotationsById = function(_segments) {
-    while (this.segments.length) {
-        this.removeAnnotation(this.segments[0].annotation, true);
-    }
-    this.addAnnotationsById(_segments);
-};
-
-Mashup.prototype.hasAnnotation = function(_annotation) {
-    return !!ns._(this.segments).find(function(_s) {
-        return _s.annotation === _annotation;
-    });
-};
-
-Mashup.prototype.getAnnotation = function(_annotation) {
-    return ns._(this.segments).find(function(_s) {
-        return _s.annotation === _annotation;
-    });
-};
-
-Mashup.prototype.getAnnotationById = function(_id) {
-    return ns._(this.segments).find(function(_s) {
-        return _s.annotation.id === _id;
-    });
-};
-
-Mashup.prototype.getAnnotations = function() {
-    return this.segments;
-};
-
-Mashup.prototype.getOriginalAnnotations = function() {
-    var annotations = new List(this.source.directory);
-    this.segments.forEach(function(_s) {
-        annotations.push(_s.annotation);
-    });
-    return annotations;
-};
-
-Mashup.prototype.getMedias = function() {
-    var medias = new List(this.source.directory);
-    this.segments.forEach(function(_annotation) {
-        medias.push(_annotation.getMedia());
-    });
-    return medias;
-};
-
-Mashup.prototype.getAnnotationsByTypeTitle = function(_title) {
-    var _annTypes = this.source.getAnnotationTypes().searchByTitle(_title).pluck("id");
-    if (_annTypes.length) {
-        return this.getAnnotations().filter(function(_annotation) {
-            return ns._(_annTypes).indexOf(_annotation.getAnnotationType().id) !== -1;
+    Annotation.prototype.setMedia = function(_idRef) {
+        this.setReference("media", _idRef);
+    };
+
+    Annotation.prototype.getMedia = function() {
+        return this.getReference("media");
+    };
+
+    Annotation.prototype.setAnnotationType = function(_idRef) {
+        this.setReference("annotationType", _idRef);
+    };
+
+    Annotation.prototype.getAnnotationType = function() {
+        return this.getReference("annotationType");
+    };
+
+    Annotation.prototype.setTags = function(_idRefs) {
+        this.setReference("tag", _idRefs);
+    };
+
+    Annotation.prototype.getTags = function() {
+        return this.getReference("tag");
+    };
+
+    Annotation.prototype.getTagTexts = function() {
+        return this.getTags().getTitles();
+    };
+
+    Annotation.prototype.getDuration = function() {
+        return new Time(this.end.milliseconds - this.begin.milliseconds);
+    };
+
+    /* */
+
+    var MashedAnnotation = Model.MashedAnnotation = function(_mashup, _annotation) {
+        BaseElement.call(this, _mashup.id + "_" + _annotation.id, _annotation.source);
+        this.elementType = 'mashedAnnotation';
+        this.annotation = _annotation;
+        this.begin = new Time();
+        this.end = new Time();
+        this.duration = new Time();
+        this.title = this.annotation.title;
+        this.description = this.annotation.description;
+        this.color = this.annotation.color;
+        var _this = this;
+        this.on("click", function() {
+            _mashup.setCurrentTime(_this.begin);
         });
-    } else {
-        return new List(this.source.directory);
-    }
-};
-
-Mashup.prototype.getAnnotationAtTime = function(_time) {
-    var _list = this.segments.filter(function(_annotation) {
-        return _annotation.begin <= _time && _annotation.end > _time;
-    });
-    if (_list.length) {
-        return _list[0];
-    } else {
-        return undefined;
-    }
-};
-
-Mashup.prototype.getMediaAtTime = function(_time) {
-    var _annotation = this.getAnnotationAtTime(_time);
-    if (typeof _annotation !== "undefined") {
-        return _annotation.getMedia();
-    } else {
-        return undefined;
-    }
-};
+        this.on("enter", function() {
+            _this.annotation.trigger("enter");
+        });
+        this.on("leave", function() {
+            _this.annotation.trigger("leave");
+        });
+    };
+
+    extendPrototype(MashedAnnotation, BaseElement);
+
+    MashedAnnotation.prototype.getMedia = function() {
+        return this.annotation.getReference("media");
+    };
+
+    MashedAnnotation.prototype.getAnnotationType = function() {
+        return this.annotation.getReference("annotationType");
+    };
+
+    MashedAnnotation.prototype.getTags = function() {
+        return this.annotation.getReference("tag");
+    };
+
+    MashedAnnotation.prototype.getTagTexts = function() {
+        return this.annotation.getTags().getTitles();
+    };
 
-/* */
+    MashedAnnotation.prototype.getDuration = function() {
+        return this.annotation.getDuration();
+    };
+
+    MashedAnnotation.prototype.setBegin = function(_begin) {
+        this.begin.setMilliseconds(_begin);
+        this.duration.setMilliseconds(this.annotation.getDuration());
+        this.end.setMilliseconds(_begin + this.duration);
+    };
+
+    /* */
 
-var Source = Model.Source = function(_config) {
-    BaseElement.call(this, false, this);
-    this.status = _SOURCE_STATUS_EMPTY;
-    this.elementType = "source";
-    if (typeof _config !== "undefined") {
+    var Mashup = Model.Mashup = function(_id, _source) {
+        Playable.call(this, _id, _source);
+        this.elementType = 'mashup';
+        this.duration = new Time();
+        this.segments = new List(_source.directory);
+        this.loaded = false;
         var _this = this;
-        ns._(_config).forEach(function(_v, _k) {
-            _this[_k] = _v;
+        this._updateTimes = function() {
+            _this.updateTimes();
+            _this.trigger("change");
+        };
+        this.on("add", this._updateTimes);
+        this.on("remove", this._updateTimes);
+    };
+
+    extendPrototype(Mashup, Playable);
+
+    Mashup.prototype.updateTimes = function() {
+        var _time = 0;
+        this.segments.forEach(function(_segment) {
+            _segment.setBegin(_time);
+            _time = _segment.end;
         });
-        this.callbackQueue = [];
-        this.contents = {};
-        this.get();
-    }
-};
+        this.duration.setMilliseconds(_time);
+    };
 
-extendPrototype(Source, BaseElement);
+    Mashup.prototype.addAnnotation = function(_annotation, _defer) {
+        var _mashedAnnotation = new MashedAnnotation(this, _annotation),
+            _defer = _defer || false;
+        this.segments.push(_mashedAnnotation);
+        _annotation.on("change-begin", this._updateTimes);
+        _annotation.on("change-end", this._updateTimes);
+        if (!_defer) {
+            this.trigger("add");
+        }
+    };
 
-Source.prototype.addList = function(_listId, _contents) {
-    if (typeof this.contents[_listId] === "undefined") {
-        this.contents[_listId] = new List(this.directory);
-    }
-    this.contents[_listId].addElements(_contents);
-};
-
-Source.prototype.getList = function(_listId, _global) {
-    _global = (typeof _global !== "undefined" && _global);
-    if (_global) {
-        return this.directory.getGlobalList().filter(function(_e) {
-            return (_e.elementType === _listId);
+    Mashup.prototype.addAnnotationById = function(_elId, _defer) {
+        var _annotation = this.source.getElement(_elId),
+            _defer = _defer || false;
+        if (typeof _annotation !== "undefined") {
+            this.addAnnotation(_annotation, _defer);
+        }
+    };
+
+    Mashup.prototype.addAnnotations = function(_segments) {
+        var _this = this;
+        ns._(_segments).forEach(function(_segment) {
+            _this.addAnnotation(_segment, true);
+        });
+        this.trigger("add");
+    };
+
+    Mashup.prototype.addAnnotationsById = function(_segments) {
+        var _this = this;
+        ns._(_segments).forEach(function(_segment) {
+            _this.addAnnotationById(_segment, true);
+        });
+        this.trigger("add");
+    };
+
+    Mashup.prototype.removeAnnotation = function(_annotation, _defer) {
+        var _defer = _defer || false;
+        _annotation.off("change-begin", this._updateTimes);
+        _annotation.off("change-end", this._updateTimes);
+        this.segments.removeId(this.id + "_" + _annotation.id);
+        if (!_defer) {
+            this.trigger("remove");
+        }
+    };
+
+    Mashup.prototype.removeAnnotationById = function(_annId, _defer) {
+        var _defer = _defer || false;
+        var _annotation = this.source.getElement(_annId);
+
+        if (_annotation) {
+            this.removeAnnotation(_annotation, _defer);
+        }
+        if (!_defer) {
+            this.trigger("remove");
+        }
+    };
+
+    Mashup.prototype.setAnnotations = function(_segments) {
+        while (this.segments.length) {
+            this.removeAnnotation(this.segments[0].annotation, true);
+        }
+        this.addAnnotations(_segments);
+    };
+
+    Mashup.prototype.setAnnotationsById = function(_segments) {
+        while (this.segments.length) {
+            this.removeAnnotation(this.segments[0].annotation, true);
+        }
+        this.addAnnotationsById(_segments);
+    };
+
+    Mashup.prototype.hasAnnotation = function(_annotation) {
+        return !!ns._(this.segments).find(function(_s) {
+            return _s.annotation === _annotation;
+        });
+    };
+
+    Mashup.prototype.getAnnotation = function(_annotation) {
+        return ns._(this.segments).find(function(_s) {
+            return _s.annotation === _annotation;
         });
-    } else {
+    };
+
+    Mashup.prototype.getAnnotationById = function(_id) {
+        return ns._(this.segments).find(function(_s) {
+            return _s.annotation.id === _id;
+        });
+    };
+
+    Mashup.prototype.getAnnotations = function() {
+        return this.segments;
+    };
+
+    Mashup.prototype.getOriginalAnnotations = function() {
+        var annotations = new List(this.source.directory);
+        this.segments.forEach(function(_s) {
+            annotations.push(_s.annotation);
+        });
+        return annotations;
+    };
+
+    Mashup.prototype.getMedias = function() {
+        var medias = new List(this.source.directory);
+        this.segments.forEach(function(_annotation) {
+            medias.push(_annotation.getMedia());
+        });
+        return medias;
+    };
+
+    Mashup.prototype.getAnnotationsByTypeTitle = function(_title) {
+        var _annTypes = this.source.getAnnotationTypes().searchByTitle(_title).pluck("id");
+        if (_annTypes.length) {
+            return this.getAnnotations().filter(function(_annotation) {
+                return ns._(_annTypes).indexOf(_annotation.getAnnotationType().id) !== -1;
+            });
+        } else {
+            return new List(this.source.directory);
+        }
+    };
+
+    Mashup.prototype.getAnnotationAtTime = function(_time) {
+        var _list = this.segments.filter(function(_annotation) {
+            return _annotation.begin <= _time && _annotation.end > _time;
+        });
+        if (_list.length) {
+            return _list[0];
+        } else {
+            return undefined;
+        }
+    };
+
+    Mashup.prototype.getMediaAtTime = function(_time) {
+        var _annotation = this.getAnnotationAtTime(_time);
+        if (typeof _annotation !== "undefined") {
+            return _annotation.getMedia();
+        } else {
+            return undefined;
+        }
+    };
+
+    /* */
+
+    var Source = Model.Source = function(_config) {
+        BaseElement.call(this, false, this);
+        this.status = _SOURCE_STATUS_EMPTY;
+        this.elementType = "source";
+        if (typeof _config !== "undefined") {
+            var _this = this;
+            ns._(_config).forEach(function(_v, _k) {
+                _this[_k] = _v;
+            });
+            this.callbackQueue = [];
+            this.contents = {};
+            this.get();
+        }
+    };
+
+    extendPrototype(Source, BaseElement);
+
+    Source.prototype.addList = function(_listId, _contents) {
         if (typeof this.contents[_listId] === "undefined") {
             this.contents[_listId] = new List(this.directory);
         }
-        return this.contents[_listId];
-    }
-};
-
-Source.prototype.forEach = function(_callback) {
-    var _this = this;
-    ns._(this.contents).forEach(function(_value, _key) {
-        _callback.call(_this, _value, _key);
-    });
-};
-
-Source.prototype.getElement = function(_elId) {
-    return this.directory.getElement(_elId);
-};
-
-Source.prototype.get = function() {
-    this.status = _SOURCE_STATUS_WAITING;
-    this.handleCallbacks();
-};
-
-/* We defer the callbacks calls so they execute after the queue is cleared */
-Source.prototype.deferCallback = function(_callback) {
-    var _this = this;
-    ns._.defer(function() {
-        _callback.call(_this);
-    });
-};
-
-Source.prototype.handleCallbacks = function() {
-    this.status = _SOURCE_STATUS_READY;
-    while (this.callbackQueue.length) {
-        this.deferCallback(this.callbackQueue.splice(0,1)[0]);
-    }
-};
-Source.prototype.onLoad = function(_callback) {
-    if (this.status === _SOURCE_STATUS_READY) {
-        this.deferCallback(_callback);
-    } else {
-        this.callbackQueue.push(_callback);
-    }
-};
-
-Source.prototype.serialize = function() {
-    return this.serializer.serialize(this);
-};
-
-Source.prototype.deSerialize = function(_data) {
-    this.serializer.deSerialize(_data, this);
-};
-
-Source.prototype.getAnnotations = function(_global) {
-    _global = (typeof _global !== "undefined" && _global);
-    return this.getList("annotation", _global);
-};
-
-Source.prototype.getMedias = function(_global) {
-    _global = (typeof _global !== "undefined" && _global);
-    return this.getList("media", _global);
-};
-
-Source.prototype.getTags = function(_global) {
-    _global = (typeof _global !== "undefined" && _global);
-    return this.getList("tag", _global);
-};
-
-Source.prototype.getMashups = function(_global) {
-    _global = (typeof _global !== "undefined" && _global);
-    return this.getList("mashup", _global);
-};
-
-Source.prototype.getAnnotationTypes = function(_global) {
-    _global = (typeof _global !== "undefined" && _global);
-    return this.getList("annotationType", _global);
-};
-
-Source.prototype.getAnnotationsByTypeTitle = function(_title, _global) {
-    _global = (typeof _global !== "undefined" && _global);
-    var _res = new List(this.directory),
-        _annTypes = this.getAnnotationTypes(_global).searchByTitle(_title);
-    _annTypes.forEach(function(_annType) {
-        _res.addElements(_annType.getAnnotations(_global));
-    });
-    return _res;
-};
-
-Source.prototype.getDuration = function() {
-    var _m = this.currentMedia;
-    if (typeof _m !== "undefined") {
-        return this.currentMedia.duration;
-    }
-};
-
-Source.prototype.getCurrentMedia = function(_opts) {
-    if (typeof this.currentMedia === "undefined") {
-        if (_opts.is_mashup) {
-            var _mashups = this.getMashups();
-            if (_mashups.length) {
-                this.currentMedia = _mashups[0];
+        this.contents[_listId].addElements(_contents);
+    };
+
+    Source.prototype.getList = function(_listId, _global) {
+        _global = (typeof _global !== "undefined" && _global);
+        if (_global) {
+            return this.directory.getGlobalList().filter(function(_e) {
+                return (_e.elementType === _listId);
+            });
+        } else {
+            if (typeof this.contents[_listId] === "undefined") {
+                this.contents[_listId] = new List(this.directory);
             }
+            return this.contents[_listId];
+        }
+    };
+
+    Source.prototype.forEach = function(_callback) {
+        var _this = this;
+        ns._(this.contents).forEach(function(_value, _key) {
+            _callback.call(_this, _value, _key);
+        });
+    };
+
+    Source.prototype.getElement = function(_elId) {
+        return this.directory.getElement(_elId);
+    };
+
+    Source.prototype.get = function() {
+        this.status = _SOURCE_STATUS_WAITING;
+        this.handleCallbacks();
+    };
+
+    /* We defer the callbacks calls so they execute after the queue is cleared */
+    Source.prototype.deferCallback = function(_callback) {
+        var _this = this;
+        ns._.defer(function() {
+            _callback.call(_this);
+        });
+    };
+
+    Source.prototype.handleCallbacks = function() {
+        this.status = _SOURCE_STATUS_READY;
+        while (this.callbackQueue.length) {
+            this.deferCallback(this.callbackQueue.splice(0, 1)[0]);
+        }
+    };
+    Source.prototype.onLoad = function(_callback) {
+        if (this.status === _SOURCE_STATUS_READY) {
+            this.deferCallback(_callback);
         } else {
-            var _medias = this.getMedias();
-            if (_medias.length) {
-                this.currentMedia = _medias[0];
+            this.callbackQueue.push(_callback);
+        }
+    };
+
+    Source.prototype.serialize = function() {
+        return this.serializer.serialize(this);
+    };
+
+    Source.prototype.deSerialize = function(_data) {
+        this.serializer.deSerialize(_data, this);
+    };
+
+    Source.prototype.getAnnotations = function(_global) {
+        _global = (typeof _global !== "undefined" && _global);
+        return this.getList("annotation", _global);
+    };
+
+    Source.prototype.getMedias = function(_global) {
+        _global = (typeof _global !== "undefined" && _global);
+        return this.getList("media", _global);
+    };
+
+    Source.prototype.getTags = function(_global) {
+        _global = (typeof _global !== "undefined" && _global);
+        return this.getList("tag", _global);
+    };
+
+    Source.prototype.getMashups = function(_global) {
+        _global = (typeof _global !== "undefined" && _global);
+        return this.getList("mashup", _global);
+    };
+
+    Source.prototype.getAnnotationTypes = function(_global) {
+        _global = (typeof _global !== "undefined" && _global);
+        return this.getList("annotationType", _global);
+    };
+
+    Source.prototype.getAnnotationsByTypeTitle = function(_title, _global) {
+        _global = (typeof _global !== "undefined" && _global);
+        var _res = new List(this.directory),
+            _annTypes = this.getAnnotationTypes(_global).searchByTitle(_title);
+        _annTypes.forEach(function(_annType) {
+            _res.addElements(_annType.getAnnotations(_global));
+        });
+        return _res;
+    };
+
+    Source.prototype.getDuration = function() {
+        var _m = this.currentMedia;
+        if (typeof _m !== "undefined") {
+            return this.currentMedia.duration;
+        }
+    };
+
+    Source.prototype.getCurrentMedia = function(_opts) {
+        if (typeof this.currentMedia === "undefined") {
+            if (_opts.is_mashup) {
+                var _mashups = this.getMashups();
+                if (_mashups.length) {
+                    this.currentMedia = _mashups[0];
+                }
+            } else {
+                var _medias = this.getMedias();
+                if (_medias.length) {
+                    this.currentMedia = _medias[0];
+                }
             }
         }
-    }
-    return this.currentMedia;
-};
-
-Source.prototype.merge = function(_source) {
-    var _this = this;
-    _source.forEach(function(_value, _key) {
-        _this.getList(_key).addElements(_value);
-    });
-};
-
-/* */
-
-var RemoteSource = Model.RemoteSource = function(_config) {
-    Source.call(this, _config);
-};
-
-extendPrototype(RemoteSource, Source);
-
-RemoteSource.prototype.get = function() {
-    this.status = _SOURCE_STATUS_WAITING;
-    var _this = this,
-        urlparams = this.url_params || {},
-        dataType = (isLocalURL(this.url) ? "json" : "jsonp");
-    urlparams.format = dataType;
-    ns.jQuery.ajax({
-        url: this.url,
-        dataType: dataType,
-        data: urlparams,
-        traditional: true,
-        success: function(_result) {
-            _this.deSerialize(_result);
-            _this.handleCallbacks();
+        return this.currentMedia;
+    };
+
+    Source.prototype.merge = function(_source) {
+        var _this = this;
+        _source.forEach(function(_value, _key) {
+            _this.getList(_key).addElements(_value);
+        });
+    };
+
+    /* */
+
+    var RemoteSource = Model.RemoteSource = function(_config) {
+        Source.call(this, _config);
+    };
+
+    extendPrototype(RemoteSource, Source);
+
+    RemoteSource.prototype.get = function() {
+        this.status = _SOURCE_STATUS_WAITING;
+        var _this = this,
+            urlparams = this.url_params || {},
+            dataType = (isLocalURL(this.url) ? "json" : "jsonp");
+        urlparams.format = dataType;
+        ns.jQuery.ajax({
+            url: this.url,
+            dataType: dataType,
+            data: urlparams,
+            traditional: true,
+            success: function(_result) {
+                _this.deSerialize(_result);
+                _this.handleCallbacks();
+            }
+        });
+    };
+
+    /* */
+
+    var Directory = Model.Directory = function() {
+        this.remoteSources = {};
+        this.elements = {};
+    };
+
+    Directory.prototype.remoteSource = function(_properties) {
+        if (typeof _properties !== "object" || typeof _properties.url === "undefined") {
+            throw "Error : Directory.remoteSource(configuration): configuration.url is undefined";
+        }
+        var _config = ns._({ directory: this }).extend(_properties);
+        _config.url_params = _config.url_params || {};
+        var _hash = _config.url + "?" + ns.jQuery.param(_config.url_params);
+        if (typeof this.remoteSources[_hash] === "undefined") {
+            this.remoteSources[_hash] = new RemoteSource(_config);
         }
-    });
-};
+        return this.remoteSources[_hash];
+    };
 
-/* */
+    Directory.prototype.newLocalSource = function(_properties) {
+        var _config = ns._({ directory: this }).extend(_properties),
+            _res = new Source(_config);
+        return _res;
+    };
 
-var Directory = Model.Directory = function() {
-    this.remoteSources = {};
-    this.elements = {};
-};
+    Directory.prototype.getElement = function(_id) {
+        return this.elements[_id];
+    };
 
-Directory.prototype.remoteSource = function(_properties) {
-    if (typeof _properties !== "object" || typeof _properties.url === "undefined") {
-        throw "Error : Directory.remoteSource(configuration): configuration.url is undefined";
-    }
-    var _config = ns._({ directory: this }).extend(_properties);
-    _config.url_params = _config.url_params || {};
-    var _hash = _config.url + "?" + ns.jQuery.param(_config.url_params);
-    if (typeof this.remoteSources[_hash] === "undefined") {
-        this.remoteSources[_hash] = new RemoteSource(_config);
-    }
-    return this.remoteSources[_hash];
-};
-
-Directory.prototype.newLocalSource = function(_properties) {
-    var _config = ns._({ directory: this }).extend(_properties),
-        _res = new Source(_config);
-    return _res;
-};
-
-Directory.prototype.getElement = function(_id) {
-    return this.elements[_id];
-};
-
-Directory.prototype.addElement = function(_element) {
-    this.elements[_element.id] = _element;
-};
-
-Directory.prototype.getGlobalList = function() {
-    var _res = new List(this);
-    _res.addIds(ns._(this.elements).keys());
-    return _res;
-};
-return Model;
+    Directory.prototype.addElement = function(_element) {
+        this.elements[_element.id] = _element;
+    };
+
+    Directory.prototype.getGlobalList = function() {
+        var _res = new List(this);
+        _res.addIds(ns._(this.elements).keys());
+        return _res;
+    };
+    return Model;
 
 })(IriSP);
 
 /* END js */
-

From 07145c538632f1f33ced2c2f807ba03b2626de47 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 20 Oct 2015 14:31:32 +0200
Subject: [PATCH 051/204] Move jscs config file to assets

---
 {dev => assets/dev}/jscsrc | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename {dev => assets/dev}/jscsrc (100%)

diff --git a/dev/jscsrc b/assets/dev/jscsrc
similarity index 100%
rename from dev/jscsrc
rename to assets/dev/jscsrc

From d9d3c53f3a4d34b6eec57675a29b7bc77ec27428 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 20 Oct 2015 14:31:58 +0200
Subject: [PATCH 052/204] Allow no space after function keyword

---
 assets/dev/jscsrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/dev/jscsrc b/assets/dev/jscsrc
index ffad064e..8e03442b 100644
--- a/assets/dev/jscsrc
+++ b/assets/dev/jscsrc
@@ -20,7 +20,7 @@
         "return",
         "try",
         "catch",
-        "function",
+//        "function",
         "typeof"
     ],
     "requireSpaceBeforeBlockStatements": true,

From 0ab684e5f52926bfdcde9f27e770a817c45b9c66 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 27 Oct 2015 16:00:15 +0100
Subject: [PATCH 053/204] Hide fullscreen button if feature not available

---
 src/widgets/CocoController.css | 4 ++++
 src/widgets/CocoController.js  | 7 +++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/widgets/CocoController.css b/src/widgets/CocoController.css
index 9e6ba49a..d0850088 100644
--- a/src/widgets/CocoController.css
+++ b/src/widgets/CocoController.css
@@ -71,3 +71,7 @@
     width: 100%;
     height: 100%;
 }
+
+.Ldt-CocoCtrl-Disabled {
+    display: none;
+}
diff --git a/src/widgets/CocoController.js b/src/widgets/CocoController.js
index 6e508a21..3a5c7733 100644
--- a/src/widgets/CocoController.js
+++ b/src/widgets/CocoController.js
@@ -53,6 +53,7 @@ IriSP.Widgets.CocoController.prototype.messages = {
 
 IriSP.Widgets.CocoController.prototype.draw = function () {
     var _this = this;
+    var fullscreenButton = this.$.find(".Ldt-CocoCtrl-Fullscreen-Button");
     this.renderTemplate();
 
     // Define blocks
@@ -73,9 +74,9 @@ IriSP.Widgets.CocoController.prototype.draw = function () {
     this.$playButton.click(this.functionWrapper("playHandler"));
 
     // Fullscreen handling
-    this.$.find(".Ldt-CocoCtrl-Fullscreen-Button").click(this.functionWrapper("toggleFullscreen"));
     var fullscreen_event_name = IriSP.getFullscreenEventname();
     if (fullscreen_event_name) {
+        fullscreenButton.click(this.functionWrapper("toggleFullscreen"));
         document.addEventListener(fullscreen_event_name, function () {
             var widget = IriSP.jQuery(_this.fullscreen_widget);
             if (widget.length) {
@@ -86,7 +87,9 @@ IriSP.Widgets.CocoController.prototype.draw = function () {
                 }
             };
         });
-    };
+    } else {
+        fullscreenButton.addClass("Ldt-CocoCtrl-Disabled");
+    }
 
     this.$.find('.Ldt-CocoCtrl-Sound')
         .click(this.functionWrapper("muteHandler"));

From 59728aeaa79969418e8ac65578079a61317af544 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 27 Oct 2015 17:16:17 +0100
Subject: [PATCH 054/204] Bind touchstart even on mute button

---
 src/widgets/CocoController.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/widgets/CocoController.js b/src/widgets/CocoController.js
index 3a5c7733..83b55dce 100644
--- a/src/widgets/CocoController.js
+++ b/src/widgets/CocoController.js
@@ -91,8 +91,7 @@ IriSP.Widgets.CocoController.prototype.draw = function () {
         fullscreenButton.addClass("Ldt-CocoCtrl-Disabled");
     }
 
-    this.$.find('.Ldt-CocoCtrl-Sound')
-        .click(this.functionWrapper("muteHandler"));
+    this.$.find('.Ldt-CocoCtrl-Sound').on("click touchstart", this.functionWrapper("muteHandler"));
 
     this.timeDisplayUpdater(new IriSP.Model.Time(0));
 };

From 216b0a0213aed4f811dfb41262eb5f66ae65e7fc Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 27 Oct 2015 17:46:11 +0100
Subject: [PATCH 055/204] Fix Enrichedplan title display

---
 src/widgets/EnrichedPlan.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index e86dedf1..00572ab0 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -59,19 +59,18 @@
 }
 
 .Ldt-EnrichedPlan-SlideTitle1 {
+    font-family: Roboto;
     text-transform: uppercase;
     font-size: 13px;
-    font-weight: 600;
+    font-weight: bold;
 }
 
 .Ldt-EnrichedPlan-SlideTitle2 {
     font-size: 14px;
-    font-weight: 600;
 }
 
 .Ldt-EnrichedPlan-SlideTitle3 {
     font-size: 14px;
-    font-weight: 200;
 }
 
 .Ldt-EnrichedPlan-Note {

From 023610a3591146e1d8fae5b61f596bdaccf9a013 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 27 Oct 2015 17:46:39 +0100
Subject: [PATCH 056/204] Remove outline from search box

---
 src/widgets/EnrichedPlan.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 00572ab0..5a23736d 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -136,6 +136,7 @@
     font-family: Roboto;
     font-size: 16px;
     width: calc(100% - 340px);
+    outline: none;
 }
 .Ldt-EnrichedPlan-Controls .Ldt-EnrichedPlan-Search-Input-Full {
     width: 95%;

From 3abb70fad15bc341076d9d2695f4136f0dc0f9f6 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 27 Oct 2015 17:46:57 +0100
Subject: [PATCH 057/204] Indenting

---
 src/widgets/EnrichedPlan.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 5a23736d..d5a58e27 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -168,18 +168,21 @@
 .Ldt-EnrichedPlan-Control-Checkbox:checked + label:before {
   content: '';
   position: absolute;
-  left:0; top: 2px;
-  width: 13px; height: 13px;
+  left:0;
+  top: 2px;
+  width: 13px;
+  height: 13px;
   border: 1px solid #aaa;
 }
 /* checked mark aspect */
 .Ldt-EnrichedPlan-Control-Checkbox:not(:checked) + label:after,
 .Ldt-EnrichedPlan-Control-Checkbox:checked + label:after {
     content: '\2a2f';
+    font-size: 20px;
     font-style: normal;
     position: absolute;
-    top: 3px; left: -1px;
-    font-size: 20px;
+    top: 3px;
+    left: -1px;
     transition: all .2s;
 }
 /* checked mark aspect changes */

From 1158dec9d730746ae7cc092e51456439cd549e45 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 27 Oct 2015 17:47:24 +0100
Subject: [PATCH 058/204] Add .Ldt-EnrichedPlan-Note-Link

---
 src/widgets/EnrichedPlan.css | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index d5a58e27..9516e281 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -82,14 +82,22 @@
     background-color: #eee;
 }
 
-.Ldt-EnrichedPlan-Note-Teacher {
+.Ldt-EnrichedPlan-Note-Link {
+    text-decoration: none;
+    color: inherit;
+}
+
+.Ldt-EnrichedPlan-Note-Teacher,
+.Ldt-EnrichedPlan-Note-Link.Ldt-EnrichedPlan-Note-Teacher {
     color: #e5007e;
     font-style: italic;
 }
-.Ldt-EnrichedPlan-Note-Own {
+.Ldt-EnrichedPlan-Note-Own,
+.Ldt-EnrichedPlan-Note-Link.Ldt-EnrichedPlan-Note-Own {
     color: #66ccff;
 }
-.Ldt-EnrichedPlan-Note-Other {
+.Ldt-EnrichedPlan-Note-Other,
+.Ldt-EnrichedPlan-Note-Link.Ldt-EnrichedPlan-Note-Other {
     color: #996633;
 }
 

From 2c51a82320939d07241ea15cc0f3f0cbee7afd8d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 27 Oct 2015 17:48:32 +0100
Subject: [PATCH 059/204] Coding style fixes

---
 src/js/utils.js | 52 ++++++++++++++++++++++++-------------------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/js/utils.js b/src/js/utils.js
index 884e6846..9ec1f119 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -1,7 +1,7 @@
 /* utils.js - various utils that don't belong anywhere else */
 
 IriSP.jqEscape = function(_text) {
-    return _text.replace(/(:|\.)/g,'\\$1');
+    return _text.replace(/(:|\.)/g, '\\$1');
 };
 
 IriSP.getLib = function(lib) {
@@ -35,7 +35,7 @@ IriSP.textFieldHtml = function(_text, _regexp, _extend) {
         text = _text.trim();
 
     function addToList(_rx, _startHtml, _endHtml) {
-        while(true) {
+        while (true) {
             var result = _rx.exec(text);
             if (!result) {
                 break;
@@ -109,17 +109,17 @@ IriSP.log = function() {
 };
 
 IriSP.attachDndData = function(jqSel, data) {
-	jqSel.attr("draggable", "true").on("dragstart", function(_event) {
-		var d = (typeof data === "function" ? data.call(this) : data);
-		try {
+    jqSel.attr("draggable", "true").on("dragstart", function(_event) {
+        var d = (typeof data === "function" ? data.call(this) : data);
+        try {
             if (d.html === undefined && d.uri && d.text) {
                 d.html = '<a href="' + d.uri + '">' + d.text + '</a>';
             }
-			IriSP._(d).each(function(v, k) {
+            IriSP._(d).each(function(v, k) {
                 if (v && k != 'text' && k != 'html') {
-					_event.originalEvent.dataTransfer.setData("text/x-iri-" + k, v);
-				}
-			});
+                    _event.originalEvent.dataTransfer.setData("text/x-iri-" + k, v);
+                }
+            });
             if (d.uri && d.text) {
                 _event.originalEvent.dataTransfer.setData("text/x-moz-url", d.uri + "\n" + d.text.replace("\n", " "));
                 _event.originalEvent.dataTransfer.setData("text/plain", d.text + " " + d.uri);
@@ -130,13 +130,13 @@ IriSP.attachDndData = function(jqSel, data) {
             if (d.html !== undefined) {
                 _event.originalEvent.dataTransfer.setData("text/html", d.html);
             }
-            if (d.text !== undefined && ! d.uri) {
+            if (d.text !== undefined && !d.uri) {
                 _event.originalEvent.dataTransfer.setData("text/plain", d.text);
             }
-		} catch(err) {
-			_event.originalEvent.dataTransfer.setData("Text", JSON.stringify(d));
-		}
-	});
+        } catch (err) {
+            _event.originalEvent.dataTransfer.setData("Text", JSON.stringify(d));
+        }
+    });
 };
 
 IriSP.FakeClass = function(properties) {
@@ -158,19 +158,19 @@ IriSP.timestamp2ms = function(t) {
     return 1000 * (3600 * parseInt(s[2], 10) + 60 * parseInt(s[1], 10) + parseInt(s[0], 10));
 };
 
-IriSP.setFullScreen= function(elem, value) {
+IriSP.setFullScreen = function(elem, value) {
     // Set fullscreen on or off
     if (value) {
-		if (elem.requestFullscreen) {
-			elem.requestFullscreen();
-		} else if (elem.mozRequestFullScreen) {
-			elem.mozRequestFullScreen();
-		} else if (elem.webkitRequestFullscreen) {
-			elem.webkitRequestFullscreen();
-		} else if (elem.msRequestFullscreen) {
-			elem.msRequestFullscreen();
-		}
-	} else {
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen();
+        } else if (elem.mozRequestFullScreen) {
+            elem.mozRequestFullScreen();
+        } else if (elem.webkitRequestFullscreen) {
+            elem.webkitRequestFullscreen();
+        } else if (elem.msRequestFullscreen) {
+            elem.msRequestFullscreen();
+        }
+    } else {
         if (document.exitFullscreen) {
             document.exitFullscreen();
         } else if (document.msExitFullscreen) {
@@ -184,7 +184,7 @@ IriSP.setFullScreen= function(elem, value) {
 };
 
 IriSP.isFullscreen = function() {
-	return (document.fullscreenElement ||  document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
+    return (document.fullscreenElement ||  document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
 };
 
 IriSP.getFullscreenElement = function () {

From 87be885d0961e5264939934152194c52c518ba68 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 27 Oct 2015 17:49:11 +0100
Subject: [PATCH 060/204] Add Mediafragment URL to annotations

---
 src/widgets/EnrichedPlan.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index ab005a7b..47ab31c2 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -59,7 +59,7 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '  </div>'
     + '</div>';
 
-IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Delete"></span></span>{{/can_edit}}</div>';
+IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}}"><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Delete"></span></span>{{/can_edit}}</div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
     var _this = this;
@@ -126,6 +126,7 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
                 return Mustache.to_html(_this.annotationTemplate, {
                     id: a.id,
                     text: IriSP.textFieldHtml(a.description || a.title),
+                    url: document.location.href.replace(/#.*$/, '') + '#id=' + a.id + '&t=' + (a.begin / 1000.0),
                     author: a.creator,
                     begin: a.begin.toString(),
                     begintc: a.begin.milliseconds,

From 02db20716269dccabb091eae42730db6f6ccaac9 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 27 Oct 2015 17:49:36 +0100
Subject: [PATCH 061/204] Fetch slide level from slide.content.data.level

---
 src/widgets/EnrichedPlan.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 47ab31c2..08ad566b 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -117,7 +117,7 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
         var _html = Mustache.to_html(_this.slideTemplate, {
             id : slide.id,
             atitle : IriSP.textFieldHtml(slide.title),
-            level: slide.content ? (slide.content.level || 1) : 1,
+            level: (slide.content !== undefined && slide.content.data !== undefined) ? (slide.content.data.level || 1) : 1,
             begin : slide.begin.toString(),
             begintc: slide.begin.milliseconds,
             thumbnail: slide.thumbnail,

From f6fe4ae6e8a2d66da13f308ab41c046a6554696e Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 28 Oct 2015 10:37:31 +0100
Subject: [PATCH 062/204] Fix button handling

---
 src/widgets/CocoController.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/widgets/CocoController.js b/src/widgets/CocoController.js
index 83b55dce..92c167d4 100644
--- a/src/widgets/CocoController.js
+++ b/src/widgets/CocoController.js
@@ -53,8 +53,8 @@ IriSP.Widgets.CocoController.prototype.messages = {
 
 IriSP.Widgets.CocoController.prototype.draw = function () {
     var _this = this;
-    var fullscreenButton = this.$.find(".Ldt-CocoCtrl-Fullscreen-Button");
     this.renderTemplate();
+    var fullscreenButton = this.$.find(".Ldt-CocoCtrl-Fullscreen-Button");
 
     // Define blocks
     this.$playButton = this.$.find(".Ldt-CocoCtrl-Play");
@@ -76,7 +76,11 @@ IriSP.Widgets.CocoController.prototype.draw = function () {
     // Fullscreen handling
     var fullscreen_event_name = IriSP.getFullscreenEventname();
     if (fullscreen_event_name) {
-        fullscreenButton.click(this.functionWrapper("toggleFullscreen"));
+        fullscreenButton.on("click touchstart", function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+            _this.toggleFullscreen();
+        });
         document.addEventListener(fullscreen_event_name, function () {
             var widget = IriSP.jQuery(_this.fullscreen_widget);
             if (widget.length) {
@@ -91,7 +95,11 @@ IriSP.Widgets.CocoController.prototype.draw = function () {
         fullscreenButton.addClass("Ldt-CocoCtrl-Disabled");
     }
 
-    this.$.find('.Ldt-CocoCtrl-Sound').on("click touchstart", this.functionWrapper("muteHandler"));
+    this.$.on("click touchstart", ".Ldt-CocoCtrl-Sound", function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        _this.media.setMuted(!_this.media.getMuted());
+    });
 
     this.timeDisplayUpdater(new IriSP.Model.Time(0));
 };
@@ -142,10 +150,6 @@ IriSP.Widgets.CocoController.prototype.playHandler = function () {
     }
 };
 
-IriSP.Widgets.CocoController.prototype.muteHandler = function () {
-    this.media.setMuted(!this.media.getMuted());
-};
-
 IriSP.Widgets.CocoController.prototype.volumeUpdater = function () {
     var _muted = this.media.getMuted(),
         _vol = this.media.getVolume();

From 1e83955483e3885e803555af4ea9f5e55795bc79 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 28 Oct 2015 10:48:55 +0100
Subject: [PATCH 063/204] Add proprietary css attributes

---
 src/widgets/SlidePreview.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/widgets/SlidePreview.css b/src/widgets/SlidePreview.css
index fd63d16f..18fab433 100644
--- a/src/widgets/SlidePreview.css
+++ b/src/widgets/SlidePreview.css
@@ -35,9 +35,17 @@
 }
 .Ldt-SlidePreview-Item:hover {
     -webkit-transform: scale(2.8);
+    -moz-transform: scale(2.8);
+    -o-transform: scale(2.8);
+    -ms-transform: scale(2.8);
+    transform: scale(2.8);
     z-index: 4;
 }
 .Ldt-SlidePreview-Item:hover + .slidepreviewitem {
-    -webkit-transform: scale(1.8);
+    -webkit-transform: scale(2.4);
+    -moz-transform: scale(2.4);
+    -o-transform: scale(2.4);
+    -ms-transform: scale(2.4);
+    transform: scale(2.4);
     z-index: 1;
 }

From 72fa102a58339319f9c25dc968e21573d4c0c5bc Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 2 Nov 2015 11:35:53 +0100
Subject: [PATCH 064/204] Remove obsolete comments

---
 src/widgets/EnrichedPlan.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 08ad566b..320dafec 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -1,7 +1,3 @@
-/* TODO
-- add callbacks
- */
-
 IriSP.Widgets.EnrichedPlan = function (player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
 };
@@ -132,7 +128,6 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
                     begintc: a.begin.milliseconds,
                     atitle: a.title.slice(0, 20),
                     can_edit: a.meta['coco:can_edit'],
-                    // FIXME: Temporary hack waiting for a proper metadata definition
                     category: "Ldt-EnrichedPlan-Note-" + note_category(a),
                     filtered: ((note_category(a) == 'Own' && !_this.show_own_notes)
                                 || (note_category(a) == 'Other' && !_this.show_other_notes)

From 602766b0447594671d2043cfe14ba392697e8f41 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 2 Nov 2015 15:35:25 +0100
Subject: [PATCH 065/204] New widget CocoCreateAnnotation

Aiming at being more simple than the generic CreateAnnotation
---
 src/widgets/CocoCreateAnnotation.css |  31 ++++++
 src/widgets/CocoCreateAnnotation.js  | 159 +++++++++++++++++++++++++++
 2 files changed, 190 insertions(+)
 create mode 100644 src/widgets/CocoCreateAnnotation.css
 create mode 100644 src/widgets/CocoCreateAnnotation.js

diff --git a/src/widgets/CocoCreateAnnotation.css b/src/widgets/CocoCreateAnnotation.css
new file mode 100644
index 00000000..832bbc12
--- /dev/null
+++ b/src/widgets/CocoCreateAnnotation.css
@@ -0,0 +1,31 @@
+.Ldt-CocoCreateAnnotation-Form {
+    width: 100%;
+    font-family: Roboto;
+    font-size: 16px;
+    position: relative;
+}
+.Ldt-CocoCreateAnnotation-Text {
+    width: 100%;
+}
+.Ldt-CocoCreateAnnotation-Timecode {
+    position: absolute;
+    border-radius: 2px;
+    color: #999;
+    width: 4em;
+    border: none;
+    background-color: #fff;
+    background-color: rgba(255, 255, 255, 1);
+    max-height: 0;
+    top: 0;
+    -webkit-transition: all 1s ease;
+    -moz-transition: all 1s ease;
+    -ms-transition: all 1s ease;
+    -o-transition: all 1s ease;
+    transition: all 1s ease;
+}
+.Ldt-CocoCreateAnnotation-Timecode-Active {
+    display: inline-block;
+    max-height: 1.1em;
+    top: -1.1em;
+    border: 1px solid #77e;
+}
diff --git a/src/widgets/CocoCreateAnnotation.js b/src/widgets/CocoCreateAnnotation.js
new file mode 100644
index 00000000..71319ecd
--- /dev/null
+++ b/src/widgets/CocoCreateAnnotation.js
@@ -0,0 +1,159 @@
+IriSP.Widgets.CocoCreateAnnotation = function (player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.CocoCreateAnnotation.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.CocoCreateAnnotation.prototype.defaults = {
+    pause_on_write : true
+};
+
+IriSP.Widgets.CocoCreateAnnotation.prototype.messages = {
+    en: {
+        type_description: "Enter a new note..."
+    },
+    fr: {
+        type_description: "Prenez vos notes..."
+    }
+};
+
+IriSP.Widgets.CocoCreateAnnotation.prototype.template =
+    '<form class="Ldt-CocoCreateAnnotation-Form">' +
+    '  <input class="Ldt-CocoCreateAnnotation-Timecode" type="text" value="??:??">' +
+    '  <textarea class="Ldt-CocoCreateAnnotation-Text" autofocus placeholder="??:?? Notez ici"></textarea>' +
+    '</form>';
+
+IriSP.Widgets.CocoCreateAnnotation.prototype.draw = function () {
+    var _this = this;
+    var timecodeField,
+        textField;
+
+    this.previousInput = "";
+    this.renderTemplate();
+
+    timecodeField = this.$.find(".Ldt-CocoCreateAnnotation-Timecode");
+    textField = this.$.find(".Ldt-CocoCreateAnnotation-Text");
+
+    this.begin = new IriSP.Model.Time();
+    textField.on("change keyup input paste", this.functionWrapper("onTextChange"));
+    this.$.find("form").submit(this.functionWrapper("onSubmit"));
+};
+
+IriSP.Widgets.CocoCreateAnnotation.prototype.setBegin = function (t) {
+    this.begin = new IriSP.Model.Time(t || 0);
+    this.$.find(".Ldt-CocoCreateAnnotation-Timecode").val(this.begin.toString());
+};
+
+IriSP.Widgets.CocoCreateAnnotation.prototype.pauseOnWrite = function () {
+    if (this.pause_on_write && !this.media.getPaused()) {
+        this.media.pause();
+    }
+};
+
+IriSP.Widgets.CocoCreateAnnotation.prototype.onTextChange = function (e) {
+    if (e !== undefined && e.keyCode == 13 && !e.shiftKey) {
+        // Return: submit. Use shift-Return to insert a LF
+        this.onSubmit();
+        return true;
+    }
+    var _field = this.$.find(".Ldt-CocoCreateAnnotation-Text"),
+        _timecodeField = this.$.find(".Ldt-CocoCreateAnnotation-Timecode"),
+        _contents = _field.val();
+    _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
+    if (!!_contents) {
+        if (!this.previousInput) {
+            // Inputing text from an empty field, initialize timecode
+            this.setBegin(this.media.getCurrentTime());
+        }
+        _field.removeClass("empty");
+        _timecodeField.addClass("Ldt-CocoCreateAnnotation-Timecode-Active");
+    } else {
+        _field.addClass("empty");
+        _timecodeField.removeClass("Ldt-CocoCreateAnnotation-Timecode-Active");
+    }
+    this.pauseOnWrite();
+    this.previousInput = _contents;
+    return !!_contents;
+};
+
+IriSP.Widgets.CocoCreateAnnotation.prototype.onSubmit = function () {
+    var _this = this,
+        _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* We create a List to send to the server that will contains the annotation */
+        _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), /* We create a source object using a specific serializer for export */
+        _annotation = new IriSP.Model.Annotation(false, _export), /* We create an annotation in the source with a generated ID (param. false) */
+        _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type, true), /* We get the AnnotationType in which the annotation will be added */
+        _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, _export)), /* If it doesn't already exists, we create it */
+        _url = Mustache.to_html(this.api_endpoint_template, {id: this.source.projectId}); /* We make the url to send the request to, must include project id */
+
+    /* If we created an AnnotationType on the spot ... */
+    if (!_annotationTypes.length) {
+        /* ... We must not send its id to the server ... */
+        _annotationType.dont_send_id = true;
+        /* ... And we must include its title. */
+        _annotationType.title = this.annotation_type;
+    }
+
+    /*
+     * Will fill the generated annotation object's data
+     * WARNING: If we're on a MASHUP, these datas must refer the ORIGINAL MEDIA
+     * */
+    _annotation.setMedia(this.source.currentMedia.id); /* Annotated media ID */
+
+    _annotation.setBeginEnd(this.begin, this.begin);
+    _annotation.setAnnotationType(_annotationType.id); /* Annotation type ID */
+
+    _annotation.created = new Date(); /* Annotation creation date */
+    _annotation.description = this.$.find(".Ldt-CocoCreateAnnotation-Text").val().trim();
+    _annotation.title = "";
+
+    if (this.project_id != "") {
+        /* Project id, only if it's been specifiec in the config */
+        _annotation.project_id = this.project_id;
+    }
+
+    _annotation.creator = this.creator_name;
+    _exportedAnnotations.push(_annotation); /* Ajout de l'annotation à la liste à exporter */
+
+    if (_url !== "") {
+        _exportedAnnotations.push(_annotation); /* We add the annotation in the list to export */
+        _export.addList("annotation", _exportedAnnotations); /* We add the list to the source object */
+        /* We send the AJAX request to the server ! */
+        IriSP.jQuery.ajax({
+            url: _url,
+            type: this.api_method,
+            contentType: 'application/json',
+            data: _export.serialize(), /* Source is serialized */
+            success: function (_data) {
+                _this.showScreen('Saved');
+                if (_this.after_send_timeout) {
+                    window.setTimeout(
+                        function () {
+                            _this.close_after_send
+                                ? _this.player.trigger("CocoCreateAnnotation.hide")
+                                : _this.player.trigger("CocoCreateAnnotation.show");
+                        },
+                        _this.after_send_timeout
+                    );
+                }
+                _export.getAnnotations().removeElement(_annotation, true); /* We delete the sent annotation to avoid redundancy */
+                _export.deSerialize(_data); /* Data deserialization */
+                _this.source.merge(_export); /* We merge the deserialized data with the current source data */
+                if (_this.pause_on_write && _this.media.getPaused()) {
+                    _this.media.play();
+                }
+                _this.player.trigger("AnnotationsList.refresh");
+            },
+            error: function (_xhr, _error, _thrown) {
+                IriSP.log("Error when sending annotation", _thrown);
+                _export.getAnnotations().removeElement(_annotation, true);
+                _this.showScreen('Error');
+                window.setTimeout(function () {
+                    _this.showScreen("Main");
+                },
+                                  (_this.after_send_timeout || 5000));
+            }
+        });
+        this.showScreen('Wait');
+    };
+    return false;
+};

From c9ec475b91aa02171cdce646802fc78653552142 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 2 Nov 2015 16:15:28 +0100
Subject: [PATCH 066/204] Append video element to container rather than
 replacing all content

---
 src/js/html-player.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/html-player.js b/src/js/html-player.js
index fca04d82..0b270717 100644
--- a/src/js/html-player.js
+++ b/src/js/html-player.js
@@ -42,7 +42,7 @@ IriSP.htmlPlayer = function (media, jqselector, options) {
         });
         videoEl.append(_trackNode);
     }
-    jqselector.html(videoEl);
+    jqselector.append(videoEl);
 
     var mediaEl = videoEl[0];
 

From 3c4e35fefefe8c5701c9f50447da118bf772e451 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 2 Nov 2015 16:36:52 +0100
Subject: [PATCH 067/204] Allow to specify PIP position

---
 src/widgets/SlideVideoPlayer.css | 52 ++++++++++++++++++++++++++------
 src/widgets/SlideVideoPlayer.js  | 17 +++++++++--
 2 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 19fe2b48..d6913309 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -26,13 +26,26 @@
 .Ldt-SlideVideoPlayer-pip-main .Ldt-ImageDisplay-Container {
     min-height: 30vw;
 }
+/* pip-pip is -br (bottom right) by default */
 .Ldt-SlideVideoPlayer-pip-pip {
     position: absolute;
     width: 30% !important;
     height: 30%;
+    z-index: 3;
+    bottom: 2px;
     right: 2px;
+}
+.Ldt-SlideVideoPlayer-pip-bl {
+    left: 2px;
     bottom: 2px;
-    z-index: 3;
+}
+.Ldt-SlideVideoPlayer-pip-tr {
+    top: 2px;
+    right: 2px;
+}
+.Ldt-SlideVideoPlayer-pip-tl {
+    top: 2px;
+    left: 2px;
 }
 
 .Ldt-SlideVideoPlayer h2 {
@@ -40,20 +53,41 @@
 }
 .Ldt-SlideVideoPlayer-pip-menu {
     position: absolute;
-    bottom: 2px;
-    right: 2px;
+    bottom: 0;
+    top: 0;
+    right: 0;
+    left: 0;
     z-index: 10;
     display: none;
 }
-.Ldt-SlideVideoPlayer:hover .Ldt-SlideVideoPlayer-pip-menu {
-    background-color: #000;
-    opacity: .5;
-    display: inline-block;
-}
-
 .Ldt-SlideVideoPlayer-pip-menu-toggle {
+    position: absolute;
     width: 18px;
     height: 18px;
     cursor: pointer;
+    z-index: 10;
     background-image: url(img/pip_toggle.svg);
+    display: none;
+}
+.Ldt-SlideVideoPlayer-pip-pip:hover .Ldt-SlideVideoPlayer-pip-menu-toggle {
+    background-color: #000;
+    opacity: .5;
+    display: inline-block;
+}
+
+.Ldt-SlideVideoPlayer-pip-menu-toggle-br {
+    bottom: 2px;
+    right: 2px;
+}
+.Ldt-SlideVideoPlayer-pip-menu-toggle-tr {
+    top: 2px;
+    right: 2px;
+}
+.Ldt-SlideVideoPlayer-pip-menu-toggle-tl {
+    top: 2px;
+    left: 2px;
+}
+.Ldt-SlideVideoPlayer-pip-menu-toggle-bl {
+    bottom: 2px;
+    left: 2px;
 }
diff --git a/src/widgets/SlideVideoPlayer.js b/src/widgets/SlideVideoPlayer.js
index f8753a89..af4f2798 100644
--- a/src/widgets/SlideVideoPlayer.js
+++ b/src/widgets/SlideVideoPlayer.js
@@ -43,9 +43,14 @@ IriSP.Widgets.SlideVideoPlayer.prototype.draw = function() {
     );
 
     if (_this.mode == 'pip') {
-        _this.$.find(".Ldt-SlideVideoPlayer").append('<div class="Ldt-SlideVideoPlayer-pip-menu"><div class="Ldt-SlideVideoPlayer-pip-menu-toggle"></div></div>');
+        _this.$.find(".Ldt-SlideVideoPlayer-panel").each(function () {
+            IriSP.jQuery(this).append('<div class="Ldt-SlideVideoPlayer-pip-menu"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="br"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="tr"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="tl"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="bl"></div>');
+        });
+        _this.$.find(".Ldt-SlideVideoPlayer-pip-menu-toggle").each(function() {
+            IriSP.jQuery(this).addClass("Ldt-SlideVideoPlayer-pip-menu-toggle-" + this.dataset.position);
+        });
         _this.$.on("click", ".Ldt-SlideVideoPlayer-pip-menu-toggle", function () {
-            _this.toggleMainDisplay();
+            _this.setPipPosition(this.dataset.position);
         });
         window.setTimeout(function () {
             _this.setMainDisplay('video');
@@ -83,4 +88,10 @@ IriSP.Widgets.SlideVideoPlayer.prototype.setMainDisplay = function(video_or_slid
     };
     main.removeClass('Ldt-SlideVideoPlayer-pip-pip').addClass('Ldt-SlideVideoPlayer-pip-main');
     pip.removeClass('Ldt-SlideVideoPlayer-pip-main').addClass('Ldt-SlideVideoPlayer-pip-pip');
-}
+};
+
+IriSP.Widgets.SlideVideoPlayer.prototype.setPipPosition = function(position) {
+    var pip = this.$.find(".Ldt-SlideVideoPlayer-pip-pip");
+    pip.removeClass('Ldt-SlideVideoPlayer-pip-tl Ldt-SlideVideoPlayer-pip-tr Ldt-SlideVideoPlayer-pip-bl Ldt-SlideVideoPlayer-pip-br')
+        .addClass('Ldt-SlideVideoPlayer-pip-' + position);
+};

From e8f71f4dfc86a0c762bafcbf96e13731f51fc00e Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 2 Nov 2015 16:38:59 +0100
Subject: [PATCH 068/204] .Ldt-SlideVideoPlayer-pip-menu is not used anymore

---
 src/widgets/SlideVideoPlayer.css | 9 ---------
 src/widgets/SlideVideoPlayer.js  | 2 +-
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index d6913309..81eebc4e 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -51,15 +51,6 @@
 .Ldt-SlideVideoPlayer h2 {
     display: none;
 }
-.Ldt-SlideVideoPlayer-pip-menu {
-    position: absolute;
-    bottom: 0;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 10;
-    display: none;
-}
 .Ldt-SlideVideoPlayer-pip-menu-toggle {
     position: absolute;
     width: 18px;
diff --git a/src/widgets/SlideVideoPlayer.js b/src/widgets/SlideVideoPlayer.js
index af4f2798..afe8c31c 100644
--- a/src/widgets/SlideVideoPlayer.js
+++ b/src/widgets/SlideVideoPlayer.js
@@ -44,7 +44,7 @@ IriSP.Widgets.SlideVideoPlayer.prototype.draw = function() {
 
     if (_this.mode == 'pip') {
         _this.$.find(".Ldt-SlideVideoPlayer-panel").each(function () {
-            IriSP.jQuery(this).append('<div class="Ldt-SlideVideoPlayer-pip-menu"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="br"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="tr"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="tl"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="bl"></div>');
+            IriSP.jQuery(this).append('<div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="br"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="tr"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="tl"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="bl"></div>');
         });
         _this.$.find(".Ldt-SlideVideoPlayer-pip-menu-toggle").each(function() {
             IriSP.jQuery(this).addClass("Ldt-SlideVideoPlayer-pip-menu-toggle-" + this.dataset.position);

From 37f2ed4869a001d79fc1cd5000d38ce9eb750c6e Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 2 Nov 2015 16:44:15 +0100
Subject: [PATCH 069/204] Allow to toggle main display

---
 src/widgets/SlideVideoPlayer.css | 6 ++++++
 src/widgets/SlideVideoPlayer.js  | 6 +++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 81eebc4e..6132b1b1 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -82,3 +82,9 @@
     bottom: 2px;
     left: 2px;
 }
+.Ldt-SlideVideoPlayer-pip-menu-toggle-main {
+    top: 50%;
+    top: calc(50% - 9px);
+    left: 50%;
+    left: calc(50% - 9px);
+}
diff --git a/src/widgets/SlideVideoPlayer.js b/src/widgets/SlideVideoPlayer.js
index afe8c31c..818ddbfc 100644
--- a/src/widgets/SlideVideoPlayer.js
+++ b/src/widgets/SlideVideoPlayer.js
@@ -44,7 +44,7 @@ IriSP.Widgets.SlideVideoPlayer.prototype.draw = function() {
 
     if (_this.mode == 'pip') {
         _this.$.find(".Ldt-SlideVideoPlayer-panel").each(function () {
-            IriSP.jQuery(this).append('<div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="br"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="tr"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="tl"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="bl"></div>');
+            IriSP.jQuery(this).append('<div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="br"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="tr"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="tl"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="bl"></div><div class="Ldt-SlideVideoPlayer-pip-menu-toggle" data-position="main">');
         });
         _this.$.find(".Ldt-SlideVideoPlayer-pip-menu-toggle").each(function() {
             IriSP.jQuery(this).addClass("Ldt-SlideVideoPlayer-pip-menu-toggle-" + this.dataset.position);
@@ -91,6 +91,10 @@ IriSP.Widgets.SlideVideoPlayer.prototype.setMainDisplay = function(video_or_slid
 };
 
 IriSP.Widgets.SlideVideoPlayer.prototype.setPipPosition = function(position) {
+    if (position == 'main') {
+        this.toggleMainDisplay();
+        return;
+    };
     var pip = this.$.find(".Ldt-SlideVideoPlayer-pip-pip");
     pip.removeClass('Ldt-SlideVideoPlayer-pip-tl Ldt-SlideVideoPlayer-pip-tr Ldt-SlideVideoPlayer-pip-bl Ldt-SlideVideoPlayer-pip-br')
         .addClass('Ldt-SlideVideoPlayer-pip-' + position);

From 4896a5c04d55d20f2e0cda3917dbc6978425e133 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 2 Nov 2015 16:51:58 +0100
Subject: [PATCH 070/204] Make pip toggle buttons 32x32

---
 src/widgets/SlideVideoPlayer.css | 4 ++--
 src/widgets/img/pip_toggle.svg   | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 6132b1b1..41cd0031 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -53,8 +53,8 @@
 }
 .Ldt-SlideVideoPlayer-pip-menu-toggle {
     position: absolute;
-    width: 18px;
-    height: 18px;
+    width: 32px;
+    height: 32px;
     cursor: pointer;
     z-index: 10;
     background-image: url(img/pip_toggle.svg);
diff --git a/src/widgets/img/pip_toggle.svg b/src/widgets/img/pip_toggle.svg
index baa907a1..75278974 100644
--- a/src/widgets/img/pip_toggle.svg
+++ b/src/widgets/img/pip_toggle.svg
@@ -8,9 +8,9 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="5.0797176mm"
-   height="5.0799999mm"
-   viewBox="0 0 17.998999 18"
+   width="32px"
+   height="32px"
+   viewBox="0 0 18 18"
    id="svg19931"
    version="1.1"
    inkscape:version="0.91 r13725"

From 96ac63de35cfeb18e745452822a2925cf18bd6fc Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 2 Nov 2015 17:04:02 +0100
Subject: [PATCH 071/204] l10nize EnrichedPlan

---
 src/widgets/EnrichedPlan.js | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 320dafec..7faddc0f 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -7,11 +7,21 @@ IriSP.Widgets.EnrichedPlan.prototype = new IriSP.Widgets.Widget();
 IriSP.Widgets.EnrichedPlan.prototype.messages = {
     en: {
         delete_annotation: "Delete note",
-        confirm_delete_message: "You are about to delete {{ annotation.title }}. Are you sure you want to delete it?"
+        confirm_delete_message: "You are about to delete {{ annotation.title }}. Are you sure you want to delete it?",
+        teacher_notes: "Teacher notes",
+        other_notes: "Other Notes",
+        own_notes: "Pers. notes",
+        slides: "Slides",
+        search: "Search..."
     },
     fr: {
         delete_annotation: "Supprimer la note",
-        confirm_delete_message: "Vous allez supprimer {{ annotation.title }}. Êtes-vous certain(e) ?"
+        confirm_delete_message: "Vous allez supprimer {{ annotation.title }}. Êtes-vous certain(e) ?",
+        teacher_notes: "Notes Enseignant",
+        other_notes: "Notes Autres",
+        own_notes: "Notes perso.",
+        slides: "Diapo",
+        search: "Recherchez..."
     }
 };
 
@@ -32,15 +42,15 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
     + '<form class="Ldt-EnrichedPlan-Controls">'
     + '{{#show_controls}}'
     + ' <input id="{{prefix}}teacher_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Teacher" {{#show_teacher_notes}}checked{{/show_teacher_notes}} type="checkbox">'
-    + ' <label for="{{prefix}}teacher_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Teacher">Notes Enseignant</label>'
+    + ' <label for="{{prefix}}teacher_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Teacher">{{ l10n.teacher_notes }}</label>'
     + ' <input id="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Other" {{#show_other_notes}}checked{{/show_other_notes}} type="checkbox">'
-    + ' <label for="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Other">Notes Autres</label>'
-    + ' <input id="{{prefix}}simplified_plan_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Own" {{#show_own_notes}}checked{{/show_own_notes}} type="checkbox">'
-    + ' <label for="{{prefix}}simplified_plan_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Own">Notes perso.</label>'
+    + ' <label for="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Other">{{ l10n.other_notes }}</label>'
+    + ' <input id="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Own" {{#show_own_notes}}checked{{/show_own_notes}} type="checkbox">'
+    + ' <label for="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Own">{{ l10n.own_notes }}</label>'
     + ' <input id="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Slide-Display" {{#show_slides}}checked{{/show_slides}} type="checkbox">'
-    + ' <label for="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Slide-Display">Diapo<br/>&nbsp;</label>'
+    + ' <label for="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Slide-Display">{{ l10n.slides }}<br/>&nbsp;</label>'
     + '{{/show_controls}}'
-    + ' <input class="Ldt-EnrichedPlan-Search-Input {{^show_controls}}Ldt-EnrichedPlan-Search-Input-Full{{/show_controls}}" type="search" incremental placeholder="Recherchez"/>'
+    + ' <input class="Ldt-EnrichedPlan-Search-Input {{^show_controls}}Ldt-EnrichedPlan-Search-Input-Full{{/show_controls}}" type="search" incremental placeholder="{{ l10n.search }}"/>'
     + ' </form>'
     + '<div class="Ldt-EnrichedPlan-Content"></div>'
     + '</div>';

From f63a09340c79148a40703ac68324dd42ca3a47a2 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 2 Nov 2015 17:06:03 +0100
Subject: [PATCH 072/204] l10nize CocoCreateAnnotation.

---
 src/widgets/CocoCreateAnnotation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/CocoCreateAnnotation.js b/src/widgets/CocoCreateAnnotation.js
index 71319ecd..24b4b501 100644
--- a/src/widgets/CocoCreateAnnotation.js
+++ b/src/widgets/CocoCreateAnnotation.js
@@ -20,7 +20,7 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.messages = {
 IriSP.Widgets.CocoCreateAnnotation.prototype.template =
     '<form class="Ldt-CocoCreateAnnotation-Form">' +
     '  <input class="Ldt-CocoCreateAnnotation-Timecode" type="text" value="??:??">' +
-    '  <textarea class="Ldt-CocoCreateAnnotation-Text" autofocus placeholder="??:?? Notez ici"></textarea>' +
+    '  <textarea class="Ldt-CocoCreateAnnotation-Text" autofocus placeholder="??:?? {{ l10n.type_description }}"></textarea>' +
     '</form>';
 
 IriSP.Widgets.CocoCreateAnnotation.prototype.draw = function () {

From 1d1c11d49d2d4643dd3162beea12a81120546988 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 9 Nov 2015 14:51:28 +0100
Subject: [PATCH 073/204] Use absolute for filtered out elements

so as to avoid line break between timecode and content
---
 src/widgets/EnrichedPlan.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 9516e281..989d1af5 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -11,6 +11,7 @@
 
 .Ldt-EnrichedPlan-SlideItem.filtered_out {
     max-height: 0;
+    position: absolute;
     overflow: hidden;
 }
 

From f9fd7290db15b1fb61ce61f15278b9c42ec11b0d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 9 Nov 2015 15:56:31 +0100
Subject: [PATCH 074/204] Display timecode left of input

---
 src/widgets/CocoCreateAnnotation.css | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/widgets/CocoCreateAnnotation.css b/src/widgets/CocoCreateAnnotation.css
index 832bbc12..67593338 100644
--- a/src/widgets/CocoCreateAnnotation.css
+++ b/src/widgets/CocoCreateAnnotation.css
@@ -5,27 +5,19 @@
     position: relative;
 }
 .Ldt-CocoCreateAnnotation-Text {
-    width: 100%;
+    width: calc(100% - 32px);
+    position: relative;
+    left: 36px;
 }
 .Ldt-CocoCreateAnnotation-Timecode {
     position: absolute;
-    border-radius: 2px;
+    font-size: 12px;
     color: #999;
     width: 4em;
     border: none;
     background-color: #fff;
     background-color: rgba(255, 255, 255, 1);
-    max-height: 0;
-    top: 0;
-    -webkit-transition: all 1s ease;
-    -moz-transition: all 1s ease;
-    -ms-transition: all 1s ease;
-    -o-transition: all 1s ease;
-    transition: all 1s ease;
 }
 .Ldt-CocoCreateAnnotation-Timecode-Active {
     display: inline-block;
-    max-height: 1.1em;
-    top: -1.1em;
-    border: 1px solid #77e;
 }

From 05d4f267e6bbec6ebaec8c8c3ebfd76efe1aac08 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 9 Nov 2015 15:59:57 +0100
Subject: [PATCH 075/204] Modify timecode font size

---
 src/widgets/CocoCreateAnnotation.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/widgets/CocoCreateAnnotation.css b/src/widgets/CocoCreateAnnotation.css
index 67593338..7a158941 100644
--- a/src/widgets/CocoCreateAnnotation.css
+++ b/src/widgets/CocoCreateAnnotation.css
@@ -11,7 +11,7 @@
 }
 .Ldt-CocoCreateAnnotation-Timecode {
     position: absolute;
-    font-size: 12px;
+    font-size: 9px;
     color: #999;
     width: 4em;
     border: none;
@@ -20,4 +20,6 @@
 }
 .Ldt-CocoCreateAnnotation-Timecode-Active {
     display: inline-block;
+    font-weight: bold;
+    font-size: 12px;
 }

From 679f60f20c9d66382a8b400a6bd0ad11f51c307f Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 9 Nov 2015 16:00:06 +0100
Subject: [PATCH 076/204] Update timecode if there is no input

---
 src/widgets/CocoCreateAnnotation.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/widgets/CocoCreateAnnotation.js b/src/widgets/CocoCreateAnnotation.js
index 24b4b501..4e7854cc 100644
--- a/src/widgets/CocoCreateAnnotation.js
+++ b/src/widgets/CocoCreateAnnotation.js
@@ -37,6 +37,13 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.draw = function () {
     this.begin = new IriSP.Model.Time();
     textField.on("change keyup input paste", this.functionWrapper("onTextChange"));
     this.$.find("form").submit(this.functionWrapper("onSubmit"));
+
+    this.onMediaEvent("timeupdate", function (_time) {
+        // Update timecode if description is empty
+        if (textField.val().trim() == "") {
+            _this.setBegin(_time);
+        };
+    });
 };
 
 IriSP.Widgets.CocoCreateAnnotation.prototype.setBegin = function (t) {

From d2f6c48c367938e1ca610477d59400ebd5d3f366 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 9 Nov 2015 16:24:19 +0100
Subject: [PATCH 077/204] Use same font size for active timecode

---
 src/widgets/CocoCreateAnnotation.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/widgets/CocoCreateAnnotation.css b/src/widgets/CocoCreateAnnotation.css
index 7a158941..a2fa4f53 100644
--- a/src/widgets/CocoCreateAnnotation.css
+++ b/src/widgets/CocoCreateAnnotation.css
@@ -21,5 +21,4 @@
 .Ldt-CocoCreateAnnotation-Timecode-Active {
     display: inline-block;
     font-weight: bold;
-    font-size: 12px;
 }

From d88b4dbf37dfd71d41412a72e6339e55b5515e07 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 9 Nov 2015 16:28:59 +0100
Subject: [PATCH 078/204] Display note timecodes if thumbnail is hidden

---
 src/widgets/EnrichedPlan.css | 20 +++++++++++++++++++-
 src/widgets/EnrichedPlan.js  |  2 +-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 989d1af5..7da1f8c6 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -15,7 +15,8 @@
     overflow: hidden;
 }
 
-.Ldt-EnrichedPlan-SlideTimecode {
+.Ldt-EnrichedPlan-SlideTimecode,
+.Ldt-EnrichedPlan-NoteTimecode {
     display: inline-block;
     width: 24px;
     color: #999 !important;
@@ -23,6 +24,18 @@
     vertical-align: top;
 }
 
+.Ldt-EnrichedPlan-SlideNotes {
+    position: relative;
+}
+
+.Ldt-EnrichedPlan-NoteTimecode {
+    left: -35px;
+    position: absolute;
+    font-family: Roboto !important;
+    padding-top: 8px;
+    display: none;
+}
+
 .Ldt-EnrichedPlan-SlideThumbnail {
     display: inline-block;
     width: 180px;
@@ -47,6 +60,11 @@
 
 .Ldt-EnrichedPlan-SlideThumbnail.filtered_out + .Ldt-EnrichedPlan-SlideContent {
     width: calc(100% - 40px);
+    margin-left: 8px;
+}
+
+.Ldt-EnrichedPlan-SlideThumbnail.filtered_out + .Ldt-EnrichedPlan-SlideContent .Ldt-EnrichedPlan-NoteTimecode {
+    display: inline-block;
 }
 
 .Ldt-EnrichedPlan-SlideTitle {
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 7faddc0f..056e314d 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -65,7 +65,7 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '  </div>'
     + '</div>';
 
-IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}}"><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Delete"></span></span>{{/can_edit}}</div>';
+IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}</div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
     var _this = this;

From bbd555852ccf902696ccef69065b6957f0a23312 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 10 Nov 2015 16:01:03 +0100
Subject: [PATCH 079/204] Convert EnrichedPlan control menu to dropdown menu

---
 src/widgets/EnrichedPlan.css  | 49 ++++++++++++++++++++++++++++++-----
 src/widgets/EnrichedPlan.js   | 38 +++++++++++++++++++--------
 src/widgets/img/hamburger.svg |  4 +++
 3 files changed, 74 insertions(+), 17 deletions(-)
 create mode 100644 src/widgets/img/hamburger.svg

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 7da1f8c6..e6dcb710 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -138,8 +138,6 @@
     height: 36px;
     padding: 9px 0 6px 0;
     border-bottom: 1px solid #000;
-    overflow-y: hidden;
-    overflow-x: hidden;
     position: absolute;
     top: 0;
     left: 0;
@@ -159,14 +157,53 @@
     position: relative;
 }
 .Ldt-EnrichedPlan-Controls .Ldt-EnrichedPlan-Search-Input {
-    float: right;
     font-family: Roboto;
     font-size: 16px;
-    width: calc(100% - 340px);
+    width: 95%;
+    width: calc(100% - 32px);
     outline: none;
 }
-.Ldt-EnrichedPlan-Controls .Ldt-EnrichedPlan-Search-Input-Full {
-    width: 95%;
+
+.Ldt-EnrichedPlan-ControlMenu {
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    right: 4px;
+    background-color: #fff;
+}
+
+.Ldt-EnrichedPlan-Toggle {
+    display: flex;
+    background-image: url(img/hamburger.svg);
+    background-size: cover;
+    width: 24px;
+    height: 24px;
+}
+
+.Ldt-EnrichedPlan-ControlMenuHome + ul {
+    position: absolute;
+    display: none;
+}
+.Ldt-EnrichedPlan-ControlMenuHome:checked + ul {
+    display: flex;
+    flex-direction: column;
+    margin-top: -13px;
+}
+.Ldt-EnrichedPlan-ControlMenu ul {
+  float: right;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  position: relative;
+  background-color: #fff;
+}
+
+.Ldt-EnrichedPlan-ControlMenu ul li {
+  margin: 4px 10px;
+  display: inline-block;
 }
 
 .Ldt-EnrichedPlan-Note.non_matching {
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 056e314d..c7c98b86 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -39,20 +39,36 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
 
 IriSP.Widgets.EnrichedPlan.prototype.template =
       '<div class="Ldt-EnrichedPlan-Container">'
+    + '<div class="Ldt-EnrichedPlan-Content"></div>'
     + '<form class="Ldt-EnrichedPlan-Controls">'
+    + '<input class="Ldt-EnrichedPlan-Search-Input {{^show_controls}}Ldt-EnrichedPlan-Search-Input-Full{{/show_controls}}" type="search" incremental placeholder="{{ l10n.search }}"/>'
     + '{{#show_controls}}'
-    + ' <input id="{{prefix}}teacher_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Teacher" {{#show_teacher_notes}}checked{{/show_teacher_notes}} type="checkbox">'
-    + ' <label for="{{prefix}}teacher_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Teacher">{{ l10n.teacher_notes }}</label>'
-    + ' <input id="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Other" {{#show_other_notes}}checked{{/show_other_notes}} type="checkbox">'
-    + ' <label for="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Other">{{ l10n.other_notes }}</label>'
-    + ' <input id="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Own" {{#show_own_notes}}checked{{/show_own_notes}} type="checkbox">'
-    + ' <label for="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Own">{{ l10n.own_notes }}</label>'
-    + ' <input id="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Slide-Display" {{#show_slides}}checked{{/show_slides}} type="checkbox">'
-    + ' <label for="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Slide-Display">{{ l10n.slides }}<br/>&nbsp;</label>'
+    + '<div class="Ldt-EnrichedPlan-ControlMenu">'
+    + ' <label for="{{ prefix }}control_menu" class="Ldt-EnrichedPlan-Toggle"></label>'
+    + ' <input type="checkbox" class="Ldt-EnrichedPlan-ControlMenuHome" id="{{ prefix }}control_menu"/>'
+    + '<ul>'
+    + ' <li>'
+    + '  <input id="{{prefix}}teacher_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Teacher" {{#show_teacher_notes}}checked{{/show_teacher_notes}} type="checkbox">'
+    + '  <label for="{{prefix}}teacher_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Teacher">{{ l10n.teacher_notes }}</label>'
+    + ' </li>'
+    + ' <li>'
+    + '  <input id="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Other" {{#show_other_notes}}checked{{/show_other_notes}} type="checkbox">'
+    + '  <label for="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Other">{{ l10n.other_notes }}</label>'
+    + ' </li>'
+    + ' <li>'
+    + '  <input id="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Own" {{#show_own_notes}}checked{{/show_own_notes}} type="checkbox">'
+    + '  <label for="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Own">{{ l10n.own_notes }}</label>'
+    + ' </li>'
+    + ' <li>'
+    + '  <input id="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Slide-Display" {{#show_slides}}checked{{/show_slides}} type="checkbox">'
+    + '  <label for="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Slide-Display">{{ l10n.slides }}<br/>&nbsp;</label>'
+    + ' </li>'
+    + ' </ul>'
+    + '</li>'
+    + '</ul>'
+    + '</div>'
     + '{{/show_controls}}'
-    + ' <input class="Ldt-EnrichedPlan-Search-Input {{^show_controls}}Ldt-EnrichedPlan-Search-Input-Full{{/show_controls}}" type="search" incremental placeholder="{{ l10n.search }}"/>'
-    + ' </form>'
-    + '<div class="Ldt-EnrichedPlan-Content"></div>'
+    + '</form>'
     + '</div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
diff --git a/src/widgets/img/hamburger.svg b/src/widgets/img/hamburger.svg
new file mode 100644
index 00000000..0960513c
--- /dev/null
+++ b/src/widgets/img/hamburger.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="256px" height="256px" viewBox="0 0 256 256">
+  <path id="menu-icon" d="M231,52H25v-36h206z M231,112H25v-36h206z M231,174H25v-36h206" />
+</svg>

From 4eca6c138f378f3ee096afd7cf77066c7ecc184d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 10 Nov 2015 16:13:27 +0100
Subject: [PATCH 080/204] Hide input field

---
 src/widgets/EnrichedPlan.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index e6dcb710..da88f061 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -183,6 +183,11 @@
     height: 24px;
 }
 
+.Ldt-EnrichedPlan-ControlMenuHome {
+    position: absolute;
+    left: -9999px;
+}
+
 .Ldt-EnrichedPlan-ControlMenuHome + ul {
     position: absolute;
     display: none;
@@ -190,7 +195,6 @@
 .Ldt-EnrichedPlan-ControlMenuHome:checked + ul {
     display: flex;
     flex-direction: column;
-    margin-top: -13px;
 }
 .Ldt-EnrichedPlan-ControlMenu ul {
   float: right;

From aa50aa92a6635db0dc888dafe00d15dc3dce6d4a Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 10 Nov 2015 16:57:49 +0100
Subject: [PATCH 081/204] Modify edit icon size

---
 src/widgets/EnrichedPlan.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index da88f061..abbaec2a 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -236,7 +236,7 @@
 .Ldt-EnrichedPlan-Control-Checkbox:checked + label:before {
   content: '';
   position: absolute;
-  left:0;
+  left: 0;
   top: 2px;
   width: 13px;
   height: 13px;
@@ -293,8 +293,9 @@ label:hover:before {
     display: inline-block;
     width: 24px;
     height: 24px;
-    margin: 7px;
+    margin: 3px;
     background-position: center;
+    background-size: cover;
     background-repeat: no-repeat;
 }
 

From 7ae824a72f6ea09b88004194ad6bae05c6e6a2fb Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 10 Nov 2015 17:16:10 +0100
Subject: [PATCH 082/204] Use svg file for checkboxes

Relying on standard fonts is too random
---
 src/widgets/EnrichedPlan.css | 9 +++++++--
 src/widgets/img/checked.svg  | 4 ++++
 2 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 src/widgets/img/checked.svg

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index abbaec2a..c43403f2 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -245,12 +245,17 @@
 /* checked mark aspect */
 .Ldt-EnrichedPlan-Control-Checkbox:not(:checked) + label:after,
 .Ldt-EnrichedPlan-Control-Checkbox:checked + label:after {
-    content: '\2a2f';
+    content: '';
+    width: 11px;
+    height: 11px;
+    background-image: url(img/checked.svg);
+    background-size: cover;
+    background-position: center;
     font-size: 20px;
     font-style: normal;
     position: absolute;
     top: 3px;
-    left: -1px;
+    left: 1px;
     transition: all .2s;
 }
 /* checked mark aspect changes */
diff --git a/src/widgets/img/checked.svg b/src/widgets/img/checked.svg
new file mode 100644
index 00000000..2e22cfef
--- /dev/null
+++ b/src/widgets/img/checked.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="256px" height="256px" viewBox="0 0 256 256">
+  <path id="cross" stroke-width="32" stroke="#000" d="M0,0 256,256M0,256 256,0z" />
+</svg>

From 451496771b16896b03e72d2b24de360917a1e67b Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 20 Nov 2015 14:53:27 +0100
Subject: [PATCH 083/204] Remove whitespace

---
 src/widgets/AdaptivePlayer.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/widgets/AdaptivePlayer.js b/src/widgets/AdaptivePlayer.js
index 98b0bb4d..0e89ff83 100644
--- a/src/widgets/AdaptivePlayer.js
+++ b/src/widgets/AdaptivePlayer.js
@@ -11,17 +11,17 @@ IriSP.Widgets.AdaptivePlayer.prototype.defaults = {
 };
 
 IriSP.Widgets.AdaptivePlayer.prototype.draw = function() {
-    
+
     if (typeof this.video === "undefined") {
         this.video = this.media.video;
     }
-    
+
     var _props = [ "autostart", "video", "height", "width", "url_transform" ],
         _opts = {},
         _canPlayType = document.createElement('video').canPlayType(this.mime_type);
-    
+
     _opts.type = (_canPlayType !== "no") ? this.normal_player : this.fallback_player;
-    
+
     for (var i = 0; i < _props.length; i++) {
         if (typeof this[_props[i]] !== "undefined") {
             _opts[_props[i]] = this[_props[i]];
@@ -29,5 +29,4 @@ IriSP.Widgets.AdaptivePlayer.prototype.draw = function() {
     }
 
     this.insertSubwidget(this.$, _opts);
-    
-};
\ No newline at end of file
+};

From 49e5456dbe2745833d0d1199a4fb78dc783cba3b Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 26 Nov 2015 15:42:47 +0100
Subject: [PATCH 084/204] Define BaseElement.getTitleOrDescription

---
 src/js/model.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/js/model.js b/src/js/model.js
index 4f6bf7f6..2af7018e 100644
--- a/src/js/model.js
+++ b/src/js/model.js
@@ -542,6 +542,16 @@ IriSP.Model = (function (ns) {
         });
     };
 
+    /**
+     * Return a short surrogate for the element:
+     * either its title or the first line of its description
+     */
+    BaseElement.prototype.getTitleOrDescription = function () {
+        var t = this.title || this.description || "";
+        t = t.split(/\n/)[0];
+        return t;
+    };
+
     BaseElement.prototype.on = function(_event, _callback) {
         if (typeof this.__events[_event] === "undefined") {
             this.__events[_event] = [];

From 0cb1a54089a8ef2ee8dd140a5ee38c6dec2a6988 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 26 Nov 2015 15:42:57 +0100
Subject: [PATCH 085/204] Use .getTitleOrDescription for notes

---
 src/widgets/EnrichedPlan.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index c7c98b86..728db8fb 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -138,7 +138,7 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
     _slides.forEach(function (slide) {
         var _html = Mustache.to_html(_this.slideTemplate, {
             id : slide.id,
-            atitle : IriSP.textFieldHtml(slide.title),
+            atitle : IriSP.textFieldHtml(slide.getTitleOrDescription()),
             level: (slide.content !== undefined && slide.content.data !== undefined) ? (slide.content.data.level || 1) : 1,
             begin : slide.begin.toString(),
             begintc: slide.begin.milliseconds,
@@ -147,12 +147,12 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
             notes: slide.annotations.map(function (a) {
                 return Mustache.to_html(_this.annotationTemplate, {
                     id: a.id,
-                    text: IriSP.textFieldHtml(a.description || a.title),
+                    text: IriSP.textFieldHtml(a.getTitleOrDescription()),
                     url: document.location.href.replace(/#.*$/, '') + '#id=' + a.id + '&t=' + (a.begin / 1000.0),
                     author: a.creator,
                     begin: a.begin.toString(),
                     begintc: a.begin.milliseconds,
-                    atitle: a.title.slice(0, 20),
+                    atitle: a.getTitleOrDescription().slice(0, 20),
                     can_edit: a.meta['coco:can_edit'],
                     category: "Ldt-EnrichedPlan-Note-" + note_category(a),
                     filtered: ((note_category(a) == 'Own' && !_this.show_own_notes)

From d6269827ba83f2b1ab2109c5bac499bfabc6cdc7 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 26 Nov 2015 15:43:25 +0100
Subject: [PATCH 086/204] Specify method for posting annotation

---
 src/widgets/CocoCreateAnnotation.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/widgets/CocoCreateAnnotation.js b/src/widgets/CocoCreateAnnotation.js
index 4e7854cc..571dcd12 100644
--- a/src/widgets/CocoCreateAnnotation.js
+++ b/src/widgets/CocoCreateAnnotation.js
@@ -18,7 +18,7 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.messages = {
 };
 
 IriSP.Widgets.CocoCreateAnnotation.prototype.template =
-    '<form class="Ldt-CocoCreateAnnotation-Form">' +
+    '<form method="post" class="Ldt-CocoCreateAnnotation-Form">' +
     '  <input class="Ldt-CocoCreateAnnotation-Timecode" type="text" value="??:??">' +
     '  <textarea class="Ldt-CocoCreateAnnotation-Text" autofocus placeholder="??:?? {{ l10n.type_description }}"></textarea>' +
     '</form>';
@@ -83,6 +83,13 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.onTextChange = function (e) {
     return !!_contents;
 };
 
+/**
+ * Display a feedback
+ */
+IriSP.Widgets.CocoCreateAnnotation.prototype.showScreen = function (screen) {
+    // FIXME: use notify?
+};
+
 IriSP.Widgets.CocoCreateAnnotation.prototype.onSubmit = function () {
     var _this = this,
         _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* We create a List to send to the server that will contains the annotation */
@@ -160,7 +167,7 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.onSubmit = function () {
                                   (_this.after_send_timeout || 5000));
             }
         });
-        this.showScreen('Wait');
+        _this.showScreen('Wait');
     };
     return false;
 };

From 49ce48e6b732254ef9f023e542ff42cb4b3467b7 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 26 Nov 2015 15:47:41 +0100
Subject: [PATCH 087/204] Allow to publish a remote annotation

---
 src/widgets/AnnotationsList.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/widgets/AnnotationsList.js b/src/widgets/AnnotationsList.js
index 658d24ce..b9ea9d73 100644
--- a/src/widgets/AnnotationsList.js
+++ b/src/widgets/AnnotationsList.js
@@ -822,6 +822,10 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function (_forceRedraw) {
             });
             this.$.find('.Ldt-AnnotationsList-PublishAnnotation').click(function (e) {
                 var _annotation = get_local_annotation(this.dataset.editable_id);
+                if (_annotation === undefined) {
+                    // It may be a remote annotation
+                    _annotation = widget.source.getElement(this.dataset.editable_id);
+                }
                 // Publish annotation to the server
                 if (!confirm(Mustache.to_html(widget.l10n.confirm_publish_message, { annotation: _annotation }))) {
                     return;

From 97d1b0af3527d9b226cb354f49e190485d639204 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 26 Nov 2015 15:58:17 +0100
Subject: [PATCH 088/204] Move config menu to the left of input field

---
 src/widgets/EnrichedPlan.css | 8 +++-----
 src/widgets/EnrichedPlan.js  | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index c43403f2..8b7e059d 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -144,6 +144,7 @@
     right: 0;
     z-index: 1;
     background-color: #fff;
+    display: flex;
 }
 
 .Ldt-EnrichedPlan-Control-Label {
@@ -159,16 +160,13 @@
 .Ldt-EnrichedPlan-Controls .Ldt-EnrichedPlan-Search-Input {
     font-family: Roboto;
     font-size: 16px;
-    width: 95%;
-    width: calc(100% - 32px);
+    flex: 1;
     outline: none;
 }
 
 .Ldt-EnrichedPlan-ControlMenu {
     margin: 0;
     padding: 0;
-    display: inline-block;
-    position: absolute;
     width: 24px;
     height: 24px;
     right: 4px;
@@ -195,9 +193,9 @@
 .Ldt-EnrichedPlan-ControlMenuHome:checked + ul {
     display: flex;
     flex-direction: column;
+    width: 100px;
 }
 .Ldt-EnrichedPlan-ControlMenu ul {
-  float: right;
   padding: 0;
   margin: 0;
   list-style: none;
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 728db8fb..b44843fd 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -41,7 +41,6 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
       '<div class="Ldt-EnrichedPlan-Container">'
     + '<div class="Ldt-EnrichedPlan-Content"></div>'
     + '<form class="Ldt-EnrichedPlan-Controls">'
-    + '<input class="Ldt-EnrichedPlan-Search-Input {{^show_controls}}Ldt-EnrichedPlan-Search-Input-Full{{/show_controls}}" type="search" incremental placeholder="{{ l10n.search }}"/>'
     + '{{#show_controls}}'
     + '<div class="Ldt-EnrichedPlan-ControlMenu">'
     + ' <label for="{{ prefix }}control_menu" class="Ldt-EnrichedPlan-Toggle"></label>'
@@ -68,6 +67,7 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
     + '</ul>'
     + '</div>'
     + '{{/show_controls}}'
+    + '<input class="Ldt-EnrichedPlan-Search-Input {{^show_controls}}Ldt-EnrichedPlan-Search-Input-Full{{/show_controls}}" type="search" incremental placeholder="{{ l10n.search }}"/>'
     + '</form>'
     + '</div>';
 

From f8cfddabef21bdae3508ec29aa6065bc677aaf04 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 26 Nov 2015 16:20:17 +0100
Subject: [PATCH 089/204] Enlarge edit control icon space

---
 src/widgets/EnrichedPlan.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 8b7e059d..d64add75 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -296,7 +296,7 @@ label:hover:before {
     display: inline-block;
     width: 24px;
     height: 24px;
-    margin: 3px;
+    margin: 5px;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;

From 36211207265e712cf3ff8044a54715c43aaba678 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 27 Nov 2015 10:57:58 +0100
Subject: [PATCH 090/204] Append video player as first child

Due to initialization delays, the .append function may be called after other elements (Controller) are appended.
We assume here that the most common way of using the HtmlPlayer is to have it either as a single child, or, if there are other components, that it should be the first one (common use cases: Controller, Slidebar, overlays...)
---
 src/js/html-player.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/html-player.js b/src/js/html-player.js
index 0b270717..bfc14149 100644
--- a/src/js/html-player.js
+++ b/src/js/html-player.js
@@ -42,7 +42,7 @@ IriSP.htmlPlayer = function (media, jqselector, options) {
         });
         videoEl.append(_trackNode);
     }
-    jqselector.append(videoEl);
+    jqselector.prepend(videoEl);
 
     var mediaEl = videoEl[0];
 

From 5568c140ad8dedc328ec2a89d87051ec3215b85d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 27 Nov 2015 10:59:34 +0100
Subject: [PATCH 091/204] Add a shadow to the controller menu

---
 src/widgets/EnrichedPlan.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index d64add75..525caa6b 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -194,6 +194,7 @@
     display: flex;
     flex-direction: column;
     width: 100px;
+    box-shadow: grey 2px 2px 2px;
 }
 .Ldt-EnrichedPlan-ControlMenu ul {
   padding: 0;

From 66d69f2141edd9d2c2935640e54ca20f80c85e55 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 7 Dec 2015 14:52:40 +0100
Subject: [PATCH 092/204] Copy all annotation.meta data when deserializing
 annotation

---
 src/js/serializers/ldt_annotate.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/js/serializers/ldt_annotate.js b/src/js/serializers/ldt_annotate.js
index 18f00546..047a68b1 100644
--- a/src/js/serializers/ldt_annotate.js
+++ b/src/js/serializers/ldt_annotate.js
@@ -44,6 +44,7 @@ IriSP.serializers.ldt_annotate = {
             _anntype.title = _anndata.type_title;
             _source.getAnnotationTypes().push(_anntype);
         }
+        _ann.meta = _anndata.meta;
         _ann.setAnnotationType(_anntype.id);
         var _tagIds = IriSP._(_anndata.tags).map(function(_title) {
             var _tags = _source.getTags(true).searchByTitle(_title, true);

From 6cc1d796ee0ffe03e3ad5cdd179838bc6fd66a2d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 7 Dec 2015 14:53:04 +0100
Subject: [PATCH 093/204] Factorize update_content method so that the component
 can update itself

---
 src/widgets/EnrichedPlan.js | 128 +++++++++++++++++++++++-------------
 1 file changed, 82 insertions(+), 46 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index b44843fd..34b9d8f9 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -1,5 +1,10 @@
 IriSP.Widgets.EnrichedPlan = function (player, config) {
+    var _this = this;
     IriSP.Widgets.Widget.call(this, player, config);
+    this.throttledRefresh = IriSP._.throttle(function (full) {
+        _this.update_content();
+    }, 800, {leading: false});
+
 };
 
 IriSP.Widgets.EnrichedPlan.prototype = new IriSP.Widgets.Widget();
@@ -83,12 +88,70 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
 
 IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}</div>';
 
-IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
+
+/**
+ * Initialize the component
+ */
+IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
     var _this = this;
     // Generate a unique prefix, so that ids of input fields
     // (necessary for label association) are unique too.
     _this.prefix = IriSP.generateUuid();
-    // slides content: title, level (for toc)
+    _this.renderTemplate();
+    var container = _this.$.find('.Ldt-EnrichedPlan-Container');
+    var content = _this.$.find('.Ldt-EnrichedPlan-Content');
+
+    container.on("click", "[data-timecode]", function () {
+        _this.media.setCurrentTime(Number(this.dataset.timecode));
+    });
+
+    container.on("click", ".Ldt-EnrichedPlan-Control-Checkbox", function () {
+        var classname = _.first(_.filter(this.classList, function (s) {
+            return s != "Ldt-EnrichedPlan-Control-Checkbox";
+        }));
+        if (classname !== undefined) {
+            if (IriSP.jQuery(this).is(':checked')) {
+                content.find(".Ldt-EnrichedPlan-Slide ." + classname).removeClass("filtered_out");
+            } else {
+                content.find(".Ldt-EnrichedPlan-Slide ." + classname).addClass("filtered_out");
+            }
+        }
+
+    });
+
+    container.on("click", ".Ldt-EnrichedPlan-EditControl-Edit", function () {
+        _this.player.trigger("Annotation.edit", this.dataset.id);
+    });
+    container.on("click", ".Ldt-EnrichedPlan-EditControl-Delete", function () {
+        var _annotation = _this.source.getElement(this.dataset.id);
+        if (confirm(Mustache.to_html(_this.l10n.confirm_delete_message, { annotation: _annotation }))) {
+            _this.source.getAnnotations().removeElement(_annotation);
+            _this.player.trigger("Annotation.delete", this.dataset.id);
+        }
+    });
+
+    container.find(".Ldt-EnrichedPlan-Search-Input").on("search", function () {
+        var q = IriSP.jQuery(this).val().toLocaleLowerCase();
+        if (q === "") {
+            // Show all
+            content.find(".Ldt-EnrichedPlan-Note").removeClass("non_matching");
+        } else {
+            content.find(".Ldt-EnrichedPlan-Note").each(function () {
+                var node = IriSP.jQuery(this);
+                if (node.text().toLocaleLowerCase().indexOf(q) > -1) {
+                    node.removeClass("non_matching");
+                } else {
+                    node.addClass("non_matching");
+                }
+            });
+        }
+    });
+
+    return [container, content];
+};
+
+IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
+    var _this = this;
     var _slides = this.getWidgetAnnotations().sortBy(function (_annotation) {
         return _annotation.begin;
     });
@@ -118,9 +181,18 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
         });
     });
 
-    _this.renderTemplate();
     var container = _this.$.find('.Ldt-EnrichedPlan-Container');
     var content = _this.$.find('.Ldt-EnrichedPlan-Content');
+    if (!container.length) {
+        // Initialization, render the container template
+        var els = _this.init_component();
+        container = els[0];
+        content = els[1];
+    } else {
+        // Update: empty the container
+        // (Should do an incremental update, TBD)
+        content.empty();
+    }
 
     function capitalize(s) {
         // This function is defined in recent versions of _
@@ -164,50 +236,14 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
         var _el = IriSP.jQuery(_html);
         content.append(_el);
     });
+};
 
-    container.on("click", "[data-timecode]", function () {
-        _this.media.setCurrentTime(Number(this.dataset.timecode));
-    });
-
-    container.on("click", ".Ldt-EnrichedPlan-Control-Checkbox", function () {
-        var classname = _.first(_.filter(this.classList, function (s) {
-            return s != "Ldt-EnrichedPlan-Control-Checkbox";
-        }));
-        if (classname !== undefined) {
-            if (IriSP.jQuery(this).is(':checked')) {
-                content.find(".Ldt-EnrichedPlan-Slide ." + classname).removeClass("filtered_out");
-            } else {
-                content.find(".Ldt-EnrichedPlan-Slide ." + classname).addClass("filtered_out");
-            }
-        }
-
-    });
-
-    container.on("click", ".Ldt-EnrichedPlan-EditControl-Edit", function () {
-        _this.player.trigger("Annotation.edit", this.dataset.id);
-    });
-    container.on("click", ".Ldt-EnrichedPlan-EditControl-Delete", function () {
-        var _annotation = _this.source.getElement(this.dataset.id);
-        if (confirm(Mustache.to_html(_this.l10n.confirm_delete_message, { annotation: _annotation }))) {
-            _this.source.getAnnotations().removeElement(_annotation);
-            _this.player.trigger("Annotation.delete", this.dataset.id);
-        }
-    });
+IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
+    var _this = this;
+    _this.init_component();
+    _this.update_content();
 
-    container.find(".Ldt-EnrichedPlan-Search-Input").on("search", function () {
-        var q = IriSP.jQuery(this).val().toLocaleLowerCase();
-        if (q === "") {
-            // Show all
-            content.find(".Ldt-EnrichedPlan-Note").removeClass("non_matching");
-        } else {
-            content.find(".Ldt-EnrichedPlan-Note").each(function () {
-                var node = IriSP.jQuery(this);
-                if (node.text().toLocaleLowerCase().indexOf(q) > -1) {
-                    node.removeClass("non_matching");
-                } else {
-                    node.addClass("non_matching");
-                }
-            });
-        }
+    _this.onMdpEvent("AnnotationsList.refresh", function () {
+        _this.throttledRefresh(false);
     });
 };

From 382b88414f2d778b9ab6a2e8f54c1f039270412a Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 7 Dec 2015 15:31:28 +0100
Subject: [PATCH 094/204] Clear input data after sending it

---
 src/widgets/CocoCreateAnnotation.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/widgets/CocoCreateAnnotation.js b/src/widgets/CocoCreateAnnotation.js
index 571dcd12..199f5a00 100644
--- a/src/widgets/CocoCreateAnnotation.js
+++ b/src/widgets/CocoCreateAnnotation.js
@@ -57,6 +57,11 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.pauseOnWrite = function () {
     }
 };
 
+IriSP.Widgets.CocoCreateAnnotation.prototype.resetInput = function (e) {
+    this.$.find(".Ldt-CocoCreateAnnotation-Text").val("");
+    this.setBegin(this.media.getCurrentTime());
+};
+
 IriSP.Widgets.CocoCreateAnnotation.prototype.onTextChange = function (e) {
     if (e !== undefined && e.keyCode == 13 && !e.shiftKey) {
         // Return: submit. Use shift-Return to insert a LF
@@ -138,6 +143,7 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.onSubmit = function () {
             contentType: 'application/json',
             data: _export.serialize(), /* Source is serialized */
             success: function (_data) {
+                _this.resetInput();
                 _this.showScreen('Saved');
                 if (_this.after_send_timeout) {
                     window.setTimeout(

From 5a1ee9bedf26d4e14b16ccc419a34a3fc7c08fb0 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 7 Dec 2015 15:31:51 +0100
Subject: [PATCH 095/204] Remove unused code

---
 src/widgets/CocoCreateAnnotation.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/widgets/CocoCreateAnnotation.js b/src/widgets/CocoCreateAnnotation.js
index 199f5a00..185918fe 100644
--- a/src/widgets/CocoCreateAnnotation.js
+++ b/src/widgets/CocoCreateAnnotation.js
@@ -145,16 +145,6 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.onSubmit = function () {
             success: function (_data) {
                 _this.resetInput();
                 _this.showScreen('Saved');
-                if (_this.after_send_timeout) {
-                    window.setTimeout(
-                        function () {
-                            _this.close_after_send
-                                ? _this.player.trigger("CocoCreateAnnotation.hide")
-                                : _this.player.trigger("CocoCreateAnnotation.show");
-                        },
-                        _this.after_send_timeout
-                    );
-                }
                 _export.getAnnotations().removeElement(_annotation, true); /* We delete the sent annotation to avoid redundancy */
                 _export.deSerialize(_data); /* Data deserialization */
                 _this.source.merge(_export); /* We merge the deserialized data with the current source data */

From 58e88e075e35ad15b962e17093e6e9b1e4be1db8 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 7 Dec 2015 15:44:46 +0100
Subject: [PATCH 096/204] Use a strict comparison for slide inclusion test

---
 src/widgets/EnrichedPlan.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 34b9d8f9..273d6db8 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -177,7 +177,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
     // correctly set.
     _slides.forEach(function (slide) {
         slide.annotations = _annotations.filter(function (a) {
-            return a.begin >= slide.begin && a.begin <= slide.end;
+            return a.begin >= slide.begin && a.begin < slide.end;
         });
     });
 

From 49dfc1d2efe6c416b70bb283187de151c6a1cf77 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 9 Dec 2015 11:38:50 +0100
Subject: [PATCH 097/204] Add translations

---
 src/widgets/EnrichedPlan.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 273d6db8..07c0bf40 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -17,7 +17,8 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
         other_notes: "Other Notes",
         own_notes: "Pers. notes",
         slides: "Slides",
-        search: "Search..."
+        search: "Search...",
+        whole_video: "Whole video"
     },
     fr: {
         delete_annotation: "Supprimer la note",
@@ -26,7 +27,8 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
         other_notes: "Notes Autres",
         own_notes: "Notes perso.",
         slides: "Diapo",
-        search: "Recherchez..."
+        search: "Recherchez...",
+        whole_video: "Vidéo entière"
     }
 };
 
@@ -158,12 +160,16 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
     if (_slides.length == 0) {
         // No valid segmentation defined. Let's pretend there is a
         // unique global segment.
+        var title = _this.messages.whole_video;
         _slides = [ {
             id: "whole",
-            title: "Whole video",
+            title: title;
             begin: 0,
             end: _this.media.duration,
-            thumbnail: ""
+            thumbnail: "",
+            getTitleOrDescription: function () {
+                return title;
+            }
         } ];
     };
     // All other annotations

From 750eea41400c7155b8b161e08a1a1a8e61d843b4 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 9 Dec 2015 11:38:59 +0100
Subject: [PATCH 098/204] Handle is_admin parameter

---
 src/widgets/EnrichedPlan.css |  4 ++++
 src/widgets/EnrichedPlan.js  | 12 +++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 525caa6b..8e66cfa5 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -310,3 +310,7 @@ label:hover:before {
 .Ldt-EnrichedPlan-EditControl-Delete {
     background: url(img/notes_delete.svg);
 }
+
+.adminactions {
+    display: inline-block;
+}
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 07c0bf40..31bd9473 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -41,7 +41,8 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
     show_slides: true,
     show_teacher_notes: true,
     show_other_notes: true,
-    show_own_notes: true
+    show_own_notes: true,
+    is_admin: false
 };
 
 IriSP.Widgets.EnrichedPlan.prototype.template =
@@ -83,12 +84,12 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '  <div class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-SlideTimecode">{{ begin }}</div>'
     + '  <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem {{^show_slides}}filtered_out{{/show_slides}} Ldt-EnrichedPlan-SlideThumbnail Ldt-EnrichedPlan-Slide-Display">{{#thumbnail}}<img title="{{ begin }} - {{ atitle }}" src="{{ thumbnail }}">{{/thumbnail}}</div>'
     + '  <div class="Ldt-EnrichedPlan-SlideContent">'
-    + '     <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideTitle Ldt-EnrichedPlan-SlideTitle{{ level }}">{{ atitle }}</div>'
+    + '     <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideTitle Ldt-EnrichedPlan-SlideTitle{{ level }}">{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a> </div>{{/is_admin}}{{ atitle }}</div>'
     + '     <div class="Ldt-EnrichedPlan-SlideNotes">{{{ notes }}}</div>'
     + '  </div>'
     + '</div>';
 
-IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}</div>';
+IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a></div>{{/is_admin}}</div>';
 
 
 /**
@@ -222,6 +223,9 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
             begintc: slide.begin.milliseconds,
             thumbnail: slide.thumbnail,
             show_slides: _this.show_slides,
+            is_admin: _this.is_admin,
+            // FIXME: find an appropriate way to pass admin_url
+            admin_url: '/admin/coco/annotation/' + slide.id,
             notes: slide.annotations.map(function (a) {
                 return Mustache.to_html(_this.annotationTemplate, {
                     id: a.id,
@@ -232,6 +236,8 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                     begintc: a.begin.milliseconds,
                     atitle: a.getTitleOrDescription().slice(0, 20),
                     can_edit: a.meta['coco:can_edit'],
+                    is_admin: _this.is_admin,
+                    admin_url: '/admin/coco/annotation/' + a.id,
                     category: "Ldt-EnrichedPlan-Note-" + note_category(a),
                     filtered: ((note_category(a) == 'Own' && !_this.show_own_notes)
                                 || (note_category(a) == 'Other' && !_this.show_other_notes)

From a840897f82a20fece4cc43f1fdb60229cf24cec9 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 11 Dec 2015 15:37:21 +0100
Subject: [PATCH 099/204] Fix typo

---
 src/widgets/CocoController.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/CocoController.js b/src/widgets/CocoController.js
index 92c167d4..633e8448 100644
--- a/src/widgets/CocoController.js
+++ b/src/widgets/CocoController.js
@@ -104,7 +104,7 @@ IriSP.Widgets.CocoController.prototype.draw = function () {
     this.timeDisplayUpdater(new IriSP.Model.Time(0));
 };
 
-/* Update the elasped time div */
+/* Update the elapsed time div */
 IriSP.Widgets.CocoController.prototype.timeDisplayUpdater = function (_time) {
     var _totalTime = this.media.duration;
     this.$timeElapsed.html(_time.toString());

From 2f7c2ac9b10a72be037e1b0af3fd68222fbbf341 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 14 Dec 2015 11:07:06 +0100
Subject: [PATCH 100/204] Add videoonly mode for SlideVideoPlayer

---
 src/widgets/SlideVideoPlayer.css | 3 +++
 src/widgets/SlideVideoPlayer.js  | 4 +++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 41cd0031..54526c8a 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -88,3 +88,6 @@
     left: 50%;
     left: calc(50% - 9px);
 }
+.Ldt-SlideVideoPlayer-hidden {
+    display: none;
+}
diff --git a/src/widgets/SlideVideoPlayer.js b/src/widgets/SlideVideoPlayer.js
index 818ddbfc..33e7a080 100644
--- a/src/widgets/SlideVideoPlayer.js
+++ b/src/widgets/SlideVideoPlayer.js
@@ -8,7 +8,7 @@ IriSP.Widgets.SlideVideoPlayer.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.SlideVideoPlayer.prototype.defaults = {
     playerModule: "HtmlPlayer",
-    // mode is either "sidebyside" or "pip"
+    // mode is either "sidebyside", "pip" or "videoonly"
     mode: "sidebyside"
 };
 
@@ -55,6 +55,8 @@ IriSP.Widgets.SlideVideoPlayer.prototype.draw = function() {
         window.setTimeout(function () {
             _this.setMainDisplay('video');
         }, 1500);
+    } else if (_this.mode == 'videoonly') {
+        this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide").addClass("Ldt-SlideVideoPlayer-hidden");
     } else {
         // Default : side by side
         // FIXME: this should be better implemented through a signal sent

From c7967544b3eab9646333954e1fc9e51ef6073bb2 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 14 Dec 2015 11:08:05 +0100
Subject: [PATCH 101/204] Fix translation fetching

---
 src/widgets/EnrichedPlan.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 31bd9473..e3243edd 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -161,10 +161,10 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
     if (_slides.length == 0) {
         // No valid segmentation defined. Let's pretend there is a
         // unique global segment.
-        var title = _this.messages.whole_video;
+        var title = _this.l10n.whole_video;
         _slides = [ {
             id: "whole",
-            title: title;
+            title: title,
             begin: 0,
             end: _this.media.duration,
             thumbnail: "",

From f41eb823f3695b5f8c9b0bc6261b60c6754d53db Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 15 Dec 2015 16:39:12 +0100
Subject: [PATCH 102/204] Hide non appliable pip menu toggle items

---
 src/widgets/SlideVideoPlayer.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 54526c8a..28a83aed 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -70,18 +70,30 @@
     bottom: 2px;
     right: 2px;
 }
+.Ldt-SlideVideoPlayer-pip-pip .Ldt-SlideVideoPlayer-pip-menu-toggle-br {
+    display: none !important;
+}
 .Ldt-SlideVideoPlayer-pip-menu-toggle-tr {
     top: 2px;
     right: 2px;
 }
+.Ldt-SlideVideoPlayer-pip-tr .Ldt-SlideVideoPlayer-pip-menu-toggle-tr {
+    display: none !important;
+}
 .Ldt-SlideVideoPlayer-pip-menu-toggle-tl {
     top: 2px;
     left: 2px;
 }
+.Ldt-SlideVideoPlayer-pip-tl .Ldt-SlideVideoPlayer-pip-menu-toggle-tl {
+    display: none !important;
+}
 .Ldt-SlideVideoPlayer-pip-menu-toggle-bl {
     bottom: 2px;
     left: 2px;
 }
+.Ldt-SlideVideoPlayer-pip-bl .Ldt-SlideVideoPlayer-pip-menu-toggle-bl {
+    display: none !important;
+}
 .Ldt-SlideVideoPlayer-pip-menu-toggle-main {
     top: 50%;
     top: calc(50% - 9px);

From 409e5572fc1af891d3159e75b30fd72d3e2bc259 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 15 Dec 2015 16:46:47 +0100
Subject: [PATCH 103/204] Highlight selected annotation

---
 src/widgets/EnrichedPlan.css | 4 ++++
 src/widgets/EnrichedPlan.js  | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 8e66cfa5..e3b467ee 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -314,3 +314,7 @@ label:hover:before {
 .adminactions {
     display: inline-block;
 }
+
+.Ldt-EnrichedPlan-Selected-Timecode {
+    border: 1px dashed #6cf;
+}
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index e3243edd..76021ecf 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -106,6 +106,8 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
 
     container.on("click", "[data-timecode]", function () {
         _this.media.setCurrentTime(Number(this.dataset.timecode));
+        IriSP.jQuery(".Ldt-EnrichedPlan-Selected-Timecode").removeClass("Ldt-EnrichedPlan-Selected-Timecode");
+        IriSP.jQuery(this).addClass("Ldt-EnrichedPlan-Selected-Timecode");
     });
 
     container.on("click", ".Ldt-EnrichedPlan-Control-Checkbox", function () {

From 327e4b12bf855464858514a65256cfe7be93876e Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 15 Dec 2015 16:51:17 +0100
Subject: [PATCH 104/204] Show edit buttons only on selected annotation

---
 src/widgets/EnrichedPlan.css | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index e3b467ee..4f1cc724 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -311,10 +311,23 @@ label:hover:before {
     background: url(img/notes_delete.svg);
 }
 
-.adminactions {
+.Ldt-EnrichedPlan-Selected-Timecode {
+    border: 1px dashed #6cf;
+}
+
+.Ldt-EnrichedPlan-EditControl {
+    display: none;
+}
+
+.Ldt-EnrichedPlan-Selected-Timecode .Ldt-EnrichedPlan-EditControl {
     display: inline-block;
 }
 
-.Ldt-EnrichedPlan-Selected-Timecode {
-    border: 1px dashed #6cf;
+.adminactions {
+    display: none;
 }
+
+.Ldt-EnrichedPlan-Selected-Timecode .adminactions {
+    display: inline-block;
+}
+

From 20c30ecfef2f59e2a8b8d130a86d7f29704a58ea Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 15 Dec 2015 17:08:51 +0100
Subject: [PATCH 105/204] Hide information for whole-slide mode

---
 src/widgets/EnrichedPlan.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 4f1cc724..80d856d8 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -92,6 +92,13 @@
     font-size: 14px;
 }
 
+[data-id=whole] .Ldt-EnrichedPlan-SlideTitle {
+    display: none;
+}
+[data-id=whole] .Ldt-EnrichedPlan-SlideTimecode {
+    color: #fff !important;
+}
+
 .Ldt-EnrichedPlan-Note {
     font-weight: normal;
     font-size: 14px;

From 3140f75a1f7cae312dc3726e87f62513740465f7 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 15 Dec 2015 17:10:48 +0100
Subject: [PATCH 106/204] Define flat_mode

It enforces a single virtual slide, which is hidden
---
 src/widgets/EnrichedPlan.css | 10 ++++++++--
 src/widgets/EnrichedPlan.js  | 34 ++++++++++++++++++++++++----------
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 80d856d8..b02bc7ff 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -58,15 +58,21 @@
     transition: width .4s;
 }
 
-.Ldt-EnrichedPlan-SlideThumbnail.filtered_out + .Ldt-EnrichedPlan-SlideContent {
+.Ldt-EnrichedPlan-SlideThumbnail.filtered_out + .Ldt-EnrichedPlan-SlideContent,
+.Ldt-EnrichedPlan-FlatMode .Ldt-EnrichedPlan-SlideContent {
     width: calc(100% - 40px);
     margin-left: 8px;
 }
 
-.Ldt-EnrichedPlan-SlideThumbnail.filtered_out + .Ldt-EnrichedPlan-SlideContent .Ldt-EnrichedPlan-NoteTimecode {
+.Ldt-EnrichedPlan-SlideThumbnail.filtered_out + .Ldt-EnrichedPlan-SlideContent .Ldt-EnrichedPlan-NoteTimecode,
+.Ldt-EnrichedPlan-FlatMode .Ldt-EnrichedPlan-SlideContent .Ldt-EnrichedPlan-NoteTimecode {
     display: inline-block;
 }
 
+.Ldt-EnrichedPlan-FlatMode .Ldt-EnrichedPlan-SlideThumbnail {
+    display: none;
+}
+
 .Ldt-EnrichedPlan-SlideTitle {
     display: inline-block;
     font-size: 14px;
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 76021ecf..4c08e166 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -42,11 +42,12 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
     show_teacher_notes: true,
     show_other_notes: true,
     show_own_notes: true,
-    is_admin: false
+    is_admin: false,
+    flat_mode: false
 };
 
 IriSP.Widgets.EnrichedPlan.prototype.template =
-      '<div class="Ldt-EnrichedPlan-Container">'
+      '<div class="Ldt-EnrichedPlan-Container {{#flat_mode}}Ldt-EnrichedPlan-FlatMode{{/flat_mode}}">'
     + '<div class="Ldt-EnrichedPlan-Content"></div>'
     + '<form class="Ldt-EnrichedPlan-Controls">'
     + '{{#show_controls}}'
@@ -66,10 +67,12 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
     + '  <input id="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Own" {{#show_own_notes}}checked{{/show_own_notes}} type="checkbox">'
     + '  <label for="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Own">{{ l10n.own_notes }}</label>'
     + ' </li>'
+    + '{{^flat_mode}}'
     + ' <li>'
     + '  <input id="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Slide-Display" {{#show_slides}}checked{{/show_slides}} type="checkbox">'
     + '  <label for="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Slide-Display">{{ l10n.slides }}<br/>&nbsp;</label>'
     + ' </li>'
+    + '{{/flat_mode}}'
     + ' </ul>'
     + '</li>'
     + '</ul>'
@@ -97,6 +100,11 @@ IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin
  */
 IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
     var _this = this;
+
+    // Get slides here so that it correctly initializes implicit
+    // flat_mode if necessary (see template)
+    var _slides = this.get_slides();
+
     // Generate a unique prefix, so that ids of input fields
     // (necessary for label association) are unique too.
     _this.prefix = IriSP.generateUuid();
@@ -121,7 +129,6 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
                 content.find(".Ldt-EnrichedPlan-Slide ." + classname).addClass("filtered_out");
             }
         }
-
     });
 
     container.on("click", ".Ldt-EnrichedPlan-EditControl-Edit", function () {
@@ -155,34 +162,41 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
     return [container, content];
 };
 
-IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
-    var _this = this;
-    var _slides = this.getWidgetAnnotations().sortBy(function (_annotation) {
+IriSP.Widgets.EnrichedPlan.prototype.get_slides = function () {
+    var _slides = this.flat_mode ? [] : this.getWidgetAnnotations().sortBy(function (_annotation) {
         return _annotation.begin;
     });
     if (_slides.length == 0) {
+        // Enforce flat_mode, so that it is defined in the template
+        this.flat_mode = true;
         // No valid segmentation defined. Let's pretend there is a
         // unique global segment.
-        var title = _this.l10n.whole_video;
+        var title = this.l10n.whole_video;
         _slides = [ {
             id: "whole",
             title: title,
             begin: 0,
-            end: _this.media.duration,
+            end: this.media.duration,
             thumbnail: "",
             getTitleOrDescription: function () {
                 return title;
             }
         } ];
     };
-    // All other annotations
+    return _slides;
+};
+
+IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
+    var _this = this;
+    var _slides = this.get_slides();
+
     var _annotations = this.media.getAnnotations().filter(function (a) {
         return a.getAnnotationType().title != _this.annotation_type;
     }).sortBy(function (_annotation) {
         return _annotation.begin;
     });
 
-    // Reference annotations in each slide: assume that end time is
+    // Reference annotations in each slide: assume that slide end time is
     // correctly set.
     _slides.forEach(function (slide) {
         slide.annotations = _annotations.filter(function (a) {

From a35af8359509d24c13d55e16e802363490b2ea74 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 16 Dec 2015 11:13:31 +0100
Subject: [PATCH 107/204] Use explicit Ldt-SlideVideoPlayer-pip-br class

---
 src/widgets/SlideVideoPlayer.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 28a83aed..864b1016 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -32,6 +32,9 @@
     width: 30% !important;
     height: 30%;
     z-index: 3;
+}
+
+.Ldt-SlideVideoPlayer-pip-br {
     bottom: 2px;
     right: 2px;
 }
@@ -70,7 +73,7 @@
     bottom: 2px;
     right: 2px;
 }
-.Ldt-SlideVideoPlayer-pip-pip .Ldt-SlideVideoPlayer-pip-menu-toggle-br {
+.Ldt-SlideVideoPlayer-pip-br .Ldt-SlideVideoPlayer-pip-menu-toggle-br {
     display: none !important;
 }
 .Ldt-SlideVideoPlayer-pip-menu-toggle-tr {

From ed3d765b301581137af0be6cc77ce57d418d9a8f Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 16 Dec 2015 15:42:43 +0100
Subject: [PATCH 108/204] Implement group filtering

---
 src/widgets/EnrichedPlan.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 4c08e166..ad2faff7 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -43,7 +43,8 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
     show_other_notes: true,
     show_own_notes: true,
     is_admin: false,
-    flat_mode: false
+    flat_mode: false,
+    group: undefined
 };
 
 IriSP.Widgets.EnrichedPlan.prototype.template =
@@ -196,6 +197,11 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
         return _annotation.begin;
     });
 
+    if (_this.group) {
+        _annotations = _annotations.filter(function (a) {
+            return a.meta['coco:group'] == _this.group;
+        });
+    }
     // Reference annotations in each slide: assume that slide end time is
     // correctly set.
     _slides.forEach(function (slide) {

From 51ea1dfd1c6ef0cc556b2c9b0330b54472c21c32 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 16 Dec 2015 15:45:39 +0100
Subject: [PATCH 109/204] Specify initial position for pip

---
 src/widgets/SlideVideoPlayer.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/widgets/SlideVideoPlayer.js b/src/widgets/SlideVideoPlayer.js
index 33e7a080..fdecd693 100644
--- a/src/widgets/SlideVideoPlayer.js
+++ b/src/widgets/SlideVideoPlayer.js
@@ -53,7 +53,7 @@ IriSP.Widgets.SlideVideoPlayer.prototype.draw = function() {
             _this.setPipPosition(this.dataset.position);
         });
         window.setTimeout(function () {
-            _this.setMainDisplay('video');
+            _this.setMainDisplay('video', true);
         }, 1500);
     } else if (_this.mode == 'videoonly') {
         this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide").addClass("Ldt-SlideVideoPlayer-hidden");
@@ -80,7 +80,7 @@ IriSP.Widgets.SlideVideoPlayer.prototype.toggleMainDisplay = function() {
 
 // Set main display (in case of a "switch" display mode)
 // main is either 'video' or 'slides'
-IriSP.Widgets.SlideVideoPlayer.prototype.setMainDisplay = function(video_or_slides) {
+IriSP.Widgets.SlideVideoPlayer.prototype.setMainDisplay = function(video_or_slides, initial_display) {
     var main = this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video");
     var pip = this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide");
     if (video_or_slides == 'slides') {
@@ -90,6 +90,10 @@ IriSP.Widgets.SlideVideoPlayer.prototype.setMainDisplay = function(video_or_slid
     };
     main.removeClass('Ldt-SlideVideoPlayer-pip-pip').addClass('Ldt-SlideVideoPlayer-pip-main');
     pip.removeClass('Ldt-SlideVideoPlayer-pip-main').addClass('Ldt-SlideVideoPlayer-pip-pip');
+    if (initial_display) {
+        // Specify initial position
+        pip.addClass('Ldt-SlideVideoPlayer-pip-br');
+    }
 };
 
 IriSP.Widgets.SlideVideoPlayer.prototype.setPipPosition = function(position) {

From 59dbaead941e83dba1231455c56afe5e41659b4a Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 16 Dec 2015 15:58:01 +0100
Subject: [PATCH 110/204] Add left margin to search box

---
 src/widgets/EnrichedPlan.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index b02bc7ff..a3c39c99 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -175,6 +175,7 @@
     font-size: 16px;
     flex: 1;
     outline: none;
+    margin-left: 12px;
 }
 
 .Ldt-EnrichedPlan-ControlMenu {

From bf6e4e15cd20a2894b3340cf03204c570ea48a4d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 17 Dec 2015 16:47:07 +0100
Subject: [PATCH 111/204] Add data-level information

---
 src/widgets/EnrichedPlan.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index ad2faff7..d72ff625 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -88,7 +88,7 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '  <div class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-SlideTimecode">{{ begin }}</div>'
     + '  <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem {{^show_slides}}filtered_out{{/show_slides}} Ldt-EnrichedPlan-SlideThumbnail Ldt-EnrichedPlan-Slide-Display">{{#thumbnail}}<img title="{{ begin }} - {{ atitle }}" src="{{ thumbnail }}">{{/thumbnail}}</div>'
     + '  <div class="Ldt-EnrichedPlan-SlideContent">'
-    + '     <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideTitle Ldt-EnrichedPlan-SlideTitle{{ level }}">{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a> </div>{{/is_admin}}{{ atitle }}</div>'
+    + '     <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideTitle Ldt-EnrichedPlan-SlideTitle{{ level }}" data-level="{{level}}">{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a> </div>{{/is_admin}}{{ atitle }}</div>'
     + '     <div class="Ldt-EnrichedPlan-SlideNotes">{{{ notes }}}</div>'
     + '  </div>'
     + '</div>';

From 5277f8dbee4db2d7b4b27ad35bb347bcf0569be5 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 18 Dec 2015 10:34:19 +0100
Subject: [PATCH 112/204] Do not specify SlideTitle height

---
 src/widgets/EnrichedPlan.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index a3c39c99..70d6f4aa 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -77,7 +77,6 @@
     display: inline-block;
     font-size: 14px;
     width: 100%;
-    height: 1em;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

From ec70133d50f865016563f17f333ef98cfb184850 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 18 Dec 2015 15:01:56 +0100
Subject: [PATCH 113/204] Implement slide level update controls

---
 src/widgets/EnrichedPlan.js | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index d72ff625..9ac56745 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -88,7 +88,7 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '  <div class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-SlideTimecode">{{ begin }}</div>'
     + '  <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem {{^show_slides}}filtered_out{{/show_slides}} Ldt-EnrichedPlan-SlideThumbnail Ldt-EnrichedPlan-Slide-Display">{{#thumbnail}}<img title="{{ begin }} - {{ atitle }}" src="{{ thumbnail }}">{{/thumbnail}}</div>'
     + '  <div class="Ldt-EnrichedPlan-SlideContent">'
-    + '     <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideTitle Ldt-EnrichedPlan-SlideTitle{{ level }}" data-level="{{level}}">{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a> </div>{{/is_admin}}{{ atitle }}</div>'
+    + '     <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideTitle Ldt-EnrichedPlan-SlideTitle{{ level }}" data-level="{{level}}">{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a> <a data-id="{{id}}" target="_blank" class="level_decr">&nbsp;&lt;&nbsp;</a> <a data-id="{{id}}" target="_blank" class="level_incr">&nbsp;&gt;&nbsp;</a></div>{{/is_admin}}{{ atitle }}</div>'
     + '     <div class="Ldt-EnrichedPlan-SlideNotes">{{{ notes }}}</div>'
     + '  </div>'
     + '</div>';
@@ -143,6 +143,32 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
         }
     });
 
+    function update_level(el, inc) {
+        var an = _this.source.getElement(el.dataset.id);
+        console.log("Update ", an.title, " to ", an.content.data.level + inc);
+        an.content.data.level += inc;
+        IriSP.jQuery.ajax({
+            url: "/annotation/" + el.dataset.id + "/level/",
+            timeout: 2000,
+            type: "POST",
+            contentType: 'application/json',
+            data: JSON.stringify({'level': an.content.data.level}),
+            dataType: 'json',
+            error: function(XMLHttpRequest, textStatus, errorThrown) {
+                alert("An error has occurred making the request: " + errorThrown);
+            },
+            success: function(data) {
+                _this.player.trigger("AnnotationsList.refresh");
+            }
+        });
+    };
+
+    container.on("click", ".level_incr", function () {
+        update_level(this, +1);
+    }).on("click", ".level_decr", function () {
+        update_level(this, -1);
+    });
+
     container.find(".Ldt-EnrichedPlan-Search-Input").on("search", function () {
         var q = IriSP.jQuery(this).val().toLocaleLowerCase();
         if (q === "") {

From 324466ed6b7215338fbeaa42e8bfcf59b4ebe7e9 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 18 Dec 2015 16:21:20 +0100
Subject: [PATCH 114/204] Use action_url method to get URLs

---
 src/widgets/EnrichedPlan.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 9ac56745..fd627d50 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -44,7 +44,10 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
     show_own_notes: true,
     is_admin: false,
     flat_mode: false,
-    group: undefined
+    group: undefined,
+    // action_url should be a function (action, elementid) that returns a URL
+    // Possible actions: admin, edit, level
+    action_url: function (action, elementid) { return ""; }
 };
 
 IriSP.Widgets.EnrichedPlan.prototype.template =
@@ -148,7 +151,7 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
         console.log("Update ", an.title, " to ", an.content.data.level + inc);
         an.content.data.level += inc;
         IriSP.jQuery.ajax({
-            url: "/annotation/" + el.dataset.id + "/level/",
+            url: _this.action_url("level", el.dataset.id),
             timeout: 2000,
             type: "POST",
             contentType: 'application/json',
@@ -272,8 +275,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
             thumbnail: slide.thumbnail,
             show_slides: _this.show_slides,
             is_admin: _this.is_admin,
-            // FIXME: find an appropriate way to pass admin_url
-            admin_url: '/admin/coco/annotation/' + slide.id,
+            admin_url: _this.action_url('admin', slide.id),
             notes: slide.annotations.map(function (a) {
                 return Mustache.to_html(_this.annotationTemplate, {
                     id: a.id,
@@ -285,7 +287,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                     atitle: a.getTitleOrDescription().slice(0, 20),
                     can_edit: a.meta['coco:can_edit'],
                     is_admin: _this.is_admin,
-                    admin_url: '/admin/coco/annotation/' + a.id,
+                    admin_url: _this.action_url('admin', a.id),
                     category: "Ldt-EnrichedPlan-Note-" + note_category(a),
                     filtered: ((note_category(a) == 'Own' && !_this.show_own_notes)
                                 || (note_category(a) == 'Other' && !_this.show_other_notes)

From 97640f7453af3a954a6d0e112ae28d60399ca7c2 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 22 Dec 2015 15:16:07 +0100
Subject: [PATCH 115/204] Specify pip-main class in videoonly mode

---
 src/widgets/SlideVideoPlayer.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/widgets/SlideVideoPlayer.js b/src/widgets/SlideVideoPlayer.js
index fdecd693..5609d8ae 100644
--- a/src/widgets/SlideVideoPlayer.js
+++ b/src/widgets/SlideVideoPlayer.js
@@ -57,6 +57,7 @@ IriSP.Widgets.SlideVideoPlayer.prototype.draw = function() {
         }, 1500);
     } else if (_this.mode == 'videoonly') {
         this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide").addClass("Ldt-SlideVideoPlayer-hidden");
+        this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video").addClass('Ldt-SlideVideoPlayer-pip-main');
     } else {
         // Default : side by side
         // FIXME: this should be better implemented through a signal sent

From e9a6270f0238f0b02dd06af72edb4971b1b330f9 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 4 Jan 2016 14:29:54 +0100
Subject: [PATCH 116/204] Make update_level more robust

---
 src/widgets/EnrichedPlan.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index fd627d50..f12fa1a3 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -148,8 +148,10 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
 
     function update_level(el, inc) {
         var an = _this.source.getElement(el.dataset.id);
-        console.log("Update ", an.title, " to ", an.content.data.level + inc);
-        an.content.data.level += inc;
+        if (an.content.data === "") {
+            an.content.data = {level: 1};
+        };
+        an.content.data.level = (an.content.data.level || 1) + inc;
         IriSP.jQuery.ajax({
             url: _this.action_url("level", el.dataset.id),
             timeout: 2000,

From b5d7201d223725c6e945ca8fe698c9b38922acb0 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 5 Jan 2016 14:42:55 +0100
Subject: [PATCH 117/204] Add different pip toggles for pip positioning

---
 src/widgets/SlideVideoPlayer.css |  7 ++-
 src/widgets/img/pip_bl.svg       |  9 ++++
 src/widgets/img/pip_br.svg       |  9 ++++
 src/widgets/img/pip_tl.svg       |  9 ++++
 src/widgets/img/pip_toggle.svg   | 89 +++++++-------------------------
 src/widgets/img/pip_tr.svg       |  9 ++++
 6 files changed, 60 insertions(+), 72 deletions(-)
 create mode 100644 src/widgets/img/pip_bl.svg
 create mode 100644 src/widgets/img/pip_br.svg
 create mode 100644 src/widgets/img/pip_tl.svg
 create mode 100644 src/widgets/img/pip_tr.svg

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 864b1016..0d23681c 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -64,14 +64,14 @@
     display: none;
 }
 .Ldt-SlideVideoPlayer-pip-pip:hover .Ldt-SlideVideoPlayer-pip-menu-toggle {
-    background-color: #000;
-    opacity: .5;
+    opacity: .8;
     display: inline-block;
 }
 
 .Ldt-SlideVideoPlayer-pip-menu-toggle-br {
     bottom: 2px;
     right: 2px;
+    background-image: url(img/pip_br.svg);
 }
 .Ldt-SlideVideoPlayer-pip-br .Ldt-SlideVideoPlayer-pip-menu-toggle-br {
     display: none !important;
@@ -79,6 +79,7 @@
 .Ldt-SlideVideoPlayer-pip-menu-toggle-tr {
     top: 2px;
     right: 2px;
+    background-image: url(img/pip_tr.svg);
 }
 .Ldt-SlideVideoPlayer-pip-tr .Ldt-SlideVideoPlayer-pip-menu-toggle-tr {
     display: none !important;
@@ -86,6 +87,7 @@
 .Ldt-SlideVideoPlayer-pip-menu-toggle-tl {
     top: 2px;
     left: 2px;
+    background-image: url(img/pip_tl.svg);
 }
 .Ldt-SlideVideoPlayer-pip-tl .Ldt-SlideVideoPlayer-pip-menu-toggle-tl {
     display: none !important;
@@ -93,6 +95,7 @@
 .Ldt-SlideVideoPlayer-pip-menu-toggle-bl {
     bottom: 2px;
     left: 2px;
+    background-image: url(img/pip_bl.svg);
 }
 .Ldt-SlideVideoPlayer-pip-bl .Ldt-SlideVideoPlayer-pip-menu-toggle-bl {
     display: none !important;
diff --git a/src/widgets/img/pip_bl.svg b/src/widgets/img/pip_bl.svg
new file mode 100644
index 00000000..f9c20a42
--- /dev/null
+++ b/src/widgets/img/pip_bl.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.0" id="pip_bl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0px" y="0px" width="32px" height="32px"
+	 viewBox="0 0 320 320" enable-background="new 0 0 320 320" xml:space="preserve">
+<g>
+	<circle fill="#DDDDDD" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" cx="160" cy="159.866" r="158"/>
+	<polygon fill="#FFFFFF" points="72.551,234.393 247.912,173.531 169.972,76.393 	"/>
+</g>
+</svg>
diff --git a/src/widgets/img/pip_br.svg b/src/widgets/img/pip_br.svg
new file mode 100644
index 00000000..bc0a4cf3
--- /dev/null
+++ b/src/widgets/img/pip_br.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.0" id="pip_br" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0px" y="0px" width="32px" height="32px"
+	 viewBox="0 0 320 320" xml:space="preserve">
+<g>
+	<circle fill="#DDDDDD" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" cx="160" cy="159.866" r="158"/>
+	<polygon fill="#FFFFFF" points="234.527,247.315 173.666,71.954 76.527,149.893 	"/>
+</g>
+</svg>
diff --git a/src/widgets/img/pip_tl.svg b/src/widgets/img/pip_tl.svg
new file mode 100644
index 00000000..47688efb
--- /dev/null
+++ b/src/widgets/img/pip_tl.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.0" id="pip_tl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     width="32px" height="32px"
+	 viewBox="0 0 320 320" enable-background="new 0 0 320 320" xml:space="preserve">
+<g>
+	<circle fill="#DDDDDD" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" cx="160" cy="159.866" r="158"/>
+	<polygon fill="#FFFFFF" points="85.473,72.416 146.334,247.777 243.473,169.838 	"/>
+</g>
+</svg>
diff --git a/src/widgets/img/pip_toggle.svg b/src/widgets/img/pip_toggle.svg
index 75278974..9ad04170 100644
--- a/src/widgets/img/pip_toggle.svg
+++ b/src/widgets/img/pip_toggle.svg
@@ -1,71 +1,20 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="32px"
-   height="32px"
-   viewBox="0 0 18 18"
-   id="svg19931"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="pip_toggle.svg">
-  <defs
-     id="defs19933" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-245.28621,-280.50506)">
-    <polygon
-       transform="translate(232.09221,226.21106)"
-       style="fill:#ffffff"
-       points="23.586,59.714 22.193,57.364 20.805,59.714 "
-       id="polygon13969" />
-    <polygon
-       transform="translate(232.09221,226.21106)"
-       style="fill:#ffffff"
-       points="22.971,59.364 21.417,59.364 22.496,57.544 22.193,57.364 21.894,57.544 22.193,57.364 21.894,57.187 20.19,60.063 24.199,60.063 22.193,56.679 21.894,57.187 22.193,57.364 21.894,57.544 "
-       id="polygon13971" />
-    <polygon
-       transform="translate(232.09221,226.21106)"
-       style="fill:#ffffff"
-       points="20.805,66.874 22.193,69.224 23.586,66.874 "
-       id="polygon13973" />
-    <polygon
-       transform="translate(232.09221,226.21106)"
-       style="fill:#ffffff"
-       points="21.417,67.224 22.971,67.224 21.894,69.044 22.193,69.224 22.496,69.044 22.193,69.224 22.496,69.399 24.199,66.522 20.19,66.522 22.193,69.909 22.496,69.399 22.193,69.224 22.496,69.044 "
-       id="polygon13975" />
-    <polygon
-       transform="translate(232.09221,226.21106)"
-       style="fill:#ffffff"
-       points="25.818,64.685 28.168,63.294 25.818,61.903 "
-       id="polygon13977" />
-    <polygon
-       transform="translate(232.09221,226.21106)"
-       style="fill:#ffffff"
-       points="26.168,64.071 26.168,62.517 27.988,63.595 28.168,63.294 27.988,62.993 28.168,63.294 28.347,62.993 25.468,61.29 25.468,65.298 28.855,63.294 28.347,62.993 28.168,63.294 27.988,62.993 "
-       id="polygon13979" />
-    <polygon
-       transform="translate(232.09221,226.21106)"
-       style="fill:#ffffff"
-       points="18.659,61.903 16.31,63.294 18.659,64.685 "
-       id="polygon13981" />
-    <polygon
-       transform="translate(232.09221,226.21106)"
-       style="fill:#ffffff"
-       points="18.309,62.517 18.309,64.071 16.488,62.993 16.31,63.294 16.488,63.595 16.31,63.294 16.132,63.595 19.009,65.298 19.009,61.29 15.624,63.294 16.132,63.595 16.31,63.294 16.488,63.595 "
-       id="polygon13983" />
-    <path
-       inkscape:connector-curvature="0"
-       style="fill:#ffffff"
-       d="m 254.28521,298.00506 0,0.5 c 4.965,-0.002 9,-4.035 9,-9 0,-4.965 -4.035,-9 -9,-9 -4.963,0 -8.998,4.035 -8.999,9 10e-4,4.965 4.036,8.998 8.999,9 l 0,-0.5 0,-0.5 c -2.206,0 -4.202,-0.896 -5.653,-2.346 -1.45,-1.451 -2.346,-3.447 -2.346,-5.654 0,-2.207 0.896,-4.203 2.346,-5.654 1.451,-1.449 3.448,-2.346 5.653,-2.346 2.207,0 4.205,0.896 5.654,2.346 1.45,1.451 2.347,3.447 2.347,5.654 0,2.207 -0.896,4.203 -2.347,5.654 -1.449,1.449 -3.447,2.346 -5.654,2.346 l 0,0.5 0,0 z"
-       id="path13985" />
-  </g>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 320 320" enable-background="new 0 0 320 320" xml:space="preserve">
+<g>
+	<circle fill="#DDDDDD" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" cx="160" cy="160" r="157"/>
+	<polygon fill="#FFFFFF" points="157.806,50.522 133.579,91.512 182.099,91.512 	"/>
+	<polygon fill="#FFFFFF" points="157.806,50.522 152.576,47.42 122.864,97.611 192.798,97.611 157.806,38.562 152.576,47.42 
+		157.806,50.522 152.576,53.655 171.366,85.413 144.261,85.413 163.087,53.655 157.806,50.522 152.576,53.655 	"/>
+	<polygon fill="#FFFFFF" points="157.806,257.412 182.099,216.422 133.579,216.422 	"/>
+	<polygon fill="#FFFFFF" points="157.806,257.412 163.087,260.479 192.798,210.29 122.864,210.29 157.806,269.372 163.087,260.479 
+		157.806,257.412 163.087,254.277 144.261,222.521 171.366,222.521 152.576,254.277 157.806,257.412 163.087,254.277 	"/>
+	<polygon fill="#FFFFFF" points="262.035,153.966 221.045,129.707 221.045,178.227 	"/>
+	<polygon fill="#FFFFFF" points="262.035,153.966 265.153,148.72 214.929,119.007 214.929,188.927 274.029,153.966 265.153,148.72 
+		262.035,153.966 258.9,148.72 227.144,167.528 227.144,140.406 258.9,159.214 262.035,153.966 258.9,148.72 	"/>
+	<polygon fill="#FFFFFF" points="55.169,153.966 96.15,178.227 96.15,129.707 	"/>
+	<polygon fill="#FFFFFF" points="55.169,153.966 52.068,159.214 102.258,188.927 102.258,119.007 43.192,153.966 52.068,159.214 
+		55.169,153.966 58.27,159.214 90.043,140.406 90.043,167.528 58.27,148.72 55.169,153.966 58.27,159.214 	"/>
+</g>
 </svg>
diff --git a/src/widgets/img/pip_tr.svg b/src/widgets/img/pip_tr.svg
new file mode 100644
index 00000000..70c90e99
--- /dev/null
+++ b/src/widgets/img/pip_tr.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.0" id="pip_tr" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     width="32px" height="32px"
+	 viewBox="0 0 320 320" enable-background="new 0 0 320 320" xml:space="preserve">
+<g>
+	<circle fill="#DDDDDD" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" cx="160" cy="159.866" r="158"/>
+	<polygon fill="#FFFFFF" points="247.449,85.339 72.088,146.2 150.028,243.339 	"/>
+</g>
+</svg>

From 902748c0d01e7b0e0c765a9abe4b26ecae597201 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 5 Jan 2016 14:43:21 +0100
Subject: [PATCH 118/204] Force hide fullscreen icon

---
 src/widgets/CocoController.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/CocoController.css b/src/widgets/CocoController.css
index d0850088..98d59809 100644
--- a/src/widgets/CocoController.css
+++ b/src/widgets/CocoController.css
@@ -73,5 +73,5 @@
 }
 
 .Ldt-CocoCtrl-Disabled {
-    display: none;
+    display: none !important;
 }

From 4bf4a491f8f03e6c582777f77b5874b5ad9cd7cb Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 6 Jan 2016 16:25:53 +0100
Subject: [PATCH 119/204] Define enable_add_question option, disabled by
 default

---
 src/widgets/Controller.js | 27 ++++++++++++---------------
 src/widgets/Quiz.js       |  8 ++++++--
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/widgets/Controller.js b/src/widgets/Controller.js
index a391ff78..3e115540 100644
--- a/src/widgets/Controller.js
+++ b/src/widgets/Controller.js
@@ -15,7 +15,8 @@ IriSP.Widgets.Controller.prototype.defaults = {
     always_show_search: false,
     // Selector for the widget that needs to be fullscreened
     fullscreen_widget: undefined,
-    enable_quiz_toggle: undefined
+    enable_quiz_toggle: undefined,
+    enable_add_question: false
 };
 
 IriSP.Widgets.Controller.prototype.template =
@@ -106,17 +107,7 @@ IriSP.Widgets.Controller.prototype.draw = function () {
     this.$playButton.click(this.functionWrapper("playHandler"));
 
     if (this.enable_quiz_toggle !== undefined) {
-        if (this.enable_quiz_toggle) {
-            this.$.find(".Ldt-Ctrl-Quiz-Enable").addClass("Ldt-Ctrl-Quiz-Toggle-Active");
-            this.$.find(".Ldt-Ctrl-Quiz-Create").addClass("Ldt-Ctrl-Quiz-Toggle-Active");
-            // this.player.trigger("QuizCreator.show");
-            this.$.find("#QuizEditContainer").show();
-        } else {
-            this.$.find(".Ldt-Ctrl-Quiz-Enable").removeClass("Ldt-Ctrl-Quiz-Toggle-Active");
-            this.$.find(".Ldt-Ctrl-Quiz-Create").removeClass("Ldt-Ctrl-Quiz-Toggle-Active");
-            this.player.trigger("QuizCreator.hide");
-            this.$.find("#QuizEditContainer").hide();
-        }
+        this.toggleQuiz(this.enable_quiz_toggle);
     } else {
         this.$.find(".Ldt-Ctrl-Quiz-Enable").hide();
     }
@@ -267,11 +258,17 @@ IriSP.Widgets.Controller.prototype.createQuiz = function () {
     this.player.trigger("QuizCreator.create");
 };
 
-IriSP.Widgets.Controller.prototype.toggleQuiz = function () {
-    this.enable_quiz_toggle = !this.enable_quiz_toggle;
+IriSP.Widgets.Controller.prototype.toggleQuiz = function (force_state) {
+    if (force_state !== undefined) {
+        this.enable_quiz_toggle = force_state;
+    } else {
+        this.enable_quiz_toggle = !this.enable_quiz_toggle;
+    }
     if (this.enable_quiz_toggle) {
         $(".Ldt-Ctrl-Quiz-Enable").addClass("Ldt-Ctrl-Quiz-Toggle-Active");
-        $(".Ldt-Ctrl-Quiz-Create").addClass("Ldt-Ctrl-Quiz-Toggle-Active");
+        if (this.enable_add_question) {
+            $(".Ldt-Ctrl-Quiz-Create").addClass("Ldt-Ctrl-Quiz-Toggle-Active");
+        }
         this.player.trigger("Quiz.activate");
     } else {
         $(".Ldt-Ctrl-Quiz-Enable").removeClass("Ldt-Ctrl-Quiz-Toggle-Active");
diff --git a/src/widgets/Quiz.js b/src/widgets/Quiz.js
index bd253454..c1dfcaf5 100644
--- a/src/widgets/Quiz.js
+++ b/src/widgets/Quiz.js
@@ -11,7 +11,8 @@ IriSP.Widgets.Quiz.prototype.defaults = {
     analytics_api: "",
     api_method: "POST",
     user: "",
-    userid:""
+    userid:"",
+    enable_add_question: false
 };
 
 IriSP.Widgets.Quiz.prototype.template = '<div class="Ldt-Quiz-Container">'
@@ -245,7 +246,7 @@ IriSP.Widgets.Quiz.prototype.draw = function () {
     });
 
     this.onMediaEvent("pause", function () {
-        if (!_this.quiz_displayed) {
+        if (!_this.quiz_displayed && this.enable_add_question) {
             $(".Ldt-Pause-Add-Question").show();
         }
     });
@@ -260,6 +261,9 @@ IriSP.Widgets.Quiz.prototype.draw = function () {
         .on("click", function () { _this.player.trigger("QuizCreator.create"); })
         .appendTo($('#' + _this.container));
     _this.overlay.html(this.template);
+    if (!this.enable_add_question) {
+        $(".Ldt-Pause-Add-Question").hide();
+    }
 
     $(".Ldt-Quiz-Overlay").hide();
 

From 38139cdf09c0dcde045d2d6600fff4c088fdca8e Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 7 Jan 2016 09:47:48 +0100
Subject: [PATCH 120/204] Specify white background for PIP

---
 src/widgets/SlideVideoPlayer.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 0d23681c..317e40fb 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -32,6 +32,7 @@
     width: 30% !important;
     height: 30%;
     z-index: 3;
+    background-color: #fff;
 }
 
 .Ldt-SlideVideoPlayer-pip-br {

From de2c93c88d687c735d4b7750ff7c50aff51880cb Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 7 Jan 2016 11:15:26 +0100
Subject: [PATCH 121/204] Use grey background for selected annotations

---
 src/widgets/EnrichedPlan.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 70d6f4aa..ad69155b 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -325,7 +325,7 @@ label:hover:before {
 }
 
 .Ldt-EnrichedPlan-Selected-Timecode {
-    border: 1px dashed #6cf;
+    background-color: #cfcfcf;
 }
 
 .Ldt-EnrichedPlan-EditControl {
@@ -343,4 +343,3 @@ label:hover:before {
 .Ldt-EnrichedPlan-Selected-Timecode .adminactions {
     display: inline-block;
 }
-

From 8ec5ed6b266c2588ecfb424e6d894c7d0a930287 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 7 Jan 2016 17:54:03 +0100
Subject: [PATCH 122/204] Specify fill/stroke for hamburger icon

---
 src/widgets/img/hamburger.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/img/hamburger.svg b/src/widgets/img/hamburger.svg
index 0960513c..fd7cc888 100644
--- a/src/widgets/img/hamburger.svg
+++ b/src/widgets/img/hamburger.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="256px" height="256px" viewBox="0 0 256 256">
-  <path id="menu-icon" d="M231,52H25v-36h206z M231,112H25v-36h206z M231,174H25v-36h206" />
+  <path stroke="#000" fill="#000" id="menu-icon" d="M231,52H25v-36h206z M231,112H25v-36h206z M231,174H25v-36h206" />
 </svg>

From 3b7564ccc54f085a5f4d1bfeb1cf7bf82bf264fd Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 13 Jan 2016 16:48:22 +0100
Subject: [PATCH 123/204] Fix padding

---
 src/widgets/EnrichedPlan.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index ad69155b..c8cc3dfe 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -148,7 +148,7 @@
 
 .Ldt-EnrichedPlan-Controls {
     height: 36px;
-    padding: 9px 0 6px 0;
+    padding: 9px 0 5px 0;
     border-bottom: 1px solid #000;
     position: absolute;
     top: 0;

From 7c4ee329b5a54f410a194d17cf668a1e74c75a4d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 13 Jan 2016 16:54:33 +0100
Subject: [PATCH 124/204] Tweak Selected-Timecode background-color

---
 src/widgets/EnrichedPlan.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index c8cc3dfe..417290e2 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -325,7 +325,7 @@ label:hover:before {
 }
 
 .Ldt-EnrichedPlan-Selected-Timecode {
-    background-color: #cfcfcf;
+    background-color: #e9e9e9;
 }
 
 .Ldt-EnrichedPlan-EditControl {

From 59b40ca34d448fc41c71c6a21fce712eb3cad5de Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 14 Jan 2016 16:19:59 +0100
Subject: [PATCH 125/204] Display featured annotations (instead of hardcoded
 teacher)

---
 src/widgets/EnrichedPlan.css |  4 ++--
 src/widgets/EnrichedPlan.js  | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 417290e2..634f5814 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -118,8 +118,8 @@
     color: inherit;
 }
 
-.Ldt-EnrichedPlan-Note-Teacher,
-.Ldt-EnrichedPlan-Note-Link.Ldt-EnrichedPlan-Note-Teacher {
+.Ldt-EnrichedPlan-Note-Featured,
+.Ldt-EnrichedPlan-Note-Link.Ldt-EnrichedPlan-Note-Featured {
     color: #e5007e;
     font-style: italic;
 }
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index f12fa1a3..babdafba 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -13,7 +13,7 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
     en: {
         delete_annotation: "Delete note",
         confirm_delete_message: "You are about to delete {{ annotation.title }}. Are you sure you want to delete it?",
-        teacher_notes: "Teacher notes",
+        featured_notes: "Featured notes",
         other_notes: "Other Notes",
         own_notes: "Pers. notes",
         slides: "Slides",
@@ -23,7 +23,7 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
     fr: {
         delete_annotation: "Supprimer la note",
         confirm_delete_message: "Vous allez supprimer {{ annotation.title }}. Êtes-vous certain(e) ?",
-        teacher_notes: "Notes Enseignant",
+        featured_notes: "Notes Promues",
         other_notes: "Notes Autres",
         own_notes: "Notes perso.",
         slides: "Diapo",
@@ -39,7 +39,7 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
     annotation_types: [],
     show_controls: true,
     show_slides: true,
-    show_teacher_notes: true,
+    show_featured_notes: true,
     show_other_notes: true,
     show_own_notes: true,
     is_admin: false,
@@ -60,8 +60,8 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
     + ' <input type="checkbox" class="Ldt-EnrichedPlan-ControlMenuHome" id="{{ prefix }}control_menu"/>'
     + '<ul>'
     + ' <li>'
-    + '  <input id="{{prefix}}teacher_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Teacher" {{#show_teacher_notes}}checked{{/show_teacher_notes}} type="checkbox">'
-    + '  <label for="{{prefix}}teacher_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Teacher">{{ l10n.teacher_notes }}</label>'
+    + '  <input id="{{prefix}}featured_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Featured" {{#show_featured_notes}}checked{{/show_featured_notes}} type="checkbox">'
+    + '  <label for="{{prefix}}featured_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Featured">{{ l10n.featured_notes }}</label>'
     + ' </li>'
     + ' <li>'
     + '  <input id="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Other" {{#show_other_notes}}checked{{/show_other_notes}} type="checkbox">'
@@ -261,7 +261,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
         });
     };
 
-    // Returns the note category: Own, Other, Teacher
+    // Returns the note category: Own, Other, Featured
     function note_category(a) {
         var category = a.meta["coco:category"] || 'other';
         return capitalize(category);
@@ -293,7 +293,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                     category: "Ldt-EnrichedPlan-Note-" + note_category(a),
                     filtered: ((note_category(a) == 'Own' && !_this.show_own_notes)
                                 || (note_category(a) == 'Other' && !_this.show_other_notes)
-                                || (note_category(a) == 'Teacher' && !_this.show_teacher_notes)) ? 'filtered_out' : ''
+                                || (note_category(a) == 'Featured' && !_this.show_featured_notes)) ? 'filtered_out' : ''
                 });
             }).join("\n")
         });

From d5543558578b8ea24dd51ec8279980f0503aa0b4 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 14 Jan 2016 16:44:03 +0100
Subject: [PATCH 126/204] Coding style fix

---
 src/js/serializers/ldt_annotate.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/js/serializers/ldt_annotate.js b/src/js/serializers/ldt_annotate.js
index 047a68b1..745ba722 100644
--- a/src/js/serializers/ldt_annotate.js
+++ b/src/js/serializers/ldt_annotate.js
@@ -22,7 +22,7 @@ IriSP.serializers.ldt_annotate = {
             media: _data.getMedia().id,
             project: _data.project_id,
             type_title: _annType.title,
-            type: ( typeof _annType.dont_send_id !== "undefined" && _annType.dont_send_id ? "" : _annType.id ),
+            type: (typeof _annType.dont_send_id !== "undefined" && _annType.dont_send_id ? "" : _annType.id),
             meta: {
                 created: _data.created,
                 creator: _data.creator,
@@ -50,9 +50,8 @@ IriSP.serializers.ldt_annotate = {
             var _tags = _source.getTags(true).searchByTitle(_title, true);
             if (_tags.length) {
                 var _tag = _tags[0];
-            }
-            else {
-                _tag = new IriSP.Model.Tag(_title.replace(/\W/g,'_'),_source);
+            } else {
+                _tag = new IriSP.Model.Tag(_title.replace(/\W/g, '_'), _source);
                 _tag.title = _title;
                 _source.getTags().push(_tag);
             }

From 5497740d3722cd5807f047e9014c7e2b74193d71 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 14 Jan 2016 16:45:06 +0100
Subject: [PATCH 127/204] Serialize sharing attribute

The deserialization is already effective since it is done through the meta.visibility attribute
---
 src/js/serializers/ldt_annotate.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/js/serializers/ldt_annotate.js b/src/js/serializers/ldt_annotate.js
index 745ba722..e5b2cfbb 100644
--- a/src/js/serializers/ldt_annotate.js
+++ b/src/js/serializers/ldt_annotate.js
@@ -22,6 +22,7 @@ IriSP.serializers.ldt_annotate = {
             media: _data.getMedia().id,
             project: _data.project_id,
             type_title: _annType.title,
+            sharing: _data.sharing || "private",
             type: (typeof _annType.dont_send_id !== "undefined" && _annType.dont_send_id ? "" : _annType.id),
             meta: {
                 created: _data.created,

From fa0836215db902384d44c7e04780488c19723d65 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 14 Jan 2016 16:46:31 +0100
Subject: [PATCH 128/204] Use current_group information for sharing new
 annotations

---
 src/widgets/CocoCreateAnnotation.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/widgets/CocoCreateAnnotation.js b/src/widgets/CocoCreateAnnotation.js
index 185918fe..cc4ae590 100644
--- a/src/widgets/CocoCreateAnnotation.js
+++ b/src/widgets/CocoCreateAnnotation.js
@@ -5,7 +5,9 @@ IriSP.Widgets.CocoCreateAnnotation = function (player, config) {
 IriSP.Widgets.CocoCreateAnnotation.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.CocoCreateAnnotation.prototype.defaults = {
-    pause_on_write : true
+    pause_on_write : true,
+    /* Function that should return the current group id (or "public" for public annotations) */
+    current_group: undefined
 };
 
 IriSP.Widgets.CocoCreateAnnotation.prototype.messages = {
@@ -125,6 +127,14 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.onSubmit = function () {
     _annotation.description = this.$.find(".Ldt-CocoCreateAnnotation-Text").val().trim();
     _annotation.title = "";
 
+    var g = this.current_group && this.current_group();
+    if (g == -1) {
+        _annotation.sharing = "public";
+    } else if (g !== undefined) {
+        _annotation.sharing = "shared-" + g;
+    } else {
+        _annotation.sharing = "private";
+    }
     if (this.project_id != "") {
         /* Project id, only if it's been specifiec in the config */
         _annotation.project_id = this.project_id;

From 95289597e0a1bf93af98981fd3c9bfad211c3a26 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 14 Jan 2016 17:44:34 +0100
Subject: [PATCH 129/204] Display sharing icon next to annotation

---
 src/widgets/EnrichedPlan.css      | 29 ++++++++++++++++++++++++++---
 src/widgets/EnrichedPlan.js       |  6 ++++--
 src/widgets/img/icon_featured.svg | 14 ++++++++++++++
 src/widgets/img/icon_group.svg    | 11 +++++++++++
 src/widgets/img/icon_public.svg   | 22 ++++++++++++++++++++++
 src/widgets/img/icon_question.svg | 24 ++++++++++++++++++++++++
 6 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 src/widgets/img/icon_featured.svg
 create mode 100644 src/widgets/img/icon_group.svg
 create mode 100644 src/widgets/img/icon_public.svg
 create mode 100644 src/widgets/img/icon_question.svg

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 634f5814..ffc25b1d 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -29,7 +29,7 @@
 }
 
 .Ldt-EnrichedPlan-NoteTimecode {
-    left: -35px;
+    left: -52px;
     position: absolute;
     font-family: Roboto !important;
     padding-top: 8px;
@@ -60,8 +60,8 @@
 
 .Ldt-EnrichedPlan-SlideThumbnail.filtered_out + .Ldt-EnrichedPlan-SlideContent,
 .Ldt-EnrichedPlan-FlatMode .Ldt-EnrichedPlan-SlideContent {
-    width: calc(100% - 40px);
-    margin-left: 8px;
+    width: calc(100% - 60px);
+    margin-left: 28px;
 }
 
 .Ldt-EnrichedPlan-SlideThumbnail.filtered_out + .Ldt-EnrichedPlan-SlideContent .Ldt-EnrichedPlan-NoteTimecode,
@@ -105,6 +105,7 @@
 }
 
 .Ldt-EnrichedPlan-Note {
+    position: relative;
     font-weight: normal;
     font-size: 14px;
     font-family: Roboto-italic;
@@ -343,3 +344,25 @@ label:hover:before {
 .Ldt-EnrichedPlan-Selected-Timecode .adminactions {
     display: inline-block;
 }
+
+.Ldt-EnrichedPlan-private {
+}
+.Ldt-EnrichedPlan-public:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -20px;
+    width: 18px;
+    height: 18px;
+    background: url(img/icon_public.svg);
+}
+
+.Ldt-EnrichedPlan-shared:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -20px;
+    width: 18px;
+    height: 18px;
+    background: url(img/icon_group.svg);
+}
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index babdafba..3f0a1272 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -96,7 +96,7 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '  </div>'
     + '</div>';
 
-IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a></div>{{/is_admin}}</div>';
+IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Featured{{/featured}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a></div>{{/is_admin}}</div>';
 
 
 /**
@@ -287,8 +287,10 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                     begin: a.begin.toString(),
                     begintc: a.begin.milliseconds,
                     atitle: a.getTitleOrDescription().slice(0, 20),
-                    can_edit: a.meta['coco:can_edit'],
                     is_admin: _this.is_admin,
+                    can_edit: a.meta['coco:can_edit'],
+                    visibility: (a.meta['coco:visibility'] || "").indexOf('shared-') == 0 ? "shared" : (a.meta['coco:visibility'] || "private"),
+                    featured: a.meta['coco:featured'],
                     admin_url: _this.action_url('admin', a.id),
                     category: "Ldt-EnrichedPlan-Note-" + note_category(a),
                     filtered: ((note_category(a) == 'Own' && !_this.show_own_notes)
diff --git a/src/widgets/img/icon_featured.svg b/src/widgets/img/icon_featured.svg
new file mode 100644
index 00000000..c12e8452
--- /dev/null
+++ b/src/widgets/img/icon_featured.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px"
+	 viewBox="0 0 320 320" enable-background="new 0 0 320 320" xml:space="preserve">
+<path fill="#FF0066" d="M159.517,308c-82.164,0-149-66.836-149-149s66.836-149,149-149s149,66.836,149,149S241.681,308,159.517,308z
+	 M159.517,26.556c-73.03,0-132.444,59.4-132.444,132.444c0,73.012,59.415,132.444,132.444,132.444
+	c73.028,0,132.444-59.433,132.444-132.444C291.961,85.955,232.545,26.556,159.517,26.556z"/>
+<path fill="#FF0066" d="M249.114,145.303l-48.84,35.551l18.703,57.656c0.971,2.756-0.055,5.795-2.416,7.537
+	c-1.238,0.844-2.604,1.351-4.009,1.351c-1.336,0-2.814-0.507-4.023-1.351l-49.007-35.606l-49.064,35.606
+	c-1.195,0.844-2.629,1.351-3.966,1.351c-1.434,0-2.799-0.507-3.995-1.351c-2.39-1.742-3.347-4.781-2.474-7.537l18.758-57.656
+	l-49.064-35.609c-2.333-1.8-3.361-4.836-2.445-7.537c0.87-2.869,3.528-4.723,6.44-4.723h60.596l18.775-57.713
+	c0.942-2.756,3.514-4.669,6.44-4.669c2.912,0,5.498,1.912,6.425,4.669l18.775,57.713h60.582h0.029c3.782,0,6.762,3.036,6.762,6.748
+	C252.095,142.097,250.886,144.176,249.114,145.303z"/>
+</svg>
diff --git a/src/widgets/img/icon_group.svg b/src/widgets/img/icon_group.svg
new file mode 100644
index 00000000..c52991ff
--- /dev/null
+++ b/src/widgets/img/icon_group.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px"
+	 viewBox="0 0 320 320" enable-background="new 0 0 320 320" xml:space="preserve">
+<path fill="#66CCFF" d="M159.634,308.653c-82.164,0-149-66.836-149-149s66.836-149,149-149s149,66.836,149,149
+	S241.798,308.653,159.634,308.653z M159.634,27.209c-73.03,0-132.444,59.4-132.444,132.444c0,73.012,59.415,132.444,132.444,132.444
+	c73.028,0,132.444-59.433,132.444-132.444C292.079,86.608,232.663,27.209,159.634,27.209z"/>
+<circle fill="#66CCFF" cx="159.634" cy="159.733" r="28"/>
+<polygon fill="#66CCFF" points="274.313,159.396 247,132.083 247,152 186,152 186,169 247,169 247,186.708 "/>
+<polygon fill="#66CCFF" points="242,79 202.976,79 216.361,92.502 173.228,135.693 185.249,147.743 228.581,104.624 242,117.858 "/>
+</svg>
diff --git a/src/widgets/img/icon_public.svg b/src/widgets/img/icon_public.svg
new file mode 100644
index 00000000..472d8eec
--- /dev/null
+++ b/src/widgets/img/icon_public.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px"
+	 viewBox="0 0 320 320" enable-background="new 0 0 320 320" xml:space="preserve">
+<path fill="#66CCFF" d="M159.634,308.653c-82.164,0-149-66.836-149-149s66.836-149,149-149s149,66.836,149,149
+	S241.798,308.653,159.634,308.653z M159.634,27.209c-73.03,0-132.444,59.4-132.444,132.444c0,73.012,59.415,132.444,132.444,132.444
+	c73.028,0,132.444-59.433,132.444-132.444C292.079,86.608,232.663,27.209,159.634,27.209z"/>
+<g>
+	<circle fill="#66CCFF" cx="159.634" cy="159.733" r="28"/>
+	<polygon fill="#66CCFF" points="159.383,44.687 132.07,72 151,72 151,133 168,133 168,72 186.695,72 	"/>
+	<polygon fill="#66CCFF" points="159.383,274.313 186.695,247 168,247 168,186 151,186 151,247 132.07,247 	"/>
+	<polygon fill="#66CCFF" points="274.313,159.396 247,132.083 247,152 186,152 186,169 247,169 247,186.708 	"/>
+	<polygon fill="#66CCFF" points="44.687,159.844 72,187.156 72,168 133,168 133,151 72,151 72,132.531 	"/>
+	<polygon fill="#66CCFF" points="242,79 202.976,79 216.361,92.502 173.228,135.693 185.249,147.743 228.581,104.624 242,117.858 	
+		"/>
+	<polygon fill="#66CCFF" points="79,242 117.858,242 104.639,228.581 147.772,185.348 135.751,173.278 92.502,216.386 79,202.976 	
+		"/>
+	<polygon fill="#66CCFF" points="242,240 242,200.985 227.796,215.069 184.602,171.935 172.551,183.956 215.669,227.284 
+		203.133,240 	"/>
+	<polygon fill="#66CCFF" points="79,79 79,117.184 92.582,103.639 135.733,146.772 147.763,134.751 104.634,91.839 117.698,79 	"/>
+</g>
+</svg>
diff --git a/src/widgets/img/icon_question.svg b/src/widgets/img/icon_question.svg
new file mode 100644
index 00000000..3d1d7f9a
--- /dev/null
+++ b/src/widgets/img/icon_question.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px"
+	 viewBox="0 0 320 320" enable-background="new 0 0 320 320" xml:space="preserve">
+<g>
+	<path fill="#5EA524" d="M159.327,308c-82.164,0-149-66.836-149-149s66.836-149,149-149s149,66.836,149,149S241.491,308,159.327,308
+		z M159.327,26.556c-73.03,0-132.444,59.4-132.444,132.444c0,73.012,59.415,132.444,132.444,132.444
+		c73.028,0,132.444-59.433,132.444-132.444C291.772,85.955,232.355,26.556,159.327,26.556z"/>
+	<g>
+		<path fill="#5EA524" d="M123.056,79.469c8.06-7.821,20.283-11.714,36.672-11.714s29.177,4.001,38.38,12.042
+			c9.222,8.004,13.825,18.262,13.825,30.742c0,5.856-0.928,11.059-2.801,15.643c-3.401,8.404-9.803,15.753-19.227,22.047
+			c-3.729,2.366-6.275,4.001-7.641,4.912c-1.363,0.872-4.092,2.582-8.203,5.13c-4.13,2.546-7.058,5.456-8.803,8.658
+			c-1.729,3.237-2.857,9.896-3.366,20.009h-7.767l-0.255-11.096c0-7.458,3.202-16.989,9.606-28.631
+			c6.421-11.642,9.623-23.937,9.623-36.926c0-10.515-1.82-18.664-5.476-24.448c-3.656-5.785-9.513-8.66-17.571-8.66
+			c-5.258,0-9.023,1.129-11.278,3.384c-2.237,2.218-3.366,4.619-3.366,7.168c0,1.127,0.164,2.001,0.51,2.692
+			c0.345,0.691,0.982,1.565,1.909,2.656l1.783,2.183c1.946,2.364,3.329,4.547,4.148,6.475c0.799,1.965,1.2,4.439,1.2,7.385
+			c0,4.839-1.619,8.73-4.839,11.604c-3.219,2.874-7.093,4.331-11.586,4.331c-4.748,0-8.877-1.71-12.351-5.167
+			c-3.474-3.42-5.221-8.404-5.221-14.952C110.96,95.767,114.998,87.29,123.056,79.469z M142.739,213.349
+			c4.275-4.293,9.477-6.439,15.589-6.439c6.02,0,11.206,2.146,15.535,6.439c4.329,4.293,6.493,9.496,6.493,15.607
+			c0,6.111-2.164,11.314-6.493,15.607c-4.329,4.256-9.515,6.402-15.535,6.402c-6.111,0-11.314-2.146-15.589-6.402
+			c-4.293-4.293-6.439-9.496-6.439-15.607C136.299,222.844,138.445,217.642,142.739,213.349z"/>
+	</g>
+</g>
+</svg>

From 6925861014452040d0f1e6e142e571e93a47cafe Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 14 Jan 2016 17:56:10 +0100
Subject: [PATCH 130/204] Handle public notes

---
 src/widgets/EnrichedPlan.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 3f0a1272..78c73e63 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -44,6 +44,7 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
     show_own_notes: true,
     is_admin: false,
     flat_mode: false,
+    /* Group is either a group id, or -1 for public notes */
     group: undefined,
     // action_url should be a function (action, elementid) that returns a URL
     // Possible actions: admin, edit, level
@@ -228,11 +229,16 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
         return _annotation.begin;
     });
 
-    if (_this.group) {
+    if (_this.group > 0) {
         _annotations = _annotations.filter(function (a) {
             return a.meta['coco:group'] == _this.group;
         });
+    } else if (_this.group == -1) {
+        _annotations = _annotations.filter(function (a) {
+            return a.meta['coco:visibility'] == "public";
+        });
     }
+
     // Reference annotations in each slide: assume that slide end time is
     // correctly set.
     _slides.forEach(function (slide) {

From 2da41cde68d8c780c64b7cdb7883f4e418b62645 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 15 Jan 2016 11:08:28 +0100
Subject: [PATCH 131/204] Move edit button to the right of the widget

---
 src/widgets/EnrichedPlan.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index ffc25b1d..79b45bbd 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -327,10 +327,15 @@ label:hover:before {
 
 .Ldt-EnrichedPlan-Selected-Timecode {
     background-color: #e9e9e9;
+    min-height: 34px;
+    padding-right: 32px;
 }
 
 .Ldt-EnrichedPlan-EditControl {
     display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
 }
 
 .Ldt-EnrichedPlan-Selected-Timecode .Ldt-EnrichedPlan-EditControl {

From 9d0617ab9f8881e75959e2f91a596c77ab2f6903 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 15 Jan 2016 17:51:30 +0100
Subject: [PATCH 132/204] Implement annotation bar display

---
 src/widgets/EnrichedPlan.css | 13 +++++++
 src/widgets/EnrichedPlan.js  | 68 +++++++++++++++++++++++-------------
 2 files changed, 56 insertions(+), 25 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 79b45bbd..c83ef5f2 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -371,3 +371,16 @@ label:hover:before {
     height: 18px;
     background: url(img/icon_group.svg);
 }
+
+.Ldt-EnrichedPlan-BarContainer {
+    position: relative;
+    height: 20px;
+}
+
+.Ldt-EnrichedPlan-Bar-Slide,
+.Ldt-EnrichedPlan-Bar-Note {
+    width: 0px;
+    height: 100%;
+    border-left: 1px solid #fff;
+    position: absolute;
+}
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 78c73e63..027a8f1e 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -48,7 +48,8 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
     group: undefined,
     // action_url should be a function (action, elementid) that returns a URL
     // Possible actions: admin, edit, level
-    action_url: function (action, elementid) { return ""; }
+    action_url: function (action, elementid) { return ""; },
+    bar_container: undefined
 };
 
 IriSP.Widgets.EnrichedPlan.prototype.template =
@@ -87,6 +88,9 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
     + '</form>'
     + '</div>';
 
+IriSP.Widgets.EnrichedPlan.prototype.barTemplate =
+    '<div class="Ldt-EnrichedPlan-BarContainer"></div>';
+
 IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
       '<div data-id="{{ id }}" class="Ldt-EnrichedPlan-Slide">'
     + '  <div class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-SlideTimecode">{{ begin }}</div>'
@@ -97,14 +101,21 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '  </div>'
     + '</div>';
 
+IriSP.Widgets.EnrichedPlan.prototype.slideBarTemplate =
+      '<div data-id="{{ id }}" data-timecode="{{begintc}}" data-level="{{level}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Slide Ldt-EnrichedPlan-Bar-Slide{{ level }}">'
+    + '</div>';
+
 IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Featured{{/featured}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a></div>{{/is_admin}}</div>';
 
+IriSP.Widgets.EnrichedPlan.prototype.annotationBarTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-Bar-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Featured{{/featured}}"></div>';
+
 
 /**
  * Initialize the component
  */
 IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
     var _this = this;
+    _this.bar = undefined;
 
     // Get slides here so that it correctly initializes implicit
     // flat_mode if necessary (see template)
@@ -114,32 +125,37 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
     // (necessary for label association) are unique too.
     _this.prefix = IriSP.generateUuid();
     _this.renderTemplate();
-    var container = _this.$.find('.Ldt-EnrichedPlan-Container');
-    var content = _this.$.find('.Ldt-EnrichedPlan-Content');
+    if (_this.bar_container) {
+        // Container for the annotation bar
+        _this.bar = IriSP.jQuery(_this.templateToHtml(_this.barTemplate));
+        IriSP.jQuery("#" + _this.bar_container).append(_this.bar);
+    }
+    _this.container = _this.$.find('.Ldt-EnrichedPlan-Container');
+    _this.content = _this.$.find('.Ldt-EnrichedPlan-Content');
 
-    container.on("click", "[data-timecode]", function () {
+    _this.container.on("click", "[data-timecode]", function () {
         _this.media.setCurrentTime(Number(this.dataset.timecode));
         IriSP.jQuery(".Ldt-EnrichedPlan-Selected-Timecode").removeClass("Ldt-EnrichedPlan-Selected-Timecode");
         IriSP.jQuery(this).addClass("Ldt-EnrichedPlan-Selected-Timecode");
     });
 
-    container.on("click", ".Ldt-EnrichedPlan-Control-Checkbox", function () {
+    _this.container.on("click", ".Ldt-EnrichedPlan-Control-Checkbox", function () {
         var classname = _.first(_.filter(this.classList, function (s) {
             return s != "Ldt-EnrichedPlan-Control-Checkbox";
         }));
         if (classname !== undefined) {
             if (IriSP.jQuery(this).is(':checked')) {
-                content.find(".Ldt-EnrichedPlan-Slide ." + classname).removeClass("filtered_out");
+                _this.content.find(".Ldt-EnrichedPlan-Slide ." + classname).removeClass("filtered_out");
             } else {
-                content.find(".Ldt-EnrichedPlan-Slide ." + classname).addClass("filtered_out");
+                _this.content.find(".Ldt-EnrichedPlan-Slide ." + classname).addClass("filtered_out");
             }
         }
     });
 
-    container.on("click", ".Ldt-EnrichedPlan-EditControl-Edit", function () {
+    _this.container.on("click", ".Ldt-EnrichedPlan-EditControl-Edit", function () {
         _this.player.trigger("Annotation.edit", this.dataset.id);
     });
-    container.on("click", ".Ldt-EnrichedPlan-EditControl-Delete", function () {
+    _this.container.on("click", ".Ldt-EnrichedPlan-EditControl-Delete", function () {
         var _annotation = _this.source.getElement(this.dataset.id);
         if (confirm(Mustache.to_html(_this.l10n.confirm_delete_message, { annotation: _annotation }))) {
             _this.source.getAnnotations().removeElement(_annotation);
@@ -169,19 +185,19 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
         });
     };
 
-    container.on("click", ".level_incr", function () {
+    _this.container.on("click", ".level_incr", function () {
         update_level(this, +1);
     }).on("click", ".level_decr", function () {
         update_level(this, -1);
     });
 
-    container.find(".Ldt-EnrichedPlan-Search-Input").on("search", function () {
+    _this.container.find(".Ldt-EnrichedPlan-Search-Input").on("search", function () {
         var q = IriSP.jQuery(this).val().toLocaleLowerCase();
         if (q === "") {
             // Show all
-            content.find(".Ldt-EnrichedPlan-Note").removeClass("non_matching");
+            _this.content.find(".Ldt-EnrichedPlan-Note").removeClass("non_matching");
         } else {
-            content.find(".Ldt-EnrichedPlan-Note").each(function () {
+            _this.content.find(".Ldt-EnrichedPlan-Note").each(function () {
                 var node = IriSP.jQuery(this);
                 if (node.text().toLocaleLowerCase().indexOf(q) > -1) {
                     node.removeClass("non_matching");
@@ -191,8 +207,6 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
             });
         }
     });
-
-    return [container, content];
 };
 
 IriSP.Widgets.EnrichedPlan.prototype.get_slides = function () {
@@ -210,6 +224,7 @@ IriSP.Widgets.EnrichedPlan.prototype.get_slides = function () {
             title: title,
             begin: 0,
             end: this.media.duration,
+            media: this.media,
             thumbnail: "",
             getTitleOrDescription: function () {
                 return title;
@@ -247,17 +262,16 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
         });
     });
 
-    var container = _this.$.find('.Ldt-EnrichedPlan-Container');
-    var content = _this.$.find('.Ldt-EnrichedPlan-Content');
-    if (!container.length) {
+    if (this.container === undefined) {
         // Initialization, render the container template
         var els = _this.init_component();
-        container = els[0];
-        content = els[1];
     } else {
         // Update: empty the container
         // (Should do an incremental update, TBD)
-        content.empty();
+        _this.content.empty();
+        if (_this.bar) {
+            _this.bar.empty();
+        }
     }
 
     function capitalize(s) {
@@ -274,12 +288,13 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
     };
 
     _slides.forEach(function (slide) {
-        var _html = Mustache.to_html(_this.slideTemplate, {
+        var slideData = {
             id : slide.id,
             atitle : IriSP.textFieldHtml(slide.getTitleOrDescription()),
             level: (slide.content !== undefined && slide.content.data !== undefined) ? (slide.content.data.level || 1) : 1,
             begin : slide.begin.toString(),
             begintc: slide.begin.milliseconds,
+            position: 100 * slide.begin.milliseconds / _this.media.duration,
             thumbnail: slide.thumbnail,
             show_slides: _this.show_slides,
             is_admin: _this.is_admin,
@@ -304,9 +319,12 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                                 || (note_category(a) == 'Featured' && !_this.show_featured_notes)) ? 'filtered_out' : ''
                 });
             }).join("\n")
-        });
-        var _el = IriSP.jQuery(_html);
-        content.append(_el);
+        };
+        _this.content.append(IriSP.jQuery(Mustache.to_html(_this.slideTemplate, slideData)));
+        if (_this.bar) {
+            var el = IriSP.jQuery(Mustache.to_html(_this.slideBarTemplate, slideData));
+            _this.bar.append(el);
+        }
     });
 };
 

From 053b4483a901d0dfef45ed9a92e5b0b2ae7bfed1 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 19 Jan 2016 17:40:18 +0100
Subject: [PATCH 133/204] Update icon_group and icon_public

---
 src/widgets/img/icon_group.svg  | 33 ++++++++++++++-------
 src/widgets/img/icon_public.svg | 51 +++++++++++++++++++--------------
 2 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/src/widgets/img/icon_group.svg b/src/widgets/img/icon_group.svg
index c52991ff..53161d9d 100644
--- a/src/widgets/img/icon_group.svg
+++ b/src/widgets/img/icon_group.svg
@@ -1,11 +1,22 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px"
-	 viewBox="0 0 320 320" enable-background="new 0 0 320 320" xml:space="preserve">
-<path fill="#66CCFF" d="M159.634,308.653c-82.164,0-149-66.836-149-149s66.836-149,149-149s149,66.836,149,149
-	S241.798,308.653,159.634,308.653z M159.634,27.209c-73.03,0-132.444,59.4-132.444,132.444c0,73.012,59.415,132.444,132.444,132.444
-	c73.028,0,132.444-59.433,132.444-132.444C292.079,86.608,232.663,27.209,159.634,27.209z"/>
-<circle fill="#66CCFF" cx="159.634" cy="159.733" r="28"/>
-<polygon fill="#66CCFF" points="274.313,159.396 247,132.083 247,152 186,152 186,169 247,169 247,186.708 "/>
-<polygon fill="#66CCFF" points="242,79 202.976,79 216.361,92.502 173.228,135.693 185.249,147.743 228.581,104.624 242,117.858 "/>
-</svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.0"
+   id="icon_group"
+   x="0px"
+   y="0px"
+   width="18px" height="18px"
+   viewBox="0 0 320 320"
+   enable-background="new 0 0 320 320"
+   xml:space="preserve">
+  <path fill="#66CCFF"
+        d="M159.532,310.151c-82.164,0-149-66.836-149-149s66.836-149,149-149s149,66.836,149,149  S241.696,310.151,159.532,310.151z M159.532,28.706c-73.03,0-132.444,59.4-132.444,132.444c0,73.012,59.415,132.444,132.444,132.444  c73.028,0,132.444-59.433,132.444-132.444C291.977,88.106,232.561,28.706,159.532,28.706z"
+        id="path1359" /><g
+        transform="matrix(1 0 0 1 79.9861 238.7594)"
+        style="font-size:206px;font-family:Merriweather-Regular;fill:#66ccff"
+        id="text1361"><path
+        d="m 122.61426,-21.424805 0,-40.334961 -33.193362,0 0,-16.697265 53.310552,0 0,64.475586 q -11.76856,8.3486325 -25.95118,12.6738278 -14.18261,4.2246094 -30.276364,4.2246094 -35.205078,0 -55.121094,-20.5195312 -19.815429,-20.620117 -19.815429,-57.333984 0,-36.814457 19.815429,-57.333987 19.916016,-20.62011 55.121094,-20.62011 14.685544,0 27.862304,3.62109 13.27734,3.62109 24.44238,10.66211 l 0,21.62597 q -11.26562,-9.55566 -23.93945,-14.38378 -12.67383,-4.82813 -26.655273,-4.82813 -27.560547,0 -41.441406,15.38965 -13.780274,15.38965 -13.780274,45.867187 0,30.376953 13.780274,45.766601 13.880859,15.389649 41.441406,15.389649 10.762695,0 19.211913,-1.810547 8.44922,-1.911133 15.18848,-5.833985 z"
+        style="font-size:206px;font-family:Merriweather-Regular;fill:#66ccff"
+        id="path5496" />
+</g></svg>
diff --git a/src/widgets/img/icon_public.svg b/src/widgets/img/icon_public.svg
index 472d8eec..52a9e554 100644
--- a/src/widgets/img/icon_public.svg
+++ b/src/widgets/img/icon_public.svg
@@ -1,22 +1,29 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px"
-	 viewBox="0 0 320 320" enable-background="new 0 0 320 320" xml:space="preserve">
-<path fill="#66CCFF" d="M159.634,308.653c-82.164,0-149-66.836-149-149s66.836-149,149-149s149,66.836,149,149
-	S241.798,308.653,159.634,308.653z M159.634,27.209c-73.03,0-132.444,59.4-132.444,132.444c0,73.012,59.415,132.444,132.444,132.444
-	c73.028,0,132.444-59.433,132.444-132.444C292.079,86.608,232.663,27.209,159.634,27.209z"/>
-<g>
-	<circle fill="#66CCFF" cx="159.634" cy="159.733" r="28"/>
-	<polygon fill="#66CCFF" points="159.383,44.687 132.07,72 151,72 151,133 168,133 168,72 186.695,72 	"/>
-	<polygon fill="#66CCFF" points="159.383,274.313 186.695,247 168,247 168,186 151,186 151,247 132.07,247 	"/>
-	<polygon fill="#66CCFF" points="274.313,159.396 247,132.083 247,152 186,152 186,169 247,169 247,186.708 	"/>
-	<polygon fill="#66CCFF" points="44.687,159.844 72,187.156 72,168 133,168 133,151 72,151 72,132.531 	"/>
-	<polygon fill="#66CCFF" points="242,79 202.976,79 216.361,92.502 173.228,135.693 185.249,147.743 228.581,104.624 242,117.858 	
-		"/>
-	<polygon fill="#66CCFF" points="79,242 117.858,242 104.639,228.581 147.772,185.348 135.751,173.278 92.502,216.386 79,202.976 	
-		"/>
-	<polygon fill="#66CCFF" points="242,240 242,200.985 227.796,215.069 184.602,171.935 172.551,183.956 215.669,227.284 
-		203.133,240 	"/>
-	<polygon fill="#66CCFF" points="79,79 79,117.184 92.582,103.639 135.733,146.772 147.763,134.751 104.634,91.839 117.698,79 	"/>
-</g>
-</svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.0"
+   id="Calque_1"
+   x="0px"
+   y="0px" width="18px" height="18px"
+   viewBox="0 0 320 320"
+   enable-background="new 0 0 320 320"
+   xml:space="preserve">
+  <path
+      style="fill:#66ccff"
+      d="M 159.532,310.151 C 100.93614,310.93949 44.494482,273.21232 22.258938,219.09519 -0.96981442,165.92121 11.11585,99.865627 51.721458,58.398721 90.770449,16.363665 155.10931,0.90568177 208.99693,20.589096 c 56.47332,19.222394 97.94058,75.089598 99.42559,134.810674 3.01208,58.01863 -31.8351,115.40568 -84.34797,140.03665 -20.03964,9.69881 -42.28276,14.74394 -64.54255,14.71458 z m 0,-281.445 C 100.70969,27.690857 45.092499,70.964459 31.264906,128.08449 16.910029,180.90008 39.696255,240.96372 85.533068,270.9391 132.36625,303.73411 200.26657,300.43018 243.72935,263.30637 287.46481,228.37677 304.06132,164.39194 282.77479,112.62849 263.64377,62.857594 212.93782,28.078654 159.532,28.706 Z"
+      id="path1359"
+      />
+  <g
+      transform="matrix(1 0 0 1 95.6527 238.7594)"
+      style="font-size:206px;font-family:Merriweather-Regular;fill:#66ccff"
+      id="text1361">
+    <path
+        style="font-size:206px;font-family:Merriweather-Regular;fill:#66ccff"
+        d="m 40.536133,-133.47754 c 0,18.80957 0,37.619141 0,56.428712 14.428899,-0.829345 29.788754,2.538595 43.20166,-4.13031 19.114187,-11.371556 15.307489,-47.287552 -7.921143,-51.265822 -11.613627,-1.8938 -23.542852,-0.69443 -35.280517,-1.03258 z m -20.31836,-16.69726 c 21.018063,0.51702 42.204172,-1.3258 63.062668,1.61252 18.565159,2.6354 33.493719,19.04164 33.699439,37.90832 2.54844,19.132735 -6.63372,41.064972 -26.406566,46.706058 -16.144897,5.383418 -33.33395,3.094255 -50.037181,3.59634 0,20.117187 0,40.234375 0,60.351562 -6.772787,0 -13.545573,0 -20.31836,0 0,-50.058267 0,-100.11653 0,-150.1748 z"
+        id="path5496" />
+  </g>
+</svg>
+

From fdc0bf2cb477cb12e8341a18d9a244a877c4140d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 19 Jan 2016 17:51:08 +0100
Subject: [PATCH 134/204] Display group/public icons only for own annotations

---
 src/widgets/EnrichedPlan.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 027a8f1e..3b35a153 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -300,6 +300,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
             is_admin: _this.is_admin,
             admin_url: _this.action_url('admin', slide.id),
             notes: slide.annotations.map(function (a) {
+                var cat = note_category(a);
                 return Mustache.to_html(_this.annotationTemplate, {
                     id: a.id,
                     text: IriSP.textFieldHtml(a.getTitleOrDescription()),
@@ -310,13 +311,13 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                     atitle: a.getTitleOrDescription().slice(0, 20),
                     is_admin: _this.is_admin,
                     can_edit: a.meta['coco:can_edit'],
-                    visibility: (a.meta['coco:visibility'] || "").indexOf('shared-') == 0 ? "shared" : (a.meta['coco:visibility'] || "private"),
+                    visibility: cat == 'Own' ? ((a.meta['coco:visibility'] || "").indexOf('shared-') == 0 ? "shared" : (a.meta['coco:visibility'] || "private")) : "none",
                     featured: a.meta['coco:featured'],
                     admin_url: _this.action_url('admin', a.id),
-                    category: "Ldt-EnrichedPlan-Note-" + note_category(a),
-                    filtered: ((note_category(a) == 'Own' && !_this.show_own_notes)
-                                || (note_category(a) == 'Other' && !_this.show_other_notes)
-                                || (note_category(a) == 'Featured' && !_this.show_featured_notes)) ? 'filtered_out' : ''
+                    category: "Ldt-EnrichedPlan-Note-" + cat,
+                    filtered: ((cat == 'Own' && !_this.show_own_notes)
+                                || (cat == 'Other' && !_this.show_other_notes)
+                                || (cat == 'Featured' && !_this.show_featured_notes)) ? 'filtered_out' : ''
                 });
             }).join("\n")
         };

From 032a5c958be30644cb51239242e8d97fcf2b9662 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 19 Jan 2016 18:02:00 +0100
Subject: [PATCH 135/204] Coding style fixes

---
 src/widgets/Shortcuts.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/widgets/Shortcuts.js b/src/widgets/Shortcuts.js
index 55551501..52595ece 100644
--- a/src/widgets/Shortcuts.js
+++ b/src/widgets/Shortcuts.js
@@ -5,7 +5,7 @@ IriSP.Widgets.Shortcuts = function(player, config) {
 /**
  * Keyboard shortcuts widget
  * This widgets add global shortcuts for common actions.
- * The default shortcuts are: 
+ * The default shortcuts are:
  * - Control-space for play/pause
  * - Control-left for rewind (+shift to go faster)
  * - Control-right for forward (+shift to go faster)
@@ -15,15 +15,15 @@ IriSP.Widgets.Shortcuts.prototype = new IriSP.Widgets.Widget();
 IriSP.Widgets.Shortcuts.prototype.defaults =  {
     // Time increment, in ms, for backward/forward navigation
     time_increment: 2000
-}
+};
 
 IriSP.Widgets.Shortcuts.prototype.draw = function() {
     var  _this = this;
-    
+
     /* Standard shortcuts */
     Mousetrap.bindGlobal("ctrl+space", function (e) {
         e.preventDefault();
-        if (! _this.media.getPaused()) {
+        if (!_this.media.getPaused()) {
             _this.media.pause();
         } else {
             _this.media.play();
@@ -60,5 +60,4 @@ IriSP.Widgets.Shortcuts.prototype.draw = function() {
         _this.player.trigger("CreateAnnotation.toggle");
         return false;
     });
-
 };

From 6d98b0202095c8018233b64a51d89aaa42f5900d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 20 Jan 2016 14:07:59 +0100
Subject: [PATCH 136/204] Add tooltip to slide bar

---
 src/widgets/EnrichedPlan.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 3b35a153..6844d196 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -102,7 +102,7 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '</div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.slideBarTemplate =
-      '<div data-id="{{ id }}" data-timecode="{{begintc}}" data-level="{{level}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Slide Ldt-EnrichedPlan-Bar-Slide{{ level }}">'
+      '<div data-id="{{ id }}" data-timecode="{{begintc}}" data-level="{{level}}" title="{{begin}} - {{atitle}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Slide Ldt-EnrichedPlan-Bar-Slide{{ level }}">'
     + '</div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Featured{{/featured}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a></div>{{/is_admin}}</div>';

From 872ba1c0d2f8771b98429fb66c3660a137b566a2 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 20 Jan 2016 14:08:10 +0100
Subject: [PATCH 137/204] Set focus on annotation zone on pause event

---
 src/widgets/CocoCreateAnnotation.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/widgets/CocoCreateAnnotation.js b/src/widgets/CocoCreateAnnotation.js
index cc4ae590..8b508d84 100644
--- a/src/widgets/CocoCreateAnnotation.js
+++ b/src/widgets/CocoCreateAnnotation.js
@@ -46,6 +46,11 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.draw = function () {
             _this.setBegin(_time);
         };
     });
+    this.onMediaEvent("pause", function () {
+        // Set focus on annotation zone
+        textField.focus();
+    });
+
 };
 
 IriSP.Widgets.CocoCreateAnnotation.prototype.setBegin = function (t) {

From 01b88f6e352c8bac6c76f2b162fdeafa625e8eca Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 22 Jan 2016 16:52:54 +0100
Subject: [PATCH 138/204] Handle clicks on bar representation

---
 src/widgets/EnrichedPlan.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 6844d196..65930fe3 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -133,11 +133,15 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
     _this.container = _this.$.find('.Ldt-EnrichedPlan-Container');
     _this.content = _this.$.find('.Ldt-EnrichedPlan-Content');
 
-    _this.container.on("click", "[data-timecode]", function () {
+    function go_to_timecode() {
         _this.media.setCurrentTime(Number(this.dataset.timecode));
         IriSP.jQuery(".Ldt-EnrichedPlan-Selected-Timecode").removeClass("Ldt-EnrichedPlan-Selected-Timecode");
         IriSP.jQuery(this).addClass("Ldt-EnrichedPlan-Selected-Timecode");
-    });
+    };
+    _this.container.on("click", "[data-timecode]", go_to_timecode);
+    if (_this.bar) {
+        _this.bar.on("click", "[data-timecode]", go_to_timecode);
+    }
 
     _this.container.on("click", ".Ldt-EnrichedPlan-Control-Checkbox", function () {
         var classname = _.first(_.filter(this.classList, function (s) {

From ddc8545f5d0f9487463b324da1eb8fc2ab116056 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 26 Jan 2016 10:34:52 +0100
Subject: [PATCH 139/204] Quick fix for a strange resizing issue

---
 src/widgets/SlideVideoPlayer.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 317e40fb..61a0d8de 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -8,7 +8,7 @@
 .Ldt-SlideVideoPlayer {
     width: 100%;
     max-width: 100%;
-    height: 100%;
+    height: 100% !important;
     max-height: 100%;
 }
 

From 53cedc916f81747dccf045d6d7d86d295e658ce5 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 26 Jan 2016 10:47:57 +0100
Subject: [PATCH 140/204] Remove max-height (conflict with height)

---
 src/widgets/SlideVideoPlayer.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 61a0d8de..9619a3a5 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -8,8 +8,11 @@
 .Ldt-SlideVideoPlayer {
     width: 100%;
     max-width: 100%;
-    height: 100% !important;
-    max-height: 100%;
+}
+
+.Ldt-SlideVideoPlayer-video video {
+    width: 100%;
+    height: 100%;
 }
 
 .Ldt-SlideVideoPlayer-pip-main {

From b5bc8e612c459aaf43d027baa3af26d9d944ceb6 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 26 Jan 2016 11:52:05 +0100
Subject: [PATCH 141/204] Reorder css directives

---
 src/widgets/EnrichedPlan.css | 42 +++++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index c83ef5f2..73d61640 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -69,6 +69,19 @@
     display: inline-block;
 }
 
+.Ldt-EnrichedPlan-BarContainer {
+    position: relative;
+    height: 20px;
+}
+
+.Ldt-EnrichedPlan-Bar-Slide,
+.Ldt-EnrichedPlan-Bar-Note {
+    width: 0;
+    height: 100%;
+    border-left: 1px solid #fff;
+    position: absolute;
+}
+
 .Ldt-EnrichedPlan-FlatMode .Ldt-EnrichedPlan-SlideThumbnail {
     display: none;
 }
@@ -133,6 +146,16 @@
     color: #996633;
 }
 
+.Ldt-EnrichedPlan-Bar-Note.Ldt-EnrichedPlan-Note-Own {
+    border-color: #6cf;
+}
+.Ldt-EnrichedPlan-Bar-Note.Ldt-EnrichedPlan-Note-Featured {
+    border-color: #e5007e;
+}
+.Ldt-EnrichedPlan-Bar-Note.Ldt-EnrichedPlan-Note-Other {
+    border-color: #996633;
+}
+
 .Ldt-EnrichedPlan-Note-Text {
     line-height: 22px;
     word-wrap: break-word;
@@ -325,7 +348,8 @@ label:hover:before {
     background: url(img/notes_delete.svg);
 }
 
-.Ldt-EnrichedPlan-Selected-Timecode {
+.Ldt-EnrichedPlan-Selected-Timecode,
+.Ldt-EnrichedPlan-Note-Own:hover {
     background-color: #e9e9e9;
     min-height: 34px;
     padding-right: 32px;
@@ -338,7 +362,8 @@ label:hover:before {
     right: 0;
 }
 
-.Ldt-EnrichedPlan-Selected-Timecode .Ldt-EnrichedPlan-EditControl {
+.Ldt-EnrichedPlan-Selected-Timecode .Ldt-EnrichedPlan-EditControl,
+.Ldt-EnrichedPlan-Note:hover .Ldt-EnrichedPlan-EditControl {
     display: inline-block;
 }
 
@@ -371,16 +396,3 @@ label:hover:before {
     height: 18px;
     background: url(img/icon_group.svg);
 }
-
-.Ldt-EnrichedPlan-BarContainer {
-    position: relative;
-    height: 20px;
-}
-
-.Ldt-EnrichedPlan-Bar-Slide,
-.Ldt-EnrichedPlan-Bar-Note {
-    width: 0px;
-    height: 100%;
-    border-left: 1px solid #fff;
-    position: absolute;
-}

From ec58051532e1a4b76e1799fd6d3386a473b95bc6 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 26 Jan 2016 16:17:30 +0100
Subject: [PATCH 142/204] Make filtered_out more generic

---
 src/widgets/EnrichedPlan.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 73d61640..15b4f200 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -9,7 +9,7 @@
     transition: max-height .6s;
 }
 
-.Ldt-EnrichedPlan-SlideItem.filtered_out {
+.filtered_out {
     max-height: 0;
     position: absolute;
     overflow: hidden;

From 6777f9f2a050a74e52ed4fe1a8866d10d0d6f90e Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 26 Jan 2016 16:39:08 +0100
Subject: [PATCH 143/204] Display notes in annotation bar

---
 src/widgets/EnrichedPlan.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 65930fe3..647f5940 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -107,7 +107,7 @@ IriSP.Widgets.EnrichedPlan.prototype.slideBarTemplate =
 
 IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Featured{{/featured}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a></div>{{/is_admin}}</div>';
 
-IriSP.Widgets.EnrichedPlan.prototype.annotationBarTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-Bar-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Featured{{/featured}}"></div>';
+IriSP.Widgets.EnrichedPlan.prototype.annotationBarTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Note {{category}} {{filtered}} {{#featured}}Ldt-EnrichedPlan-Featured{{/featured}}"></div>';
 
 
 /**
@@ -150,8 +150,14 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
         if (classname !== undefined) {
             if (IriSP.jQuery(this).is(':checked')) {
                 _this.content.find(".Ldt-EnrichedPlan-Slide ." + classname).removeClass("filtered_out");
+                if (_this.bar) {
+                    _this.bar.find("." + classname).removeClass("filtered_out");
+                }
             } else {
                 _this.content.find(".Ldt-EnrichedPlan-Slide ." + classname).addClass("filtered_out");
+                if (_this.bar) {
+                    _this.bar.find("." + classname).addClass("filtered_out");
+                }
             }
         }
     });
@@ -305,7 +311,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
             admin_url: _this.action_url('admin', slide.id),
             notes: slide.annotations.map(function (a) {
                 var cat = note_category(a);
-                return Mustache.to_html(_this.annotationTemplate, {
+                var annData = {
                     id: a.id,
                     text: IriSP.textFieldHtml(a.getTitleOrDescription()),
                     url: document.location.href.replace(/#.*$/, '') + '#id=' + a.id + '&t=' + (a.begin / 1000.0),
@@ -314,6 +320,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                     begintc: a.begin.milliseconds,
                     atitle: a.getTitleOrDescription().slice(0, 20),
                     is_admin: _this.is_admin,
+                    position: 100 * a.begin.milliseconds / _this.media.duration,
                     can_edit: a.meta['coco:can_edit'],
                     visibility: cat == 'Own' ? ((a.meta['coco:visibility'] || "").indexOf('shared-') == 0 ? "shared" : (a.meta['coco:visibility'] || "private")) : "none",
                     featured: a.meta['coco:featured'],
@@ -322,7 +329,11 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                     filtered: ((cat == 'Own' && !_this.show_own_notes)
                                 || (cat == 'Other' && !_this.show_other_notes)
                                 || (cat == 'Featured' && !_this.show_featured_notes)) ? 'filtered_out' : ''
-                });
+                };
+                if (_this.bar) {
+                    _this.bar.append(IriSP.jQuery(Mustache.to_html(_this.annotationBarTemplate, annData)));
+                }
+                return Mustache.to_html(_this.annotationTemplate, annData);
             }).join("\n")
         };
         _this.content.append(IriSP.jQuery(Mustache.to_html(_this.slideTemplate, slideData)));

From 3e95631a2525c546514a6e5549e7dc76695211d0 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 28 Jan 2016 14:06:51 +0100
Subject: [PATCH 144/204] Use relative positioning for slider

---
 src/widgets/BarSlider.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/widgets/BarSlider.js b/src/widgets/BarSlider.js
index 5966e8ae..8a80c061 100644
--- a/src/widgets/BarSlider.js
+++ b/src/widgets/BarSlider.js
@@ -60,11 +60,11 @@ IriSP.Widgets.BarSlider.prototype.draw = function () {
 
 IriSP.Widgets.BarSlider.prototype.onTimeupdate = function (_time) {
     var _this = this,
-        pos = _this.width * _time / _this.media.duration;
+        pos = 100 * _time / _this.media.duration;
     this.$slider.slider("value", _time);
     // Update bar position
-    this.$currentbar.css("width", pos);
-    this.$currentbarhead.css("left", pos + 4);
+    this.$currentbar.css("width", pos + "%");
+    this.$currentbarhead.css("left", "calc(" + pos + "% + 4px)");
 };
 
 IriSP.Widgets.BarSlider.prototype.onMouseout = function () {

From c17bc08ccd02124172dabf344243656426951298 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 28 Jan 2016 15:31:48 +0100
Subject: [PATCH 145/204] Highlight hovered bar element

---
 src/widgets/EnrichedPlan.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 15b4f200..7dd237ee 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -81,6 +81,10 @@
     border-left: 1px solid #fff;
     position: absolute;
 }
+.Ldt-EnrichedPlan-Bar-Slide:hover,
+.Ldt-EnrichedPlan-Bar-Note:hover {
+    border-width: 5px;
+}
 
 .Ldt-EnrichedPlan-FlatMode .Ldt-EnrichedPlan-SlideThumbnail {
     display: none;
@@ -352,7 +356,6 @@ label:hover:before {
 .Ldt-EnrichedPlan-Note-Own:hover {
     background-color: #e9e9e9;
     min-height: 34px;
-    padding-right: 32px;
 }
 
 .Ldt-EnrichedPlan-EditControl {

From 80c3f927e6ac774c8cec330a79e3cf2d270f5c8e Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 2 Feb 2016 11:29:24 +0100
Subject: [PATCH 146/204] Use grey background for annotation bar

---
 src/widgets/EnrichedPlan.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 7dd237ee..794ab142 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -72,6 +72,7 @@
 .Ldt-EnrichedPlan-BarContainer {
     position: relative;
     height: 20px;
+    background-color: #999;
 }
 
 .Ldt-EnrichedPlan-Bar-Slide,

From 9537cca9ae40722955e5aae32e6aeb9c5bbc8d83 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 2 Feb 2016 11:30:58 +0100
Subject: [PATCH 147/204] Add horizontal padding for annotation bar

---
 src/widgets/EnrichedPlan.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 794ab142..c6c08651 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -73,6 +73,7 @@
     position: relative;
     height: 20px;
     background-color: #999;
+    padding: 0 4px;
 }
 
 .Ldt-EnrichedPlan-Bar-Slide,

From 5fa1dae633e39e5500c53043b4304dab097ac435 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 2 Feb 2016 11:32:05 +0100
Subject: [PATCH 148/204] Make pip bottom right by default

---
 src/widgets/SlideVideoPlayer.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 9619a3a5..9d153fd5 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -36,6 +36,8 @@
     height: 30%;
     z-index: 3;
     background-color: #fff;
+    bottom: 2px;
+    right: 2px;
 }
 
 .Ldt-SlideVideoPlayer-pip-br {

From 1ef458ac66cb6ba5f93cd3bda0bd8c3537a19228 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 2 Feb 2016 11:34:52 +0100
Subject: [PATCH 149/204] Add border around PIP

---
 src/widgets/SlideVideoPlayer.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 9d153fd5..c66d8431 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -38,6 +38,8 @@
     background-color: #fff;
     bottom: 2px;
     right: 2px;
+    border: 1px solid #999;
+    box-shadow: #999 2px 2px 2px;
 }
 
 .Ldt-SlideVideoPlayer-pip-br {

From 1cb5ebe9e7c7c58650af8f7e71779b628e809df3 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 2 Feb 2016 11:35:08 +0100
Subject: [PATCH 150/204] Trigger twitter/facebook events

---
 src/widgets/CocoController.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/widgets/CocoController.js b/src/widgets/CocoController.js
index 633e8448..af6ff873 100644
--- a/src/widgets/CocoController.js
+++ b/src/widgets/CocoController.js
@@ -95,6 +95,12 @@ IriSP.Widgets.CocoController.prototype.draw = function () {
         fullscreenButton.addClass("Ldt-CocoCtrl-Disabled");
     }
 
+    this.$.on("click touchstart", ".Ldt-CocoCtrl-Twitter-Button", function (e) {
+        _this.player.trigger("Player.tweet");
+    });
+    this.$.on("click touchstart", ".Ldt-CocoCtrl-Facebook-Button", function (e) {
+        _this.player.trigger("Player.facebook");
+    });
     this.$.on("click touchstart", ".Ldt-CocoCtrl-Sound", function (e) {
         e.stopPropagation();
         e.preventDefault();

From 40919b46e43df1e517c5ae6a0284e1240edf854d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 2 Feb 2016 14:52:12 +0100
Subject: [PATCH 151/204] Add classname to slide bars so that they react to
 visibility toggle

---
 src/widgets/EnrichedPlan.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 647f5940..55f5be66 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -102,7 +102,7 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '</div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.slideBarTemplate =
-      '<div data-id="{{ id }}" data-timecode="{{begintc}}" data-level="{{level}}" title="{{begin}} - {{atitle}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Slide Ldt-EnrichedPlan-Bar-Slide{{ level }}">'
+      '<div data-id="{{ id }}" data-timecode="{{begintc}}" data-level="{{level}}" title="{{begin}} - {{atitle}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Slide Ldt-EnrichedPlan-Slide-Display Ldt-EnrichedPlan-Bar-Slide{{ level }}">'
     + '</div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Featured{{/featured}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a></div>{{/is_admin}}</div>';

From d89339a68a0fe517040cc0bc8c6387c4cfafbe44 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 4 Feb 2016 14:23:20 +0100
Subject: [PATCH 152/204] Add "Configure tab display" menuitem

This breaks encapsulation/separation of concerns.
---
 src/widgets/EnrichedPlan.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 55f5be66..878ee1f1 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -16,6 +16,7 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
         featured_notes: "Featured notes",
         other_notes: "Other Notes",
         own_notes: "Pers. notes",
+        popup_tabconfig: "Configure tab display",
         slides: "Slides",
         search: "Search...",
         whole_video: "Whole video"
@@ -26,6 +27,7 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
         featured_notes: "Notes Promues",
         other_notes: "Notes Autres",
         own_notes: "Notes perso.",
+        popup_tabconfig: "Configurer les onglets",
         slides: "Diapo",
         search: "Recherchez...",
         whole_video: "Vidéo entière"
@@ -61,6 +63,7 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
     + ' <label for="{{ prefix }}control_menu" class="Ldt-EnrichedPlan-Toggle"></label>'
     + ' <input type="checkbox" class="Ldt-EnrichedPlan-ControlMenuHome" id="{{ prefix }}control_menu"/>'
     + '<ul>'
+    + ' <li class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Tabconfig">{{l10n.popup_tabconfig}}</li>'
     + ' <li>'
     + '  <input id="{{prefix}}featured_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Featured" {{#show_featured_notes}}checked{{/show_featured_notes}} type="checkbox">'
     + '  <label for="{{prefix}}featured_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Featured">{{ l10n.featured_notes }}</label>'
@@ -143,6 +146,10 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
         _this.bar.on("click", "[data-timecode]", go_to_timecode);
     }
 
+    _this.container.on("click", ".Ldt-EnrichedPlan-Tabconfig", function () {
+        _this.player.trigger("Player.tabconfig");
+    });
+
     _this.container.on("click", ".Ldt-EnrichedPlan-Control-Checkbox", function () {
         var classname = _.first(_.filter(this.classList, function (s) {
             return s != "Ldt-EnrichedPlan-Control-Checkbox";

From 0e4906551c20c3bbcbdf22b7e9fc19900cf6cc55 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 22 Feb 2016 16:43:05 +0100
Subject: [PATCH 153/204] Tweak linkify method

We should use a dedicated lib such as anchorme instead
---
 src/js/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/utils.js b/src/js/utils.js
index 9ec1f119..049febef 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -57,7 +57,7 @@ IriSP.textFieldHtml = function(_text, _regexp, _extend) {
         addToList(_regexp, '<span class="Ldt-Highlight">', '</span>');
     }
 
-    addToList(/(https?:\/\/)?[\w\d\-]+\.[\w\d\-]+\S+/gm, function(matches) {
+    addToList(/(https?:\/\/)?[\w\d\-]+\.\w[\w\d\-]+\S+/gm, function(matches) {
         return '<a href="' + (matches[1] ? '' : 'http://') + matches[0] + '" target="_blank">';
     }, '</a>');
     addToList(/@([\d\w]{1,15})/gm, function(matches) {

From c5f4b521573c3121c3ad4422cb5f92011a70adb2 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 30 Mar 2016 10:58:12 +0200
Subject: [PATCH 154/204] Fix quiz deactivation button

---
 src/widgets/Controller.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/Controller.js b/src/widgets/Controller.js
index 3e115540..3e191146 100644
--- a/src/widgets/Controller.js
+++ b/src/widgets/Controller.js
@@ -107,7 +107,7 @@ IriSP.Widgets.Controller.prototype.draw = function () {
     this.$playButton.click(this.functionWrapper("playHandler"));
 
     if (this.enable_quiz_toggle !== undefined) {
-        this.toggleQuiz(this.enable_quiz_toggle);
+        this.toggleQuiz(null, this.enable_quiz_toggle);
     } else {
         this.$.find(".Ldt-Ctrl-Quiz-Enable").hide();
     }
@@ -258,7 +258,7 @@ IriSP.Widgets.Controller.prototype.createQuiz = function () {
     this.player.trigger("QuizCreator.create");
 };
 
-IriSP.Widgets.Controller.prototype.toggleQuiz = function (force_state) {
+IriSP.Widgets.Controller.prototype.toggleQuiz = function (event, force_state) {
     if (force_state !== undefined) {
         this.enable_quiz_toggle = force_state;
     } else {

From 1b6757398a3ff07256937eb1c524f055f047de05 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 30 Mar 2016 15:17:51 +0200
Subject: [PATCH 155/204] Fix refresh after quiz creation

---
 src/widgets/QuizCreator.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/QuizCreator.js b/src/widgets/QuizCreator.js
index eabe1cc8..6b62073b 100644
--- a/src/widgets/QuizCreator.js
+++ b/src/widgets/QuizCreator.js
@@ -294,13 +294,13 @@ IriSP.Widgets.QuizCreator.prototype.onSave = function(event, should_publish) {
         // Add the annotation to the localSource
         this.player.addLocalAnnotation(_annotation);
         // Update also the remote source
-        this.source.merge([ _annotation ]);
+        this.source.getAnnotations().push(_annotation);
         this.player.trigger("Annotation.create", _annotation);
     } else {
         // Update the annotation
         this.player.saveLocalAnnotations();
         this.player.trigger("Annotation.update", _annotation);
     };
-    this.player.trigger("AnnotationsList.update"); /* On force le rafraîchissement des widgets AnnotationsList */
+    this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement des widgets AnnotationsList */
     this.player.trigger("Quiz.refresh"); /* On force le rafraîchissement des widgets Quiz */
 };

From 132fdf781145157706db3f9fe2519873e5cd78d0 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 30 Mar 2016 15:41:27 +0200
Subject: [PATCH 156/204] Use getWidgetAnnotations to get standard filtering
 behaviour

---
 src/widgets/AnnotationsList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/AnnotationsList.js b/src/widgets/AnnotationsList.js
index b9ea9d73..efa5f82a 100644
--- a/src/widgets/AnnotationsList.js
+++ b/src/widgets/AnnotationsList.js
@@ -402,7 +402,7 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function (_forceRedraw) {
     }
     var _this = this,
         _currentTime = this.media.getCurrentTime();
-    var _list = this.annotation_type ? this.currentSource.getAnnotationsByTypeTitle(this.annotation_type) : this.currentSource.getAnnotations();
+    var _list = this.getWidgetAnnotations();
     if (this.mashupMode) {
         var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);
         if (typeof _currentAnnotation !== "undefined") {

From 2bc75c203d0de1ad40504c637fcab0794c5a134b Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 14 Apr 2016 17:29:11 +0200
Subject: [PATCH 157/204] Implement Annotation feature toggle

---
 src/widgets/EnrichedPlan.css       |  5 ++-
 src/widgets/EnrichedPlan.js        | 31 ++++++++++++--
 src/widgets/img/notes_featured.svg | 65 ++++++++++++++++++++++++++++++
 3 files changed, 97 insertions(+), 4 deletions(-)
 create mode 100644 src/widgets/img/notes_featured.svg

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index c6c08651..792e68b3 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -140,7 +140,7 @@
 
 .Ldt-EnrichedPlan-Note-Featured,
 .Ldt-EnrichedPlan-Note-Link.Ldt-EnrichedPlan-Note-Featured {
-    color: #e5007e;
+    color: #e5007e !important;
     font-style: italic;
 }
 .Ldt-EnrichedPlan-Note-Own,
@@ -350,6 +350,9 @@ label:hover:before {
     background: url(img/notes_edit.svg);
 }
 
+.Ldt-EnrichedPlan-EditControl-Featured {
+    background: url(img/notes_featured.svg);
+}
 .Ldt-EnrichedPlan-EditControl-Delete {
     background: url(img/notes_delete.svg);
 }
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 878ee1f1..ebf6b74f 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -14,6 +14,7 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
         delete_annotation: "Delete note",
         confirm_delete_message: "You are about to delete {{ annotation.title }}. Are you sure you want to delete it?",
         featured_notes: "Featured notes",
+        toggle_featured: "Toggle featured state",
         other_notes: "Other Notes",
         own_notes: "Pers. notes",
         popup_tabconfig: "Configure tab display",
@@ -25,6 +26,7 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
         delete_annotation: "Supprimer la note",
         confirm_delete_message: "Vous allez supprimer {{ annotation.title }}. Êtes-vous certain(e) ?",
         featured_notes: "Notes Promues",
+        toggle_featured: "Dé/promouvoir",
         other_notes: "Notes Autres",
         own_notes: "Notes perso.",
         popup_tabconfig: "Configurer les onglets",
@@ -49,7 +51,7 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
     /* Group is either a group id, or -1 for public notes */
     group: undefined,
     // action_url should be a function (action, elementid) that returns a URL
-    // Possible actions: admin, edit, level
+    // Possible actions: admin, edit, level, public, featured
     action_url: function (action, elementid) { return ""; },
     bar_container: undefined
 };
@@ -108,9 +110,9 @@ IriSP.Widgets.EnrichedPlan.prototype.slideBarTemplate =
       '<div data-id="{{ id }}" data-timecode="{{begintc}}" data-level="{{level}}" title="{{begin}} - {{atitle}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Slide Ldt-EnrichedPlan-Slide-Display Ldt-EnrichedPlan-Bar-Slide{{ level }}">'
     + '</div>';
 
-IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Featured{{/featured}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl"><span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a></div>{{/is_admin}}</div>';
+IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Note-Featured{{/featured}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl">{{#is_admin}}<span data-id="{{id}}" title="{{l10n.toggle_featured}}" class="Ldt-EnrichedPlan-EditControl-Featured"></span>{{/is_admin}}<span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}{{#is_admin}}<div class="adminactions"> <a target="_blank" data-id="{{id}}" href="{{ admin_url }}" class="editelement">&#x270f;</a></div>{{/is_admin}}</div>';
 
-IriSP.Widgets.EnrichedPlan.prototype.annotationBarTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Note {{category}} {{filtered}} {{#featured}}Ldt-EnrichedPlan-Featured{{/featured}}"></div>';
+IriSP.Widgets.EnrichedPlan.prototype.annotationBarTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Note {{category}} {{filtered}} {{#featured}}Ldt-EnrichedPlan-Note-Featured{{/featured}}"></div>';
 
 
 /**
@@ -172,6 +174,7 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
     _this.container.on("click", ".Ldt-EnrichedPlan-EditControl-Edit", function () {
         _this.player.trigger("Annotation.edit", this.dataset.id);
     });
+    _this.container.on("click", ".Ldt-EnrichedPlan-EditControl-Featured", toggle_featured);
     _this.container.on("click", ".Ldt-EnrichedPlan-EditControl-Delete", function () {
         var _annotation = _this.source.getElement(this.dataset.id);
         if (confirm(Mustache.to_html(_this.l10n.confirm_delete_message, { annotation: _annotation }))) {
@@ -180,6 +183,28 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
         }
     });
 
+    function toggle_featured(e) {
+        var aid = e.target.dataset.id;
+        e.preventDefault();
+        IriSP.jQuery.ajax({
+            url: _this.action_url("featured", aid),
+            timeout: 2000,
+            type: "POST",
+            contentType: 'application/json',
+            data: "",
+            dataType: 'json',
+            error: function(XMLHttpRequest, textStatus, errorThrown) {
+                alert("An error has occurred making the request: " + errorThrown);
+            },
+            success: function(data) {
+                // Update the local value.
+                var an = _this.source.getElement(aid);
+                an.meta['coco:featured'] = data.meta['coco:featured'];
+                _this.player.trigger("AnnotationsList.refresh");
+            }
+        });
+    }
+
     function update_level(el, inc) {
         var an = _this.source.getElement(el.dataset.id);
         if (an.content.data === "") {
diff --git a/src/widgets/img/notes_featured.svg b/src/widgets/img/notes_featured.svg
new file mode 100644
index 00000000..56646d88
--- /dev/null
+++ b/src/widgets/img/notes_featured.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   id="Calque_1"
+   x="0px"
+   y="0px"
+   width="18px"
+   height="18px"
+   viewBox="0 0 18 18"
+   enable-background="new 0 0 18 18"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="notes_featured.svg"><metadata
+     id="metadata11"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs9" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1680"
+     inkscape:window-height="1015"
+     id="namedview7"
+     showgrid="false"
+     inkscape:zoom="13.111111"
+     inkscape:cx="9.1525424"
+     inkscape:cy="9"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Calque_1" /><g
+     id="g3"><path
+       fill="#999999"
+       d="M9,0C4.037,0,0,4.038,0,9c0,4.962,4.037,9,9,9s9-4.037,9-9C18,4.038,13.963,0,9,0z M9,17   c-4.411,0-8-3.59-8-8c0-4.412,3.589-8,8-8s8,3.588,8,8C17,13.41,13.411,17,9,17z"
+       id="path5" /></g><path
+     sodipodi:type="star"
+     style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#cccccc;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="path4141"
+     sodipodi:sides="5"
+     sodipodi:cx="8.8474579"
+     sodipodi:cy="8.8474579"
+     sodipodi:r1="6.5491148"
+     sodipodi:r2="2.592881"
+     sodipodi:arg1="0.25910199"
+     sodipodi:arg2="0.98618642"
+     inkscape:flatsided="false"
+     inkscape:rounded="0"
+     inkscape:randomized="0"
+     d="M 15.177966,10.525424 10.278402,11.009732 9.2078522,15.386649 7.2331986,10.876546 2.7396856,11.210934 6.4188469,7.9392287 4.7122527,3.7689756 8.9607531,6.2570533 12.399533,3.3453068 11.346089,8.154729 Z"
+     inkscape:transform-center-x="0.32569911"
+     inkscape:transform-center-y="0.20540172" /></svg>
\ No newline at end of file

From a2bc2b98880d959c59fc7aa3b81feac97eb3c589 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 15 Apr 2016 17:57:14 +0200
Subject: [PATCH 158/204] Check that no data will be lost before leaving page

---
 src/widgets/CocoCreateAnnotation.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/widgets/CocoCreateAnnotation.js b/src/widgets/CocoCreateAnnotation.js
index 8b508d84..1bb68e02 100644
--- a/src/widgets/CocoCreateAnnotation.js
+++ b/src/widgets/CocoCreateAnnotation.js
@@ -12,10 +12,12 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.defaults = {
 
 IriSP.Widgets.CocoCreateAnnotation.prototype.messages = {
     en: {
-        type_description: "Enter a new note..."
+        type_description: "Enter a new note...",
+        confirm_leave_page: "Your current note will be lost. Are you sure?"
     },
     fr: {
-        type_description: "Prenez vos notes..."
+        type_description: "Prenez vos notes...",
+        confirm_leave_page: "Votre note en cours va être perdue. Êtes-vous sûr ?"
     }
 };
 
@@ -51,6 +53,14 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.draw = function () {
         textField.focus();
     });
 
+    IriSP.jQuery(window).on('beforeunload', function () {
+        if (_this.$.find(".Ldt-CocoCreateAnnotation-Text").val().trim()) {
+            return _this.l10n.confirm_leave_page;
+        } else {
+            return;
+        }
+    });
+
 };
 
 IriSP.Widgets.CocoCreateAnnotation.prototype.setBegin = function (t) {

From e5d90de20963132fffaa144187ffce845241f700 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 18 Apr 2016 18:25:22 +0200
Subject: [PATCH 159/204] Use a popup dialog for annotation edit

---
 src/widgets/AnnotationsList.css |  5 +-
 src/widgets/AnnotationsList.js  | 84 ++++++++++++++++++++-------------
 2 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/src/widgets/AnnotationsList.css b/src/widgets/AnnotationsList.css
index f7e37559..9551dbe6 100644
--- a/src/widgets/AnnotationsList.css
+++ b/src/widgets/AnnotationsList.css
@@ -240,8 +240,9 @@ li.Ldt-AnnotationsList-Tag-Li:hover {
     display: none;
 }
 
-.Ldt-AnnotationsList .editableInput {
-    width: 80%;
+.editableInput {
+    width: 100%;
+    height: 100%;
 }
 
 .Ldt-AnnotationsList-ScreenMain {
diff --git a/src/widgets/AnnotationsList.js b/src/widgets/AnnotationsList.js
index efa5f82a..34a3ac26 100644
--- a/src/widgets/AnnotationsList.js
+++ b/src/widgets/AnnotationsList.js
@@ -339,8 +339,8 @@ IriSP.Widgets.AnnotationsList.prototype.importAnnotations = function () {
                 title: "Annotation import",
                 autoOpen: true,
                 width: '80%',
-                minHeight: '400',
-                height: 400,
+                minHeight: '200',
+                height: 200,
                 buttons: [ { text: "Close", click: function () { $(this).dialog("close"); } },
                            // { text: "Load", click: function () {
                            //     // TODO
@@ -639,16 +639,16 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function (_forceRedraw) {
             var _html = Mustache.to_html(_this.annotationTemplate, _data),
                 _el = IriSP.jQuery(_html),
                 _onselect = function () {
-                    _this.$.find('.Ldt-AnnotationsList-li').removeClass("selected");
+                    _this.$.find('.Ldt-AnnotationsList-li').filter(function (e) { return e != _el; }).removeClass("selected");
                     _el.addClass("selected");
                 },
                 _onunselect = function () {
                     _this.$.find('.Ldt-AnnotationsList-li').removeClass("selected");
                 };
-            _el.mouseover(function () {
+            _el.mouseenter(function () {
                     _annotation.trigger("select");
                 })
-                .mouseout(function () {
+                .mouseleave(function () {
                     _annotation.trigger("unselect");
                 })
                 .click(function() {
@@ -691,28 +691,12 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function (_forceRedraw) {
             var edit_element = function (_this, insertion_point) {
                 var feedback_wrong = "#FF9999";
                 var feedback_ok = "#99FF99";
-
-                // insertion_point can be used to specify where to
-                // insert the input field.  Firefox is buggy wrt input
-                // fields inside <a> or <h?> tags, it does not
-                // propagate mouse clicks. If _this is a <a> then we
-                // have to specify the ancestor before which we can
-                // insert the input widget.
-                if (insertion_point === undefined) {
-                    insertion_point = _this;
-                }
-                // Insert input element
                 var input_element = $(_this.dataset.editable_type === 'multiline' ? "<textarea>" : "<input>")
-                        .addClass("editableInput")
-                        .insertBefore($(insertion_point));
-                input_element[0].value = _this.dataset.editable_value;
-                $(input_element).show().focus();
-                $(_this).addClass("editing");
+                    .addClass("editableInput");
 
                 function feedback(color) {
                     // Give some feedback
                     $(_this).removeClass("editing");
-                    input_element.remove();
                     var previous_color = $(_this).css("background-color");
                     $(_this).stop().css("background-color", color)
                         .animate({ backgroundColor: previous_color}, 1000);
@@ -769,21 +753,53 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function (_forceRedraw) {
                         // FIXME: use user name, when available
                         an.contributor = widget.player.config.username || "COCo User";
                         widget.player.addLocalAnnotation(an);
+                        save_local_annotations();
                         widget.player.trigger("Annotation.update", an);
                         feedback(feedback_ok);
                     }
-                }
-                $(input_element).bind('keydown', function (e) {
-                    if (e.which == 13) {
-                        e.preventDefault();
-                        validateChanges();
-                    } else if (e.which == 27) {
-                        e.preventDefault();
-                        cancelChanges();
-                    }
-                }).bind("blur", function (e) {
-                    validateChanges();
-                });
+                };
+
+                $(_this).addClass("editing");
+                input_element[0].value = _this.dataset.editable_value;
+                $(input_element).show().focus();
+
+                IriSP.jQuery('<div/>', {'class': 'element-form-dialog'})
+                    .append(input_element)
+                    .dialog({
+                        title: "Edit note",
+                        autoOpen: true,
+                        width: '60%',
+                        minWidth: '200',
+                        minHeight: '220',
+                        height: 220,
+                        open: function() {
+                            var dialog = this;
+                            $(dialog).keypress(function(e) {
+                                if (e.keyCode == $.ui.keyCode.ENTER || e.keyCode == 10 || e.keyCode == 13) {
+                                    e.preventDefault();
+                                    validateChanges();
+                                    $(dialog).dialog("close");
+                                } else if (e.keyCode == $.ui.keyCode.ESCAPE || e.keyCode == 27) {
+                                    e.preventDefault();
+                                    cancelChanges();
+                                    $(dialog).dialog("close");
+                                }
+                            });
+                        },
+                        buttons: [ { text: "Close",
+                                     click: function () {
+                                         cancelChanges();
+                                         $(this).dialog("close");
+                                     }
+                                   },
+                                   { text: "Save",
+                                     click: function () {
+                                         validateChanges();
+                                         $(this).dialog("close");
+                                     }
+                                   }
+                                 ]
+                    });
             };
 
             var get_local_annotation = function (ident) {

From e89aed1224613bf03a7dd42144d347814b343a80 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 27 Apr 2016 10:35:28 +0200
Subject: [PATCH 160/204] Factorize close_quiz method

---
 src/widgets/Quiz.js | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/widgets/Quiz.js b/src/widgets/Quiz.js
index c1dfcaf5..4423de51 100644
--- a/src/widgets/Quiz.js
+++ b/src/widgets/Quiz.js
@@ -111,9 +111,8 @@ IriSP.Widgets.Quiz.prototype.update = function (annotation) {
 
         //In case we click on the first "Skip" link
         $(".Ldt-Quiz-Submit-Skip-Link").click({media: this.media}, function (event) {
-            _this.hide();
             _this.player.trigger("QuizCreator.skip");
-            event.data.media.play();
+            _this.close_quiz();
         });
     }
 };
@@ -195,6 +194,15 @@ IriSP.Widgets.Quiz.prototype.globalScore = function () {
     return [ok, not_ok];
 };
 
+IriSP.Widgets.Quiz.prototype.close_quiz = function () {
+    var _this = this;
+    _this.hide();
+    $(".Ldt-Pause-Add-Question").hide();
+    _this.$.find(".Ldt-Quiz-Content").removeClass(".Ldt-Quiz-Result-Correct").removeClass(".Ldt-Quiz-Result-Incorrect");
+    // Resume the current video
+    _this.media.play();
+};
+
 IriSP.Widgets.Quiz.prototype.refresh = function () {
     var _annotations = this.getWidgetAnnotations().sortBy(function (_annotation) {
         return _annotation.begin;
@@ -274,9 +282,8 @@ IriSP.Widgets.Quiz.prototype.draw = function () {
     //In case we click on the first "Skip" link
     $(".Ldt-Quiz-Submit-Skip-Link").click({ media: this.media }, function (event) {
         _this.submit(_this.user, _this.userid, _this.annotation.id, "skipped_answer", 0);
-        _this.hide();
+        _this.close_quiz();
         _this.player.trigger("QuizCreator.skip");
-        event.data.media.play();
     });
 
     $(".Ldt-Quiz-Votes-Buttons input[type=\"button\"], .Ldt-Quiz-Votes-Buttons a").click({media: this.media}, function (event) {
@@ -299,12 +306,7 @@ IriSP.Widgets.Quiz.prototype.draw = function () {
 
         _this.submit(_this.user, _this.userid, _this.annotation.id, vote_prop, vote_val);
 
-        //Resume the current video
-        event.data.media.play();
-
-        _this.hide();
-        $(".Ldt-Pause-Add-Question").hide();
-
+        _this.close_quiz();
         _this.player.trigger("QuizCreator.skip");
     });
 

From 256566f766d8d86869f2accb7b2558fdd114d71d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 27 Apr 2016 10:46:14 +0200
Subject: [PATCH 161/204] Remove marks for correct/incorrect answers

They seems too confusing.
---
 src/widgets/Quiz.css | 40 +++++++++++++++++++---------------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/widgets/Quiz.css b/src/widgets/Quiz.css
index bc8553c1..afeca9d7 100644
--- a/src/widgets/Quiz.css
+++ b/src/widgets/Quiz.css
@@ -84,37 +84,35 @@
 	height: 100%;
 }
 
-.quiz-question-correct-feedback:before, .quiz-question-incorrect-feedback:before {
-		                                    content: '';
-		                                    vertical-align: middle;
-		                                    display: inline-block;
-		                                    width: 48px;
-		                                    height: 48px;
-                                        }
+.Ldt-Quiz-Questions-unique_choice .quiz-question-incorrect-feedback:before {
 
-.quiz-question-correct-feedback:before {
-	background: url(img/valid_sprites.png) left top no-repeat;
 }
 
-.quiz-question-incorrect-feedback:before {
-	background: url(img/valid_sprites.png) -49px top no-repeat;
-}
+.Ldt-Quiz-Correct-Answer:before, .Ldt-Quiz-Incorrect-Answer:before {
+		                              content: '';
+		                              vertical-align: middle;
+		                              display: inline-block;
+		                              width: 12px;
+		                              height: 12px;
+                                 }
 
-.Ldt-Quiz-Correct-Answer:before {
+.Ldt-Quiz-Correct-Answer:before,
+.Ldt-Quiz-Answer-Right:before {
 	background: url(img/min_valid_sprites.png) left top no-repeat;
 }
 
-.Ldt-Quiz-Incorrect-Answer:before {
+.Ldt-Quiz-Incorrect-Answer:before,
+.Ldt-Quiz-Answer-Wrong:before {
 	background: url(img/min_valid_sprites.png) -13px top no-repeat;
 }
 
-.Ldt-Quiz-Correct-Answer:before, .Ldt-Quiz-Incorrect-Answer:before {
-		                              content: '';
-		                              vertical-align: middle;
-		                              display: inline-block;
-		                              width: 12px;
-		                              height: 12px;
-                                  }
+.Ldt-Quiz-Answer-Wrong {
+    opacity: .6;
+    -webkit-transition: opacity 0.5s ease-in-out;
+	-moz-transition: opacity 0.5s ease-in-out;
+	-o-transition: opacity 0.5s ease-in-out;
+	transition: opacity 0.5s ease-in-out;
+}
 
 .Ldt-Quiz-Submit {
     margin: 10px;

From 25ed2798d0428fedb76e42cd469dc9dd811c7083 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 27 Apr 2016 10:51:53 +0200
Subject: [PATCH 162/204] Modify quiz result display

---
 src/widgets/Quiz.css | 12 +-----------
 src/widgets/Quiz.js  | 26 ++++++++++++++++----------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/widgets/Quiz.css b/src/widgets/Quiz.css
index afeca9d7..8b483642 100644
--- a/src/widgets/Quiz.css
+++ b/src/widgets/Quiz.css
@@ -190,18 +190,8 @@
 }
 
 .Ldt-Quiz-Result {
-    position: absolute;
-	height: 0px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: #fde073;
     text-align: center;
-    line-height: 2.5;
-    overflow: hidden;
-    -webkit-box-shadow: 0 0 5px black;
-    -moz-box-shadow:    0 0 5px black;
-    box-shadow:         0 0 5px black;
+    display: none;
 }
 
 input[type="button"] {
diff --git a/src/widgets/Quiz.js b/src/widgets/Quiz.js
index 4423de51..ed981c2e 100644
--- a/src/widgets/Quiz.js
+++ b/src/widgets/Quiz.js
@@ -21,6 +21,7 @@ IriSP.Widgets.Quiz.prototype.template = '<div class="Ldt-Quiz-Container">'
                                         + '</div>'
                                         + '<div class="Ldt-Quiz-Content">'
                                         + '  <h1 class="Ldt-Quiz-Title">{{question}}</h1>'
+                                        + '  <div class="Ldt-Quiz-Result">Bonne réponse</div>'
                                         + '  <div class="Ldt-Quiz-Questions">'
                                         + '  </div>'
                                         + '</div>'
@@ -37,7 +38,6 @@ IriSP.Widgets.Quiz.prototype.template = '<div class="Ldt-Quiz-Container">'
                                         + '      <div class="Ldt-Quiz-Submit-Button"><input type="button" value="Valider" /></div>'
                                         + '      <div class="Ldt-Quiz-Submit-Skip-Link"><a href="#">Passer</a></div><div style="clear:both;"></div>'
                                         + '  </div>'
-                                        + '  <div class="Ldt-Quiz-Result">Bonne réponse</div>'
                                         + '</div>'
                                         + '</div>';
 
@@ -93,7 +93,9 @@ IriSP.Widgets.Quiz.prototype.update = function (annotation) {
         if (resource != null) {
             QR = '<div class="quiz-resource-block" id="resource" >' + resource + '</div>';
         };
-        $(".Ldt-Quiz-Questions").html(QR + output);
+        $(".Ldt-Quiz-Questions")
+            .addClass(".Ldt-Quiz-Questions-" + annotation.content.data.type)
+            .html(QR + output);
         $(".Ldt-Quiz-Overlay").fadeIn();
 
         $(".Ldt-Quiz-Submit").fadeIn();
@@ -150,26 +152,30 @@ IriSP.Widgets.Quiz.prototype.answer = function () {
         if ((ans.correct && !checked)
             || (!ans.correct && checked)) {
             wrong += 1;
-            IriSP.jQuery(this).parents(".quiz-question-block").append('<div class="quiz-question-feedback quiz-question-incorrect-feedback">' + insert_timecode_links(ans.feedback) + '</div>');
+            IriSP.jQuery(this).parents(".quiz-question-block")
+                .addClass(ans.correct ? "Ldt-Quiz-Answer-Right" : "Ldt-Quiz-Answer-Wrong")
+                .append('<div class="quiz-question-feedback quiz-question-incorrect-feedback">' + insert_timecode_links(ans.feedback) + '</div>');
         } else {
-            IriSP.jQuery(this).parents(".quiz-question-block").append('<div class="quiz-question-feedback quiz-question-correct-feedback">' + insert_timecode_links(ans.feedback) + '</div>');
+            IriSP.jQuery(this).parents(".quiz-question-block")
+                .addClass(ans.correct ? "Ldt-Quiz-Answer-Right" : "Ldt-Quiz-Answer-Wrong")
+                .append('<div class="quiz-question-feedback quiz-question-correct-feedback">' + insert_timecode_links(ans.feedback) + '</div>');
         }
         i++;
     });
 
     if (wrong) {
+        _this.$.find(".Ldt-Quiz-Content").removeClass(".Ldt-Quiz-Result-Correct").addClass(".Ldt-Quiz-Result-Incorrect");
         $(".Ldt-Quiz-Result").html("Mauvaise réponse");
-        $(".Ldt-Quiz-Result").css({"background-color" : "red"});
+        $(".Ldt-Quiz-Result").css({"background-color" : "#f86060"});
         this.correct[this.annotation.id] = 0;
     } else {
+        _this.$.find(".Ldt-Quiz-Content").removeClass(".Ldt-Quiz-Result-Incorrect").addClass(".Ldt-Quiz-Result-Correct");
         $(".Ldt-Quiz-Result").html("Bonne réponse !");
-        $(".Ldt-Quiz-Result").css({"background-color" : "green"});
+        $(".Ldt-Quiz-Result").css({"background-color" : "#5bce5b"});
         this.correct[this.annotation.id] = 1;
     }
 
-    $(".Ldt-Quiz-Result").animate({height:"100%"}, 500, "linear", function () {
-        $(".Ldt-Quiz-Result").delay(2000).animate({ height:"0%" }, 500);
-    });
+    $(".Ldt-Quiz-Result").show(500);
 
     var question_number = this.annotation.number + 1;
     var correctness = this.globalScore();
@@ -198,7 +204,7 @@ IriSP.Widgets.Quiz.prototype.close_quiz = function () {
     var _this = this;
     _this.hide();
     $(".Ldt-Pause-Add-Question").hide();
-    _this.$.find(".Ldt-Quiz-Content").removeClass(".Ldt-Quiz-Result-Correct").removeClass(".Ldt-Quiz-Result-Incorrect");
+    _this.$.find(".Ldt-Quiz-Result").removeClass(".Ldt-Quiz-Result-Correct").removeClass(".Ldt-Quiz-Result-Incorrect").hide();
     // Resume the current video
     _this.media.play();
 };

From e30a8d4b66e0dba8993287c3b486f98ff96d4daa Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 9 May 2016 10:25:03 +0200
Subject: [PATCH 163/204] Increase quiz font size when fullscreen

---
 src/widgets/Quiz.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/widgets/Quiz.css b/src/widgets/Quiz.css
index 8b483642..162c7c00 100644
--- a/src/widgets/Quiz.css
+++ b/src/widgets/Quiz.css
@@ -10,6 +10,13 @@
 	font-size: 18pt;
 }
 
+.Ldt-Fullscreen-Element .Ldt-Quiz-Container {
+    font-size: 40pt;
+    top: 40px;
+    height: calc(100% - 60px);
+    width: calc(100% - 60px);
+}
+
 .Ldt-Quiz-Title {
     line-height: 1;
     padding-top: 10px;

From 5e1fe3933e1da1c4796cd16e4a51702ab5d2bc79 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 30 May 2016 18:06:39 +0200
Subject: [PATCH 164/204] Implement set_placeholder method

---
 src/widgets/CocoCreateAnnotation.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/widgets/CocoCreateAnnotation.js b/src/widgets/CocoCreateAnnotation.js
index 1bb68e02..4fe1803d 100644
--- a/src/widgets/CocoCreateAnnotation.js
+++ b/src/widgets/CocoCreateAnnotation.js
@@ -12,11 +12,11 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.defaults = {
 
 IriSP.Widgets.CocoCreateAnnotation.prototype.messages = {
     en: {
-        type_description: "Enter a new note...",
+        type_description: "Enter a personal note...",
         confirm_leave_page: "Your current note will be lost. Are you sure?"
     },
     fr: {
-        type_description: "Prenez vos notes...",
+        type_description: "Prenez une note personnelle...",
         confirm_leave_page: "Votre note en cours va être perdue. Êtes-vous sûr ?"
     }
 };
@@ -24,7 +24,7 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.messages = {
 IriSP.Widgets.CocoCreateAnnotation.prototype.template =
     '<form method="post" class="Ldt-CocoCreateAnnotation-Form">' +
     '  <input class="Ldt-CocoCreateAnnotation-Timecode" type="text" value="??:??">' +
-    '  <textarea class="Ldt-CocoCreateAnnotation-Text" autofocus placeholder="??:?? {{ l10n.type_description }}"></textarea>' +
+    '  <textarea class="Ldt-CocoCreateAnnotation-Text" autofocus placeholder="{{ l10n.type_description }}"></textarea>' +
     '</form>';
 
 IriSP.Widgets.CocoCreateAnnotation.prototype.draw = function () {
@@ -63,6 +63,10 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.draw = function () {
 
 };
 
+IriSP.Widgets.CocoCreateAnnotation.prototype.set_placeholder = function (msg) {
+    this.$.find(".Ldt-CocoCreateAnnotation-Text").attr("placeholder", msg);
+};
+
 IriSP.Widgets.CocoCreateAnnotation.prototype.setBegin = function (t) {
     this.begin = new IriSP.Model.Time(t || 0);
     this.$.find(".Ldt-CocoCreateAnnotation-Timecode").val(this.begin.toString());

From 32f7cd65a9e0cc1b6e58b4b9f72a86e65f86326d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 6 Jun 2016 14:50:04 +0200
Subject: [PATCH 165/204] Add show_quiz_notes options

---
 src/widgets/EnrichedPlan.css |  8 ++++++++
 src/widgets/EnrichedPlan.js  | 14 +++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 792e68b3..a7920bf0 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -151,6 +151,10 @@
 .Ldt-EnrichedPlan-Note-Link.Ldt-EnrichedPlan-Note-Other {
     color: #996633;
 }
+.Ldt-EnrichedPlan-Note-Quiz,
+.Ldt-EnrichedPlan-Note-Link.Ldt-EnrichedPlan-Note-Quiz {
+    color: #669933;
+}
 
 .Ldt-EnrichedPlan-Bar-Note.Ldt-EnrichedPlan-Note-Own {
     border-color: #6cf;
@@ -161,6 +165,10 @@
 .Ldt-EnrichedPlan-Bar-Note.Ldt-EnrichedPlan-Note-Other {
     border-color: #996633;
 }
+.Ldt-EnrichedPlan-Bar-Note.Ldt-EnrichedPlan-Note-Quiz {
+    border-color: #669933;
+    border-width: 3px;
+}
 
 .Ldt-EnrichedPlan-Note-Text {
     line-height: 22px;
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index ebf6b74f..21c8efc6 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -17,6 +17,7 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
         toggle_featured: "Toggle featured state",
         other_notes: "Other Notes",
         own_notes: "Pers. notes",
+        quiz_notes: "Quiz questions",
         popup_tabconfig: "Configure tab display",
         slides: "Slides",
         search: "Search...",
@@ -29,6 +30,7 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
         toggle_featured: "Dé/promouvoir",
         other_notes: "Notes Autres",
         own_notes: "Notes perso.",
+        quiz_notes: "Questions de quiz",
         popup_tabconfig: "Configurer les onglets",
         slides: "Diapo",
         search: "Recherchez...",
@@ -46,6 +48,7 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
     show_featured_notes: true,
     show_other_notes: true,
     show_own_notes: true,
+    show_quiz_notes: false,
     is_admin: false,
     flat_mode: false,
     /* Group is either a group id, or -1 for public notes */
@@ -78,6 +81,10 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
     + '  <input id="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Own" {{#show_own_notes}}checked{{/show_own_notes}} type="checkbox">'
     + '  <label for="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Own">{{ l10n.own_notes }}</label>'
     + ' </li>'
+    + ' <li>'
+    + '  <input id="{{prefix}}quiz_notes_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Quiz" {{#show_quiz_notes}}checked{{/show_quiz_notes}} type="checkbox">'
+    + '  <label for="{{prefix}}quiz_notes_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Quiz">{{ l10n.quiz_notes }}</label>'
+    + ' </li>'
     + '{{^flat_mode}}'
     + ' <li>'
     + '  <input id="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Slide-Display" {{#show_slides}}checked{{/show_slides}} type="checkbox">'
@@ -326,6 +333,9 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
     // Returns the note category: Own, Other, Featured
     function note_category(a) {
         var category = a.meta["coco:category"] || 'other';
+        if (a.getAnnotationType().title == 'Quiz') {
+            category = "quiz";
+        };
         return capitalize(category);
     };
 
@@ -360,7 +370,9 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                     category: "Ldt-EnrichedPlan-Note-" + cat,
                     filtered: ((cat == 'Own' && !_this.show_own_notes)
                                 || (cat == 'Other' && !_this.show_other_notes)
-                                || (cat == 'Featured' && !_this.show_featured_notes)) ? 'filtered_out' : ''
+                                || (cat == 'Featured' && !_this.show_featured_notes)
+                               || (cat == 'Quiz' && !_this.show_quiz_notes)
+                              ) ? 'filtered_out' : ''
                 };
                 if (_this.bar) {
                     _this.bar.append(IriSP.jQuery(Mustache.to_html(_this.annotationBarTemplate, annData)));

From bb94377666e3e1a6763fb3fd67647af87eedf596 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 7 Jun 2016 11:57:13 +0200
Subject: [PATCH 166/204] Coding style fixes

---
 src/widgets/ImageDisplay.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/widgets/ImageDisplay.js b/src/widgets/ImageDisplay.js
index 8dbe729a..b47d6b03 100644
--- a/src/widgets/ImageDisplay.js
+++ b/src/widgets/ImageDisplay.js
@@ -2,14 +2,14 @@
 
 IriSP.Widgets.ImageDisplay = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
-}
+};
 
 IriSP.Widgets.ImageDisplay.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.ImageDisplay.prototype.defaults = {
     annotation_type: "Slides"
     // container: "imageContainer"
-}
+};
 
 IriSP.Widgets.ImageDisplay.prototype.template = '<div class="Ldt-ImageDisplay-Container"><div class="Ldt-ImageDisplay-Overlay Ldt-ImageDisplay-Overlay-Left"></div><div class="Ldt-ImageDisplay-Overlay Ldt-ImageDisplay-Overlay-Right"></div></div>';
 
@@ -37,6 +37,8 @@ IriSP.Widgets.ImageDisplay.prototype.draw = function() {
             _this.update(_a);
         });
     });
-    if (_annotations.length)
+    if (_annotations.length) {
         _this.update(_annotations[0]);
-}
+    }
+};
+

From ac5e3c0cacbdd645f31d2d6d9c3cd36951641f0a Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 7 Jun 2016 12:22:31 +0200
Subject: [PATCH 167/204] Add play/pause feature to imagedisplay

---
 src/widgets/ImageDisplay.css   |  1 +
 src/widgets/ImageDisplay.js    |  7 +++
 src/widgets/img/play_pause.svg | 99 ++++++++++++++++++++++++++++++++++
 3 files changed, 107 insertions(+)
 create mode 100644 src/widgets/img/play_pause.svg

diff --git a/src/widgets/ImageDisplay.css b/src/widgets/ImageDisplay.css
index 15afa6ec..0818746b 100644
--- a/src/widgets/ImageDisplay.css
+++ b/src/widgets/ImageDisplay.css
@@ -5,6 +5,7 @@
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
+    cursor: url(img/play_pause.svg) 20 20, pointer;
 }
 
 .Ldt-ImageDisplay-Image {
diff --git a/src/widgets/ImageDisplay.js b/src/widgets/ImageDisplay.js
index b47d6b03..96341877 100644
--- a/src/widgets/ImageDisplay.js
+++ b/src/widgets/ImageDisplay.js
@@ -31,6 +31,13 @@ IriSP.Widgets.ImageDisplay.prototype.draw = function() {
 
     _this.$.find(".Ldt-ImageDisplay-Overlay-Left").on("click", function () { _this.navigate(-1); });
     _this.$.find(".Ldt-ImageDisplay-Overlay-Right").on("click", function () { _this.navigate(+1); });
+    _this.$.find(".Ldt-ImageDisplay-Container").on("click", function () {
+        if (_this.media.getPaused()) {
+            _this.media.play();
+        } else {
+            _this.media.pause();
+        }
+    });
 
     _annotations.forEach(function(_a) {
         _a.on("enter", function() {
diff --git a/src/widgets/img/play_pause.svg b/src/widgets/img/play_pause.svg
new file mode 100644
index 00000000..3e43f626
--- /dev/null
+++ b/src/widgets/img/play_pause.svg
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="8.1570988mm"
+   height="5.0352144mm"
+   viewBox="0 0 28.903106 17.841311"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="play_pause.svg">
+  <defs
+     id="defs4">
+    <linearGradient
+       osb:paint="solid"
+       id="linearGradient4147">
+      <stop
+         id="stop4149"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.9195959"
+     inkscape:cx="44.957593"
+     inkscape:cy="-9.203785"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1680"
+     inkscape:window-height="1015"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-45.044493,-18.012135)">
+    <g
+       id="g4270"
+       transform="translate(50.964549,16.058902)"
+       style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-opacity:1">
+      <rect
+         y="3.5653973"
+         x="9.9043798"
+         height="14.030222"
+         width="4.1488662"
+         id="rect4139"
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:0;fill-rule:evenodd;stroke:#000000;stroke-width:1.86000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+      <rect
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:0;fill-rule:evenodd;stroke:#000000;stroke-width:1.85960841;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+         id="rect4155"
+         width="4.1488662"
+         height="14.030222"
+         x="17.904381"
+         y="3.5653973" />
+    </g>
+    <g
+       id="g4286"
+       transform="translate(34.044493,15.932633)"
+       style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <polygon
+         id="polygon4276"
+         points="12,18 22,10.999 12,4 "
+         style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>

From c1882576d7718351d939882a6a9875314e2150fe Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 7 Jun 2016 17:01:04 +0200
Subject: [PATCH 168/204] Search in slide contents

---
 src/widgets/EnrichedPlan.css |  5 +++++
 src/widgets/EnrichedPlan.js  | 15 ++++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index a7920bf0..b8a76621 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -92,6 +92,10 @@
     display: none;
 }
 
+.Ldt-EnrichedPlan-SlideDescription {
+    display: none;
+}
+
 .Ldt-EnrichedPlan-SlideTitle {
     display: inline-block;
     font-size: 14px;
@@ -260,6 +264,7 @@
   display: inline-block;
 }
 
+.Ldt-EnrichedPlan-Slide.non_matching,
 .Ldt-EnrichedPlan-Note.non_matching {
     display: none;
 }
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 21c8efc6..4764722e 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -109,6 +109,7 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '  <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem {{^show_slides}}filtered_out{{/show_slides}} Ldt-EnrichedPlan-SlideThumbnail Ldt-EnrichedPlan-Slide-Display">{{#thumbnail}}<img title="{{ begin }} - {{ atitle }}" src="{{ thumbnail }}">{{/thumbnail}}</div>'
     + '  <div class="Ldt-EnrichedPlan-SlideContent">'
     + '     <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideTitle Ldt-EnrichedPlan-SlideTitle{{ level }}" data-level="{{level}}">{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a> <a data-id="{{id}}" target="_blank" class="level_decr">&nbsp;&lt;&nbsp;</a> <a data-id="{{id}}" target="_blank" class="level_incr">&nbsp;&gt;&nbsp;</a></div>{{/is_admin}}{{ atitle }}</div>'
+    + '     <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideDescription">{{description}}</div>'
     + '     <div class="Ldt-EnrichedPlan-SlideNotes">{{{ notes }}}</div>'
     + '  </div>'
     + '</div>';
@@ -245,11 +246,21 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
         if (q === "") {
             // Show all
             _this.content.find(".Ldt-EnrichedPlan-Note").removeClass("non_matching");
+            _this.content.find(".Ldt-EnrichedPlan-Slide").removeClass("non_matching");
         } else {
-            _this.content.find(".Ldt-EnrichedPlan-Note").each(function () {
+            _this.content.find(".Ldt-EnrichedPlan-Slide").each(function () {
                 var node = IriSP.jQuery(this);
                 if (node.text().toLocaleLowerCase().indexOf(q) > -1) {
                     node.removeClass("non_matching");
+                    // Hide non-matching notes from the slide
+                    node.find(".Ldt-EnrichedPlan-Note").each(function () {
+                        var node = IriSP.jQuery(this);
+                        if (node.text().toLocaleLowerCase().indexOf(q) > -1) {
+                            node.removeClass("non_matching");
+                        } else {
+                            node.addClass("non_matching");
+                        }
+                    });
                 } else {
                     node.addClass("non_matching");
                 }
@@ -275,6 +286,7 @@ IriSP.Widgets.EnrichedPlan.prototype.get_slides = function () {
             end: this.media.duration,
             media: this.media,
             thumbnail: "",
+            description: "",
             getTitleOrDescription: function () {
                 return title;
             }
@@ -343,6 +355,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
         var slideData = {
             id : slide.id,
             atitle : IriSP.textFieldHtml(slide.getTitleOrDescription()),
+            description: IriSP.textFieldHtml(slide.description),
             level: (slide.content !== undefined && slide.content.data !== undefined) ? (slide.content.data.level || 1) : 1,
             begin : slide.begin.toString(),
             begintc: slide.begin.milliseconds,

From 2601f5be7925c8bcd8a22ab22ed0ccdc69f79f8f Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 7 Jun 2016 17:23:48 +0200
Subject: [PATCH 169/204] Add tracing information

---
 src/widgets/EnrichedPlan.js | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 4764722e..31d6adf1 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -104,23 +104,23 @@ IriSP.Widgets.EnrichedPlan.prototype.barTemplate =
     '<div class="Ldt-EnrichedPlan-BarContainer"></div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
-      '<div data-id="{{ id }}" class="Ldt-EnrichedPlan-Slide">'
+      '<div data-id="{{ id }}" class="Ldt-EnrichedPlan-Slide Ldt-TraceMe" data-annotation="{{ id }}" trace-info="annotation-id:{{id}}, media-id:{{media_id}}">'
     + '  <div class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-SlideTimecode">{{ begin }}</div>'
-    + '  <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem {{^show_slides}}filtered_out{{/show_slides}} Ldt-EnrichedPlan-SlideThumbnail Ldt-EnrichedPlan-Slide-Display">{{#thumbnail}}<img title="{{ begin }} - {{ atitle }}" src="{{ thumbnail }}">{{/thumbnail}}</div>'
+    + '  <div data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideItem {{^show_slides}}filtered_out{{/show_slides}} Ldt-EnrichedPlan-SlideThumbnail Ldt-EnrichedPlan-Slide-Display">{{#thumbnail}}<img title="{{ begin }} - {{ atitle }}" src="{{ thumbnail }}">{{/thumbnail}}</div>'
     + '  <div class="Ldt-EnrichedPlan-SlideContent">'
-    + '     <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideTitle Ldt-EnrichedPlan-SlideTitle{{ level }}" data-level="{{level}}">{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a> <a data-id="{{id}}" target="_blank" class="level_decr">&nbsp;&lt;&nbsp;</a> <a data-id="{{id}}" target="_blank" class="level_incr">&nbsp;&gt;&nbsp;</a></div>{{/is_admin}}{{ atitle }}</div>'
-    + '     <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideDescription">{{description}}</div>'
+    + '     <div data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideTitle Ldt-EnrichedPlan-SlideTitle{{ level }}" data-level="{{level}}">{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a> <a data-id="{{id}}" target="_blank" class="level_decr">&nbsp;&lt;&nbsp;</a> <a data-id="{{id}}" target="_blank" class="level_incr">&nbsp;&gt;&nbsp;</a></div>{{/is_admin}}{{ atitle }}</div>'
+    + '     <div data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideDescription">{{description}}</div>'
     + '     <div class="Ldt-EnrichedPlan-SlideNotes">{{{ notes }}}</div>'
     + '  </div>'
     + '</div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.slideBarTemplate =
-      '<div data-id="{{ id }}" data-timecode="{{begintc}}" data-level="{{level}}" title="{{begin}} - {{atitle}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Slide Ldt-EnrichedPlan-Slide-Display Ldt-EnrichedPlan-Bar-Slide{{ level }}">'
+      '<div data-id="{{ id }}" data-timecode="{{begin_ms}}" data-level="{{level}}" title="{{begin}} - {{atitle}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Slide Ldt-EnrichedPlan-Slide-Display Ldt-EnrichedPlan-Bar-Slide{{ level }} Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}">'
     + '</div>';
 
-IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Note-Featured{{/featured}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl">{{#is_admin}}<span data-id="{{id}}" title="{{l10n.toggle_featured}}" class="Ldt-EnrichedPlan-EditControl-Featured"></span>{{/is_admin}}<span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}{{#is_admin}}<div class="adminactions"> <a target="_blank" data-id="{{id}}" href="{{ admin_url }}" class="editelement">&#x270f;</a></div>{{/is_admin}}</div>';
+IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Note-Featured{{/featured}} Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl">{{#is_admin}}<span data-id="{{id}}" title="{{l10n.toggle_featured}}" class="Ldt-EnrichedPlan-EditControl-Featured"></span>{{/is_admin}}<span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}{{#is_admin}}<div class="adminactions"> <a target="_blank" data-id="{{id}}" href="{{ admin_url }}" class="editelement">&#x270f;</a></div>{{/is_admin}}</div>';
 
-IriSP.Widgets.EnrichedPlan.prototype.annotationBarTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Note {{category}} {{filtered}} {{#featured}}Ldt-EnrichedPlan-Note-Featured{{/featured}}"></div>';
+IriSP.Widgets.EnrichedPlan.prototype.annotationBarTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begin_ms}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Note {{category}} {{filtered}} {{#featured}}Ldt-EnrichedPlan-Note-Featured{{/featured}} Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}"></div>';
 
 
 /**
@@ -354,11 +354,13 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
     _slides.forEach(function (slide) {
         var slideData = {
             id : slide.id,
+            media_id: slide.media.id,
             atitle : IriSP.textFieldHtml(slide.getTitleOrDescription()),
             description: IriSP.textFieldHtml(slide.description),
             level: (slide.content !== undefined && slide.content.data !== undefined) ? (slide.content.data.level || 1) : 1,
             begin : slide.begin.toString(),
-            begintc: slide.begin.milliseconds,
+            begin_ms: slide.begin.milliseconds,
+            end_ms: slide.end.milliseconds,
             position: 100 * slide.begin.milliseconds / _this.media.duration,
             thumbnail: slide.thumbnail,
             show_slides: _this.show_slides,
@@ -368,11 +370,13 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                 var cat = note_category(a);
                 var annData = {
                     id: a.id,
+                    media_id: a.media.id,
                     text: IriSP.textFieldHtml(a.getTitleOrDescription()),
                     url: document.location.href.replace(/#.*$/, '') + '#id=' + a.id + '&t=' + (a.begin / 1000.0),
                     author: a.creator,
                     begin: a.begin.toString(),
-                    begintc: a.begin.milliseconds,
+                    begin_ms: a.begin.milliseconds,
+                    end_ms: a.end.milliseconds,
                     atitle: a.getTitleOrDescription().slice(0, 20),
                     is_admin: _this.is_admin,
                     position: 100 * a.begin.milliseconds / _this.media.duration,

From be0704432e73bc9798f218dcce28b07386850145 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 8 Jun 2016 11:45:52 +0200
Subject: [PATCH 170/204] Display slides as rectangles in bar

---
 src/widgets/EnrichedPlan.css |  9 ++++++++-
 src/widgets/EnrichedPlan.js  | 25 +++++++++++++++++++++++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index b8a76621..ea1453bf 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -83,7 +83,14 @@
     border-left: 1px solid #fff;
     position: absolute;
 }
-.Ldt-EnrichedPlan-Bar-Slide:hover,
+.Ldt-EnrichedPlan-Bar-Slide {
+    background-color: rgba(200, 200, 200, .5);
+}
+
+.Ldt-EnrichedPlan-Bar-Slide:hover {
+    background-color: #fff;
+}
+
 .Ldt-EnrichedPlan-Bar-Note:hover {
     border-width: 5px;
 }
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 31d6adf1..865e27e2 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -115,7 +115,7 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '</div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.slideBarTemplate =
-      '<div data-id="{{ id }}" data-timecode="{{begin_ms}}" data-level="{{level}}" title="{{begin}} - {{atitle}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Slide Ldt-EnrichedPlan-Slide-Display Ldt-EnrichedPlan-Bar-Slide{{ level }} Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}">'
+      '<div data-id="{{ id }}" data-timecode="{{begin_ms}}" data-end="{{end_ms}}" data-level="{{level}}" title="{{begin}} - {{atitle}}" style="left: {{position}}%; width: {{width}}%;" class="Ldt-EnrichedPlan-Bar-Slide Ldt-EnrichedPlan-Slide-Display Ldt-EnrichedPlan-Bar-Slide{{ level }} Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}">'
     + '</div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Note-Featured{{/featured}} Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl">{{#is_admin}}<span data-id="{{id}}" title="{{l10n.toggle_featured}}" class="Ldt-EnrichedPlan-EditControl-Featured"></span>{{/is_admin}}<span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}{{#is_admin}}<div class="adminactions"> <a target="_blank" data-id="{{id}}" href="{{ admin_url }}" class="editelement">&#x270f;</a></div>{{/is_admin}}</div>';
@@ -247,22 +247,37 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
             // Show all
             _this.content.find(".Ldt-EnrichedPlan-Note").removeClass("non_matching");
             _this.content.find(".Ldt-EnrichedPlan-Slide").removeClass("non_matching");
+            if (_this.bar) {
+                _this.bar.find(".Ldt-EnrichedPlan-Bar-Note").removeClass("non_matching");
+            }
         } else {
             _this.content.find(".Ldt-EnrichedPlan-Slide").each(function () {
                 var node = IriSP.jQuery(this);
                 if (node.text().toLocaleLowerCase().indexOf(q) > -1) {
                     node.removeClass("non_matching");
+                    if (_this.bar) {
+                        _this.bar.find("[data-id=" + this.dataset.id + "]").removeClass("non_matching");
+                    }
                     // Hide non-matching notes from the slide
                     node.find(".Ldt-EnrichedPlan-Note").each(function () {
                         var node = IriSP.jQuery(this);
                         if (node.text().toLocaleLowerCase().indexOf(q) > -1) {
                             node.removeClass("non_matching");
+                            if (_this.bar) {
+                                _this.bar.find("[data-id=" + this.dataset.id + "]").removeClass("non_matching");
+                            }
                         } else {
                             node.addClass("non_matching");
+                            if (_this.bar) {
+                                _this.bar.find("[data-id=" + this.dataset.id + "]").addClass("non_matching");
+                            }
                         }
                     });
                 } else {
                     node.addClass("non_matching");
+                    if (_this.bar) {
+                        _this.bar.find("[data-id=" + this.dataset.id + "]").addClass("non_matching");
+                    }
                 }
             });
         }
@@ -351,6 +366,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
         return capitalize(category);
     };
 
+    var annotationBarData = [];
     _slides.forEach(function (slide) {
         var slideData = {
             id : slide.id,
@@ -362,6 +378,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
             begin_ms: slide.begin.milliseconds,
             end_ms: slide.end.milliseconds,
             position: 100 * slide.begin.milliseconds / _this.media.duration,
+            width: 100 * (slide.end.milliseconds - slide.begin.milliseconds) / _this.media.duration,
             thumbnail: slide.thumbnail,
             show_slides: _this.show_slides,
             is_admin: _this.is_admin,
@@ -392,15 +409,19 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                               ) ? 'filtered_out' : ''
                 };
                 if (_this.bar) {
-                    _this.bar.append(IriSP.jQuery(Mustache.to_html(_this.annotationBarTemplate, annData)));
+                    annotationBarData.push(IriSP.jQuery(Mustache.to_html(_this.annotationBarTemplate, annData)));
                 }
                 return Mustache.to_html(_this.annotationTemplate, annData);
             }).join("\n")
         };
         _this.content.append(IriSP.jQuery(Mustache.to_html(_this.slideTemplate, slideData)));
+        // Populate bar, starting with slides
         if (_this.bar) {
             var el = IriSP.jQuery(Mustache.to_html(_this.slideBarTemplate, slideData));
             _this.bar.append(el);
+            annotationBarData.forEach(function (dom) {
+                _this.bar.append(dom);
+            });
         }
     });
 };

From f270c9bbbf4f9e87da1f95ff992b4e621792efca Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 8 Jun 2016 16:09:36 +0200
Subject: [PATCH 171/204] Handle accented search terms

---
 src/js/utils.js              | 7 +++++++
 src/widgets/EnrichedPlan.css | 7 +++++++
 src/widgets/EnrichedPlan.js  | 6 +++---
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/js/utils.js b/src/js/utils.js
index 049febef..648a33f6 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -213,3 +213,10 @@ IriSP.generateUuid = function () {
         return v.toString(16);
     });
 };
+
+/**
+ * Return a non-accentuated version of the given string
+ */
+IriSP.unaccent = function (s) {
+    return s.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+};
diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index ea1453bf..4aee7f59 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -95,6 +95,13 @@
     border-width: 5px;
 }
 
+.Ldt-EnrichedPlan-Bar-Slide.filtered_out,
+.Ldt-EnrichedPlan-Bar-Note.filtered_out,
+.Ldt-EnrichedPlan-Bar-Slide.non_matching,
+.Ldt-EnrichedPlan-Bar-Note.non_matching {
+    display: none;
+}
+
 .Ldt-EnrichedPlan-FlatMode .Ldt-EnrichedPlan-SlideThumbnail {
     display: none;
 }
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 865e27e2..e1bbf9e3 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -242,7 +242,7 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
     });
 
     _this.container.find(".Ldt-EnrichedPlan-Search-Input").on("search", function () {
-        var q = IriSP.jQuery(this).val().toLocaleLowerCase();
+        var q = IriSP.unaccent(IriSP.jQuery(this).val().toLocaleLowerCase());
         if (q === "") {
             // Show all
             _this.content.find(".Ldt-EnrichedPlan-Note").removeClass("non_matching");
@@ -253,7 +253,7 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
         } else {
             _this.content.find(".Ldt-EnrichedPlan-Slide").each(function () {
                 var node = IriSP.jQuery(this);
-                if (node.text().toLocaleLowerCase().indexOf(q) > -1) {
+                if (IriSP.unaccent(node.text().toLocaleLowerCase()).indexOf(q) > -1) {
                     node.removeClass("non_matching");
                     if (_this.bar) {
                         _this.bar.find("[data-id=" + this.dataset.id + "]").removeClass("non_matching");
@@ -261,7 +261,7 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
                     // Hide non-matching notes from the slide
                     node.find(".Ldt-EnrichedPlan-Note").each(function () {
                         var node = IriSP.jQuery(this);
-                        if (node.text().toLocaleLowerCase().indexOf(q) > -1) {
+                        if (IriSP.unaccent(node.text().toLocaleLowerCase()).indexOf(q) > -1) {
                             node.removeClass("non_matching");
                             if (_this.bar) {
                                 _this.bar.find("[data-id=" + this.dataset.id + "]").removeClass("non_matching");

From 229d876a51387f610eff724c74913fa13f40f575 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 8 Jun 2016 17:10:31 +0200
Subject: [PATCH 172/204] Add expander to show slide content

---
 src/widgets/EnrichedPlan.css | 28 +++++++++++++++++++++++++---
 src/widgets/EnrichedPlan.js  | 14 +++++++++++---
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 4aee7f59..9a00e346 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -107,13 +107,34 @@
 }
 
 .Ldt-EnrichedPlan-SlideDescription {
-    display: none;
+    max-height: 0;
+    overflow: hidden;
+    font-size: 9px;
+}
+
+.Ldt-EnrichedPlan-Expanded .Ldt-EnrichedPlan-SlideDescription {
+    max-height: 200px;
+    overflow: auto;
+}
+
+.Ldt-EnrichedPlan-SlideExpander {
+    display: inline-block;
+    background: url(img/right_arrow.svg) center/80% no-repeat;
+    margin: 1px;
+    border: 1px solid grey;
+    width: 10px;
+    height: 10px;
+    cursor: zoom-in;
+}
+
+.Ldt-EnrichedPlan-Expanded .Ldt-EnrichedPlan-SlideExpander {
+    background: url(img/checked.svg) center/80% no-repeat;
 }
 
 .Ldt-EnrichedPlan-SlideTitle {
     display: inline-block;
     font-size: 14px;
-    width: 100%;
+    width: calc(100% - 16px);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -134,7 +155,8 @@
     font-size: 14px;
 }
 
-[data-id=whole] .Ldt-EnrichedPlan-SlideTitle {
+[data-id=whole] .Ldt-EnrichedPlan-SlideTitle,
+[data-id=whole] .Ldt-EnrichedPlan-SlideExpander {
     display: none;
 }
 [data-id=whole] .Ldt-EnrichedPlan-SlideTimecode {
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index e1bbf9e3..fe56a24f 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -21,7 +21,8 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
         popup_tabconfig: "Configure tab display",
         slides: "Slides",
         search: "Search...",
-        whole_video: "Whole video"
+        whole_video: "Whole video",
+        expand_slide: "Show the slide content"
     },
     fr: {
         delete_annotation: "Supprimer la note",
@@ -34,7 +35,8 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
         popup_tabconfig: "Configurer les onglets",
         slides: "Diapo",
         search: "Recherchez...",
-        whole_video: "Vidéo entière"
+        whole_video: "Vidéo entière",
+        expand_slide: "Montrer le contenu de la diapo"
     }
 };
 
@@ -49,6 +51,8 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
     show_other_notes: true,
     show_own_notes: true,
     show_quiz_notes: false,
+    // Automatically scroll so that current slide is visible
+    autoscroll: true,
     is_admin: false,
     flat_mode: false,
     /* Group is either a group id, or -1 for public notes */
@@ -108,8 +112,9 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '  <div class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-SlideTimecode">{{ begin }}</div>'
     + '  <div data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideItem {{^show_slides}}filtered_out{{/show_slides}} Ldt-EnrichedPlan-SlideThumbnail Ldt-EnrichedPlan-Slide-Display">{{#thumbnail}}<img title="{{ begin }} - {{ atitle }}" src="{{ thumbnail }}">{{/thumbnail}}</div>'
     + '  <div class="Ldt-EnrichedPlan-SlideContent">'
+    + '     <div title="{{l10.expand_slide}}" class="Ldt-EnrichedPlan-SlideExpander"></div>'
     + '     <div data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideTitle Ldt-EnrichedPlan-SlideTitle{{ level }}" data-level="{{level}}">{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a> <a data-id="{{id}}" target="_blank" class="level_decr">&nbsp;&lt;&nbsp;</a> <a data-id="{{id}}" target="_blank" class="level_incr">&nbsp;&gt;&nbsp;</a></div>{{/is_admin}}{{ atitle }}</div>'
-    + '     <div data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideDescription">{{description}}</div>'
+    + '     <div data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideDescription">{{{description}}}</div>'
     + '     <div class="Ldt-EnrichedPlan-SlideNotes">{{{ notes }}}</div>'
     + '  </div>'
     + '</div>';
@@ -160,6 +165,9 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
         _this.player.trigger("Player.tabconfig");
     });
 
+    _this.container.on("click", ".Ldt-EnrichedPlan-SlideExpander", function () {
+        IriSP.jQuery(this).parent().toggleClass("Ldt-EnrichedPlan-Expanded");
+    });
     _this.container.on("click", ".Ldt-EnrichedPlan-Control-Checkbox", function () {
         var classname = _.first(_.filter(this.classList, function (s) {
             return s != "Ldt-EnrichedPlan-Control-Checkbox";

From bef1bb3dcb64662e3f1f67a44b693224ef565365 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 8 Jun 2016 17:11:55 +0200
Subject: [PATCH 173/204] Coding style fixes

---
 src/widgets/Trace.js | 83 ++++++++++++++++++++++----------------------
 1 file changed, 41 insertions(+), 42 deletions(-)

diff --git a/src/widgets/Trace.js b/src/widgets/Trace.js
index 22552956..55f4e859 100644
--- a/src/widgets/Trace.js
+++ b/src/widgets/Trace.js
@@ -1,6 +1,5 @@
 IriSP.Widgets.Trace = function(player, config) {
-  IriSP.Widgets.Widget.call(this, player, config);
-    
+    IriSP.Widgets.Widget.call(this, player, config);
 };
 
 IriSP.Widgets.Trace.prototype = new IriSP.Widgets.Widget();
@@ -16,24 +15,24 @@ IriSP.Widgets.Trace.prototype.defaults = {
 };
 
 IriSP.Widgets.Trace.prototype.draw = function() {
-  if (typeof window.tracemanager === "undefined") {
-      console.log("Tracemanager not found");
-      return;
-  }
-  var _this = this,
-    _medialisteners = {
-        "play" : 0,
-        "pause" : 0,
-        "volumechange" : 0,
-        "seeked" : 0,
-        "play" : 0,
-        "pause" : 0,
-        "timeupdate" : 10000
-    },
-    _annlisteners = {
-        search: 0,
-        "search-cleared": 0
-    };
+    if (typeof window.tracemanager === "undefined") {
+        console.log("Tracemanager not found");
+        return;
+    }
+    var _this = this,
+        _medialisteners = {
+            "play" : 0,
+            "pause" : 0,
+            "volumechange" : 0,
+            "seeked" : 0,
+            "play" : 0,
+            "pause" : 0,
+            "timeupdate" : 10000
+        },
+        _annlisteners = {
+            search: 0,
+            "search-cleared": 0
+        };
     IriSP._(_medialisteners).each(function(_ms, _listener) {
         var _f = function(_arg) {
             _this.eventHandler(_listener, _arg);
@@ -53,20 +52,20 @@ IriSP.Widgets.Trace.prototype.draw = function() {
         }
         _annotations.on(_listener, _f);
     });
-    
+
     if (!this.tracer) {
-    
+
         this.tracer = window.tracemanager.init_trace("test", {
             url: this.url,
             requestmode: this.requestmode,
             syncmode: this.syncmode,
             default_subject: this.default_subject
         });
-    
+
     }
-    
-    
-    
+
+
+
     this.tracer.trace("TraceWidgetInit", {});
 
     // Configure annotation creation/update/delete/publish tracing
@@ -87,7 +86,7 @@ IriSP.Widgets.Trace.prototype.draw = function() {
     this.mouseLocation = '';
     IriSP.jQuery(".Ldt-Widget").on("mousedown mouseenter mouseleave", ".Ldt-TraceMe", function(_e) {
         var _target = IriSP.jQuery(this);
-        
+
         var _widget = _target.attr("widget-type") || _target.parents(".Ldt-Widget").attr("widget-type"),
             _data = {
                 "type": _e.type,
@@ -99,7 +98,7 @@ IriSP.Widgets.Trace.prototype.draw = function() {
             _id = _targetEl.id,
             _value = _target.val(),
             _traceInfo = _target.attr("trace-info");
-        _data.target = _name + (_id && _id.length ? '#' + IriSP.jqEscape(_id) : '') + (_class && _class.length ? ('.' + IriSP.jqEscape(_class).replace(/\s/g,'.')).replace(/\.Ldt-(Widget|TraceMe)/g,'') : '');
+        _data.target = _name + (_id && _id.length ? '#' + IriSP.jqEscape(_id) : '') + (_class && _class.length ? ('.' + IriSP.jqEscape(_class).replace(/\s/g, '.')).replace(/\.Ldt-(Widget|TraceMe)/g, '') : '');
         if (typeof _traceInfo == "string" && _traceInfo) {
             _data.traceInfo = _traceInfo;
         }
@@ -118,22 +117,22 @@ IriSP.Widgets.Trace.prototype.eventHandler = function(_listener, _arg) {
     if (typeof _arg == "undefined") {
         _arg = {};
     }
-    switch(_listener) {
-        case 'UIEvent':
-            _traceName += _arg.widget + '_' + _arg.type;
-            delete _arg.widget;
-            delete _arg.type;
+    switch (_listener) {
+    case 'UIEvent':
+        _traceName += _arg.widget + '_' + _arg.type;
+        delete _arg.widget;
+        delete _arg.type;
         break;
-        case 'play':
-        case 'pause':
-            _arg.milliseconds = this.media.getCurrentTime().milliseconds;
-        case 'timeupdate':
-        case 'seeked':
-        case 'volumechange':
-            _traceName += 'media_' + _listener;
+    case 'play':
+    case 'pause':
+        _arg.milliseconds = this.media.getCurrentTime().milliseconds;
+    case 'timeupdate':
+    case 'seeked':
+    case 'volumechange':
+        _traceName += 'media_' + _listener;
         break;
-        default:
-            _traceName += _listener.replace('.','_');
+    default:
+        _traceName += _listener.replace('.', '_');
     }
     if (typeof this.extend === "object" && this.extend) {
         IriSP._(_arg).extend(this.extend);

From 1f84bd3c0e3e6a1c5e11dd4c3500c06bad692c09 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 8 Jun 2016 17:23:06 +0200
Subject: [PATCH 174/204] Implement Media.togglePlayPause method

---
 src/js/model.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/js/model.js b/src/js/model.js
index 2af7018e..94055d11 100644
--- a/src/js/model.js
+++ b/src/js/model.js
@@ -681,6 +681,14 @@ IriSP.Model = (function (ns) {
         this.trigger("setpause");
     };
 
+    Playable.prototype.togglePlayPause = function () {
+        if (this.getPaused()) {
+            this.play();
+        } else {
+            this.pause();
+        };
+    };
+
     Playable.prototype.show = function() {};
 
     Playable.prototype.hide = function() {};

From 7ef302a774ebdb24a8a436d5438d42950a191e29 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 9 Jun 2016 15:34:36 +0200
Subject: [PATCH 175/204] Pressing space with an empty input field toggles
 play/pause

---
 src/widgets/CocoCreateAnnotation.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/widgets/CocoCreateAnnotation.js b/src/widgets/CocoCreateAnnotation.js
index 4fe1803d..9957cae1 100644
--- a/src/widgets/CocoCreateAnnotation.js
+++ b/src/widgets/CocoCreateAnnotation.js
@@ -39,7 +39,7 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.draw = function () {
     textField = this.$.find(".Ldt-CocoCreateAnnotation-Text");
 
     this.begin = new IriSP.Model.Time();
-    textField.on("change keyup input paste", this.functionWrapper("onTextChange"));
+    textField.on("keyup paste", this.functionWrapper("onTextChange"));
     this.$.find("form").submit(this.functionWrapper("onSubmit"));
 
     this.onMediaEvent("timeupdate", function (_time) {
@@ -92,6 +92,15 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.onTextChange = function (e) {
     var _field = this.$.find(".Ldt-CocoCreateAnnotation-Text"),
         _timecodeField = this.$.find(".Ldt-CocoCreateAnnotation-Timecode"),
         _contents = _field.val();
+
+    if (!this.previousInput && e.keyCode == 32) {
+        // Let's consider it improbable to have a leading space in a note.
+        // Reset text entry
+        _contents = "";
+        _field.val("");
+        // Toggle play/pause
+        this.media.togglePlayPause();
+    };
     _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
     if (!!_contents) {
         if (!this.previousInput) {

From 1a2a5b5ddcc711858f8e4ca2053af9bd6ca61c6a Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 9 Jun 2016 15:38:30 +0200
Subject: [PATCH 176/204] Allow text selection in slides

It is disabled by TouchSplitter
---
 src/widgets/EnrichedPlan.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 9a00e346..11a98727 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -2,6 +2,8 @@
     border-bottom: 2px dotted #ccc;
     padding-top: 4px;
     cursor: pointer;
+    -webkit-user-select: initial;
+    user-select: initial;
 }
 
 .Ldt-EnrichedPlan-SlideItem {
@@ -74,6 +76,8 @@
     height: 20px;
     background-color: #999;
     padding: 0 4px;
+    -webkit-user-select: initial;
+    user-select: initial;
 }
 
 .Ldt-EnrichedPlan-Bar-Slide,

From 577186437a449e7e8f510213b8aab11e6c247678 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 9 Jun 2016 16:17:04 +0200
Subject: [PATCH 177/204] Use markjs.io for searching

It allows to highlight matching text
---
 src/js/libs/jquery.mark.min.js       |  7 +++
 src/js/widgets-container/defaults.js |  6 ++-
 src/widgets/EnrichedPlan.js          | 65 ++++++++++++++++------------
 3 files changed, 49 insertions(+), 29 deletions(-)
 create mode 100644 src/js/libs/jquery.mark.min.js

diff --git a/src/js/libs/jquery.mark.min.js b/src/js/libs/jquery.mark.min.js
new file mode 100644
index 00000000..402849ef
--- /dev/null
+++ b/src/js/libs/jquery.mark.min.js
@@ -0,0 +1,7 @@
+/*!***************************************************
+ * mark.js v6.3.0
+ * https://github.com/julmot/mark.js
+ * Copyright (c) 2014–2016, Julian Motz
+ * Released under the MIT license https://git.io/vwTVl
+ *****************************************************/
+"use strict";function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var _extends=Object.assign||function(a){for(var b=1;b<arguments.length;b++){var c=arguments[b];for(var d in c)Object.prototype.hasOwnProperty.call(c,d)&&(a[d]=c[d])}return a},_createClass=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol?"symbol":typeof a};!function(a,b,c){"function"==typeof define&&define.amd?define(["jquery"],function(d){return a(b,c,d)}):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?a(b,c,require("jquery")):a(b,c,jQuery)}(function(a,b,c){var d=function(){function c(a){_classCallCheck(this,c),this.ctx=a}return _createClass(c,[{key:"log",value:function a(b){var c=arguments.length<=1||void 0===arguments[1]?"debug":arguments[1],a=this.opt.log;this.opt.debug&&"object"===("undefined"==typeof a?"undefined":_typeof(a))&&"function"==typeof a[c]&&a[c]("mark.js: "+b)}},{key:"escapeStr",value:function(a){return a.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")}},{key:"createRegExp",value:function(a){return a=this.escapeStr(a),Object.keys(this.opt.synonyms).length&&(a=this.createSynonymsRegExp(a)),this.opt.diacritics&&(a=this.createDiacriticsRegExp(a)),a=this.createMergedBlanksRegExp(a),a=this.createAccuracyRegExp(a)}},{key:"createMergedBlanksRegExp",value:function(a){return a.replace(/[\s]+/gim,"[\\s]*")}},{key:"createSynonymsRegExp",value:function(a){var b=this.opt.synonyms;for(var c in b)if(b.hasOwnProperty(c)){var d=b[c],e=this.escapeStr(c),f=this.escapeStr(d);a=a.replace(new RegExp("("+e+"|"+f+")","gmi"),"("+e+"|"+f+")")}return a}},{key:"createDiacriticsRegExp",value:function(a){var b=["aÀÁÂÃÄÅàáâãäåĀāąĄ","cÇçćĆčČ","dđĐďĎ","eÈÉÊËèéêëěĚĒēęĘ","iÌÍÎÏìíîïĪī","lłŁ","nÑñňŇńŃ","oÒÓÔÕÕÖØòóôõöøŌō","rřŘ","sŠšśŚ","tťŤ","uÙÚÛÜùúûüůŮŪū","yŸÿýÝ","zŽžżŻźŹ"],c=[];return a.split("").forEach(function(d){b.every(function(b){if(-1!==b.indexOf(d)){if(c.indexOf(b)>-1)return!1;a=a.replace(new RegExp("["+b+"]","gmi"),"["+b+"]"),c.push(b)}return!0})}),a}},{key:"createAccuracyRegExp",value:function(a){switch(this.opt.accuracy){case"partially":return"()("+a+")";case"complementary":return"()(\\S*"+a+"\\S*)";case"exactly":return"(^|\\s)("+a+")(?=\\s|$)"}}},{key:"getSeparatedKeywords",value:function(a){var b=this,c=[];return a.forEach(function(a){b.opt.separateWordSearch?a.split(" ").forEach(function(a){a.trim()&&c.push(a)}):a.trim()&&c.push(a)}),{keywords:c,length:c.length}}},{key:"getElements",value:function(){var a=void 0,b=[];return a="undefined"==typeof this.ctx?[]:this.ctx instanceof HTMLElement?[this.ctx]:Array.isArray(this.ctx)?this.ctx:Array.prototype.slice.call(this.ctx),a.forEach(function(a){b.push(a);var c=a.querySelectorAll("*");c.length&&(b=b.concat(Array.prototype.slice.call(c)))}),a.length||this.log("Empty context","warn"),{elements:b,length:b.length}}},{key:"matches",value:function(a,b){return(a.matches||a.matchesSelector||a.msMatchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.oMatchesSelector).call(a,b)}},{key:"matchesFilter",value:function(a,b){var c=this,d=!0,e=this.opt.filter.concat(["script","style","title"]);return this.opt.iframes||(e=e.concat(["iframe"])),b&&(e=e.concat(["*[data-markjs='true']"])),e.every(function(b){return c.matches(a,b)?d=!1:!0}),!d}},{key:"onIframeReady",value:function(a,b,c){try{!function(){var d=a.contentWindow,e="about:blank",f="complete",g=function(){try{if(null===d.document)throw new Error("iframe inaccessible");b(d.document)}catch(a){c()}},h=function(){var b=a.getAttribute("src").trim(),c=d.location.href;return c===e&&b!==e&&b},i=function(){var b=function b(){try{h()||(a.removeEventListener("load",b),g())}catch(a){c()}};a.addEventListener("load",b)};d.document.readyState===f?h()?i():g():i()}()}catch(a){c()}}},{key:"forEachElementInIframe",value:function(a,b){var c=this,d=arguments.length<=2||void 0===arguments[2]?function(){}:arguments[2],e=0,f=function(){--e<1&&d()};this.onIframeReady(a,function(a){var d=Array.prototype.slice.call(a.querySelectorAll("*"));0===(e=d.length)&&f(),d.forEach(function(a){"iframe"===a.tagName.toLowerCase()?!function(){var d=0;c.forEachElementInIframe(a,function(a,c){b(a,c),c-1===d&&f(),d++},f)}():(b(a,d.length),f())})},function(){var b=a.getAttribute("src");c.log("iframe '"+b+"' could not be accessed","warn"),f()})}},{key:"forEachElement",value:function(a){var b=this,c=arguments.length<=1||void 0===arguments[1]?function(){}:arguments[1],d=arguments.length<=2||void 0===arguments[2]?!0:arguments[2],e=this.getElements(),f=e.elements,g=e.length,h=function(){0===--g&&c()};h(++g),f.forEach(function(c){if(!b.matchesFilter(c,d)){if("iframe"===c.tagName.toLowerCase())return void b.forEachElementInIframe(c,function(c){b.matchesFilter(c,d)||a(c)},h);a(c)}h()})}},{key:"forEachNode",value:function(a){var b=arguments.length<=1||void 0===arguments[1]?function(){}:arguments[1];this.forEachElement(function(b){for(b=b.firstChild;b;b=b.nextSibling)3===b.nodeType&&b.textContent.trim()&&a(b)},b)}},{key:"wrapMatches",value:function(a,c,d,e){for(var f=this.opt.element?this.opt.element:"mark",g=d?0:2,h=void 0;null!==(h=c.exec(a.textContent));){var i=h.index;d||(i+=h[g-1].length);var j=a.splitText(i);if(a=j.splitText(h[g].length),null!==j.parentNode){var k=b.createElement(f);k.setAttribute("data-markjs","true"),this.opt.className&&k.setAttribute("class",this.opt.className),k.textContent=h[g],j.parentNode.replaceChild(k,j),e(k)}c.lastIndex=0}}},{key:"unwrapMatches",value:function(a){for(var c=a.parentNode,d=b.createDocumentFragment();a.firstChild;)d.appendChild(a.removeChild(a.firstChild));c.replaceChild(d,a),c.normalize()}},{key:"markRegExp",value:function(a,b){var c=this;this.opt=b,this.log('Searching with expression "'+a+'"');var d=0,e=function(a){d++,c.opt.each(a)};this.forEachNode(function(b){c.wrapMatches(b,a,!0,e)},function(){0===d&&c.opt.noMatch(a),c.opt.complete(d),c.opt.done(d)})}},{key:"mark",value:function(a,b){var c=this;this.opt=b,a="string"==typeof a?[a]:a;var d=this.getSeparatedKeywords(a),e=d.keywords,f=d.length,g=0;0===f&&(this.opt.complete(g),this.opt.done(g)),e.forEach(function(a){var b=new RegExp(c.createRegExp(a),"gmi"),d=0,h=function(a){d++,g++,c.opt.each(a)};c.log('Searching with expression "'+b+'"'),c.forEachNode(function(a){c.wrapMatches(a,b,!1,h)},function(){0===d&&c.opt.noMatch(a),e[f-1]===a&&(c.opt.complete(g),c.opt.done(g))})})}},{key:"unmark",value:function(a){var b=this;this.opt=a;var c=this.opt.element?this.opt.element:"*";c+="[data-markjs]",this.opt.className&&(c+="."+this.opt.className),this.log('Removal selector "'+c+'"'),this.forEachElement(function(a){b.matches(a,c)&&b.unwrapMatches(a)},function(){b.opt.complete(),b.opt.done()},!1)}},{key:"opt",set:function(b){this._opt=_extends({},{element:"",className:"",filter:[],iframes:!1,separateWordSearch:!0,diacritics:!0,synonyms:{},accuracy:"partially",each:function(){},noMatch:function(){},done:function(){},complete:function(){},debug:!1,log:a.console},b)},get:function(){return this._opt}}]),c}();c.fn.mark=function(a,b){return new d(this).mark(a,b),this},c.fn.markRegExp=function(a,b){return new d(this).markRegExp(a,b),this},c.fn.unmark=function(a){return new d(this).unmark(a),this}},window,document);
\ No newline at end of file
diff --git a/src/js/widgets-container/defaults.js b/src/js/widgets-container/defaults.js
index 3738d259..f40576b9 100644
--- a/src/js/widgets-container/defaults.js
+++ b/src/js/widgets-container/defaults.js
@@ -29,7 +29,8 @@ IriSP.libFiles = {
         processing: "processing-1.3.6.min.js",
         recordMicSwf: "record_mic.swf",
         mousetrap: "mousetrap.min.js",
-        mousetrapGlobal: "mousetrap-global-bind.js"
+        mousetrapGlobal: "mousetrap-global-bind.js",
+        markjs: "jquery.mark.min.js"
     },
     locations : {
         // use to define locations outside default_dir
@@ -110,6 +111,9 @@ IriSP.widgetsRequirements = {
     },
     Shortcuts: {
         requires: [ "mousetrap", "mousetrapGlobal" ]
+    },
+    EnrichedPlan: {
+        requires: [ "markjs" ]
     }
 };
 
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index fe56a24f..a4e2914c 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -250,43 +250,52 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
     });
 
     _this.container.find(".Ldt-EnrichedPlan-Search-Input").on("search", function () {
-        var q = IriSP.unaccent(IriSP.jQuery(this).val().toLocaleLowerCase());
+        var q = IriSP.jQuery(this).val().toLocaleLowerCase();
         if (q === "") {
             // Show all
-            _this.content.find(".Ldt-EnrichedPlan-Note").removeClass("non_matching");
-            _this.content.find(".Ldt-EnrichedPlan-Slide").removeClass("non_matching");
+            IriSP.jQuery(".Ldt-EnrichedPlan-Content").unmark().find(".non_matching").removeClass("non_matching");
             if (_this.bar) {
-                _this.bar.find(".Ldt-EnrichedPlan-Bar-Note").removeClass("non_matching");
+                _this.bar.find(".non_matching").removeClass("non_matching");
             }
         } else {
             _this.content.find(".Ldt-EnrichedPlan-Slide").each(function () {
                 var node = IriSP.jQuery(this);
-                if (IriSP.unaccent(node.text().toLocaleLowerCase()).indexOf(q) > -1) {
-                    node.removeClass("non_matching");
-                    if (_this.bar) {
-                        _this.bar.find("[data-id=" + this.dataset.id + "]").removeClass("non_matching");
-                    }
-                    // Hide non-matching notes from the slide
-                    node.find(".Ldt-EnrichedPlan-Note").each(function () {
-                        var node = IriSP.jQuery(this);
-                        if (IriSP.unaccent(node.text().toLocaleLowerCase()).indexOf(q) > -1) {
-                            node.removeClass("non_matching");
-                            if (_this.bar) {
-                                _this.bar.find("[data-id=" + this.dataset.id + "]").removeClass("non_matching");
-                            }
-                        } else {
-                            node.addClass("non_matching");
-                            if (_this.bar) {
-                                _this.bar.find("[data-id=" + this.dataset.id + "]").addClass("non_matching");
-                            }
+                node.unmark().mark(q, {
+                    filter: [ '.filtered_out' ],
+                    diacritics: true,
+                    noMatch: function () {
+                        node.addClass("non_matching");
+                        if (_this.bar) {
+                            _this.bar.find("[data-id=" + node[0].dataset.id + "]").addClass("non_matching");
+                        }
+                    },
+                    each: function () {
+                        node.removeClass("non_matching");
+                        if (_this.bar) {
+                            _this.bar.find("[data-id=" + node[0].dataset.id + "]").removeClass("non_matching");
                         }
-                    });
-                } else {
-                    node.addClass("non_matching");
-                    if (_this.bar) {
-                        _this.bar.find("[data-id=" + this.dataset.id + "]").addClass("non_matching");
+                        // Hide non-matching notes from the slide
+                        node.find(".Ldt-EnrichedPlan-Note").each(function () {
+                            var note = IriSP.jQuery(this);
+                            note.unmark().mark(q, {
+                                filter: [ '.filtered_out' ],
+                                diacritics: true,
+                                noMatch: function () {
+                                    note.addClass("non_matching");
+                                    if (_this.bar) {
+                                        _this.bar.find("[data-id=" + note[0].dataset.id + "]").addClass("non_matching");
+                                    }
+                                },
+                                each: function () {
+                                    note.removeClass('non_matching').removeClass('filtered_out');
+                                    if (_this.bar) {
+                                        _this.bar.find("[data-id=" + note[0].dataset.id + "]").removeClass("non_matching").removeClass('filtered_out');
+                                    }
+                                }
+                            });
+                        });
                     }
-                }
+                });
             });
         }
     });

From b2478e8c7e530e956ba42abd4e35641cf809784e Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 21 Jun 2016 15:51:01 +0200
Subject: [PATCH 178/204] Add slide content show/hide icons

---
 src/widgets/EnrichedPlan.css           |  4 ++--
 src/widgets/img/slide_content_hide.svg | 17 +++++++++++++++++
 src/widgets/img/slide_content_show.svg | 19 +++++++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 src/widgets/img/slide_content_hide.svg
 create mode 100644 src/widgets/img/slide_content_show.svg

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 11a98727..d7d772c9 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -123,7 +123,7 @@
 
 .Ldt-EnrichedPlan-SlideExpander {
     display: inline-block;
-    background: url(img/right_arrow.svg) center/80% no-repeat;
+    background: url(img/slide_content_show.svg) center/100% no-repeat;
     margin: 1px;
     border: 1px solid grey;
     width: 10px;
@@ -132,7 +132,7 @@
 }
 
 .Ldt-EnrichedPlan-Expanded .Ldt-EnrichedPlan-SlideExpander {
-    background: url(img/checked.svg) center/80% no-repeat;
+    background: url(img/slide_content_hide.svg) center/100% no-repeat;
 }
 
 .Ldt-EnrichedPlan-SlideTitle {
diff --git a/src/widgets/img/slide_content_hide.svg b/src/widgets/img/slide_content_hide.svg
new file mode 100644
index 00000000..f2a9dcf4
--- /dev/null
+++ b/src/widgets/img/slide_content_hide.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="10px"
+   height="10px"
+   viewBox="0 0 19 19"
+   id="svg2"
+   version="1.1">
+  <path style="stroke:#000000;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 0,9 19,0" />
+</svg>
diff --git a/src/widgets/img/slide_content_show.svg b/src/widgets/img/slide_content_show.svg
new file mode 100644
index 00000000..44858117
--- /dev/null
+++ b/src/widgets/img/slide_content_show.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="10px"
+   height="10px"
+   viewBox="0 0 19 19"
+   id="svg2"
+   version="1.1">
+  <path style="stroke:#000000;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 10,0 0,19" />
+  <path style="stroke:#000000;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 0,9 19,0" />
+</svg>

From 7ef9b2b4373463a22639b142a1e41643d867417a Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 23 Jun 2016 17:37:26 +0200
Subject: [PATCH 179/204] Implement Comment infrastructure. Add
 is_authenticated option

---
 src/widgets/EnrichedPlan.css | 26 ++++++++++++-
 src/widgets/EnrichedPlan.js  | 75 +++++++++++++++++++++++++++++++++---
 2 files changed, 94 insertions(+), 7 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index d7d772c9..424bd640 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -55,7 +55,8 @@
 }
 
 .Ldt-EnrichedPlan-SlideContent {
-    display: inline-block;
+    display: inline-flex;
+    flex-direction: column;
     width: calc(100% - 220px);
     transition: width .4s;
 }
@@ -219,7 +220,8 @@
     word-wrap: break-word;
 }
 
-.Ldt-EnrichedPlan-Note-Author {
+.Ldt-EnrichedPlan-Note-Author,
+.Ldt-EnrichedPlan-Comment-Author {
     text-transform: uppercase;
     font-size: 10px;
 }
@@ -457,3 +459,23 @@ label:hover:before {
     height: 18px;
     background: url(img/icon_group.svg);
 }
+
+.Ldt-EnrichedPlan-Comments {
+    display: none;
+}
+.Ldt-EnrichedPlan-Selected-Timecode .Ldt-EnrichedPlan-Comments {
+    display: inline-flex;
+    flex-direction: column;
+    width: 100%;
+    padding-top: 10px;
+}
+
+.Ldt-EnrichedPlan-Comment-New.Ldt-EnrichedPlan-Expanded {
+    display: inline-flex;
+}
+
+.Ldt-EnrichedPlan-Comment-New-Text {
+    font-family: Merriweather;
+    font-size: 12px;
+    width: 100%;
+}
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index a4e2914c..8c69d63a 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -22,7 +22,9 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
         slides: "Slides",
         search: "Search...",
         whole_video: "Whole video",
-        expand_slide: "Show the slide content"
+        expand_slide: "Show the slide content",
+        comment_count: "comment(s)",
+        new_comment: "Comment on this note"
     },
     fr: {
         delete_annotation: "Supprimer la note",
@@ -36,7 +38,9 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
         slides: "Diapo",
         search: "Recherchez...",
         whole_video: "Vidéo entière",
-        expand_slide: "Montrer le contenu de la diapo"
+        expand_slide: "Montrer le contenu de la diapo",
+        comment_count: "commentaire(s)",
+        new_comment: "Commentez cette note"
     }
 };
 
@@ -54,6 +58,7 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
     // Automatically scroll so that current slide is visible
     autoscroll: true,
     is_admin: false,
+    is_authenticated: false,
     flat_mode: false,
     /* Group is either a group id, or -1 for public notes */
     group: undefined,
@@ -112,8 +117,10 @@ IriSP.Widgets.EnrichedPlan.prototype.slideTemplate =
     + '  <div class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-SlideTimecode">{{ begin }}</div>'
     + '  <div data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideItem {{^show_slides}}filtered_out{{/show_slides}} Ldt-EnrichedPlan-SlideThumbnail Ldt-EnrichedPlan-Slide-Display">{{#thumbnail}}<img title="{{ begin }} - {{ atitle }}" src="{{ thumbnail }}">{{/thumbnail}}</div>'
     + '  <div class="Ldt-EnrichedPlan-SlideContent">'
-    + '     <div title="{{l10.expand_slide}}" class="Ldt-EnrichedPlan-SlideExpander"></div>'
-    + '     <div data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideTitle Ldt-EnrichedPlan-SlideTitle{{ level }}" data-level="{{level}}">{{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a> <a data-id="{{id}}" target="_blank" class="level_decr">&nbsp;&lt;&nbsp;</a> <a data-id="{{id}}" target="_blank" class="level_incr">&nbsp;&gt;&nbsp;</a></div>{{/is_admin}}{{ atitle }}</div>'
+    + '     <div data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideTitle Ldt-EnrichedPlan-SlideTitle{{ level }}" data-level="{{level}}">'
+    + '       <div title="{{l10.expand_slide}}" class="Ldt-EnrichedPlan-SlideExpander"></div>'
+    + '       {{#is_admin}}<div class="adminactions"><a target="_blank" href="{{ admin_url }}" class="editelement">&#x270f;</a> <a data-id="{{id}}" target="_blank" class="level_decr">&nbsp;&lt;&nbsp;</a> <a data-id="{{id}}" target="_blank" class="level_incr">&nbsp;&gt;&nbsp;</a></div>{{/is_admin}}{{ atitle }}'
+    + '     </div>'
     + '     <div data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideDescription">{{{description}}}</div>'
     + '     <div class="Ldt-EnrichedPlan-SlideNotes">{{{ notes }}}</div>'
     + '  </div>'
@@ -123,7 +130,34 @@ IriSP.Widgets.EnrichedPlan.prototype.slideBarTemplate =
       '<div data-id="{{ id }}" data-timecode="{{begin_ms}}" data-end="{{end_ms}}" data-level="{{level}}" title="{{begin}} - {{atitle}}" style="left: {{position}}%; width: {{width}}%;" class="Ldt-EnrichedPlan-Bar-Slide Ldt-EnrichedPlan-Slide-Display Ldt-EnrichedPlan-Bar-Slide{{ level }} Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}">'
     + '</div>';
 
-IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Note-Featured{{/featured}} Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}"><div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div><a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl">{{#is_admin}}<span data-id="{{id}}" title="{{l10n.toggle_featured}}" class="Ldt-EnrichedPlan-EditControl-Featured"></span>{{/is_admin}}<span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span></span>{{/can_edit}}{{#is_admin}}<div class="adminactions"> <a target="_blank" data-id="{{id}}" href="{{ admin_url }}" class="editelement">&#x270f;</a></div>{{/is_admin}}</div>';
+IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate =
+      '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Note-Featured{{/featured}} Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}"> \
+  <div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div>\
+  <a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> \
+  <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> \
+  {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl">\
+    {{#is_admin}}<span data-id="{{id}}" title="{{l10n.toggle_featured}}" class="Ldt-EnrichedPlan-EditControl-Featured"></span>{{/is_admin}}\
+    <span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span>\
+  </span>{{/can_edit}}\
+  {{#is_admin}}<div class="adminactions"> \
+    <a target="_blank" data-id="{{id}}" href="{{ admin_url }}" class="editelement">&#x270f;</a>\
+  </div>{{/is_admin}}\
+  {{#comments.length}}\
+  <span class="Ldt-EnrichedPlan-Comments-Count" data-count="{{comments.length}}">{{comments.length}} {{l10n.comment_count}}</span>\
+  {{/comments.length}}\
+  <div class="Ldt-EnrichedPlan-Comments" data-id="{{id}}" data-length="{{comments.length}}">\
+    {{#comments}}\
+    <div class="Ldt-EnrichedPlan-Comment" data-id="{{id}}">\
+      <span class="Ldt-EnrichedPlan-Comment-Description">{{description}}</span>\
+      <span class="Ldt-EnrichedPlan-Comment-Date">{{modified}}</span>\
+      <span class="Ldt-EnrichedPlan-Comment-Author">{{creator}}</span>\
+    </div>\
+    {{/comments}}\
+    {{#is_authenticated}}\
+    <div class="Ldt-EnrichedPlan-Comment-New"><textarea class="Ldt-EnrichedPlan-Comment-New-Text" placeholder="{{l10n.new_comment}}" data-id="{{id}}"></textarea></div>\
+{{/is_authenticated}}\
+  </div>\
+</div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.annotationBarTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begin_ms}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Note {{category}} {{filtered}} {{#featured}}Ldt-EnrichedPlan-Note-Featured{{/featured}} Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}"></div>';
 
@@ -199,6 +233,34 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
         }
     });
 
+    function add_comment(annotation_id, text) {
+        console.log("Commenting ", annotation_id, text);
+        IriSP.jQuery.ajax({
+            url: _this.action_url("add_comment", annotation_id),
+            timeout: 2000,
+            type: "POST",
+            contentType: 'application/json',
+            data: JSON.stringify({ 'description': text }),
+            dataType: 'json',
+            error: function(XMLHttpRequest, textStatus, errorThrown) {
+                alert("An error has occurred making the request: " + errorThrown);
+            },
+            success: function(data) {
+                // Update the local value.
+                var an = _this.source.getElement(annotation_id);
+                an.meta['coco:comments'].push(data.comment);
+                _this.player.trigger("AnnotationsList.refresh");
+            }
+        });
+    };
+
+    _this.container.on("keydown", ".Ldt-EnrichedPlan-Comment-New-Text", function (event) {
+        if (event.keyCode == 13) {
+            add_comment(this.dataset.id, IriSP.jQuery(this).val());
+            return false;
+        }
+    });
+
     function toggle_featured(e) {
         var aid = e.target.dataset.id;
         e.preventDefault();
@@ -404,6 +466,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                 var cat = note_category(a);
                 var annData = {
                     id: a.id,
+                    l10n: _this.l10n,
                     media_id: a.media.id,
                     text: IriSP.textFieldHtml(a.getTitleOrDescription()),
                     url: document.location.href.replace(/#.*$/, '') + '#id=' + a.id + '&t=' + (a.begin / 1000.0),
@@ -413,12 +476,14 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                     end_ms: a.end.milliseconds,
                     atitle: a.getTitleOrDescription().slice(0, 20),
                     is_admin: _this.is_admin,
+                    is_authenticated: _this.is_authenticated,
                     position: 100 * a.begin.milliseconds / _this.media.duration,
                     can_edit: a.meta['coco:can_edit'],
                     visibility: cat == 'Own' ? ((a.meta['coco:visibility'] || "").indexOf('shared-') == 0 ? "shared" : (a.meta['coco:visibility'] || "private")) : "none",
                     featured: a.meta['coco:featured'],
                     admin_url: _this.action_url('admin', a.id),
                     category: "Ldt-EnrichedPlan-Note-" + cat,
+                    comments: a.meta['coco:comments'],
                     filtered: ((cat == 'Own' && !_this.show_own_notes)
                                 || (cat == 'Other' && !_this.show_other_notes)
                                 || (cat == 'Featured' && !_this.show_featured_notes)

From f59e1f8d014ea897b61a11bcdb1483d15342a4a2 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 28 Jun 2016 14:51:57 +0200
Subject: [PATCH 180/204] Set pointer cursor for all menu labels

---
 src/widgets/EnrichedPlan.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 424bd640..632f2290 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -314,6 +314,10 @@
 .Ldt-EnrichedPlan-Control- {
     font-style: normal;
 }
+.Ldt-EnrichedPlan-Control-Label {
+    cursor: pointer;
+}
+
     /**********************************************************/
 /* Base for label styling */
 .Ldt-EnrichedPlan-Control-Checkbox:not(:checked),
@@ -325,7 +329,6 @@
 .Ldt-EnrichedPlan-Control-Checkbox:checked + label {
   position: relative;
   padding-left: 20px;
-  cursor: pointer;
 }
 
 /* checkbox aspect */

From b360e2a409e1547926a664bbb1fea644aa21b370 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 28 Jun 2016 17:09:29 +0200
Subject: [PATCH 181/204] Highlight current menu element

---
 src/widgets/EnrichedPlan.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 632f2290..a49128af 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -317,6 +317,9 @@
 .Ldt-EnrichedPlan-Control-Label {
     cursor: pointer;
 }
+.Ldt-EnrichedPlan-Control-Label:hover {
+    background-color: #ddd;
+}
 
     /**********************************************************/
 /* Base for label styling */

From f40cd2a141f6d30ceae33719afc4d1ed4926b13d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 28 Jun 2016 17:09:42 +0200
Subject: [PATCH 182/204] Add show_comments option

---
 src/widgets/EnrichedPlan.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 8c69d63a..19f91093 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -55,6 +55,7 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
     show_other_notes: true,
     show_own_notes: true,
     show_quiz_notes: false,
+    show_comments: false,
     // Automatically scroll so that current slide is visible
     autoscroll: true,
     is_admin: false,
@@ -142,6 +143,7 @@ IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate =
   {{#is_admin}}<div class="adminactions"> \
     <a target="_blank" data-id="{{id}}" href="{{ admin_url }}" class="editelement">&#x270f;</a>\
   </div>{{/is_admin}}\
+  {{#show_comments}}\
   {{#comments.length}}\
   <span class="Ldt-EnrichedPlan-Comments-Count" data-count="{{comments.length}}">{{comments.length}} {{l10n.comment_count}}</span>\
   {{/comments.length}}\
@@ -155,8 +157,9 @@ IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate =
     {{/comments}}\
     {{#is_authenticated}}\
     <div class="Ldt-EnrichedPlan-Comment-New"><textarea class="Ldt-EnrichedPlan-Comment-New-Text" placeholder="{{l10n.new_comment}}" data-id="{{id}}"></textarea></div>\
-{{/is_authenticated}}\
+   {{/is_authenticated}}\
   </div>\
+  {{/show_comments}}\
 </div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.annotationBarTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begin_ms}}" style="left: {{position}}%" class="Ldt-EnrichedPlan-Bar-Note {{category}} {{filtered}} {{#featured}}Ldt-EnrichedPlan-Note-Featured{{/featured}} Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}"></div>';
@@ -200,7 +203,7 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
     });
 
     _this.container.on("click", ".Ldt-EnrichedPlan-SlideExpander", function () {
-        IriSP.jQuery(this).parent().toggleClass("Ldt-EnrichedPlan-Expanded");
+        IriSP.jQuery(this).parent().parent().toggleClass("Ldt-EnrichedPlan-Expanded");
     });
     _this.container.on("click", ".Ldt-EnrichedPlan-Control-Checkbox", function () {
         var classname = _.first(_.filter(this.classList, function (s) {
@@ -477,6 +480,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                     atitle: a.getTitleOrDescription().slice(0, 20),
                     is_admin: _this.is_admin,
                     is_authenticated: _this.is_authenticated,
+                    show_comments: _this.show_comments,
                     position: 100 * a.begin.milliseconds / _this.media.duration,
                     can_edit: a.meta['coco:can_edit'],
                     visibility: cat == 'Own' ? ((a.meta['coco:visibility'] || "").indexOf('shared-') == 0 ? "shared" : (a.meta['coco:visibility'] || "private")) : "none",

From b1a341d205807758bca46315a1c7b215d46858d4 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 21 Jul 2016 13:24:24 +0200
Subject: [PATCH 183/204] Fallover for input type=search

Firefox/IE do not generate search events
---
 src/widgets/EnrichedPlan.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 19f91093..e253bd69 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -314,7 +314,8 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
         update_level(this, -1);
     });
 
-    _this.container.find(".Ldt-EnrichedPlan-Search-Input").on("search", function () {
+    var inputField = _this.container.find(".Ldt-EnrichedPlan-Search-Input");
+    inputField.on('onsearch' in inputField[0] ? "search" : "keyup", function () {
         var q = IriSP.jQuery(this).val().toLocaleLowerCase();
         if (q === "") {
             // Show all

From 149e373dffd4d05123bd1fc82a10e15b3de81270 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 21 Jul 2016 16:07:30 +0200
Subject: [PATCH 184/204] Hack source reference for created annotation

---
 src/widgets/CocoCreateAnnotation.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/widgets/CocoCreateAnnotation.js b/src/widgets/CocoCreateAnnotation.js
index 9957cae1..e8f4fae0 100644
--- a/src/widgets/CocoCreateAnnotation.js
+++ b/src/widgets/CocoCreateAnnotation.js
@@ -144,7 +144,6 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.onSubmit = function () {
 
     /*
      * Will fill the generated annotation object's data
-     * WARNING: If we're on a MASHUP, these datas must refer the ORIGINAL MEDIA
      * */
     _annotation.setMedia(this.source.currentMedia.id); /* Annotated media ID */
 
@@ -184,7 +183,12 @@ IriSP.Widgets.CocoCreateAnnotation.prototype.onSubmit = function () {
                 _this.resetInput();
                 _this.showScreen('Saved');
                 _export.getAnnotations().removeElement(_annotation, true); /* We delete the sent annotation to avoid redundancy */
+                _export.source = _this.source;
                 _export.deSerialize(_data); /* Data deserialization */
+                _export.getAnnotations().forEach(function (a) {
+                    // Set main source as reference for created annotation
+                    a.source = _this.source;
+                });
                 _this.source.merge(_export); /* We merge the deserialized data with the current source data */
                 if (_this.pause_on_write && _this.media.getPaused()) {
                     _this.media.play();

From 938ebfa75ad680bbf892682632aed19ad5e947b5 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 21 Jul 2016 17:03:54 +0200
Subject: [PATCH 185/204] Coding style fixes

---
 src/widgets/Mediafragment.js | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/widgets/Mediafragment.js b/src/widgets/Mediafragment.js
index 36a50cac..1f1fa258 100644
--- a/src/widgets/Mediafragment.js
+++ b/src/widgets/Mediafragment.js
@@ -14,14 +14,14 @@ IriSP.Widgets.Mediafragment = function(player, config) {
             }
         });
     };
-    this.onMdpEvent("Mediafragment.setHashToAnnotation","setHashToAnnotation");
+    this.onMdpEvent("Mediafragment.setHashToAnnotation", "setHashToAnnotation");
     this.blocked = false;
 };
 
 IriSP.Widgets.Mediafragment.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Mediafragment.prototype.draw = function() {
-    this.onMediaEvent("setpause","setHashToTime");
+    this.onMediaEvent("setpause", "setHashToTime");
     var _this = this;
     this.getWidgetAnnotations().forEach(function(_annotation) {
         _annotation.on("click", function() {
@@ -31,7 +31,7 @@ IriSP.Widgets.Mediafragment.prototype.draw = function() {
     if (this.media.loadedMetadata) {
         this.goToHash();
     } else {
-        this.onMediaEvent("loadedmetadata","goToHash");
+        this.onMediaEvent("loadedmetadata", "goToHash");
     }
 };
 
@@ -44,7 +44,7 @@ IriSP.Widgets.Mediafragment.prototype.setWindowHash = function(_hash) {
 };
 
 IriSP.Widgets.Mediafragment.prototype.getLastHash = function() {
-    var _tab = document.location.hash.replace(/^#/,'').split('&');
+    var _tab = document.location.hash.replace(/^#/, '').split('&');
     _tab = IriSP._(_tab).filter(function(_el) {
         return _el && !/^(id|t)=/.test(_el);
     });
@@ -59,7 +59,7 @@ IriSP.Widgets.Mediafragment.prototype.getLastHash = function() {
 
 IriSP.Widgets.Mediafragment.prototype.goToHash = function() {
     if (document.location.hash !== this.getLastHash()) {
-        var _tab = document.location.hash.replace(/^#/,'').split('&');
+        var _tab = document.location.hash.replace(/^#/, '').split('&');
         for (var _i = 0; _i < _tab.length; _i++) {
             var _subtab = _tab[_i].split("=");
             if (_subtab[0] == "id" || _subtab[0] == "t") {
@@ -69,26 +69,24 @@ IriSP.Widgets.Mediafragment.prototype.goToHash = function() {
                     var _annotation = this.source.getElement(this.last_hash_value);
                     if (typeof _annotation !== "undefined") {
                         this.media.setCurrentTime(_annotation.begin);
-                    } else {
-                        /* Proceed parsing elements, maybe a t was specified */
-                        continue;
+                        break;
                     }
                 }
                 if (this.last_hash_key == "t") {
                     this.media.setCurrentTime(1000 * this.last_hash_value);
+                    break;
                 }
-                break;
             }
         }
     }
 };
 
 IriSP.Widgets.Mediafragment.prototype.setHashToAnnotation = function(_annotation) {
-    this.setHash( 'id', _annotation.id, 't', _annotation.begin / 1000.0 );
+    this.setHash('id', _annotation.id, 't', _annotation.begin / 1000.0);
 };
 
 IriSP.Widgets.Mediafragment.prototype.setHashToTime = function() {
-    this.setHash( 't', this.media.getCurrentTime().getSeconds() );
+    this.setHash('t', this.media.getCurrentTime().getSeconds());
 };
 
 IriSP.Widgets.Mediafragment.prototype.setHash = function(_key, _value, _key2, _value2) {
@@ -101,7 +99,7 @@ IriSP.Widgets.Mediafragment.prototype.setHash = function(_key, _value, _key2, _v
         var _hash = this.getLastHash();
         this.setWindowHash(_hash);
         if (window.parent !== window) {
-            window.parent.postMessage(_hash,"*");
+            window.parent.postMessage(_hash, "*");
         }
         this.block();
     }

From 7a63cc08a6b84fb2b7d78f4c5c0265d7782b044a Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 22 Jul 2016 17:49:04 +0200
Subject: [PATCH 186/204] Implement autoscroll

---
 src/widgets/EnrichedPlan.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index e253bd69..8bc89079 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -4,6 +4,9 @@ IriSP.Widgets.EnrichedPlan = function (player, config) {
     this.throttledRefresh = IriSP._.throttle(function (full) {
         _this.update_content();
     }, 800, {leading: false});
+    this.throttledAutoscroll = IriSP._.throttle(function (annotation) {
+        _this.do_autoscroll(annotation);
+    }, 800, {leading: true});
 
 };
 
@@ -513,6 +516,16 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
     });
 };
 
+IriSP.Widgets.EnrichedPlan.prototype.do_autoscroll = function (a) {
+    var _this = this;
+    if (_this.autoscroll) {
+        _this.container.find("[data-id=" + a.id + "]").not(".filtered_out").each(function () {
+            this.scrollIntoView(true);
+        });
+    }
+    return true;
+};
+
 IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
     var _this = this;
     _this.init_component();
@@ -521,4 +534,7 @@ IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
     _this.onMdpEvent("AnnotationsList.refresh", function () {
         _this.throttledRefresh(false);
     });
+    _this.media.on("enter-annotation", function(_a) {
+        _this.throttledAutoscroll(_a);
+    });
 };

From 10e6f41a2d9f93c46fab0e3cd72c5e8954a49aeb Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 22 Jul 2016 18:02:49 +0200
Subject: [PATCH 187/204] Modify EnrichedPlan layout to avoid top margin

---
 src/widgets/EnrichedPlan.css | 16 ++++++++++------
 src/widgets/EnrichedPlan.js  |  2 +-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index a49128af..90dee2a7 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -226,23 +226,27 @@
     font-size: 10px;
 }
 
-.Ldt-EnrichedPlan-Content {
-    margin-top: 37px;
+.Ldt-EnrichedPlan-Container {
+    overflow-y: hidden;
+    height: 100%;
 }
 
 .Ldt-EnrichedPlan-Controls {
     height: 36px;
     padding: 9px 0 5px 0;
     border-bottom: 1px solid #000;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
     z-index: 1;
     background-color: #fff;
     display: flex;
 }
 
+.Ldt-EnrichedPlan-Content {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(100% - 37px);
+}
+
+
 .Ldt-EnrichedPlan-Control-Label {
     display: inline-block;
     text-transform: uppercase;
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 8bc89079..342d0779 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -74,7 +74,6 @@ IriSP.Widgets.EnrichedPlan.prototype.defaults = {
 
 IriSP.Widgets.EnrichedPlan.prototype.template =
       '<div class="Ldt-EnrichedPlan-Container {{#flat_mode}}Ldt-EnrichedPlan-FlatMode{{/flat_mode}}">'
-    + '<div class="Ldt-EnrichedPlan-Content"></div>'
     + '<form class="Ldt-EnrichedPlan-Controls">'
     + '{{#show_controls}}'
     + '<div class="Ldt-EnrichedPlan-ControlMenu">'
@@ -111,6 +110,7 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
     + '{{/show_controls}}'
     + '<input class="Ldt-EnrichedPlan-Search-Input {{^show_controls}}Ldt-EnrichedPlan-Search-Input-Full{{/show_controls}}" type="search" incremental placeholder="{{ l10n.search }}"/>'
     + '</form>'
+    + '<div class="Ldt-EnrichedPlan-Content"></div>'
     + '</div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.barTemplate =

From 980ad8a76267177af7b30b6b95df1d474953f5ea Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 22 Jul 2016 18:06:53 +0200
Subject: [PATCH 188/204] Convert to unix EOL

---
 src/js/libs/tracemanager.js | 1085 +++++++++++++++++------------------
 1 file changed, 538 insertions(+), 547 deletions(-)

diff --git a/src/js/libs/tracemanager.js b/src/js/libs/tracemanager.js
index cc62d14d..ecd97e61 100644
--- a/src/js/libs/tracemanager.js
+++ b/src/js/libs/tracemanager.js
@@ -1,547 +1,538 @@
-/*
- * Modelled Trace API
- *
- * This file is part of ktbs4js.
- *
- * ktbs4js is free software: you can redistribute it and/or modify it
- * under the terms of the GNU Lesser General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * ktbs4js is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public
- * License along with ktbs4js.  If not, see <http://www.gnu.org/licenses/>.
- *
- */
-/* FIXME: properly use require.js feature. This will do for debugging in the meantime */
-window.tracemanager = (function($) {
-     // If there are more than MAX_FAILURE_COUNT synchronisation
-     // failures, then disable synchronisation
-    var MAX_FAILURE_COUNT = 20;
-
-     // If there are more than MAX_BUFFER_SIZE obsels in the buffer,
-     // then "compress" them as a single "ktbsFullBuffer"
-    var  MAX_BUFFER_SIZE = 500;
-
-    var _replacement = {
-         ';': '"',
-         '"': ';',
-         '#': '%23',
-         '&': '%26',
-         '?': '%3F'
-     };
-     var BufferedService_prototype = {
-         /*
-          *  Buffered service for traces
-          */
-         // url: "",
-         // buffer: [],
-         // isReady: false,
-         // timer: null,
-         // failureCount: 0,
-
-         /* Flush buffer */
-         flush: function() {
-             // FIXME: add mutex on this.buffer
-             if (! this.isReady)
-             {
-                 if (window.console) window.console.log("Sync service not ready");
-             } else if (this.failureCount > MAX_FAILURE_COUNT)
-             {
-                 // Disable synchronisation
-                 this.set_sync_mode('none');
-             } else if (this.buffer.length) {
-                 var temp = this.buffer;
-                 this.buffer = [];
-
-                 if (this.mode == 'GET')
-                 {
-                     // GET mode: do some data mangline. We mark the
-                     // "compressed" nature of the generated JSON by
-                     // prefixing it with c
-                     var data = 'c' + JSON.stringify(temp.map(function (o) { return o.toCompactJSON(); }));
-                     // Swap " (very frequent, which will be
-                     // serialized into %22) and ; (rather rare), this
-                     // saves some bytes
-                     data = data.replace(/[;"#?&]/g, function(s){ return _replacement[s]; });
-                     // FIXME: check data length (< 2K is safe)
-                     var request=$('<img />').error( function() { this.failureCount += 1; })
-                         .load( function() { this.failureCount = 0; })
-                         .attr('src', this.url + 'trace/?data=' + data);
-                 }
-                 else
-                 {
-                     $.ajax({ url: this.url + 'trace/',
-                              type: 'POST',
-                              contentType: 'application/json',
-                              data: JSON.stringify(temp.map(function (o) { return o.toJSON(); })),
-                              processData: false,
-                              // Type of the returned data.
-                              dataType: "html",
-                              error: function(jqXHR, textStatus, errorThrown) {
-                                  if (window.console) window.console.log("Error when sending buffer:", textStatus);
-                                  this.failureCount += 1;
-                              },
-                              success: function(data, textStatus, jqXHR) {
-                                  // Reset failureCount to 0 as soon as there is 1 valid answer
-                                  this.failureCount = 0;
-                              }
-                            });
-                 }
-             }
-         },
-
-         /* Sync mode: delayed, sync (immediate sync), none (no
-          * synchronisation with server, the trace has to be explicitly saved
-          * if needed */
-         set_sync_mode: function(mode, default_subject) {
-             this.sync_mode = mode;
-             if (! this.isReady && mode !== "none")
-                 this.init(default_subject);
-             if (mode == 'delayed') {
-                 this.start_timer();
-             } else {
-                 this.stop_timer();
-             }
-         },
-
-         /* Enqueue an obsel */
-         enqueue: function(obsel) {
-             if (this.buffer.length > MAX_BUFFER_SIZE)
-             {
-                 obsel = new Obsel('ktbsFullBuffer', this.buffer[0].begin,
-                                   this.buffer[this.buffer.length - 1].end, this.buffer[0].subject);
-                 obsel.trace = this.buffer[0].trace;
-                 this.buffer = [];
-             }
-             this.buffer.push(obsel);
-             if (this.sync_mode === 'sync') {
-                 // Immediate sync of the obsel.
-                 this.flush();
-             }
-         },
-
-         start_timer: function() {
-             var self = this;
-             if (this.timer === null) {
-                 this.timer = window.setInterval(function() {
-                                                     self.flush();
-                                                 }, this.timeOut);
-             }
-         },
-
-         stop_timer: function() {
-             if (this.timer !== null) {
-                 window.clearInterval(this.timer);
-                 this.timer = null;
-             }
-         },
-
-         /*
-          * Initialize the sync service
-          */
-         init: function(default_subject) {
-             var self = this;
-             if (this.isReady)
-                 /* Already initialized */
-                 return;
-             if (typeof default_subject === 'undefined')
-                 default_subject = 'anonymous';
-             if (this.mode == 'GET')
-             {
-                 var request=$('<img/>').attr('src', this.url + 'login?userinfo={"default_subject": "' + default_subject + '"}');
-                 // Do not wait for the return, assume it is
-                 // initialized. This assumption will not work anymore
-                 // if login returns some necessary information
-                 this.isReady = true;
-             }
-             else
-             {
-                 $.ajax({ url: this.url + 'login',
-                          type: 'POST',
-                          data: 'userinfo={"default_subject":"' + default_subject + '"}',
-                          success: function(data, textStatus, jqXHR) {
-                              self.isReady = true;
-                              if (self.buffer.length) {
-                                  self.flush();
-                              }
-                          }
-                        });
-             }
-         }
-     };
-     var BufferedService = function(url, mode) {
-         this.url = url;
-         this.buffer = [];
-         this.isReady = false;
-         this.timer = null;
-         this.failureCount = 0;
-         // sync_mode is either "none", "sync" or "buffered"
-         this.sync_mode = "none";
-         /* mode can be either POST or GET */
-         if (mode == 'POST' || mode == 'GET')
-             this.mode = mode;
-         else
-             this.mode = 'POST';
-         /* Flush buffer every timeOut ms if the sync_mode is delayed */
-         this.timeOut = 2000;
-     };
-     BufferedService.prototype = BufferedService_prototype;
-
-     var Trace_prototype = {
-         /* FIXME: We could/should use a sorted list such as
-          http://closure-library.googlecode.com/svn/docs/class_goog_structs_AvlTree.html
-          to speed up queries based on time */
-         obsels: [],
-         /* Trace URI */
-         uri: "",
-         default_subject: "",
-         /* baseuri is used as the base URI to resolve relative
-          * attribute-type names in obsels. Strictly speaking, this
-          * should rather be expressed as a reference to model, or
-          * more generically, as a qname/URI dict */
-         baseuri: "",
-         /* Mapping of obsel type or property name to a compact
-          * representation (shorthands).
-          */
-         shorthands: null,
-         syncservice: null,
-
-         /* Define the trace URI */
-         set_uri: function(uri) {
-             this.uri = uri;
-         },
-
-         /* Sync mode: delayed, sync (immediate sync), none (no
-          * synchronisation with server, the trace has to be explicitly saved
-          * if needed */
-         set_sync_mode: function(mode) {
-             if (this.syncservice !== null) {
-                 this.syncservice.set_sync_mode(mode, this.default_subject);
-             }
-         },
-
-         /*
-          * Return a list of the obsels of this trace matching the parameters
-          */
-         list_obsels: function(_begin, _end, _reverse) {
-             var res;
-             if (typeof _begin !== 'undefined' || typeof _end !== 'undefined') {
-                 /*
-                  * Not optimized yet.
-                  */
-                 res = [];
-                 var l = this.obsels.length;
-                 for (var i = 0; i < l; i++) {
-                     var o = this.obsels[i];
-                     if ((typeof _begin !== 'undefined' && o.begin > _begin) && (typeof _end !== 'undefined' && o.end < _end)) {
-                         res.push(o);
-                     }
-                 }
-             }
-
-             if (typeof _reverse !== 'undefined') {
-                 if (res !== undefined) {
-                     /* Should reverse the whole list. Make a copy. */
-                     res = this.obsels.slice(0);
-                 }
-                 res.sort(function(a, b) { return b.begin - a.begin; });
-                 return res;
-             }
-
-             if (res === undefined) {
-                 res = this.obsels;
-             }
-             return res;
-
-         },
-
-         /*
-          * Return the obsel of this trace identified by the URI, or undefined
-          */
-         get_obsel: function(id) {
-             for (var i = 0; i < this.obsels.length; i++) {
-                 /* FIXME: should check against variations of id/uri, take this.baseuri into account */
-                 if (this.obsels[i].uri === id) {
-                     return this.obsels[i];
-                 }
-             }
-             return undefined;
-         },
-
-         set_default_subject: function(subject) {
-             // FIXME: if we call this method after the sync_service
-             // init method, then the default_subject will not be
-             // consistent anymore. Maybe we should then call init() again?
-             this.default_subject = subject;
-         },
-
-         get_default_subject: function() {
-             return this.default_subject;
-         },
-
-         /* (type:ObselType, begin:int, end:int?, subject:str?, attributes:[AttributeType=>any]?) */
-         /* Create a new obsel and add it to the trace */
-         create_obsel: function(type, begin, end, subject, _attributes) {
-             var o = new Obsel(type, begin, end, subject);
-             if (typeof _attributes !== 'undefined') {
-                 o.attributes = _attributes;
-             }
-             o.trace = this;
-             this.obsels.push(o);
-             if (this.syncservice !== null)
-                 this.syncservice.enqueue(o);
-         },
-
-         /* Helper methods */
-
-         /* Create a new obsel with the given attributes */
-         trace: function(type, _attributes, _begin, _end, _subject) {
-             var t = (new Date()).getTime();
-             if (typeof begin === 'undefined') {
-                 _begin = t;
-             }
-             if (typeof end === 'undefined') {
-                 _end = _begin;
-             }
-             if (typeof subject === 'undefined') {
-                 _subject = this.default_subject;
-             }
-             if (typeof _attributes === 'undefined') {
-                 _attributes = {};
-             }
-             return this.create_obsel(type, _begin, _end, _subject, _attributes);
-         }
-     };
-
-     var Trace = function(uri, requestmode) {
-         /* FIXME: We could/should use a sorted list such as
-          http://closure-library.googlecode.com/svn/docs/class_goog_structs_AvlTree.html
-          to speed up queries based on time */
-         this.obsels = [];
-         /* Trace URI */
-         if (uri === undefined)
-             uri = "";
-         this.uri = uri;
-         this.sync_mode = "none";
-         this.default_subject = "";
-         this.shorthands = {};
-         /* baseuri is used a the base URI to resolve relative attribute names in obsels */
-         this.baseuri = "";
-
-         this.syncservice = new BufferedService(uri, requestmode);
-         $(window).unload( function () {
-                               if (this.syncservice && this.sync_mode !== 'none') {
-                                   this.syncservice.flush();
-                                   this.syncservice.stop_timer();
-                               }
-                           });
-     };
-     Trace.prototype = Trace_prototype;
-
-     var Obsel_prototype = {
-         /* The following attributes are here for documentation
-          * purposes. They MUST be defined in the constructor
-          * function. */
-         trace: undefined,
-         type: undefined,
-         begin: undefined,
-         end: undefined,
-         subject: undefined,
-         /* Dictionary indexed by ObselType URIs */
-         attributes: {},
-
-         /* Method definitions */
-         get_trace: function() {
-             return this.trace;
-         },
-
-         get_obsel_type: function() {
-             return this.type;
-         },
-         get_begin: function() {
-             return this.begin;
-         },
-         get_end: function() {
-             return this.end;
-         },
-         get_subject: function() {
-             return this.subject;
-         },
-
-         list_attribute_types: function() {
-             var result = [];
-             for (var prop in this.attributes) {
-                 if (this.attributes.hasOwnProperty(prop))
-                     result.push(prop);
-             }
-             /* FIXME: we return URIs here instead of AttributeType elements */
-             return result;
-         },
-
-         list_relation_types: function() {
-             /* FIXME: not implemented yet */
-         },
-
-         list_related_obsels: function (rt) {
-             /* FIXME: not implemented yet */
-         },
-         list_inverse_relation_types: function () {
-             /* FIXME: not implemented yet */
-         },
-         list_relating_obsels: function (rt) {
-             /* FIXME: not implemented yet */
-         },
-         /*
-          * Return the value of the given attribute type for this obsel
-          */
-         get_attribute_value: function(at) {
-             if (typeof at === "string")
-                 /* It is a URI */
-                 return this.attributes[at];
-             else
-                 /* FIXME: check that at is instance of AttributeType */
-                 return this.attributes[at.uri];
-         },
-
-
-         /* obsel modification (trace amendment) */
-
-         set_attribute_value: function(at, value) {
-             if (typeof at === "string")
-                 /* It is a URI */
-                 this.attributes[at] = value;
-             /* FIXME: check that at is instance of AttributeType */
-             else
-                 this.attributes[at.uri] = value;
-         },
-
-         del_attribute_value: function(at) {
-             if (typeof at === "string")
-                 /* It is a URI */
-                 delete this.attributes[at];
-             /* FIXME: check that at is instance of AttributeType */
-             else
-                 delete this.attributes[at.uri];
-         },
-
-         add_related_obsel: function(rt, value) {
-             /* FIXME: not implemented yet */
-         },
-
-         del_related_obsel: function(rt, value) {
-             /* FIXME: not implemented yet */
-         },
-
-         /*
-          * Return a JSON representation of the obsel
-          */
-         toJSON: function() {
-             var r = {
-                 "@id": this.id,
-                 "@type": this.type,
-                 "begin": this.begin,
-                 "end": this.end,
-                 "subject": this.subject
-             };
-             for (var prop in this.attributes) {
-                 if (this.attributes.hasOwnProperty(prop))
-                     r[prop] = this.attributes[prop];
-             }
-             return r;
-         },
-
-         /*
-          * Return a compact JSON representation of the obsel.
-          * Use predefined + custom shorthands for types/properties
-          */
-         toCompactJSON: function() {
-             var r = {
-                 "@t": (this.trace.shorthands.hasOwnProperty(this.type) ? this.trace.shorthands[this.type] : this.type),
-                 "@b": this.begin,
-             };
-             // Transmit subject only if different from default_subject
-             if (this.subject !== this.trace.default_subject)
-                 r["@s"] = this.subject;
-
-             // Store duration (to save some bytes) and only if it is non-null
-             if (this.begin !== this.end)
-                 r["@d"] = this.end - this.begin;
-
-             // Store id only if != ""
-             if (this.id !== "")
-                 r["@i"] = this.id;
-
-             for (var prop in this.attributes) {
-                 if (this.attributes.hasOwnProperty(prop))
-                 {
-                     var v = this.attributes[prop];
-                     r[prop] = this.trace.shorthands.hasOwnProperty(v) ? this.trace.shorthands[v] : v;
-                 }
-             }
-             return r;
-         },
-
-         toJSONstring: function() {
-             return JSON.stringify(this.toJSON());
-         }
-     };
-
-     var Obsel = function(type, begin, end, subject, attributes) {
-         this.trace = undefined;
-         this.uri = "";
-         this.id = "";
-         this.type = type;
-         this.begin = begin;
-         this.end = end;
-         this.subject = subject;
-         /* Is the obsel synched with the server ? */
-         this.sync_status = false;
-         /* Dictionary indexed by ObselType URIs */
-         this.attributes = {};
-     };
-     Obsel.prototype = Obsel_prototype;
-
-     var TraceManager_prototype = {
-         traces: [],
-         /*
-          * Return the trace with id name
-          * If it was not registered, return undefined.
-          */
-         get_trace: function(name) {
-             return this.traces[name];
-         },
-
-         /*
-          * Explicitly create and initialize a new trace with the given name.
-          * The optional uri parameter allows to initialize the trace URI.
-          *
-          * If another existed with the same name before, then it is replaced by a new one.
-          */
-         init_trace: function(name, params)
-         {
-             if (window.console) window.console.log("init_trace", params);
-             url = params.url ? params.url : "";
-             requestmode = params.requestmode ? params.requestmode : "POST";
-             syncmode = params.syncmode ? params.syncmode : "none";
-             default_subject = params.default_subject ? params.default_subject : "default";
-             var t = new Trace(url, requestmode);
-             t.set_default_subject(default_subject);
-             t.set_sync_mode(syncmode);
-             this.traces[name] = t;
-             return t;
-         }
-     };
-
-     var TraceManager = function() {
-         this.traces = {};
-     };
-     TraceManager.prototype = TraceManager_prototype;
-
-     var tracemanager  = new TraceManager();
-     return tracemanager;
- })(jQuery);
+/*
+ * Modelled Trace API
+ *
+ * This file is part of ktbs4js.
+ *
+ * ktbs4js is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * ktbs4js is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with ktbs4js.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/* FIXME: properly use require.js feature. This will do for debugging in the meantime */
+window.tracemanager = (function($) {
+    // If there are more than MAX_FAILURE_COUNT synchronisation
+    // failures, then disable synchronisation
+    var MAX_FAILURE_COUNT = 20;
+
+    // If there are more than MAX_BUFFER_SIZE obsels in the buffer,
+    // then "compress" them as a single "ktbsFullBuffer"
+    var  MAX_BUFFER_SIZE = 500;
+
+    var _replacement = {
+         ';': '"',
+         '"': ';',
+         '#': '%23',
+         '&': '%26',
+         '?': '%3F'
+     };
+    var BufferedService_prototype = {
+         /*
+          *  Buffered service for traces
+          */
+         // url: "",
+         // buffer: [],
+         // isReady: false,
+         // timer: null,
+         // failureCount: 0,
+
+         /* Flush buffer */
+         flush: function() {
+             // FIXME: add mutex on this.buffer
+             if (!this.isReady) {
+                 if (window.console) { window.console.log("Sync service not ready"); };
+             } else if (this.failureCount > MAX_FAILURE_COUNT) {
+                 // Disable synchronisation
+                 this.set_sync_mode('none');
+             } else if (this.buffer.length) {
+                 var temp = this.buffer;
+                 this.buffer = [];
+
+                 if (this.mode == 'GET') {
+                     // GET mode: do some data mangline. We mark the
+                     // "compressed" nature of the generated JSON by
+                     // prefixing it with c
+                     var data = 'c' + JSON.stringify(temp.map(function (o) { return o.toCompactJSON(); }));
+                     // Swap " (very frequent, which will be
+                     // serialized into %22) and ; (rather rare), this
+                     // saves some bytes
+                     data = data.replace(/[;"#?&]/g, function(s) { return _replacement[s]; });
+                     // FIXME: check data length (< 2K is safe)
+                     var request = $('<img />').error(function() { this.failureCount += 1; })
+                         .load(function() { this.failureCount = 0; })
+                         .attr('src', this.url + 'trace/?data=' + data);
+                 } else {
+                     $.ajax({ url: this.url + 'trace/',
+                              type: 'POST',
+                              contentType: 'application/json',
+                              data: JSON.stringify(temp.map(function (o) { return o.toJSON(); })),
+                              processData: false,
+                              // Type of the returned data.
+                              dataType: "html",
+                              error: function(jqXHR, textStatus, errorThrown) {
+                                  if (window.console) { window.console.log("Error when sending buffer:", textStatus); }
+                                  this.failureCount += 1;
+                              },
+                              success: function(data, textStatus, jqXHR) {
+                                  // Reset failureCount to 0 as soon as there is 1 valid answer
+                                  this.failureCount = 0;
+                              }
+                            });
+                 }
+             }
+         },
+
+         /* Sync mode: delayed, sync (immediate sync), none (no
+          * synchronisation with server, the trace has to be explicitly saved
+          * if needed */
+         set_sync_mode: function(mode, default_subject) {
+             this.sync_mode = mode;
+             if (! this.isReady && mode !== "none")
+                 this.init(default_subject);
+             if (mode == 'delayed') {
+                 this.start_timer();
+             } else {
+                 this.stop_timer();
+             }
+         },
+
+         /* Enqueue an obsel */
+         enqueue: function(obsel) {
+             if (this.buffer.length > MAX_BUFFER_SIZE) {
+                 obsel = new Obsel('ktbsFullBuffer', this.buffer[0].begin,
+                                   this.buffer[this.buffer.length - 1].end, this.buffer[0].subject);
+                 obsel.trace = this.buffer[0].trace;
+                 this.buffer = [];
+             }
+             this.buffer.push(obsel);
+             if (this.sync_mode === 'sync') {
+                 // Immediate sync of the obsel.
+                 this.flush();
+             }
+         },
+
+         start_timer: function() {
+             var self = this;
+             if (this.timer === null) {
+                 this.timer = window.setInterval(function() {
+                                                     self.flush();
+                                                 }, this.timeOut);
+             }
+         },
+
+         stop_timer: function() {
+             if (this.timer !== null) {
+                 window.clearInterval(this.timer);
+                 this.timer = null;
+             }
+         },
+
+         /*
+          * Initialize the sync service
+          */
+         init: function(default_subject) {
+             var self = this;
+             if (this.isReady)
+                 /* Already initialized */
+                 return;
+             if (typeof default_subject === 'undefined')
+                 default_subject = 'anonymous';
+             if (this.mode == 'GET') {
+                 var request=$('<img/>').attr('src', this.url + 'login?userinfo={"default_subject": "' + default_subject + '"}');
+                 // Do not wait for the return, assume it is
+                 // initialized. This assumption will not work anymore
+                 // if login returns some necessary information
+                 this.isReady = true;
+             } else {
+                 $.ajax({ url: this.url + 'login',
+                          type: 'POST',
+                          data: 'userinfo={"default_subject":"' + default_subject + '"}',
+                          success: function(data, textStatus, jqXHR) {
+                              self.isReady = true;
+                              if (self.buffer.length) {
+                                  self.flush();
+                              }
+                          }
+                        });
+             }
+         }
+     };
+     var BufferedService = function(url, mode) {
+         this.url = url;
+         this.buffer = [];
+         this.isReady = false;
+         this.timer = null;
+         this.failureCount = 0;
+         // sync_mode is either "none", "sync" or "buffered"
+         this.sync_mode = "none";
+         /* mode can be either POST or GET */
+         if (mode == 'POST' || mode == 'GET')
+             this.mode = mode;
+         else
+             this.mode = 'POST';
+         /* Flush buffer every timeOut ms if the sync_mode is delayed */
+         this.timeOut = 2000;
+     };
+     BufferedService.prototype = BufferedService_prototype;
+
+     var Trace_prototype = {
+         /* FIXME: We could/should use a sorted list such as
+          http://closure-library.googlecode.com/svn/docs/class_goog_structs_AvlTree.html
+          to speed up queries based on time */
+         obsels: [],
+         /* Trace URI */
+         uri: "",
+         default_subject: "",
+         /* baseuri is used as the base URI to resolve relative
+          * attribute-type names in obsels. Strictly speaking, this
+          * should rather be expressed as a reference to model, or
+          * more generically, as a qname/URI dict */
+         baseuri: "",
+         /* Mapping of obsel type or property name to a compact
+          * representation (shorthands).
+          */
+         shorthands: null,
+         syncservice: null,
+
+         /* Define the trace URI */
+         set_uri: function(uri) {
+             this.uri = uri;
+         },
+
+         /* Sync mode: delayed, sync (immediate sync), none (no
+          * synchronisation with server, the trace has to be explicitly saved
+          * if needed */
+         set_sync_mode: function(mode) {
+             if (this.syncservice !== null) {
+                 this.syncservice.set_sync_mode(mode, this.default_subject);
+             }
+         },
+
+         /*
+          * Return a list of the obsels of this trace matching the parameters
+          */
+         list_obsels: function(_begin, _end, _reverse) {
+             var res;
+             if (typeof _begin !== 'undefined' || typeof _end !== 'undefined') {
+                 /*
+                  * Not optimized yet.
+                  */
+                 res = [];
+                 var l = this.obsels.length;
+                 for (var i = 0; i < l; i++) {
+                     var o = this.obsels[i];
+                     if ((typeof _begin !== 'undefined' && o.begin > _begin) && (typeof _end !== 'undefined' && o.end < _end)) {
+                         res.push(o);
+                     }
+                 }
+             }
+
+             if (typeof _reverse !== 'undefined') {
+                 if (res !== undefined) {
+                     /* Should reverse the whole list. Make a copy. */
+                     res = this.obsels.slice(0);
+                 }
+                 res.sort(function(a, b) { return b.begin - a.begin; });
+                 return res;
+             }
+
+             if (res === undefined) {
+                 res = this.obsels;
+             }
+             return res;
+
+         },
+
+         /*
+          * Return the obsel of this trace identified by the URI, or undefined
+          */
+         get_obsel: function(id) {
+             for (var i = 0; i < this.obsels.length; i++) {
+                 /* FIXME: should check against variations of id/uri, take this.baseuri into account */
+                 if (this.obsels[i].uri === id) {
+                     return this.obsels[i];
+                 }
+             }
+             return undefined;
+         },
+
+         set_default_subject: function(subject) {
+             // FIXME: if we call this method after the sync_service
+             // init method, then the default_subject will not be
+             // consistent anymore. Maybe we should then call init() again?
+             this.default_subject = subject;
+         },
+
+         get_default_subject: function() {
+             return this.default_subject;
+         },
+
+         /* (type:ObselType, begin:int, end:int?, subject:str?, attributes:[AttributeType=>any]?) */
+         /* Create a new obsel and add it to the trace */
+         create_obsel: function(type, begin, end, subject, _attributes) {
+             var o = new Obsel(type, begin, end, subject);
+             if (typeof _attributes !== 'undefined') {
+                 o.attributes = _attributes;
+             }
+             o.trace = this;
+             this.obsels.push(o);
+             if (this.syncservice !== null)
+                 this.syncservice.enqueue(o);
+         },
+
+         /* Helper methods */
+
+         /* Create a new obsel with the given attributes */
+         trace: function(type, _attributes, _begin, _end, _subject) {
+             var t = (new Date()).getTime();
+             if (typeof begin === 'undefined') {
+                 _begin = t;
+             }
+             if (typeof end === 'undefined') {
+                 _end = _begin;
+             }
+             if (typeof subject === 'undefined') {
+                 _subject = this.default_subject;
+             }
+             if (typeof _attributes === 'undefined') {
+                 _attributes = {};
+             }
+             return this.create_obsel(type, _begin, _end, _subject, _attributes);
+         }
+     };
+
+     var Trace = function(uri, requestmode) {
+         /* FIXME: We could/should use a sorted list such as
+          http://closure-library.googlecode.com/svn/docs/class_goog_structs_AvlTree.html
+          to speed up queries based on time */
+         this.obsels = [];
+         /* Trace URI */
+         if (uri === undefined)
+             uri = "";
+         this.uri = uri;
+         this.sync_mode = "none";
+         this.default_subject = "";
+         this.shorthands = {};
+         /* baseuri is used a the base URI to resolve relative attribute names in obsels */
+         this.baseuri = "";
+
+         this.syncservice = new BufferedService(uri, requestmode);
+         $(window).unload( function () {
+                               if (this.syncservice && this.sync_mode !== 'none') {
+                                   this.syncservice.flush();
+                                   this.syncservice.stop_timer();
+                               }
+                           });
+     };
+     Trace.prototype = Trace_prototype;
+
+     var Obsel_prototype = {
+         /* The following attributes are here for documentation
+          * purposes. They MUST be defined in the constructor
+          * function. */
+         trace: undefined,
+         type: undefined,
+         begin: undefined,
+         end: undefined,
+         subject: undefined,
+         /* Dictionary indexed by ObselType URIs */
+         attributes: {},
+
+         /* Method definitions */
+         get_trace: function() {
+             return this.trace;
+         },
+
+         get_obsel_type: function() {
+             return this.type;
+         },
+         get_begin: function() {
+             return this.begin;
+         },
+         get_end: function() {
+             return this.end;
+         },
+         get_subject: function() {
+             return this.subject;
+         },
+
+         list_attribute_types: function() {
+             var result = [];
+             for (var prop in this.attributes) {
+                 if (this.attributes.hasOwnProperty(prop))
+                     result.push(prop);
+             }
+             /* FIXME: we return URIs here instead of AttributeType elements */
+             return result;
+         },
+
+         list_relation_types: function() {
+             /* FIXME: not implemented yet */
+         },
+
+         list_related_obsels: function (rt) {
+             /* FIXME: not implemented yet */
+         },
+         list_inverse_relation_types: function () {
+             /* FIXME: not implemented yet */
+         },
+         list_relating_obsels: function (rt) {
+             /* FIXME: not implemented yet */
+         },
+         /*
+          * Return the value of the given attribute type for this obsel
+          */
+         get_attribute_value: function(at) {
+             if (typeof at === "string")
+                 /* It is a URI */
+                 return this.attributes[at];
+             else
+                 /* FIXME: check that at is instance of AttributeType */
+                 return this.attributes[at.uri];
+         },
+
+
+         /* obsel modification (trace amendment) */
+
+         set_attribute_value: function(at, value) {
+             if (typeof at === "string")
+                 /* It is a URI */
+                 this.attributes[at] = value;
+             /* FIXME: check that at is instance of AttributeType */
+             else
+                 this.attributes[at.uri] = value;
+         },
+
+         del_attribute_value: function(at) {
+             if (typeof at === "string")
+                 /* It is a URI */
+                 delete this.attributes[at];
+             /* FIXME: check that at is instance of AttributeType */
+             else
+                 delete this.attributes[at.uri];
+         },
+
+         add_related_obsel: function(rt, value) {
+             /* FIXME: not implemented yet */
+         },
+
+         del_related_obsel: function(rt, value) {
+             /* FIXME: not implemented yet */
+         },
+
+         /*
+          * Return a JSON representation of the obsel
+          */
+         toJSON: function() {
+             var r = {
+                 "@id": this.id,
+                 "@type": this.type,
+                 "begin": this.begin,
+                 "end": this.end,
+                 "subject": this.subject
+             };
+             for (var prop in this.attributes) {
+                 if (this.attributes.hasOwnProperty(prop))
+                     r[prop] = this.attributes[prop];
+             }
+             return r;
+         },
+
+         /*
+          * Return a compact JSON representation of the obsel.
+          * Use predefined + custom shorthands for types/properties
+          */
+         toCompactJSON: function() {
+             var r = {
+                 "@t": (this.trace.shorthands.hasOwnProperty(this.type) ? this.trace.shorthands[this.type] : this.type),
+                 "@b": this.begin,
+             };
+             // Transmit subject only if different from default_subject
+             if (this.subject !== this.trace.default_subject)
+                 r["@s"] = this.subject;
+
+             // Store duration (to save some bytes) and only if it is non-null
+             if (this.begin !== this.end)
+                 r["@d"] = this.end - this.begin;
+
+             // Store id only if != ""
+             if (this.id !== "")
+                 r["@i"] = this.id;
+
+             for (var prop in this.attributes) {
+                 if (this.attributes.hasOwnProperty(prop))
+                 {
+                     var v = this.attributes[prop];
+                     r[prop] = this.trace.shorthands.hasOwnProperty(v) ? this.trace.shorthands[v] : v;
+                 }
+             }
+             return r;
+         },
+
+         toJSONstring: function() {
+             return JSON.stringify(this.toJSON());
+         }
+     };
+
+     var Obsel = function(type, begin, end, subject, attributes) {
+         this.trace = undefined;
+         this.uri = "";
+         this.id = "";
+         this.type = type;
+         this.begin = begin;
+         this.end = end;
+         this.subject = subject;
+         /* Is the obsel synched with the server ? */
+         this.sync_status = false;
+         /* Dictionary indexed by ObselType URIs */
+         this.attributes = {};
+     };
+     Obsel.prototype = Obsel_prototype;
+
+     var TraceManager_prototype = {
+         traces: [],
+         /*
+          * Return the trace with id name
+          * If it was not registered, return undefined.
+          */
+         get_trace: function(name) {
+             return this.traces[name];
+         },
+
+         /*
+          * Explicitly create and initialize a new trace with the given name.
+          * The optional uri parameter allows to initialize the trace URI.
+          *
+          * If another existed with the same name before, then it is replaced by a new one.
+          */
+         init_trace: function(name, params)
+         {
+             if (window.console) window.console.log("init_trace", params);
+             url = params.url ? params.url : "";
+             requestmode = params.requestmode ? params.requestmode : "POST";
+             syncmode = params.syncmode ? params.syncmode : "none";
+             default_subject = params.default_subject ? params.default_subject : "default";
+             var t = new Trace(url, requestmode);
+             t.set_default_subject(default_subject);
+             t.set_sync_mode(syncmode);
+             this.traces[name] = t;
+             return t;
+         }
+     };
+
+     var TraceManager = function() {
+         this.traces = {};
+     };
+     TraceManager.prototype = TraceManager_prototype;
+
+     var tracemanager  = new TraceManager();
+     return tracemanager;
+ })(jQuery);

From 641c94fe7fc50d44abcfcb2278dba6eade864a57 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 30 Aug 2016 14:54:59 +0200
Subject: [PATCH 189/204] Display creator

---
 src/widgets/EnrichedPlan.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 342d0779..edd16a6e 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -138,7 +138,7 @@ IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate =
       '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Note-Featured{{/featured}} Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}"> \
   <div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div>\
   <a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> \
-  <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span> \
+  <span class="Ldt-EnrichedPlan-Note-Author">{{ creator }}</span> \
   {{#can_edit}}<span class="Ldt-EnrichedPlan-EditControl">\
     {{#is_admin}}<span data-id="{{id}}" title="{{l10n.toggle_featured}}" class="Ldt-EnrichedPlan-EditControl-Featured"></span>{{/is_admin}}\
     <span data-id="{{id}}" class="Ldt-EnrichedPlan-EditControl-Edit"></span>\
@@ -152,9 +152,9 @@ IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate =
   {{/comments.length}}\
   <div class="Ldt-EnrichedPlan-Comments" data-id="{{id}}" data-length="{{comments.length}}">\
     {{#comments}}\
-    <div class="Ldt-EnrichedPlan-Comment" data-id="{{id}}">\
+    <div class="Ldt-EnrichedPlan-Comment" data-id="{{id}}" data-date="{{modified}}" data-creator="{{creator}}">\
       <span class="Ldt-EnrichedPlan-Comment-Description">{{description}}</span>\
-      <span class="Ldt-EnrichedPlan-Comment-Date">{{modified}}</span>\
+      <span class="Ldt-EnrichedPlan-Comment-Date">{{modified|slice:10}}</span>\
       <span class="Ldt-EnrichedPlan-Comment-Author">{{creator}}</span>\
     </div>\
     {{/comments}}\
@@ -477,7 +477,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                     media_id: a.media.id,
                     text: IriSP.textFieldHtml(a.getTitleOrDescription()),
                     url: document.location.href.replace(/#.*$/, '') + '#id=' + a.id + '&t=' + (a.begin / 1000.0),
-                    author: a.creator,
+                    creator: a.creator,
                     begin: a.begin.toString(),
                     begin_ms: a.begin.milliseconds,
                     end_ms: a.end.milliseconds,

From 275ad71e0eeef541c5717715b3805ce6658e90d1 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Tue, 30 Aug 2016 14:55:16 +0200
Subject: [PATCH 190/204] Adjust padding

---
 src/widgets/EnrichedPlan.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 90dee2a7..7f802217 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -478,6 +478,7 @@ label:hover:before {
     flex-direction: column;
     width: 100%;
     padding-top: 10px;
+    padding-left: 1em;
 }
 
 .Ldt-EnrichedPlan-Comment-New.Ldt-EnrichedPlan-Expanded {

From 94ef46289d5b9d12f173559db23cba6f1420e1b6 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 2 Sep 2016 17:26:22 +0200
Subject: [PATCH 191/204] Handle non-defined input field

---
 src/widgets/EnrichedPlan.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index edd16a6e..39f81051 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -318,7 +318,7 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
     });
 
     var inputField = _this.container.find(".Ldt-EnrichedPlan-Search-Input");
-    inputField.on('onsearch' in inputField[0] ? "search" : "keyup", function () {
+    inputField.length && inputField.on('onsearch' in inputField[0] ? "search" : "keyup", function () {
         var q = IriSP.jQuery(this).val().toLocaleLowerCase();
         if (q === "") {
             // Show all

From 498c4c269b7e32784bdbee91a2a0738f9b6b08d9 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Mon, 5 Sep 2016 14:42:40 +0200
Subject: [PATCH 192/204] Rename Search to Filter

---
 src/widgets/EnrichedPlan.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 39f81051..9c3aa514 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -23,7 +23,7 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
         quiz_notes: "Quiz questions",
         popup_tabconfig: "Configure tab display",
         slides: "Slides",
-        search: "Search...",
+        search: "Filter...",
         whole_video: "Whole video",
         expand_slide: "Show the slide content",
         comment_count: "comment(s)",
@@ -39,7 +39,7 @@ IriSP.Widgets.EnrichedPlan.prototype.messages = {
         quiz_notes: "Questions de quiz",
         popup_tabconfig: "Configurer les onglets",
         slides: "Diapo",
-        search: "Recherchez...",
+        search: "Filtrer...",
         whole_video: "Vidéo entière",
         expand_slide: "Montrer le contenu de la diapo",
         comment_count: "commentaire(s)",

From 630d6d6c1922cdcb886f85142d1e48e1bb5c0b18 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 7 Sep 2016 00:42:41 +0200
Subject: [PATCH 193/204] Trace settings checkboxes

---
 src/widgets/EnrichedPlan.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 9c3aa514..3409100e 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -78,7 +78,7 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
     + '{{#show_controls}}'
     + '<div class="Ldt-EnrichedPlan-ControlMenu">'
     + ' <label for="{{ prefix }}control_menu" class="Ldt-EnrichedPlan-Toggle"></label>'
-    + ' <input type="checkbox" class="Ldt-EnrichedPlan-ControlMenuHome" id="{{ prefix }}control_menu"/>'
+    + ' <input type="checkbox" class="Ldt-EnrichedPlan-ControlMenuHome Ldt-TraceMe" id="{{ prefix }}control_menu"/>'
     + '<ul>'
     + ' <li class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Tabconfig">{{l10n.popup_tabconfig}}</li>'
     + ' <li>'
@@ -86,20 +86,20 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
     + '  <label for="{{prefix}}featured_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Featured">{{ l10n.featured_notes }}</label>'
     + ' </li>'
     + ' <li>'
-    + '  <input id="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Other" {{#show_other_notes}}checked{{/show_other_notes}} type="checkbox">'
+    + '  <input id="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Other Ldt-TraceMe" {{#show_other_notes}}checked{{/show_other_notes}} type="checkbox">'
     + '  <label for="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Other">{{ l10n.other_notes }}</label>'
     + ' </li>'
     + ' <li>'
-    + '  <input id="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Own" {{#show_own_notes}}checked{{/show_own_notes}} type="checkbox">'
+    + '  <input id="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Own Ldt-TraceMe" {{#show_own_notes}}checked{{/show_own_notes}} type="checkbox">'
     + '  <label for="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Own">{{ l10n.own_notes }}</label>'
     + ' </li>'
     + ' <li>'
-    + '  <input id="{{prefix}}quiz_notes_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Quiz" {{#show_quiz_notes}}checked{{/show_quiz_notes}} type="checkbox">'
+    + '  <input id="{{prefix}}quiz_notes_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Quiz Ldt-TraceMe" {{#show_quiz_notes}}checked{{/show_quiz_notes}} type="checkbox">'
     + '  <label for="{{prefix}}quiz_notes_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Quiz">{{ l10n.quiz_notes }}</label>'
     + ' </li>'
     + '{{^flat_mode}}'
     + ' <li>'
-    + '  <input id="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Slide-Display" {{#show_slides}}checked{{/show_slides}} type="checkbox">'
+    + '  <input id="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Slide-Display Ldt-TraceMe" {{#show_slides}}checked{{/show_slides}} type="checkbox">'
     + '  <label for="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Slide-Display">{{ l10n.slides }}<br/>&nbsp;</label>'
     + ' </li>'
     + '{{/flat_mode}}'
@@ -210,7 +210,7 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
     });
     _this.container.on("click", ".Ldt-EnrichedPlan-Control-Checkbox", function () {
         var classname = _.first(_.filter(this.classList, function (s) {
-            return s != "Ldt-EnrichedPlan-Control-Checkbox";
+            return s != "Ldt-EnrichedPlan-Control-Checkbox" && s.indexOf("Ldt-EnrichedPlan") == 0;
         }));
         if (classname !== undefined) {
             if (IriSP.jQuery(this).is(':checked')) {
@@ -320,6 +320,7 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
     var inputField = _this.container.find(".Ldt-EnrichedPlan-Search-Input");
     inputField.length && inputField.on('onsearch' in inputField[0] ? "search" : "keyup", function () {
         var q = IriSP.jQuery(this).val().toLocaleLowerCase();
+        _this.player.trigger("EnrichedPlan.filter", q);
         if (q === "") {
             // Show all
             IriSP.jQuery(".Ldt-EnrichedPlan-Content").unmark().find(".non_matching").removeClass("non_matching");

From 21e5576875f54e1b4ab7d98a1356ab3b301cf419 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 7 Sep 2016 00:48:57 +0200
Subject: [PATCH 194/204] Trigger player event when changing setting

---
 src/widgets/EnrichedPlan.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 3409100e..ada90019 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -86,20 +86,20 @@ IriSP.Widgets.EnrichedPlan.prototype.template =
     + '  <label for="{{prefix}}featured_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Featured">{{ l10n.featured_notes }}</label>'
     + ' </li>'
     + ' <li>'
-    + '  <input id="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Other Ldt-TraceMe" {{#show_other_notes}}checked{{/show_other_notes}} type="checkbox">'
+    + '  <input id="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Other" {{#show_other_notes}}checked{{/show_other_notes}} type="checkbox">'
     + '  <label for="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Other">{{ l10n.other_notes }}</label>'
     + ' </li>'
     + ' <li>'
-    + '  <input id="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Own Ldt-TraceMe" {{#show_own_notes}}checked{{/show_own_notes}} type="checkbox">'
+    + '  <input id="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Own" {{#show_own_notes}}checked{{/show_own_notes}} type="checkbox">'
     + '  <label for="{{prefix}}own_notes_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Own">{{ l10n.own_notes }}</label>'
     + ' </li>'
     + ' <li>'
-    + '  <input id="{{prefix}}quiz_notes_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Quiz Ldt-TraceMe" {{#show_quiz_notes}}checked{{/show_quiz_notes}} type="checkbox">'
+    + '  <input id="{{prefix}}quiz_notes_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Quiz" {{#show_quiz_notes}}checked{{/show_quiz_notes}} type="checkbox">'
     + '  <label for="{{prefix}}quiz_notes_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Quiz">{{ l10n.quiz_notes }}</label>'
     + ' </li>'
     + '{{^flat_mode}}'
     + ' <li>'
-    + '  <input id="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Slide-Display Ldt-TraceMe" {{#show_slides}}checked{{/show_slides}} type="checkbox">'
+    + '  <input id="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Slide-Display" {{#show_slides}}checked{{/show_slides}} type="checkbox">'
     + '  <label for="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Slide-Display">{{ l10n.slides }}<br/>&nbsp;</label>'
     + ' </li>'
     + '{{/flat_mode}}'
@@ -218,11 +218,13 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
                 if (_this.bar) {
                     _this.bar.find("." + classname).removeClass("filtered_out");
                 }
+                _this.player.trigger("EnrichedPlan.SettingCheck", classname);
             } else {
                 _this.content.find(".Ldt-EnrichedPlan-Slide ." + classname).addClass("filtered_out");
                 if (_this.bar) {
                     _this.bar.find("." + classname).addClass("filtered_out");
                 }
+                _this.player.trigger("EnrichedPlan.SettingUncheck", classname);
             }
         }
     });

From 5ec15de3e8b87decf5cfcd14d39838ad2efd7cf3 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 28 Sep 2016 17:28:29 +0200
Subject: [PATCH 195/204] Add Comment Edit icon

---
 src/widgets/EnrichedPlan.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index ada90019..58fb6cc5 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -156,6 +156,9 @@ IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate =
       <span class="Ldt-EnrichedPlan-Comment-Description">{{description}}</span>\
       <span class="Ldt-EnrichedPlan-Comment-Date">{{modified|slice:10}}</span>\
       <span class="Ldt-EnrichedPlan-Comment-Author">{{creator}}</span>\
+      {{#can_edit}}\
+         <span data-id="{{id}}" class="Ldt-EnrichedPlan-Comment-Edit"></span>\
+      {{/can_edit}}\
     </div>\
     {{/comments}}\
     {{#is_authenticated}}\

From 00c6cfdc36a4b24b7538bd04ecb37b35eb78f0d3 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 29 Sep 2016 12:02:26 +0200
Subject: [PATCH 196/204] Make PIP view transparent

---
 src/widgets/SlideVideoPlayer.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index c66d8431..5dc656fe 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -40,6 +40,7 @@
     right: 2px;
     border: 1px solid #999;
     box-shadow: #999 2px 2px 2px;
+    opacity: 50%;
 }
 
 .Ldt-SlideVideoPlayer-pip-br {

From 5e1cb27993560e715bfccdedf02229fd701e6365 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 12 Oct 2016 09:25:41 +0200
Subject: [PATCH 197/204] Right align comment edit icon

---
 src/widgets/EnrichedPlan.css | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 7f802217..13cac2f3 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -401,6 +401,7 @@ label:hover:before {
     background-color: #ededed;
 }
 
+.Ldt-EnrichedPlan-Comment-Edit,
 .Ldt-EnrichedPlan-EditControl span {
     display: inline-block;
     width: 24px;
@@ -411,15 +412,21 @@ label:hover:before {
     background-repeat: no-repeat;
 }
 
+.Ldt-EnrichedPlan-Comment-Edit {
+    position: absolute;
+    right: 2px;
+}
+
+.Ldt-EnrichedPlan-Comment-Edit,
 .Ldt-EnrichedPlan-EditControl-Edit {
-    background: url(img/notes_edit.svg);
+    background-image: url(img/notes_edit.svg);
 }
 
 .Ldt-EnrichedPlan-EditControl-Featured {
-    background: url(img/notes_featured.svg);
+    background-image: url(img/notes_featured.svg);
 }
 .Ldt-EnrichedPlan-EditControl-Delete {
-    background: url(img/notes_delete.svg);
+    background-image: url(img/notes_delete.svg);
 }
 
 .Ldt-EnrichedPlan-Selected-Timecode,

From 19f127de1dc693275c493f1291677c99a22b2f8a Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 12 Oct 2016 09:25:47 +0200
Subject: [PATCH 198/204] Highlight comments

---
 src/widgets/EnrichedPlan.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 13cac2f3..289019c3 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -488,6 +488,12 @@ label:hover:before {
     padding-left: 1em;
 }
 
+.Ldt-EnrichedPlan-Comment {
+    background-color: #fafafa;
+    margin: 3px;
+    min-height: 32px;
+}
+
 .Ldt-EnrichedPlan-Comment-New.Ldt-EnrichedPlan-Expanded {
     display: inline-flex;
 }

From da0e3487180b383ed7a740f682641857e12f9b03 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 12 Oct 2016 09:26:17 +0200
Subject: [PATCH 199/204] Fix Comment.edit trigger

---
 src/widgets/EnrichedPlan.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 58fb6cc5..0c180f6f 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -157,7 +157,7 @@ IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate =
       <span class="Ldt-EnrichedPlan-Comment-Date">{{modified|slice:10}}</span>\
       <span class="Ldt-EnrichedPlan-Comment-Author">{{creator}}</span>\
       {{#can_edit}}\
-         <span data-id="{{id}}" class="Ldt-EnrichedPlan-Comment-Edit"></span>\
+         <span data-id="{{id}}" data-annotation_id="{{annotation_id}}" class="Ldt-EnrichedPlan-Comment-Edit"></span>\
       {{/can_edit}}\
     </div>\
     {{/comments}}\
@@ -243,9 +243,12 @@ IriSP.Widgets.EnrichedPlan.prototype.init_component = function () {
             _this.player.trigger("Annotation.delete", this.dataset.id);
         }
     });
+    _this.container.on("click", ".Ldt-EnrichedPlan-Comment-Edit", function () {
+        _this.player.trigger("Comment.edit", { comment_id: this.dataset.id,
+                                               parent_annotation_id: this.dataset.annotation_id });
+    });
 
     function add_comment(annotation_id, text) {
-        console.log("Commenting ", annotation_id, text);
         IriSP.jQuery.ajax({
             url: _this.action_url("add_comment", annotation_id),
             timeout: 2000,
@@ -479,6 +482,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                 var cat = note_category(a);
                 var annData = {
                     id: a.id,
+                    annotation_id: a.id,
                     l10n: _this.l10n,
                     media_id: a.media.id,
                     text: IriSP.textFieldHtml(a.getTitleOrDescription()),

From 99ca3adbc3977a3ccb6ec850abe9b947f70b2c9e Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 12 Oct 2016 09:26:32 +0200
Subject: [PATCH 200/204] Get featured information from a.meta dict

---
 src/widgets/EnrichedPlan.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 0c180f6f..a3bf30c0 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -504,7 +504,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                     comments: a.meta['coco:comments'],
                     filtered: ((cat == 'Own' && !_this.show_own_notes)
                                 || (cat == 'Other' && !_this.show_other_notes)
-                                || (cat == 'Featured' && !_this.show_featured_notes)
+                                || (a.meta['coco:featured'] && !_this.show_featured_notes)
                                || (cat == 'Quiz' && !_this.show_quiz_notes)
                               ) ? 'filtered_out' : ''
                 };

From b3166cf7dbe5b24ac251923120d7b9e3b0a3815d Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 12 Oct 2016 09:26:43 +0200
Subject: [PATCH 201/204] Fix PIP opacity value

---
 src/widgets/SlideVideoPlayer.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 5dc656fe..71d6dae0 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -40,7 +40,7 @@
     right: 2px;
     border: 1px solid #999;
     box-shadow: #999 2px 2px 2px;
-    opacity: 50%;
+    opacity: .5;
 }
 
 .Ldt-SlideVideoPlayer-pip-br {

From 86f37cf73d3f0c684f63b1a864b8ee6d7a8122b5 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Wed, 12 Oct 2016 09:37:34 +0200
Subject: [PATCH 202/204] Fix comment width when editable

---
 src/widgets/EnrichedPlan.css |  8 ++++++++
 src/widgets/EnrichedPlan.js  | 10 ++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 289019c3..23023049 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -401,6 +401,14 @@ label:hover:before {
     background-color: #ededed;
 }
 
+.Ldt-EnrichedPlan-Comment-Content {
+    display: inline-block;
+    width: 100%;
+}
+.Ldt-EnrichedPlan-Comment-Content.editable {
+    width: calc(100% - 30px);
+}
+
 .Ldt-EnrichedPlan-Comment-Edit,
 .Ldt-EnrichedPlan-EditControl span {
     display: inline-block;
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index a3bf30c0..fb2f0cbf 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -153,11 +153,13 @@ IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate =
   <div class="Ldt-EnrichedPlan-Comments" data-id="{{id}}" data-length="{{comments.length}}">\
     {{#comments}}\
     <div class="Ldt-EnrichedPlan-Comment" data-id="{{id}}" data-date="{{modified}}" data-creator="{{creator}}">\
-      <span class="Ldt-EnrichedPlan-Comment-Description">{{description}}</span>\
-      <span class="Ldt-EnrichedPlan-Comment-Date">{{modified|slice:10}}</span>\
-      <span class="Ldt-EnrichedPlan-Comment-Author">{{creator}}</span>\
+      <div class="Ldt-EnrichedPlan-Comment-Content {{#can_edit}}editable{{/can_edit}}"> \
+        <span class="Ldt-EnrichedPlan-Comment-Description">{{description}}</span>\
+        <span class="Ldt-EnrichedPlan-Comment-Date">{{modified|slice:10}}</span>\
+        <span class="Ldt-EnrichedPlan-Comment-Author">{{creator}}</span>\
+      </div> \
       {{#can_edit}}\
-         <span data-id="{{id}}" data-annotation_id="{{annotation_id}}" class="Ldt-EnrichedPlan-Comment-Edit"></span>\
+      <span data-id="{{id}}" data-annotation_id="{{annotation_id}}" class="Ldt-EnrichedPlan-Comment-Edit"></span>\
       {{/can_edit}}\
     </div>\
     {{/comments}}\

From dec05e364d26eb8e0e1ccae6c2383dc27a52d235 Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Thu, 13 Oct 2016 14:48:31 +0200
Subject: [PATCH 203/204] Modify display of annotation count

---
 src/widgets/EnrichedPlan.css | 23 +++++++++++++++++++++++
 src/widgets/EnrichedPlan.js  |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index 23023049..cd07b16a 100644
--- a/src/widgets/EnrichedPlan.css
+++ b/src/widgets/EnrichedPlan.css
@@ -225,6 +225,29 @@
     text-transform: uppercase;
     font-size: 10px;
 }
+.Ldt-EnrichedPlan-Comments-Count {
+    border: 1px solid;
+    min-width: 12px;
+    height: 17px;
+    border-radius: 3px;
+    display: inline-block;
+    font-family: roboto;
+    font-size: 10px;
+    padding: 1px 2px;
+}
+
+.Ldt-EnrichedPlan-Note-Own .Ldt-EnrichedPlan-Comments-Count {
+    background-color: #66ccff;
+    color: #fff;
+}
+.Ldt-EnrichedPlan-Note-Other .Ldt-EnrichedPlan-Comments-Count {
+    background-color: #996633;
+    color: #fff;
+}
+.Ldt-EnrichedPlan-Note-Quiz .Ldt-EnrichedPlan-Comments-Count {
+    background-color: #669933;
+    color: #fff;
+}
 
 .Ldt-EnrichedPlan-Container {
     overflow-y: hidden;
diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index fb2f0cbf..88afd733 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -148,7 +148,7 @@ IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate =
   </div>{{/is_admin}}\
   {{#show_comments}}\
   {{#comments.length}}\
-  <span class="Ldt-EnrichedPlan-Comments-Count" data-count="{{comments.length}}">{{comments.length}} {{l10n.comment_count}}</span>\
+  <span class="Ldt-EnrichedPlan-Comments-Count" title="{{comments.length}} {{l10n.comment_count}}" data-count="{{comments.length}}">{{comments.length}}</span>\
   {{/comments.length}}\
   <div class="Ldt-EnrichedPlan-Comments" data-id="{{id}}" data-length="{{comments.length}}">\
     {{#comments}}\

From e8db6c1143c787729944364d1dd728e08d54d91b Mon Sep 17 00:00:00 2001
From: Olivier Aubert <contact@olivieraubert.net>
Date: Fri, 14 Oct 2016 10:28:25 +0200
Subject: [PATCH 204/204] Select annotation identified in the document fragment

---
 src/widgets/EnrichedPlan.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EnrichedPlan.js b/src/widgets/EnrichedPlan.js
index 88afd733..a9d5b706 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -135,7 +135,7 @@ IriSP.Widgets.EnrichedPlan.prototype.slideBarTemplate =
     + '</div>';
 
 IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate =
-      '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Note-Featured{{/featured}} Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}"> \
+      '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begin_ms}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}} {{#selected}}Ldt-EnrichedPlan-Selected-Timecode{{/selected}} Ldt-EnrichedPlan-{{visibility}} {{#featured}}Ldt-EnrichedPlan-Note-Featured{{/featured}} Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}"> \
   <div class="Ldt-EnrichedPlan-NoteTimecode">{{ begin }}</div>\
   <a class="Ldt-EnrichedPlan-Note-Link" href="{{ url }}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span></a> \
   <span class="Ldt-EnrichedPlan-Note-Author">{{ creator }}</span> \
@@ -410,7 +410,12 @@ IriSP.Widgets.EnrichedPlan.prototype.get_slides = function () {
 IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
     var _this = this;
     var _slides = this.get_slides();
+    var selected_annotation = null;
 
+    var match = document.location.hash.match(/id=([0-9a-f-]+)/);
+    if (match !== null) {
+        selected_annotation = match[1];
+    }
     var _annotations = this.media.getAnnotations().filter(function (a) {
         return a.getAnnotationType().title != _this.annotation_type;
     }).sortBy(function (_annotation) {
@@ -485,6 +490,7 @@ IriSP.Widgets.EnrichedPlan.prototype.update_content = function () {
                 var annData = {
                     id: a.id,
                     annotation_id: a.id,
+                    selected: (a.id == selected_annotation),
                     l10n: _this.l10n,
                     media_id: a.media.id,
                     text: IriSP.textFieldHtml(a.getTitleOrDescription()),