--- a/src/css/LdtPlayer.css	Mon Nov 14 12:16:45 2011 +0100
+++ b/src/css/LdtPlayer.css	Mon Nov 14 12:18:02 2011 +0100
@@ -200,3 +200,20 @@
 			font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
 			overflow:hidden;
 		}
+    
+    .SliderWidget {
+    
+    }
+    /* slider */
+    .sliderBackground  {
+      background-color: #B6B8B8;
+      width: 100%;
+      padding-top: 5px;
+    }
+    
+    .sliderForeground  {
+      background-color: #747474;
+      padding-top: 5px;
+      z-index: 2;
+      width: 0px;
+    }

--- a/src/js/widgets/segmentsWidget.js	Mon Nov 14 12:16:45 2011 +0100
+++ b/src/js/widgets/segmentsWidget.js	Mon Nov 14 12:18:02 2011 +0100
@@ -18,7 +18,7 @@
   var annotations = this._serializer._data.annotations;
 
   this.selector.css("overflow", "auto"); // clear the floats - FIXME : to refactor ?
-  this.selector.append(Mustache.to_html(IriSP.segment_marker_template));
+  this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
   
   this.positionMarker = this.selector.children(":first");
   

--- a/src/js/widgets/sliderWidget.js	Mon Nov 14 12:16:45 2011 +0100
+++ b/src/js/widgets/sliderWidget.js	Mon Nov 14 12:18:02 2011 +0100
@@ -7,27 +7,46 @@
 IriSP.SliderWidget.prototype.draw = function() {
   var self = this;
   
-  this.selector.slider( { //range: "min",
-    value: 0,
-    min: 1,
-    max: this._serializer.currentMedia().meta["dc:duration"]/1000,//1:54:52.66 = 3600+3240+
-    step: 0.1,
-    slide: function(event, ui) {     
-      self._Popcorn.currentTime(ui.value);
-    },
-    /* change event is similar to slide, but it happens when the slider position is 
-       modified programatically. We use it for unit tests */       
-    change: function(event, ui) {      
-      self._Popcorn.trigger("test.fixture", ui.value);
-    }
-    
-  });
+  this.selector.append("<div class='sliderBackground'></div>");
+  this.sliderBackground = this.selector.children(".sliderBackground");
+  
+  this.selector.append("<div class='sliderForeground' style='position: absolute; top: 0%; width: 0%;'></div>");
+  this.sliderForeground = this.selector.children(".sliderForeground");
+  
+  this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
+  this.positionMarker = this.selector.children(".positionMarker");
+  
+  this.sliderBackground.click(function(event) { self.clickHandler.call(self, event); });
   
   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));
 };
 
 /* updates the slider as time passes */
 IriSP.SliderWidget.prototype.sliderUpdater = function() {  
-  var currentPosition = this._Popcorn.currentTime();   
-	this.selector.slider( "value", currentPosition);		
+  var time = this._Popcorn.currentTime();
+  
+  var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+  var percent = ((time / duration) * 100).toFixed(2);
+	this.sliderForeground.css("width", percent + "%");
+	this.positionMarker.css("left", percent + "%");
+  
+};
+
+IriSP.SliderWidget.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.sliderBackground.parent().offset();
+  var width = this.sliderBackground.width();
+  var relX = event.pageX - parentOffset.left;
+      
+  var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+  var newTime = ((relX / width) * duration).toFixed(2);
+	
+  this._Popcorn.currentTime(newTime);
 };
\ No newline at end of file

--- a/unittests/tests/sliderWidget.js	Mon Nov 14 12:16:45 2011 +0100
+++ b/unittests/tests/sliderWidget.js	Mon Nov 14 12:18:02 2011 +0100
@@ -27,7 +27,8 @@
     var widget = new IriSP.SliderWidget(this.Popcorn, this.config, this.ser);    
     widget.draw();
     
-    ok(IriSP.jQuery("#widget-div").hasClass("ui-slider"), "test if the div has been set-up");
+    ok(IriSP.jQuery("#widget-div").children().hasClass("sliderBackground"), "test if the div has been set-up");
+    ok(IriSP.jQuery("#widget-div").children().hasClass("sliderForeground"), "test if the div has been set-up");
   
   });
   
@@ -36,8 +37,8 @@
     widget.draw();
     
     var spy_callback = this.spy();
-    widget._Popcorn.listen("test.fixture", spy_callback);       
-    IriSP.jQuery("#widget-div").slider("value", 30);
+    widget._Popcorn.listen("timeupdate", spy_callback);       
+    IriSP.jQuery("#widget-div").children().click();
     ok(spy_callback.called, "handling function has been called");
   });
 }
\ No newline at end of file