--- a/src/widgets/Segments.js	Wed Aug 29 18:32:34 2012 +0200
+++ b/src/widgets/Segments.js	Wed Aug 29 18:34:11 2012 +0200
@@ -1,4 +1,4 @@
-// TODO: Trigger IriSP.SegmentsWidget.click and IriSP.Mediafragment.showAnnotation
+// TODO: Trigger IriSP.SegmentsWidget.click
 
 IriSP.Widgets.Segments = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
@@ -13,19 +13,23 @@
 };
 
 IriSP.Widgets.Segments.prototype.template =
-    '<div class="Ldt-Segments-List">{{#segments}}'
-    + '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}" segment-id="{{id}}" segment-text="{{text}}" segment-color="{{color}}" center-pos="{{center}}" begin-seconds="{{beginseconds}}"'
-    + 'style="left:{{left}}px; width:{{width}}px; background:{{color}}"></div>'
-    + '{{/segments}}</div>'
+    '<div class="Ldt-Segments-List"></div>'
     + '<div class="Ldt-Segments-Position"></div>'
     + '<div class="Ldt-Segments-Tooltip"></div>';
 
+IriSP.Widgets.Segments.prototype.annotationTemplate =
+    '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}" segment-text="{{text}}"'
+    + 'style="left:{{left}}px; width:{{width}}px; background:{{color}}"></div>'
+
+
 IriSP.Widgets.Segments.prototype.draw = function() {
     this.bindPopcorn("IriSP.search", "onSearch");
     this.bindPopcorn("IriSP.search.closed", "onSearch");
     this.bindPopcorn("IriSP.search.cleared", "onSearch");
     this.bindPopcorn("timeupdate", "onTimeupdate");
     
+    this.renderTemplate();
+    
     var _list = this.getWidgetAnnotations(),
         _this = this,
         _scale = this.width / this.source.getDuration();
@@ -34,42 +38,47 @@
         height : (this.height - 2) + "px",
         margin : "1px 0"
     });
-    this.$.append(Mustache.to_html(this.template, {
-        segments : _list.map(function(_annotation, _k) {
-            var _left = _annotation.begin * _scale,
-                _width = ( _annotation.end - _annotation.begin ) * _scale,
-                _center = _left + _width / 2,
-                _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' );
-            return {
-                text : _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1&hellip;'),
-                color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ),
-                beginseconds : _annotation.begin.getSeconds() ,
-                left : Math.floor( _left ),
-                width : Math.floor( _width ),
-                center : Math.floor( _center ),
-                id : _annotation.id,
-                media_id : _annotation.getMedia().id
-            }
-        })
-    }));
+    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 ) : '' ),
+            _beginseconds = _annotation.begin.getSeconds();
+        var _data = {
+            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 : Math.floor( _left ),
+            width : Math.floor( _width ),
+            id : _annotation.id,
+            media_id : _annotation.getMedia().id
+        };
+        var _html = Mustache.to_html(_this.annotationTemplate, _data),
+            _el = IriSP.jQuery(_html);
+        _el.mouseover(function() {
+                _annotation.trigger("select");
+            })
+            .mouseout(function() {
+                _annotation.trigger("unselect");
+            })
+            .click(function() {
+                _this.player.popcorn.currentTime(_beginseconds);
+                _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _data.id);
+            })
+            .appendTo(_this.list_$)
+        _annotation.on("select", function() {
+            _this.$segments.removeClass("active").addClass("inactive");
+            _this.tooltip.show( _center, 0, _data.text, _data.color );
+            _el.removeClass("inactive").addClass("active");
+        });
+        _annotation.on("unselect", function() {
+            _this.tooltip.hide();
+            _this.$segments.removeClass("inactive active");
+        });
+    });
     this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), "tooltip", { type: "Tooltip" });
     this.$segments = this.$.find('.Ldt-Segments-Segment');
-    
-    this.$segments.mouseover(function() {
-        var _el = IriSP.jQuery(this);
-        _this.$segments.removeClass("active").addClass("inactive");
-        _this.tooltip.show( _el.attr("center-pos"), 0, _el.attr("segment-text"), _el.attr("segment-color"));
-        _el.removeClass("inactive").addClass("active");
-    })
-    .mouseout(function() {
-        _this.tooltip.hide();
-        _this.$segments.removeClass("inactive active");
-    })
-    .click(function() {
-        var _el = IriSP.jQuery(this);
-        _this.player.popcorn.currentTime(_el.attr("begin-seconds"));
-        _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _el.attr("segment-id"));
-    });
 }
 
 IriSP.Widgets.Segments.prototype.onSearch = function(searchString) {