diff --git a/assets/dev/jscsrc b/assets/dev/jscsrc
new file mode 100644
index 00000000..8e03442b
--- /dev/null
+++ b/assets/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
+}
diff --git a/src/js/html-player.js b/src/js/html-player.js
index fe1e7796..bfc14149 100644
--- a/src/js/html-player.js
+++ b/src/js/html-player.js
@@ -1,25 +1,26 @@
 /* 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
+        autoplay : opts.autostart || opts.autoplay || undefined,
+        preload: "metadata"
     });
-    
-    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>');
@@ -41,105 +42,105 @@ IriSP.htmlPlayer = function(media, jqselector, options) {
         });
         videoEl.append(_trackNode);
     }
-    jqselector.html(videoEl);
-    
+    jqselector.prepend(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 {
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/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);
diff --git a/src/js/model.js b/src/js/model.js
index 330d353c..94055d11 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);
-};
-
-List.prototype.removeIds = function(_list, _deleteFromDirectory) {
-    var _deleteFromDirectory = _deleteFromDirectory || false,
-        _this = this;
-    ns._(_list).forEach(function(_id) {
-        _this.removeId(_id);
-    });
-};
-
-List.prototype.removeElements = function(_list, _deleteFromDirectory) {
-    var _deleteFromDirectory = _deleteFromDirectory || false,
-        _this = this;
-    ns._(_list).forEach(function(_el) {
-        _this.removeElement(_el);
-    });
-};
-
-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,876 @@ 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;
+        }
+    };
+
+    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
+     */
 
-Reference.prototype.getContents = function() {
-    if (typeof this.contents === "undefined" || (this.isList && this.contents.length != this.id.length)) {
+    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);
-    }
-};
+    };
 
-BaseElement.prototype.toString = function() {
-    return this.elementType + (this.elementType !== 'element' ? ', id=' + this.id + ', title="' + this.title + '"' : '');
-};
+    Reference.prototype.getContents = function() {
+        if (typeof this.contents === "undefined" || (this.isList && this.contents.length != this.id.length)) {
+            this.refresh();
+        }
+        return this.contents;
+    };
 
-BaseElement.prototype.setReference = function(_elementType, _idRef) {
-    this[_elementType] = new Reference(this.source, _idRef);
-};
+    Reference.prototype.isOrHasId = function(_idRef) {
+        if (this.isList) {
+            return (ns._(this.id).indexOf(_idRef) !== -1);
+        } else {
+            return (this.id == _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);
         });
-    }
-};
+    };
+
+    /**
+     * 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.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.togglePlayPause = function () {
+        if (this.getPaused()) {
+            this.play();
+        } else {
+            this.pause();
+        };
+    };
+
+    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;
         });
-    } else {
+    };
+
+    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;
+            });
+        } 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;
+    };
 
-/* */
+    Directory.prototype.getElement = function(_id) {
+        return this.elements[_id];
+    };
 
-var Directory = Model.Directory = function() {
-    this.remoteSources = {};
-    this.elements = {};
-};
+    Directory.prototype.addElement = function(_element) {
+        this.elements[_element.id] = _element;
+    };
 
-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.getGlobalList = function() {
+        var _res = new List(this);
+        _res.addIds(ns._(this.elements).keys());
+        return _res;
+    };
+    return Model;
 
 })(IriSP);
 
 /* END js */
-
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);
             }
         },
diff --git a/src/js/serializers/ldt_annotate.js b/src/js/serializers/ldt_annotate.js
index 18f00546..e5b2cfbb 100644
--- a/src/js/serializers/ldt_annotate.js
+++ b/src/js/serializers/ldt_annotate.js
@@ -22,7 +22,8 @@ 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 ),
+            sharing: _data.sharing || "private",
+            type: (typeof _annType.dont_send_id !== "undefined" && _annType.dont_send_id ? "" : _annType.id),
             meta: {
                 created: _data.created,
                 creator: _data.creator,
@@ -44,14 +45,14 @@ 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);
             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);
             }
diff --git a/src/js/utils.js b/src/js/utils.js
index 0c0d4564..648a33f6 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) {
@@ -32,10 +32,10 @@ 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) {
+        while (true) {
             var result = _rx.exec(text);
             if (!result) {
                 break;
@@ -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) {
@@ -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 () {
@@ -202,3 +202,21 @@ 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);
+    });
+};
+
+/**
+ * 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/js/widgets-container/defaults.js b/src/js/widgets-container/defaults.js
index 19995a67..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,11 +111,14 @@ IriSP.widgetsRequirements = {
     },
     Shortcuts: {
         requires: [ "mousetrap", "mousetrapGlobal" ]
+    },
+    EnrichedPlan: {
+        requires: [ "markjs" ]
     }
 };
 
 IriSP.guiDefaults = {
-    width : 640,
+    width : "100%",
     container : 'LdtPlayer',
     spacer_div_height : 0,
     widgets: []
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" */
 };
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
+};
diff --git a/src/widgets/AnnotationsList.css b/src/widgets/AnnotationsList.css
index 405da5b2..9551dbe6 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;
 }
 
@@ -227,19 +240,20 @@ li.Ldt-AnnotationsList-Tag-Li:hover {
     display: none;
 }
 
