oups (last commit in bad branch) new-model
authorcavaliet
Thu, 02 Jan 2014 16:49:20 +0100
branchnew-model
changeset 1020 198c2b79f5e1
parent 1019 3ab36f402b0c
oups (last commit in bad branch)
src/widgets/AdaptivePlayer.js
src/widgets/Annotation.css
src/widgets/Annotation.js
src/widgets/AnnotationsList.css
src/widgets/AnnotationsList.js
src/widgets/Arrow.js
src/widgets/AutoPlayer.js
src/widgets/Controller.css
src/widgets/Controller.js
src/widgets/CreateAnnotation.css
src/widgets/CreateAnnotation.js
src/widgets/DailymotionPlayer.js
src/widgets/HelloWorld.js
src/widgets/HtmlPlayer.js
src/widgets/JwpPlayer.js
src/widgets/KnowledgeConcierge.css
src/widgets/KnowledgeConcierge.js
src/widgets/MediaList.js
src/widgets/Mediafragment.js
src/widgets/MultiSegments.js
src/widgets/Polemic.js
src/widgets/PopcornPlayer.js
src/widgets/Segments.css
src/widgets/Segments.js
src/widgets/Slice.css
src/widgets/Slice.js
src/widgets/Slider.css
src/widgets/Slider.js
src/widgets/Slideshare.js
src/widgets/Social.js
src/widgets/Sparkline.js
src/widgets/Tagcloud.js
src/widgets/Tooltip.css
src/widgets/Tooltip.js
src/widgets/Trace.js
src/widgets/Tweet.js
--- a/src/widgets/AdaptivePlayer.js	Thu Jan 02 16:40:25 2014 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,33 +0,0 @@
-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
--- a/src/widgets/Annotation.css	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Annotation.css	Thu Jan 02 16:49:20 2014 +0100
@@ -23,11 +23,6 @@
     font-weight: bold;
 }
 
-.Ldt-Annotation-Description {
-    max-height: 150px;
-    overflow: auto;
-}
-
 .Ldt-Annotation-Cleared {
     clear: both;
 }
@@ -59,11 +54,6 @@
 
 .Ldt-Annotation-Title, .Ldt-Annotation-MashupMedia {
     color: #0068c4;
-    text-decoration: none;
-}
-
-.Ldt-Annotation-Type {
-    color: #8080A0;
 }
 
 .Ldt-Annotation-Time {
@@ -72,7 +62,6 @@
 
 .Ldt-Annotation-Inner p {
     font-size: 12px;
-    line-height: 16px;
 }
 
 .Ldt-Annotation-Label {
--- a/src/widgets/Annotation.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Annotation.js	Thu Jan 02 16:49:20 2014 +0100
@@ -13,36 +13,29 @@
     fr: {
         watching: "Je regarde ",
         on_site: " sur ",
-        tags_: "Mots-clés\u00a0:",
-        description_: "Description\u00a0:",
-        creator_: "Créé par\u00a0:",
-        excerpt_from: "Extrait de\u00a0:",
-        untitled: "Segment sans titre"
+        tags_: "Mots-clés&nbsp;:",
+        description_: "Description&nbsp;:",
+        excerpt_from: "Extrait de&nbsp;:"
     },
     en: {
         watching: "I'm watching ",
         on_site: " on ",
         tags_: "Keywords:",
         description_: "Description:",
-        creator_: "Created by\u00a0:",
-        excerpt_from: "Excerpt from:",
-        untitled: "Untitled segment"
+        excerpt_from: "Excerpt from:"
     }
-};
+}
 
 IriSP.Widgets.Annotation.prototype.template =
-    '{{#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-Widget {{#show_top_border}}Ldt-Annotation-ShowTop{{/show_top_border}}">'
     + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty{{#start_minimized}} Ldt-Annotation-Minimized{{/start_minimized}}">'
     + '<div class="Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-MaxMinButton"></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}}'
+    + '<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>'
     + '<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>'
@@ -50,169 +43,113 @@
 
 IriSP.Widgets.Annotation.prototype.defaults = {
     annotation_type : "chap",
-    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
-};
+    start_minimized: true,
+    show_top_border : false,
+    site_name : "Lignes de Temps"
+}
 
 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.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-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.$.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.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: ( _list[0].begin + _list[0].end ) / 2});
     }
-    
-    this.renderTemplate();
-    
-    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");
+    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.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.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))
-	    };
-    });
-};
+    this.sendBounds();
+}
 
 IriSP.Widgets.Annotation.prototype.sendBounds = function() {
-    this.player.trigger("Annotation.boundsChanged",this.bounds);
-};
+    this.player.popcorn.trigger("IriSP.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) {
@@ -220,14 +157,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
--- a/src/widgets/AnnotationsList.css	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/AnnotationsList.css	Thu Jan 02 16:49:20 2014 +0100
@@ -8,11 +8,6 @@
 .Ldt-AnnotationsListWidget a {
     text-decoration: none;
 }
-
-.Ldt-AnnotationsList-Audio {
-    width: 1px; height: 1px;
-}
-
 ul.Ldt-AnnotationsList-ul {
     list-style: none;
     padding: 2px;
@@ -28,6 +23,10 @@
 .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;
@@ -54,25 +53,14 @@
     margin: 2px 2px 0 82px;
     font-weight: bold;
 }
-
-.Ldt-AnnotationsList-Title a {
+h3.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;
@@ -96,14 +84,4 @@
 
 .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
--- a/src/widgets/AnnotationsList.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/AnnotationsList.js	Thu Jan 02 16:49:20 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);
-    }, 800);
-    this.searchString = false;
-    this.lastSearch = false;
+    }, 1500);
+    this.mashupMode = (this.source.currentMedia.elementType === "mashup");
 };
 
 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 : 600000, 
+    ajax_granularity : 300000, 
     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,9 +26,8 @@
     foreign_url : "",
     annotation_type : false,
     refresh_interval : 0,
-    limit_count : 20,
+    limit_count : 10,
     newest_first : false,
-    show_audio: true,
     polemics : [{
         keyword: "++",
         background_color: "#c9ecc6"
@@ -44,20 +43,8 @@
     }]
 };
 
-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>';
@@ -65,15 +52,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}}" draggable="true">'
+    + '<a href="{{url}}">'
     + '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
     + '</a>'
     + '</div>'
     + '<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>'
-    + '<h3 class="Ldt-AnnotationsList-Title" draggable="true">'
-    + '<a href="{{url}}">{{{htitle}}}</a>'
+    + '<h3 class="Ldt-AnnotationsList-Title">'
+    + '<a href="{{url}}">{{title}}</a>'
     + '</h3>'
-    + '<p class="Ldt-AnnotationsList-Description">{{{hdescription}}}</p>'
+    + '<p class="Ldt-AnnotationsList-Description">{{description}}</p>'
     + '{{#tags.length}}'
     + '<ul class="Ldt-AnnotationsList-Tags">'
     + '{{#tags}}'
@@ -85,15 +72,30 @@
     + '{{/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.media.getCurrentTime(),
-        _duration = this.media.duration;
+    var _currentTime = this.player.popcorn.currentTime(),
+        _duration = this.source.getDuration();
+    if (typeof _currentTime == "undefined") {
+        _currentTime = 0;
+    }
     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),
@@ -102,11 +104,14 @@
     this.currentSource = this.player.loadMetadata(IriSP._.defaults({
         "url" : _url
     }, this.metadata));
-};
+}
 
 IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function() {
-    var _currentTime = this.media.getCurrentTime();
-    var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);
+    var _currentTime = this.player.popcorn.currentTime();
+    if (typeof _currentTime == "undefined") {
+        _currentTime = 0;
+    }
+    var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime * 1000);
     if (typeof _currentAnnotation !== "undefined" && _currentAnnotation.id !== this.lastMashupAnnotation) {
         this.lastMashupAnnotation = _currentAnnotation.id;
         var _currentMedia = _currentAnnotation.getMedia(),
@@ -119,7 +124,7 @@
             "url" : _url
         }, this.metadata));
     }
-};
+}
 
 IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
     _forceRedraw = (typeof _forceRedraw !== "undefined" && _forceRedraw);
@@ -127,26 +132,28 @@
         return 0;
     }
     var _this = this,
