# HG changeset patch
# User cavaliet
# Date 1388677225 -3600
# Node ID 3ab36f402b0c851c8afbe594314731359fd91d03
# Parent  919e362b9db1d234d0bac5c53524bf3cd2ff70d8
update widgets after enhance in annotation platform.

diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/AdaptivePlayer.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/AdaptivePlayer.js	Thu Jan 02 16:40:25 2014 +0100
@@ -0,0 +1,33 @@
+IriSP.Widgets.AdaptivePlayer = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.AdaptivePlayer.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.AdaptivePlayer.prototype.defaults = {
+    mime_type: "video/mp4",
+    normal_player: "HtmlPlayer",
+    fallback_player: "JwpPlayer"
+};
+
+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 == "maybe" || _canPlayType == "probably") ? 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]];
+        }
+    }
+
+    this.insertSubwidget(this.$, _opts);
+    
+};
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Annotation.css
--- a/src/widgets/Annotation.css	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Annotation.css	Thu Jan 02 16:40:25 2014 +0100
@@ -23,6 +23,11 @@
     font-weight: bold;
 }
 
+.Ldt-Annotation-Description {
+    max-height: 150px;
+    overflow: auto;
+}
+
 .Ldt-Annotation-Cleared {
     clear: both;
 }
@@ -54,6 +59,11 @@
 
 .Ldt-Annotation-Title, .Ldt-Annotation-MashupMedia {
     color: #0068c4;
+    text-decoration: none;
+}
+
+.Ldt-Annotation-Type {
+    color: #8080A0;
 }
 
 .Ldt-Annotation-Time {
@@ -62,6 +72,7 @@
 
 .Ldt-Annotation-Inner p {
     font-size: 12px;
+    line-height: 16px;
 }
 
 .Ldt-Annotation-Label {
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Annotation.js
--- a/src/widgets/Annotation.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Annotation.js	Thu Jan 02 16:40:25 2014 +0100
@@ -13,29 +13,36 @@
     fr: {
         watching: "Je regarde ",
         on_site: " sur ",
-        tags_: "Mots-clés&nbsp;:",
-        description_: "Description&nbsp;:",
-        excerpt_from: "Extrait de&nbsp;:"
+        tags_: "Mots-clés\u00a0:",
+        description_: "Description\u00a0:",
+        creator_: "Créé par\u00a0:",
+        excerpt_from: "Extrait de\u00a0:",
+        untitled: "Segment sans titre"
     },
     en: {
         watching: "I'm watching ",
         on_site: " on ",
         tags_: "Keywords:",
         description_: "Description:",
-        excerpt_from: "Excerpt from:"
+        creator_: "Created by\u00a0:",
+        excerpt_from: "Excerpt from:",
+        untitled: "Untitled segment"
     }
-}
+};
 
 IriSP.Widgets.Annotation.prototype.template =
-    '<div class="Ldt-Annotation-Widget {{#show_top_border}}Ldt-Annotation-ShowTop{{/show_top_border}}">'
+    '{{#show_arrow}}<div class="Ldt-Annotation-Arrow"></div>{{/show_arrow}}'
+    + '<div class="Ldt-Annotation-Widget {{^show_arrow}}Ldt-Annotation-ShowTop{{/show_arrow}}">'
     + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty{{#start_minimized}} Ldt-Annotation-Minimized{{/start_minimized}}">'
     + '<div class="Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-MaxMinButton"></div>'
-    + '<div class="Ldt-Annotation-Social Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></div>'
-    + '<h3 class="Ldt-Annotation-HiddenWhenEmpty"><span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time">'
-    + '( <span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span> )</span></h3>'
-    + '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time">'
-    + '( <span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span> )</span></h3>'
-    + '<div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Description-Block"><div class="Ldt-Annotation-Label">{{l10n.description_}}</div>'
+    + '{{#show_social}}<div class="Ldt-Annotation-Social Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></div>{{/show_social}}'
+    + '<h3 class="Ldt-Annotation-HiddenWhenEmpty">{{#show_annotation_type}}<span class="Ldt-Annotation-Type"></span> » {{/show_annotation_type}}<a class="Ldt-Annotation-Title" href="#"></a> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">'
+    + '(<span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span>)</span></h3>'
+    + '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">'
+    + '(<span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span>)</span></h3>'
+    + '<div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Creator-Block"><div class="Ldt-Annotation-Label">{{l10n.creator_}}</div>'
+    + '{{#show_creator}}<p class="Ldt-Annotation-Labelled Ldt-Annotation-Creator"></p></div>'
+    + '<div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Description-Block"><div class="Ldt-Annotation-Label">{{l10n.description_}}</div>{{/show_creator}}'
     + '<p class="Ldt-Annotation-Labelled Ldt-Annotation-Description"></p></div>'
     + '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Cleared">'
     + '<div class="Ldt-Annotation-Label">{{l10n.tags_}}</div><ul class="Ldt-Annotation-Labelled Ldt-Annotation-Tags"></ul>'
@@ -43,113 +50,169 @@
 
 IriSP.Widgets.Annotation.prototype.defaults = {
     annotation_type : "chap",
-    start_minimized: true,
-    show_top_border : false,
-    site_name : "Lignes de Temps"
-}
+    start_minimized: false,
+    show_arrow : true,
+    show_creator: true,
+    arrow_position: .5,
+    site_name : "Lignes de Temps",
+    search_on_tag_click: true,
+    show_social: true,
+    show_annotation_type: false
+};
 
 IriSP.Widgets.Annotation.prototype.draw = function() {
+    
+    var _this = this,
+        currentAnnotation;
+    
+    function timeupdate(_time) {
+        var _list = _this.getWidgetAnnotationsAtTime();
+        if (!_list.length) {
+            _this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty");
+            if (_this.arrow) {
+                _this.arrow.moveToTime(_time);
+            }
+            _this.bounds = [ _time, _time ];
+            _this.sendBounds();
+        }
+    }
+    
+    function highlightTitleAndDescription() {
+        if (!currentAnnotation) {
+            return;
+        }
+        var title = currentAnnotation.title,
+            description = currentAnnotation.description.replace(/(^\s+|\s+$)/g,''),
+            rx = (currentAnnotation.found ? (_this.source.getAnnotations().regexp || false) : false);
+        _this.$.find(".Ldt-Annotation-Title").html(IriSP.textFieldHtml(title,rx)  || "(" + _this.l10n.untitled + ")");
+        if (description) {
+            _this.$.find(".Ldt-Annotation-Description-Block").removeClass("Ldt-Annotation-EmptyBlock");
+            _this.$.find(".Ldt-Annotation-Description").html(IriSP.textFieldHtml(description,rx));
+        } else {
+            _this.$.find(".Ldt-Annotation-Description-Block").addClass("Ldt-Annotation-EmptyBlock");
+        }
+    }
+    
+    function drawAnnotation(_annotation) {
+        currentAnnotation = _annotation;
+        var _url = (typeof _annotation.url !== "undefined" 
+                ? _annotation.url
+                : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id)),
+            _text = _this.l10n.watching + _annotation.title + (_this.site_name ? _this.l10n.on_site + _this.site_name : ''),
+            _tags = _annotation.getTags(),
+            _tagblock = _this.$.find(".Ldt-Annotation-Tags");
+        _tagblock.empty();
+        if (_tags.length) {
+            _this.$.find(".Ldt-Annotation-Tags-Block").removeClass("Ldt-Annotation-EmptyBlock");
+            _tags.forEach(function(_tag) {
+                var _trimmedTitle =  _tag.title.replace(/(^\s+|\s+$)/g,'');
+                if (_trimmedTitle) {
+                    var _el = IriSP.jQuery('<li class="Ldt-Annotation-TagLabel"></li>').append(IriSP.jQuery('<span>').text(_trimmedTitle));
+                    _el.click(function() {
+                        if (_this.search_on_tag_click) {
+                            _this.source.getAnnotations().search(_trimmedTitle);
+                        }
+                        _tag.trigger("click");
+                    });
+                    _tagblock.append(_el);
+                }
+            });
+        } else {
+            _this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-EmptyBlock");
+        }
+        highlightTitleAndDescription();
+        if (_this.show_creator) {
+             _this.$.find(".Ldt-Annotation-Creator").text(_annotation.creator);
+        }
+        if (_this.show_annotation_type) {
+            _this.$.find(".Ldt-Annotation-Type").text(_annotation.getAnnotationType().title);
+        }
+        _this.$.find(".Ldt-Annotation-Begin").text(_annotation.begin.toString());
+        _this.$.find(".Ldt-Annotation-End").text(_annotation.end.toString());
+        if (_annotation.elementType === "mashedAnnotation") {
+            _this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-isMashup");
+            _this.$.find(".Ldt-Annotation-MashupMedia").text(_annotation.getMedia().title);
+            _this.$.find(".Ldt-Annotation-MashupBegin").text(_annotation.annotation.begin.toString());
+            _this.$.find(".Ldt-Annotation-MashupEnd").text(_annotation.annotation.end.toString());
+        } else {
+            _this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-isMashup");
+        }
+        if (typeof _this.socialWidget !== "undefined") {
+            _this.socialWidget.updateUrls(_url, _text);
+        } else {
+            setTimeout(function() {
+                if (typeof _this.socialWidget !== "undefined") {
+                    _this.socialWidget.updateUrls(_url, _text);
+                }
+            },800);
+        }
+        _this.$.find(".Ldt-Annotation-Inner").removeClass("Ldt-Annotation-Empty");
+        _this.bounds = [ _annotation.begin, _annotation.end ];
+        if (_this.arrow) {
+            _this.arrow.moveToTime((1 - _this.arrow_position) * _annotation.begin + _this.arrow_position * _annotation.end);
+        }
+        _this.sendBounds();
+    }
+    
     this.renderTemplate();
-    this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), "socialWidget", { type: "Social" });
-    this.bindPopcorn("timeupdate","onTimeupdate");
-    this.bindPopcorn("IriSP.Annotation.hide","hide");
-    this.bindPopcorn("IriSP.Annotation.show","show");
-    this.bindPopcorn("IriSP.Annotation.minimize","minimize");
-    this.bindPopcorn("IriSP.Annotation.maximize","maximize");
-    this.bindPopcorn("IriSP.Annotation.getBounds","sendBounds");
+    
+    this.$.find(".Ldt-Annotation-Title").click(function() {
+        if (currentAnnotation) {
+            _this.media.setCurrentTime(currentAnnotation.begin);
+        }
+        return false;
+    });
+    
+    if (this.show_social) {
+        this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), { type: "Social" }, "socialWidget");
+    }
+    
+    if (this.show_arrow) {
+        this.insertSubwidget(this.$.find(".Ldt-Annotation-Arrow"), { type: "Arrow", width: this.width }, "arrow");
+    }
+    this.onMediaEvent("timeupdate",timeupdate);
+    this.onMdpEvent("Annotation.hide","hide");
+    this.onMdpEvent("Annotation.show","show");
+    this.onMdpEvent("Annotation.minimize","minimize");
+    this.onMdpEvent("Annotation.maximize","maximize");
+    this.onMdpEvent("Annotation.getBounds","sendBounds");
     this.$.find(".Ldt-Annotation-MaxMinButton").click(this.functionWrapper("toggleSize"));
-    this.onTimeupdate();
-}
-
-IriSP.Widgets.Annotation.prototype.onTimeupdate = function() {
-    var _time = Math.floor(this.player.popcorn.currentTime() * 1000),
-        _list = this.getWidgetAnnotationsAtTime();
-    if (_list.length) {
-        if (_list[0].id !== this.lastAnnotation) {
-            this.drawAnnotation(_list[0]);
-            this.bounds = [ _list[0].begin.valueOf(), _list[0].end.valueOf() ];
-        }
-        this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: ( _list[0].begin + _list[0].end ) / 2});
-    }
-    else {
-        this.lastAnnotation = false;
-        this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty");
-        this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time});
-        this.bounds = [ _time, _time ];
-    }
-    this.sendBounds();
-}
+    this.getWidgetAnnotations().forEach(function(_a) {
+        _a.on("enter", function() {
+            drawAnnotation(_a);
+        });
+    });
+    this.source.getAnnotations().on("found", highlightTitleAndDescription);
+    this.source.getAnnotations().on("not-found", highlightTitleAndDescription);
+    this.source.getAnnotations().on("search-cleared", highlightTitleAndDescription);
+    IriSP.attachDndData(this.$.find("h3"), function() {
+    	return {
+	    	title: currentAnnotation.title,
+	    	description: currentAnnotation.description,
+	    	image: currentAnnotation.thumbnail,
+	    	uri: (typeof currentAnnotation.url !== "undefined" 
+	            ? currentAnnotation.url
+	            : (document.location.href.replace(/#.*$/,'') + '#id='  + currentAnnotation.id))
+	    };
+    });
+};
 
 IriSP.Widgets.Annotation.prototype.sendBounds = function() {
-    this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",this.bounds);
-}
+    this.player.trigger("Annotation.boundsChanged",this.bounds);
+};
 
 IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) {
     this.lastAnnotation = _annotation.id;
-    var _url = (typeof _annotation.url !== "undefined" 
-            ? _annotation.url
-            : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id));
-    var _text = this.l10n.watching + _annotation.title + (this.site_name ? this.l10n.on_site + this.site_name : '');
-    var _tags = _annotation.getTagTexts();
-    if (_tags.length) {
-        var _html = IriSP._(_tags).map(function(_tag) {
-            return '<li class="Ldt-Annotation-TagLabel"><span>' + _tag + '</span></li>';
-        }).join("");
-        this.$.find(".Ldt-Annotation-Tags").html(_html);
-        this.$.find(".Ldt-Annotation-Tags-Block").removeClass("Ldt-Annotation-EmptyBlock");
-        
-        /* Correct the empty tag bug */
-        this.$.find('.Ldt-Annotation-TagLabel').each(function() {
-            var _el = IriSP.jQuery(this);
-            if (!_el.text().replace(/(^\s+|\s+$)/g,'')) {
-                _el.detach();
-            }
-        });
-    
-        this.$.find('.Ldt-Annotation-TagLabel').click(function() {
-            _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
-        });
-    } else {
-        this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-EmptyBlock");
-    }
-    this.$.find(".Ldt-Annotation-Title").html(_annotation.title);
-    var _desc = _annotation.description.replace(/(^\s+|\s+$)/g,'');
-    if (_desc) {
-        this.$.find(".Ldt-Annotation-Description-Block").removeClass("Ldt-Annotation-EmptyBlock");
-        this.$.find(".Ldt-Annotation-Description").html(_desc);
-    } else {
-        this.$.find(".Ldt-Annotation-Description-Block").addClass("Ldt-Annotation-EmptyBlock");
-    }
-    this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString());
-    this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString());
-    if (_annotation.elementType === "mashedAnnotation") {
-        this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-isMashup");
-        this.$.find(".Ldt-Annotation-MashupMedia").html(_annotation.getMedia().title);
-        this.$.find(".Ldt-Annotation-MashupBegin").html(_annotation.annotation.begin.toString());
-        this.$.find(".Ldt-Annotation-MashupEnd").html(_annotation.annotation.end.toString());
-    } else {
-        this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-isMashup");
-    }
-    if (typeof this.socialWidget !== "undefined") {
-        this.socialWidget.updateUrls(_url, _text);
-    } else {
-        var _this = this;
-        setTimeout(function() {
-            if (typeof _this.socialWidget !== "undefined") {
-                _this.socialWidget.updateUrls(_url, _text);
-            }
-        },800);
-    }
-    this.$.find(".Ldt-Annotation-Inner").removeClass("Ldt-Annotation-Empty");
-}
+
+};
 
 IriSP.Widgets.Annotation.prototype.hide = function() {
     this.$.slideUp();
-}
+};
 
 IriSP.Widgets.Annotation.prototype.show = function() {
     this.$.slideDown();
-}
+};
 
 IriSP.Widgets.Annotation.prototype.toggleSize = function() {
     if (this.minimized) {
@@ -157,14 +220,14 @@
     } else {
         this.minimize();
     }
-}
+};
 
 IriSP.Widgets.Annotation.prototype.minimize = function() {
     this.minimized = true;
     this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-Minimized");
-}
+};
 
 IriSP.Widgets.Annotation.prototype.maximize = function() {
     this.minimized = false;
     this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-Minimized");
-}
\ No newline at end of file
+};
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/AnnotationsList.css
--- a/src/widgets/AnnotationsList.css	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/AnnotationsList.css	Thu Jan 02 16:40:25 2014 +0100
@@ -8,6 +8,11 @@
 .Ldt-AnnotationsListWidget a {
     text-decoration: none;
 }
+
+.Ldt-AnnotationsList-Audio {
+    width: 1px; height: 1px;
+}
+
 ul.Ldt-AnnotationsList-ul {
     list-style: none;
     padding: 2px;
@@ -23,10 +28,6 @@
 .Ldt-AnnotationsList-li.selected {
     background-image: url(img/pinstripe-grey.png);
 }
-.Ldt-AnnotationsList-highlight {
-    background: #F7268E;
-    color: #ffffff;
-}
 .Ldt-AnnotationsList-ThumbContainer {
     float: left;
     width: 80px;
@@ -53,14 +54,25 @@
     margin: 2px 2px 0 82px;
     font-weight: bold;
 }
-h3.Ldt-AnnotationsList-Title a {
+
+.Ldt-AnnotationsList-Title a {
     color: #0068c4;
 }
+
 p.Ldt-AnnotationsList-Description {
     margin: 2px 0 2px 82px;
     font-size: 12px;
     color: #333333;
 }
+
+.Ldt-AnnotationsList-Description a {
+    color: #0068c4;
+}
+
+.Ldt-AnnotationsList-Description a:hover {
+    text-decoration: underline; color: #800000;
+}
+
 ul.Ldt-AnnotationsList-Tags {
     list-style: none;
     padding: 0;
@@ -84,4 +96,14 @@
 
 .Ldt-AnnotationsList-Tag-Li:hover span {
     background-position: right -23px;
+}
+
+.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;
+    background: url(img/voiceannotation.png); color: #333333;
+}
+
+.Ldt-AnnotationsList-Play:hover {
+    background-position: 0 bottom;
 }
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/AnnotationsList.js
--- a/src/widgets/AnnotationsList.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/AnnotationsList.js	Thu Jan 02 16:40:25 2014 +0100
@@ -1,12 +1,12 @@
 IriSP.Widgets.AnnotationsList = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
-    this.searchString = false;
     this.lastIds = [];
     var _this = this;
     this.throttledRefresh = IriSP._.throttle(function() {
         _this.refresh(false);
-    }, 1500);
-    this.mashupMode = (this.source.currentMedia.elementType === "mashup");
+    }, 800);
+    this.searchString = false;
+    this.lastSearch = false;
 };
 
 IriSP.Widgets.AnnotationsList.prototype = new IriSP.Widgets.Widget();
@@ -18,7 +18,7 @@
     ajax_url : false,
     /* number of milliseconds before/after the current timecode when calling the segment API
      */
-    ajax_granularity : 300000, 
+    ajax_granularity : 600000, 
     default_thumbnail : "",
     /* URL when the annotation is not in the current project,
      * e.g. http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/{{project}}/{{annotationType}}#id={{annotation}}
@@ -26,8 +26,9 @@
     foreign_url : "",
     annotation_type : false,
     refresh_interval : 0,
-    limit_count : 10,
+    limit_count : 20,
     newest_first : false,
+    show_audio: true,
     polemics : [{
         keyword: "++",
         background_color: "#c9ecc6"
@@ -43,8 +44,20 @@
     }]
 };
 
+IriSP.Widgets.AnnotationsList.prototype.messages = {
+    en: {
+        voice_annotation: "Voice Annotation",
+        now_playing: "Now playing..."
+    },
+    fr: {
+        voice_annotation: "Annotation Vocale",
+        now_playing: "Lecture en cours..."
+    }
+};
+
 IriSP.Widgets.AnnotationsList.prototype.template =
     '<div class="Ldt-AnnotationsListWidget">'
+    + '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
     + '<ul class="Ldt-AnnotationsList-ul">'
     + '</ul>'
     + '</div>';
@@ -52,15 +65,15 @@
 IriSP.Widgets.AnnotationsList.prototype.annotationTemplate = 
     '<li class="Ldt-AnnotationsList-li Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">'
     + '<div class="Ldt-AnnotationsList-ThumbContainer">'
-    + '<a href="{{url}}">'
+    + '<a href="{{url}}" draggable="true">'
     + '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
     + '</a>'
     + '</div>'
     + '<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>'
-    + '<h3 class="Ldt-AnnotationsList-Title">'
-    + '<a href="{{url}}">{{title}}</a>'
+    + '<h3 class="Ldt-AnnotationsList-Title" draggable="true">'
+    + '<a href="{{url}}">{{{htitle}}}</a>'
     + '</h3>'
-    + '<p class="Ldt-AnnotationsList-Description">{{description}}</p>'
+    + '<p class="Ldt-AnnotationsList-Description">{{{hdescription}}}</p>'
     + '{{#tags.length}}'
     + '<ul class="Ldt-AnnotationsList-Tags">'
     + '{{#tags}}'
@@ -72,30 +85,15 @@
     + '{{/tags}}'
     + '</ul>'
     + '{{/tags.length}}'
+    + '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-annotation-id="{{id}}">{{l10n.voice_annotation}}</div>{{/audio}}'
     + '</li>';
 
-IriSP.Widgets.AnnotationsList.prototype.onSearch = function(searchString) {
-    this.searchString = typeof searchString !== "undefined" ? searchString : '';
-    var _n = this.refresh(true);
-    if (this.searchString) {
-        if (_n) {
-            this.player.popcorn.trigger("IriSP.search.matchFound");
-        } else {
-            this.player.popcorn.trigger("IriSP.search.noMatchFound");
-        }
-    }
-}
-
 //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() {
-    var _currentTime = this.player.popcorn.currentTime(),
-        _duration = this.source.getDuration();
-    if (typeof _currentTime == "undefined") {
-        _currentTime = 0;
-    }
+    var _currentTime = this.media.getCurrentTime(),
+        _duration = this.media.duration;
     this.lastAjaxQuery = _currentTime;
-    _currentTime = Math.floor(1000 * _currentTime);
     var _url = Mustache.to_html(this.ajax_url, {
         media : this.source.currentMedia.id,
         begin : Math.max(0, _currentTime - this.ajax_granularity),
@@ -104,14 +102,11 @@
     this.currentSource = this.player.loadMetadata(IriSP._.defaults({
         "url" : _url
     }, this.metadata));
-}
+};
 
 IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function() {
-    var _currentTime = this.player.popcorn.currentTime();
-    if (typeof _currentTime == "undefined") {
-        _currentTime = 0;
-    }
-    var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime * 1000);
+    var _currentTime = this.media.getCurrentTime();
+    var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);
     if (typeof _currentAnnotation !== "undefined" && _currentAnnotation.id !== this.lastMashupAnnotation) {
         this.lastMashupAnnotation = _currentAnnotation.id;
         var _currentMedia = _currentAnnotation.getMedia(),
@@ -124,7 +119,7 @@
             "url" : _url
         }, this.metadata));
     }
-}
+};
 
 IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
     _forceRedraw = (typeof _forceRedraw !== "undefined" && _forceRedraw);
@@ -132,28 +127,26 @@
         return 0;
     }
     var _this = this,
-        _currentTime = this.player.popcorn.currentTime();
-    if (typeof _currentTime == "undefined") {
-        _currentTime = 0;
-    }
+        _currentTime = this.media.getCurrentTime();
     var _list = this.annotation_type ? this.currentSource.getAnnotationsByTypeTitle(this.annotation_type) : this.currentSource.getAnnotations();
     if (this.mashupMode) {
-        var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime * 1000);
+        var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);
         if (typeof _currentAnnotation !== "undefined") {
-            _currentTime = _currentTime - _currentAnnotation.begin.getSeconds() + _currentAnnotation.annotation.begin.getSeconds();
+            _currentTime = _currentTime - _currentAnnotation.begin + _currentAnnotation.annotation.begin;
             var _mediaId = _currentAnnotation.getMedia().id;
             _list = _list.filter(function(_annotation) {
                 return _annotation.getMedia().id === _mediaId;
             });
         }
     }
-    if (this.searchString) {
-        _list = _list.searchByTextFields(this.searchString);
-    }
+    _list = _list.filter(function(_annotation) {
+        return _annotation.found !== false;
+    });
     if (this.limit_count) {
+        /* Get the n annotations closest to current timecode */
         _list = _list.sortBy(function(_annotation) {
-            return Math.abs(_annotation.begin.getSeconds() - _currentTime);
-        }).slice(0, this.limit_count)
+            return Math.abs((_annotation.begin + _annotation.end) / 2 - _currentTime);
+        }).slice(0, this.limit_count);
     }
     if (this.newest_first) {
         _list = _list.sortBy(function(_annotation) {
@@ -167,8 +160,9 @@
     
     var _ids = _list.idIndex;
     
-    if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds)) {
+    if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds) || this.searchString !== this.lastSearch) {
         /* This part only gets executed if the list needs updating */
+        this.lastSearch = this.searchString;
         this.lastIds = _ids;
         this.list_$.html("");
         _list.forEach(function(_annotation) {
@@ -186,17 +180,22 @@
                             annotationType : _annotation.annotationType.id
                         }
                     )
-                    : '#id=' + _annotation.id
+                    : document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id
                     )
             );
