diff -r 3ab36f402b0c -r 198c2b79f5e1 src/widgets/Segments.js
--- 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