-.Ldt-AnnotationsList .editableInput {
-    width: 80%;
+.editableInput {
+    width: 100%;
+    height: 100%;
 }
 
-.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%
+	width: 100%;
 	text-align: center;
 	vertical-align: middle;
 	font-size: 14px;
@@ -248,7 +262,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
diff --git a/src/widgets/AnnotationsList.js b/src/widgets/AnnotationsList.js
index 399d7674..34a3ac26 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();
     },
     /*
@@ -86,7 +86,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,
@@ -104,50 +104,47 @@ 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){
-        this.usernames = Array();
+IriSP.Widgets.AnnotationsList.prototype.importUsers = function () {
+    if (!this.source.users_data && this.api_users_endpoint) {
         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;
+        });
+
+        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
         });
-        this.usernames.forEach(function(_username){
-            usernames_list_string+=_username+","
-        })
-        usernames_list_string = usernames_list_string.substring(0, usernames_list_string.length - 1);
-        _url = Mustache.to_html(this.api_users_endpoint, {usernames_list_string: encodeURIComponent(usernames_list_string), usernames_list_length: this.usernames.length});
         return IriSP.jQuery.ajax({
             async: false,
             url: _url,
             type: "GET",
-            success: function(_data) {
-                _this.source.users_data = _data.objects
+            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: {
@@ -224,24 +221,24 @@ 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>'
     +         '{{l10n.annotation_deletion_delete}}'
     +         '<ul class="Ldt-AnnotationsList-ul-ToDelete"></ul>'
     +         '<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}}'
@@ -290,7 +287,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;
@@ -304,12 +301,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) {
@@ -342,9 +339,9 @@ IriSP.Widgets.AnnotationsList.prototype.importAnnotations = function () {
                 title: "Annotation import",
                 autoOpen: true,
                 width: '80%',
-                minHeight: '400',
-                height: 400,
-                buttons: [ { text: "Close", click: function() { $( this ).dialog( "close" ); } },
+                minHeight: '200',
+                height: 200,
+                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
@@ -358,7 +355,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,
@@ -396,127 +393,125 @@ 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;
     }
     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") {
             _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) {
@@ -524,12 +519,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,
                         {
@@ -539,51 +534,50 @@ 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)
                     )
                 ),
                 _external = _annotation.project != _this.source.projectId ? true : false,
                 _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().replace(/\u200E/g, '').replace(/^([^\d]*\d{1,2}:\d{1,2}):\d{1,2}([^\d]*)$/, '$1$2');;
-            }
-            if(this.tags == true){
-                var _tags = _annotation.getTagTexts();
+                _created = _annotation.created.toLocaleDateString() + ", " + _annotation.created.toLocaleTimeString().replace(/\u200E/g, '').replace(/^([^\d]*\d{1,2}:\d{1,2}):\d{1,2}([^\d]*)$/, '$1$2');;
             }
-            else {
-                var _tags = false;
+            if (this.tags == true) {
+                _tags = _annotation.getTagTexts();
+            } else {
+                _tags = false;
             }
             var _data = {
                 id : _annotation.id,
@@ -609,6 +603,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
             };
@@ -631,10 +626,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);
                             }
                         }
@@ -643,37 +638,37 @@ 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");
+                _onselect = function () {
+                    _this.$.find('.Ldt-AnnotationsList-li').filter(function (e) { return e != _el; }).removeClass("selected");
                     _el.addClass("selected");
                 },
-                _onunselect = function() {
+                _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() {
-                    if (_this.filter_by_segments && _this.media.getTimeRange()){
-                        _ann_time = ( _annotation.begin + _annotation.end ) / 2;
-                        if ((_ann_time <= _this.media.getTimeRange()[0]) || (_ann_time >= _this.media.getTimeRange()[1])){
-                            _this.media.resetTimeRange()
+                    if (_this.filter_by_segments && _this.media.getTimeRange()) {
+                        _ann_time = (_annotation.begin + _annotation.end) / 2;
+                        if ((_ann_time <= _this.media.getTimeRange()[0]) || (_ann_time >= _this.media.getTimeRange()[1])) {
+                            _this.media.resetTimeRange();
                         }
                     }
                     _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);
             });
@@ -682,9 +677,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();
             }
         });
@@ -696,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);
@@ -763,57 +742,91 @@ 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";
                         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) {
                 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);
@@ -823,18 +836,23 @@ 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);
+                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 })))
+                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);
                         }
@@ -847,22 +865,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);
@@ -876,14 +894,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]) {
@@ -894,13 +912,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) {
@@ -912,104 +930,104 @@ IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
             }
         }
     }
-    
+
     return _list.length;
 };
 
-IriSP.Widgets.AnnotationsList.prototype.onDeleteClick = function(event){
-    _list = this.getWidgetAnnotations();
-    ann_id = event.target.dataset.annotation;
+IriSP.Widgets.AnnotationsList.prototype.onDeleteClick = function(event) {
+    var _list = this.getWidgetAnnotations();
+    var ann_id = event.target.dataset.annotation;
     delete_preview_$ = this.$.find(".Ldt-AnnotationsList-ul-ToDelete");
     delete_preview_$.html("");
-    _list = _list.filter(function(_annotation){
-        return _annotation.id == ann_id
-    })
+    _list = _list.filter(function(_annotation) {
+        return _annotation.id == ann_id;
+    });
     var _annotation = _list[0],
         _title = "",
         _creator = "",
         _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];
         }
         _creator = _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,
-            show_creator : this.show_creator,
-            creator : _creator,
-            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,
+        show_creator : this.show_creator,
+        creator : _creator,
+        tags : false,
+        l10n: this.l10n,
+        allow_annotations_deletion: false
+    };
+    _html = Mustache.to_html(this.annotationTemplate, _data);
+    delete_preview_$.html(_html);
+
+    this.$.find(".Ldt-AnnotationsList-ConfirmDelete").click(function() {
         _this.sendDelete(ann_id);
     });
-    
-    this.showScreen("Delete");    
-}
+
+    this.showScreen("Delete");
+};
 
 IriSP.Widgets.AnnotationsList.prototype.refreshHeader = function() {
-    var annotation_count_string = " (" + this.annotations_count +" "+this.annotations_count_header_string+")";
+    var annotation_count_string = " (" + this.annotations_count + " " + this.annotations_count_header_string + ")";
     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();
@@ -1019,36 +1037,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");
 
@@ -1057,93 +1075,90 @@ IriSP.Widgets.AnnotationsList.prototype.draw = function() {
     var _this = this;
     this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
     this.widget_$ = this.$.find(".Ldt-AnnotationsListWidget");
-    
-    if (this.widget_max_height){
-        this.widget_$.css("max-height", this.widget_max_height)
+    if (this.widget_max_height) {
+        this.widget_$.css("max-height", this.widget_max_height);
     }
-    
-    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();
@@ -1154,7 +1169,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();
@@ -1176,19 +1191,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",
@@ -1201,14 +1216,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();
     }
 };
diff --git a/src/widgets/BarSlider.css b/src/widgets/BarSlider.css
new file mode 100644
index 00000000..c304c7d3
--- /dev/null
+++ b/src/widgets/BarSlider.css
@@ -0,0 +1,111 @@
+/* */
+/* Slider Widget */
+
+.Ldt-BarSlider {
+    width: 100%;
+    height: 36px;
+    padding: 0;
+    margin: 0;
+    background-color: black;
+    background-image: none;
+    border: none;
+    position: relative;
+    border-radius: 0;
+}
+
+.Ldt-BarSlider .ui-slider-handle {
+    display: none;
+}
+
+.Ldt-BarSlider .ui-slider-range {
+    background-color: #fff !important;
+    position: absolute !important;
+    top: 14px;
+    left: 4px;
+    height: 8px;
+    width: 0;
+}
+
+.Ldt-BarSlider-Time {
+    position: absolute;
+    bottom: 32px;
+    background: #fff;
+    color: #000000;
+    border-radius: 0;
+    z-index: 8;
+    font-size: 10px;
+    width: 5em;
+    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: 0;
+    height: 8px;
+}
+.Ldt-BarSlider .rightarrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-color: transparent transparent transparent #ffffff;
+    border-width: 3px 0 3px 5px;
+}
+.Ldt-BarSlider .leftarrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-color: transparent transparent transparent #ffffff;
+    border-width: 3px 5px 3px 0;
+}
+.Ldt-BarSlider-currentbarhead {
+    position: absolute;
+    top: 15px;
+    left: 4px;
+}
+.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..8a80c061
--- /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 = 100 * _time / _this.media.duration;
+    this.$slider.slider("value", _time);
+    // Update bar position
+    this.$currentbar.css("width", pos + "%");
+    this.$currentbarhead.css("left", "calc(" + pos + "% + 4px)");
+};
+
+IriSP.Widgets.BarSlider.prototype.onMouseout = function () {
+    this.$time.hide();
+};
diff --git a/src/widgets/CocoController.css b/src/widgets/CocoController.css
new file mode 100644
index 00000000..98d59809
--- /dev/null
+++ b/src/widgets/CocoController.css
@@ -0,0 +1,77 @@
+/* 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-Sound-Mute {
+    background: url("img/coco_video_control_sound_mute.svg");
+}
+
+.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");
+}
+
+.Ldt-Fullscreen-Element {
+    width: 100%;
+    height: 100%;
+}
+
+.Ldt-CocoCtrl-Disabled {
+    display: none !important;
+}
diff --git a/src/widgets/CocoController.js b/src/widgets/CocoController.js
new file mode 100644
index 00000000..af6ff873
--- /dev/null
+++ b/src/widgets/CocoController.js
@@ -0,0 +1,174 @@
+/* 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 = {
+    // Selector for the widget that needs to be fullscreened
+    fullscreen_widget: undefined
+};
+
+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">'
+    + '   </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",
+        fullscreen: "Fullscreen mode"
+    },
+    fr: {
+        play_pause: "Lecture/Pause",
+        play: "Lecture",
+        pause: "Pause",
+        elapsed_time: "Temps écoulé",
+        total_time: "Durée totale",
+        fullscreen: "Mode plein écran"
+    }
+};
+
+IriSP.Widgets.CocoController.prototype.draw = function () {
+    var _this = this;
+    this.renderTemplate();
+    var fullscreenButton = this.$.find(".Ldt-CocoCtrl-Fullscreen-Button");
+
+    // Define blocks
+    this.$playButton = this.$.find(".Ldt-CocoCtrl-Play");
+    this.$searchBlock = this.$.find(".Ldt-CocoCtrl-Search");
+    this.$searchInput = this.$.find(".Ldt-CocoCtrl-SearchInput");
+    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
+    var fullscreen_event_name = IriSP.getFullscreenEventname();
+    if (fullscreen_event_name) {
+        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) {
+                if (IriSP.isFullscreen() && IriSP.getFullscreenElement() == widget[0]) {
+                    widget.addClass("Ldt-Fullscreen-Element");
+                } else {
+                    widget.removeClass("Ldt-Fullscreen-Element");
+                }
+            };
+        });
+    } else {
+        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();
+        _this.media.setMuted(!_this.media.getMuted());
+    });
+
+    this.timeDisplayUpdater(new IriSP.Model.Time(0));
+};
+
+/* Update the elapsed 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 () {
+    var widget = IriSP.jQuery(this.fullscreen_widget);
+    if (widget.length) {
+        if (IriSP.isFullscreen()) {
+            IriSP.setFullScreen(widget[0], false);
+        } else {
+            IriSP.setFullScreen(widget[0], true);
+        }
+    }
+};
+
+IriSP.Widgets.CocoController.prototype.playHandler = function () {
+    if (this.media.getPaused()) {
+        this.media.play();
+    } else {
+        this.media.pause();
+    }
+};
+
+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");
+    }
+};
diff --git a/src/widgets/CocoCreateAnnotation.css b/src/widgets/CocoCreateAnnotation.css
new file mode 100644
index 00000000..a2fa4f53
--- /dev/null
+++ b/src/widgets/CocoCreateAnnotation.css
@@ -0,0 +1,24 @@
+.Ldt-CocoCreateAnnotation-Form {
+    width: 100%;
+    font-family: Roboto;
+    font-size: 16px;
+    position: relative;
+}
+.Ldt-CocoCreateAnnotation-Text {
+    width: calc(100% - 32px);
+    position: relative;
+    left: 36px;
+}
+.Ldt-CocoCreateAnnotation-Timecode {
+    position: absolute;
+    font-size: 9px;
+    color: #999;
+    width: 4em;
+    border: none;
+    background-color: #fff;
+    background-color: rgba(255, 255, 255, 1);
+}
+.Ldt-CocoCreateAnnotation-Timecode-Active {
+    display: inline-block;
+    font-weight: bold;
+}
diff --git a/src/widgets/CocoCreateAnnotation.js b/src/widgets/CocoCreateAnnotation.js
new file mode 100644
index 00000000..e8f4fae0
--- /dev/null
+++ b/src/widgets/CocoCreateAnnotation.js
@@ -0,0 +1,211 @@
+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,
+    /* Function that should return the current group id (or "public" for public annotations) */
+    current_group: undefined
+};
+
+IriSP.Widgets.CocoCreateAnnotation.prototype.messages = {
+    en: {
+        type_description: "Enter a personal note...",
+        confirm_leave_page: "Your current note will be lost. Are you sure?"
+    },
+    fr: {
+        type_description: "Prenez une note personnelle...",
+        confirm_leave_page: "Votre note en cours va être perdue. Êtes-vous sûr ?"
+    }
+};
+
+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>' +
+    '</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("keyup 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);
+        };
+    });
+    this.onMediaEvent("pause", function () {
+        // Set focus on annotation zone
+        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.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());
+};
+
+IriSP.Widgets.CocoCreateAnnotation.prototype.pauseOnWrite = function () {
+    if (this.pause_on_write && !this.media.getPaused()) {
+        this.media.pause();
+    }
+};
+
+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
+        this.onSubmit();
+        return true;
+    }
+    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) {
+            // 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;
+};
+
+/**
+ * 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 */
+        _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
+     * */
+    _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 = "";
+
+    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;
+    }
+
+    _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.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();
+                }
+                _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;
+};
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%;
+}
diff --git a/src/widgets/Controller.js b/src/widgets/Controller.js
index 2584d210..3e191146 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 = "";
 };