-            var _title = (_annotation.title || "").replace(_annotation.description,''),
-                _description = _annotation.description;
-            if (!_annotation.title) {
-                _title = _annotation.creator;
+            var _title = "",
+                _description = _annotation.description,
+                _thumbnail = (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail);
+            // Update : display creator
+            if (_annotation.creator) {
+            	_title = _annotation.creator;
             }
-            if (!_annotation.description && _annotation.creator) {
-                _description = _annotation.title;
-                _title = _annotation.creator;
+            if (_annotation.title) {
+            	var tempTitle = _annotation.title;
+            	if( tempTitle.substr(0, _title.length + 1) == (_title + ":") ){
+            		_title = "";
+            	}
+                _title = _title + ( (_title=="") ? "" : ": ") + _annotation.title;
             }
             var _bgcolor;
             IriSP._(_this.polemics).each(function(_polemic) {
@@ -208,17 +207,54 @@
             var _data = {
                 id : _annotation.id,
                 media_id : _annotation.getMedia().id,
-                title : _title,
-                description : _description,
+                htitle : IriSP.textFieldHtml(_title),
+                hdescription : IriSP.textFieldHtml(_description),
                 begin : _annotation.begin.toString(),
                 end : _annotation.end.toString(),
-                thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail,
+                thumbnail : _thumbnail,
                 url : _url,
                 tags : _annotation.getTagTexts(),
-                specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : "")
+                specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
+                l10n: _this.l10n
             };
-            var _html = Mustache.to_html(_this.annotationTemplate, _data);
-            var _el = IriSP.jQuery(_html);
+            if (_this.show_audio && _annotation.audio && _annotation.audio.href && _annotation.audio.href != "null") {
+                _data.audio = true;
+                if (!_this.jwplayers[_annotation.id]) {
+                    var _audiofile = _annotation.audio.href;
+                    if (_this.audio_url_transform) {
+                        _audiofile = _this.audio_url_transform(_annotation.audio.href);
+                    }
+                    var _tmpId = "jwplayer-" + IriSP.Model.getUID();
+                    _this.jwplayers[_annotation.id] = _tmpId;
+                    _this.$.find(".Ldt-AnnotationsList-Audio").append(IriSP.jQuery("<div>").attr("id", _tmpId));
+                    jwplayer(_tmpId).setup({
+                        flashplayer: IriSP.getLib("jwPlayerSWF"),
+                        file: _audiofile,
+                        fallback: false,
+                        primary: "flash",
+                        controls: false,
+                        width: 1,
+                        height: 1,
+                        events: {
+                            onPause: function() {
+                                _this.$.find(".Ldt-AnnotationsList-Play[data-annotation-id=" + _annotation.id + "]").text(_this.l10n.voice_annotation);
+                            },
+                            onPlay: function() {
+                                _this.$.find(".Ldt-AnnotationsList-Play[data-annotation-id=" + _annotation.id + "]").text(_this.l10n.now_playing);
+                            }
+                        }
+                    });
+                }
+            }
+            var _html = Mustache.to_html(_this.annotationTemplate, _data),
+                _el = IriSP.jQuery(_html),
+                _onselect = function() {
+                    _this.$.find('.Ldt-AnnotationsList-li').removeClass("selected");
+                    _el.addClass("selected");
+                },
+                _onunselect = function() {
+                    _this.$.find('.Ldt-AnnotationsList-li').removeClass("selected");
+                };
             _el.mouseover(function() {
                     _annotation.trigger("select");
                 })
@@ -226,35 +262,47 @@
                     _annotation.trigger("unselect");
                 })
                 .appendTo(_this.list_$);
-            _annotation.on("select", function() {
-                _this.annotations_$.removeClass("selected");
-                _el.addClass("selected");
+            IriSP.attachDndData(_el.find("[draggable]"), {
+            	title: _title,
+            	description: _description,
+            	uri: _url,
+            	image: _annotation.thumbnail
             });
-            _annotation.on("unselect", function() {
-                _this.annotations_$.removeClass("selected");
-            });;
+            _el.on("remove", function() {
+                _annotation.off("select", _onselect);
+                _annotation.off("unselect", _onunselect);
+            });
+            _annotation.on("select", _onselect);
+            _annotation.on("unselect", _onunselect);
         });
         
-        this.annotations_$ = this.$.find('.Ldt-AnnotationsList-li');
-        
         /* Correct the empty tag bug */
         this.$.find('.Ldt-AnnotationsList-Tag-Li').each(function() {
             var _el = IriSP.jQuery(this);
             if (!_el.text().replace(/(^\s+|\s+$)/g,'')) {
-                _el.detach();
+                _el.remove();
             }
         });
     
         this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() {
-            _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
-        })
+            _this.source.getAnnotations().search(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
+        });
         
-        if(this.searchString) {
-            var _searchRe = IriSP.Model.regexpFromTextOrArray(this.searchString);
+        this.$.find(".Ldt-AnnotationsList-Play").click(function() {
+            var _el = IriSP.jQuery(this),
+                _annid = _el.attr("data-annotation-id");
+            if (_this.jwplayers[_annid]) {
+                jwplayer(_this.jwplayers[_annid]).play();
+            }
+            _this.media.pause();
+        });
+        
+        if (this.source.getAnnotations().searching) {
+            var rx = _this.source.getAnnotations().regexp || false;
             this.$.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description").each(function() {
                 var _$ = IriSP.jQuery(this);
-                _$.html(_$.text().replace(/(^\s+|\s+$)/g,'').replace(_searchRe, '<span class="Ldt-AnnotationsList-highlight">$1</span>'))
-            })
+                _$.html(IriSP.textFieldHtml(_$.text(), rx));
+            });
         }
     }
     
@@ -262,26 +310,59 @@
         if (this.mashupMode) {
             this.ajaxMashup();
         } else {
-            if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity / 2000)) {
+            if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity)) {
                 this.ajaxSource();
             }
         }
     }
     return _list.length;
-}
+};
 
 IriSP.Widgets.AnnotationsList.prototype.draw = function() {
     
+    this.jwplayers = {};
+    this.mashupMode = (this.media.elementType === "mashup");
+    
     this.renderTemplate();
     
+    var _this = this;
+        
     this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
     
-    this.bindPopcorn("IriSP.search", "onSearch");
-    this.bindPopcorn("IriSP.search.closed", "onSearch");
-    this.bindPopcorn("IriSP.search.cleared", "onSearch");
-    this.bindPopcorn("IriSP.AnnotationsList.refresh","refresh");
     
-    var _this = this;
+    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.throttledRefresh();
+    });
+    this.source.getAnnotations().on("not-found", function() {
+        _this.throttledRefresh();
+    });
+    this.source.getAnnotations().on("clear-search", function() {
+        _this.searchString = false;
+        if (_this.source !== _this.currentSource) {
+            _this.currentSource.getAnnotations().trigger("clear-search");
+        }
+    });
+    this.source.getAnnotations().on("search-cleared", function() {
+        _this.throttledRefresh();
+    });
+    
+    this.onMdpEvent("AnnotationsList.refresh", function() {
+        if (_this.ajax_url) {
+            if (_this.mashupMode) {
+                _this.ajaxMashup();
+            } else {
+                _this.ajaxSource();
+            }
+        }
+        _this.throttledRefresh();
+    });
     
     if (this.ajax_url) {
         if (this.mashupMode) {
@@ -295,18 +376,18 @@
     
     if (this.refresh_interval) {
         window.setInterval(function() {
-            _this.currentSource.get()
+            _this.currentSource.get();
         }, this.refresh_interval);
     }
     
+    this.onMdpEvent("createAnnotationWidget.addedAnnotation");
     var _events = [
-        "IriSP.createAnnotationWidget.addedAnnotation",
         "timeupdate",
         "seeked",
         "loadedmetadata"
     ];
     for (var _i = 0; _i < _events.length; _i++) {
-        this.player.popcorn.listen(_events[_i], this.throttledRefresh);
+        this.onMediaEvent(_events[_i], this.throttledRefresh);
     }
     
     this.throttledRefresh();
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Arrow.js
--- a/src/widgets/Arrow.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Arrow.js	Thu Jan 02 16:40:25 2014 +0100
@@ -6,25 +6,25 @@
 IriSP.Widgets.Arrow.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Arrow.prototype.defaults = {
-    arrow_height : 16,
-    arrow_width : 24,
+    arrow_height : 12,
+    arrow_width : 20,
     base_height : 0,
     base_curve : 0,
     fill_url: IriSP.widgetsDir + '/img/pinstripe.png',
     fill_color: "#ffffff", //Gradients can be used, e.g. "90-#000-#fff" for vertical white-to-black
     stroke_color: "#b7b7b7",
     stroke_width: 1.5,
-    animation_speed: 20,
-    pilot_widget: "Annotation"
-}
+    animation_speed: 20
+};
 
 IriSP.Widgets.Arrow.prototype.draw = function() {
     this.height = this.arrow_height + this.base_height;
     this.$.addClass("Ldt-Arrow").css({
-        height: this.height + "px",
-        "margin-top": "1px"
+        height: (1+this.height) + "px",
+        "margin-top": "1px",
+        overflow: "hidden"
     });
-    this.paper = new Raphael(this.container, this.width, this.height );
+    this.paper = new Raphael(this.container, this.width, 1+this.height );
     window.myArrow = this;
     this.svgArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height);
     this.svgArrow.attr({
@@ -32,14 +32,11 @@
         "stroke-width": this.stroke_width,
         fill: this.fill_url ? ( 'url(' + this.fill_url + ')' ) : this.fill_color
     });
-    this.moveTo(0);
-    this.bindPopcorn("IriSP.Arrow.updatePosition","onUpdatePosition");
-    this.bindPopcorn("IriSP.Arrow.takeover","onTakeover");
-    this.bindPopcorn("IriSP.Arrow.release","onRelease");
-}
+    this.moveToX(0);
+};
 
 IriSP.Widgets.Arrow.prototype.drawAt = function(_x) {
-    _x = Math.floor(Math.max(0, Math.min(_x, this.width)));
+    _x = Math.max(0, Math.min(_x, this.width));
     var _d = 'M0,' + this.height
         + 'L0,' + Math.min( this.height, this.arrow_height + this.base_curve)
         + 'Q0,' + this.arrow_height
@@ -56,18 +53,22 @@
     this.svgArrow.attr({
         path: _d
     });
-}
+};
 
-IriSP.Widgets.Arrow.prototype.moveTo = function(_x) {
-    this.targetX = Math.floor(Math.max(0, Math.min(_x, this.width)));
+IriSP.Widgets.Arrow.prototype.moveToX = function(_x) {
+    this.targetX = Math.max(0, Math.min(_x, this.width));
     if (typeof this.animInterval === "undefined") {
         this.animInterval = window.setInterval(
             this.functionWrapper("increment"),
             40
-        )
+        );
     }
     this.increment();
-}
+};
+
+IriSP.Widgets.Arrow.prototype.moveToTime = function(_t) {
+    this.moveToX(this.width * _t / this.media.duration);
+};
 
 IriSP.Widgets.Arrow.prototype.increment = function() {
     if (typeof this.currentX === "undefined") {
@@ -84,22 +85,4 @@
         this.animInterval = undefined;
     }
     this.drawAt(this.currentX);
-}
-
-IriSP.Widgets.Arrow.prototype.onUpdatePosition = function(_param) {
-    if (_param.widget === this.current_pilot_widget) {
-        if (typeof _param.x !== "undefined") {
-            this.moveTo(_param.x);
-        } else {
-            this.moveTo(this.width * _param.time / this.source.getDuration());
-        }
-    }
-}
-
-IriSP.Widgets.Arrow.prototype.onTakeover = function(_widget) {
-    this.current_pilot_widget = _widget;
-}
-
-IriSP.Widgets.Arrow.prototype.onRelease = function(_widget) {
-    this.current_pilot_widget = this.pilot_widget;
-}
+};
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/AutoPlayer.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/AutoPlayer.js	Thu Jan 02 16:40:25 2014 +0100
@@ -0,0 +1,76 @@
+IriSP.Widgets.AutoPlayer = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.AutoPlayer.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.AutoPlayer.prototype.defaults = {
+    default_type: "JwpPlayer"
+};
+
+IriSP.Widgets.AutoPlayer.prototype.draw = function() {
+    
+    if (typeof this.video === "undefined") {
+        this.video = this.media.video;
+    }
+    
+    var _props = [ "live", "provider", "autostart", "streamer", "video", "height", "width", "url_transform" ],
+        _opts = {},
+        _types = [
+            {
+                regexp: /^rtmp:\/\//,
+                type: "JwpPlayer"
+            },
+            {
+                regexp: /\.(mp4|m4v)$/,
+                type: "AdaptivePlayer"
+            },
+            {
+                regexp: /\.(ogg|ogv|webm)$/,
+                type: "HtmlPlayer"
+            },
+            {
+                regexp: /^(https?:\/\/)?(www\.)?youtube\.com/,
+                type: "PopcornPlayer"
+            },
+            {
+                regexp: /^(https?:\/\/)?(www\.)?vimeo\.com/,
+                type: "PopcornPlayer"
+            },
+            {
+                regexp: /^(https?:\/\/)?(www\.)?dailymotion\.com/,
+                type: "DailymotionPlayer"
+            }
+        ],
+        _rtmprgx = /^rtmp:\/\//;
+    
+    for (var i = 0; i < _types.length; i++) {
+        if (_types[i].regexp.test(this.video)) {
+            _opts.type =  _types[i].type;
+            break;
+        }
+    }
+    
+    if (typeof _opts.type === "undefined") {
+        _opts.type = this.default_type;
+    }
+    
+    if (_opts.type === "AdaptivePlayer") {
+        var _canPlayType = document.createElement('video').canPlayType("video/mp4");
+        _opts.type = (_canPlayType == "maybe" || _canPlayType == "probably") ? "HtmlPlayer" : "JwpPlayer";
+    }
+    
+    if (_rtmprgx.test(this.video)) {
+        _opts.provider = "rtmp";
+        _opts.live = true;
+    }
+    
+    for (var i = 0; i < _props.length; i++) {
+        if (typeof this[_props[i]] !== "undefined") {
+            _opts[_props[i]] = this[_props[i]];
+        }
+    }
+
+    this.insertSubwidget(this.$, _opts);
+    
+};
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Controller.css
--- a/src/widgets/Controller.css	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Controller.css	Thu Jan 02 16:40:25 2014 +0100
@@ -9,7 +9,7 @@
 }
 
 .Ldt-Ctrl-Left {
-  float:left;
+  float:left; width: 300px;
 }
 
 .Ldt-Ctrl-Right {
@@ -82,13 +82,12 @@
 }
 
 .Ldt-Ctrl-Search {
-  display: none;
-  width: 165px;
-  height: 25px;
-  border: 1px;
-  border-color: #CFCFCF;
-  float: left;
-  text-align: center;
+  width: 0; float: left; overflow: hidden;
+}
+
+input.Ldt-Ctrl-SearchInput {
+    width: 145px; height: 13px; margin: 2px; padding: 3px;
+    border: 1px solid #8080a0; border-radius: 3px; font-size: 13px;
 }
 
 .Ldt-Ctrl-Time {
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Controller.js
--- a/src/widgets/Controller.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Controller.js	Thu Jan 02 16:40:25 2014 +0100
@@ -1,17 +1,17 @@
 /* Displays Play and Pause buttons, Search Button and Form, Volume Control */
 
 IriSP.Widgets.Controller = function(player, config) {
-  IriSP.Widgets.Widget.call(this, player, config);
-  
-  this._searchLastValue = "";
+    IriSP.Widgets.Widget.call(this, player, config);
+    this.lastSearchValue = "";
 };
 
 IriSP.Widgets.Controller.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Controller.prototype.defaults = {
     disable_annotate_btn: false,
-    disable_search_btn: false
-}
+    disable_search_btn: false,
+    disable_ctrl_f: false
+};
 
 IriSP.Widgets.Controller.prototype.template =
     '<div class="Ldt-Ctrl">'
@@ -56,7 +56,7 @@
         annotate: "Annotate",
         search: "Search",
         elapsed_time: "Elapsed time",
-        total_time: "Total time",
+        total_time: "Total duration",
         volume: "Volume",
         volume_control: "Volume control"
     },
@@ -69,7 +69,7 @@
         unmute: "Activer le son",
         annotate: "Annoter",
         search: "Rechercher",
-        elapsed_time: "Durée écoulée",
+        elapsed_time: "Temps écoulé",
         total_time: "Durée totale",
         volume: "Niveau sonore",
         volume_control: "Réglage du niveau sonore"
@@ -87,25 +87,21 @@
     this.$volumeBar = this.$.find(".Ldt-Ctrl-Volume-Bar");
     
     // handle events
-    this.bindPopcorn("play","playButtonUpdater");
-    this.bindPopcorn("pause","playButtonUpdater");
-    this.bindPopcorn("volumechange","volumeUpdater");
-    this.bindPopcorn("timeupdate","timeDisplayUpdater");
-    this.bindPopcorn("loadedmetadata","timeDisplayUpdater");
-    this.bindPopcorn("loadedmetadata","volumeUpdater");
-    this.bindPopcorn("IriSP.search.matchFound","searchMatch");
-    this.bindPopcorn("IriSP.search.noMatchFound","searchNoMatch");
-    this.bindPopcorn("IriSP.search.triggeredSearch","triggeredSearch");
+    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"));
     
     this.$.find(".Ldt-Ctrl-Annotate").click(function() {
-        _this.player.popcorn.trigger("IriSP.CreateAnnotation.toggle");
+        _this.player.trigger("CreateAnnotation.toggle");
     });
     this.$.find(".Ldt-Ctrl-SearchBtn").click(this.functionWrapper("searchButtonHandler"));
     
-    this.$searchInput.keyup(this.functionWrapper("searchHandler") );
+    this.$searchInput.keyup(this.functionWrapper("searchHandler"));
   
 	var _volctrl = this.$.find(".Ldt-Ctrl-Volume-Control");
     this.$.find('.Ldt-Ctrl-Sound')
@@ -121,13 +117,28 @@
     }).mouseout(function() {
         _volctrl.hide();
     });
-  
+    
+    // Handle CTRL-F
+    if (!this.disable_ctrl_f) {
+        var _fKey = "F".charCodeAt(0),
+            _lastCtrlFTime = 0;
+        IriSP.jQuery(document).keydown(function(_event) {
+            if (_event.keyCode === _fKey && (_event.ctrlKey || _event.metaKey)) {
+                var _time = IriSP.jQuery.now();
+                if (_time - _lastCtrlFTime > 2000) {
+                    _this.searchButtonHandler();
+                }
+                _lastCtrlFTime = _time;
+                return false;
+            }
+        });
+    }
     
     // Allow Volume Cursor Dragging
     this.$volumeBar.slider({
         slide: function(event, ui) {
             _this.$volumeBar.attr("title",_this.l10n.volume+': ' + ui.value + '%');
-            _this.player.popcorn.volume(ui.value / 100);
+            _this.media.setVolume(ui.value / 100);
         },
         stop: this.functionWrapper("volumeUpdater")
     });
@@ -135,33 +146,38 @@
     // trigger an IriSP.Player.MouseOver to the widgets that are interested (i.e : sliderWidget)
     this.$.hover(
         function() {
-            _this.player.popcorn.trigger("IriSP.Player.MouseOver");
+            _this.player.trigger("Player.MouseOver");
         }, 
         function() {
-            _this.player.popcorn.trigger("IriSP.Player.MouseOut");
+            _this.player.trigger("Player.MouseOut");
         });
-    /* some players - including jwplayer - save the state of the mute button between sessions */
-
-    window.setTimeout(this.functionWrapper("volumeUpdater"), 1000);
+    
+    this.timeDisplayUpdater(new IriSP.Model.Time(0));
+    
+    var annotations = this.source.getAnnotations();
+    annotations.on("search", function(_text) {
+        _this.$searchInput.val(_text);
+        _this.showSearchBlock();
+    });
+    annotations.on("found", function(_text) {
+        _this.$searchInput.css('background-color','#e1ffe1');
+    });
+    annotations.on("not-found", function(_text) {
+        _this.$searchInput.css('background-color', "#d62e3a");
+    });
+    annotations.on("search-cleared", function() {
+        _this.hideSearchBlock();
+    });
    
 };
 
 /* Update the elasped time div */
-IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function() {
-    var _curTime = this.player.popcorn.roundTime();
-    if (typeof this._previousSecond !== "undefined" && _curTime === this._previousSecond) {
-        return;
-    }
+IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function(_time) {
   
     // we get it at each call because it may change.
-    var _totalTime = this.source.getDuration(),
-        _elapsedTime = new IriSP.Model.Time();
-        
-    _elapsedTime.setSeconds(_curTime);
-  
-    this.$.find(".Ldt-Ctrl-Time-Elapsed").html(_elapsedTime.toString());
+    var _totalTime = this.media.duration;
+    this.$.find(".Ldt-Ctrl-Time-Elapsed").html(_time.toString());
     this.$.find(".Ldt-Ctrl-Time-Total").html(_totalTime.toString());
-    this._previousSecond = _curTime;
 };
 
 /* update the icon of the button - separate function from playHandler
@@ -169,10 +185,7 @@
    the jwplayer window) we have to change the icon without playing/pausing
 */
 IriSP.Widgets.Controller.prototype.playButtonUpdater = function() {
-    
-    var status = this.player.popcorn.media.paused;
-  
-    if (status) {
+    if (this.media.getPaused()) {
     /* the background sprite is changed by adding/removing the correct classes */
         this.$playButton
             .attr("title", this.l10n.play)
@@ -188,23 +201,20 @@
 
 
 IriSP.Widgets.Controller.prototype.playHandler = function() {
-    
-    var status = this.player.popcorn.media.paused;
-  
-    if (status) {        
-        this.player.popcorn.play();   
+    if (this.media.getPaused()) {        
+        this.media.play();
     } else {
-        this.player.popcorn.pause();
+        this.media.pause();
     }  
 };
 
 IriSP.Widgets.Controller.prototype.muteHandler = function() {
-    this.player.popcorn.muted(!this.player.popcorn.muted());
+    this.media.setMuted(!this.media.getMuted());
 };
 
 IriSP.Widgets.Controller.prototype.volumeUpdater = function() {
-    var _muted = this.player.popcorn.muted(),
-        _vol = this.player.popcorn.volume();
+    var _muted = this.media.getMuted(),
+        _vol = this.media.getVolume();
     if (_vol === false) {
         _vol = .5;
     }
@@ -215,43 +225,29 @@
             .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() {
-    this.$searchBlock.show("blind", { direction: "horizontal"}, 100);
+    this.$searchBlock.animate({ width:"160px" }, 200);
     this.$searchInput.css('background-color','#fff');
-   
     this.$searchInput.focus();
-    
-    // we need this variable because some widgets can find a match in
-    // their data while at the same time others don't. As we want the
-    // search field to become green when there's a match, we need a 
-    // variable to remember that we had one.
-    this._positiveMatch = false;
-
-    // tell the world the field is open
-    this.player.popcorn.trigger("IriSP.search.open");
 };
 
 IriSP.Widgets.Controller.prototype.hideSearchBlock = function() {
-    this._searchLastValue = this.$searchInput.val();
-    this.$searchInput.val('');
-    this.$searchBlock.hide("blind", { direction: "horizontal"}, 75);
-
-    this._positiveMatch = false;
-    
-    this.player.popcorn.trigger("IriSP.search.closed");
+    this.$searchBlock.animate( { width: 0 }, 200);
 };
 
 /** react to clicks on the search button */
 IriSP.Widgets.Controller.prototype.searchButtonHandler = function() {
-    if ( this.$searchBlock.is(":hidden") ) {
+    if ( !this.$searchBlock.width() ) {
         this.showSearchBlock();
-        this.$searchInput.val(this._searchLastValue);      
-        this.player.popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural.
+        var _val = this.$searchInput.val();
+        if (_val) {
+            this.source.getAnnotations().search(_val);
+        }
 	} else {
         this.hideSearchBlock();
     }
@@ -260,40 +256,22 @@
 /** this handler is called whenever the content of the search
    field changes */
 IriSP.Widgets.Controller.prototype.searchHandler = function() {
-    this._searchLastValue = this.$searchInput.val();
+    if ( !this.$searchBlock.width() ) {
+        this.$searchBlock.css({ width:"160px" });
+        this.$searchInput.css('background-color','#fff');
+    }
+    var _val = this.$searchInput.val();
     this._positiveMatch = false;
-  
+    
     // do nothing if the search field is empty, instead of highlighting everything.
-    if (this._searchLastValue == "") {
-        this.player.popcorn.trigger("IriSP.search.cleared");
-        this.$searchInput.css('background-color','');
-    } else {
-        this.player.popcorn.trigger("IriSP.search", this._searchLastValue);
+    if (_val !== this.lastSearchValue) {
+        if (_val) {
+            this.source.getAnnotations().search(_val);
+        } else {
+            this.source.getAnnotations().trigger("clear-search");
+            this.$searchInput.css('background-color','');
+        }
     }
+    this.lastSearchValue = _val;
 };
 
-/**
-  handler for the IriSP.search.found message, which is sent by some views when they
-  highlight a match.
-*/
-IriSP.Widgets.Controller.prototype.searchMatch = function() {
-    this._positiveMatch = true;
-    this.$searchInput.css('background-color','#e1ffe1');
-};
-
-/** the same, except that no value could be found */
-IriSP.Widgets.Controller.prototype.searchNoMatch = function() {
-    if (this._positiveMatch !== true) {
-        this.$searchInput.css('background-color', "#d62e3a");
-    }
-};
-
-/** react to an IriSP.Player.triggeredSearch - that is, when
-    a widget ask the.Player to do a search on his behalf */
-IriSP.Widgets.Controller.prototype.triggeredSearch = function(searchString) {
-    this.showSearchBlock();
-    this.$searchInput.attr('value', searchString);      
-    this.player.popcorn.trigger("IriSP.search", searchString); // trigger the search to make it more natural.
-};
-
-
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/CreateAnnotation.css
--- a/src/widgets/CreateAnnotation.css	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/CreateAnnotation.css	Thu Jan 02 16:40:25 2014 +0100
@@ -11,13 +11,11 @@
 }
 
 .Ldt-CreateAnnotation-Inner {
-    background: url(img/pinstripe.png);
-    padding: 5px;
-    margin: 0;
+    background: url(img/pinstripe.png); padding: 5px; margin: 0; position: relative;
 }
 
 .Ldt-CreateAnnotation-Inner h3 {
-    margin: 5px 0; font-size: 14px; font-weight: bold; text-align: right;
+    margin: 5px 0; font-size: 14px; font-weight: bold; text-align: right; clear:both; color: #0068c4;
 }
 
 .Ldt-CreateAnnotation-h3Left {
@@ -36,6 +34,11 @@
     border-radius: 2px;
 }
 
+.Ldt-CreateAnnotation-Title.empty, .Ldt-CreateAnnotation-Creator.empty {
+    font-style: italic;
+    color: #90b0d0;
+}
+
 .Ldt-CreateAnnotation-Times {
     color: #ff3b77
 }
@@ -69,6 +72,10 @@
     border-radius: 2px;
 }
 
+.Ldt-CreateAnnotation-Description.empty {
+    font-style: italic; color: #999999;
+}
+
 .Ldt-CreateAnnotation-Avatar {
     float: right;
     width: 48px;
@@ -86,11 +93,11 @@
     border: 1px solid #bbbbbb;
 }
 
-.Ldt-CreateAnnotation-Tags, .Ldt-CreateAnnotation-Polemics {
-    width: 520px;
+.Ldt-CreateAnnotation-RecBlock {
+    width: 220px; float: left;
 }
 
-.Ldt-CreateAnnotation-TagTitle, .Ldt-CreateAnnotation-PolemicTitle {
+.Ldt-CreateAnnotation-TagTitle, .Ldt-CreateAnnotation-PolemicTitle, .Ldt-CreateAnnotation-RecLabel {
     display: block; margin: 5px 0 2px; font-size: 12px;
 }
 
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/CreateAnnotation.js
--- a/src/widgets/CreateAnnotation.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/CreateAnnotation.js	Thu Jan 02 16:40:25 2014 +0100
@@ -1,4 +1,4 @@
-/* TODO: Add Social Network Sharing, Finish Current Timecode Sync & Arrow Takeover */
+/* TODO: Add Social Network Sharing */
 
 IriSP.Widgets.CreateAnnotation = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
@@ -7,12 +7,14 @@
 IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.CreateAnnotation.prototype.defaults = {
-    show_title_field : false, /* For the moment, titles can't be sent to ldtplatform */
+    show_title_field : true,
     show_creator_field : true,
     start_visible : true,
     always_visible : false,
-    sync_on_slice_widget : true, /* If false, syncs on current timecode */
-    takeover_arrow : false,
+    show_slice : true,
+    show_arrow : true,
+    show_mic_record: false,
+    show_mic_play: false,
     minimize_annotation_widget : true,
     creator_name : "",
     creator_avatar : "",
@@ -37,13 +39,15 @@
         background_color: "#f0e000",
         text_color: "#000000"
     }],
+    slice_annotation_type: "chap",
     annotation_type: "Contributions",
     api_serializer: "ldt_annotate",
     api_endpoint_template: "",
-    api_method: "PUT",
+    api_method: "POST",
     after_send_timeout: 0,
     close_after_send: false,
-}
+    tag_prefix: "#"
+};
 
 IriSP.Widgets.CreateAnnotation.prototype.messages = {
     en: {
@@ -52,59 +56,85 @@
         at_time: "at",
         submit: "Submit",
         add_keywords_: "Add keywords:",
-        add_polemic_keywords_: "Add polemic keywords:",
+        add_polemic_keywords_: "Add polemic attributes :",
         your_name_: "Your name:",
-        no_title: "Annotate this video",
+        annotate_video: "Annotate this video",
         type_title: "Annotation title",
-        type_description: "Type the full description of your annotation here.",
-        wait_while_processing: "Please wait while your request is being processed...",
+        type_description: "Type the full contents of your annotation here.",
+        wait_while_processing: "Please wait while your annotation is being processed...",
         error_while_contacting: "An error happened while contacting the server. Your annotation has not been saved.",
-        empty_annotation: "Your annotation is empty. Please write something before submitting.",
         annotation_saved: "Thank you, your annotation has been saved.",
         share_annotation: "Would you like to share it on social networks ?",
-        share_on: "Share on",
-        more_tags: "More tags",
-        cancel: "Cancel",
-        close_widget: "Cacher la zone de création d'annotations"
+        close_widget: "Hide the annotation form",
+        "polemic++": "Agree",
+        "polemic--": "Disagree",
+        "polemic??": "Question",
+        "polemic==": "Reference"
     },
     fr: {
         from_time: "de",
         to_time: "à",
         at_time: "à",
         submit: "Envoyer",
-        add_keywords_: "Ajouter des mots-clés&nbsp;:",
-        add_polemic_keywords_: "Ajouter des mots-clés polémiques&nbsp;:",
-        your_name_: "Votre nom&nbsp;:",
-        no_title: "Annoter cette vidéo",
+        add_keywords_: "Ajouter des mots-clés\u00a0:",
+        add_polemic_keywords_: "Ajouter des attributs polémiques\u00a0:",
+        your_name_: "Votre nom\u00a0:",
+        annotate_video: "Annoter cette vidéo",
         type_title: "Titre de l'annotation",
-        type_description: "Rédigez le contenu de votre annotation ici.",
-        wait_while_processing: "Veuillez patienter pendant le traitement de votre requête...",
-        error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée",
-        empty_annotation: "Votre annotation est vide. Merci de rédiger un texte avant de l'envoyer.",
+        type_description: "Rédigez ici le contenu de votre annotation.",
+        wait_while_processing: "Veuillez patienter pendant le traitement de votre annotation...",
+        error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée.",
         annotation_saved: "Merci, votre annotation a été enregistrée.",
         share_annotation: "Souhaitez-vous la partager sur les réseaux sociaux ?",
-        share_on: "Partager sur",
-        more_tags: "Plus de mots-clés",
-        cancel: "Cancel",
-        close_widget: "Hide the annotation creating block"
+        close_widget: "Cacher le formulaire de création d'annotations",
+        "polemic++": "Accord",
+        "polemic--": "Désaccord",
+        "polemic??": "Question",
+        "polemic==": "Référence"
     }
-}
+};
 
 IriSP.Widgets.CreateAnnotation.prototype.template =
-    '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">'
+    '{{#show_slice}}<div class="Ldt-CreateAnnotation-Slice"></div>{{/show_slice}}'
+    + '{{^show_slice}}{{#show_arrow}}<div class="Ldt-CreateAnnotation-Arrow"></div>{{/show_arrow}}{{/show_slice}}'
+    + '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">'
     + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">'
-    + '<h3><span class="Ldt-CreateAnnotation-h3Left">{{#show_title_field}}<input class="Ldt-CreateAnnotation-Title" placeholder="{{l10n.type_title}}" />{{/show_title_field}}'
-    + '{{^show_title_field}}<span class="Ldt-CreateAnnotation-NoTitle">{{l10n.no_title}} </span>{{/show_title_field}}'
-    + ' <span class="Ldt-CreateAnnotation-Times">{{#sync_on_slice_widget}}{{l10n.from_time}} {{/sync_on_slice_widget}}{{^sync_on_slice_widget}}{{l10n.at_time}} {{/sync_on_slice_widget}} <span class="Ldt-CreateAnnotation-Begin">00:00</span>'
-    + '{{#sync_on_slice_widget}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">00:00</span>{{/sync_on_slice_widget}}</span></span>'
-    + '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator" value="{{creator_name}}" /></h3>{{/show_creator_field}}'
-    + '<textarea class="Ldt-CreateAnnotation-Description" placeholder="{{l10n.type_description}}"></textarea>'
+    + '<h3><span class="Ldt-CreateAnnotation-h3Left">{{l10n.annotate_video}}{{#show_title_field}}</span></h3>'
+    + '<h3><span class="Ldt-CreateAnnotation-h3Left"><input class="Ldt-CreateAnnotation-Title empty" placeholder="{{l10n.type_title}}" />{{/show_title_field}}'
+    + '<span class="Ldt-CreateAnnotation-Times"> {{#show_slice}}{{l10n.from_time}} {{/show_slice}}{{^show_slice}}{{l10n.at_time}} {{/show_slice}} <span class="Ldt-CreateAnnotation-Begin">00:00</span>'
+    + '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">{{end}}</span>{{/show_slice}}</span></span>'
+    + '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator empty" value="{{creator_name}}" />{{/show_creator_field}}</h3>'
+    + '<textarea class="Ldt-CreateAnnotation-Description empty" placeholder="{{l10n.type_description}}"></textarea>'
     + '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>'
     + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />'
+    + '{{#show_mic_record}}<div class="Ldt-CreateAnnotation-RecBlock"><div class="Ldt-CreateAnnotation-RecLabel">Add voice annotation</div>'
+    + '    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="220" height="160">'
+    + '        <param name="movie" value="{{record_swf}}" />'
+    + '        <param name="quality" value="high" />'
+    + '        <param name="bgcolor" value="#ffffff" />'
+    + '        <param name="play" value="true" />'
+    + '        <param name="loop" value="true" />'
+    + '        <param name="wmode" value="transparent" />'
+    + '        <param name="scale" value="showall" />'
+    + '        <param name="menu" value="true" />'
+    + '        <param name="devicefont" value="false" />'
+    + '        <param name="salign" value="" />'
+    + '        <param name="allowScriptAccess" value="always" />'
+    + '        <param name="allowFullScreen" value="true" />'
+    + '        <param name="flashvars" value="playVisible={{show_mic_play}}">'
+    + '        <embed src="{{record_swf}}"" quality="high" bgcolor="#ffffff"'
+    + '             width="220" height="160" name="ExternalInterfaceExample" align="middle"'
+    + '             play="true" loop="false" quality="high" allowScriptAccess="always" '
+    + '             type="application/x-shockwave-flash" allowFullScreen="true" wmode="transparent" '
+    + '             flashvars="playVisible={{show_mic_play}}"'
+    + '             pluginspage="http://www.macromedia.com/go/getflashplayer">'
+    + '        </embed>'
+    + '    </object>'
+    + '</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}}"><span class="Ldt-CreateAnnotation-TagButton">{{title}}</span></li>{{/tags}}</ul></div>{{/tags.length}}'
+    + '{{#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">'
-    + '{{#polemics}}<li class="Ldt-CreateAnnotation-PolemicLi" style="background-color: {{background_color}}; color: {{text_color}}">{{keyword}}</li>{{/polemics}}</ul></div>{{/polemics.length}}'
+    + '{{#polemics}}<li class="Ldt-CreateAnnotation-PolemicLi" style="background-color: {{background_color}}; color: {{text_color}}" data-text="{{keyword}}">{{keyword}}</li>{{/polemics}}</ul></div>{{/polemics.length}}'
     + '<div style="clear: both;"></div></form>'
     + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Wait"><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.wait_while_processing}}</div></div>'
     + '<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>'
@@ -113,18 +143,31 @@
     
 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) {
-        this.tags = IriSP._(this.tag_titles).map(function(_tag_title) {
-            var _tag,
-                _tags = _this.source.getTags().searchByTitle(_tag_title);
-            if (_tags.length) {
-                _tag = _tags[0];
-            } else {
-                _tag = new IriSP.Model.Tag(false, _this.source);
-                _tag.title = _tag_title;
-            }
-            return _tag;
-        });
+		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) {
         this.tags = this.source.getTags()
@@ -137,7 +180,44 @@
             });
         /* We have to use the map function because Mustache doesn't like our tags object */
     }
+    this.record_swf = IriSP.getLib("recordMicSwf");
     this.renderTemplate();
+    if (this.show_mic_record) {
+        this.recorder = this.$.find("embed")[0];
+        
+        window.setAudioUrl = function(_url) {
+            _this.audio_url = _url;
+        }
+    }
+    if (this.show_slice) {
+        this.insertSubwidget(
+            this.$.find(".Ldt-CreateAnnotation-Slice"),
+            {
+                type: "Slice",
+                show_arrow: this.show_arrow,
+                annotation_type: this.slice_annotation_type,
+                onBoundsChanged: function(_from, _to) {
+                    _this.begin = new IriSP.Model.Time(_from || 0);
+                    _this.end = new IriSP.Model.Time(_to || 0);
+                    _this.$.find(".Ldt-CreateAnnotation-Begin").html(_this.begin.toString());
+                    _this.$.find(".Ldt-CreateAnnotation-End").html(_this.end.toString());
+                }
+            },
+            "slice"
+        );
+    } else {
+        if (this.show_arrow) {
+            this.insertSubwidget(this.$.find(".Ldt-CreateAnnotation-Arrow"), {type: "Arrow"},"arrow");
+        }
+        this.onMediaEvent("timeupdate", function(_time) {
+            _this.begin = new IriSP.Model.Time(_time || 0);
+            _this.end = new IriSP.Model.Time(_time || 0);
+            _this.$.find(".Ldt-CreateAnnotation-Begin").html(_this.begin.toString());
+            if (_this.arrow) {
+                _this.arrow.moveToTime(_time);
+            }
+        });
+    }
     this.$.find(".Ldt-CreateAnnotation-Close").click(function() {
         _this.close_after_send
         ? _this.hide()
@@ -145,9 +225,17 @@
         return false;
     });
     this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").click(function() {
-        _this.addKeyword(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
+        _this.addKeyword(IriSP.jQuery(this).attr("data-text"));
         return false;
     });
+    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);
+        }
+    });
     this.$.find(".Ldt-CreateAnnotation-Description").bind("change keyup input paste", this.functionWrapper("onDescriptionChange"));
     if (this.show_title_field) {
         this.$.find(".Ldt-CreateAnnotation-Title").bind("change keyup input paste", this.functionWrapper("onTitleChange"));
@@ -163,12 +251,9 @@
         this.hide();
     }
     
-    this.bindPopcorn("IriSP.CreateAnnotation.toggle","toggle");
-    this.bindPopcorn("IriSP.Slice.boundsChanged","onBoundsChanged");
-    this.begin = new IriSP.Model.Time();
-    this.end = this.source.getDuration();
+    this.onMdpEvent("CreateAnnotation.toggle","toggle");
     this.$.find("form").submit(this.functionWrapper("onSubmit"));
-}
+};
 
 IriSP.Widgets.CreateAnnotation.prototype.showScreen = function(_screenName) {
     this.$.find('.Ldt-CreateAnnotation-' + _screenName).show()
@@ -178,31 +263,35 @@
 IriSP.Widgets.CreateAnnotation.prototype.show = function() {
     this.visible = true;
     this.showScreen('Main');
-    this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666");
+    this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666").addClass("empty");
     if (this.show_title_field) {
-        this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666");
+        this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666").addClass("empty");
     }
     if (this.show_creator_field) {
         this.$.find(".Ldt-CreateAnnotation-Creator").val(this.creator_name).css("border-color", "#666666");
+        if (!this.creator_name) {
+            this.$.find(".Ldt-CreateAnnotation-Creator").addClass("empty");
+        }
     }
     this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").removeClass("selected");
     this.$.slideDown();
     if (this.minimize_annotation_widget) {
-        this.player.popcorn.trigger("IriSP.Annotation.minimize");
+        this.player.trigger("Annotation.minimize");
     }
-    this.player.popcorn.trigger("IriSP.Slice.show");
-}
+};
 
 IriSP.Widgets.CreateAnnotation.prototype.hide = function() {
+    if (this.recorder) {
+        this.recorder.stopRecord();
+    }
     if (!this.always_visible) {
         this.visible = false;
         this.$.slideUp();
         if (this.minimize_annotation_widget) {
-            this.player.popcorn.trigger("IriSP.Annotation.maximize");
+            this.player.trigger("Annotation.maximize");
         }
-        this.player.popcorn.trigger("IriSP.Slice.hide");
     }
-}
+};
 
 IriSP.Widgets.CreateAnnotation.prototype.toggle = function() {
     if (!this.always_visible) {
@@ -212,14 +301,7 @@
             this.show();
         }
     }
-}
-
-IriSP.Widgets.CreateAnnotation.prototype.onBoundsChanged = function(_values) {
-    this.begin = new IriSP.Model.Time(_values[0] || 0);
-    this.end = new IriSP.Model.Time(_values[1] || 0);
-    this.$.find(".Ldt-CreateAnnotation-Begin").html(this.begin.toString());
-    this.$.find(".Ldt-CreateAnnotation-End").html(this.end.toString());
-}
+};
 
 IriSP.Widgets.CreateAnnotation.prototype.addKeyword = function(_keyword) {
     var _field = this.$.find(".Ldt-CreateAnnotation-Description"),
@@ -231,20 +313,25 @@
     );
     _field.val(_contents.replace(/\s{2,}/g,' ').replace(/(^\s+|\s+$)/g,''));
     this.onDescriptionChange();
-}
+};
 
 IriSP.Widgets.CreateAnnotation.prototype.pauseOnWrite = function() {
-    if (this.pause_on_write && !this.player.popcorn.media.paused) {
-        this.player.popcorn.pause();
+    if (this.pause_on_write && !this.media.getPaused()) {
+        this.media.pause();
     }
-}
+};
 
 IriSP.Widgets.CreateAnnotation.prototype.onDescriptionChange = function() {
     var _field = this.$.find(".Ldt-CreateAnnotation-Description"),
         _contents = _field.val();
     _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
+    if (!!_contents) {
+        _field.removeClass("empty");
+    } else {
+        _field.addClass("empty");
+    }
     this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").each(function() {
-        var _rx = IriSP.Model.regexpFromTextOrArray(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
+        var _rx = IriSP.Model.regexpFromTextOrArray(IriSP.jQuery(this).attr("data-text"));
         if (_contents.match(_rx)) {
             IriSP.jQuery(this).addClass("selected");
         } else {
@@ -253,36 +340,51 @@
     });
     this.pauseOnWrite();
     return !!_contents;
-}
+};
 
 IriSP.Widgets.CreateAnnotation.prototype.onTitleChange = function() {
     var _field = this.$.find(".Ldt-CreateAnnotation-Title"),
         _contents = _field.val();
     _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
+    if (!!_contents) {
+        _field.removeClass("empty");
+    } else {
+        _field.addClass("empty");
+    }
     this.pauseOnWrite();
     return !!_contents;
-}
+};
 
 
 IriSP.Widgets.CreateAnnotation.prototype.onCreatorChange = function() {
     var _field = this.$.find(".Ldt-CreateAnnotation-Creator"),
         _contents = _field.val();
     _field.css("border-color", !!_contents ? "#666666" : "#ff0000");
+    if (!!_contents) {
+        _field.removeClass("empty");
+    } else {
+        _field.addClass("empty");
+    }
     this.pauseOnWrite();
     return !!_contents;
-}
+};
 
 /* Fonction effectuant l'envoi des annotations */
 IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() {
     /* Si les champs obligatoires sont vides, on annule l'envoi */
     if (!this.onDescriptionChange() || (this.show_title_field && !this.onTitleChange()) || (this.show_creator_field && !this.onCreatorChange())) {
-        return;
+        return false;
     }
     
-    var _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */
+    if (this.recorder) {
+        this.recorder.stopRecord();
+    }
+    
+    var _this = this,
+        _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */
         _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), /* Création d'un objet source utilisant un sérialiseur spécifique pour l'export */
         _annotation = new IriSP.Model.Annotation(false, _export), /* Création d'une annotation dans cette source avec un ID généré à la volée (param. false) */
