--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/Segments.js	Thu Aug 30 13:16:33 2012 +0200
@@ -0,0 +1,113 @@
+// TODO: Trigger IriSP.SegmentsWidget.click
+
+IriSP.Widgets.Segments = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.Segments.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.Segments.prototype.defaults = {
+    annotation_type : "chap",
+    colors: ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],
+    height: 10
+};
+
+IriSP.Widgets.Segments.prototype.template =
+    '<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();
+    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 ) : '' ),
+            _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');
+}
+
+IriSP.Widgets.Segments.prototype.onSearch = function(searchString) {
+    this.searchString = typeof searchString !== "undefined" ? searchString : '';
+    var _found = 0,
+        _re = IriSP.Model.regexpFromTextOrArray(searchString, true);
+    if (this.searchString) {
+        this.$segments.each(function() {
+            var _el = IriSP.jQuery(this);
+            if (_re.test(_el.attr("segment-text"))) {
+                _el.removeClass("unfound").addClass("found");
+                _found++;
+            } else {
+                _el.removeClass("found").addClass("unfound");
+            }
+        });
+        if (_found) {
+            this.player.popcorn.trigger("IriSP.search.matchFound");
+        } else {
+            this.player.popcorn.trigger("IriSP.search.noMatchFound");
+        }
+    } else {
+        this.$segments.removeClass("found unfound");
+    }
+}
+
+IriSP.Widgets.Segments.prototype.onTimeupdate = function() {
+    var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds());
+    this.$.find('.Ldt-Segments-Position').css({
+        left: _x + "px"
+    })
+}
\ No newline at end of file