diff -r 4589b90fe1ad -r f5865a99be69 src/js/widgets/segmentsWidget.js
--- a/src/js/widgets/segmentsWidget.js	Thu Dec 22 16:09:52 2011 +0100
+++ b/src/js/widgets/segmentsWidget.js	Thu Dec 22 16:10:15 2011 +0100
@@ -13,17 +13,29 @@
 IriSP.SegmentsWidget.prototype = new IriSP.Widget();
 
 /* Get the width of a segment, in pixels. */
-IriSP.SegmentsWidget.prototype.segmentToPixel(annotation) {
+IriSP.SegmentsWidget.prototype.segmentToPixel = function(annotation) {  
+  var begin = Math.round((+ annotation.begin) / 1000);
+  var end = Math.round((+ annotation.end) / 1000);    
   var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
-  var id = annotation.id;
+  
   var startPourcent 	= IriSP.timeToPourcent(begin, duration);
-  var startPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100));
+  var startPixel = Math.floor(this.selector.parent().width() * (startPourcent / 100));
   
-  /* surprisingly, the following code doesn't work on webkit - for some reason, most of the 
-     boxes are 3 pixels smaller.
-  */
   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() {
@@ -32,23 +44,9 @@
   var annotations = this._serializer._data.annotations;
 
   this.selector.addClass("Ldt-SegmentsWidget");
-
-  /* in case we have different types of annotations, we want to display only the first type */
-  /* the next two lines are a bit verbose because for some test data, _serializer.data.view is either
-     null or undefined.
-  */
-  var view;
-
-  if (typeof(this._serializer._data.views) !== "undefined" && this._serializer._data.views !== null)
-     view = this._serializer._data.views[0];
-
-  var view_type = "";
-
-  if(typeof(view) !== "undefined" && typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) {
-          view_type = view.annotation_types[0];
-  }
- 
   this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
+          
+  var view_type = this._serializer.getNonTweetIds()[0];    
   
   this.positionMarker = this.selector.children(":first");
   
@@ -56,9 +54,7 @@
   
   
   var i = 0;
-  var totalWidth = this.selector.width();
-  var onePxPercent = 100 / totalWidth; /* the value of a pixel, in percents */
- 
+  
   var segments_annotations = [];
   
   for (i = 0; i < annotations.length; i++) {
@@ -70,24 +66,37 @@
         continue;
     }
 
-    segments_annotations.push(annotation);
+    segments_annotations.push({annotation: annotation, pixelValue: this.segmentToPixel(annotation)});
+  }
+    
+  var totalWidth = this.selector.width() - segments_annotations.length;
+  
+  var currentWidth = IriSP.underscore.reduce(segments_annotations, function(memo, segment) { return memo + segment.pixelValue; }, 0);
+  while(currentWidth > totalWidth) {
+    var max = IriSP.underscore.max(segments_annotations, function(segment) { return segment.pixelValue; });
+    max.pixelValue -= 1;
+    currentWidth = IriSP.underscore.reduce(segments_annotations, function(memo, segment) { return memo + segment.pixelValue; }, 0);
+  }
+  
+  console.log(currentWidth);
+  for (i = 0; i < segments_annotations.length; i++) {
+  
+    var annotation = segments_annotations[i].annotation;
     var begin = Math.round((+ annotation.begin) / 1000);
     var end = Math.round((+ annotation.end) / 1000);
     var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
     var id = annotation.id;
     var startPourcent 	= IriSP.timeToPourcent(begin, duration);
-    
-    /* surprisingly, the following code doesn't work on webkit - for some reason, most of the 
-       boxes are 3 pixels smaller.
-    */
-    var endPourcent 	= Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent);
-    var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100)) - 2;
-        
-    if (i == 0) {
+    var startPixel = Math.floor(this.selector.parent().width() * (startPourcent / 100));
 
-      endPourcent -= onePxPercent;
-    }
-    
+    var pourcentWidth	= Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent);
+    //var pxWidth = Math.floor(this.selector.parent().width() * (pourcentWidth / 100));
+    var pxWidth = segments_annotations[i].pixelValue;
+
+    /* don't show annotation with an empty length */
+    if (pxWidth === 0)
+      continue;
+      
     var divTitle = (annotation.content.title + " - " + annotation.content.description).substr(0,55);
 
     if (typeof(annotation.content.color) !== "undefined")
@@ -103,8 +112,8 @@
       hexa_color = hexa_color + '00';
     
     var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
-        {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent,
-        "endPixel" : endPixel, "hexa_color" : hexa_color,
+        {"divTitle" : divTitle, "id" : id, "startPixel" : startPixel,
+        "pxWidth" : pxWidth, "hexa_color" : hexa_color,
         "seekPlace" : Math.round(begin/1000)});
 
     this.selector.append(annotationTemplate);