-        _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type), /* Récupération du type d'annotation dans lequel l'annotation doit être ajoutée */
+        _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type, true), /* Récupération du type d'annotation dans lequel l'annotation doit être ajoutée */
         _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, _export)), /* Si le Type d'Annotation n'existe pas, il est créé à la volée */
         _url = Mustache.to_html(this.api_endpoint_template, {id: this.source.projectId}); /* Génération de l'URL à laquelle l'annotation doit être envoyée, qui doit inclure l'ID du projet */
     
@@ -298,9 +400,9 @@
      * Nous remplissons les données de l'annotation générée à la volée
      * ATTENTION: Si nous sommes sur un MASHUP, ces éléments doivent se référer AU MEDIA D'ORIGINE
      * */
+    _annotation.setMedia(this.source.currentMedia.id); /* Id du média annoté */
     _annotation.setBegin(this.begin); /*Timecode de début */
     _annotation.setEnd(this.end); /* Timecode de fin */
-    _annotation.setMedia(this.source.currentMedia.id); /* Id du média annoté */
    
     _annotation.setAnnotationType(_annotationType.id); /* Id du type d'annotation */
     if (this.show_title_field) {
@@ -309,16 +411,42 @@
     }
     _annotation.created = new Date(); /* Date de création de l'annotation */
     _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); /* Champ description */
-    _annotation.setTags(this.$.find(".Ldt-CreateAnnotation-TagLi.selected")
-        .map(function() { return IriSP.jQuery(this).attr("tag-id")})); /*Liste des ids de tags */
-    
-    /* Les données créateur/date de création sont envoyées non pas dans l'annotation, mais dans le projet */
+   
+    var tagIds = Array.prototype.map.call(
+        this.$.find(".Ldt-CreateAnnotation-TagLi.selected"),
+        function(el) { return IriSP.jQuery(el).attr("tag-id")}
+    );
+        
+    IriSP._(_annotation.description.match(/#[^\s#.,;]+/g)).each(function(_tt) {
+        var _tag,
+            _tag_title = _tt.replace(/^#/,''),
+            _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;
+        }
+        if (tagIds.indexOf(_tag.id) === -1) {
+            tagIds.push(_tag.id);
+        }
+        
+    })
+   
+    _annotation.setTags(IriSP._(tagIds).uniq()); /*Liste des ids de tags */
+    if (this.audio_url) {
+        _annotation.audio = {
+            src: "mic",
+            mimetype: "audio/mp3",
+            href: this.audio_url
+        };
+    }
     if (this.show_creator_field) {
-        _export.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val();
+        _annotation.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val();
     } else {
-        _export.creator = this.creator_name;
+        _annotation.creator = this.creator_name;
     }
-    _export.created = new Date();
     _exportedAnnotations.push(_annotation); /* Ajout de l'annotation à la liste à exporter */
     _export.addList("annotation",_exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */
     
@@ -336,7 +464,7 @@
                     function() {
                         _this.close_after_send
                         ? _this.hide()
-                        : _this.showScreen("Main");
+                        : _this.show();
                     },
                     _this.after_send_timeout
                 );
@@ -344,10 +472,10 @@
             _export.getAnnotations().removeElement(_annotation, true); /* Pour éviter les doublons, on supprime l'annotation qui a été envoyée */
             _export.deSerialize(_data); /* On désérialise les données reçues pour les réinjecter */
             _this.source.merge(_export); /* On récupère les données réimportées dans l'espace global des données */
-            if (_this.pause_on_write && _this.player.popcorn.media.paused) {
-                _this.player.popcorn.play();
+            if (_this.pause_on_write && _this.media.getPaused()) {
+                _this.media.play();
             }
-            _this.player.popcorn.trigger("IriSP.AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
+            _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
         },
         error: function(_xhr, _error, _thrown) {
             IriSP.log("Error when sending annotation", _thrown);
@@ -362,5 +490,5 @@
     this.showScreen('Wait');
     
     return false;
-}
+};
 
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/DailymotionPlayer.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/DailymotionPlayer.js	Thu Jan 02 16:40:25 2014 +0100
@@ -0,0 +1,104 @@
+IriSP.Widgets.DailymotionPlayer = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.DailymotionPlayer.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.DailymotionPlayer.prototype.defaults = {
+    aspect_ratio: 14/9
+};
+
+IriSP.Widgets.DailymotionPlayer.prototype.draw = function() {
+    
+    if (typeof this.video === "undefined") {
+        this.video = this.media.video;
+    }
+
+    this.height = this.height || Math.floor(this.width / this.aspect_ratio);
+    
+    var _media = this.media,
+        _this = this,
+        _pauseState = true;
+    
+    /* Dailymotion utilise un système de fonctions référencées dans
+     * des variables globales pour la gestion des événements.
+     */
+    
+    window.onDailymotionPlayerReady = function() {
+
+        var _player = document.getElementById(_this.container);
+        
+        _media.getCurrentTime = function() {
+            return new IriSP.Model.Time(1000*_player.getCurrentTime());
+        };
+        _media.getVolume = function() {
+            return _player.getVolume() / 100;
+        };
+        _media.getPaused = function() {
+            return _pauseState;
+        };
+        _media.getMuted = function() {
+            return _player.isMuted();
+        };
+        _media.setCurrentTime = function(_milliseconds) {
+            _seekPause = _pauseState;
+            return _player.seekTo(_milliseconds / 1000);
+        };
+        _media.setVolume = function(_vol) {
+            return _player.setVolume(Math.floor(_vol*100));
+        };
+        _media.mute = function() {
+            return _player.mute();
+        };
+        _media.unmute = function() {
+            return _player.unMute();
+        };
+        _media.play = function() {
+            return _player.playVideo();
+        };
+        _media.pause = function() {
+            return _player.pauseVideo();
+        };
+        
+        _player.addEventListener("onStateChange", "onDailymotionStateChange");
+        _player.addEventListener("onVideoProgress", "onDailymotionVideoProgress");
+        
+        _player.cueVideoByUrl(_this.video);
+        
+        _media.trigger("loadedmetadata");
+    };
+    
+    window.onDailymotionStateChange = function(_state) {
+        switch(_state) {
+            case 1:
+                _media.trigger("play");
+                _pauseState = false;
+                break;
+    
+            case 2:
+                _media.trigger("pause");
+                _pauseState = true;
+                break;
+    
+            case 3:
+                _media.trigger("seeked");
+                break;
+        }
+    };
+    
+    window.onDailymotionVideoProgress = function(_progress) {
+        _media.trigger("timeupdate", new IriSP.Model.Time(_progress.mediaTime * 1000));
+    };
+    
+    var params = {
+        "allowScriptAccess" : "always",
+        "wmode": "opaque"
+    };
+    
+    var atts = {
+        id : this.container
+    };
+
+    swfobject.embedSWF("http://www.dailymotion.com/swf?chromeless=1&enableApi=1", this.container, this.width, this.height, "8", null, null, params, atts);
+    
+};
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/HelloWorld.js
--- a/src/widgets/HelloWorld.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/HelloWorld.js	Thu Jan 02 16:40:25 2014 +0100
@@ -7,13 +7,13 @@
 IriSP.Widgets.HelloWorld = function(player, config) {
     console.log("Calling IriSP.Widget's constructor from IriSP.HelloWorldWidget");
     IriSP.Widgets.Widget.call(this, player, config);
-}
+};
 
 IriSP.Widgets.HelloWorld.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.HelloWorld.prototype.defaults = {
     text: "world"
-}
+};
 
 IriSP.Widgets.HelloWorld.prototype.template =
     '<div class="Ldt-HelloWorld"><p>{{l10n.Hello}} {{text}}</p><p>Looks like we have {{source.contents.annotation.length}} annotations in this feed</p></div>';
@@ -25,9 +25,9 @@
     "en" : {
         "Hello" : "Hello,"
     }
-}
+};
 
 IriSP.Widgets.HelloWorld.prototype.draw = function() {
     this.renderTemplate();
     console.log("HelloWorldWidget was drawn");
-}
\ No newline at end of file
+};
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/HtmlPlayer.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/HtmlPlayer.js	Thu Jan 02 16:40:25 2014 +0100
@@ -0,0 +1,15 @@
+IriSP.Widgets.HtmlPlayer = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.HtmlPlayer.prototype = new IriSP.Widgets.Widget();
+
+
+IriSP.Widgets.HtmlPlayer.prototype.defaults = {
+};
+
+IriSP.Widgets.HtmlPlayer.prototype.draw = function() {
+
+    IriSP.htmlPlayer(this.media, this.$, this);
+    
+};
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/JwpPlayer.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/JwpPlayer.js	Thu Jan 02 16:40:25 2014 +0100
@@ -0,0 +1,122 @@
+IriSP.Widgets.JwpPlayer = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.JwpPlayer.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.JwpPlayer.prototype.defaults = {
+};
+
+IriSP.Widgets.JwpPlayer.prototype.draw = function() {
+    
+    var _opts = {},
+        _player = jwplayer(this.$[0]),
+        _seekPause = false,
+        _pauseState = true;
+    
+    if (typeof this.video === "undefined") {
+        this.video = this.media.video;
+    }
+        
+    _opts.file = this.video;
+    _opts.flashplayer = IriSP.getLib("jwPlayerSWF");
+    _opts.primary = "flash";
+    _opts.fallback = false;
+    _opts.controls = false;
+    _opts.width = this.width;
+    if (this.height) {
+        _opts.height = this.height;
+    }
+    
+    if (this.autostart) { // There seems to be an autostart bug
+        //_opts.autostart = true;
+        //_pauseState = false;
+        //this.media.trigger("play");
+    }
+    
+    if (this.url_transform) {
+        _opts.file = this.url_transform(_opts.file);
+    }
+
+    // Binding functions to jwplayer
+
+    var _media = this.media;
+    
+    _media.on("setcurrenttime", function(_milliseconds) {
+        _seekPause = _pauseState;
+        _player.seek(_milliseconds / 1000);
+    });
+    
+    _media.on("setvolume", function(_vol) {
+        _player.setVolume(Math.floor(_vol*100));
+        _media.volume = _vol;
+    });
+    
+    _media.on("setmuted", function(_muted) {
+        _player.setMute(_muted);
+        _media.muted = _muted;
+    });
+    
+    _media.on("setplay", function() {
+        _player.play(true);
+        _media.paused = false;
+    });
+    
+    _media.on("setpause", function() {
+        _player.pause(true);
+        _media.paused = true;
+    });
+    
+    // Binding jwplater events to media
+    
+    function getVolume() {
+        _media.muted = _player.getMute();
+        _media.volume = _player.getVolume() / 100;
+    }
+    
+    _opts.events = {
+        onReady: function() {
+            getVolume();
+            _media.currentTime = new IriSP.Model.Time(1000*_player.getPosition() || 0);
+            _media.trigger("loadedmetadata");
+        },
+        onTime: function(_progress) {
+            if (_seekPause) {
+                _player.pause(true);
+                _seekPause = false;
+            } else {
+                if (_pauseState && _player.getState() === "PLAYING") {
+                    _pauseState = false;
+                    _media.trigger("play");
+                }
+            }
+            _media.trigger("timeupdate", new IriSP.Model.Time(_progress.position * 1000));
+        },
+        onPlay: function() {
+            if (!_seekPause) {
+                _pauseState = false;
+                _media.trigger("play");
+            }
+        },
+        onPause: function() {
+            _pauseState = true;
+            _media.trigger("pause");
+        },
+        onSeek: function() {
+            _media.trigger("seeked");
+        },
+        onMute: function(_event) {
+            _media.muted = _event.mute;
+            _media.trigger("volumechange");
+        },
+        onVolume: function(_event) {
+            _media.volume = _event.volume / 100;
+            _media.trigger("volumechange");
+        }
+    };
+    
+    _player = _player.setup(_opts);
+    
+    this.jwplayer = _player;
+    
+};
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/KnowledgeConcierge.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/KnowledgeConcierge.css	Thu Jan 02 16:40:25 2014 +0100
@@ -0,0 +1,97 @@
+.Ldt-Kc-Slider {
+    width: 100%; height: 8px; margin: 3px 0; font-size: 8px;
+}
+
+.Ldt-Kc-Canvas {
+    border: 1px solid #999999;
+}
+
+.Ldt-Kc-Related {
+    display: none;
+}
+
+.Ldt-Kc-Related-Empty {
+    text-align: center; font-weight: bold; font-style: italic;
+    font-size: 14px; color: #999999; margin: 5px 0;
+}
+
+.Ldt-Kc-Related h2 {
+    border: none;
+    color: #330099;
+    font-size: 18px;
+    margin: 8px 0 2px;
+    padding: 0 5px;
+}
+
+h3.Ldt-Kc-For-Keywords {
+    border-bottom: 1px solid #666666;
+    color: #000000;
+    font-size: 12px;
+    margin: 2px 0 5px;
+    padding: 0 5px 5px;
+    text-align: right;
+}
+
+.Ldt-Kc-Keywords {
+    color: #d000c0; font-weight: bold;
+}
+
+.Ldt-Kc-Related-Item {
+    width: 235px; float: left; margin: 4px 0; padding: 4px 0;
+}
+
+.Ldt-Kc-Related-Item:hover {
+    background: #e8e8e8;
+}
+
+.Ldt-Kc-Related-Item:nth-child(even) {
+    margin-left: 10px;
+}
+
+.Ldt-Kc-Related-Item a {
+    text-decoration: none;
+}
+
+.Ldt-Kc-Related-Item img {
+    max-width: 80px; max-height: 60px; float: left;
+}
+
+.Ldt-Kc-Related-Item h3, .Ldt-Kc-Related-Item p {
+    margin: 0 0 5px 85px;
+}
+
+.Ldt-Kc-Related-Item h3 {
+    font-size: 14px; font-weight: 600;
+}
+
+.Ldt-Kc-Related-Item h3 a {
+     color: #330099;
+}
+
+.Ldt-Kc-Related-Item h3 a:hover {
+    text-decoration: underline;
+}
+
+.Ldt-Kc-Related-Item p {
+    font-size: 12px;
+}
+
+.Ldt-Kc-Item-Duration {
+    color: #c00000;
+}
+
+.Ldt-Kc-Row {
+    border-bottom: 1px solid #CCCCCC;
+    clear: both; float: left; width: 100%;
+}
+
+.Ldt-Kc-Clearer {
+    clear: both;
+}
+
+.Ldt-Kc-Waiting {
+    display: none;
+    height: 128px;
+    width: 100%;
+    background:url(img/loader.gif) center no-repeat;
+}
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/KnowledgeConcierge.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/KnowledgeConcierge.js	Thu Jan 02 16:40:25 2014 +0100
@@ -0,0 +1,333 @@
+IriSP.Widgets.KnowledgeConcierge = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.KnowledgeConcierge.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.KnowledgeConcierge.prototype.defaults = {
+    width: 600,
+    height: 500,
+    sketch_path: "tmgraph",
+    sketch_files: [ "tmgraph.pde", "physics.pde", "model.pde", "javascript.pde", "menu.pde", "event.pde", "constants.pde", "initialdata.pde"],
+    kc_api_root: "/kn-concierge/",
+    related_api_endpoint: "",
+    use_word_boundaries: false,
+    related_data_type: 'json', // SET TO "jsonp" FOR CROSS-DOMAIN OPERATION
+    related_count: 8,
+};
+
+IriSP.Widgets.KnowledgeConcierge.prototype.messages = {
+    "fr": {
+        related_videos: "Vidéos liées",
+        duration_: "Durée\u00a0:",
+        for_keywords_: "pour le(s) mots-clé(s)\u00a0:",
+        no_matching_videos: "Pas de vidéos correspondantes"
+    },
+    "en": {
+        related_videos: "Related Videos",
+        duration_: "Duration:",
+        for_keywords_: "for keyword(s):",
+        no_matching_videos: "No matching videos"
+    }
+};
+
+IriSP.Widgets.KnowledgeConcierge.prototype.template =
+    '<div class="Ldt-Kc-Slider"></div><canvas class="Ldt-Kc-Canvas" />'
+    + '<div class="Ldt-Kc-Related"><h2>{{ l10n.related_videos }}</h2>'
+    + '<h3 class="Ldt-Kc-For-Keywords">{{l10n.for_keywords_}} <span class="Ldt-Kc-Keywords"></span></h3>'
+    + '<div class="Ldt-Kc-Waiting"></div>'
+    + '<div class="Ldt-Kc-Related-List"></div></div>';
+
+IriSP.Widgets.KnowledgeConcierge.prototype.draw = function() {
+    this.renderTemplate();
+    var _canvasHeight = this.height - 16,
+        _canvasWidth = this.width - 2,
+        _canvas = this.$.find(".Ldt-Kc-Canvas"),
+        _tmpId = IriSP._.uniqueId("Processing-"),
+        _slider = this.$.find(".Ldt-Kc-Slider"),
+        radius = .375 * Math.min(_canvasHeight, _canvasWidth);
+    _canvas.attr({
+        width: _canvasWidth,
+        height: _canvasHeight,
+        id: _tmpId
+    }).css({
+        width: _canvasWidth,
+        height: _canvasHeight
+    });
+    var _this = this,
+        _pjsfiles = IriSP._(this.sketch_files).map(function(_f) { return _this.sketch_path + "/" + _f; }),
+        _selectedText = "",
+        currentNodesList = "",
+        relatedCache = {},
+        relatedRequests = {},
+        relatedTemplate = '<div class="Ldt-Kc-Related-Item"><a href="{{ widget.video_url_base }}{{ media.iri_id }}#keyword={{ escaped_keyword }}"><img src="{{ media.image }}"></a>'
+            + '<h3><a href="{{ widget.video_url_base }}{{ media.iri_id }}#keyword={{ escaped_keyword }}">{{ media.title }}</a></h3><p>{{ description }}</p>'
+            + '<p>{{ widget.l10n.duration_ }} <span class="Ldt-Kc-Item-Duration">{{ duration }}</span></p>'
+            + '</a><div class="Ldt-Kc-Clearer"></div></div>';
+            
+    Processing.loadSketchFromSources(_canvas[0],_pjsfiles);
+    
+    function renderRelated() {
+        var keywords = currentNodesList;
+        _this.$.find(".Ldt-Kc-Related").show();
+        if (typeof relatedCache[keywords] === "undefined") {
+            return;
+        }
+        _this.$.find(".Ldt-Kc-Waiting").hide();
+        if (relatedCache[keywords].length) {
+            var _html = '<div class="Ldt-Kc-Row">';
+            IriSP._(relatedCache[keywords]).each(function(media, i) {
+                var _tmpldata = {
+                    widget: _this,
+                    media: media,
+                    description: media.description.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1&hellip;'),
+                    duration: new IriSP.Model.Time(media.duration).toString(),
+                    escaped_keyword: encodeURIComponent(keywords.split(",")[0])
+                };
+                _html += Mustache.to_html(relatedTemplate, _tmpldata);
+                if (i % 2) {
+                    _html += '</div><div class="Ldt-Kc-Row">';
+                }
+            });
+            _html += '</div>';
+            _this.$.find(".Ldt-Kc-Related-List").html(_html);
+        } else {
+            _this.$.find(".Ldt-Kc-Related-List").html("<p class='Ldt-Kc-Related-Empty'>" + _this.l10n.no_matching_videos + "</p>");
+        }
+    }    
+
+    function triggerSearch(text) {
+        if (_selectedText !== text) {
+            _selectedText = text;
+            _this.source.getAnnotations().search(text);
+        }
+    }
+    
+    function searchNodes(tags) {
+        var _tlist = (_this.use_word_boundaries ? IriSP._(tags).map(function(t) { return "\\\\y" + t + "\\\\y" }) : tags),
+            _q = "(?i)(" + _tlist.join("|") + ")";
+        jQuery.getJSON(
+            _this.kc_api_root + "topics.jsp",
+            {
+                proj: _this.project_id,
+                q: _q
+            },
+            function(data) {
+                if (data && data.items && data.items.length) {
+                    for (var i=0, l=data.items.length; i<l; i++) {
+                        var node = data.items[i];
+                        if (i == 0) {
+                            _pjs.initNode(node.id, node.name, node.grp, node.uid, node.proj);
+                            var node = _pjs.findNode(node.id, node.proj);
+                        } else {
+                            var node = _pjs.newNode(node.id, node.name, node.grp, node.uid, node.proj);
+                            node.root = true;
+                            node.fix();
+                        }
+                        _fns.countassoc(node.id, node.proj);
+                        if (l > 1) {
+                            node.position(Math.floor(radius*Math.sin(2 * Math.PI * i / l)),Math.floor(radius*Math.cos(2 * Math.PI * i / l)));
+                        }
+                    }
+                }
+            }
+        );
+    }
+    
+    function showRelated(nodetexts) {
+        currentNodesList = nodetexts;
+        _this.$.find(".Ldt-Kc-Related-List").html("");
+        _this.$.find(".Ldt-Kc-Keywords").html(nodetexts.replace(/\,/g,", "));
+        if (typeof relatedCache[nodetexts] === "undefined") {
+            _this.$.find(".Ldt-Kc-Waiting").show();
+            if (relatedRequests[nodetexts]) {
+                return;
+            }
+            relatedRequests[nodetexts] = true;
+            IriSP.jQuery.ajax({
+                url: _this.related_api_endpoint,
+                data: {
+                    format: _this.related_data_type,
+                    keywords: nodetexts
+                },
+                dataType: _this.related_data_type,
+                success: function(data) {
+                    relatedCache[nodetexts] = IriSP._(data.objects)
+                        .chain()
+                        .filter(function(o) {
+                            return o.iri_id !== _this.media.id;
+                        })
+                        .sortBy(function(o) {
+                            return - o.score;
+                        })
+                        .first(_this.related_count)
+                        .value();
+                    renderRelated();
+                }
+            });
+        } else {
+            renderRelated();
+        }
+    }
+    
+    function rootNode(id, proj) {
+        jQuery.getJSON(
+            _this.kc_api_root + "topic.jsp",
+            {
+                id: id,
+                proj: proj
+            },
+            function(response) {
+                if (response != null && response.items.length > 0){
+                    item = response.items[0];
+                    _pjs.initNode(item.id, item.name, item.grp, item.uid, item.proj);
+                    _fns.countassoc(item.id, item.proj);
+                }
+            }
+        );
+    }
+    
+    function bindJavascript() {
+        _pjs = Processing.getInstanceById(_tmpId);
+        if (_pjs && typeof _pjs.bindJavascript === "function") {
+            setTimeout(function() {
+                _pjs.bindJavascript(_fns);
+                _pjs.setSize(_canvasWidth,_canvasHeight);
+                var _edit = false,
+                    _teamMode = true;
+                _pjs.saveMode("en",false,_teamMode,false,"both",_edit);
+                rootNode(_this.topic_id, _this.project_id);
+                _slider.slider({
+                    min: -20,
+                    max: 20,
+                    value: 0,
+                    range: "min",
+                    slide: function(event, ui) {
+                        _pjs.zoom(Math.exp(ui.value / 10));
+                    }
+                });
+            }, 1000);
+        } else {
+            setTimeout(bindJavascript, 1000); 
+        }
+    }
+    var currentSelection = null;
+    var _fns = {
+        adjacentnodes: function(id, proj, adj, both) {
+            jQuery.ajax({
+                url: _this.kc_api_root + "associations-bd.jsp",
+                cache: false,
+                data: {
+                    id: id,
+                    proj: proj,
+                    both: both,
+                    adj: adj
+                },
+                success: function(response) {
+                    if (response.items.length > 0){
+                        for(i = 0, end = response.items.length; i < end; i++) {
+                            item = response.items[i];
+                            _pjs.addEdge(item.asc_id, item.id, item.from_proj, item.to_id, item.to_proj,
+                                        item.r_name, item.r_from,  item.r_to, item.uid, item.proj);
+                            _pjs.setNodeName( item.id,   item.from_proj,item.name);
+                            _pjs.setNodeValue(item.id,   item.from_proj,item.name,   item.grp,   item.abst,   item.from_uid);
+                            if (item.from_assoc!=null) {
+                                _pjs.setNodeAssoc(item.id, item.from_proj, item.from_assoc);
+                            }
+                            _pjs.setNodeName( item.to_id,item.to_proj,  item.to_name);
+                            _pjs.setNodeValue(item.to_id,item.to_proj,  item.to_name,item.to_grp,item.to_abst,item.to_uid);
+                            if (item.to_assoc!=null) {
+                                _pjs.setNodeAssoc(item.to_id, item.to_proj, item.to_assoc);
+                            }
+                        }
+                        return response;
+                    } else {
+                        //.debug('No such topic.');
+                        return null;
+                    }
+                }
+            });
+        },
+        setscale: function(scl){
+            _slider.slider("value", 10*Math.log(scl));
+        },
+        countassoc: function(id, proj) {
+            jQuery.ajax({
+                url: _this.kc_api_root + "count-assoc.jsp",
+                data: {
+                    id: id,
+                    proj: proj
+                },
+                success: function(response) {
+                    if (response.items.length > 0){
+                        for(i = 0, end = response.items.length; i < end; i++) {
+                            item = response.items[i];
+                            _pjs.setNodeValue(item.id, item.proj, item.name, item.grp, item.abst);
+                            if (item.assoc!=null) _pjs.setNodeAssoc(item.id, item.proj, item.assoc);
+                            if (item.mass!=null) _pjs.setNodeMass( item.id, item.proj, item.mass);
+                        }
+                    }
+                }
+            });
+        },
+        username: function() {
+            var nodes = _pjs.getNodes().values().toArray(),
+                nodetexts = IriSP._(nodes).chain().pluck("name").sortBy().value().join(",");
+            showRelated(nodetexts);
+        },
+        mousemove: function(selection) {
+            if (selection !== currentSelection) {
+                if (selection) {
+                    triggerSearch(selection.name);
+                }
+                currentSelection = selection;
+            }
+        },
+        click: function(selection) {
+            if (selection) {
+                triggerSearch(selection.name);
+                showRelated(selection.name);
+            } else {
+                triggerSearch();
+            }
+        }
+    };
+    var uselessfuncts = [
+        "selectnode", "selectedge", "topicnode","group_shapes",
+        "allbackup", "allretrieve", "new_topic", "pedia", "set_mode",
+        "new_relation", "startexpand", "endexpand", "new_select" //, "mouseover" //, "username"
+    ];
+    
+    IriSP._(uselessfuncts).each(function(funcname) {
+        _fns[funcname] = function() {
+//            console.log("Function", funcname, "called with arguments", arguments);
+        }
+    });
+    
+    this.getWidgetAnnotations().forEach(function(annotation) {
+        annotation.on("click", function() {
+            var _tags = annotation.getTagTexts();
+            if (_tags.length) {
+                searchNodes(_tags);
+            }
+        });
+    });
+    
+    this.source.getTags().forEach(function(tag) {
+        tag.on("click", function() {
+            if (tag.title) {
+                searchNodes([tag.title]);
+            }
+        });
+    });
+    
+    var keywmatch = document.location.hash.match(/keyword=([^#?&]+)/);
+    if (keywmatch) {
+        this.player.on("widgets-loaded", function() {
+            triggerSearch(decodeURIComponent(keywmatch[1]));
+        });
+    }
+    
+    bindJavascript();
+    
+};
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/MediaList.js
--- a/src/widgets/MediaList.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/MediaList.js	Thu Jan 02 16:40:25 2014 +0100
@@ -7,16 +7,16 @@
 
 IriSP.Widgets.MediaList.prototype.messages = {
     "fr": {
-        now_playing: "Média en cours",
-        all_media: "Tous les medias",
-        other_media: "Autres médias"
+        now_playing: "Vidéo en cours",
+        all_media: "Toutes les vidéos",
+        other_media: "Autres vidéos"
     },
     "en": {
         now_playing: "Now playing",
-        all_media: "All media",
-        other_media: "Other media"
+        all_media: "All videos",
+        other_media: "Other videos"
     }
-}
+};
 
 IriSP.Widgets.MediaList.prototype.defaults = {
     default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
@@ -49,17 +49,22 @@
     var _n = this.refresh(true);
     if (this.searchString) {
         if (_n) {
-            this.player.popcorn.trigger("IriSP.search.matchFound");
+            this.player.trigger("search.matchFound");
         } else {
-            this.player.popcorn.trigger("IriSP.search.noMatchFound");
+            this.player.trigger("search.noMatchFound");
         }
     }
-}
+};
 
 IriSP.Widgets.MediaList.prototype.draw = function() {
-    this.bindPopcorn("timeupdate","onTimeupdate");
     this.$.addClass("Ldt-MediaListWidget")
     this.renderTemplate();
+    var _this = this;
+    if (typeof this.media.getMedias === "function") {
+        this.media.on("enter-annotation", function(_a) {
+            _this.redraw(_a.getMedia());
+        });
+    }
     this.redraw();
 };
 
@@ -76,9 +81,9 @@
                 left: _scale * _annotation.begin,
                 width: _scale * (_annotation.end - _annotation.begin),
                 color: ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.default_color )
