# HG changeset patch
# User veltr
# Date 1353082085 -3600
# Node ID 818a31dbc3db7b9eb151d5cd8f76a24ab6724d49
# Parent  bec241ea6aea433987c1b7d42f9c4a8e83dadc1c# Parent  f08d8b3e78b80839fdc6c2350cf2dd4e19f820cd
Merge with f08d8b3e78b80839fdc6c2350cf2dd4e19f820cd

diff -r f08d8b3e78b8 -r 818a31dbc3db src/ldt/ldt/static/ldt/metadataplayer/Annotation.css
--- a/src/ldt/ldt/static/ldt/metadataplayer/Annotation.css	Fri Nov 16 16:44:27 2012 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/Annotation.css	Fri Nov 16 17:08:05 2012 +0100
@@ -56,6 +56,10 @@
     color: #0068c4;
 }
 
+.Ldt-Annotation-Type {
+    color: #8080A0;
+}
+
 .Ldt-Annotation-Time {
     color: #ff3b77
 }
diff -r f08d8b3e78b8 -r 818a31dbc3db src/ldt/ldt/static/ldt/metadataplayer/Annotation.js
--- a/src/ldt/ldt/static/ldt/metadataplayer/Annotation.js	Fri Nov 16 16:44:27 2012 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/Annotation.js	Fri Nov 16 17:08:05 2012 +0100
@@ -31,11 +31,11 @@
     + '<div class="Ldt-Annotation-Widget {{^show_arrow}}Ldt-Annotation-ShowTop{{/show_arrow}}">'
     + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty{{#start_minimized}} Ldt-Annotation-Minimized{{/start_minimized}}">'
     + '<div class="Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-MaxMinButton"></div>'
-    + '<div class="Ldt-Annotation-Social Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></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>'
-    + '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time">'
-    + '( <span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span> )</span></h3>'
+    + '{{#show_social}}<div class="Ldt-Annotation-Social Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></div>{{/show_social}}'
+    + '<h3 class="Ldt-Annotation-HiddenWhenEmpty">{{#show_annotation_type}}<span class="Ldt-Annotation-Type"></span> » {{/show_annotation_type}}<span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">'
+    + '(<span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span>)</span></h3>'
+    + '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">'
+    + '(<span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span>)</span></h3>'
     + '<div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Description-Block"><div class="Ldt-Annotation-Label">{{l10n.description_}}</div>'
     + '<p class="Ldt-Annotation-Labelled Ldt-Annotation-Description"></p></div>'
     + '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Cleared">'
@@ -47,7 +47,9 @@
     start_minimized: false,
     show_arrow : true,
     site_name : "Lignes de Temps",
-    search_on_tag_click: true
+    search_on_tag_click: true,
+    show_social: true,
+    show_annotation_type: false
 }
 
 IriSP.Widgets.Annotation.prototype.draw = function() {
@@ -99,13 +101,16 @@
         } else {
             _this.$.find(".Ldt-Annotation-Description-Block").addClass("Ldt-Annotation-EmptyBlock");
         }
-        _this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString());
-        _this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString());
+        if (_this.show_annotation_type) {
+            _this.$.find(".Ldt-Annotation-Type").text(_annotation.getAnnotationType().title)
+        }
+        _this.$.find(".Ldt-Annotation-Begin").text(_annotation.begin.toString());
+        _this.$.find(".Ldt-Annotation-End").text(_annotation.end.toString());
         if (_annotation.elementType === "mashedAnnotation") {
             _this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-isMashup");
-            _this.$.find(".Ldt-Annotation-MashupMedia").html(_annotation.getMedia().title);
-            _this.$.find(".Ldt-Annotation-MashupBegin").html(_annotation.annotation.begin.toString());
-            _this.$.find(".Ldt-Annotation-MashupEnd").html(_annotation.annotation.end.toString());
+            _this.$.find(".Ldt-Annotation-MashupMedia").text(_annotation.getMedia().title);
+            _this.$.find(".Ldt-Annotation-MashupBegin").text(_annotation.annotation.begin.toString());
+            _this.$.find(".Ldt-Annotation-MashupEnd").text(_annotation.annotation.end.toString());
         } else {
             _this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-isMashup");
         }
@@ -127,7 +132,11 @@
     }
     
     this.renderTemplate();
