diff -r 03967b6ada7c -r 4c7b33bf2795 src/widgets/Annotation.js
--- a/src/widgets/Annotation.js	Tue Apr 24 20:25:40 2012 +0200
+++ b/src/widgets/Annotation.js	Thu Apr 26 19:18:57 2012 +0200
@@ -1,4 +1,4 @@
-// TODO: Open share links in a small window
+// TODO: Open share links in a small window - Migrate Timeupdate functions to Extract
 
 IriSP.Widgets.Annotation = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
@@ -24,7 +24,14 @@
 
 IriSP.Widgets.Annotation.prototype.template =
     '<div class="Ldt-Annotation-Widget {{#show_top_border}}Ldt-Annotation-ShowTop{{/show_top_border}}">'
-    + '<div class="Ldt-Annotation-Inner"></div></div>';
+    + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty"><div class="Ldt-Annotation-ShareIcons Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty">'
+    + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Fb" title="{{l10n.share_on}} Facebook"></a>'
+    + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Twitter" title="{{l10n.share_on}} Twitter"></a>'
+    + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Gplus" title="{{l10n.share_on}} Google+"></a>'
+    + '</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>'
+    + '<p class="Ldt-Annotation-Description Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></p>'
+    + '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-NoTags">{{l10n.tags}}<ul class="Ldt-Annotation-Tags"></ul></div></div></div>';
 
 IriSP.Widgets.Annotation.prototype.defaults = {
     annotation_type : "chap",
@@ -35,6 +42,10 @@
 IriSP.Widgets.Annotation.prototype.draw = function() {
     this.renderTemplate();
     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.onTimeupdate();
 }
 
@@ -46,38 +57,56 @@
     if (_list.length) {
         if (_list[0].id !== this.lastAnnotation) {
             this.drawAnnotation(_list[0]);
+            this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _list[0].begin.valueOf(), _list[0].end.valueOf() ]);
         }
+        this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: ( _list[0].begin + _list[0].end ) / 2});
     }
     else {
-        this.$.find('.Ldt-Annotation-Inner').html('');
+        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.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _time, _time ]);
     }
 }
 
 IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) {
     this.lastAnnotation = _annotation.id;
-    console.log(_annotation);
     var _url = (typeof _annotation.url !== "undefined" 
             ? _annotation.url
-            : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.namespacedId.name)),
-        _text = this.l10n.watching + _annotation.title + (this.site_name ? this.l10n.on_site + this.site_name : ''),
-        _tmpl = '<div class="Ldt-Annotation-ShareIcons">'
-            + '<a href="{{fb_url}}" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Fb" title="{{l10n.share_on}} Facebook"></a>'
-            + '<a href="{{twitter_url}}" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Twitter" title="{{l10n.share_on}} Twitter"></a>'
-            + '<a href="{{gplus_url}}" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Gplus" title="{{l10n.share_on}} Google+"></a>'
-            + '</div>'
-            + '<h3><span class="Ldt-Annotation-Title">{{title}}</span> ( <span class="Ldt-Annotation-Time">{{begin}} - {{end}}</span> )</h3>'
-            + '<p class="Ldt-Annotation-Description">{{description}}</p>'
-            + '{{#tags.length}}<ul class="Ldt-Annotation-Tags"><li class="Ldt-Annotation-TagLabel">{{l10n.tags}}</li>{{#tags}}<li>{{.}}</li>{{/tags}}</ul>{{/tags.length}}',
-        _attr = {
-            title: _annotation.title,
-            description: _annotation.description,
-            begin: _annotation.begin.toString(),
-            end: _annotation.end.toString(),
-            tags: _annotation.getTagTexts(),
-            l10n: this.l10n
-        }
-    _attr.fb_url = "http://www.facebook.com/share.php?" + IriSP.jQuery.param({ u: _url, t: _text });
-    _attr.twitter_url = "https://twitter.com/intent/tweet?" + IriSP.jQuery.param({ url: _url, text: _text });
-    _attr.gplus_url = "https://plusone.google.com/_/+1/confirm?" + IriSP.jQuery.param({ url: _url, title: _text });
-    this.$.find('.Ldt-Annotation-Inner').html(Mustache.to_html(_tmpl, _attr));
+            : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.namespacedId.name));
+    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">' + _tag + '</li>';
+        }).join("");
+        this.$.find(".Ldt-Annotation-Tags").html(_html);
+        this.$.find(".Ldt-Annotation-Tags-Block").removeClass("Ldt-Annotation-NoTags");
+    } else {
+        this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-NoTags");
+    }
+    this.$.find(".Ldt-Annotation-Title").html(_annotation.title);
+    this.$.find(".Ldt-Annotation-Description").html(_annotation.description);
+    this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString());
+    this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString());
+    this.$.find(".Ldt-Annotation-Fb").attr("href", "http://www.facebook.com/share.php?" + IriSP.jQuery.param({ u: _url, t: _text }));
+    this.$.find(".Ldt-Annotation-Twitter").attr("href", "https://twitter.com/intent/tweet?" + IriSP.jQuery.param({ url: _url, text: _text }));
+    this.$.find(".Ldt-Annotation-Gplus").attr("href", "https://plusone.google.com/_/+1/confirm?" + IriSP.jQuery.param({ url: _url, title: _text }));
+    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.minimize = function() {
+    this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-Minimized");
+}
+
+IriSP.Widgets.Annotation.prototype.maximize = function() {
+    this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-Minimized");
+}
\ No newline at end of file