-            }
-        })
-}
+            };
+        });
+};
 
 IriSP.Widgets.MediaList.prototype.redraw = function(_media) {
     if (typeof _media !== "undefined") {
@@ -116,21 +121,10 @@
                 title: _media.title,
                 description: _media.description,
                 segments: _this.getSegments(_media)
-            })
+            });
         }).join("");
         this.$.find('.Ldt-MediaList-OtherList').html(_html);
     } else {
         this.$.find('.Ldt-MediaList-Other').hide();
     }
 };
-
-IriSP.Widgets.MediaList.prototype.onTimeupdate = function() {
-    var _media = this.source.currentMedia;
-    if (_media.elementType === "mashup") {
-        _media = _media.getMediaAtTime(this.player.popcorn.currentTime() * 1000);
-    }
-    if (typeof _media !== "undefined" && _media.id !== this.lastMedia) {
-        this.lastMedia = _media.id;
-        this.redraw(_media);
-    }
-}
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Mediafragment.js
--- a/src/widgets/Mediafragment.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Mediafragment.js	Thu Jan 02 16:40:25 2014 +0100
@@ -4,23 +4,33 @@
     this.last_hash_value = "";
     window.onhashchange = this.functionWrapper("goToHash");
     if (typeof window.addEventListener !== "undefined") {
+        var _this = this;
         window.addEventListener('message', function(_msg) {
             if (/^#/.test(_msg.data)) {
-                this.setWindowHash(_msg.data);
+                _this.setWindowHash(_msg.data);
             }
-        })
+        });
     };
-    this.bindPopcorn("pause","setHashToTime");
-    this.bindPopcorn("seeked","setHashToTime");
-    this.bindPopcorn("IriSP.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.goToHash();
-}
+    this.onMediaEvent("setpause","setHashToTime");
+    var _this = this;
+    this.getWidgetAnnotations().forEach(function(_annotation) {
+        _annotation.on("click", function() {
+            _this.setHashToAnnotation(_annotation.id);
+        });
+    });
+    if (this.media.loadedMetadata) {
+        this.goToHash();
+    } else {
+        this.onMediaEvent("loadedmetadata","goToHash");
+    }
+};
 
 IriSP.Widgets.Mediafragment.prototype.setWindowHash = function(_hash) {
     if (typeof window.history !== "undefined" && typeof window.history.replaceState !== "undefined") {
@@ -28,7 +38,7 @@
     } else {
         document.location.hash = _hash;
     }
-}
+};
 
 IriSP.Widgets.Mediafragment.prototype.getLastHash = function() {
     var _tab = document.location.hash.replace(/^#/,'').split('&');
@@ -39,7 +49,7 @@
         _tab.push(this.last_hash_key + '=' + this.last_hash_value);
     }
     return '#' + _tab.join('&');
-}
+};
 
 IriSP.Widgets.Mediafragment.prototype.goToHash = function() {
     if (document.location.hash !== this.getLastHash()) {
@@ -52,27 +62,25 @@
                 if (this.last_hash_key == "id") {
                     var _annotation = this.source.getElement(this.last_hash_value);
                     if (typeof _annotation !== "undefined") {
-                        this.player.popcorn.currentTime(_annotation.begin.getSeconds());
+                        this.media.setCurrentTime(_annotation.begin);
                     }
                 }
                 if (this.last_hash_key == "t") {
-                    this.player.popcorn.currentTime(this.last_hash_value);
+                    this.media.setCurrentTime(1000*this.last_hash_value);
                 }
                 break;
             }
         }
     }
-}
+};
 
 IriSP.Widgets.Mediafragment.prototype.setHashToAnnotation = function(_annotationId) {
     this.setHash( 'id', _annotationId );
-}
+};
 
-IriSP.Widgets.Mediafragment.prototype.setHashToTime = function(_time) {
-    if (_time !== NaN) {
-        this.setHash( 't', this.player.popcorn.currentTime() );
-    }
-}
+IriSP.Widgets.Mediafragment.prototype.setHashToTime = function() {
+    this.setHash( 't', this.media.getCurrentTime().getSeconds() );
+};
 
 IriSP.Widgets.Mediafragment.prototype.setHash = function(_key, _value) {
     if (!this.blocked && (this.last_hash_key !== _key || this.last_hash_value !== _value)) {
@@ -81,11 +89,11 @@
         var _hash = this.getLastHash();
         this.setWindowHash(_hash);
         if (window.parent !== window) {
-            window.parent.postMessage(_hash,"*")
+            window.parent.postMessage(_hash,"*");
         }
         this.block();
     }
-}
+};
 
 IriSP.Widgets.Mediafragment.prototype.unblock = function() {
     if (typeof this.blockTimeout !== "undefined") {
@@ -93,12 +101,12 @@
     }
     this.blockTimeout = undefined;
     this.blocked = false;
-}
+};
 
 IriSP.Widgets.Mediafragment.prototype.block = function() {
     if (typeof this.blockTimeout !== "undefined") {
         window.clearTimeout(this.blockTimeout);
     }
     this.blocked = true;
-    this.blockTimeout = window.setTimeout(this.functionWrapper("unblock"), 1000);
-}
+    this.blockTimeout = window.setTimeout(this.functionWrapper("unblock"), 1500);
+};
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/MultiSegments.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/MultiSegments.js	Thu Jan 02 16:40:25 2014 +0100
@@ -0,0 +1,136 @@
+IriSP.Widgets.MultiSegments = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.MultiSegments.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.MultiSegments.prototype.defaults = {
+    annotation_show_arrow: true,
+    annotation_start_minimized: false,
+    annotation_show_annotation_type: true,
+    show_all: false
+};
+
+IriSP.Widgets.MultiSegments.prototype.draw = function() {
+    var _this = this,
+        lines = [],
+        currentLine = null,
+        segmentsopts = {},
+        annotationopts = {};
+    IriSP._(this).each(function(_v,_k) {
+        if (/^segments_/.test(_k)) {
+            segmentsopts[_k.replace(/^segments_/,"")] = _v;
+        }
+        if (/^annotation_/.test(_k)) {
+            annotationopts[_k.replace(/^annotation_/,"")] = _v;
+        }
+    });
+    this.source.getAnnotationTypes().forEach(function(_anntype) {
+        var segments = _anntype.getAnnotations().filter(function(_ann) {
+            return _ann.getDuration() > 0;
+        });
+        if (segments.length) {
+            
+            var visible = false;
+            
+            var line = {
+                segmentWidget: IriSP.jQuery("<div>"),
+                annotationWidget: IriSP.jQuery("<div>"),
+                hasSegmentsNow: function() {
+                    var _time = _this.media.getCurrentTime();
+                    return !!segments.filter(function(_annotation) {
+                        return _annotation.begin <= _time && _annotation.end > _time;
+                    }).length;
+                },
+                hide: function() {
+                    if (visible) {
+                        visible = false;
+                        this.annotationWidget.slideUp();
+                    }
+                },
+                show: function() {
+                    if (!visible) {
+                        visible = true;
+                        this.annotationWidget.slideDown();
+                    }
+                }
+            };
+                
+                
+            line.segmentWidget
+                .addClass("Ldt-MultiSegments-Segment")
+                .appendTo(_this.$);
+                
+            if (!_this.show_all) {
+                line.segmentWidget.mouseenter(function() {
+                    if (line.hasSegmentsNow()) {
+                        currentLine = line;
+                        checkVisibilities();
+                    }
+                });
+            }
+            
+            line.annotationWidget
+                .addClass("Ldt-MultiSegments-Annotation")
+                .appendTo(_this.$)
+                .hide();
+                
+            _this.insertSubwidget(
+                line.segmentWidget,
+                IriSP._({
+                    type: "Segments",
+                    annotation_type: _anntype,
+                    width: _this.width
+                }).extend(segmentsopts)
+            );
+            
+            _this.insertSubwidget(
+                line.annotationWidget,
+                IriSP._({
+                    type: "Annotation",
+                    annotation_type: _anntype,
+                    width: _this.width
+                }).extend(annotationopts)
+            );
+            
+            lines.push(line);
+        }
+    });
+    
+    // open line on segment click
+    $j(document).on("click",".Ldt-Segments-Segment",function(e){
+    	if (!_this.show_all && currentLine && !currentLine.hasSegmentsNow()) {
+            currentLine = undefined;
+        }
+        IriSP._(lines).each(function(line) {
+        	if($j(e.target).parent().parent()[0]==line.segmentWidget[0]){
+        		currentLine = line;
+        		line.show();
+        	} else {
+                line.hide();
+            }
+        });
+    });
+    
+    //var _annotationWidgets = _this.$.find(".Ldt-MultiSegments-Annotation");
+    
+    function checkVisibilities(_time) {
+        /*if (!_this.show_all && currentLine && !currentLine.hasSegmentsNow()) {
+            currentLine = undefined;
+        }
+        IriSP._(lines).each(function(line) {
+            if (line.hasSegmentsNow()) {
+                if (!_this.show_all && !currentLine) {
+                    currentLine = line;
+                }
+                if (_this.show_all || line === currentLine) {
+                    line.show();
+                } else {
+                    line.hide();
+                }
+            } else {
+                line.hide();
+            }
+        });*/
+    }
+};
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Polemic.js
--- a/src/widgets/Polemic.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Polemic.js	Thu Jan 02 16:40:25 2014 +0100
@@ -15,11 +15,12 @@
         _to_: " to ",
         _annotations: " annotation(s)"
     }
-}
+};
+
 IriSP.Widgets.Polemic.prototype.defaults = {
     element_width : 5,
     element_height : 5,
-    max_elements : 15,
+    max_elements: 20,
     annotation_type : "tweet",
     defaultcolor : "#585858",
     foundcolor : "#fc00ff",
@@ -47,45 +48,9 @@
     ]
 };
 
-IriSP.Widgets.Polemic.prototype.onSearch = function(searchString) {
-    this.searchString = typeof searchString !== "undefined" ? searchString : '';
-    var _found = 0,
-        _re = IriSP.Model.regexpFromTextOrArray(searchString, true),
-        _this = this;
-    this.$tweets.each(function() {
-        var _el = IriSP.jQuery(this);
-        if (_this.searchString) {
-            if (_re.test(_el.attr("tweet-title"))) {
-                _el.css({
-                    "background" : _this.foundcolor,
-                    "opacity" : 1
-                });
-                _found++;
-            } else {
-                _el.css({
-                    "background" : _el.attr("polemic-color"),
-                    "opacity" : .3
-                });
-            }
-        } else {
-            _el.css({
-                "background" : _el.attr("polemic-color"),
-                "opacity" : 1
-            });
-        }
-    });
-    if (this.searchString) {
-        if (_found) {
-            this.player.popcorn.trigger("IriSP.search.matchFound");
-        } else {
-            this.player.popcorn.trigger("IriSP.search.noMatchFound");
-        }
-    }
-}
-
 IriSP.Widgets.Polemic.prototype.draw = function() {
     
-    this.bindPopcorn("timeupdate", "onTimeupdate");
+    this.onMediaEvent("timeupdate", "onTimeupdate");
     this.$zone = IriSP.jQuery('<div>');
     this.$zone.addClass("Ldt-Polemic");
     this.$.append(this.$zone);
@@ -102,6 +67,7 @@
         
     this.$zone.append(this.$elapsed);
     
+    // we don't filter with null duration anymore
     var _slices = [],
         _slice_count = Math.floor( this.width / this.element_width ),
         _duration = this.source.getDuration(),
@@ -117,10 +83,10 @@
                 begin : _begin.toString(),
                 end : _end.toString(),
                 annotations : _list.filter(function(_annotation) {
-                    return _annotation.begin >= _begin && _annotation.end < _end;
+                    return _annotation.begin >= _begin && _annotation.begin < _end;
                 }),
                 polemicStacks : []
-            }
+            };
             
         for (var _j = 0; _j < this.polemics.length; _j++) {
             var _polemic = _res.annotations.searchByDescription(this.polemics[_j].keywords);
@@ -149,7 +115,7 @@
             
             function displayAnnotation(_elx, _ely, _pol, _col, _annotation) {
                 var _html = Mustache.to_html(
-                    '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id={{media_id}}, polemic={{polemic}}" polemic-color="{{color}}"'
+                    '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}, polemic:{{polemic}}, time:{{time}}" polemic-color="{{color}}"'
                     + ' tweet-title="{{title}}" annotation-id="{{id}}" style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>',
                 {
                     id: _annotation.id,
@@ -160,7 +126,8 @@
                     color: _col,
                     width: (_this.element_width-1),
                     height: _this.element_height,
-                    title: _annotation.title
+                    title: _annotation.title,
+                    time: _annotation.begin.toString()
                 });
                 var _el = IriSP.jQuery(_html);
                 _el.mouseover(function() {
@@ -168,16 +135,34 @@
                 }).mouseout(function() {
                     _annotation.trigger("unselect");
                 }).click(function() {
-                    _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _annotation.id);
-                    _this.player.popcorn.trigger("IriSP.Tweet.show", _annotation.id);
+                    _annotation.trigger("click");
+                    return false;
                 });
+                IriSP.attachDndData(_el, {
+                	title: _annotation.title,
+                	description: _annotation.description,
+                	image: _annotation.thumbnail,
+                	uri: (typeof _annotation.url !== "undefined" 
+		                ? _annotation.url
+		                : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id))
+                });
+            	// test if annotation has several colors.
+            	var colAr = [];
+            	for (var _j = 0; _j < _this.polemics.length; _j++) {
+            		if( IriSP.Model.regexpFromTextOrArray( _this.polemics[_j].keywords ).test( _annotation.title ) ){
+            			colAr.push(_this.polemics[_j].color);
+            		}
+                }
+            	// display annotation
                 _annotation.on("select", function() {
-                    _this.tooltip.show(
-                        Math.floor(_elx + (_this.element_width - 1) / 2),
-                        _ely,
-                        _annotation.title,
-                        _col
-                    );
+                    if (_this.tooltip) {
+                        _this.tooltip.show(
+                            + Math.floor(_elx + (_this.element_width - 1) / 2),
+                            + _ely,
+                            _annotation.title,
+                            ( (colAr.length>1) ? colAr : _col )
+                        );
+                    }
                     _this.$tweets.each(function() {
                         var _e = IriSP.jQuery(this);
                         _e.css(
@@ -187,9 +172,23 @@
                     });
                 });
                 _annotation.on("unselect", function() {
-                    _this.tooltip.hide();
+                    if (_this.tooltip) {
+                        _this.tooltip.hide();
+                    }
                     _this.$tweets.css("opacity",1);
                 });
+                _annotation.on("found", function() {
+                    _el.css({
+                        "background" : _this.foundcolor,
+                        "opacity" : 1
+                    });
+                });
+                _annotation.on("not-found", function() {
+                    _el.css({
+                        "background" : _col,
+                        "opacity" : .3
+                    });
+                });
                 _this.$zone.append(_el);
             }
             
@@ -214,9 +213,15 @@
             
             this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv");
             
-            this.bindPopcorn("IriSP.search", "onSearch");
-            this.bindPopcorn("IriSP.search.closed", "onSearch");
-            this.bindPopcorn("IriSP.search.cleared", "onSearch");
+            this.source.getAnnotations().on("search-cleared", function() {
+                _this.$tweets.each(function() {
+                    var _el = IriSP.jQuery(this);
+                    _el.css({
+                        "background" : _el.attr("polemic-color"),
+                        "opacity" : 1
+                    });
+                });
+            });
             
         } else {
             this.$zone.hide();
@@ -257,7 +262,7 @@
         IriSP._(_slices).forEach(function(_slice) {
             var _y = _this.height,
                 _nums = _slice.annotations.length + "," + IriSP._(_slice.polemicStacks).map(function(_annotations) {
-                    return _annotations.length
+                    return _annotations.length;
                 }).join(",");
             if (_slice.annotations.length) {
                 var _h = Math.ceil(_scale * _slice.annotations.length);
@@ -287,15 +292,19 @@
                     _html = '<p>' + _this.l10n.from_ + _el.attr("begin-time") + _this.l10n._to_ + _el.attr("end-time") + '</p>';
                 for (var _i = 0; _i <= _this.polemics.length; _i++) {
                     var _color = _i ? _this.polemics[_i - 1].color : _this.defaultcolor;
-                    _html += '<div class="Ldt-Tooltip-Color" style="background: ' + _color + '"></div><p>' + _nums[_i] + _this.l10n._annotations + '</p>'
+                    _html += '<div class="Ldt-Tooltip-AltColor" style="background: ' + _color + '"></div><p>' + _nums[_i] + _this.l10n._annotations + '</p>';
                 }
-                _this.tooltip.show(_el.attr("pos-x"), _el.attr("pos-y"), _html);
+                if (_this.tooltip) {
+                    _this.tooltip.show(+ _el.attr("pos-x"), + _el.attr("pos-y"), _html);
+                }
             })
             .mouseout(function() {
-                _this.tooltip.hide();
-            })
+                if (_this.tooltip) {
+                    _this.tooltip.hide();
+                }
+            });
             
-    }
+    };
     
     this.$position = IriSP.jQuery('<div>').addClass("Ldt-Polemic-Position");
         