-    this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), { type: "Social" }, "socialWidget");
+    
+    if (_this.show_social) {
+        this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), { type: "Social" }, "socialWidget");
+    }
+    
     this.insertSubwidget(this.$.find(".Ldt-Annotation-Arrow"), { type: "Arrow" }, "arrow");
     this.onMediaEvent("timeupdate",timeupdate);
     this.onMdpEvent("Annotation.hide","hide");
diff -r f08d8b3e78b8 -r 818a31dbc3db src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.css
--- a/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.css	Fri Nov 16 16:44:27 2012 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.css	Fri Nov 16 17:08:05 2012 +0100
@@ -15,7 +15,7 @@
 }
 
 .Ldt-CreateAnnotation-Inner h3 {
-    margin: 5px 0; font-size: 14px; font-weight: bold; text-align: right;
+    margin: 5px 0; font-size: 14px; font-weight: bold; text-align: right; clear:both; color: #0068c4;
 }
 
 .Ldt-CreateAnnotation-h3Left {
diff -r f08d8b3e78b8 -r 818a31dbc3db src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js
--- a/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js	Fri Nov 16 16:44:27 2012 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js	Fri Nov 16 17:08:05 2012 +0100
@@ -57,7 +57,7 @@
         add_keywords_: "Add keywords:",
         add_polemic_keywords_: "Add polemic keywords:",
         your_name_: "Your name:",
-        no_title: "Annotate this video",
+        annotate_video: "Annotate this video",
         type_title: "Annotation title",
         type_description: "Type the full contents of your annotation here.",
         wait_while_processing: "Please wait while your annotation is being processed...",
@@ -78,7 +78,7 @@
         add_keywords_: "Ajouter des mots-clés&nbsp;:",
         add_polemic_keywords_: "Ajouter des mots-clés polémiques&nbsp;:",
         your_name_: "Votre nom&nbsp;:",
-        no_title: "Annoter cette vidéo",
+        annotate_video: "Annoter cette vidéo",
         type_title: "Titre de l'annotation",
         type_description: "Rédigez ici le contenu de votre annotation.",
         wait_while_processing: "Veuillez patienter pendant le traitement de votre annotation...",
@@ -98,11 +98,11 @@
     + '{{^show_slice}}{{#show_arrow}}<div class="Ldt-CreateAnnotation-Arrow"></div>{{/show_arrow}}{{/show_slice}}'
     + '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">'
     + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">'
-    + '<h3><span class="Ldt-CreateAnnotation-h3Left">{{#show_title_field}}<input class="Ldt-CreateAnnotation-Title empty" placeholder="{{l10n.type_title}}" />{{/show_title_field}}'
-    + '{{^show_title_field}}<span class="Ldt-CreateAnnotation-NoTitle">{{l10n.no_title}} </span>{{/show_title_field}}'
+    + '<h3><span class="Ldt-CreateAnnotation-h3Left">{{l10n.annotate_video}}{{#show_title_field}}</span></h3>'
+    + '<h3><span class="Ldt-CreateAnnotation-h3Left"><input class="Ldt-CreateAnnotation-Title empty" placeholder="{{l10n.type_title}}" />{{/show_title_field}}'
     + '<span class="Ldt-CreateAnnotation-Times"> {{#show_slice}}{{l10n.from_time}} {{/show_slice}}{{^show_slice}}{{l10n.at_time}} {{/show_slice}} <span class="Ldt-CreateAnnotation-Begin">00:00</span>'
     + '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">{{end}}</span>{{/show_slice}}</span></span>'
-    + '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator empty" value="{{creator_name}}" /></h3>{{/show_creator_field}}'
+    + '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator empty" value="{{creator_name}}" />{{/show_creator_field}}</h3>'
     + '<textarea class="Ldt-CreateAnnotation-Description empty" placeholder="{{l10n.type_description}}"></textarea>'
     + '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>'
     + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />'
diff -r f08d8b3e78b8 -r 818a31dbc3db src/ldt/ldt/static/ldt/metadataplayer/LdtPlayer-core.js
--- a/src/ldt/ldt/static/ldt/metadataplayer/LdtPlayer-core.js	Fri Nov 16 16:44:27 2012 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/LdtPlayer-core.js	Fri Nov 16 17:08:05 2012 +0100
@@ -1445,7 +1445,13 @@
 }
 
 IriSP.Widgets.Widget.prototype.getWidgetAnnotations = function() {
-    return typeof this.annotation_type !== "undefined" && this.annotation_type ? this.media.getAnnotationsByTypeTitle(this.annotation_type) : this.media.getAnnotations();
+    if (typeof this.annotation_type === "undefined") {
+        return this.media.getAnnotations();
+    }
+    if (this.annotation_type.elementType === "annotationType") {
+        return this.annotation_type.getAnnotations();
+    }
+    return this.media.getAnnotationsByTypeTitle(this.annotation_type);
 }
 
 IriSP.Widgets.Widget.prototype.getWidgetAnnotationsAtTime = function() {
diff -r f08d8b3e78b8 -r 818a31dbc3db src/ldt/ldt/static/ldt/metadataplayer/MultiSegments.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/ldt/ldt/static/ldt/metadataplayer/MultiSegments.js	Fri Nov 16 17:08:05 2012 +0100
@@ -0,0 +1,120 @@
+IriSP.Widgets.MultiSegments = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.MultiSegments.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.MultiSegments.prototype.defaults = {
+    annotation_show_arrow: true,
+    annotation_start_minimized: true,
+    annotation_show_annotation_type: true,
+    show_all: false
+}
+
+IriSP.Widgets.MultiSegments.prototype.draw = function() {
+    var _this = this,
+        lines = [],
+        currentLine = null,
+        segmentsopts = {},
+        annotationopts = {};
+    IriSP._(this).each(function(_v,_k) {
+        if (/^segments_/.test(_k)) {
+            segmentsopts[_k.replace(/^segments_/,"")] = _v;
+        }
+        if (/^annotation_/.test(_k)) {
+            annotationopts[_k.replace(/^annotation_/,"")] = _v;
+        }
+    })
+    this.source.getAnnotationTypes().forEach(function(_anntype) {
+        var segments = _anntype.getAnnotations().filter(function(_ann) {
+            return _ann.getDuration() > 0;
+        });
+        if (segments.length) {
+            
+            var visible = false;
+            
+            var line = {
+                segmentWidget: IriSP.jQuery("<div>"),
+                annotationWidget: IriSP.jQuery("<div>"),
+                hasSegmentsNow: function() {
+                    var _time = _this.media.getCurrentTime();
+                    return !!segments.filter(function(_annotation) {
+                        return _annotation.begin <= _time && _annotation.end > _time;
+                    }).length;
+                },
+                hide: function() {
+                    if (visible) {
+                        visible = false;
+                        this.annotationWidget.slideUp();
+                    }
+                },
+                show: function() {
+                    if (!visible) {
+                        visible = true;
+                        this.annotationWidget.slideDown();
+                    }
+                }
+            }
+                
+                
+            line.segmentWidget
+                .addClass("Ldt-MultiSegments-Segment")
+                .appendTo(_this.$);
+                
+            if (!_this.show_all) {
+                line.segmentWidget.mouseenter(function() {
+                    if (line.hasSegmentsNow()) {
+                        currentLine = line;
+                        checkVisibilities();
+                    }
+                });
+            }
+            
+            line.annotationWidget
+                .addClass("Ldt-MultiSegments-Annotation")
+                .appendTo(_this.$)
+                .hide();
+                
+            _this.insertSubwidget(
+                line.segmentWidget,
+                IriSP._({
+                    type: "Segments",
+                    annotation_type: _anntype
+                }).extend(segmentsopts)
+            );
+            
+            _this.insertSubwidget(
+                line.annotationWidget,
+                IriSP._({
+                    type: "Annotation",
+                    annotation_type: _anntype
+                }).extend(annotationopts)
+            );
+            
+            lines.push(line);
+        }
+    });
+    var _annotationWidgets = _this.$.find(".Ldt-MultiSegments-Annotation")
+    
+    function checkVisibilities(_time) {
+        if (!_this.show_all && currentLine && !currentLine.hasSegmentsNow()) {
+            currentLine = undefined;
+        }
+        IriSP._(lines).each(function(line) {
+            if (line.hasSegmentsNow()) {
+                if (!_this.show_all && !currentLine) {
+                    currentLine = line;
+                }
+                if (_this.show_all || line === currentLine) {
+                    line.show();
+                } else {
+                    line.hide();
+                }
+            } else {
+                line.hide();
+            }
+        });
+    }
+    
+    this.onMediaEvent("timeupdate", checkVisibilities);
+}
\ No newline at end of file
diff -r f08d8b3e78b8 -r 818a31dbc3db src/ldt/ldt/static/ldt/metadataplayer/Segments.css
--- a/src/ldt/ldt/static/ldt/metadataplayer/Segments.css	Fri Nov 16 16:44:27 2012 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/Segments.css	Fri Nov 16 17:08:05 2012 +0100
@@ -2,28 +2,17 @@
  * Segments Widget
  */
 
-.Ldt-Segments-List {
-    width: 100%; height: 100%;
-}
-
 .Ldt-Segments-Segment {
-    position: absolute; height: 100%; opacity: .5; filter:alpha(opacity=50); margin-left: -1px; border-left: 1px solid #ffffff;
-}
-
-.Ldt-Segments-Segment.inactive, .Ldt-Segments-Segment.unfound {
-    opacity: .2; filter:alpha(opacity=20);
-}
-
-.Ldt-Segments-Segment.active, .Ldt-Segments-Segment.found {
-    opacity: 1; filter:alpha(opacity=100);
+    position: absolute; margin-left: -1px; border: 1px solid #ffffff;
 }
 
 .Ldt-Segments-Position {
     background: #fc00ff;
     position: absolute;
-    top: 0;
+    top: -1px;
     left: 0;
     margin-left: -1px;
     width: 2px;
-    height: 100%;
+    bottom: -1px;
+    z-index: 80000;
 }
\ No newline at end of file
diff -r f08d8b3e78b8 -r 818a31dbc3db src/ldt/ldt/static/ldt/metadataplayer/Segments.js
--- a/src/ldt/ldt/static/ldt/metadataplayer/Segments.js	Fri Nov 16 16:44:27 2012 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/Segments.js	Fri Nov 16 17:08:05 2012 +0100
@@ -9,7 +9,9 @@
 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
+    line_height: 8,
+    background: "#e0e0e0",
+    overlap: .25
 };
 
 IriSP.Widgets.Segments.prototype.template =