@@ -13,7 +13,10 @@ IriSP.Widgets.Controller.prototype.defaults = {
     disable_ctrl_f: false,
     disable_fullscreen : true,
     always_show_search: false,
-    enable_quiz_toggle: undefined
+    // Selector for the widget that needs to be fullscreened
+    fullscreen_widget: undefined,
+    enable_quiz_toggle: undefined,
+    enable_add_question: false
 };
 
 IriSP.Widgets.Controller.prototype.template =
@@ -35,7 +38,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>'
@@ -83,7 +86,7 @@ IriSP.Widgets.Controller.prototype.messages = {
     }
 };
 
-IriSP.Widgets.Controller.prototype.draw = function() {
+IriSP.Widgets.Controller.prototype.draw = function () {
     var _this = this;
     this.renderTemplate();
 
@@ -94,34 +97,22 @@ 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"));
 
     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(null, this.enable_quiz_toggle);
     } 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"));
@@ -133,12 +124,15 @@ 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() {
-            if (IriSP.isFullscreen() && IriSP.getFullscreenElement() == _this.$[0]) {
-                _this.$.addClass("Ldt-Fullscreen-Element");
-            } else {
-                _this.$.removeClass("Ldt-Fullscreen-Element");
-            }
+        document.addEventListener(fullscreen_event_name, function () {
+            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");
+                }
+            };
         });
     };
 
