--- a/src/js/main.js	Fri Mar 16 19:31:26 2012 +0100
+++ b/src/js/main.js	Mon Mar 19 18:46:17 2012 +0100
@@ -43,13 +43,10 @@
     /* widget specific requirements */
     for (var idx in config.gui.widgets) {
       if (config.gui.widgets[idx].type === "PolemicWidget" ||
-          config.gui.widgets[idx].type === "StackGraphWidget") {        
+          config.gui.widgets[idx].type === "StackGraphWidget" ||
+          config.gui.widgets[idx].type === "SparklineWidget") {        
         $L.script(libs.raphael);
       }
-
-      if (config.gui.widgets[idx].type === "SparklineWidget") {
-        $L.script(libs.jquery_sparkline);
-      }
     }
     
     // same for modules

--- a/src/js/utils.js	Fri Mar 16 19:31:26 2012 +0100
+++ b/src/js/utils.js	Mon Mar 19 18:46:17 2012 +0100
@@ -123,7 +123,11 @@
 IriSP.encodeURI = function(str) {
   return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').  
                                  replace(/\)/g, '%29').replace(/\*/g, '%2A');  
-}  
+}
+
+IriSP.jqId = function (myid) { 
+   return IriSP.jQuery('#' + myid.replace(/(:|\.)/g,'\\$1'));
+ }  
 
 IriSP.__guidCounter = 0;
 IriSP.guid = function(prefix) {

--- a/src/js/widgets/createAnnotationWidget.js	Fri Mar 16 19:31:26 2012 +0100
+++ b/src/js/widgets/createAnnotationWidget.js	Mon Mar 19 18:46:17 2012 +0100
@@ -245,7 +245,7 @@
     this.selector.find(".Ldt-createAnnotation-Title").parent().show();      
   }
 
-  var url = document.location.href + "#id=" + annotation.id;
+  var url = typeof annotation.url == "string" ? annotation.url : document.location.href + "#id=" + annotation.id;
   var twStatus = IriSP.mkTweetUrl(url);
   var gpStatus = IriSP.mkGplusUrl(url);
   var fbStatus = IriSP.mkFbUrl(url);

--- a/src/js/widgets/segmentsWidget.js	Fri Mar 16 19:31:26 2012 +0100
+++ b/src/js/widgets/segmentsWidget.js	Mon Mar 19 18:46:17 2012 +0100
@@ -8,36 +8,13 @@
   this._Popcorn.listen("IriSP.search", function(searchString) { self.searchHandler.call(self, searchString); });
   this._Popcorn.listen("IriSP.search.closed", function() { self.searchFieldClosedHandler.call(self); });
   this._Popcorn.listen("IriSP.search.cleared", function() { self.searchFieldClearedHandler.call(self); });
+  
+  this.checkOption("cinecast_version");
+  this.defaultColors = ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"]
 };
 
 IriSP.SegmentsWidget.prototype = new IriSP.Widget();
 
-/* Get the width of a segment, in pixels. */
-IriSP.SegmentsWidget.prototype.segmentToPixel = function(annotation) {  
-  var begin = Math.round((+ annotation.begin) / 1000);
-  var end = Math.round((+ annotation.end) / 1000);    
-  var duration = this._serializer.getDuration() / 1000;
-  
-  var startPourcent 	= IriSP.timeToPourcent(begin, duration);
-  var startPixel = Math.floor(this.selector.parent().width() * (startPourcent / 100));
-  
-  var endPourcent 	= Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent);
-  var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100));
-  
-  return endPixel;
-};
-
-/* compute the total length of a group of segments */
-IriSP.SegmentsWidget.prototype.segmentsLength = function(segmentsList) {
-  var self = this;
-  var total = 0;
-  
-  for (var i = 0; i < segmentsList.length; i++)
-    total += self.segmentToPixel(segmentsList[i].annotation);
-  
-  return total;  
-};
-
 IriSP.SegmentsWidget.prototype.draw = function() {
 
   var self = this;
@@ -45,69 +22,84 @@
 
   this.selector.addClass("Ldt-SegmentsWidget");
   this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
-          
-  var view_type = this._serializer.getChapitrage();
-  if (typeof(view_type) === "undefined") {
-    view_type = this._serializer.getNonTweetIds()[0];  
-  }
+  
   this.positionMarker = this.selector.find(".Ldt-SegmentPositionMarker");
   
   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater));