@@ -19,7 +21,7 @@
 
 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>'
+    + '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() {
@@ -30,26 +32,65 @@
     
     this.renderTemplate();
     
-    var _list = this.getWidgetAnnotations(),
+    var _list = this.getWidgetAnnotations().filter(function(_ann) {
+            return _ann.getDuration() > 0;
+        }),
         _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');
+    var list_$ = this.$.find('.Ldt-Segments-List'),
+        lines = [],
+        zindex = 1;
+    
+    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;
+    }
+    
+    function unselect() {
+        _this.tooltip.hide();
+        _this.$segments.each(function() {
+            var _segment = IriSP.jQuery(this);
+            _segment.css("background", _segment.attr("data-medium-color"));
+        });
+    }
     
     _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 ) : '' );
+            _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);
         var _data = {
-            color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ),
+            color : color,
+            medcolor: medcolor,
+            lowcolor: lowcolor,
             text: _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1&hellip;'),
-            left : Math.floor( _left ),
-            width : Math.floor( _width ),
+            left : _left,
+            width : _width,
+            top: _top,
+            height: _this.line_height - 1,
             id : _annotation.id,
             media_id : _annotation.getMedia().id
         };
@@ -64,16 +105,28 @@
             .click(function() {
                 _annotation.trigger("click");
             })