@@ -149,15 +143,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();
     });
 
@@ -165,7 +159,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) {
@@ -174,13 +168,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")
@@ -188,27 +183,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) {
@@ -217,7 +212,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;
@@ -229,9 +224,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")
@@ -245,30 +240,37 @@ 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);
+IriSP.Widgets.Controller.prototype.toggleFullscreen = function () {
+    var widget = IriSP.jQuery(this.fullscreen_widget);
+    if (widget.length) {
+        if (IriSP.isFullscreen()) {
+            IriSP.setFullScreen(widget[0], false);
+        } else {
+            IriSP.setFullScreen(widget[0], true);
+        }
     }
 };
 
 //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() {
-    this.enable_quiz_toggle = !this.enable_quiz_toggle;
+IriSP.Widgets.Controller.prototype.toggleQuiz = function (event, 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
-    {
+    } 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");
@@ -276,7 +278,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 {
@@ -284,11 +286,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) {
@@ -301,42 +303,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;
@@ -347,7 +349,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;
diff --git a/src/widgets/CreateAnnotation.js b/src/widgets/CreateAnnotation.js
index f2eea61f..dbabc407 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,54 @@ 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 */
+
+    _annotation.created = new Date(); /* Annotation creation date */
+    _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();
-    }if (this.project_id != ""){
-    	/* Project id, only if it's been specifiec in the config */
-    	_annotation.project_id = this.project_id;
+    } else {
+        /* Else we use the first line of the description as title */
+        _annotation.title = _annotation.description.split("\n")[0];
     }
-    _annotation.created = new Date(); /* Annotation creation date */
-    _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); /* Description field */
-   
+
+    if (this.project_id != "") {
+        /* Project id, only if it's been specifiec in the config */
+        _annotation.project_id = this.project_id;
+    }
+
     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 +562,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 +579,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 +607,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 +623,3 @@ IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() {
     };
     return false;
 };
-
diff --git a/src/widgets/EnrichedPlan.css b/src/widgets/EnrichedPlan.css
index d7b44287..cd07b16a 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 {
@@ -9,20 +11,33 @@
     transition: max-height .6s;
 }
 