-        _currentTime = this.media.getCurrentTime();
+        _currentTime = this.player.popcorn.currentTime();
+    if (typeof _currentTime == "undefined") {
+        _currentTime = 0;
+    }
     var _list = this.annotation_type ? this.currentSource.getAnnotationsByTypeTitle(this.annotation_type) : this.currentSource.getAnnotations();
     if (this.mashupMode) {
-        var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);
+        var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime * 1000);
         if (typeof _currentAnnotation !== "undefined") {
-            _currentTime = _currentTime - _currentAnnotation.begin + _currentAnnotation.annotation.begin;
+            _currentTime = _currentTime - _currentAnnotation.begin.getSeconds() + _currentAnnotation.annotation.begin.getSeconds();
             var _mediaId = _currentAnnotation.getMedia().id;
             _list = _list.filter(function(_annotation) {
                 return _annotation.getMedia().id === _mediaId;
             });
         }
     }
-    _list = _list.filter(function(_annotation) {
-        return _annotation.found !== false;
-    });
+    if (this.searchString) {
+        _list = _list.searchByTextFields(this.searchString);
+    }
     if (this.limit_count) {
-        /* Get the n annotations closest to current timecode */
         _list = _list.sortBy(function(_annotation) {
-            return Math.abs((_annotation.begin + _annotation.end) / 2 - _currentTime);
-        }).slice(0, this.limit_count);
+            return Math.abs(_annotation.begin.getSeconds() - _currentTime);
+        }).slice(0, this.limit_count)
     }
     if (this.newest_first) {
         _list = _list.sortBy(function(_annotation) {
@@ -160,9 +167,8 @@
     
     var _ids = _list.idIndex;
     
-    if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds) || this.searchString !== this.lastSearch) {
+    if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds)) {
         /* This part only gets executed if the list needs updating */
-        this.lastSearch = this.searchString;
         this.lastIds = _ids;
         this.list_$.html("");
         _list.forEach(function(_annotation) {
@@ -180,22 +186,17 @@
                             annotationType : _annotation.annotationType.id
                         }
                     )
-                    : document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id
+                    : '#id=' + _annotation.id
                     )
             );
-            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;
+            var _title = (_annotation.title || "").replace(_annotation.description,''),
+                _description = _annotation.description;
+            if (!_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;
+            if (!_annotation.description && _annotation.creator) {
+                _description = _annotation.title;
+                _title = _annotation.creator;
             }
             var _bgcolor;
             IriSP._(_this.polemics).each(function(_polemic) {
@@ -207,54 +208,17 @@
             var _data = {
                 id : _annotation.id,
                 media_id : _annotation.getMedia().id,
-                htitle : IriSP.textFieldHtml(_title),
-                hdescription : IriSP.textFieldHtml(_description),
+                title : _title,
+                description : _description,
                 begin : _annotation.begin.toString(),
                 end : _annotation.end.toString(),
-                thumbnail : _thumbnail,
+                thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail,
                 url : _url,
                 tags : _annotation.getTagTexts(),
-                specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
-                l10n: _this.l10n
+                specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : "")
             };
-            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");
-                };
+            var _html = Mustache.to_html(_this.annotationTemplate, _data);
+            var _el = IriSP.jQuery(_html);
             _el.mouseover(function() {
                     _annotation.trigger("select");
                 })
@@ -262,47 +226,35 @@
                     _annotation.trigger("unselect");
                 })
                 .appendTo(_this.list_$);
-            IriSP.attachDndData(_el.find("[draggable]"), {
-            	title: _title,
-            	description: _description,
-            	uri: _url,
-            	image: _annotation.thumbnail
+            _annotation.on("select", function() {
+                _this.annotations_$.removeClass("selected");
+                _el.addClass("selected");
             });
-            _el.on("remove", function() {
-                _annotation.off("select", _onselect);
-                _annotation.off("unselect", _onunselect);
-            });
-            _annotation.on("select", _onselect);
-            _annotation.on("unselect", _onunselect);
+            _annotation.on("unselect", function() {
+                _this.annotations_$.removeClass("selected");
+            });;
         });
         
+        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.remove();
+                _el.detach();
             }
         });
     
         this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() {
-            _this.source.getAnnotations().search(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
-        });
+            _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
+        })
         
-        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;
+        if(this.searchString) {
+            var _searchRe = IriSP.Model.regexpFromTextOrArray(this.searchString);
             this.$.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description").each(function() {
                 var _$ = IriSP.jQuery(this);
-                _$.html(IriSP.textFieldHtml(_$.text(), rx));
-            });
+                _$.html(_$.text().replace(/(^\s+|\s+$)/g,'').replace(_searchRe, '<span class="Ldt-AnnotationsList-highlight">$1</span>'))
+            })
         }
     }
     
@@ -310,59 +262,26 @@
         if (this.mashupMode) {
             this.ajaxMashup();
         } else {
-            if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity)) {
+            if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity / 2000)) {
                 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");
     
-    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();
-    });
+    var _this = this;
     
     if (this.ajax_url) {
         if (this.mashupMode) {
@@ -376,18 +295,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.onMediaEvent(_events[_i], this.throttledRefresh);
+        this.player.popcorn.listen(_events[_i], this.throttledRefresh);
     }
     
     this.throttledRefresh();
--- a/src/widgets/Arrow.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Arrow.js	Thu Jan 02 16:49:20 2014 +0100
@@ -6,25 +6,25 @@
 IriSP.Widgets.Arrow.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Arrow.prototype.defaults = {
-    arrow_height : 12,
-    arrow_width : 20,
+    arrow_height : 16,
+    arrow_width : 24,
     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
-};
+    animation_speed: 20,
+    pilot_widget: "Annotation"
+}
 
 IriSP.Widgets.Arrow.prototype.draw = function() {
     this.height = this.arrow_height + this.base_height;
     this.$.addClass("Ldt-Arrow").css({
-        height: (1+this.height) + "px",
-        "margin-top": "1px",
-        overflow: "hidden"
+        height: this.height + "px",
+        "margin-top": "1px"
     });
-    this.paper = new Raphael(this.container, this.width, 1+this.height );
+    this.paper = new Raphael(this.container, this.width, this.height );
     window.myArrow = this;
     this.svgArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height);
     this.svgArrow.attr({
@@ -32,11 +32,14 @@
         "stroke-width": this.stroke_width,
         fill: this.fill_url ? ( 'url(' + this.fill_url + ')' ) : this.fill_color
     });
-    this.moveToX(0);
-};
+    this.moveTo(0);
+    this.bindPopcorn("IriSP.Arrow.updatePosition","onUpdatePosition");
+    this.bindPopcorn("IriSP.Arrow.takeover","onTakeover");
+    this.bindPopcorn("IriSP.Arrow.release","onRelease");
+}
 
 IriSP.Widgets.Arrow.prototype.drawAt = function(_x) {
-    _x = Math.max(0, Math.min(_x, this.width));
+    _x = Math.floor(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
@@ -53,22 +56,18 @@
     this.svgArrow.attr({
         path: _d
     });
-};
+}
 
-IriSP.Widgets.Arrow.prototype.moveToX = function(_x) {
-    this.targetX = Math.max(0, Math.min(_x, this.width));
+IriSP.Widgets.Arrow.prototype.moveTo = function(_x) {
+    this.targetX = Math.floor(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") {
@@ -85,4 +84,22 @@
         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;
+}
--- a/src/widgets/AutoPlayer.js	Thu Jan 02 16:40:25 2014 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,76 +0,0 @@
-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
--- a/src/widgets/Controller.css	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Controller.css	Thu Jan 02 16:49:20 2014 +0100
@@ -9,7 +9,7 @@
 }
 
 .Ldt-Ctrl-Left {
-  float:left; width: 300px;
+  float:left;
 }
 
 .Ldt-Ctrl-Right {
@@ -82,12 +82,13 @@
 }
 
 .Ldt-Ctrl-Search {
-  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;
+  display: none;
+  width: 165px;
+  height: 25px;
+  border: 1px;
+  border-color: #CFCFCF;
+  float: left;
+  text-align: center;
 }
 
 .Ldt-Ctrl-Time {
--- a/src/widgets/Controller.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Controller.js	Thu Jan 02 16:49:20 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.lastSearchValue = "";
+  IriSP.Widgets.Widget.call(this, player, config);
+  
+  this._searchLastValue = "";
 };
 
 IriSP.Widgets.Controller.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Controller.prototype.defaults = {
     disable_annotate_btn: false,
-    disable_search_btn: false,
-    disable_ctrl_f: false
-};
+    disable_search_btn: 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 duration",
+        total_time: "Total time",
         volume: "Volume",
         volume_control: "Volume control"
     },