@@ -303,20 +312,28 @@
     
     this.$zone.click(function(_e) {
         var _x = _e.pageX - _this.$zone.offset().left;
-        _this.player.popcorn.currentTime(_this.source.getDuration().getSeconds() * _x / _this.width);
+        _this.media.setCurrentTime(_this.media.duration * _x / _this.width);
     });
     
     this.$.append('<div class="Ldt-Polemic-Tooltip"></div>');
     
-    this.insertSubwidget(this.$.find(".Ldt-Polemic-Tooltip"), "tooltip", { type: "Tooltip" });
-}
+    this.insertSubwidget(
+        this.$.find(".Ldt-Polemic-Tooltip"),
+        {
+            type: "Tooltip",
+            min_x: 0,
+            max_x: this.width
+        },
+        "tooltip"
+    );
+};
 
-IriSP.Widgets.Polemic.prototype.onTimeupdate = function() {
-    var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds());
+IriSP.Widgets.Polemic.prototype.onTimeupdate = function(_time) {
+    var _x = Math.floor( this.width * _time / this.media.duration);
     this.$elapsed.css({
         width:  _x + "px"
     });
     this.$position.css({
         left: _x + "px"
-    })
-}
+    });
+};
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/PopcornPlayer.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/PopcornPlayer.js	Thu Jan 02 16:40:25 2014 +0100
@@ -0,0 +1,138 @@
+IriSP.Widgets.PopcornPlayer = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.PopcornPlayer.prototype = new IriSP.Widgets.Widget();
+
+/* A Popcorn-based player for HTML5 Video, Youtube and Vimeo */
+
+IriSP.Widgets.PopcornPlayer.prototype.defaults = {
+};
+
+IriSP.Widgets.PopcornPlayer.prototype.draw = function() {
+
+    
+    if (typeof this.video === "undefined") {
+        this.video = this.media.video;
+    }
+    
+    if (this.url_transform) {
+        this.video = this.url_transform(this.video);
+    }
+    
+    if (/^(https?:\/\/)?(www\.)?vimeo\.com/.test(this.video)) {
+        
+        /* VIMEO */
+        
+        var _popcorn = Popcorn.vimeo(this.container, this.video);
+        
+    } else if (/^(https?:\/\/)?(www\.)?youtube\.com/.test(this.video)) {
+        
+        /* YOUTUBE */
+       
+        var _urlparts = this.video.split(/[?&]/),
+            _params = {};
+        for (var i = 1; i < _urlparts.length; i++) {
+            var _ppart = _urlparts[i].split('=');
+            _params[_ppart[0]] = decodeURIComponent(_ppart[1]);
+        }
+        _params.controls = 0;
+        _params.modestbranding = 1;
+        if (this.autostart || this.autoplay) {
+            _params.autoplay = 1;
+        }
+        _url = _urlparts[0] + '?' + IriSP.jQuery.param(_params);
+        
+        var _popcorn = Popcorn.youtube(this.container, _url);
+        
+    } else {
+        
+        /* DEFAULT HTML5 */
+        
+        var _tmpId = IriSP._.uniqueId("popcorn"),
+            _videoEl = IriSP.jQuery('<video>');
+        _videoEl.attr({
+            id : _tmpId,
+            width : this.width,
+            height : this.height || undefined
+        });
+        if(typeof this.video === "string"){
+            _videoEl.attr("src",this.video);
+        } else {
+            for (var i = 0; i < this.video.length; i++) {
+                var _srcNode = IriSP.jQuery('<source>');
+                _srcNode.attr({
+                    src: this.video[i].src,
+                    type: this.video[i].type
+                });
+                _videoEl.append(_srcNode);
+            }
+        }
+        this.$.html(_videoEl);
+        var _popcorn = Popcorn("#" + _tmpId);
+        if (this.autostart || this.autoplay) {
+            _popcorn.autoplay(true);
+        }
+    }
+    
+    var _media = this.media;
+    
+    // Binding functions to Popcorn
+    
+    _media.on("setcurrenttime", function(_milliseconds) {
+        _popcorn.currentTime(_milliseconds / 1000);
+    });
+    
+    _media.on("setvolume", function(_vol) {
+        _popcorn.volume(_vol);
+        _media.volume = _vol;
+    });
+    
+    _media.on("setmuted", function(_muted) {
+        _popcorn.muted(_muted);
+        _media.muted = _muted;
+    });
+    
+    _media.on("setplay", function() {
+        _popcorn.play();
+    });
+    
+    _media.on("setpause", function() {
+        _popcorn.pause();
+    });
+    
+    // Binding Popcorn events to media
+    
+    function getVolume() {
+        _media.muted = _popcorn.muted();
+        _media.volume = _popcorn.volume();
+    }
+    
+    _popcorn.on("loadedmetadata", function() {
+        getVolume();
+        _media.trigger("loadedmetadata");
+        _media.trigger("volumechange");
+    });
+    
+    _popcorn.on("timeupdate", function() {
+        _media.trigger("timeupdate", new IriSP.Model.Time(1000*_popcorn.currentTime()));
+    });
+    
+    _popcorn.on("volumechange", function() {
+        getVolume();
+        _media.trigger("volumechange");
+    });
+    
+    _popcorn.on("play", function() {
+        _media.trigger("play");
+    });
+    
+    _popcorn.on("pause", function() {
+        _media.trigger("pause");
+    });
+    
+    _popcorn.on("seeked", function() {
+        _media.trigger("seeked");
+    });
+    
+};
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Segments.css
--- a/src/widgets/Segments.css	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Segments.css	Thu Jan 02 16:40:25 2014 +0100
@@ -2,28 +2,17 @@
  * Segments Widget
  */
 
-.Ldt-Segments-List {
-    width: 100%; height: 100%;
-}
-
 .Ldt-Segments-Segment {
-    position: absolute; height: 100%; opacity: .5; filter:alpha(opacity=50); margin-left: -1px; border-left: 1px solid #ffffff;
-}
-
-.Ldt-Segments-Segment.inactive, .Ldt-Segments-Segment.unfound {
-    opacity: .2; filter:alpha(opacity=20);
-}
-
-.Ldt-Segments-Segment.active, .Ldt-Segments-Segment.found {
-    opacity: 1; filter:alpha(opacity=100);
+    position: absolute; margin-left: -1px; border: 1px solid #ffffff;
 }
 
 .Ldt-Segments-Position {
     background: #fc00ff;
     position: absolute;
-    top: 0;
+    top: -1px;
     left: 0;
     margin-left: -1px;
     width: 2px;
-    height: 100%;
+    bottom: -1px;
+    z-index: 80000;
 }
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Segments.js
--- a/src/widgets/Segments.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Segments.js	Thu Jan 02 16:40:25 2014 +0100
@@ -9,7 +9,11 @@
 IriSP.Widgets.Segments.prototype.defaults = {
     annotation_type : "chap",
     colors: ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],
-    height: 10
+    line_height: 8,
+    background: "#e0e0e0",
+    overlap: .25,
+    found_color: "#FF00FC",
+    faded_found_color: "#ff80fc"
 };
 
 IriSP.Widgets.Segments.prototype.template =
@@ -18,41 +22,70 @@
     + '<div class="Ldt-Segments-Tooltip"></div>';
 
 IriSP.Widgets.Segments.prototype.annotationTemplate =
-    '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}" segment-text="{{text}}"'
-    + 'style="left:{{left}}px; width:{{width}}px; background:{{color}}"></div>'
+    '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}, from:{{from}}, to:{{to}}" segment-text="{{text}}"'
+    + 'style="top:{{top}}px; height:{{height}}px; left:{{left}}px; width:{{width}}px; background:{{medcolor}}" data-base-color="{{color}}" data-low-color="{{lowcolor}}" data-medium-color="{{medcolor}}"></div>';
 
 
 IriSP.Widgets.Segments.prototype.draw = function() {
-    this.bindPopcorn("IriSP.search", "onSearch");
-    this.bindPopcorn("IriSP.search.closed", "onSearch");
-    this.bindPopcorn("IriSP.search.cleared", "onSearch");
-    this.bindPopcorn("timeupdate", "onTimeupdate");
-    
+    this.onMediaEvent("timeupdate", "onTimeupdate");
     this.renderTemplate();
     
-    var _list = this.getWidgetAnnotations(),
+    var _list = this.getWidgetAnnotations().filter(function(_ann) {
+            return _ann.getDuration() > 0;
+        }),
         _this = this,
-        _scale = this.width / this.source.getDuration();
-    this.$.css({
-        width : this.width + "px",
-        height : (this.height - 2) + "px",
-        margin : "1px 0"
-    });
-    this.list_$ = this.$.find('.Ldt-Segments-List');
+        _scale = this.width / this.source.getDuration(),
+        list_$ = this.$.find('.Ldt-Segments-List'),
+        lines = [],
+        zindex = 1,
+        searching = false;
+    
+    function saturate(r, g, b, s) {
+        function satcomp(c) {
+            return Math.floor(240 * (1 - s) + c * s);
+        }
+        var res = ( 0x10000 * satcomp(r) + 0x100 * satcomp(g) + satcomp(b)).toString(16);
+        while (res.length < 6) {
+            res = "0" + res;
+        }
+        return "#" + res;
+    }
     
     _list.forEach(function(_annotation, _k) {
         var _left = _annotation.begin * _scale,
             _width = ( _annotation.getDuration() ) * _scale,
             _center = Math.floor( _left + _width / 2 ),
             _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ),
-            _beginseconds = _annotation.begin.getSeconds();
+            line = IriSP._(lines).find(function(line) {
+                return !IriSP._(line.annotations).find(function(a) {
+                    return a.begin < _annotation.end && a.end > _annotation.begin;
+                });
+            });
+        if (!line) {
+            line = { index: lines.length, annotations: []};
+            lines.push(line); 
+        }
+        line.annotations.push(_annotation);
+        var _top = ((1 - _this.overlap) * line.index) * _this.line_height,
+            color = ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ),
+            r = parseInt(color.substr(1,2),16),
+            g = parseInt(color.substr(3,2),16),
+            b = parseInt(color.substr(5,2),16),
+            medcolor = saturate(r, g, b, .5),
+            lowcolor = saturate(r, g, b, .2);
         var _data = {
-            color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ),
+            color : color,
+            medcolor: medcolor,
+            lowcolor: lowcolor,
             text: _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1&hellip;'),
-            left : Math.floor( _left ),
-            width : Math.floor( _width ),
+            left : _left,
+            width : _width,
+            top: _top,
+            height: _this.line_height - 1,
             id : _annotation.id,
-            media_id : _annotation.getMedia().id
+            media_id : _annotation.getMedia().id,
+            from: _annotation.begin.toString(),
+            to: _annotation.end.toString()
         };
         var _html = Mustache.to_html(_this.annotationTemplate, _data),
             _el = IriSP.jQuery(_html);
@@ -63,51 +96,80 @@
                 _annotation.trigger("unselect");
             })
             .click(function() {
-                _this.player.popcorn.currentTime(_beginseconds);
-                _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _data.id);
+                _annotation.trigger("click");
             })
-            .appendTo(_this.list_$)
+            .appendTo(list_$);
+        IriSP.attachDndData(_el, {
+        	title: _annotation.title,
+        	description: _annotation.description,
+        	uri: (typeof _annotation.url !== "undefined" 
+                ? _annotation.url
+                : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id)),
+            image: _annotation.thumbnail
+        });
         _annotation.on("select", function() {
-            _this.$segments.removeClass("active").addClass("inactive");
-            _this.tooltip.show( _center, 0, _data.text, _data.color );
-            _el.removeClass("inactive").addClass("active");
+            _this.$segments.each(function() {
+                var _segment = IriSP.jQuery(this);
+                _segment.css({
+                    background: _segment.hasClass("found") ? _this.faded_found_color : _segment.attr("data-low-color")
+                });
+            });
+            _el.css({
+                background: _el.hasClass("found") ? _this.found_color: color,
+                "z-index": ++zindex
+            });
+            if (_this.tooltip) {
+                _this.tooltip.show( _center, _top, _data.text, _data.color );
+            }
         });
         _annotation.on("unselect", function() {
-            _this.tooltip.hide();
-            _this.$segments.removeClass("inactive active");
+            if (_this.tooltip) {
+                _this.tooltip.hide();
+            }
+            _this.$segments.each(function() {
+                var _segment = IriSP.jQuery(this);
+                _segment.css("background", _segment.hasClass("found") ? _this.found_color : _segment.attr(searching ? "data-low-color" : "data-medium-color"));
+            });
+        });
+        _annotation.on("found", function() {
+            _el.css("background", _this.found_color).addClass("found");
+        });
+        _annotation.on("not-found", function() {
+            _el.css("background", lowcolor).removeClass("found");
         });
     });
-    this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), "tooltip", { type: "Tooltip" });
+    
+    this.$.css({
+        width : this.width + "px",
+        height : (((1 - this.overlap) * lines.length + this.overlap) * this.line_height) + "px",
+        background : this.background,
+        margin: "1px 0"
+    });
+    this.insertSubwidget(
+        this.$.find(".Ldt-Segments-Tooltip"),
+        {
+            type: "Tooltip",
+            min_x: 0,
+            max_x: this.width
+        },
+        "tooltip"
+    );
     this.$segments = this.$.find('.Ldt-Segments-Segment');
-}
+    this.source.getAnnotations().on("search", function() {
+        searching = true;
+    });
+    this.source.getAnnotations().on("search-cleared", function() {
+        searching = false;
+        _this.$segments.each(function() {
+            var _segment = IriSP.jQuery(this);
+            _segment.css("background", _segment.attr("data-medium-color")).removeClass("found");
+        });
+    });
+};
 
-IriSP.Widgets.Segments.prototype.onSearch = function(searchString) {
-    this.searchString = typeof searchString !== "undefined" ? searchString : '';
-    var _found = 0,
-        _re = IriSP.Model.regexpFromTextOrArray(searchString, true);
-    if (this.searchString) {
-        this.$segments.each(function() {
-            var _el = IriSP.jQuery(this);
-            if (_re.test(_el.attr("segment-text"))) {
-                _el.removeClass("unfound").addClass("found");
-                _found++;
-            } else {
-                _el.removeClass("found").addClass("unfound");
-            }
-        });
-        if (_found) {
-            this.player.popcorn.trigger("IriSP.search.matchFound");
-        } else {
-            this.player.popcorn.trigger("IriSP.search.noMatchFound");
-        }
-    } else {
-        this.$segments.removeClass("found unfound");
-    }
-}
-
-IriSP.Widgets.Segments.prototype.onTimeupdate = function() {
-    var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds());
+IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {
+    var _x = Math.floor( this.width * _time / this.media.duration);
     this.$.find('.Ldt-Segments-Position').css({
         left: _x + "px"
-    })
-}
\ No newline at end of file
+    });
+};
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Slice.css
--- a/src/widgets/Slice.css	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Slice.css	Thu Jan 02 16:40:25 2014 +0100
@@ -1,7 +1,7 @@
 /* Slider Widget */
 
 .Ldt-Slice {
-    border-radius: 0; border: none; padding: 0; margin: 2px 0 12px; background: #B6B8B8; height: 8px;
+    border-radius: 0; border: none; padding: 0; margin: 12px 0 12px; background: #B6B8B8; height: 8px;
 }
 
 .Ldt-Slice .ui-slider-handle {
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Slice.js
--- a/src/widgets/Slice.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Slice.js	Thu Jan 02 16:40:25 2014 +0100
@@ -10,90 +10,72 @@
 IriSP.Widgets.Slice.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Slice.prototype.defaults = {
-    start_visible : false,
-    live_update : true,
-        /* Shall the bounds change each time
-        the Annotation Widget sends an update (true)
-        or only when "show" is triggered (false) ?
-        - true is to be recommended when the widget is permanently displayed.
-        */
-    override_bounds : true
-        /* Can the Annotation Widget bounds be overriden ? */
+    show_arrow: false
 };
 
+IriSP.Widgets.Slice.prototype.template =
+    '<div class="Ldt-Slice"></div>'
+    + '{{#show_arrow}}<div class="Ldt-Slice-Arrow"></div>{{/show_arrow}}';
+
 IriSP.Widgets.Slice.prototype.draw = function() {
     
-    this.$slider = IriSP.jQuery('<div>')
-        .addClass("Ldt-Slice")
+    this.renderTemplate();
+    
+    this.$slider = this.$.find(".Ldt-Slice");
     
-    this.$.append(this.$slider);
+    if (this.show_arrow) {
+        this.insertSubwidget(this.$.find(".Ldt-Slice-Arrow"), { type: "Arrow" },"arrow");
+    }
     
     this.min = 0;
-    this.max = this.source.getDuration().valueOf();
+    this.max = this.media.duration.valueOf();
     
     var _this = this,
         _currentTime;
     
     this.$slider.slider({
         range: true,
-        values: [0, 0],
+        values: [0, this.max],
         min: 0,
         max: this.max,
         change: function(event, ui) {
-            _this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{
-                widget:_this.type,
-                time:Math.floor((ui.values[0]+ui.values[1])/2)
-            });
-            _this.player.popcorn.trigger("IriSP.Slice.boundsChanged",[ui.values[0], ui.values[1]]);
+            if (_this.arrow) {
+                _this.arrow.moveToTime((ui.values[0]+ui.values[1])/2);
+            }
+            if (_this.onBoundsChanged) {
+                _this.onBoundsChanged(ui.values[0],ui.values[1]);
+            }
         },
         start: function() {
             _this.sliding = true;
-            if (!_this.player.popcorn.media.paused) {
-                _this.player.popcorn.pause();
+            if (!_this.media.getPaused()) {
+                _this.media.pause();
             }
-            _currentTime = _this.player.popcorn.currentTime();
+            _currentTime = _this.media.getCurrentTime();
         },
         slide: function(event, ui) {
-            if (!_this.override_bounds && (ui.value < _this.min || ui.value > _this.max)) {
-                return false;
-            }
-            _this.player.popcorn.currentTime(ui.value / 1000);
+            _this.media.setCurrentTime(ui.value);
         },
         stop: function() {
             _this.sliding = false;
-            _this.player.popcorn.currentTime(_currentTime);
+            _this.media.setCurrentTime(_currentTime);
         }
     });
+    
     this.$slider.find(".ui-slider-handle:first").addClass("Ldt-Slice-left-handle");
     this.$slider.find(".ui-slider-handle:last").addClass("Ldt-Slice-right-handle");
-    if (this.start_visible) {
-        this.show();
-    } else {
-        this.hide();
-    }
-    this.bindPopcorn("IriSP.Slice.show","show");
-    this.bindPopcorn("IriSP.Slice.hide","hide");
-    this.bindPopcorn("IriSP.Annotation.boundsChanged","storeBounds");
-    this.player.popcorn.trigger("IriSP.Annotation.getBounds");
+    
+    this.getWidgetAnnotations().forEach(function(_a) {
+        _a.on("enter", function() {
+            _this.$slider.slider("values",[_a.begin, _a.end]);
+        });
+    });
 };
 
 IriSP.Widgets.Slice.prototype.show = function() {
     this.$slider.show();
-    this.player.popcorn.trigger("IriSP.Arrow.takeover",this.type);
-    this.$slider.slider("values", [this.min, this.max]);
-}
+};
 
 IriSP.Widgets.Slice.prototype.hide = function() {
     this.$slider.hide();
-    this.player.popcorn.trigger("IriSP.Arrow.release");
-}
-
-IriSP.Widgets.Slice.prototype.storeBounds = function(_values) {
-    if (!this.player.popcorn.media.paused && (this.min != _values[0] || this.max != _values[1])) {
-        this.min = _values[0];
-        this.max = _values[1];
-        if (this.live_update && !this.sliding) {
-            this.$slider.slider("values", [this.min, this.max]);
-        }
-    }
-}
\ No newline at end of file
+};
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Slider.css
--- a/src/widgets/Slider.css	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Slider.css	Thu Jan 02 16:40:25 2014 +0100
@@ -12,3 +12,8 @@
     background: #747474;
 }
 
+.Ldt-Slider-Time {
+    position: absolute; top: -16px; background: #ffffc0; color: #000000; border-radius: 3px; z-index: 8;
+    font-size: 10px; width: 34px; border: 1px solid #999999; padding: 1px; margin-left: -20px;
+    display: none; text-align: center; font-weight: bold; pointer-events: none;
+}
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Slider.js
--- a/src/widgets/Slider.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Slider.js	Thu Jan 02 16:40:25 2014 +0100
@@ -10,17 +10,21 @@
 
 IriSP.Widgets.Slider.prototype.defaults = {
     minimized_height : 4,
-    maximized_height : 10,
+    maximized_height : 4,
     minimize_timeout : 1500 /*  time before minimizing slider after mouseout,
                                 set to zero for fixed slider */
 };
 
+IriSP.Widgets.Slider.prototype.template =
+    '<div class="Ldt-Slider"></div><div class="Ldt-Slider-Time">00:00</div>';
+
 IriSP.Widgets.Slider.prototype.draw = function() {
     
-    this.$slider = IriSP.jQuery('<div>')
-        .addClass("Ldt-Slider");
+    this.renderTemplate();
     
-    this.$.append(this.$slider);
+    this.$time = this.$.find(".Ldt-Slider-Time");
+    
+    this.$slider = this.$.find(".Ldt-Slider");
     
     var _this = this;
     
@@ -30,35 +34,42 @@
         min: 0,
         max: this.source.getDuration().milliseconds,
         slide: function(event, ui) {
-            _this.player.popcorn.currentTime(ui.value / 1000);
-            _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToTime");
+            _this.media.setCurrentTime(ui.value);
+            _this.player.trigger("Mediafragment.setHashToTime");
         }
     });
     
     this.$handle = this.$slider.find('.ui-slider-handle');
     
-    this.bindPopcorn("timeupdate","onTimeupdate");
-    this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover");
-    this.bindPopcorn("IriSP.PlayerWidget.MouseOut","onMouseout");
+    this.onMediaEvent("timeupdate","onTimeupdate");
+    this.onMdpEvent("Player.MouseOver","onMouseover");
+    this.onMdpEvent("Player.MouseOut","onMouseout");
     
     if (this.minimize_timeout) {
         this.$slider.css(this.calculateSliderCss(this.minimized_height));
         this.$handle.css(this.calculateHandleCss(this.minimized_height));
         
-        this.$
-            .mouseover(this.functionWrapper("onMouseover"))
-            .mouseout(this.functionWrapper("onMouseout"));
-        
         this.maximized = false;
         this.timeoutId = false;
     }
+    
+    this.$
+        .mouseover(function() {
+            _this.$time.show();
+            _this.onMouseover();
+        })
+        .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.Slider.prototype.onTimeupdate = function() {
-    var _time = 1000 * this.player.popcorn.currentTime();
+IriSP.Widgets.Slider.prototype.onTimeupdate = function(_time) {
     this.$slider.slider("value",_time);
-    this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time});
-}
+    this.player.trigger("Arrow.updatePosition",{widget: this.type, time: _time});
+};
 
 IriSP.Widgets.Slider.prototype.onMouseover = function() {
     if (this.minimize_timeout) {
@@ -71,9 +82,10 @@
            this.maximized = true;
         }
     }
-}
+};
 
 IriSP.Widgets.Slider.prototype.onMouseout = function() {
+    this.$time.hide();
     if (this.minimize_timeout) {
         if (this.timeoutId) {
             window.clearTimeout(this.timeoutId);
@@ -88,7 +100,7 @@
             _this.timeoutId = false;
         }, this.minimize_timeout);
     }