-.Ldt-EnrichedPlan-SlideItem.filtered_out {
-    max-height: 0px;
+.filtered_out {
+    max-height: 0;
+    position: absolute;
     overflow: hidden;
 }
 
-.Ldt-EnrichedPlan-SlideTimecode {
+.Ldt-EnrichedPlan-SlideTimecode,
+.Ldt-EnrichedPlan-NoteTimecode {
     display: inline-block;
     width: 24px;
     color: #999 !important;
     font-size: 9px !important;
-    width: 24px;
     vertical-align: top;
 }
 
+.Ldt-EnrichedPlan-SlideNotes {
+    position: relative;
+}
+
+.Ldt-EnrichedPlan-NoteTimecode {
+    left: -52px;
+    position: absolute;
+    font-family: Roboto !important;
+    padding-top: 8px;
+    display: none;
+}
+
 .Ldt-EnrichedPlan-SlideThumbnail {
     display: inline-block;
     width: 180px;
@@ -40,32 +55,121 @@
 }
 
 .Ldt-EnrichedPlan-SlideContent {
-    display: inline-block;
+    display: inline-flex;
+    flex-direction: column;
     width: calc(100% - 220px);
     transition: width .4s;
 }
 
-.Ldt-EnrichedPlan-SlideThumbnail.filtered_out + .Ldt-EnrichedPlan-SlideContent {
-    width: calc(100% - 40px);
+.Ldt-EnrichedPlan-SlideThumbnail.filtered_out + .Ldt-EnrichedPlan-SlideContent,
+.Ldt-EnrichedPlan-FlatMode .Ldt-EnrichedPlan-SlideContent {
+    width: calc(100% - 60px);
+    margin-left: 28px;
+}
+
+.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-BarContainer {
+    position: relative;
+    height: 20px;
+    background-color: #999;
+    padding: 0 4px;
+    -webkit-user-select: initial;
+    user-select: initial;
+}
+
+.Ldt-EnrichedPlan-Bar-Slide,
+.Ldt-EnrichedPlan-Bar-Note {
+    width: 0;
+    height: 100%;
+    border-left: 1px solid #fff;
+    position: absolute;
+}
+.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;
+}
+
+.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;
+}
+
+.Ldt-EnrichedPlan-SlideDescription {
+    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/slide_content_show.svg) center/100% no-repeat;
+    margin: 1px;
+    border: 1px solid grey;
+    width: 10px;
+    height: 10px;
+    cursor: zoom-in;
+}
+
+.Ldt-EnrichedPlan-Expanded .Ldt-EnrichedPlan-SlideExpander {
+    background: url(img/slide_content_hide.svg) center/100% no-repeat;
 }
 
 .Ldt-EnrichedPlan-SlideTitle {
     display: inline-block;
     font-size: 14px;
-    width: 100%;
-    height: 1em;
+    width: calc(100% - 16px);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
 .Ldt-EnrichedPlan-SlideTitle1 {
+    font-family: Roboto;
     text-transform: uppercase;
     font-size: 13px;
-    font-weight: 600;
+    font-weight: bold;
+}
+
+.Ldt-EnrichedPlan-SlideTitle2 {
+    font-size: 14px;
+}
+
+.Ldt-EnrichedPlan-SlideTitle3 {
+    font-size: 14px;
+}
+
+[data-id=whole] .Ldt-EnrichedPlan-SlideTitle,
+[data-id=whole] .Ldt-EnrichedPlan-SlideExpander {
+    display: none;
+}
+[data-id=whole] .Ldt-EnrichedPlan-SlideTimecode {
+    color: #fff !important;
 }
 
 .Ldt-EnrichedPlan-Note {
+    position: relative;
     font-weight: normal;
     font-size: 14px;
     font-family: Roboto-italic;
@@ -74,45 +178,98 @@
     background-color: #eee;
 }
 
-.Ldt-EnrichedPlan-Note-Teacher {
-    color: #e5007e;
+.Ldt-EnrichedPlan-Note-Link {
+    text-decoration: none;
+    color: inherit;
+}
+
+.Ldt-EnrichedPlan-Note-Featured,
+.Ldt-EnrichedPlan-Note-Link.Ldt-EnrichedPlan-Note-Featured {
+    color: #e5007e !important;
     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;
 }
+.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;
+}
+.Ldt-EnrichedPlan-Bar-Note.Ldt-EnrichedPlan-Note-Featured {
+    border-color: #e5007e;
+}
+.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;
     word-wrap: break-word;
 }
 
-.Ldt-EnrichedPlan-Note-Author {
+.Ldt-EnrichedPlan-Note-Author,
+.Ldt-EnrichedPlan-Comment-Author {
     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-Content {
-    margin-top: 37px;
+.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;
+    height: 100%;
 }
 
 .Ldt-EnrichedPlan-Controls {
     height: 36px;
-    padding: 9px 0px 6px 0px;
+    padding: 9px 0 5px 0;
     border-bottom: 1px solid #000;
-    overflow-y: hidden;
-    overflow-x: hidden;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
     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;
@@ -124,12 +281,59 @@
     position: relative;
 }
 .Ldt-EnrichedPlan-Controls .Ldt-EnrichedPlan-Search-Input {
-    float: right;
     font-family: Roboto;
     font-size: 16px;
-    width: calc(100% - 340px);
+    flex: 1;
+    outline: none;
+    margin-left: 12px;
 }
 
+.Ldt-EnrichedPlan-ControlMenu {
+    margin: 0;
+    padding: 0;
+    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 {
+    position: absolute;
+    left: -9999px;
+}
+
+.Ldt-EnrichedPlan-ControlMenuHome + ul {
+    position: absolute;
+    display: none;
+}
+.Ldt-EnrichedPlan-ControlMenuHome:checked + ul {
+    display: flex;
+    flex-direction: column;
+    width: 100px;
+    box-shadow: grey 2px 2px 2px;
+}
+.Ldt-EnrichedPlan-ControlMenu ul {
+  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-Slide.non_matching,
 .Ldt-EnrichedPlan-Note.non_matching {
     display: none;
 }
@@ -137,6 +341,13 @@
 .Ldt-EnrichedPlan-Control- {
     font-style: normal;
 }
+.Ldt-EnrichedPlan-Control-Label {
+    cursor: pointer;
+}
+.Ldt-EnrichedPlan-Control-Label:hover {
+    background-color: #ddd;
+}
+
     /**********************************************************/
 /* Base for label styling */
 .Ldt-EnrichedPlan-Control-Checkbox:not(:checked),
@@ -148,7 +359,6 @@
 .Ldt-EnrichedPlan-Control-Checkbox:checked + label {
   position: relative;
   padding-left: 20px;
-  cursor: pointer;
 }
 
 /* checkbox aspect */
@@ -156,18 +366,26 @@
 .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';
+    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;
-    font-size: 20px;
+    top: 3px;
+    left: 1px;
     transition: all .2s;
 }
 /* checked mark aspect changes */
@@ -198,10 +416,121 @@
 
 /* hover style just for information */
 label:hover:before {
-  border: 1px solid #4778d9!important;
+  border: 1px solid #4778d9 !important;
 }
 
 /* hover style just for information */
 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;
+    width: 24px;
+    height: 24px;
+    margin: 5px;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.Ldt-EnrichedPlan-Comment-Edit {
+    position: absolute;
+    right: 2px;
+}
+
+.Ldt-EnrichedPlan-Comment-Edit,
+.Ldt-EnrichedPlan-EditControl-Edit {
+    background-image: url(img/notes_edit.svg);
+}
+
+.Ldt-EnrichedPlan-EditControl-Featured {
+    background-image: url(img/notes_featured.svg);
+}
+.Ldt-EnrichedPlan-EditControl-Delete {
+    background-image: url(img/notes_delete.svg);
+}
+
+.Ldt-EnrichedPlan-Selected-Timecode,
+.Ldt-EnrichedPlan-Note-Own:hover {
+    background-color: #e9e9e9;
+    min-height: 34px;
+}
+
+.Ldt-EnrichedPlan-EditControl {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.Ldt-EnrichedPlan-Selected-Timecode .Ldt-EnrichedPlan-EditControl,
+.Ldt-EnrichedPlan-Note:hover .Ldt-EnrichedPlan-EditControl {
+    display: inline-block;
+}
+
+.adminactions {
+    display: none;
+}
+
+.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);
+}
+
+.Ldt-EnrichedPlan-Comments {
+    display: none;
+}
+.Ldt-EnrichedPlan-Selected-Timecode .Ldt-EnrichedPlan-Comments {
+    display: inline-flex;
+    flex-direction: column;
+    width: 100%;
+    padding-top: 10px;
+    padding-left: 1em;
+}
+
+.Ldt-EnrichedPlan-Comment {
+    background-color: #fafafa;
+    margin: 3px;
+    min-height: 32px;
+}
+
+.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 c26c2b82..a9d5b706 100644
--- a/src/widgets/EnrichedPlan.js
+++ b/src/widgets/EnrichedPlan.js
@@ -1,145 +1,558 @@
-/* TODO
-- add callbacks
- */
-
-IriSP.Widgets.EnrichedPlan = function(player, config) {
+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});
+    this.throttledAutoscroll = IriSP._.throttle(function (annotation) {
+        _this.do_autoscroll(annotation);
+    }, 800, {leading: true});
+
+};
 
 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?",