@@ -69,7 +69,7 @@
         unmute: "Activer le son",
         annotate: "Annoter",
         search: "Rechercher",
-        elapsed_time: "Temps écoulé",
+        elapsed_time: "Durée écoulée",
         total_time: "Durée totale",
         volume: "Niveau sonore",
         volume_control: "Réglage du niveau sonore"
@@ -87,21 +87,25 @@
     this.$volumeBar = this.$.find(".Ldt-Ctrl-Volume-Bar");
     
     // handle events
-    this.onMediaEvent("play","playButtonUpdater");
-    this.onMediaEvent("pause","playButtonUpdater");
-    this.onMediaEvent("volumechange","volumeUpdater");
-    this.onMediaEvent("timeupdate","timeDisplayUpdater");
-    this.onMediaEvent("loadedmetadata","volumeUpdater");
+    this.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");
     
     // handle clicks
     this.$playButton.click(this.functionWrapper("playHandler"));
     
     this.$.find(".Ldt-Ctrl-Annotate").click(function() {
-        _this.player.trigger("CreateAnnotation.toggle");
+        _this.player.popcorn.trigger("IriSP.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')
@@ -117,28 +121,13 @@
     }).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.media.setVolume(ui.value / 100);
+            _this.player.popcorn.volume(ui.value / 100);
         },
         stop: this.functionWrapper("volumeUpdater")
     });
@@ -146,38 +135,33 @@
     // trigger an IriSP.Player.MouseOver to the widgets that are interested (i.e : sliderWidget)
     this.$.hover(
         function() {
-            _this.player.trigger("Player.MouseOver");
+            _this.player.popcorn.trigger("IriSP.Player.MouseOver");
         }, 
         function() {
-            _this.player.trigger("Player.MouseOut");
+            _this.player.popcorn.trigger("IriSP.Player.MouseOut");
         });
-    
-    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();
-    });
+    /* some players - including jwplayer - save the state of the mute button between sessions */
+
+    window.setTimeout(this.functionWrapper("volumeUpdater"), 1000);
    
 };
 
 /* Update the elasped time div */
-IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function(_time) {
+IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function() {
+    var _curTime = this.player.popcorn.roundTime();
+    if (typeof this._previousSecond !== "undefined" && _curTime === this._previousSecond) {
+        return;
+    }
   
     // we get it at each call because it may change.
-    var _totalTime = this.media.duration;
-    this.$.find(".Ldt-Ctrl-Time-Elapsed").html(_time.toString());
+    var _totalTime = this.source.getDuration(),
+        _elapsedTime = new IriSP.Model.Time();
+        
+    _elapsedTime.setSeconds(_curTime);
+  
+    this.$.find(".Ldt-Ctrl-Time-Elapsed").html(_elapsedTime.toString());
     this.$.find(".Ldt-Ctrl-Time-Total").html(_totalTime.toString());
+    this._previousSecond = _curTime;
 };
 
 /* update the icon of the button - separate function from playHandler
@@ -185,7 +169,10 @@
    the jwplayer window) we have to change the icon without playing/pausing
 */
 IriSP.Widgets.Controller.prototype.playButtonUpdater = function() {
-    if (this.media.getPaused()) {
+    
+    var status = this.player.popcorn.media.paused;
+  
+    if (status) {
     /* the background sprite is changed by adding/removing the correct classes */
         this.$playButton
             .attr("title", this.l10n.play)
@@ -201,20 +188,23 @@
 
 
 IriSP.Widgets.Controller.prototype.playHandler = function() {
-    if (this.media.getPaused()) {        
-        this.media.play();
+    
+    var status = this.player.popcorn.media.paused;
+  
+    if (status) {        
+        this.player.popcorn.play();   
     } else {
-        this.media.pause();
+        this.player.popcorn.pause();
     }  
 };
 
 IriSP.Widgets.Controller.prototype.muteHandler = function() {
-    this.media.setMuted(!this.media.getMuted());
+    this.player.popcorn.muted(!this.player.popcorn.muted());
 };
 
 IriSP.Widgets.Controller.prototype.volumeUpdater = function() {
-    var _muted = this.media.getMuted(),
-        _vol = this.media.getVolume();
+    var _muted = this.player.popcorn.muted(),
+        _vol = this.player.popcorn.volume();
     if (_vol === false) {
         _vol = .5;
     }
@@ -225,29 +215,43 @@
             .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.animate({ width:"160px" }, 200);
+    this.$searchBlock.show("blind", { direction: "horizontal"}, 100);
     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.$searchBlock.animate( { width: 0 }, 200);
+    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");
 };
 
 /** react to clicks on the search button */
 IriSP.Widgets.Controller.prototype.searchButtonHandler = function() {
-    if ( !this.$searchBlock.width() ) {
+    if ( this.$searchBlock.is(":hidden") ) {
         this.showSearchBlock();
-        var _val = this.$searchInput.val();
-        if (_val) {
-            this.source.getAnnotations().search(_val);
-        }
+        this.$searchInput.val(this._searchLastValue);      
+        this.player.popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural.
 	} else {
         this.hideSearchBlock();
     }
@@ -256,22 +260,40 @@
 /** this handler is called whenever the content of the search
    field changes */
 IriSP.Widgets.Controller.prototype.searchHandler = function() {
-    if ( !this.$searchBlock.width() ) {
-        this.$searchBlock.css({ width:"160px" });
-        this.$searchInput.css('background-color','#fff');
-    }
-    var _val = this.$searchInput.val();
+    this._searchLastValue = this.$searchInput.val();
     this._positiveMatch = false;
-    
+  
     // do nothing if the search field is empty, instead of highlighting everything.
-    if (_val !== this.lastSearchValue) {
-        if (_val) {
-            this.source.getAnnotations().search(_val);
-        } else {
-            this.source.getAnnotations().trigger("clear-search");
-            this.$searchInput.css('background-color','');
-        }
+    if (this._searchLastValue == "") {
+        this.player.popcorn.trigger("IriSP.search.cleared");
+        this.$searchInput.css('background-color','');
+    } else {
+        this.player.popcorn.trigger("IriSP.search", this._searchLastValue);
     }
-    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.
+};
+
+
--- a/src/widgets/CreateAnnotation.css	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/CreateAnnotation.css	Thu Jan 02 16:49:20 2014 +0100
@@ -11,11 +11,13 @@
 }
 
 .Ldt-CreateAnnotation-Inner {
-    background: url(img/pinstripe.png); padding: 5px; margin: 0; position: relative;
+    background: url(img/pinstripe.png);
+    padding: 5px;
+    margin: 0;
 }
 
 .Ldt-CreateAnnotation-Inner h3 {
-    margin: 5px 0; font-size: 14px; font-weight: bold; text-align: right; clear:both; color: #0068c4;
+    margin: 5px 0; font-size: 14px; font-weight: bold; text-align: right;
 }
 
 .Ldt-CreateAnnotation-h3Left {
@@ -34,11 +36,6 @@
     border-radius: 2px;
 }
 
-.Ldt-CreateAnnotation-Title.empty, .Ldt-CreateAnnotation-Creator.empty {
-    font-style: italic;
-    color: #90b0d0;
-}
-
 .Ldt-CreateAnnotation-Times {
     color: #ff3b77
 }
@@ -72,10 +69,6 @@
     border-radius: 2px;
 }
 
-.Ldt-CreateAnnotation-Description.empty {
-    font-style: italic; color: #999999;
-}
-
 .Ldt-CreateAnnotation-Avatar {
     float: right;
     width: 48px;
@@ -93,11 +86,11 @@
     border: 1px solid #bbbbbb;
 }
 
-.Ldt-CreateAnnotation-RecBlock {
-    width: 220px; float: left;
+.Ldt-CreateAnnotation-Tags, .Ldt-CreateAnnotation-Polemics {
+    width: 520px;
 }
 
-.Ldt-CreateAnnotation-TagTitle, .Ldt-CreateAnnotation-PolemicTitle, .Ldt-CreateAnnotation-RecLabel {
+.Ldt-CreateAnnotation-TagTitle, .Ldt-CreateAnnotation-PolemicTitle {
     display: block; margin: 5px 0 2px; font-size: 12px;
 }
 
--- a/src/widgets/CreateAnnotation.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/CreateAnnotation.js	Thu Jan 02 16:49:20 2014 +0100
@@ -1,4 +1,4 @@
-/* TODO: Add Social Network Sharing */
+/* TODO: Add Social Network Sharing, Finish Current Timecode Sync & Arrow Takeover */
 
 IriSP.Widgets.CreateAnnotation = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
@@ -7,14 +7,12 @@
 IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.CreateAnnotation.prototype.defaults = {
-    show_title_field : true,
+    show_title_field : false, /* For the moment, titles can't be sent to ldtplatform */
     show_creator_field : true,
     start_visible : true,
     always_visible : false,
-    show_slice : true,
-    show_arrow : true,
-    show_mic_record: false,
-    show_mic_play: false,
+    sync_on_slice_widget : true, /* If false, syncs on current timecode */
+    takeover_arrow : false,
     minimize_annotation_widget : true,
     creator_name : "",
     creator_avatar : "",
@@ -39,15 +37,13 @@
         background_color: "#f0e000",
         text_color: "#000000"
     }],
-    slice_annotation_type: "chap",
     annotation_type: "Contributions",
     api_serializer: "ldt_annotate",
     api_endpoint_template: "",
-    api_method: "POST",
+    api_method: "PUT",
     after_send_timeout: 0,
     close_after_send: false,
-    tag_prefix: "#"
-};
+}
 
 IriSP.Widgets.CreateAnnotation.prototype.messages = {
     en: {
@@ -56,85 +52,59 @@
         at_time: "at",
         submit: "Submit",
         add_keywords_: "Add keywords:",
-        add_polemic_keywords_: "Add polemic attributes :",
+        add_polemic_keywords_: "Add polemic keywords:",
         your_name_: "Your name:",
-        annotate_video: "Annotate this video",
+        no_title: "Annotate this video",
         type_title: "Annotation title",
-        type_description: "Type the full contents of your annotation here.",
-        wait_while_processing: "Please wait while your annotation is being processed...",
+        type_description: "Type the full description of your annotation here.",
+        wait_while_processing: "Please wait while your request 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 ?",
-        close_widget: "Hide the annotation form",
-        "polemic++": "Agree",
-        "polemic--": "Disagree",
-        "polemic??": "Question",
-        "polemic==": "Reference"
+        share_on: "Share on",
+        more_tags: "More tags",
+        cancel: "Cancel",
+        close_widget: "Cacher la zone de création d'annotations"
     },
     fr: {
         from_time: "de",
         to_time: "à",
         at_time: "à",
         submit: "Envoyer",
-        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",
+        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",
         type_title: "Titre de l'annotation",
-        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.",
+        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.",
         annotation_saved: "Merci, votre annotation a été enregistrée.",
         share_annotation: "Souhaitez-vous la partager sur les réseaux sociaux ?",
-        close_widget: "Cacher le formulaire de création d'annotations",
-        "polemic++": "Accord",
-        "polemic--": "Désaccord",
-        "polemic??": "Question",
-        "polemic==": "Référence"
+        share_on: "Partager sur",
+        more_tags: "Plus de mots-clés",
+        cancel: "Cancel",
+        close_widget: "Hide the annotation creating block"
     }
-};
+}
 
 IriSP.Widgets.CreateAnnotation.prototype.template =
-    '{{#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">'
+    '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">'
     + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">'
-    + '<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>'
+    + '<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>'
     + '<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}}" data-text="{{tag_prefix}}{{title}}"><span class="Ldt-CreateAnnotation-TagButton">{{title}}</span></li>{{/tags}}</ul></div>{{/tags.length}}'
+    + '{{#tags}}<li class="Ldt-CreateAnnotation-TagLi" tag-id="{{id}}"><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}}" data-text="{{keyword}}">{{keyword}}</li>{{/polemics}}</ul></div>{{/polemics.length}}'
+    + '{{#polemics}}<li class="Ldt-CreateAnnotation-PolemicLi" style="background-color: {{background_color}}; color: {{text_color}}">{{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>'
@@ -143,31 +113,18 @@
     
 IriSP.Widgets.CreateAnnotation.prototype.draw = function() {
     var _this = this;
-    
-    this.begin = new IriSP.Model.Time();
-    this.end = this.source.getDuration();
-    
-    this.tag_prefix = this.tag_prefix || "";
-    
     if (this.tag_titles && !this.tags) {
-		if(!(this.tag_titles.length==1 && this.tag_titles[0]=="")){
-			this.tags = IriSP._(this.tag_titles).map(function(_tag_title) {
-				var _tag,
-					_tags = _this.source.getTags().searchByTitle(_tag_title, true);
-				if (_tags.length) {
-					_tag = _tags[0];
-				} else {
-					_tag = new IriSP.Model.Tag(false, _this.source);
-					_this.source.getTags().push(_tag);
-					_tag.title = _tag_title;
-				}
-				return _tag;
-			});
-        }
-        else{
-        	// we forced no tags if this.tag_titles = [''] (and not false)
-        	this.tags = true;
-        }
+        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.tags) {
         this.tags = this.source.getTags()
@@ -180,44 +137,7 @@
             });
         /* 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()
@@ -225,17 +145,9 @@
         return false;
     });
     this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").click(function() {
-        _this.addKeyword(IriSP.jQuery(this).attr("data-text"));
+        _this.addKeyword(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
         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"));
@@ -251,9 +163,12 @@
         this.hide();
     }
     
-    this.onMdpEvent("CreateAnnotation.toggle","toggle");
+    this.bindPopcorn("IriSP.CreateAnnotation.toggle","toggle");
+    this.bindPopcorn("IriSP.Slice.boundsChanged","onBoundsChanged");
+    this.begin = new IriSP.Model.Time();
+    this.end = this.source.getDuration();
     this.$.find("form").submit(this.functionWrapper("onSubmit"));
-};
+}
 
 IriSP.Widgets.CreateAnnotation.prototype.showScreen = function(_screenName) {
     this.$.find('.Ldt-CreateAnnotation-' + _screenName).show()
@@ -263,35 +178,31 @@
 IriSP.Widgets.CreateAnnotation.prototype.show = function() {
     this.visible = true;
     this.showScreen('Main');
-    this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666").addClass("empty");
+    this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666");
     if (this.show_title_field) {
-        this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666").addClass("empty");
+        this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666");
     }
     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.trigger("Annotation.minimize");
+        this.player.popcorn.trigger("IriSP.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.trigger("Annotation.maximize");
+            this.player.popcorn.trigger("IriSP.Annotation.maximize");
         }
+        this.player.popcorn.trigger("IriSP.Slice.hide");
     }
-};
+}
 
 IriSP.Widgets.CreateAnnotation.prototype.toggle = function() {
     if (!this.always_visible) {
@@ -301,7 +212,14 @@
             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"),
@@ -313,25 +231,20 @@
     );
     _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.media.getPaused()) {
-        this.media.pause();
+    if (this.pause_on_write && !this.player.popcorn.media.paused) {
+        this.player.popcorn.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).attr("data-text"));
+        var _rx = IriSP.Model.regexpFromTextOrArray(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
         if (_contents.match(_rx)) {
             IriSP.jQuery(this).addClass("selected");
         } else {
@@ -340,51 +253,36 @@
     });
     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 false;
+        return;
     }
     
-    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 */
+    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 */
         _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, true), /* Récupération du type d'annotation dans lequel l'annotation doit être ajoutée */
+        _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type), /* 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 */
     
@@ -400,9 +298,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) {
@@ -411,42 +309,16 @@
     }
     _annotation.created = new Date(); /* Date de création de l'annotation */
     _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); /* Champ description */
-   
-    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
-        };
+    _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 */
+    if (this.show_creator_field) {
+        _export.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val();
+    } else {
+        _export.creator = this.creator_name;
     }
-    if (this.show_creator_field) {
-        _annotation.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val();
-    } else {
-        _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 */
     
@@ -464,7 +336,7 @@
                     function() {
                         _this.close_after_send
                         ? _this.hide()
-                        : _this.show();
+                        : _this.showScreen("Main");
                     },
                     _this.after_send_timeout
                 );
