diff -r d777d05a16e4 -r 38b65761a7d5 src/js/widgets/sliderWidget.js
--- a/src/js/widgets/sliderWidget.js	Thu Apr 19 19:20:41 2012 +0200
+++ b/src/js/widgets/sliderWidget.js	Fri Apr 20 19:13:11 2012 +0200
@@ -1,171 +1,105 @@
-IriSP.SliderWidget = function(Popcorn, config, Serializer) {
-  IriSP.Widget.call(this, Popcorn, config, Serializer);
+/*
+ The Slider Widget fits right under the video
+ */
+
+IriSP.SliderWidget = function(player, config) {
+    IriSP.Widget.call(this, player, config);
+    this.bindPopcorn("timeupdate","onTimeupdate");
+    this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover");
+    this.bindPopcorn("IriSP.PlayerWidget.MouseOut","onMouseout");
 };
 
 IriSP.SliderWidget.prototype = new IriSP.Widget();
 
 IriSP.SliderWidget.prototype.draw = function() {
-  var self = this;
-
-  this.selector.append(Mustache.to_html(IriSP.sliderWidget_template, {}));
-  this.selector.addClass("Ldt-SliderMinimized");
-
-  this.sliderBackground = this.selector.find(".Ldt-sliderBackground");
-  this.sliderForeground = this.selector.find(".Ldt-sliderForeground");
-  this.positionMarker = this.selector.find(".Ldt-sliderPositionMarker");
-
-
-  // a special variable to stop methods from tinkering
-  // with the positionMarker when the user is dragging it
-  this.draggingOngoing = false;
-
-  // another special variable used by the timeout handler to
-  // open or close the slider.
-  this.sliderMaximized = false;
-  this.timeOutId = null;
-
-  
-  this.positionMarker.draggable({axis: "x",
-  start: IriSP.wrap(this, this.positionMarkerDraggingStartedHandler),
-  stop: IriSP.wrap(this, this.positionMarkerDraggedHandler),
-  containment: "parent"
-  });
-  this.positionMarker.css("position", "absolute");
-  
-  this.sliderBackground.click(function(event) { self.backgroundClickHandler.call(self, event); });
-  this.sliderForeground.click(function(event) { self.foregroundClickHandler.call(self, event); });
-
-  this.selector.hover(IriSP.wrap(this, this.mouseOverHandler), IriSP.wrap(this, this.mouseOutHandler));
-
-  // update the positions
-  this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));
-
-  // special messages :
-  this._Popcorn.listen("IriSP.PlayerWidget.MouseOver", IriSP.wrap(this, this.mouseOverHandler));
-  this._Popcorn.listen("IriSP.PlayerWidget.MouseOut", IriSP.wrap(this, this.mouseOutHandler));
-};
-
-/* update the slider and the position marker as time passes */
-IriSP.SliderWidget.prototype.sliderUpdater = function() {
-  if(this.draggingOngoing || this._disableUpdate)
-    return;
-  
-  var time = this._Popcorn.currentTime();
-
-  var duration = this.getDuration() / 1000;
-  var percents = time / duration;
-  
-  /* we do these complicated calculations to center exactly
-     the position Marker */
-
-  var divWidth = this.selector.width();
-  var pixels = Math.floor(this.selector.width() * percents);
-  var positionMarker_width = this.positionMarker.width();
-  var correction = (positionMarker_width / 2);
-
-  /* check that we don't leave the left side */
-  var newPos = pixels - correction;
-  if (newPos <= 0)
-    newPos = 0;
-  
-  /* check that we don't leave the right side */
-  var rightEdgePos = pixels + 1 * correction;
-
-  if (rightEdgePos >= divWidth)
-    newPos = divWidth - 1 * correction - 1;
-  
-  this.sliderForeground.css("width", pixels + "px");
-  this.positionMarker.css("left", newPos + "px");
-
+    
+    this.$slider = IriSP.jQuery('<div>')
+        .addClass("Ldt-Slider")
+        .css(this.calculateSliderCss(this.minimized_height));
+    
+    this.$.append(this.$slider);
+    
+    var _this = this;
+    
+    this.$slider.slider({
+        range: "min",
+        value: 0,
+        min: 0,
+        max: this.source.getDuration().getSeconds(),
+        slide: function(event, ui) {
+            _this.player.popcorn.currentTime(ui.value);
+        }
+    });
+    
+    this.$handle = this.$slider.find('.ui-slider-handle');
+    
+    this.$handle.css(this.calculateHandleCss(this.minimized_height));
+    
+    this.$
+        .mouseover(this.functionWrapper("onMouseover"))
+        .mouseout(this.functionWrapper("onMouseout"));
+    
+    this.maximized = false;
+    this.timeoutId = false;
 };
 
