--- a/src/js/widgets/sliderWidget.js	Thu Nov 10 17:25:30 2011 +0100
+++ b/src/js/widgets/sliderWidget.js	Thu Nov 10 17:34:20 2011 +0100
@@ -7,27 +7,25 @@
 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._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 + "%");
+  
 };
\ No newline at end of file