@@ -472,10 +344,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.media.getPaused()) {
-                _this.media.play();
+            if (_this.pause_on_write && _this.player.popcorn.media.paused) {
+                _this.player.popcorn.play();
             }
-            _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
+            _this.player.popcorn.trigger("IriSP.AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
         },
         error: function(_xhr, _error, _thrown) {
             IriSP.log("Error when sending annotation", _thrown);
@@ -490,5 +362,5 @@
     this.showScreen('Wait');
     
     return false;
-};
+}
 
--- a/src/widgets/DailymotionPlayer.js	Thu Jan 02 16:40:25 2014 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,104 +0,0 @@
-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
--- a/src/widgets/HelloWorld.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/HelloWorld.js	Thu Jan 02 16:49:20 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
--- a/src/widgets/HtmlPlayer.js	Thu Jan 02 16:40:25 2014 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,15 +0,0 @@
-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
--- a/src/widgets/JwpPlayer.js	Thu Jan 02 16:40:25 2014 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,122 +0,0 @@
-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
--- a/src/widgets/KnowledgeConcierge.css	Thu Jan 02 16:40:25 2014 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,97 +0,0 @@
-.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;
-}
--- a/src/widgets/KnowledgeConcierge.js	Thu Jan 02 16:40:25 2014 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,333 +0,0 @@
-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();
-    
-};
--- a/src/widgets/MediaList.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/MediaList.js	Thu Jan 02 16:49:20 2014 +0100
@@ -7,16 +7,16 @@
 
 IriSP.Widgets.MediaList.prototype.messages = {
     "fr": {
-        now_playing: "Vidéo en cours",
-        all_media: "Toutes les vidéos",
-        other_media: "Autres vidéos"
+        now_playing: "Média en cours",
+        all_media: "Tous les medias",
+        other_media: "Autres médias"
     },
     "en": {
         now_playing: "Now playing",
-        all_media: "All videos",
-        other_media: "Other videos"
+        all_media: "All media",
+        other_media: "Other media"
     }
-};
+}
 
 IriSP.Widgets.MediaList.prototype.defaults = {
     default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
@@ -49,22 +49,17 @@
     var _n = this.refresh(true);
     if (this.searchString) {
         if (_n) {
-            this.player.trigger("search.matchFound");
+            this.player.popcorn.trigger("IriSP.search.matchFound");
         } else {
-            this.player.trigger("search.noMatchFound");
+            this.player.popcorn.trigger("IriSP.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();
 };
 
@@ -81,9 +76,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") {
@@ -121,10 +116,21 @@
                 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);
+    }
+}
--- a/src/widgets/Mediafragment.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Mediafragment.js	Thu Jan 02 16:49:20 2014 +0100
@@ -4,33 +4,23 @@
     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.onMdpEvent("Mediafragment.setHashToAnnotation","setHashToAnnotation");
+    this.bindPopcorn("pause","setHashToTime");
+    this.bindPopcorn("seeked","setHashToTime");
+    this.bindPopcorn("IriSP.Mediafragment.setHashToAnnotation","setHashToAnnotation");
     this.blocked = false;
-};
+}
 
 IriSP.Widgets.Mediafragment.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Mediafragment.prototype.draw = function() {
-    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");
-    }
-};
+    this.goToHash();
+}
 
 IriSP.Widgets.Mediafragment.prototype.setWindowHash = function(_hash) {
     if (typeof window.history !== "undefined" && typeof window.history.replaceState !== "undefined") {
@@ -38,7 +28,7 @@
     } else {
         document.location.hash = _hash;
     }
-};
+}
 
 IriSP.Widgets.Mediafragment.prototype.getLastHash = function() {
     var _tab = document.location.hash.replace(/^#/,'').split('&');
@@ -49,7 +39,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()) {
@@ -62,25 +52,27 @@
                 if (this.last_hash_key == "id") {
                     var _annotation = this.source.getElement(this.last_hash_value);
                     if (typeof _annotation !== "undefined") {
-                        this.media.setCurrentTime(_annotation.begin);
+                        this.player.popcorn.currentTime(_annotation.begin.getSeconds());
                     }
                 }
                 if (this.last_hash_key == "t") {
-                    this.media.setCurrentTime(1000*this.last_hash_value);
+                    this.player.popcorn.currentTime(this.last_hash_value);
                 }
                 break;
             }
         }
     }
-};
+}
 
 IriSP.Widgets.Mediafragment.prototype.setHashToAnnotation = function(_annotationId) {
     this.setHash( 'id', _annotationId );
-};
+}
 
-IriSP.Widgets.Mediafragment.prototype.setHashToTime = function() {
-    this.setHash( 't', this.media.getCurrentTime().getSeconds() );
-};
+IriSP.Widgets.Mediafragment.prototype.setHashToTime = function(_time) {
+    if (_time !== NaN) {
+        this.setHash( 't', this.player.popcorn.currentTime() );
+    }
+}
 
 IriSP.Widgets.Mediafragment.prototype.setHash = function(_key, _value) {
     if (!this.blocked && (this.last_hash_key !== _key || this.last_hash_value !== _value)) {
@@ -89,11 +81,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") {
@@ -101,12 +93,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"), 1500);
-};
+    this.blockTimeout = window.setTimeout(this.functionWrapper("unblock"), 1000);
+}
--- a/src/widgets/MultiSegments.js	Thu Jan 02 16:40:25 2014 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,136 +0,0 @@
-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
--- a/src/widgets/Polemic.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Polemic.js	Thu Jan 02 16:49:20 2014 +0100
@@ -15,12 +15,11 @@
         _to_: " to ",
         _annotations: " annotation(s)"
     }
-};
-
+}
 IriSP.Widgets.Polemic.prototype.defaults = {
     element_width : 5,
     element_height : 5,
-    max_elements: 20,
+    max_elements : 15,
     annotation_type : "tweet",
     defaultcolor : "#585858",
     foundcolor : "#fc00ff",
@@ -48,9 +47,45 @@
     ]
 };
 
+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.onMediaEvent("timeupdate", "onTimeupdate");
+    this.bindPopcorn("timeupdate", "onTimeupdate");
     this.$zone = IriSP.jQuery('<div>');
     this.$zone.addClass("Ldt-Polemic");
     this.$.append(this.$zone);
@@ -67,7 +102,6 @@
         
     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(),
@@ -83,10 +117,10 @@
                 begin : _begin.toString(),
                 end : _end.toString(),
                 annotations : _list.filter(function(_annotation) {
-                    return _annotation.begin >= _begin && _annotation.begin < _end;
+                    return _annotation.begin >= _begin && _annotation.end < _end;
                 }),
                 polemicStacks : []
-            };
+            }
             
         for (var _j = 0; _j < this.polemics.length; _j++) {
             var _polemic = _res.annotations.searchByDescription(this.polemics[_j].keywords);
@@ -115,7 +149,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}}, time:{{time}}" polemic-color="{{color}}"'
+                    '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id={{media_id}}, polemic={{polemic}}" 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,
@@ -126,8 +160,7 @@
                     color: _col,
                     width: (_this.element_width-1),
                     height: _this.element_height,
-                    title: _annotation.title,
-                    time: _annotation.begin.toString()
+                    title: _annotation.title
                 });
                 var _el = IriSP.jQuery(_html);
                 _el.mouseover(function() {
@@ -135,34 +168,16 @@
                 }).mouseout(function() {
                     _annotation.trigger("unselect");
                 }).click(function() {
-                    _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))
+                    _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _annotation.id);
+                    _this.player.popcorn.trigger("IriSP.Tweet.show", _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() {
-                    if (_this.tooltip) {
-                        _this.tooltip.show(
-                            + Math.floor(_elx + (_this.element_width - 1) / 2),
-                            + _ely,
-                            _annotation.title,
-                            ( (colAr.length>1) ? colAr : _col )
-                        );
-                    }
+                    _this.tooltip.show(
+                        Math.floor(_elx + (_this.element_width - 1) / 2),
+                        _ely,
+                        _annotation.title,
+                        _col
+                    );
                     _this.$tweets.each(function() {
                         var _e = IriSP.jQuery(this);
                         _e.css(
@@ -172,23 +187,9 @@
                     });
                 });
                 _annotation.on("unselect", function() {
-                    if (_this.tooltip) {
-                        _this.tooltip.hide();
-                    }
+                    _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);
             }
             
@@ -213,15 +214,9 @@
             
             this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv");
             
-            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
-                    });
-                });
-            });
+            this.bindPopcorn("IriSP.search", "onSearch");
+            this.bindPopcorn("IriSP.search.closed", "onSearch");
+            this.bindPopcorn("IriSP.search.cleared", "onSearch");
             
         } else {
             this.$zone.hide();
@@ -262,7 +257,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);
@@ -292,19 +287,15 @@
                     _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-AltColor" style="background: ' + _color + '"></div><p>' + _nums[_i] + _this.l10n._annotations + '</p>';
