add div to properly capture mouse position

source/Ox.UI/js/Video/Ox.VideoPlayer.js

@@ -22,6 +22,7 @@ Ox.VideoPlayer = function(options, self) {
 
     self.buffered = [];
     self.controlsTimeout;
+    self.dragTimeout;
 
     self.barHeight = 16;
     self.outerBarWidth = self.options.width - 96;
@@ -200,6 +201,15 @@ Ox.VideoPlayer = function(options, self) {
         })
         .appendTo(self.$outerBar);
 
+    self.$interfaceBar = Ox.Element()
+        .css({
+            float: 'left',
+            width: self.outerBarWidth + 'px',
+            height: self.barHeight + 'px',
+            marginLeft: - self.outerBarWidth + 'px'
+        })
+        .appendTo(self.$controls);
+
     self.$tooltip = Ox.Tooltip({
         animate: false
     });
@@ -216,18 +226,6 @@ Ox.VideoPlayer = function(options, self) {
         .html(Ox.formatDuration(self.options.position))
         .appendTo(self.$controls)
 
-    function mousedownBar(e) {
-        setPosition(getPosition(e));
-        self.$video.position(self.options.position);
-    }
-    function mouseleaveBar(e) {
-        self.$tooltip.hide();
-    }
-    function mousemoveBar(e) {
-        self.$tooltip.options({
-            title: Ox.formatDuration(getPosition(e))
-        }).show(e.clientX, e.clientY);
-    }
     function getPosition(e) {
         // fixme: no offsetX in firefox???
         if ($.browser.mozilla) {
@@ -237,6 +235,7 @@ Ox.VideoPlayer = function(options, self) {
                 0, self.duration
             );
         } else {
+            Ox.print(e.offsetX)
             return Ox.limit(
                 (e.offsetX - self.barHeight / 2) / self.innerBarWidth * self.duration,
                 0, self.duration
@@ -244,34 +243,6 @@ Ox.VideoPlayer = function(options, self) {
         }
     } 
 
-    function setPosition(position) {
-        self.options.position = position;
-        //Ox.print(-self.barWidth - 4 + self.barWidth * position / self.duration)
-        self.$positionMarker.css({
-            marginLeft: self.innerBarWidth * position / self.duration + self.markerOffset + 'px',
-        });
-        self.$position.html(Ox.formatDuration(position));
-    }
-
-    function loadedmetadata(data) {
-        //self.$position.html(Ox.formatDuration(data.video.duration))
-        Ox.print('!!!!', data.video.width, data.video.height, data.video.videoWidth, data.video.videoHeight)
-        self.duration = data.video.duration;
-        Ox.print('DURATION', Ox.formatDuration(self.duration));
-        hideLoadingIcon();
-        that.gainFocus().bindEvent({
-            key_space: function() {
-                self.$playButton.toggleTitle();
-                togglePlay();
-            }
-        });
-        self.$outerBar.bind({
-            mousedown: mousedownBar,
-            mousemove: mousemoveBar,
-            mouseleave: mouseleaveBar
-        });
-    }
-
     function getBufferedImageURL() {
         var width = self.innerBarWidth,
             height = self.barHeight,
@@ -316,6 +287,55 @@ Ox.VideoPlayer = function(options, self) {
         }, 0);
     }
 
+    function loadedmetadata(data) {
+        //self.$position.html(Ox.formatDuration(data.video.duration))
+        Ox.print('!!!!', data.video.width, data.video.height, data.video.videoWidth, data.video.videoHeight)
+        self.duration = data.video.duration;
+        Ox.print('DURATION', Ox.formatDuration(self.duration));
+        hideLoadingIcon();
+        that.gainFocus().bindEvent({
+            key_space: function() {
+                self.$playButton.toggleTitle();
+                togglePlay();
+            }
+        });
+        self.$interfaceBar
+            .bind({
+                mousedown: mousedownBar,
+                mouseleave: mouseleaveBar,
+                mousemove: mousemoveBar,
+            })
+            .bindEvent({
+                drag: dragBar,
+            });
+    }
+
+    function dragBar(e) {
+        setPosition(getPosition(e));
+        if (self.dragTimeout) {
+            clearTimeout(self.dragTimeout);
+            self.dragTimeout = 0;
+        }
+        self.dragTimeout = setTimeout(function() {
+            self.$video.position(self.options.position);            
+        }, 1000);
+    }
+
+    function mousedownBar(e) {
+        setPosition(getPosition(e));
+        self.$video.position(self.options.position);
+    }
+
+    function mouseleaveBar(e) {
+        self.$tooltip.hide();
+    }
+
+    function mousemoveBar(e) {
+        self.$tooltip.options({
+            title: Ox.formatDuration(getPosition(e))
+        }).show(e.clientX, e.clientY);
+    }
+
     function showControls() {
         clearTimeout(self.controlsTimeout);
         self.$controls.animate({
@@ -323,6 +343,15 @@ Ox.VideoPlayer = function(options, self) {
         }, 250);
     }
 
+    function setPosition(position) {
+        self.options.position = position;
+        //Ox.print(-self.barWidth - 4 + self.barWidth * position / self.duration)
+        self.$positionMarker.css({
+            marginLeft: self.innerBarWidth * position / self.duration + self.markerOffset + 'px',
+        });
+        self.$position.html(Ox.formatDuration(position));
+    }
+
     function showLoadingIcon() {
         self.$loadingIcon.animate({
             opacity: 1