+        featured_notes: "Featured notes",
+        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: "Filter...",
+        whole_video: "Whole video",
+        expand_slide: "Show the slide content",
+        comment_count: "comment(s)",
+        new_comment: "Comment on this note"
+    },
+    fr: {
+        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.",
+        quiz_notes: "Questions de quiz",
+        popup_tabconfig: "Configurer les onglets",
+        slides: "Diapo",
+        search: "Filtrer...",
+        whole_video: "Vidéo entière",
+        expand_slide: "Montrer le contenu de la diapo",
+        comment_count: "commentaire(s)",
+        new_comment: "Commentez cette note"
+    }
+};
+
 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: [],
     show_controls: true,
     show_slides: true,
-    show_teacher_notes: true,
+    show_featured_notes: true,
     show_other_notes: true,
-    show_own_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,
+    is_authenticated: 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, public, featured
+    action_url: function (action, elementid) { return ""; },
+    bar_container: undefined
+};
 
 IriSP.Widgets.EnrichedPlan.prototype.template =
-      '<div class="Ldt-EnrichedPlan-Container">'
-    + '{{#show_controls}}<form class="Ldt-EnrichedPlan-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">'
-    + ' <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>'
-    + ' <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>'
-    + ' <input class="Ldt-EnrichedPlan-Search-Input" type="search" incremental placeholder="Recherchez"/>'
-    + '</form>{{/show_controls}}'
+      '<div class="Ldt-EnrichedPlan-Container {{#flat_mode}}Ldt-EnrichedPlan-FlatMode{{/flat_mode}}">'
+    + '<form class="Ldt-EnrichedPlan-Controls">'
+    + '{{#show_controls}}'
+    + '<div class="Ldt-EnrichedPlan-ControlMenu">'
+    + ' <label for="{{ prefix }}control_menu" class="Ldt-EnrichedPlan-Toggle"></label>'
+    + ' <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>'
+    + '  <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">'
+    + '  <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}}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">'
+    + '  <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>'
+    + '</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>'
     + '</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 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"><img title="{{ begin }} - {{ atitle }}" src="{{ 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 }}">{{ 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>'
     + '</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.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}} {{#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> \
+  {{#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}}\
+  {{#show_comments}}\
+  {{#comments.length}}\
+  <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}}\
+    <div class="Ldt-EnrichedPlan-Comment" data-id="{{id}}" data-date="{{modified}}" data-creator="{{creator}}">\
+      <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>\
+      {{/can_edit}}\
+    </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>\
+  {{/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>';
 