+                    _html += '<div class="Ldt-Tooltip-Color" style="background: ' + _color + '"></div><p>' + _nums[_i] + _this.l10n._annotations + '</p>'
                 }
-                if (_this.tooltip) {
-                    _this.tooltip.show(+ _el.attr("pos-x"), + _el.attr("pos-y"), _html);
-                }
+                _this.tooltip.show(_el.attr("pos-x"), _el.attr("pos-y"), _html);
             })
             .mouseout(function() {
-                if (_this.tooltip) {
-                    _this.tooltip.hide();
-                }
-            });
+                _this.tooltip.hide();
+            })
             
-    };
+    }
     
     this.$position = IriSP.jQuery('<div>').addClass("Ldt-Polemic-Position");
         
@@ -312,28 +303,20 @@
     
     this.$zone.click(function(_e) {
         var _x = _e.pageX - _this.$zone.offset().left;
-        _this.media.setCurrentTime(_this.media.duration * _x / _this.width);
+        _this.player.popcorn.currentTime(_this.source.getDuration().getSeconds() * _x / _this.width);
     });
     
     this.$.append('<div class="Ldt-Polemic-Tooltip"></div>');
     
-    this.insertSubwidget(
-        this.$.find(".Ldt-Polemic-Tooltip"),
-        {
-            type: "Tooltip",
-            min_x: 0,
-            max_x: this.width
-        },
-        "tooltip"
-    );
-};
+    this.insertSubwidget(this.$.find(".Ldt-Polemic-Tooltip"), "tooltip", { type: "Tooltip" });
+}
 
-IriSP.Widgets.Polemic.prototype.onTimeupdate = function(_time) {
-    var _x = Math.floor( this.width * _time / this.media.duration);
+IriSP.Widgets.Polemic.prototype.onTimeupdate = function() {
+    var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds());
     this.$elapsed.css({
         width:  _x + "px"
     });
     this.$position.css({
         left: _x + "px"
-    });
-};
+    })
+}
--- a/src/widgets/PopcornPlayer.js	Thu Jan 02 16:40:25 2014 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,138 +0,0 @@
-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
--- a/src/widgets/Segments.css	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Segments.css	Thu Jan 02 16:49:20 2014 +0100
@@ -2,17 +2,28 @@
  * Segments Widget
  */
 
+.Ldt-Segments-List {
+    width: 100%; height: 100%;
+}
+
 .Ldt-Segments-Segment {
-    position: absolute; margin-left: -1px; border: 1px solid #ffffff;
+    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);
 }
 
 .Ldt-Segments-Position {
     background: #fc00ff;
     position: absolute;
-    top: -1px;
+    top: 0;
     left: 0;
     margin-left: -1px;
     width: 2px;
-    bottom: -1px;
-    z-index: 80000;
+    height: 100%;
 }
\ No newline at end of file
--- a/src/widgets/Segments.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Segments.js	Thu Jan 02 16:49:20 2014 +0100
@@ -9,11 +9,7 @@
 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"],
-    line_height: 8,
-    background: "#e0e0e0",
-    overlap: .25,
-    found_color: "#FF00FC",
-    faded_found_color: "#ff80fc"
+    height: 10
 };
 
 IriSP.Widgets.Segments.prototype.template =
@@ -22,70 +18,41 @@
     + '<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}}, 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>';
+    '<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>'
 
 
 IriSP.Widgets.Segments.prototype.draw = function() {
-    this.onMediaEvent("timeupdate", "onTimeupdate");
+    this.bindPopcorn("IriSP.search", "onSearch");
+    this.bindPopcorn("IriSP.search.closed", "onSearch");
+    this.bindPopcorn("IriSP.search.cleared", "onSearch");
+    this.bindPopcorn("timeupdate", "onTimeupdate");
+    
     this.renderTemplate();
     
-    var _list = this.getWidgetAnnotations().filter(function(_ann) {
-            return _ann.getDuration() > 0;
-        }),
+    var _list = this.getWidgetAnnotations(),
         _this = this,
-        _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;
-    }
+        _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');
     
     _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 ) : '' ),
-            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);
+            _beginseconds = _annotation.begin.getSeconds();
         var _data = {
-            color : color,
-            medcolor: medcolor,
-            lowcolor: lowcolor,
+            color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ),
             text: _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1&hellip;'),
-            left : _left,
-            width : _width,
-            top: _top,
-            height: _this.line_height - 1,
+            left : Math.floor( _left ),
+            width : Math.floor( _width ),
             id : _annotation.id,
-            media_id : _annotation.getMedia().id,
-            from: _annotation.begin.toString(),
-            to: _annotation.end.toString()
+            media_id : _annotation.getMedia().id
         };
         var _html = Mustache.to_html(_this.annotationTemplate, _data),
             _el = IriSP.jQuery(_html);
@@ -96,80 +63,51 @@
                 _annotation.trigger("unselect");
             })
             .click(function() {
-                _annotation.trigger("click");
+                _this.player.popcorn.currentTime(_beginseconds);
+                _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _data.id);
             })
-            .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
-        });
+            .appendTo(_this.list_$)
         _annotation.on("select", function() {
-            _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 );
-            }
+            _this.$segments.removeClass("active").addClass("inactive");
+            _this.tooltip.show( _center, 0, _data.text, _data.color );
+            _el.removeClass("inactive").addClass("active");
         });
         _annotation.on("unselect", function() {
-            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.tooltip.hide();
+            _this.$segments.removeClass("inactive active");
         });
     });
-    
-    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.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), "tooltip", { type: "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(_time) {
-    var _x = Math.floor( this.width * _time / this.media.duration);
+IriSP.Widgets.Segments.prototype.onTimeupdate = function() {
+    var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds());
     this.$.find('.Ldt-Segments-Position').css({
         left: _x + "px"
-    });
-};
\ No newline at end of file
+    })
+}
\ No newline at end of file
--- a/src/widgets/Slice.css	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Slice.css	Thu Jan 02 16:49:20 2014 +0100
@@ -1,7 +1,7 @@
 /* Slider Widget */
 
 .Ldt-Slice {
-    border-radius: 0; border: none; padding: 0; margin: 12px 0 12px; background: #B6B8B8; height: 8px;
+    border-radius: 0; border: none; padding: 0; margin: 2px 0 12px; background: #B6B8B8; height: 8px;
 }
 
 .Ldt-Slice .ui-slider-handle {
--- a/src/widgets/Slice.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Slice.js	Thu Jan 02 16:49:20 2014 +0100
@@ -10,72 +10,90 @@
 IriSP.Widgets.Slice.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Slice.prototype.defaults = {
-    show_arrow: false
+    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 ? */
 };
 
-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.renderTemplate();
-    
-    this.$slider = this.$.find(".Ldt-Slice");
+    this.$slider = IriSP.jQuery('<div>')
+        .addClass("Ldt-Slice")
     
-    if (this.show_arrow) {
-        this.insertSubwidget(this.$.find(".Ldt-Slice-Arrow"), { type: "Arrow" },"arrow");
-    }
+    this.$.append(this.$slider);
     
     this.min = 0;
-    this.max = this.media.duration.valueOf();
+    this.max = this.source.getDuration().valueOf();
     
     var _this = this,
         _currentTime;
     
     this.$slider.slider({
         range: true,
-        values: [0, this.max],
+        values: [0, 0],
         min: 0,
         max: this.max,
         change: function(event, ui) {
-            if (_this.arrow) {
-                _this.arrow.moveToTime((ui.values[0]+ui.values[1])/2);
-            }
-            if (_this.onBoundsChanged) {
-                _this.onBoundsChanged(ui.values[0],ui.values[1]);
-            }
+            _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]]);
         },
         start: function() {
             _this.sliding = true;
-            if (!_this.media.getPaused()) {
-                _this.media.pause();
+            if (!_this.player.popcorn.media.paused) {
+                _this.player.popcorn.pause();
             }
-            _currentTime = _this.media.getCurrentTime();
+            _currentTime = _this.player.popcorn.currentTime();
         },
         slide: function(event, ui) {
-            _this.media.setCurrentTime(ui.value);
+            if (!_this.override_bounds && (ui.value < _this.min || ui.value > _this.max)) {
+                return false;
+            }
+            _this.player.popcorn.currentTime(ui.value / 1000);
         },
         stop: function() {
             _this.sliding = false;
-            _this.media.setCurrentTime(_currentTime);
+            _this.player.popcorn.currentTime(_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");
-    
-    this.getWidgetAnnotations().forEach(function(_a) {
-        _a.on("enter", function() {
-            _this.$slider.slider("values",[_a.begin, _a.end]);
-        });
-    });
+    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");
 };
 
 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
--- a/src/widgets/Slider.css	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Slider.css	Thu Jan 02 16:49:20 2014 +0100
@@ -12,8 +12,3 @@
     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;
-}
--- a/src/widgets/Slider.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Slider.js	Thu Jan 02 16:49:20 2014 +0100
@@ -10,21 +10,17 @@
 
 IriSP.Widgets.Slider.prototype.defaults = {
     minimized_height : 4,
-    maximized_height : 4,
+    maximized_height : 10,
     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.renderTemplate();
+    this.$slider = IriSP.jQuery('<div>')
+        .addClass("Ldt-Slider");
     
-    this.$time = this.$.find(".Ldt-Slider-Time");
-    
-    this.$slider = this.$.find(".Ldt-Slider");
+    this.$.append(this.$slider);
     
     var _this = this;
     
@@ -34,42 +30,35 @@
         min: 0,
         max: this.source.getDuration().milliseconds,
         slide: function(event, ui) {
-            _this.media.setCurrentTime(ui.value);
-            _this.player.trigger("Mediafragment.setHashToTime");
+            _this.player.popcorn.currentTime(ui.value / 1000);
+            _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToTime");
         }
     });
     
     this.$handle = this.$slider.find('.ui-slider-handle');
     