-IriSP.SliderWidget.prototype.backgroundClickHandler = 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.getDuration() / 1000;
-  var newTime = ((relX / width) * duration).toFixed(2);
-
-  this._Popcorn.currentTime(newTime);
-};
+IriSP.SliderWidget.prototype.onTimeupdate = function() {
+    this.$slider.slider("value",this.player.popcorn.currentTime());
+}
 
-/* same function as the previous one, except that it handles clicks
-   on the foreground element */
-IriSP.SliderWidget.prototype.foregroundClickHandler = function(event) {
-  var parentOffset = this.sliderForeground.parent().offset();
-  var width = this.sliderBackground.width();
-  var relX = event.pageX - parentOffset.left;
-
-  var duration = this.getDuration() / 1000;
-  var newTime = ((relX / width) * duration).toFixed(2);
-
-  this._Popcorn.currentTime(newTime);
-};
-
-/* handles mouse over the slider */
-IriSP.SliderWidget.prototype.mouseOverHandler = function(event) {
-  
-  if (this.timeOutId !== null) {
-    window.clearTimeout(this.timeOutId);
-  }
- 
-  this.sliderMaximized = true;
+IriSP.SliderWidget.prototype.onMouseover = function() {
+    if (this.timeoutId) {
+        window.clearTimeout(this.timeoutId);
+        this.timeoutId = false;
+    }
+    if (!this.maximized) {
+       this.animateToHeight(this.maximized_height);
+       this.maximized = true;
+    }
+}
 
-  this.sliderBackground.animate({"height": "9px"}, 100);
-  this.sliderForeground.animate({"height": "9px"}, 100);
-  this.positionMarker.animate({"height": "9px", "width": "9px"}, 100);
-  //this.positionMarker.css("margin-top", "-4px");
-  
-//  this.selector.removeClass("Ldt-SliderMinimized");
-//  this.selector.addClass("Ldt-SliderMaximized");
-};
-
-/* handles when the mouse leaves the slider */
-IriSP.SliderWidget.prototype.mouseOutHandler = function(event) {
-
-  this.timeOutId = window.setTimeout(IriSP.wrap(this, this.minimizeOnTimeout),
-                                     this.minimize_period);
-};
+IriSP.SliderWidget.prototype.onMouseout = function() {
+    if (this.timeoutId) {
+        window.clearTimeout(this.timeoutId);
+        this.timeoutId = false;
+    }
+    var _this = this;
+    this.timeoutId = window.setTimeout(function() {
+        if (_this.maximized) {
+            _this.animateToHeight(_this.minimized_height);
+            _this.maximized = false;
+        }
+        _this.timeoutId = false;
+    }, this.minimize_timeout);
+    
+}
 
-IriSP.SliderWidget.prototype.minimizeOnTimeout = function(event) {
-  this.sliderBackground.animate({"height": "5px"}, 100);
-  this.sliderForeground.animate({"height": "5px"}, 100);
-  this.positionMarker.animate({"height": "5px", "width": "5px"}, 100);
-  this.positionMarker.css("margin-top", "0px");
-  this.sliderMinimized = true;
-  
-//  this.selector.removeClass("Ldt-SliderMaximized");
-//  this.selector.addClass("Ldt-SliderMinimized");
-
-};
-
-// called when the user starts dragging the position indicator
-IriSP.SliderWidget.prototype.positionMarkerDraggingStartedHandler = function(event, ui) {  
-  this.draggingOngoing = true;
-};
+IriSP.SliderWidget.prototype.animateToHeight = function(_height) {
+    this.$slider.stop().animate(
+        this.calculateSliderCss(_height),
+        500,
+        function() {
+            IriSP.jQuery(this).css("overflow","visible");
+        });
+    this.$handle.stop().animate(
+        this.calculateHandleCss(_height),
+        500,
+        function() {
+            IriSP.jQuery(this).css("overflow","visible");
+        });
+}
 
-IriSP.SliderWidget.prototype.positionMarkerDraggedHandler = function(event, ui) {   
+IriSP.SliderWidget.prototype.calculateSliderCss = function(_size) {
+    return {
+        height: _size + "px",
+        "margin-top": (this.minimized_height - _size) + "px"
+    };
+}
 
-/*  this._disableUpdate = true; // disable slider position updates while dragging is ongoing.
-  window.setTimeout(IriSP.wrap(this, function() { this._disableUpdate = false; }), 500);
-*/
-  var parentOffset = this.sliderForeground.parent().offset();
-  var width = this.sliderBackground.width();
-  var relX = event.originalEvent.pageX - parentOffset.left;
-
-  var duration = this.getDuration() / 1000;
-  var newTime = ((relX / width) * duration).toFixed(2);
-  this._Popcorn.currentTime(newTime);
-  
-  this.draggingOngoing = false;
-};
-
+IriSP.SliderWidget.prototype.calculateHandleCss = function(_size) {
+    return {
+        height: (2 + _size) + "px",
+        width: (2 + _size) + "px",
+        "margin-left": -Math.ceil(2 + _size / 2) + "px" 
+    }
+}
\ No newline at end of file