-IriSP.Widgets.EnrichedPlan.prototype.draw = function() {
+
+/**
+ * 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)
+    var _slides = this.get_slides();
+
     // 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) {
+    _this.prefix = IriSP.generateUuid();
+    _this.renderTemplate();
+    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');
+
+    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-Tabconfig", function () {
+        _this.player.trigger("Player.tabconfig");
+    });
+
+    _this.container.on("click", ".Ldt-EnrichedPlan-SlideExpander", function () {
+        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) {
+            return s != "Ldt-EnrichedPlan-Control-Checkbox" && s.indexOf("Ldt-EnrichedPlan") == 0;
+        }));
+        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");
+                }
+                _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);
+            }
+        }
+    });
+
+    _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 }))) {
+            _this.source.getAnnotations().removeElement(_annotation);
+            _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) {
+        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();
+        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 === "") {
+            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,
+            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");
+            }
+        });
+    };
+
+    _this.container.on("click", ".level_incr", function () {
+        update_level(this, +1);
+    }).on("click", ".level_decr", function () {
+        update_level(this, -1);
+    });
+
+    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");
+            if (_this.bar) {
+                _this.bar.find(".non_matching").removeClass("non_matching");
+            }
+        } else {
+            _this.content.find(".Ldt-EnrichedPlan-Slide").each(function () {
+                var node = IriSP.jQuery(this);
+                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");
+                        }
+                        // 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');
+                                    }
+                                }
+                            });
+                        });
+                    }
+                });
+            });
+        }
+    });
+};
+
+IriSP.Widgets.EnrichedPlan.prototype.get_slides = function () {
+    var _slides = this.flat_mode ? [] : this.getWidgetAnnotations().sortBy(function (_annotation) {
         return _annotation.begin;
     });
-    // All other annotations
-    var _annotations = this.media.getAnnotations().filter( function (a) {
+    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;
+        _slides = [ {
+            id: "whole",
+            title: title,
+            begin: 0,
+            end: this.media.duration,
+            media: this.media,
+            thumbnail: "",
+            description: "",
+            getTitleOrDescription: function () {
+                return title;
+            }
+        } ];
+    };
+    return _slides;
+};
+
+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) {
+    }).sortBy(function (_annotation) {
         return _annotation.begin;
     });
 
-    // Reference annotations in each slide: assume that end time is
+    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) {
-        slide.annotations = _annotations.filter( function (a) {
-            return a.begin >= slide.begin && a.begin <= slide.end;
+    _slides.forEach(function (slide) {
+        slide.annotations = _annotations.filter(function (a) {
+            return a.begin >= slide.begin && a.begin < slide.end;
         });
     });
 
-    _this.renderTemplate();
-    var container = _this.$.find('.Ldt-EnrichedPlan-Container');
-    var content = _this.$.find('.Ldt-EnrichedPlan-Content');
+    if (this.container === undefined) {
+        // Initialization, render the container template
+        var els = _this.init_component();
+    } else {
+        // Update: empty the container
+        // (Should do an incremental update, TBD)
+        _this.content.empty();
+        if (_this.bar) {
+            _this.bar.empty();
+        }
+    }
+
+    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
+    // Returns the note category: Own, Other, Featured
     function note_category(a) {
-        return a.title.indexOf('Anonyme') < 0 ? "Own" : "Other";
+        var category = a.meta["coco:category"] || 'other';
+        if (a.getAnnotationType().title == 'Quiz') {
+            category = "quiz";
+        };
+        return capitalize(category);
     };
 
-    _slides.forEach(function(slide) {
-        var _html = Mustache.to_html(_this.slideTemplate, {
+    var annotationBarData = [];
+    _slides.forEach(function (slide) {
+        var slideData = {
             id : slide.id,
-            atitle : IriSP.textFieldHtml(slide.title),
-            level: slide.content.level || 1,
+            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,
+            width: 100 * (slide.end.milliseconds - slide.begin.milliseconds) / _this.media.duration,
             thumbnail: slide.thumbnail,
             show_slides: _this.show_slides,
-            notes: slide.annotations.map( function (a) {
-                return Mustache.to_html(_this.annotationTemplate, {
+            is_admin: _this.is_admin,
+            admin_url: _this.action_url('admin', slide.id),
+            notes: slide.annotations.map(function (a) {
+                var cat = note_category(a);
+                var annData = {
                     id: a.id,
-                    text: IriSP.textFieldHtml(a.description || a.title),
-                    author: a.creator,
+                    annotation_id: a.id,
+                    selected: (a.id == selected_annotation),
+                    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),
+                    creator: a.creator,
                     begin: a.begin.toString(),
-                    begintc: a.begin.milliseconds,
-                    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' : ''
-                });
+                    begin_ms: a.begin.milliseconds,
+                    end_ms: a.end.milliseconds,
+                    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",
+                    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)
+                                || (a.meta['coco:featured'] && !_this.show_featured_notes)
+                               || (cat == 'Quiz' && !_this.show_quiz_notes)
+                              ) ? 'filtered_out' : ''
+                };
+                if (_this.bar) {
+                    annotationBarData.push(IriSP.jQuery(Mustache.to_html(_this.annotationBarTemplate, annData)));
+                }
+                return Mustache.to_html(_this.annotationTemplate, annData);
             }).join("\n")
-        });
-        var _el = IriSP.jQuery(_html);
-        content.append(_el);
+        };
+        _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);
+            });
+        }
     });
+};
 
-    container.on("click", "[data-timecode]", function () {
-        _this.media.setCurrentTime(Number(this.dataset.timecode));
-    });
+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;
+};
 
-    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 ($(this).is(':checked')) {
-                content.find(".Ldt-EnrichedPlan-Slide ." + classname).removeClass("filtered_out");
-            } else {
-                content.find(".Ldt-EnrichedPlan-Slide ." + classname).addClass("filtered_out");
-             }
-        }
+IriSP.Widgets.EnrichedPlan.prototype.draw = function () {
+    var _this = this;
+    _this.init_component();
+    _this.update_content();
 
+    _this.onMdpEvent("AnnotationsList.refresh", function () {
+        _this.throttledRefresh(false);
     });
-
-    container.find(".Ldt-EnrichedPlan-Search-Input").on("search", function () {
-        var q = $(this).val().toLocaleLowerCase();
-        if (q === "") {
-            // Show all
-            content.find(".Ldt-EnrichedPlan-Note").removeClass("non_matching");
-        } else {
-            $(".Ldt-EnrichedPlan-Note").each( function () {
-                var node = $(this);
-                if (node.text().toLocaleLowerCase().indexOf(q) > -1) {
-                    node.removeClass("non_matching");
-                } else {
-                    node.addClass("non_matching");
-                }
-            });
-        }
+    _this.media.on("enter-annotation", function(_a) {
+        _this.throttledAutoscroll(_a);
     });
 };
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 8dbe729a..96341877 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>';
 
@@ -31,12 +31,21 @@ 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() {
             _this.update(_a);
         });
     });
-    if (_annotations.length)
+    if (_annotations.length) {
         _this.update(_annotations[0]);
-}
+    }
+};
+
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();
     }
diff --git a/src/widgets/Quiz.css b/src/widgets/Quiz.css
index bc8553c1..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;
@@ -84,37 +91,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;
@@ -192,18 +197,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 b3d9c5b5..ed981c2e 100644
--- a/src/widgets/Quiz.js
+++ b/src/widgets/Quiz.js
@@ -1,25 +1,27 @@
-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:""
-}
+    userid:"",
+    enable_add_question: false
+};
 
 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">'
                                         + '  <h1 class="Ldt-Quiz-Title">{{question}}</h1>'
+                                        + '  <div class="Ldt-Quiz-Result">Bonne réponse</div>'
                                         + '  <div class="Ldt-Quiz-Questions">'
                                         + '  </div>'
                                         + '</div>'
@@ -36,107 +38,106 @@ 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>';
+                                        + '</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")
+            .addClass(".Ldt-Quiz-Questions-" + annotation.content.data.type)
+            .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.player.trigger("QuizCreator.skip");
+            _this.close_quiz();
+        });
+    }
 };
 
-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 +145,96 @@ 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")
+                .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) {
-		$(".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) {
+        _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" : "#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" : "#5bce5b"});
+        this.correct[this.annotation.id] = 1;
+    }
+
+    $(".Ldt-Quiz-Result").show(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.close_quiz = function () {
+    var _this = this;
+    _this.hide();
+    $(".Ldt-Pause-Add-Question").hide();
+    _this.$.find(".Ldt-Quiz-Result").removeClass(".Ldt-Quiz-Result-Correct").removeClass(".Ldt-Quiz-Result-Incorrect").hide();
+    // Resume the current video
+    _this.media.play();
+};
+
+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,161 +242,149 @@ 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 && this.enable_add_question) {
+            $(".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);
+    if (!this.enable_add_question) {
+        $(".Ldt-Pause-Add-Question").hide();
+    }
 
-	$(".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() {
-                $(this).removeClass("button_highlight").dequeue();
-            });
-		}else{
-			vote_prop = "skipped_vote";
-			vote_val = 0;
-		}
+    //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.close_quiz();
+        _this.player.trigger("QuizCreator.skip");
+    });
 
-		_this.submit(_this.user, _this.userid, _this.annotation.id, vote_prop, vote_val);
+    $(".Ldt-Quiz-Votes-Buttons input[type=\"button\"], .Ldt-Quiz-Votes-Buttons a").click({media: this.media}, function (event) {
+        var vote_prop, vote_val;
 
-		//Resume the current video
-		event.data.media.play();
+        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;
 
-		_this.hide();
-		$(".Ldt-Pause-Add-Question").hide();
+            $(".Ldt-Ctrl-Quiz-Create").addClass("button_highlight").delay(5000).queue(function () {
+                $(this).removeClass("button_highlight").dequeue();
+            });
+        } else {
+            vote_prop = "skipped_vote";
+            vote_val = 0;
+        }
 
-		_this.player.trigger("QuizCreator.skip");
-	});
+        _this.submit(_this.user, _this.userid, _this.annotation.id, vote_prop, vote_val);
+
+        _this.close_quiz();
+        _this.player.trigger("QuizCreator.skip");
+    });
 
     _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) {
+IriSP.Widgets.UniqueChoiceQuestion = function (annotation) {
     this.annotation = 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
-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);
         }
     });
-}
+};
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 */
 };
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;
     });