-}
+};
 
 IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) {
     this.$slider.stop().animate(
@@ -103,19 +115,19 @@
         function() {
             IriSP.jQuery(this).css("overflow","visible");
         });
-}
+};
 
 IriSP.Widgets.Slider.prototype.calculateSliderCss = function(_size) {
     return {
         height: _size + "px",
         "margin-top": (this.minimized_height - _size) + "px"
     };
-}
+};
 
 IriSP.Widgets.Slider.prototype.calculateHandleCss = function(_size) {
     return {
         height: (2 + _size) + "px",
         width: (2 + _size) + "px",
         "margin-left": -Math.ceil(2 + _size / 2) + "px" 
-    }
-}
\ No newline at end of file
+    };
+};
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Slideshare.js
--- a/src/widgets/Slideshare.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Slideshare.js	Thu Jan 02 16:40:25 2014 +0100
@@ -2,129 +2,116 @@
 
 IriSP.Widgets.Slideshare = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
-    this.lastSlide = {
-        presentation: "",
-        slide: 0
-    }
-    this.embedObject = null;
-    this.oembedCache = {}
-}
+};
 
 IriSP.Widgets.Slideshare.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Slideshare.prototype.defaults = {
     annotation_type: "slide",
     sync: true,
-    embed_width: 400,
-    embed_height: 300
-}
+};
 
 IriSP.Widgets.Slideshare.prototype.messages = {
     fr: {
-        slides_ : "Diapositives&nbsp;:"
+        slides_ : "Diapositives"
     },
     en: {
-        slides_ : "Slides:"
+        slides_ : "Slides"
     }
-}
+};
 
 IriSP.Widgets.Slideshare.prototype.template =
     '<div class="Ldt-SlideShare"><h2>{{l10n.slides_}}</h2><hr /><div class="Ldt-SlideShare-Container"></div></div>';
 
 IriSP.Widgets.Slideshare.prototype.draw = function() {
-    var _hide = false;
-    if (typeof this.annotation_type !== "undefined" && this.annotation_type) {
-        var _annType = this.source.getAnnotationTypes().searchByTitle(this.annotation_type);
-        _hide = !_annType.length;
+    
+    function insertSlideshare(_presentation, _slide) {
+        if (_lastEmbedded === _presentation) {
+            if (_embedObject && typeof _embedObject.jumpTo === "function") {
+                _embedObject.jumpTo(parseInt(_slide));
+            }
+        } else {
+            _lastEmbedded = _presentation;
+            var _id = IriSP.Model.getUID(),
+                _params = {
+                    allowScriptAccess: "always"
+                },
+                _atts = {
+                    id: _id
+                },
+                _flashvars = {
+                    doc : _presentation,
+                    startSlide : _slide
+                };
+            $container.html('<div id="' + _id + '"></div>');
+            swfobject.embedSWF(
+                "http://static.slidesharecdn.com/swf/ssplayer2.swf",
+                _id,
+                _this.embed_width,
+                _this.embed_height,
+                "8",
+                null,
+                _flashvars,
+                _params,
+                _atts
+            );
+            _embedObject = document.getElementById(_id);
+        }
+        $container.show();
     }
-    if (_hide) {
+    
+    var _annotations = this.getWidgetAnnotations();
+    if (!_annotations.length) {
         this.$.hide();
     } else {
         this.renderTemplate();
-        this.$container = this.$.find(".Ldt-SlideShare-Container");
-        this.bindPopcorn("timeupdate","onTimeupdate");
-        this.onTimeupdate();
-    }
-}
-
-IriSP.Widgets.Slideshare.prototype.onTimeupdate = function() {
-    var _list = this.getWidgetAnnotationsAtTime();
-    if (_list.length) {
-        var _description = _list[0].description,
-            _isurl = /^https?:\/\//.test(_description),
-            _presentation = _description.replace(/#.*$/,''),
-            _slidematch = _description.match(/(#|\?|&)id=(\d+)/),
-            _slide = parseInt(_slidematch && _slidematch.length > 2 ? _slidematch[2] : 1),
-            _this = this;
-        if (_presentation !== this.lastSlide.presentation) {
-            if (_isurl) {
-                if (typeof this.oembedCache[_presentation] === "undefined") {
-                    var _ajaxUrl = "http://www.slideshare.net/api/oembed/1?url="
-                        + encodeURIComponent(_presentation)
-                        + "&format=jsonp&callback=?";
-                    IriSP.jQuery.getJSON(_ajaxUrl, function(_oembedData) {
-                        var _presmatch = _oembedData.html.match(/doc=([a-z0-9\-_%]+)/i);
-                        if (_presmatch && _presmatch.length > 1) {
-                            _this.oembedCache[_presentation] =  _presmatch[1];
-                            _this.insertSlideshare(_presmatch[1], _slide);
+        var _lastPres = "",
+            _embedObject = null,
+            _oembedCache = {},
+            _lastEmbedded = "",
+            _this = this,
+            $container = this.$.find(".Ldt-SlideShare-Container");
+            
+        this.embed_width = this.embed_width || $container.innerWidth();
+        this.embed_height = this.embed_height || Math.floor(this.embed_width * 3/4);
+        
+        _annotations.forEach(function(_a) {
+            _a.on("leave", function() {
+                $container.hide();
+                _lastPres = "";
+            });
+            _a.on("enter", function() {
+                var _description = _a.description,
+                    _isurl = /^https?:\/\//.test(_description),
+                    _presentation = _description.replace(/#.*$/,''),
+                    _slidematch = _description.match(/(#|\?|&)id=(\d+)/),
+                    _slide = parseInt(_slidematch && _slidematch.length > 2 ? _slidematch[2] : 1);
+                if (_presentation !== _lastPres) {
+                    if (_isurl) {
+                        if (typeof _oembedCache[_presentation] === "undefined") {
+                            var _ajaxUrl = "http://www.slideshare.net/api/oembed/1?url="
+                                + encodeURIComponent(_presentation)
+                                + "&format=jsonp&callback=?";
+                            IriSP.jQuery.getJSON(_ajaxUrl, function(_oembedData) {
+                                var _presmatch = _oembedData.html.match(/doc=([a-z0-9\-_%]+)/i);
+                                if (_presmatch && _presmatch.length > 1) {
+                                    _oembedCache[_presentation] =  _presmatch[1];
+                                    insertSlideshare(_presmatch[1], _slide);
+                                }
+                            });
+                        } else {
+                            insertSlideshare(_oembedCache[_presentation], _slide);
                         }
-                    });
-                } else {
-                    this.insertSlideshare(this.oembedCache[_presentation], _slide);
+                    } else {
+                        insertSlideshare(_presentation, _slide);
+                    }
                 }
-            } else {
-                this.insertSlideshare(_presentation, _slide);
-            }
-        }
-        if (_slide != this.lastSlide.slide && this.sync && this.embedObject && typeof this.embedObject.jumpTo === "function") {
-            this.embedObject.jumpTo(parseInt(_slide));
-        }
-        this.lastSlide = {
-            presentation: _presentation,
-            slide: _slide
-        }
-    } else {
-        if (this.lastSlide.presentation) {
-            this.$container.hide();
-            this.lastSlide = {
-                presentation: "",
-                slide: 0
-            }
-        }
+                if (_this.sync && _embedObject && typeof _embedObject.jumpTo === "function") {
+                    _embedObject.jumpTo(parseInt(_slide));
+                }
+                _lastPres = _presentation;
+                
+            });
+        });
     }
-}
-
-IriSP.Widgets.Slideshare.prototype.insertSlideshare = function(_presentation, _slide) {
-    if (this.lastEmbedded === _presentation) {
-        if (this.embedObject && typeof this.embedObject.jumpTo === "function") {
-            this.embedObject.jumpTo(parseInt(_slide));
-        }
-    } else {
-        this.lastEmbedded = _presentation;
-        var _id = IriSP.Model.getUID(),
-            _params = {
-                allowScriptAccess: "always"
-            }
-            _atts = {
-                id: _id
-            },
-            _flashvars = {
-                doc : _presentation,
-                startSlide : _slide
-            };
-        this.$container.html('<div id="' + _id + '"></div>');
-        swfobject.embedSWF(
-            "http://static.slidesharecdn.com/swf/ssplayer2.swf",
-            _id,
-            this.embed_width,
-            this.embed_height,
-            "8",
-            null,
-            _flashvars,
-            _params,
-            _atts
-        );
-        this.embedObject = document.getElementById(_id);
-    }
-    this.$container.show();
-}
+};
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Social.js
--- a/src/widgets/Social.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Social.js	Thu Jan 02 16:40:25 2014 +0100
@@ -3,7 +3,7 @@
 IriSP.Widgets.Social = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
     ZeroClipboard.setMoviePath( IriSP.getLib('zeroClipboardSwf') );
-}
+};
 
 IriSP.Widgets.Social.prototype = new IriSP.Widgets.Widget();
 
@@ -15,14 +15,14 @@
     show_fb: true,
     show_gplus: true,
     show_mail: true
-}
+};
 
 IriSP.Widgets.Social.prototype.template =
-    '<span class="Ldt-Social">{{#show_url}}<div class="Ldt-Social-Url-Container"><a href="#" target="_blank" class="Ldt-Social-Square Ldt-Social-Url Ldt-TraceMe" title="{{l10n.share_link}}">'
+    '<span class="Ldt-Social">{{#show_url}}<div class="Ldt-Social-Url-Container"><a href="#" draggable="true" target="_blank" class="Ldt-Social-Square Ldt-Social-Url Ldt-TraceMe" title="{{l10n.share_link}}">'
     + '</a><div class="Ldt-Social-UrlPop"><input class="Ldt-Social-Input"/><div class="Ldt-Social-CopyBtn">{{l10n.copy}}</div></div></div>{{/show_url}}'
-    + '{{#show_fb}}<a href="#" target="_blank" class="Ldt-Social-Fb Ldt-TraceMe" title="{{l10n.share_on}} Facebook"></a>{{/show_fb}}'
-    + '{{#show_twitter}}<a href="#" target="_blank" class="Ldt-Social-Twitter Ldt-TraceMe" title="{{l10n.share_on}} Twitter"></a>{{/show_twitter}}'
-    + '{{#show_gplus}}<a href="#" target="_blank" class="Ldt-Social-Gplus Ldt-TraceMe" title="{{l10n.share_on}} Google+"></a>{{/show_gplus}}'
+    + '{{#show_fb}}<a href="#" target="_blank" class="Ldt-Social-Fb Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Facebook"></a>{{/show_fb}}'
+    + '{{#show_twitter}}<a href="#" target="_blank" class="Ldt-Social-Twitter Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Twitter"></a>{{/show_twitter}}'
+    + '{{#show_gplus}}<a href="#" target="_blank" class="Ldt-Social-Gplus Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Google+"></a>{{/show_gplus}}'
     + '{{#show_mail}}<a href="#" target="_blank" class="Ldt-Social-Mail Ldt-TraceMe" title="{{l10n.share_mail}}"></a>{{/show_mail}}</span>';
 
 IriSP.Widgets.Social.prototype.messages = {
@@ -38,7 +38,7 @@
         share_link: "Share hypertext link",
         copy: "Copy"
     }
-}
+};
 
 IriSP.Widgets.Social.prototype.draw = function() {
     this.renderTemplate();
@@ -48,12 +48,22 @@
     this.$.find(".Ldt-Social-Url").click(function() {
         _this.toggleCopy();
         return false;
+    }).on("dragstart", function(e) {
+    	e.originalEvent.dataTransfer.setData("text/x-iri-title",_this.text);
+    	e.originalEvent.dataTransfer.setData("text/x-iri-uri",_this.url);
     });
     this.$.find(".Ldt-Social-Input").focus(function() {
         this.select();
     });
+    this.$.find(".Ldt-Social-Ext").click(function() {
+        window.open(
+            IriSP.jQuery(this).attr("href"),
+            "_blank",
+            "height=300,width=450,left=100,top=100,toolbar=0,menubar=0,status=0,location=0");
+        return false;
+    });
     this.updateUrls(this.url, this.text);
-}
+};
 
 IriSP.Widgets.Social.prototype.toggleCopy = function() {
     var _pop = this.$.find(".Ldt-Social-UrlPop");
@@ -75,13 +85,13 @@
     } else {
         this.clip.hide();
     }
-}
+};
 
 IriSP.Widgets.Social.prototype.updateUrls = function(_url, _text) {
     this.url = _url;
     this.text = _text;
     this.$.find(".Ldt-Social-Fb").attr("href", "http://www.facebook.com/share.php?" + IriSP.jQuery.param({ u: _url, t: _text }));
     this.$.find(".Ldt-Social-Twitter").attr("href", "https://twitter.com/intent/tweet?" + IriSP.jQuery.param({ url: _url, text: _text }));
-    this.$.find(".Ldt-Social-Gplus").attr("href", "https://plusone.google.com/_/+1/confirm?" + IriSP.jQuery.param({ url: _url, title: _text }));
+    this.$.find(".Ldt-Social-Gplus").attr("href", "https://plus.google.com/share?" + IriSP.jQuery.param({ url: _url, title: _text }));
     this.$.find(".Ldt-Social-Mail").attr("href", "mailto:?" + IriSP.jQuery.param({ subject: _text, body: _text + ": " + _url }));
-}
+};
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Sparkline.js
--- a/src/widgets/Sparkline.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Sparkline.js	Thu Jan 02 16:40:25 2014 +0100
@@ -1,6 +1,5 @@
 IriSP.Widgets.Sparkline = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
-    //this.bindPopcorn("timeupdate", "onTimeupdate");
 };
 
 IriSP.Widgets.Sparkline.prototype = new IriSP.Widgets.Widget();
@@ -19,15 +18,22 @@
         _duration = this.source.getDuration(),
         _max = 0,
         _list = this.getWidgetAnnotations();
-    
     for (var _i = 0; _i < this.slice_count; _i++) {
-        var _begin = new IriSP.Model.Time(_i*_duration/this.slice_count),
-            _end = new IriSP.Model.Time((_i+1)*_duration/this.slice_count),
-            _annotations = _list.filter(function(_annotation) {
-                return _annotation.begin >= _begin && _annotation.end < _end;
-            }).length;
-        _max = Math.max(_max, _annotations);
-        _slices.push(_annotations);
+        var _begin = (_i*_duration/this.slice_count),
+            _end = ((_i+1)*_duration/this.slice_count),
+            _volume = 0;
+            _list.forEach(function(_annotation) {
+                if (_annotation.begin < _end && _annotation.end >= _begin) {
+                    var _d = _annotation.getDuration().milliseconds;
+                    if (!_d) {
+                        _volume += 1;
+                    } else {
+                        _volume += (Math.min(_annotation.end, _end) - Math.max(_annotation.begin, _begin)) / _d;
+                    }
+                }
+            });
+            _max = Math.max(_max, _volume);
+        _slices.push(_volume);
     }
     if (!_max) {
         return;
@@ -42,7 +48,7 @@
         _d = IriSP._(_y).reduce(function(_memo, _v, _k) {
                return _memo + ( _k
                    ? 'C' + (_k * _width) + ' ' + _y[_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v
-                   : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v )
+                   : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v );
             },'') + 'L' + this.width + ' ' + _y[_y.length - 1],
         _d2 = _d + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height;
     
@@ -68,18 +74,18 @@
    
     this.$.click(function(_e) {
         var _x = _e.pageX - _this.$.offset().left;
-        _this.player.popcorn.currentTime(_this.source.getDuration().getSeconds() * _x / _this.width);
+        _this.media.setCurrentTime(_this.media.duration * _x / _this.width);
     });
     
-    this.bindPopcorn("timeupdate","onTimeupdate");
-}
+    this.onMediaEvent("timeupdate","onTimeupdate");
+};
 
-IriSP.Widgets.Sparkline.prototype.onTimeupdate = function() {
-    var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds());
+IriSP.Widgets.Sparkline.prototype.onTimeupdate = function(_time) {
+    var _x = Math.floor( this.width * _time / this.media.duration);
     this.rectangleProgress.attr({
         "width" : _x
     });
     this.ligneProgress.attr({
         "path" : "M" + _x + " 0L" + _x + " " + this.height
     });
-}
+};
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Tagcloud.js
--- a/src/widgets/Tagcloud.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Tagcloud.js	Thu Jan 02 16:40:25 2014 +0100
@@ -1,7 +1,7 @@
 IriSP.Widgets.Tagcloud = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
     this.stopwords = IriSP._.uniq([].concat(this.custom_stopwords).concat(this.stopword_lists[this.stopword_language]));
-}
+};
 
 IriSP.Widgets.Tagcloud.prototype = new IriSP.Widgets.Widget();
 
@@ -22,7 +22,7 @@
     segment_annotation_type: false,
     min_font_size: 10,
     max_font_size: 26
-}
+};
 
 IriSP.Widgets.Tagcloud.prototype.stopword_lists = {
     "fr" : [
@@ -36,45 +36,33 @@
         'get', 'here', 'http', 'like', 'more', 'one', 'our', 'she', 'that', 'the', 'their', 'then', 'there',
         'they', 'this', 'very', 'what', 'when', 'where', 'who', 'why', 'will', 'with', 'www', 'you', 'your'
     ]
-}
+};
 
 IriSP.Widgets.Tagcloud.prototype.draw = function() {
-    this.bindPopcorn("IriSP.search", "onSearch");
-    this.bindPopcorn("IriSP.search.closed", "onSearch");
-    this.bindPopcorn("IriSP.search.cleared", "onSearch");
     
     if (this.segment_annotation_type) {
-        this.bindPopcorn("timeupdate","onTimeupdate");
+        var _this = this;
+        this.source.getAnnotationsByTypeTitle(this.segment_annotation_type).forEach(function(_a) {
+            _a.on("enter", function() {
+                _this.redraw(_a.begin, _a.end);
+            });
+        });
     } else {
         this.redraw();
     }
-}
+};
 
-IriSP.Widgets.Tagcloud.prototype.onTimeupdate = function() {
-    var _time = Math.floor(this.player.popcorn.currentTime() * 1000),
-        _list = this.source.getAnnotationsByTypeTitle(this.segment_annotation_type).filter(function(_annotation) {
-            return _annotation.begin <= _time && _annotation.end > _time;
-        });
-    if (_list.length) {
-        if (_list[0].begin !== this.begin_time || _list[0].end !== this.end_time) {
-            this.begin_time = _list[0].begin;
-            this.end_time = _list[0].end;
-            this.redraw();
-        }
-    }
-}
-
-IriSP.Widgets.Tagcloud.prototype.redraw = function() {
+IriSP.Widgets.Tagcloud.prototype.redraw = function(_from, _to) {
     var _urlRegExp = /https?:\/\/[0-9a-zA-Z\.%\/-_]+/g,
         _regexpword = /[^\s\.&;,'"!\?\d\(\)\+\[\]\\\…\-«»:\/]{3,}/g,
         _words = {},
         _this = this,
         _annotations = this.getWidgetAnnotations();
         
-    if (typeof this.begin_time !== "undefined" && typeof this.end_time !== "undefined") {
+    if (typeof _from !== "undefined" && typeof _to !== "undefined") {
         _annotations = _annotations.filter(function(_annotation) {
-            return _annotation.begin >= _this.begin_time && _annotation.end <= _this.end_time;
-        })
+            return _annotation.begin >= _from && _annotation.end <= _to;
+        });
     }
     
     _annotations.forEach(function(_annotation) {
@@ -88,7 +76,7 @@
            if (IriSP._(_this.stopwords).indexOf(_word) == -1 && (!_this.exclude_pattern || !_this.exclude_pattern.test(_word))) {
                _words[_word] = 1 + (_words[_word] || 0);
            }
-       })
+       });
     });
     _words = IriSP._(_words)
         .chain()
@@ -96,7 +84,7 @@
             return {
                 "word" : _k,
                 "count" : _v
-            }
+            };
         })
         .filter(function(_v) {
             return _v.count > 2;
@@ -117,10 +105,11 @@
     this.$.html(Mustache.to_html(this.template,  {words: _words }));
     this.$.find(".Ldt-Tagcloud-item").click(function() {
         var _txt = IriSP.jQuery(this).attr("content");
-        _this.player.popcorn.trigger("IriSP.search.triggeredSearch", _txt);
+        _this.source.getAnnotations().search(_txt);
     });
-    
-}
+    this.source.getAnnotations().on("search", this.functionWrapper("onSearch"));
+    this.source.getAnnotations().on("search-cleared", this.functionWrapper("onSearch"));
+};
 
 IriSP.Widgets.Tagcloud.prototype.onSearch = function(searchString) {
     searchString = typeof searchString !== "undefined" ? searchString : '';
@@ -136,4 +125,4 @@
             _el.html(_txt);
         }
     });
-}
+};
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Tooltip.css
--- a/src/widgets/Tooltip.css	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Tooltip.css	Thu Jan 02 16:40:25 2014 +0100
@@ -1,31 +1,123 @@
-/* ToolTip Widget */
+.Ldt-Tooltip {
+    position: absolute;
+    height: 0; width: 0;
+    z-index: 100000;
+}
+
+.Ldt-Tooltip-Main {
+    position: absolute; bottom: 0; left: -96px;
+}
+
+.Ldt-Tooltip-Corner-NW,
+.Ldt-Tooltip-Corner-NE,
+.Ldt-Tooltip-Corner-SW,
+.Ldt-Tooltip-Corner-SE {
+    position: absolute; width: 6px; height: 6px; background: url(img/tooltip-corners.png);
+}
+
+.Ldt-Tooltip-Corner-NW,
+.Ldt-Tooltip-Corner-SW {
+    left: 0;
+}
+
+.Ldt-Tooltip-Corner-NE,
+.Ldt-Tooltip-Corner-SE {
+    right: 0;
+}
+
+.Ldt-Tooltip-Corner-NW,
+.Ldt-Tooltip-Corner-NE {
+    top: 0;
+}
+
+.Ldt-Tooltip-Corner-SW,
+.Ldt-Tooltip-Corner-SE {
+    bottom: 10px;
+}
+
+.Ldt-Tooltip-Corner-NW {
+    background-position: top left;
+}
+
+.Ldt-Tooltip-Corner-NE {
+    background-position: top right;
+}
 
