--- a/web/res/metadataplayer/Segments.js	Fri Dec 11 18:11:13 2015 +0100
+++ b/web/res/metadataplayer/Segments.js	Tue Dec 29 13:25:14 2015 +0100
@@ -14,8 +14,11 @@
     overlap: .25,
     found_color: "#FF00FC",
     faded_found_color: "#ff80fc",
-    // Display creator info in segment tooltip
-    show_creator: true
+    selected_color: "#74d600",
+    faded_selected_color: "#baf9b5",
+    no_tooltip: false,
+    use_timerange: false,
+    scale_to_parent: true
 };
 
 IriSP.Widgets.Segments.prototype.template =
@@ -28,14 +31,16 @@
     + '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>';
 
 
-IriSP.Widgets.Segments.prototype.draw = function() {
-    this.onMediaEvent("timeupdate", "onTimeupdate");
-    this.renderTemplate();
-    
-    var _list = this.getWidgetAnnotations().filter(function(_ann) {
-            return _ann.getDuration() > 0;
+IriSP.Widgets.Segments.prototype.do_draw = function (isRedraw) {
+    if (this.width != this.$.parent().width() && this.scale_to_parent) {
+        // Reset width
+        this.width = this.$.parent().width();
+        this.$.css({ width : this.width + "px" });
+    }
+    var _this = this,
+        _list = this.getWidgetAnnotations().filter(function(_ann) {
+            return _ann.getDuration() > 0 && _ann.getMedia().id == _this.media.id;
         }),
-        _this = this,
         _scale = this.width / this.source.getDuration(),
         list_$ = this.$.find('.Ldt-Segments-List'),
         lines = [],
@@ -52,7 +57,11 @@
         }
         return "#" + res;
     }
-    
+
+    if (isRedraw) {
+        // Remove all previous elements before recreating them. Not very efficient.
+        this.$.find('.Ldt-Segments-Segment').remove();
+    }
     _list.forEach(function(_annotation, _k) {
         var _left = _annotation.begin * _scale,
             _width = ( _annotation.getDuration() ) * _scale,
@@ -79,7 +88,7 @@
             color : color,
             medcolor: medcolor,
             lowcolor: lowcolor,
-            text: ((_this.show_creator && _annotation.creator) ? (_annotation.creator + " : ") : "" ) + _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1&hellip;'),
+            text: (_annotation.creator ? (_annotation.creator + " : ") : "" ) + _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1&hellip;'),
             left : _left,
             width : _width,
             top: _top,
@@ -91,17 +100,44 @@
         };
         var _html = Mustache.to_html(_this.annotationTemplate, _data),
             _el = IriSP.jQuery(_html);
-            _el.mouseover(function() {
+        _el.mouseover(function() {
                 _annotation.trigger("select");
-                _this.player.trigger('annotation-select', _annotation);
             })
             .mouseout(function() {
                 _annotation.trigger("unselect");
-                _this.player.trigger('annotation-unselect', _annotation);
             })
             .click(function() {
+                if(_this.use_timerange){
+                    if(!_this.media.getTimeRange()){
+                        _this.media.setCurrentTime(_annotation.begin);
+                        _this.media.setTimeRange(_annotation.begin, _annotation.end);
+                        _this.media.play();
+                        _this.$segments.each(function(){
+                            var _segment = IriSP.jQuery(this);
+                            _segment.css("background", lowcolor).removeClass("selected");
+                        })
+                        _el.css("background", _this.selected_color).addClass("selected");
+                    }
+                    else if (_this.media.getTimeRange()[0]==_annotation.begin || _this.media.getTimeRange()[1]==_annotation.end){
+                        _this.media.resetTimeRange();
+                        _this.$segments.each(function(){
+                            var _segment = IriSP.jQuery(this);
+                            _segment.css("background", lowcolor).removeClass("selected");
+                            _annotation.trigger("select");
+                        })
+                    }
+                    else {
+                        _this.media.setCurrentTime(_annotation.begin);
+                        _this.media.setTimeRange(_annotation.begin, _annotation.end);
+                        _this.media.play();
+                        _this.$segments.each(function(){
+                            var _segment = IriSP.jQuery(this);
+                            _segment.css("background", lowcolor).removeClass("selected");
+                        })
+                        _el.css("background", _this.selected_color).addClass("selected");
+                    }
+                }
                 _annotation.trigger("click");
-                _this.player.trigger('annotation-click', _annotation);
             })
             .appendTo(list_$);
         IriSP.attachDndData(_el, {
@@ -110,7 +146,8 @@
         	uri: (typeof _annotation.url !== "undefined" 
                 ? _annotation.url
                 : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id)),
-            image: _annotation.thumbnail
+            image: _annotation.thumbnail,
+            text: '[' + _annotation.begin.toString() + '] ' + _annotation.title
         });
         _annotation.on("select", function() {
             _this.$segments.each(function() {
@@ -118,9 +155,13 @@
                 _segment.css({
                     background: _segment.hasClass("found") ? _this.faded_found_color : _segment.attr("data-low-color")
                 });
+                _segment.css({
+                    background: _segment.hasClass("selected") ? _this.faded_selected_color : _segment.attr("data-low-color")
+                })
             });
             _el.css({
                 background: _el.hasClass("found") ? _this.found_color: color,
+                background: _el.hasClass("selected") ? _this.selected_color: color,
                 "z-index": ++zindex
             });
             if (_this.tooltip) {
@@ -134,6 +175,7 @@
             _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"));
+                _segment.css("background", _segment.hasClass("selected") ? _this.selected_color : _segment.attr(searching ? "data-low-color" : "data-medium-color"));
             });
         });
         _annotation.on("found", function() {
@@ -144,37 +186,56 @@
         });
     });
     
+    this.onMediaEvent("resettimerange", function(){
+        
+        _this.$segments.each(function(){
+            var _segment = IriSP.jQuery(this);
+            _segment.removeClass("selected");
+        })
+    });
+    
     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.$segments = this.$.find('.Ldt-Segments-Segment');
-    this.source.getAnnotations().on("search", function() {
+};
+
+IriSP.Widgets.Segments.prototype.draw = function() {
+    var widget = this;
+    widget.onMediaEvent("timeupdate", "onTimeupdate");
+    widget.renderTemplate();
+    widget.do_draw();
+    if (!this.no_tooltip) {
+        widget.insertSubwidget(
+            widget.$.find(".Ldt-Segments-Tooltip"),
+            {
+                type: "Tooltip",
+                min_x: 0,
+                max_x: this.width
+            },
+            "tooltip"
+        );
+    };
+    widget.source.getAnnotations().on("search", function() {
         searching = true;
     });
-    this.source.getAnnotations().on("search-cleared", function() {
+    widget.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");
         });
     });
+    this.$.on("resize", function () { widget.do_draw(true); });
 };
 
-IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {
+IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {    
     var _x = Math.floor( this.width * _time / this.media.duration);
     this.$.find('.Ldt-Segments-Position').css({
         left: _x + "px"
     });
 };
+