--- a/src/js/layout.js	Wed Nov 09 14:49:20 2011 +0100
+++ b/src/js/layout.js	Wed Nov 09 17:06:23 2011 +0100
@@ -49,8 +49,11 @@
 
 IriSP.LayoutManager.prototype.createDiv = function() {
     var newDiv = Popcorn.guid(this._div + "_widget_");
-    this._widgets.push(newDiv);    
-    this.selector.append("<div id='" + newDiv + "' style='width: 100%'></div");
+    this._widgets.push(newDiv);
+
+    var templ = "<div id='{{id}}' style='width: 100%; position: relative;'></div";
+    var txt = Mustache.to_html(templ, {id: newDiv});
+    this.selector.append(txt);
     
     return newDiv;
 };

--- a/src/js/widgets/segmentsWidget.js	Wed Nov 09 14:49:20 2011 +0100
+++ b/src/js/widgets/segmentsWidget.js	Wed Nov 09 17:06:23 2011 +0100
@@ -17,7 +17,9 @@
   var self = this;
   var annotations = this._serializer._data.annotations;
 
-  this.positionMarker = this.selector.append("<div style='position: absolute; z-index: 100; width: 1px; height: 20px; background-color: black;'></div>");
+  this.selector.append("<div style='position: absolute; z-index: 100; width: 1px; height: 20px; background-color: black;'></div>");
+  this.positionMarker = this.selector.children(":first");
+  
   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater));
   
   this.selector.after("<div class='cleaner'></div>"); // we need to do this because the segments are floated                                                      
@@ -83,7 +85,7 @@
 
 IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) {
   var begin = Math.round((+ annotation.begin) / 1000);
-  this._Popcorn.currentTime(begin)
+  this._Popcorn.currentTime(begin);
 };
 
 IriSP.SegmentsWidget.prototype.searchHandler = function(searchString) {
@@ -128,7 +130,7 @@
 IriSP.SegmentsWidget.prototype.positionUpdater = function() {  
   var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
   var time = this._Popcorn.currentTime();
-  var position 	= IriSP.timeToPourcent(begin, duration);
-  
-  this.positionMarker.css("left", position);
+  var position 	= ((time / duration) * 100).toFixed(2);
+
+  this.positionMarker.css("left", position + "%");  
 };
\ No newline at end of file

--- a/unittests/tests/segmentsWidget.js	Wed Nov 09 14:49:20 2011 +0100
+++ b/unittests/tests/segmentsWidget.js	Wed Nov 09 17:06:23 2011 +0100
@@ -30,7 +30,8 @@
     widget.draw();
   
     equal(IriSP.jQuery("#widget-div").length, 1, "test if the div has been added correctly");
-    equal(IriSP.jQuery("#widget-div").children().length, this.ser._data.annotations.length, "test if children have been added correctly");
+    // the + 1 is because we have a z-index div to indicate progress in the video.
+    equal(IriSP.jQuery("#widget-div").children().length, this.ser._data.annotations.length + 1, "test if children have been added correctly");
   });
   
   test("test click on a random segment", function() {