-    this.onMediaEvent("timeupdate","onTimeupdate");
-    this.onMdpEvent("Player.MouseOver","onMouseover");
-    this.onMdpEvent("Player.MouseOut","onMouseout");
+    this.bindPopcorn("timeupdate","onTimeupdate");
+    this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover");
+    this.bindPopcorn("IriSP.PlayerWidget.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(_time) {
+IriSP.Widgets.Slider.prototype.onTimeupdate = function() {
+    var _time = 1000 * this.player.popcorn.currentTime();
     this.$slider.slider("value",_time);
-    this.player.trigger("Arrow.updatePosition",{widget: this.type, time: _time});
-};
+    this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time});
+}
 
 IriSP.Widgets.Slider.prototype.onMouseover = function() {
     if (this.minimize_timeout) {
@@ -82,10 +71,9 @@
            this.maximized = true;
         }
     }
-};
+}
 
 IriSP.Widgets.Slider.prototype.onMouseout = function() {
-    this.$time.hide();
     if (this.minimize_timeout) {
         if (this.timeoutId) {
             window.clearTimeout(this.timeoutId);
@@ -100,7 +88,7 @@
             _this.timeoutId = false;
         }, this.minimize_timeout);
     }
-};
+}
 
 IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) {
     this.$slider.stop().animate(
@@ -115,19 +103,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
--- a/src/widgets/Slideshare.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Slideshare.js	Thu Jan 02 16:49:20 2014 +0100
@@ -2,116 +2,129 @@
 
 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"
+        slides_ : "Diapositives&nbsp;:"
     },
     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() {
-    
-    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();
+    var _hide = false;
+    if (typeof this.annotation_type !== "undefined" && this.annotation_type) {
+        var _annType = this.source.getAnnotationTypes().searchByTitle(this.annotation_type);
+        _hide = !_annType.length;
     }
-    
-    var _annotations = this.getWidgetAnnotations();
-    if (!_annotations.length) {
+    if (_hide) {
         this.$.hide();
     } else {
         this.renderTemplate();
-        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);
+        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);
                         }
-                    } else {
-                        insertSlideshare(_presentation, _slide);
-                    }
-                }
-                if (_this.sync && _embedObject && typeof _embedObject.jumpTo === "function") {
-                    _embedObject.jumpTo(parseInt(_slide));
+                    });
+                } else {
+                    this.insertSlideshare(this.oembedCache[_presentation], _slide);
                 }
-                _lastPres = _presentation;
-                
-            });
-        });
+            } 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
+            }
+        }
     }
-};
+}
+
+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();
+}
--- a/src/widgets/Social.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Social.js	Thu Jan 02 16:49:20 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="#" draggable="true" 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="#" 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-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_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_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,22 +48,12 @@
     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");
@@ -85,13 +75,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://plus.google.com/share?" + IriSP.jQuery.param({ url: _url, title: _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-Mail").attr("href", "mailto:?" + IriSP.jQuery.param({ subject: _text, body: _text + ": " + _url }));
-};
+}
--- a/src/widgets/Sparkline.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Sparkline.js	Thu Jan 02 16:49:20 2014 +0100
@@ -1,5 +1,6 @@
 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();
@@ -18,22 +19,15 @@
         _duration = this.source.getDuration(),
         _max = 0,
         _list = this.getWidgetAnnotations();
+    
     for (var _i = 0; _i < this.slice_count; _i++) {
-        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);
+        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);
     }
     if (!_max) {
         return;
@@ -48,7 +42,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;
     
@@ -74,18 +68,18 @@
    
     this.$.click(function(_e) {
         var _x = _e.pageX - _this.$.offset().left;
-        _this.media.setCurrentTime(_this.media.duration * _x / _this.width);
+        _this.player.popcorn.currentTime(_this.source.getDuration().getSeconds() * _x / _this.width);
     });
     
-    this.onMediaEvent("timeupdate","onTimeupdate");
-};
+    this.bindPopcorn("timeupdate","onTimeupdate");
+}
 
-IriSP.Widgets.Sparkline.prototype.onTimeupdate = function(_time) {
-    var _x = Math.floor( this.width * _time / this.media.duration);
+IriSP.Widgets.Sparkline.prototype.onTimeupdate = function() {
+    var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds());
     this.rectangleProgress.attr({
         "width" : _x
     });
     this.ligneProgress.attr({
         "path" : "M" + _x + " 0L" + _x + " " + this.height
     });
-};
+}
--- a/src/widgets/Tagcloud.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Tagcloud.js	Thu Jan 02 16:49:20 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,33 +36,45 @@
         '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) {
-        var _this = this;
-        this.source.getAnnotationsByTypeTitle(this.segment_annotation_type).forEach(function(_a) {
-            _a.on("enter", function() {
-                _this.redraw(_a.begin, _a.end);
-            });
-        });
+        this.bindPopcorn("timeupdate","onTimeupdate");
     } else {
         this.redraw();
     }
-};
+}
 
-IriSP.Widgets.Tagcloud.prototype.redraw = function(_from, _to) {
+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() {
     var _urlRegExp = /https?:\/\/[0-9a-zA-Z\.%\/-_]+/g,
         _regexpword = /[^\s\.&;,'"!\?\d\(\)\+\[\]\\\…\-«»:\/]{3,}/g,
         _words = {},
         _this = this,
         _annotations = this.getWidgetAnnotations();
         
-    if (typeof _from !== "undefined" && typeof _to !== "undefined") {
+    if (typeof this.begin_time !== "undefined" && typeof this.end_time !== "undefined") {
         _annotations = _annotations.filter(function(_annotation) {
-            return _annotation.begin >= _from && _annotation.end <= _to;
-        });
+            return _annotation.begin >= _this.begin_time && _annotation.end <= _this.end_time;
+        })
     }
     
     _annotations.forEach(function(_annotation) {
@@ -76,7 +88,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()
@@ -84,7 +96,7 @@
             return {
                 "word" : _k,
                 "count" : _v
-            };
+            }
         })
         .filter(function(_v) {
             return _v.count > 2;
@@ -105,11 +117,10 @@
     this.$.html(Mustache.to_html(this.template,  {words: _words }));
     this.$.find(".Ldt-Tagcloud-item").click(function() {
         var _txt = IriSP.jQuery(this).attr("content");
-        _this.source.getAnnotations().search(_txt);
+        _this.player.popcorn.trigger("IriSP.search.triggeredSearch", _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 : '';
@@ -125,4 +136,4 @@
             _el.html(_txt);
         }
     });
-};
+}
--- a/src/widgets/Tooltip.css	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Tooltip.css	Thu Jan 02 16:49:20 2014 +0100
@@ -1,123 +1,31 @@
-.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;
-}
+/* ToolTip Widget */
 
