fix and optimize video preview

source/Ox.UI/css/Ox.UI.css

@@ -776,7 +776,7 @@ div.OxInput > input.OxInput {
 }
 /*
 --------------------------------------------------------------------------------
-OxEditable
+OxEditableElement
 --------------------------------------------------------------------------------
 */
 

source/Ox.UI/js/Calendar/Ox.Calendar.js

@@ -419,10 +419,10 @@ Ox.Calendar = function(options, self) {
             .css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
             .bindEvent({
                 singleclick: function() {
-                    // ...
+                    // ... FIXME: implement
                 },
                 doubleclick: function() {
-                    // ...
+                    // ... FIXME: implement
                 }
             })
             .appendTo(that),
@@ -437,7 +437,7 @@ Ox.Calendar = function(options, self) {
                     scrollBy(1);
                 },
                 doubleclick: function() {
-                    scrollTo(1000000, true)
+                    scrollTo(1000000, true);
                 }
             })
             .appendTo(that),

source/Ox.UI/js/Video/Ox.VideoPreview.js

@@ -44,10 +44,15 @@ Ox.VideoPreview = function(options, self) {
 
     self.$interface = Ox.Element({
             tooltip: function(event) {
-                //event.offsetX does not work in Firefox
+                // e.offsetX does not work in Firefox
-                // fixme: use layerX then
                 var position = getPosition(event.clientX - that.offset().left);
-                self.$frame.attr({src: self.options.getFrame(position)});
+                self.$frame.attr({src: getClosestFrame(position)});
+                Ox.print('closest frame:', self.$frame.attr('src'));
+                self.timeout && clearTimeout(self.timeout);
+                self.timeout = setTimeout(function() {
+                    self.$frame.attr({src: self.options.getFrame(position)});
+                    Ox.print('exact frame:', self.$frame.attr('src'));
+                }, 250);
                 return Ox.formatDuration(position, 2);
             }        
         })
@@ -69,6 +74,14 @@ Ox.VideoPreview = function(options, self) {
         });
     }
 
+    function getClosestFrame(position) {
+        return self.loaded.length == 0
+            ? self.options.getFrame(self.options.position)
+            : self.loaded.sort(function(a, b) {
+                return Math.abs(a.position - position) - Math.abs(b.position - position);
+            })[0].frame;
+    }
+
     function getFrameCSS() {
         var css = {},
             elementWidth = self.options.width,
@@ -106,23 +119,25 @@ Ox.VideoPreview = function(options, self) {
         }
         steps.forEach(function(step) {
             Ox.loop(0, self.options.width, step, function(x) {
-                var frame = self.options.getFrame(getPosition(x));
+                var position = getPosition(x),
+                    frame = self.options.getFrame(position);
                 if (
-                    self.loaded.indexOf(frame) == -1
+                    !Ox.getObject(self.loaded, 'frame', frame)
-                    && self.queue.indexOf(frame) == -1
+                    && !Ox.getObject(self.queue, 'frame', frame)
                 ) {
-                    self.queue.push(frame);
+                    self.queue.push({frame: frame, position: position});
                 }
             });
         });
-        loadFrame();
+        self.queue.length && loadFrame();
         function loadFrame() {
+            var image = self.queue.shift();
             $('<img>')
                 .load(function() {
-                    self.loaded.push(self.queue.shift());
+                    self.loaded.push(image);
                     self.queue.length && loadFrame();
                 })
-                .attr({src: self.queue[0]});
+                .attr({src: image.frame})
         }
     }