-
-  
-  var i = 0;
-  
-  var segments_annotations = [];
-  
-  for (i = 0; i < annotations.length; i++) {
-    var annotation = annotations[i];
+  if (this.cinecast_version) {
+      var _sourceMedia = IriSP.__jsonMetadata.medias[0],
+        _mediaId = _sourceMedia.id,
+        duration = IriSP.__jsonMetadata.medias[0].meta.duration;
+      
+      var segments_annotations = IriSP.underscore.filter(
+          this._serializer._data.annotations,
+          function(_a) {
+              return _a.type == "cinecast:MovieExtract" && _a.media == _mediaId;
+          }
+      );
+  }
+  else {
 
-    /* filter the annotations whose type is not the one we want */
-    if (view_type != "" && typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined"
-          && annotation.meta["id-ref"] != view_type) {
-        continue;
-    }
-
-    segments_annotations.push(annotation);
-  }
+    var duration = this._serializer.getDuration();
+      var view_type = this._serializer.getChapitrage();
+      if (typeof(view_type) === "undefined") {
+        view_type = this._serializer.getNonTweetIds()[0];  
+      }
     
-  var totalWidth = this.selector.width() - segments_annotations.length;
+      
+      var i = 0;
+      
+      var segments_annotations = [];
+      
+      for (i = 0; i < annotations.length; i++) {
+        var annotation = annotations[i];
+    
+        /* filter the annotations whose type is not the one we want */
+        if (view_type != "" && typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined"
+              && annotation.meta["id-ref"] != view_type) {
+            continue;
+        }
+    
+        segments_annotations.push(annotation);
+      }
+}    
+    var _w = this.selector.width();
   var lastSegment = IriSP.underscore.max(segments_annotations, function(annotation) { return annotation.end; });
   
   for (i = 0; i < segments_annotations.length; i++) {
   
     var annotation = segments_annotations[i];
-    var begin = (+ annotation.begin);
-    var end = (+ annotation.end);
-    var duration = this._serializer.getDuration();
+    var begin = (+ annotation.begin * (this.cinecast_version ? 1000 : 1));
+    var end = (+ annotation.end * (this.cinecast_version ? 1000 : 1));
     var id = annotation.id;
         
-    var startPixel = Math.floor(this.selector.parent().width() * (begin / duration));
+    var startPixel = Math.floor(_w * (begin / duration));
 
-    var endPixel = Math.floor(this.selector.parent().width() * (end / duration));
-    
+    var endPixel = Math.floor(_w * (end / duration));
     if (annotation.id !== lastSegment.id) 
       var pxWidth = endPixel - startPixel -1;
     else
       /* the last segment has no segment following it */
       var pxWidth = endPixel - startPixel;
- 
-    var divTitle = IriSP.clean_substr(annotation.content.title + " -<br>" + annotation.content.description, 0, 132) + "...";
-
-    if (typeof(annotation.content.color) !== "undefined")
-      var color = annotation.content.color;
-    else
-      var color = annotation.color;
+    
+    var divTitle = this.cinecast_version
+        ? annotation.content.data
+        : IriSP.clean_substr(annotation.content.title + " -<br>" + annotation.content.description, 0, 132) + "...";
     
-    var hexa_color = IriSP.DEC_HEXA_COLOR(color);
+    var hexa_color = typeof(annotation.content.color) !== "undefined"
+        ? '#' + IriSP.DEC_HEXA_COLOR(annotation.content.color)
+        : typeof(annotation.color) !== "undefined"
+            ? '#' + IriSP.DEC_HEXA_COLOR(annotation.color)
+            : this.defaultColors[i % this.defaultColors.length];
 
     /*
     if (hexa_color === "FFCC00")
       hexa_color = "333";
     */
-    if (hexa_color.length == 4)
+    if (hexa_color.length == 5)
       hexa_color = hexa_color + '00';
     
+    
     var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
         {"divTitle" : divTitle, "id" : id, "startPixel" : startPixel,
         "pxWidth" : pxWidth, "hexa_color" : hexa_color,
@@ -118,61 +110,44 @@
     
     /* add a special class to the last segment and change its border */
     if (annotation.id === lastSegment.id) {
-        this.selector.find("#" + id).addClass("Ldt-lastSegment");        
-        this.selector.find(".Ldt-lastSegment").css("border-color", "#" + hexa_color);        
+        IriSP.jqId(id).addClass("Ldt-lastSegment").css("border-color", hexa_color);  
     }
-
-    IriSP.jQuery("#" + id).fadeTo(0, 0.3);
-
-    IriSP.jQuery("#" + id).mouseover(
-    /* we wrap the handler in another function because js's scoping
-       rules are function-based - otherwise, the internal vars like
-       divTitle are preserved but they are looked-up from the draw
-       method scope, so after that the loop is run, so they're not
-       preserved */
-    (function(divTitle) { 
-     return function(event) {
-          IriSP.jQuery(this).animate({opacity: 0.6}, 5);
-          var offset_x = IriSP.jQuery(this).position().left + IriSP.jQuery(this).outerWidth() / 2;
-
-          self.TooltipWidget.show(divTitle, color, offset_x, 0);
-    } })(divTitle)).mouseout(function(){
-      IriSP.jQuery(this).animate({opacity: 0.3}, 5);
-      self.TooltipWidget.hide();
-    });
-
+   }
     // react to mediafragment messages.
     this._Popcorn.listen("IriSP.Mediafragment.showAnnotation", 
-      function(id, divTitle) { 
-      return function(annotation_id) { 
-        if (annotation_id !== id)
-          return;
+        function(id, divTitle) {
         
-          var divObject = IriSP.jQuery("#" + id);
-          divObject.animate({opacity: 0.6}, 5);
-          var offset = divObject.offset();
-          var correction = divObject.outerWidth() / 2;
-
-          var offset_x = offset.left + correction - 106;
-          if (offset_x < 0)
-            offset_x = 0;
-          
-          var offset_y = offset.top;          
-
-          self.TooltipWidget.show(divTitle, color, offset_x, offset_y - 160);
-          IriSP.jQuery(document).one("mousemove", function() { divObject.animate({opacity: 0.3}, 5);
+            var divObject = IriSP.jqId(id);
+            if (divObject.length) {
+            divObject.fadeTo(0,1);
+            var offset_x = divObject.position().left + divObject.outerWidth() / 2;
+            self.TooltipWidget.show(divObject.attr("title"), IriSP.jQuery(this).css("background-color"), offset_x, 0);
+            IriSP.jQuery(document).one("mousemove", function() { divObject.fadeTo(0,.5);
                                                                 self.TooltipWidget.hide(); });
-      }; }(id, divTitle));
-    
-    IriSP.jQuery("#" + id).click(function(_this, annotation) {
-                                    return function() { _this.clickHandler(annotation)};
-                                 }(this, annotation));
-    }
+        }
+      });
+      
+    this.selector.find(".Ldt-iri-chapter")
+        .fadeTo(0, .5)
+        .click(function() {
+            self._Popcorn.trigger("IriSP.SegmentsWidget.click", this.id);
+            self._Popcorn.currentTime(IriSP.jQuery(this).attr("data-seek"));
+        })
+        .mouseover( function(event) {
+            var divObject = IriSP.jQuery(this);
+            divObject.fadeTo(0,1);
+            var offset_x = divObject.position().left + divObject.outerWidth() / 2;
+            self.TooltipWidget.show(divObject.attr("title"), IriSP.jQuery(this).css("background-color"), offset_x, 0);
+        })
+        .mouseout(function(){
+            IriSP.jQuery(this).fadeTo(0,.5);
+            self.TooltipWidget.hide();
+        });
 };
 
 /* restores the view after a search */
 IriSP.SegmentsWidget.prototype.clear = function() {
-  this.selector.children(".Ldt-iri-chapter").animate({opacity:0.3}, 100);
+  this.selector.children(".Ldt-iri-chapter").fadeTo(0,.5);
 };
 
 IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) {
@@ -217,7 +192,11 @@
 };
 
 IriSP.SegmentsWidget.prototype.positionUpdater = function() {  
-  var duration = this._serializer.getDuration() / 1000;
+  if (this.cinecast_version) {
+    var duration = IriSP.__jsonMetadata.medias[0].meta.duration;
+  } else {
+    var duration = this._serializer.getDuration() / 1000;
+  }
   var time = this._Popcorn.currentTime();
   //var position 	= ((time / duration) * 100).toFixed(2);
   var position 	= ((time / duration) * 100).toFixed(2);

--- a/src/js/widgets/sparklineWidget.js	Fri Mar 16 19:31:26 2012 +0100
+++ b/src/js/widgets/sparklineWidget.js	Mon Mar 19 18:46:17 2012 +0100
@@ -4,6 +4,21 @@
 
   this._oldAnnotation = null;
   this._results = [];
+  
+  this.lineColor = this._config.lineColor || "#7492b4";
+  this.fillColor = this._config.fillColor || "#aeaeb8";
+  this.lineWidth = this._config.lineWidth || 2;
+  this.slices = this._config.slices || Math.floor(this.width/20);
+  if (!this.width) {
+      this.width = this.selector.width();
+  }
+  if (!this.height) {
+      this.height = 40;
+  }
+  this.selector.css("height", this.height + "px");
+  if (this._config.background) {
+      this.selector.css("background", this._config.background);
+  }
 };
 
 