-.Ldt-Tooltip {
-  position: absolute;
-  z-index: 10000000000;
-  background: transparent url("img/white_arrow_long.png");
-  font-size: 12px;
-  padding: 15px 15px 20px;
-  color: black;
-  font-family: Arial, Helvetica, sans-serif;
-  overflow:hidden;
+.Ldt-Tooltip-Corner-SW {
+    background-position: bottom left;
+}
+
+.Ldt-Tooltip-Corner-SE {
+    background-position: bottom right;
+}
+
+.Ldt-Tooltip-Border-Top,
+.Ldt-Tooltip-Border-SW,
+.Ldt-Tooltip-Border-SE {
+    position: absolute; height: 6px; background: url(img/tooltip-h-borders.png);
+}
+
+.Ldt-Tooltip-Border-Top {
+    left: 6px; right: 6px;
+}
+
+.Ldt-Tooltip-Border-SW,
+.Ldt-Tooltip-Border-SE {
+    bottom: 10px; background-position: bottom;
+}
+
+.Ldt-Tooltip-Border-SW {
+    left: 6px;
+}
+
+.Ldt-Tooltip-Border-SE {
+    right: 6px;
+}
+
+.Ldt-Tooltip-Tip {
+    position: absolute; height: 16px; width: 22px;
+    background: url(img/tooltip-tip.png);
+    bottom: 0;
+}
+
+.Ldt-Tooltip-Border-Left,
+.Ldt-Tooltip-Border-Right {
+    position: absolute; width: 6px; background: url(img/tooltip-v-borders.png);
+    top: 6px; bottom: 16px;
+}
+
+.Ldt-Tooltip-Border-Left {
+    left: 0; background-position: left;
+}
+
+.Ldt-Tooltip-Border-Right {
+    right: 0; background-position: right;
 }
 
 .Ldt-Tooltip-Inner {
-    height: 115px;
+    min-height: 30px;
+    max-height: 140px;
     width: 180px;
     overflow: hidden;
+    margin: 6px 6px 16px;
+    background: url(img/tooltip-gradient.png) bottom;
 }
 
+
 .Ldt-Tooltip-Color {
-    float: left; margin: 2px 4px 2px 0; width: 10px; height: 10px;
+    float: left; margin: 8px 2px 2px 8px; width: 10px; height: 10px;
+}
+
+.Ldt-Tooltip-AltColor {
+    float: left; margin: 2px 2px 2px 3px; width: 10px; height: 10px;
 }
 
 .Ldt-Tooltip img {
-    max-width: 140px; max-height: 70px; margin: 0 20px;
+    max-width: 140px; max-height: 80px; margin: 2px 20px;
 }
 
 .Ldt-Tooltip p {
-    margin: 2px 0;
-  font-size: 12px;
-}
+    margin: 6px 8px;
+    font-size: 12px;
+    line-height: 14px;
+}
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Tooltip.js
--- a/src/widgets/Tooltip.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Tooltip.js	Thu Jan 02 16:40:25 2014 +0100
@@ -1,21 +1,39 @@
 /* this widget displays a small tooltip */
-IriSP.Widgets.Tooltip = function(Popcorn, config, Serializer) {
-    IriSP.Widgets.Widget.call(this, Popcorn, config, Serializer);
+IriSP.Widgets.Tooltip = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
 };
 
 IriSP.Widgets.Tooltip.prototype = new IriSP.Widgets.Widget();
 
-IriSP.Widgets.Tooltip.prototype.template = '<div class="Ldt-Tooltip"><div class="Ldt-Tooltip-Inner"><div class="Ldt-Tooltip-Color"></div><div class="Ldt-Tooltip-Text"></div></div></div>';
+IriSP.Widgets.Tooltip.prototype.defaults = {
+    
+};
+
+IriSP.Widgets.Tooltip.prototype.template =
+    '<div class="Ldt-Tooltip"><div class="Ldt-Tooltip-Main"><div class="Ldt-Tooltip-Corner-NW"></div>'
+    + '<div class="Ldt-Tooltip-Border-Top"></div><div class="Ldt-Tooltip-Corner-NE"></div>'
+    + '<div class="Ldt-Tooltip-Border-Left"></div><div class="Ldt-Tooltip-Border-Right"></div>'
+    + '<div class="Ldt-Tooltip-Corner-SW"></div><div class="Ldt-Tooltip-Border-SW"></div>'
+    + '<div class="Ldt-Tooltip-Tip"></div><div class="Ldt-Tooltip-Border-SE"></div>'
+    + '<div class="Ldt-Tooltip-Corner-SE"></div><div class="Ldt-Tooltip-Inner">'
+    + '<div class="Ldt-Tooltip-Color"></div><p class="Ldt-Tooltip-Text"></p></div></div></div>';
 
 IriSP.Widgets.Tooltip.prototype.draw = function() {
     _this = this;
-    this.$.html(this.template);
+    this.renderTemplate();
     this.$.parent().css({
         "position" : "relative"
     });
-    this.$tip = this.$.find(".Ldt-Tooltip");
+    this.$tooltip = this.$.find(".Ldt-Tooltip");
+    this.$tip = this.$.find(".Ldt-Tooltip-Tip");
+    this.$sw = this.$.find(".Ldt-Tooltip-Border-SW");
+    this.$se = this.$.find(".Ldt-Tooltip-Border-SE");
+    this.__halfWidth = Math.floor(( this.$.find(".Ldt-Tooltip-Main").width() || 192)/2);
+    this.__borderWidth = this.$.find(".Ldt-Tooltip-Border-Left").width();
+    this.__tipDelta = this.__halfWidth - Math.floor(this.$tip.width()/2);
+    this.__maxShift = this.__tipDelta - this.__borderWidth;
     this.$.mouseover(function() {
-        _this.$tip.hide();
+        _this.$tooltip.hide();
     });
     this.hide();
 };
@@ -23,20 +41,54 @@
 IriSP.Widgets.Tooltip.prototype.show = function(x, y, text, color) {
     
     if (typeof color !== "undefined") {
-        this.$.find(".Ldt-Tooltip-Color").show().css("background-color", color);
+    	// one color or array of colors
+    	if (typeof color === "string") {
+    		this.$.find(".Ldt-Tooltip-Color").html("");
+    		this.$.find(".Ldt-Tooltip-Color").show().css("background-color", color);
+    		this.$.find(".Ldt-Tooltip-Color").show().css("height", "");
+    	}
+    	else{
+    		var d = this.$.find(".Ldt-Tooltip-Color");
+    		d.html("");
+    		d.show();
+    		for(var i=0; i<color.length; i++){
+    			d.append('<div style="float: left; height: 10px; width: 10px; background-color: ' + color[i] + '">')
+    		}
+    		this.$.find(".Ldt-Tooltip-Color").css("height", (color.length * 10) + "px");
+    	}
     } else {
         this.$.find(".Ldt-Tooltip-Color").hide();
     }
 
     this.$.find(".Ldt-Tooltip-Text").html(text);
 
-    this.$tip.show();
+    this.$tooltip.show();
+    
+    var shift = 0;
+    
+    if (typeof this.min_x !== "undefined" && (x - this.__halfWidth < this.min_x)) {
+        shift = Math.max(x - this.__halfWidth - this.min_x, - this.__maxShift);
+    }
+    
+    if (typeof this.max_x !== "undefined" && (+x + this.__halfWidth > this.max_x)) {
+        shift = Math.min(+ x + this.__halfWidth - this.max_x, this.__maxShift);
+    }
+    
+    this.$tooltip.css({
+        "left" : (x - shift) + "px",
+        "top" : y + "px"
+    });
     this.$tip.css({
-        "left" : Math.floor(x - this.$tip.outerWidth() / 2) + "px",
-        "top" : Math.floor(y - this.$tip.outerHeight()) + "px"
+        "left": (this.__tipDelta + shift) + "px"
+    });
+    this.$sw.css({
+        "width": (this.__tipDelta + shift - this.__borderWidth) + "px"
+    });
+    this.$se.css({
+        "width": (this.__tipDelta - shift - this.__borderWidth) + "px"
     });
 };
 
 IriSP.Widgets.Tooltip.prototype.hide = function() {
-    this.$tip.hide();
+    this.$tooltip.hide();
 };
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Trace.js
--- a/src/widgets/Trace.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Trace.js	Thu Jan 02 16:40:25 2014 +0100
@@ -1,7 +1,7 @@
 IriSP.Widgets.Trace = function(player, config) {
   IriSP.Widgets.Widget.call(this, player, config);
     
-}
+};
 
 IriSP.Widgets.Trace.prototype = new IriSP.Widgets.Widget();
 
@@ -13,40 +13,45 @@
     default_subject: "IRI",
     tracer: null,
     extend: false
-}
+};
 
 IriSP.Widgets.Trace.prototype.draw = function() {
-  this.lastEvent = "";
   if (typeof window.tracemanager === "undefined") {
       console.log("Tracemanager not found");
       return;
   }
   var _this = this,
-    _listeners = {
-        "IriSP.search.open" : 0,
-        "IriSP.search.closed" : 0,
-        "IriSP.search" : 0,
-        "IriSP.search.cleared" : 0,
-        "IriSP.search.matchFound" : 0,
-        "IriSP.search.noMatchFound" : 0,
-        "IriSP.search.triggeredSearch" : 0,
-        "IriSP.TraceWidget.MouseEvents" : 0,
+    _medialisteners = {
         "play" : 0,
         "pause" : 0,
         "volumechange" : 0,
         "seeked" : 0,
         "play" : 0,
         "pause" : 0,
-        "timeupdate" : 2000
+        "timeupdate" : 10000
+    },
+    _annlisteners = {
+        search: 0,
+        "search-cleared": 0
     };
-    IriSP._(_listeners).each(function(_ms, _listener) {
+    IriSP._(_medialisteners).each(function(_ms, _listener) {
         var _f = function(_arg) {
             _this.eventHandler(_listener, _arg);
-        }
+        };
         if (_ms) {
             _f = IriSP._.throttle(_f, _ms);
         }
-        _this.player.popcorn.listen(_listener, _f);
+        _this.media.on(_listener, _f);
+    });
+    var _annotations = this.source.getAnnotations();
+    IriSP._(_annlisteners).each(function(_ms, _listener) {
+        var _f = function(_arg) {
+            _this.eventHandler(_listener, _arg);
+        };
+        if (_ms) {
+            _f = IriSP._.throttle(_f, _ms);
+        }
+        _annotations.on(_listener, _f);
     });
     
     if (!this.tracer) {
@@ -60,92 +65,61 @@
     
     }
     
+    
+    
     this.tracer.trace("TraceWidgetInit", {});
     
     this.mouseLocation = '';
-    IriSP.jQuery(".Ldt-Widget").bind("click mouseover mouseout", function(_e) {
-        var _target = IriSP.jQuery(_e.target);
-
-        while (!_target.hasClass("Ldt-TraceMe") && !_target.hasClass("Ldt-Widget") && _target.length) {
-            _target = _target.parent();
-        }
+    IriSP.jQuery(".Ldt-Widget").on("click mouseenter mouseleave", ".Ldt-TraceMe", function(_e) {
+        var _target = IriSP.jQuery(this);
         
-        var _widget = IriSP.jQuery(this).attr("widget-type"),
+        var _widget = _target.attr("widget-type") || _target.parents(".Ldt-Widget").attr("widget-type"),
             _data = {
                 "type": _e.type,
-                "x": _e.clientX,
-                "y": _e.clientY,
                 "widget": _widget
             },
             _targetEl = _target[0],
             _class = _targetEl.className,
             _name = _targetEl.localName,
             _id = _targetEl.id,
-            _value = _targetEl.value,
-            _traceInfo = _target.attr("trace-info"),
-            _lastTarget = _name + (_id && _id.length ? '#' + IriSP.jqEscape(_id) : '') + (_class && _class.length ? ('.' + IriSP.jqEscape(_class).replace(/\s/g,'.')).replace(/\.Ldt-(Widget|TraceMe)/g,'') : '');
-        _data.target = _lastTarget
-        if (typeof _traceInfo == "string" && _traceInfo.length) {
+            _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,'') : '');
+        if (typeof _traceInfo == "string" && _traceInfo) {
             _data.traceInfo = _traceInfo;
-            _lastTarget += ( ";" + _traceInfo );
         }
         if (typeof _value == "string" && _value.length) {
             _data.value = _value;
         }
-        switch(_e.type) {
-            case "mouseover":
-                if (_this.lastTarget != _lastTarget) {
-                    _this.player.popcorn.trigger('IriSP.TraceWidget.MouseEvents', _data);
-                } else {
-                    if (typeof _this.moTimeout != "undefined") {
-                        clearTimeout(_this.moTimeout);
-                        _this.moTimeout = undefined;
-                    }
-                }
-            break;
-            case "mouseout":
-                if (typeof _this.moTimeout != "undefined") {
-                    clearTimeout(_this.moTimeout);
-                }
-                _this.moTimeout = setTimeout(function() {
-                   if (_lastTarget != _this.lastTarget) {
-                       _this.player.popcorn.trigger('IriSP.TraceWidget.MouseEvents', _data);
-                   }
-                },100);
-            break;
-            default:
-                _this.player.popcorn.trigger('IriSP.TraceWidget.MouseEvents', _data);
-        }
-        _this.lastTarget = _lastTarget;
+        _this.eventHandler('UIEvent', _data);
     });
-}
+};
 
 IriSP.Widgets.Trace.prototype.eventHandler = function(_listener, _arg) {
     var _traceName = 'Mdp_';
     if (typeof _arg == "string" || typeof _arg == "number") {
-        _arg = { "value" : _arg }
+        _arg = { "value" : _arg };
     }
     if (typeof _arg == "undefined") {
-        _arg = {}
+        _arg = {};
     }
     switch(_listener) {
-        case 'IriSP.TraceWidget.MouseEvents':
+        case 'UIEvent':
             _traceName += _arg.widget + '_' + _arg.type;
             delete _arg.widget;
             delete _arg.type;
         break;
-        case 'timeupdate':
         case 'play':
         case 'pause':
-            _arg.time = this.player.popcorn.currentTime() * 1000;
+            _arg.milliseconds = this.media.getCurrentTime().milliseconds;
+        case 'timeupdate':
         case 'seeked':
         case 'volumechange':
-            _traceName += 'Popcorn_' + _listener;
+            _traceName += 'media_' + _listener;
         break;
         default:
-            _traceName += _listener.replace('IriSP.','').replace('.','_');
+            _traceName += _listener.replace('.','_');
     }
-    this.lastEvent = _traceName;
     if (typeof this.extend === "object" && this.extend) {
         IriSP._(_arg).extend(this.extend);
     }
@@ -153,4 +127,4 @@
     if (this.js_console && typeof window.console !== "undefined" && typeof console.log !== "undefined") {
         console.log("tracer.trace('" + _traceName + "', " + JSON.stringify(_arg) + ");");
     }
-}
+};
\ No newline at end of file
diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/Tweet.js
--- a/src/widgets/Tweet.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Tweet.js	Thu Jan 02 16:40:25 2014 +0100
@@ -6,7 +6,7 @@
 IriSP.Widgets.Tweet.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Tweet.prototype.defaults = {
-    hide_timeout: 5000,
+    hide_timeout: 10000,
     polemics : [
         {
             "keywords" : [ "++" ],
@@ -25,18 +25,19 @@
             "color" : "#05aae6"
         }
     ],
+    annotation_type: "tweet",
     pin_at_start: false
-}
+};
 
 IriSP.Widgets.Tweet.prototype.messages = {
     "fr": {
         retweet: "Retweeter",
         reply: "Répondre",
-        keep_visible: "Garder visible",
+        keep_visible: "Empêcher la fermeture automatique",
         dont_keep_visible: "Permettre la fermeture automatique",
         close_widget: "Fermer l'affichage du tweet",
-        original_time: "Heure d'envoi&nbsp;: ",
-        video_time: "Temps de la vidéo&nbsp;: ",
+        original_time: "Heure d'envoi\u00a0: ",
+        video_time: "Temps de la vidéo\u00a0: ",
         show_original: "Voir l'original"
     },
     "en": {
@@ -49,7 +50,7 @@
         video_time: "Video time: ",
         show_original: "Show original"
     }
-}
+};
 
 IriSP.Widgets.Tweet.prototype.template =
     '<div class="Ldt-Tweet-Widget"><div class="Ldt-Tweet-Inner"><div class="Ldt-Tweet-PinClose-Buttons">'
@@ -66,12 +67,11 @@
 
 IriSP.Widgets.Tweet.prototype.draw = function() {
     this.renderTemplate();
-    this.bindPopcorn("IriSP.Tweet.show","show");
     this.pinned = this.pin_at_start;
     var _this = this;
     this.$.find(".Ldt-Tweet-Pin").click(function() {
         _this.pinned = !_this.pinned;
-        var _el = IriSP.jQuery(this)
+        var _el = IriSP.jQuery(this);
         if (_this.pinned) {
             _el.addClass("active").attr("title",_this.l10n.dont_keep_visible);
             _this.cancelTimeout();
@@ -84,93 +84,61 @@
         _this.hide();
     });
     this.$.hide();
-}
+    this.getWidgetAnnotations().forEach(function(_annotation) {
+        _annotation.on("click", function() {
+            _this.show(_annotation);
+        });
+    });
+};
 
-IriSP.Widgets.Tweet.prototype.show = function(_id) {
-    var _tweet = this.source.getElement(_id);
+IriSP.Widgets.Tweet.prototype.show = function(_tweet) {
     if (typeof _tweet !== "undefined" && typeof _tweet.source !== "undefined") {
-        var _entities = [];
-        for (var _i = 0; _i < _tweet.source.entities.hashtags.length; _i++) {
-            var _hash = _tweet.source.entities.hashtags[_i];
-            _entities.push({
-                is_link: true,
-                text: '#' + _hash.text,
-                url: 'http://twitter.com/search?q=%23' + encodeURIComponent(_hash.text),
-                indices: _hash.indices
-            });
-        }
-        for (var _i = 0; _i < _tweet.source.entities.urls.length; _i++) {
-            var _url = _tweet.source.entities.urls[_i],
-                _displayurl = (typeof _url.display_url !== "undefined" && _url.display_url !== null ? _url.display_url : _url.url),
-                _linkurl = (typeof _url.expanded_url !== "undefined" && _url.expanded_url !== null ? _url.expanded_url : _url.url);
-            _displayurl = _displayurl.replace(/^\w+:\/\//,'');
-            if (!/^\w+:\/\//.test(_linkurl)) {
-                _linkurl = 'http://' + _linkurl;
-            }
-            _entities.push({
-                is_link: true,
-                text: _displayurl,
-                url: _linkurl,
-                indices: _url.indices
-            });
-        }
-        for (var _i = 0; _i < _tweet.source.entities.user_mentions.length; _i++) {
-            var _user = _tweet.source.entities.user_mentions[_i];
-            _entities.push({
-                is_link: true,
-                text: '@' + _user.screen_name,
-                url: 'http://twitter.com/' + encodeURIComponent(_user.screen_name),
-                indices: _user.indices
-            });
-        }
-        for (var _i = 0; _i < this.polemics.length; _i++) {
-            for (var _j = 0; _j < this.polemics[_i].keywords.length; _j++) {
-                var _p = _tweet.source.text.indexOf(this.polemics[_i].keywords[_j]);
-                while (_p !== -1) {
-                    var _end = (_p + this.polemics[_i].keywords[_j].length);
-                    _entities.push({
-                        is_link: false,
-                        text: this.polemics[_i].keywords[_j],
-                        color: this.polemics[_i].color,
-                        indices: [_p, _end]
-                    });
-                    _p = _tweet.source.text.indexOf(this.polemics[_i].keywords[_j], _end);
-                }
-            }
-        }
-        _entities = IriSP._(_entities).sortBy(function(_entity) {
+        var extend = [
+            [
+                /#(\w+)/gm,
+                function(matches) {
+                    return '<a href="http://twitter.com/search?q=%23' + matches[1] + '" target="_blank">';
+                },
+                '</a>'
+            ]
+        ];
+        var _urls = IriSP._(_tweet.source.entities.urls).sortBy(function(_entity) {
             return _entity.indices[0];
         });
+        
         var _currentPos = 0,
             _txt = '';
-        for (var _i = 0; _i < _entities.length; _i++) {
-            if (_entities[_i].indices[0] >= _currentPos) {
-                _txt += _tweet.source.text.substring(_currentPos, _entities[_i].indices[0]);
-                _currentPos = _entities[_i].indices[1];
-                if (_entities[_i].is_link) {
-                    _txt += '<a href="' + _entities[_i].url + '" target="_blank">';
-                } else {
-                    _txt += '<span style="background:' + _entities[_i].color + '">';
-                }
-                _txt += _entities[_i].text;
-                if (_entities[_i].is_link) {
-                    _txt += '</a>';
-                } else {
-                    _txt += '</span>';
-                }
+        IriSP._(_urls).each(function(_url) {
+            if (_url.indices[0] >= _currentPos) {
+                _txt += _tweet.source.text.substring(_currentPos, _url.indices[0]);
+                _txt += (typeof _url.expanded_url !== "undefined" && _url.expanded_url !== null ? _url.expanded_url : _url.url);
+                _currentPos = _url.indices[1];
             }
-        }
+        });
         _txt += _tweet.source.text.substring(_currentPos);
-        this.$.find(".Ldt-Tweet-Avatar").attr("src",_tweet.source.user.profile_image_url);
-        this.$.find(".Ldt-Tweet-ScreenName").html('@'+_tweet.source.user.screen_name);
-        this.$.find(".Ldt-Tweet-ProfileLink").attr("href", "https://twitter.com/" + _tweet.source.user.screen_name);
-        this.$.find(".Ldt-Tweet-FullName").html(_tweet.source.user.name);
-        this.$.find(".Ldt-Tweet-Contents").html(_txt);
+        
+        for (var _i = 0; _i < this.polemics.length; _i++) {
+            var rx = IriSP.Model.regexpFromTextOrArray(this.polemics[_i].keywords);
+            extend.push([
+                rx,
+                '<span style="background: ' + this.polemics[_i].color + '">',
+                '</span>'
+            ]);
+        }
+        var rx = (_tweet.found ? (_this.source.getAnnotations().regexp || false) : false),
+            profile_url = _tweet.source.user ? _tweet.source.user.profile_image_url : _tweet.source.profile_image_url,
+            screen_name = _tweet.source.user ? _tweet.source.user.screen_name :_tweet.source.from_user,
+            user_name = _tweet.source.user ? _tweet.source.user.name :_tweet.source.from_user_name;
+        this.$.find(".Ldt-Tweet-Avatar").attr("src", profile_url);
+        this.$.find(".Ldt-Tweet-ScreenName").html('@' + screen_name);
+        this.$.find(".Ldt-Tweet-ProfileLink").attr("href", "https://twitter.com/" + screen_name);
+        this.$.find(".Ldt-Tweet-FullName").html(user_name);
+        this.$.find(".Ldt-Tweet-Contents").html(IriSP.textFieldHtml(_txt, rx, extend));
         this.$.find(".Ldt-Tweet-Time").html(this.l10n.original_time + new Date(_tweet.source.created_at).toLocaleTimeString() + " / " + this.l10n.video_time + _tweet.begin.toString());
         this.$.find(".Ldt-Tweet-Retweet").attr("href", "https://twitter.com/intent/retweet?tweet_id=" + _tweet.source.id_str);
         this.$.find(".Ldt-Tweet-Reply").attr("href", "https://twitter.com/intent/tweet?in_reply_to=" + _tweet.source.id_str);
-        this.$.find(".Ldt-Tweet-Original").attr("href", "https://twitter.com/" + _tweet.source.user.screen_name + "/status/" + _tweet.source.id_str);
-        this.player.popcorn.trigger("IriSP.Annotation.minimize");
+        this.$.find(".Ldt-Tweet-Original").attr("href", "https://twitter.com/" + screen_name + "/status/" + _tweet.source.id_str);
+        this.player.trigger("Annotation.minimize");
         this.$.slideDown();
         this.cancelTimeout();
         if (!this.pinned) {
@@ -179,22 +147,22 @@
     } else {
         this.hide();
     }
-}
+};
 
 IriSP.Widgets.Tweet.prototype.hide = function() {
-    this.player.popcorn.trigger("IriSP.Annotation.maximize");
+    this.player.trigger("Annotation.maximize");
     this.$.slideUp();
     this.cancelTimeout();
-}
+};
 
 IriSP.Widgets.Tweet.prototype.cancelTimeout = function() {
     if (typeof this.hide_timer !== "undefined") {
         window.clearTimeout(this.hide_timer);
         this.hide_timer = undefined;
     }  
-}
+};
 
 IriSP.Widgets.Tweet.prototype.hideTimeout = function() {
     this.cancelTimeout();
     this.hide_timer = window.setTimeout(this.functionWrapper("hide"), this.hide_timeout);
-}
+};