diff -r 3ab36f402b0c -r 198c2b79f5e1 src/widgets/Annotation.js
--- 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 :",
+        description_: "Description :",
+        excerpt_from: "Extrait de :"
     },
     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