@@ -15,19 +30,13 @@
 
 /** draw the sparkline using jquery sparkline */
 IriSP.SparklineWidget.prototype.draw = function() {
-  var templ = Mustache.to_html(IriSP.SparklineWidget_template, {width: this.width, height: this.height});
-  /** this widget uses three divs -
-    the first is the sparkline, which is generated by jquery sparkline,
-    the second is an overlay div to display the progression in the video,
-    and the third is a div to react to clicks
-  */
+    this.duration = this._serializer.getDuration();
+    this.paper = new Raphael(this.selector[0], this.width, this.height);
   
   var views = this._serializer._data.views;
   var stat_view;
   if (!IriSP.null_or_undefined(views)) {
-    
-    var i;
-    for (i = 0; i < views.length; i++) {
+    for (var i = 0; i < views.length; i++) {
       var view = views[i];
       if (view.id === "stat") {
           stat_view = view;
@@ -36,105 +45,101 @@
     }
   }
   
+    var _ = IriSP.underscore;
   // If we've found the correct view, feed the directly the data from the view
   // to jquery sparkline. Otherwise, compute it ourselves.
-  if (!IriSP.null_or_undefined(stat_view)) {
-    console.log("sparklinewidget : using stats embedded in the json");
-    var results = stat_view.meta.stat.split(",");      
-  } else {
-    console.log("sparklinewidget : computing stats ourselves");
-    var num_columns = (this.selector.width()) / IriSP.widgetsDefaults["SparklineWidget"].column_width;
-    var duration = this._serializer.getDuration();
-    var time_step = duration / num_columns; /* the time interval between two columns */
-    var results = [];
-    var i = 0; /* the index in the loop */  
-
-    /* this algorithm makes one assumption : that the array is sorted 
-       (it's done for us by the JSONSerializer). We go through the array 
-       and count how many comments fall within a peculiar time piece.
-       As i is preserved between each iteration, it's O(n).
-    */
-    
-    for(var j = 0; j < num_columns && i < this._serializer._data.annotations.length; j++) {    
-      var count = 0;
-      var annotation_begin = +(this._serializer._data.annotations[i].begin);
-      
-      while(annotation_begin >= j * time_step && annotation_begin <= (j + 1) * time_step ) {
-        count++;
-        i++;
-        if (i >= this._serializer._data.annotations.length)
-          break;
-          
-        annotation_begin = +(this._serializer._data.annotations[i].begin);
-        
-      }
-      
-      results.push(count);
+    if (!IriSP.null_or_undefined(stat_view)) {
+        console.log("sparklinewidget : using stats embedded in the json");
+        var _results = stat_view.meta.stat.split(",");      
+    } else {
+        var _annotations = this._serializer._data.annotations,
+            _sliceDuration = Math.floor( this.duration / this.slices),
+            _results = _(_.range(this.slices)).map(function(_i) {
+                return _(_annotations).filter(function(_a){
+                    return (_a.begin <= (1 + _i) * _sliceDuration) && (_a.end >= _i * _sliceDuration)
+                }).length;
+            });
     }
-  }
+    var _max = Math.max(1, _(_results).max()),
+        _h = this.height,
+        _scale = (_h - this.lineWidth) / _max,
+        _width = this.width / this.slices,
+        _y = _(_results).map(function(_v) {
+            return _h - (_scale * _v);
+        }),
+        _d = _(_y).reduce(function(_memo, _v, _k) {
+               return _memo + ( _k
+                   ? 'C' + (_k * _width) + ' ' + _y[_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v
+                   : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v )
+            },'') + 'L' + this.width + ' ' + _y[_y.length - 1],
+        _d2 = _d + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height;
+    this.paper.path(_d2).attr({
+        "stroke" : "none",
+        "fill" : this.fillColor
+    });
+         
+    this.paper.path(_d).attr({
+        "fill" : "none",
+        "stroke" : this.lineColor,
+        "stroke-width" : this.lineWidth
+    });
   
+    this.rectangleProgress = this.paper.rect(0,0,0,this.height)
+        .attr({
+            "stroke" : "none",
+            "fill" : "#808080",
+            "opacity" : .3
+        });
+    this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2});
   // save the results in an array so that we can re-use them when a new annotation
   // is added.
-  this._results = results;
+  this._results = _results;
   
-  this.selector.append(templ);
-  this.selector.find(".Ldt-sparkLine").css("background", "#c7c8cc");
-  this.selector.find(".Ldt-sparkLine").sparkline(results, {lineColor: "#7492b4", fillColor: "#aeaeb8",
-                                                           spotColor: "#b70056",
-                                                           width: this.width, height: this.height});
   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler));
-  this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", IriSP.wrap(this, this.handleNewAnnotation));
+//  this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", IriSP.wrap(this, this.handleNewAnnotation));
   
-  IriSP.jQuery(".Ldt-sparkLineClickOverlay").click(IriSP.wrap(this, this.clickHandler));  
+  this.selector.click(IriSP.wrap(this, this.clickHandler));  
 };
 
 /** react to a timeupdate event */
 IriSP.SparklineWidget.prototype.timeUpdateHandler = function() {
-  var currentTime = this._Popcorn.currentTime();  
-  var duration = this._serializer.getDuration() / 1000;
-  var proportion = ((currentTime / duration) * 100).toFixed(4);
-  
-  IriSP.jQuery(".Ldt-sparkLinePositionMarker").css("width", proportion + "%");                                    
+    var _currentTime = this._Popcorn.currentTime(),
+        _x = (1000 * _currentTime / this.duration) * this.width;
+    this.rectangleProgress.attr({
+        "width" : _x
+    });
+    this.ligneProgress.attr({
+        "path" : "M" + _x + " 0L" + _x + " " + this.height
+    });
+                                  
 }
 
 /** handle clicks on the widget */
 IriSP.SparklineWidget.prototype.clickHandler = function(event) {
-  /* this piece of code is a little bit convoluted - here's how it works :
-     we want to handle clicks on the progress bar and convert those to seeks in the media.
-     However, jquery only gives us a global position, and we want a number of pixels relative
-     to our container div, so we get the parent position, and compute an offset to this position,
-     and finally compute the progress ratio in the media.
-     Finally we multiply this ratio with the duration to get the correct time
-  */
-
-  var parentOffset = this.selector.offset();
-  var width = this.selector.width();
-  var relX = event.pageX - parentOffset.left;
-
-  var duration = this._serializer.getDuration() / 1000;
-  var newTime = ((relX / width) * duration).toFixed(2);
+  var relX = event.pageX - this.selector.offset().left;
+  var newTime = ((relX / this.width) * this.duration/1000).toFixed(2);
     
   this._Popcorn.trigger("IriSP.SparklineWidget.clicked", newTime);
-  this._Popcorn.currentTime(newTime);                                 
+  this._Popcorn.currentTime(newTime);
 };
 
 /** react when a new annotation is added */
 IriSP.SparklineWidget.prototype.handleNewAnnotation = function(annotation) {
-  var num_columns = this._results.length;
-  var duration = this._serializer.getDuration();
-  var time_step = Math.round(duration / num_columns); /* the time interval between two columns */
-  var begin = +annotation.begin;
-  var end = +annotation.end;
-  
-  /* increment all the values between the beginning and the end of the annotation */
-  var index_begin = Math.floor(begin / time_step);
-  var index_end = Math.floor(end / time_step);
-  
-  for (var i = index_begin; i < Math.min(index_end, this._results.length); i++) {
-    this._results[i]++;
-  }
-  
-  this.selector.find(".Ldt-sparkLine").sparkline(this._results, {lineColor: "#7492b4", fillColor: "#aeaeb8",
-                                                           spotColor: "#b70056",
-                                                           width: this.width, height: this.height});
+//  var num_columns = this._results.length;
+//  var duration = this._serializer.getDuration();
+//  var time_step = Math.round(duration / num_columns); /* the time interval between two columns */
+//  var begin = +annotation.begin;
+//  var end = +annotation.end;
+//  
+//  /* increment all the values between the beginning and the end of the annotation */
+//  var index_begin = Math.floor(begin / time_step);
+//  var index_end = Math.floor(end / time_step);
+//  
+//  for (var i = index_begin; i < Math.min(index_end, this._results.length); i++) {
+//    this._results[i]++;
+//  }
+//  
+//  this.selector.find(".Ldt-sparkLine").sparkline(this._results, {lineColor: "#7492b4", fillColor: "#aeaeb8",
+//                                                           spotColor: "#b70056",
+//                                                           width: this.width, height: this.height});
 };
