# HG changeset patch
# User hamidouk
# Date 1321459475 -3600
# Node ID 7d748154f0b545e2888b98ba264a62a248772424
# Parent  cd439bb3421d55c09656f338c60be7ddd18ae325
working implementation and tests of the slider.

diff -r cd439bb3421d -r 7d748154f0b5 src/js/widgets/sliderWidget.js
--- a/src/js/widgets/sliderWidget.js	Wed Nov 16 17:04:12 2011 +0100
+++ b/src/js/widgets/sliderWidget.js	Wed Nov 16 17:04:35 2011 +0100
@@ -6,23 +6,39 @@
 
 IriSP.SliderWidget.prototype.draw = function() {
   var self = this;
+
   
   this.selector.append("<div class='sliderBackground'></div>");
-  this.sliderBackground = this.selector.children(".sliderBackground");
+  this.sliderBackground = this.selector.find(".sliderBackground");
   
-  this.selector.append("<div class='sliderForeground' style='position: absolute; top: 0%; width: 0%;'></div>");
-  this.sliderForeground = this.selector.children(".sliderForeground");
+  this.selector.append("<div class='sliderForeground'></div>");
+  this.sliderForeground = this.selector.find(".sliderForeground");
   
   this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
-  this.positionMarker = this.selector.children(".positionMarker");
+  this.positionMarker = this.selector.find(".positionMarker");
+  this.positionMarker.css("height", "10px");
+  this.positionMarker.css("width", "10px");
+  this.positionMarker.css("top", "0%");
+  
+  // a special variable to stop methods from tinkering
+  // with the positionMarker when the user is dragging it
+  this.draggingOngoing = false;
+  
+  this.positionMarker.draggable({axis: "x", 
+  start: IriSP.wrap(this, this.positionMarkerDraggingStartedHandler),
+  stop: IriSP.wrap(this, this.positionMarkerDraggedHandler)});
   
   this.sliderBackground.click(function(event) { self.clickHandler.call(self, event); });
   
+  this.selector.hover(IriSP.wrap(this, this.mouseOverHandler), IriSP.wrap(this, this.mouseOutHandler));
   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));
 };
 
 /* updates the slider as time passes */
-IriSP.SliderWidget.prototype.sliderUpdater = function() {  
+IriSP.SliderWidget.prototype.sliderUpdater = function() {
+  if(this.draggingOngoing)
+    return;
+    
   var time = this._Popcorn.currentTime();
   
   var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
@@ -49,4 +65,34 @@
   var newTime = ((relX / width) * duration).toFixed(2);
 	
   this._Popcorn.currentTime(newTime);
-};
\ No newline at end of file
+};
+
+/* handles mouse over the slider */
+IriSP.SliderWidget.prototype.mouseOverHandler = function(event) {  
+  this.sliderBackground.animate({"padding-top": "10px"}, 100);
+  this.sliderForeground.animate({"padding-top": "10px"}, 100);  
+};
+
+/* handles when the mouse leaves the slider */
+IriSP.SliderWidget.prototype.mouseOutHandler = function(event) {  
+  this.sliderBackground.animate({"padding-top": "5px"}, 50);
+  this.sliderForeground.animate({"padding-top": "5px"}, 50);  
+};
+
+// called when the user starts dragging the position indicator
+IriSP.SliderWidget.prototype.positionMarkerDraggingStartedHandler = function(event, ui) {   
+  this.draggingOngoing = true;
+};
+    
+IriSP.SliderWidget.prototype.positionMarkerDraggedHandler = function(event, ui) {  
+  // debugger;
+  console.log("dragging finished");
+  var width = this.sliderBackground.width();
+  var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+  var newTime = ((ui.offset.left / width) * duration).toFixed(2);
+  
+  this._Popcorn.currentTime(newTime);
+  
+  this.draggingOngoing = false;
+};
+
diff -r cd439bb3421d -r 7d748154f0b5 unittests/tests/widgets/sliderWidget.js
--- a/unittests/tests/widgets/sliderWidget.js	Wed Nov 16 17:04:12 2011 +0100
+++ b/unittests/tests/widgets/sliderWidget.js	Wed Nov 16 17:04:35 2011 +0100
@@ -41,4 +41,26 @@
     IriSP.jQuery("#widget-div").children().click();
     ok(spy_callback.called, "handling function has been called");
   });
+  
+    test("test slider dragging", function() {
+    
+    /* comes from the jquery unit tests */
+    var drag = function(handle, dx, dy) {
+      var element = el.data("draggable").element;
+      $(handle).simulate("drag", {
+        dx: dx || 0,
+        dy: dy || 0
+      });
+      dragged = { dx: dx, dy: dy };
+    }    
+    
+    var widget = new IriSP.SliderWidget(this.Popcorn, this.config, this.ser);    
+    widget.draw();
+    
+    var spy_callback = this.spy();
+    widget._Popcorn.listen("timeupdate", spy_callback);
+    
+    IriSP.jQuery("#widget-div").children(".positionMarker").simulate("drag", 70, 50);
+    ok(spy_callback.called, "handling function has been called");
+  });
 }
\ No newline at end of file