-.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 {
+  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-Inner {
-    min-height: 30px;
-    max-height: 140px;
+    height: 115px;
     width: 180px;
     overflow: hidden;
-    margin: 6px 6px 16px;
-    background: url(img/tooltip-gradient.png) bottom;
 }
 
-
 .Ldt-Tooltip-Color {
-    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;
+    float: left; margin: 2px 4px 2px 0; width: 10px; height: 10px;
 }
 
 .Ldt-Tooltip img {
-    max-width: 140px; max-height: 80px; margin: 2px 20px;
+    max-width: 140px; max-height: 70px; margin: 0 20px;
 }
 
 .Ldt-Tooltip p {
-    margin: 6px 8px;
-    font-size: 12px;
-    line-height: 14px;
-}
\ No newline at end of file
+    margin: 2px 0;
+  font-size: 12px;
+}
--- a/src/widgets/Tooltip.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Tooltip.js	Thu Jan 02 16:49:20 2014 +0100
@@ -1,39 +1,21 @@
 /* this widget displays a small tooltip */
-IriSP.Widgets.Tooltip = function(player, config) {
-    IriSP.Widgets.Widget.call(this, player, config);
+IriSP.Widgets.Tooltip = function(Popcorn, config, Serializer) {
+    IriSP.Widgets.Widget.call(this, Popcorn, config, Serializer);
 };
 
 IriSP.Widgets.Tooltip.prototype = new IriSP.Widgets.Widget();
 
-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.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.draw = function() {
     _this = this;
-    this.renderTemplate();
+    this.$.html(this.template);
     this.$.parent().css({
         "position" : "relative"
     });
-    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.$tip = this.$.find(".Ldt-Tooltip");
     this.$.mouseover(function() {
-        _this.$tooltip.hide();
+        _this.$tip.hide();
     });
     this.hide();
 };
@@ -41,54 +23,20 @@
 IriSP.Widgets.Tooltip.prototype.show = function(x, y, text, color) {
     
     if (typeof color !== "undefined") {
-    	// 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");
-    	}
+        this.$.find(".Ldt-Tooltip-Color").show().css("background-color", color);
     } else {
         this.$.find(".Ldt-Tooltip-Color").hide();
     }
 
     this.$.find(".Ldt-Tooltip-Text").html(text);
 
-    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.show();
     this.$tip.css({
-        "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"
+        "left" : Math.floor(x - this.$tip.outerWidth() / 2) + "px",
+        "top" : Math.floor(y - this.$tip.outerHeight()) + "px"
     });
 };
 
 IriSP.Widgets.Tooltip.prototype.hide = function() {
-    this.$tooltip.hide();
+    this.$tip.hide();
 };
--- a/src/widgets/Trace.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Trace.js	Thu Jan 02 16:49:20 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,45 +13,40 @@
     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,
-    _medialisteners = {
+    _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,
         "play" : 0,
         "pause" : 0,
         "volumechange" : 0,
         "seeked" : 0,
         "play" : 0,
         "pause" : 0,
-        "timeupdate" : 10000
-    },
-    _annlisteners = {
-        search: 0,
-        "search-cleared": 0
+        "timeupdate" : 2000
     };
-    IriSP._(_medialisteners).each(function(_ms, _listener) {
+    IriSP._(_listeners).each(function(_ms, _listener) {
         var _f = function(_arg) {
             _this.eventHandler(_listener, _arg);
-        };
+        }
         if (_ms) {
             _f = IriSP._.throttle(_f, _ms);
         }
-        _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);
+        _this.player.popcorn.listen(_listener, _f);
     });
     
     if (!this.tracer) {
@@ -65,61 +60,92 @@
     
     }
     
-    
-    
     this.tracer.trace("TraceWidgetInit", {});
     
     this.mouseLocation = '';
-    IriSP.jQuery(".Ldt-Widget").on("click mouseenter mouseleave", ".Ldt-TraceMe", function(_e) {
-        var _target = IriSP.jQuery(this);
+    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();
+        }
         
-        var _widget = _target.attr("widget-type") || _target.parents(".Ldt-Widget").attr("widget-type"),
+        var _widget = IriSP.jQuery(this).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 = _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) {
+            _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) {
             _data.traceInfo = _traceInfo;
+            _lastTarget += ( ";" + _traceInfo );
         }
         if (typeof _value == "string" && _value.length) {
             _data.value = _value;
         }
-        _this.eventHandler('UIEvent', _data);
+        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;
     });
-};
+}
 
 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 'UIEvent':
+        case 'IriSP.TraceWidget.MouseEvents':
             _traceName += _arg.widget + '_' + _arg.type;
             delete _arg.widget;
             delete _arg.type;
         break;
+        case 'timeupdate':
         case 'play':
         case 'pause':
-            _arg.milliseconds = this.media.getCurrentTime().milliseconds;
-        case 'timeupdate':
+            _arg.time = this.player.popcorn.currentTime() * 1000;
         case 'seeked':
         case 'volumechange':
-            _traceName += 'media_' + _listener;
+            _traceName += 'Popcorn_' + _listener;
         break;
         default:
-            _traceName += _listener.replace('.','_');
+            _traceName += _listener.replace('IriSP.','').replace('.','_');
     }
+    this.lastEvent = _traceName;
     if (typeof this.extend === "object" && this.extend) {
         IriSP._(_arg).extend(this.extend);
     }
@@ -127,4 +153,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
+}
--- a/src/widgets/Tweet.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Tweet.js	Thu Jan 02 16:49:20 2014 +0100
@@ -6,7 +6,7 @@
 IriSP.Widgets.Tweet.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Tweet.prototype.defaults = {
-    hide_timeout: 10000,
+    hide_timeout: 5000,
     polemics : [
         {
             "keywords" : [ "++" ],
@@ -25,19 +25,18 @@
             "color" : "#05aae6"
         }
     ],
-    annotation_type: "tweet",
     pin_at_start: false
-};
+}
 
 IriSP.Widgets.Tweet.prototype.messages = {
     "fr": {
         retweet: "Retweeter",
         reply: "Répondre",
-        keep_visible: "Empêcher la fermeture automatique",
+        keep_visible: "Garder visible",
         dont_keep_visible: "Permettre la fermeture automatique",
         close_widget: "Fermer l'affichage du tweet",
-        original_time: "Heure d'envoi\u00a0: ",
-        video_time: "Temps de la vidéo\u00a0: ",
+        original_time: "Heure d'envoi&nbsp;: ",
+        video_time: "Temps de la vidéo&nbsp;: ",
         show_original: "Voir l'original"
     },
     "en": {
@@ -50,7 +49,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">'
@@ -67,11 +66,12 @@
 
 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,61 +84,93 @@
         _this.hide();
     });
     this.$.hide();
-    this.getWidgetAnnotations().forEach(function(_annotation) {
-        _annotation.on("click", function() {
-            _this.show(_annotation);
-        });
-    });
-};
+}
 
-IriSP.Widgets.Tweet.prototype.show = function(_tweet) {
+IriSP.Widgets.Tweet.prototype.show = function(_id) {
+    var _tweet = this.source.getElement(_id);
     if (typeof _tweet !== "undefined" && typeof _tweet.source !== "undefined") {
-        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) {
+        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) {
             return _entity.indices[0];
         });
-        
         var _currentPos = 0,
             _txt = '';
-        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];
+        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>';
+                }
             }
-        });
+        }
         _txt += _tweet.source.text.substring(_currentPos);
-        
-        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-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);
         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/" + screen_name + "/status/" + _tweet.source.id_str);
-        this.player.trigger("Annotation.minimize");
+        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.$.slideDown();
         this.cancelTimeout();
         if (!this.pinned) {
@@ -147,22 +179,22 @@
     } else {
         this.hide();
     }
-};
+}
 
 IriSP.Widgets.Tweet.prototype.hide = function() {
-    this.player.trigger("Annotation.maximize");
+    this.player.popcorn.trigger("IriSP.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);
-};
+}