-            .appendTo(_this.list_$)
+            .appendTo(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");
+            _this.$segments.each(function() {
+                var _segment = IriSP.jQuery(this);
+                _segment.css({
+                    background: _segment.attr("data-low-color")
+                });
+            });
+            _this.tooltip.show( _center, _top, _data.text, _data.color );
+            _el.css({
+                background: color,
+                "z-index": ++zindex
+            });
         });
-        _annotation.on("unselect", function() {
-            _this.tooltip.hide();
-            _this.$segments.removeClass("inactive active");
-        });
+        _annotation.on("unselect", unselect);
+    });
+    
+    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" }, "tooltip");
     this.$segments = this.$.find('.Ldt-Segments-Segment');
@@ -87,10 +140,10 @@
         this.$segments.each(function() {
             var _el = IriSP.jQuery(this);
             if (_re.test(_el.attr("segment-text"))) {
-                _el.removeClass("unfound").addClass("found");
+                _el.css("background", _el.attr("data-base-color"));
                 _found++;
             } else {
-                _el.removeClass("found").addClass("unfound");
+                _el.css("background", _el.attr("data-low-color"));
             }
         });
         if (_found) {
@@ -99,7 +152,10 @@
             this.player.trigger("search.noMatchFound");
         }
     } else {
-        this.$segments.removeClass("found unfound");
+        _this.$segments.each(function() {
+            var _segment = IriSP.jQuery(this);
+            _segment.css("background", _segment.attr("data-medium-color"));
+        });
     }
 }