add tooltip option to Ox.Element

source/Ox.UI/js/Core/Ox.Element.js

@@ -9,7 +9,9 @@ Ox.Element <function:Ox.JQueryElement> Basic UI element object
     options <object> the options of the element
         # Properties
         element <string> tagname or CSS selector
-        tooltip <object> tooltip (not implemented)
+        tooltip <string|function> tooltip title or function that returns one
+            (e) -> <string> tooltip title
+            e <object> mouse event
     options <string> tagname or CSS selector
     self    <object> shared private variable
     # Events -------------------------------------------------------------------
@@ -48,13 +50,6 @@ Ox.Element <function:Ox.JQueryElement> Basic UI element object
 
 Ox.Element = function() {
 
-    /*
-    tooltip option can be any of the following:
-        string
-        function(e), returns string
-        {mousemove: true, title: function(e)}
-    */
-
     return function(options, self) {
 
         /*
@@ -87,14 +82,26 @@ Ox.Element = function() {
             )
             .mousedown(mousedown);
 
-        /*
+        if (self.options.tooltip) {
-        self.options.tooltip && that.bind(Ox.extend({
+            if (Ox.isString(self.options.tooltip)) {
-            mouseenter: mouseenter,
+                that.$tooltip = Ox.Tooltip({
-            mouseleave: mouseleave
+                    title: self.options.tooltip,
-        }, self.options.tooltip.mousemove ? {
+                });
-            mousemove: mousemove
+                that.bind({
-        } : {}));
+                    mouseenter: mouseenter
-        */
+                });
+            } else {
+                that.$tooltip = Ox.Tooltip({
+                    animate: false
+                });
+                that.bind({
+                    mousemove: mousemove
+                });
+            }
+            that.bind({
+                mouseleave: mouseleave
+            });
+        }
 
         function bind(action, event, fn) {
             self.$eventHandler[action]('ox_' + event, function(event, data) {
@@ -186,25 +193,20 @@ Ox.Element = function() {
             }
         }
 
-        /*
         function mouseenter(e) {
-            self.$tooltip = new Ox.Tooltip({
+            that.$tooltip.show(e);
-                title: Ox.isString(self.options.tooltip) ?
-                    self.options.tooltip : Ox.isFunction(self.options.tooltip) ?
-                    self.options.tooltip(e) : self.options.tooltip.title(e)
-            }).show();
         }
 
         function mouseleave(e) {
-            self.$tooltip.hide();
+            that.$tooltip.hide();
         }
 
         function mousemove(e) {
-            self.$tooltip.options({
+            Ox.print('mousemove!!')
-                title: self.options.tooltip.title(e)
+            that.$tooltip.options({
-            });
+                title: self.options.tooltip(e)
+            }).show(e);
         }
-        */
 
         self.setOption = function() {
             // self.setOptions(key, value)

source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js

@@ -39,7 +39,9 @@ Ox.SmallVideoTimeline = function(options, self) {
 
     self.$image = getTimelineImage().appendTo(that);
 
-    self.$interface = Ox.Element()
+    self.$interface = Ox.Element({
+            tooltip: getTooltip
+        })
         .addClass('OxInterface')
         .css({
             position: 'absolute',
@@ -50,9 +52,7 @@ Ox.SmallVideoTimeline = function(options, self) {
             zIndex: 11
         })
         .bind({
-            mousedown: mousedown,
+            mousedown: mousedown
-            mouseleave: mouseleave,
-            mousemove: mousemove
         })
         .bindEvent({
             drag: function(event, e) {
@@ -65,6 +65,10 @@ Ox.SmallVideoTimeline = function(options, self) {
         })
         .appendTo(that);
 
+    self.$interface.$tooltip.css({
+        textAlign: 'center'
+    });
+
     if (self.options.type == 'player') {
         self.$positionMarker = $('<div>')
             .css({
@@ -131,12 +135,6 @@ Ox.SmallVideoTimeline = function(options, self) {
         });
     }
 
-    self.$tooltip = Ox.Tooltip({
-        animate: false
-    }).css({
-        textAlign: 'center'
-    });
-
     function getPosition(e) {
         var position = 
             (
@@ -176,6 +174,17 @@ Ox.SmallVideoTimeline = function(options, self) {
         });
     }
 
+    function getTooltip(e) {
+        var position = getPosition(e),
+            subtitle = getSubtitle(position);
+        return subtitle ? '<span class=\'OxBright\'>' + Ox.highlight(
+                subtitle.text, self.options.find, 'OxHighlight'
+            ).replace(/\n/g, '<br/>') + '</span><br/>' +
+            Ox.formatDuration(subtitle['in'], self.options.showMilliseconds) + ' - ' +
+            Ox.formatDuration(subtitle['out'], self.options.showMilliseconds) :
+            Ox.formatDuration(position, self.options.showMilliseconds);
+    }
+
     function mousedown(e) {
         if ($(e.target).is('.OxInterface')) {
             self.options.position = getPosition(e);
@@ -192,31 +201,6 @@ Ox.SmallVideoTimeline = function(options, self) {
         }
     }
 
-    function mouseleave() {
-        self.$tooltip.hide();
-    }
-
-    function mousemove(e) {
-        var position, subtitle;
-        if ($(e.target).is('.OxInterface')) {
-            position = getPosition(e);
-            subtitle = getSubtitle(position);
-            self.$tooltip.options({
-                    title: subtitle ?
-                        '<span class=\'OxBright\'>' +
-                        Ox.highlight(subtitle.text, self.options.find, 'OxHighlight').replace(/\n/g, '<br/>') +
-                        '</span><br/>' +
-                        Ox.formatDuration(subtitle['in'], self.options.showMilliseconds) + ' - ' +
-                        Ox.formatDuration(subtitle['out'], self.options.showMilliseconds) :
-                        Ox.formatDuration(position, self.options.showMilliseconds)
-                })
-                .show(e.clientX, e.clientY);
-            
-        } else {
-            self.$tooltip.hide();
-        }
-    }
-
     function setPointMarker(point) {
         self.$pointMarker[point].css({
             left: self.imageLeft + Math.round(

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

@@ -144,8 +144,7 @@ Ox.VideoPlayer = function(options, self) {
     self.out = self.options.playInToOut ? self.options.out : self.options.duration;
     self.options.duration = self.out - self['in'];
     self.options.position = Ox.limit(self.options.position, self['in'], self.out);
-    Ox.print('p/d', self.options.position, self.options.duration);
+
-    // fixme: this is _relative_, resizing can happen
     self.millisecondsPerFrame = 1000 / self.options.fps;
     self.secondsPerFrame = 1 / self.options.fps;
     self.barHeight = 16;
@@ -688,7 +687,9 @@ Ox.VideoPlayer = function(options, self) {
 
                 } else if (control == 'resolution') {
 
-                    self.$resolutionButton = $('<div>')
+                    self.$resolutionButton = Ox.Element({
+                            tooltip: 'Resolution'
+                        })
                         .css({
                             float: 'left',
                             width: '32px',
@@ -705,7 +706,7 @@ Ox.VideoPlayer = function(options, self) {
                                 self.$resolution.toggle();
                             }
                         })
-                        .appendTo(self['$controls' + titlecase].$element);
+                        .appendTo(self['$controls' + titlecase]);
 
                     self.$resolution = $('<div>')
                         .css({

source/Ox.UI/js/Window/Ox.Tooltip.js

@@ -45,6 +45,7 @@ Ox.Tooltip = function(options, self) {
     };
 
     // can pass event instead of x/y
+    // fixme: use this in widgets
     that.show = function(x, y) {
         var left, top, width, height;
         if (arguments.length == 1) {