\ No newline at end of file

--- a/src/js/widgets/stackGraphWidget.js	Fri Mar 16 19:31:26 2012 +0100
+++ b/src/js/widgets/stackGraphWidget.js	Mon Mar 19 18:46:17 2012 +0100
@@ -60,7 +60,7 @@
             return _g.length
         }).length,
         _scale = this.height / _max,
-        _width = this.width / this.sliceCount
+        _width = this.width / this.sliceCount,
         _showTitle = !this._config.excludeTitle,
         _showDescription = !this._config.excludeDescription;
     

--- a/src/templates/SparklineWidget.html	Fri Mar 16 19:31:26 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,5 +0,0 @@
-<div class='Ldt-sparklineWidget' style='width: {{width}}px; height: {{height}}px'>
-    <div class='Ldt-sparkLinePositionMarker' style='width: 0px; height: {{height}}px'></div>
-    <div class='Ldt-sparkLineClickOverlay' style='width: {{width}}px; height: {{height}}px'></div>
-    <div class='Ldt-sparkLine' style='width: {{width}}px; height: {{height}}px'>Loading</div>
-</div>

--- a/src/templates/annotation.html	Fri Mar 16 19:31:26 2012 +0100
+++ b/src/templates/annotation.html	Mon Mar 19 18:46:17 2012 +0100
@@ -3,6 +3,7 @@
 	class='Ldt-iri-chapter Ldt-TraceMe' 
 	style='left: {{startPixel}}px; 
          width: {{pxWidth}}px; 
-         background-color:#{{hexa_color}};' 
+         background-color:{{hexa_color}};'
+     data-seek='{{seekPlace}}'
 	>
 </div>

--- a/src/templates/player.html	Fri Mar 16 19:31:26 2012 +0100
+++ b/src/templates/player.html	Mon Mar 19 18:46:17 2012 +0100
@@ -9,8 +9,8 @@
         {{/disable_annotate_btn}}
         {{^disable_search_btn}}
         <div class='Ldt-Ctrl-button Ldt-CtrlSearch Ldt-TraceMe' title='Search'></div>
+        <div class='Ldt-Ctrl-spacer'></div>
         {{/disable_search_btn}}
-        <div class='Ldt-Ctrl-spacer'></div>
         <div class='LdtSearch'>
           <input class='LdtSearchInput Ldt-TraceMe'></input>
         </div>