-
 };
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;
 }
diff --git a/src/widgets/SlidePreview.js b/src/widgets/SlidePreview.js
index 0b66eaa6..fcb268ec 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.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) {
+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),
+            title : IriSP._.escape(_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);
diff --git a/src/widgets/SlideVideoPlayer.css b/src/widgets/SlideVideoPlayer.css
index 00d86632..71d6dae0 100644
--- a/src/widgets/SlideVideoPlayer.css
+++ b/src/widgets/SlideVideoPlayer.css
@@ -8,8 +8,11 @@
 .Ldt-SlideVideoPlayer {
     width: 100%;
     max-width: 100%;
+}
+
+.Ldt-SlideVideoPlayer-video video {
+    width: 100%;
     height: 100%;
-    max-height: 100%;
 }
 
 .Ldt-SlideVideoPlayer-pip-main {
@@ -23,34 +26,95 @@
     z-index: 1;
 }
 
+.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%;
+    width: 30% !important;
     height: 30%;
+    z-index: 3;
+    background-color: #fff;
+    bottom: 2px;
     right: 2px;
+    border: 1px solid #999;
+    box-shadow: #999 2px 2px 2px;
+    opacity: .5;
+}
+
+.Ldt-SlideVideoPlayer-pip-br {
     bottom: 2px;
-    z-index: 3;
+    right: 2px;
+}
+.Ldt-SlideVideoPlayer-pip-bl {
+    left: 2px;
+    bottom: 2px;
+}
+.Ldt-SlideVideoPlayer-pip-tr {
+    top: 2px;
+    right: 2px;
+}
+.Ldt-SlideVideoPlayer-pip-tl {
+    top: 2px;
+    left: 2px;
 }
 
 .Ldt-SlideVideoPlayer h2 {
     display: none;
 }
-.Ldt-SlideVideoPlayer-pip-menu {
+.Ldt-SlideVideoPlayer-pip-menu-toggle {
     position: absolute;
-    top: 0px;
-    right: 0px;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
     z-index: 10;
+    background-image: url(img/pip_toggle.svg);
     display: none;
 }
-.Ldt-SlideVideoPlayer-pip-pip:hover .Ldt-SlideVideoPlayer-pip-menu {
-    background-color: #000;
-    opacity: .5;
+.Ldt-SlideVideoPlayer-pip-pip:hover .Ldt-SlideVideoPlayer-pip-menu-toggle {
+    opacity: .8;
     display: inline-block;
 }
 
-.Ldt-SlideVideoPlayer-pip-menu-toggle {
-    width: 18px;
-    height: 18px;
-    cursor: pointer;
-    background-image: url(img/pip_toggle.svg);
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.Ldt-SlideVideoPlayer-pip-menu-toggle-main {
+    top: 50%;
+    top: calc(50% - 9px);
+    left: 50%;
+    left: calc(50% - 9px);
+}
+.Ldt-SlideVideoPlayer-hidden {
+    display: none;
 }
diff --git a/src/widgets/SlideVideoPlayer.js b/src/widgets/SlideVideoPlayer.js
index 4a0313f3..5609d8ae 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"
 };
 
@@ -43,13 +43,21 @@ 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-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><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);
+        });
         _this.$.on("click", ".Ldt-SlideVideoPlayer-pip-menu-toggle", function () {
-            _this.toggleMainDisplay();
+            _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");
+        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
@@ -73,7 +81,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') {
@@ -83,4 +91,18 @@ 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) {
+    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);
+};
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);
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>
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_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
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>
diff --git a/src/widgets/img/hamburger.svg b/src/widgets/img/hamburger.svg
new file mode 100644
index 00000000..fd7cc888
--- /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 stroke="#000" fill="#000" id="menu-icon" d="M231,52H25v-36h206z M231,112H25v-36h206z M231,174H25v-36h206" />
+</svg>
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..53161d9d
--- /dev/null
+++ b/src/widgets/img/icon_group.svg
@@ -0,0 +1,22 @@
+<?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
new file mode 100644
index 00000000..52a9e554
--- /dev/null
+++ b/src/widgets/img/icon_public.svg
@@ -0,0 +1,29 @@
+<?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>
+
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>
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>
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
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 baa907a1..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="5.0797176mm"
-   height="5.0799999mm"
-   viewBox="0 0 17.998999 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>
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>
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>