smaller fixes (tooltip corner cases, block timeline)

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

@@ -1738,7 +1738,7 @@ Miscellaneous
     padding: 1px 2px 1px 2px;
     font-size: 9px;
     //opacity: 0;
-    z-index: 12;
+    z-index: 1001;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
 }

source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js

@@ -31,6 +31,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
     self.height = self.options.type == 'player' ? 16 : 24;
     self.imageHeight = self.options.type == 'player' ? 16 : 18;
     self.imageTop = self.options.type == 'player' ? 0 : 3;
+    self.timelineTop = self.options.type == 'player' ? 0 : 4;
 
     that.css({
         height: self.height + 'px'
@@ -43,9 +44,9 @@ Ox.SmallVideoTimelineImage = function(options, self) {
             })
             .css({
                 position: 'absolute',
-                top: self.imageTop + 'px',
+                top: self.timelineTop + 'px',
                 width: self.options.width + 'px',
-                height: self.imageHeight + 'px',
+                height: '16px'
             })
             .appendTo(that.$element);
     } else {
@@ -57,9 +58,9 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                 .css({
                     position: 'absolute',
                     left: (i * 3600) + 'px',
-                    top: self.imageTop + 'px',
+                    top: self.timelineTop + 'px',
                     width: (i == self.images - 1 ? self.imageWidth % 3600 : 3600) + 'px',
-                    height: self.imageHeight + 'px',
+                    height: '16px'
                 })
                 .appendTo(that.$element);
         });

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

@@ -635,8 +635,13 @@ Ox.VideoPlayer = function(options, self) {
                         .bind({
                             click: function() {
                                 if (!self.options.paused) {
-                                    self.wasPlaying = true;
+                                    self.playOnSubmit = true;
                                     togglePaused(true);
+                                } else if (self.playOnLoad) {
+                                    // if clicked during resolution switch,
+                                    // don't play on load
+                                    self.playOnLoad = false;
+                                    self.playOnSubmit = true;
                                 }
                                 self.$position.hide();
                                 self.$positionInput
@@ -758,7 +763,7 @@ Ox.VideoPlayer = function(options, self) {
                                 },
                                 mouseleave: function() {
                                     $(this).css({
-                                        background: 'rgba(64, 64, 64, 0.25)'
+                                        background: 'rgba(32, 32, 32, 0.5)'
                                     });
                                 }
                             })
@@ -1713,10 +1718,10 @@ Ox.VideoPlayer = function(options, self) {
         self.$positionInput.hide();
         self.$position.html('').show();
         setPosition(parsePositionInput(self.$positionInput.options('value')), true);
-        if (self.wasPlaying) {
+        if (self.playOnSubmit) {
             togglePaused(true);
             self.video.play();
-            self.wasPlaying = false;
+            self.playOnSubmit = false;
         }
         if (self.focus == 'mouseenter' && !self.mouseHasLeft) {
             that.gainFocus();
@@ -1732,12 +1737,12 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function toggleFullscreen(toggleButton) {
-        var parentOffset, wasPlaying;
+        var parentOffset, playOnFullscreen;
         self.options.fullscreen = !self.options.fullscreen;
         if (!self.options.paused) {
             // video won't keep playing accross detach/append
             self.video.pause();
-            wasPlaying = true;
+            playOnFullscreen = true;
         }
         if (self.options.fullscreen) {
             self.$parent = that.parent();
@@ -1755,7 +1760,7 @@ Ox.VideoPlayer = function(options, self) {
                 })
                 .appendTo(Ox.UI.$body);
             setSizes(function() {
-                wasPlaying && self.video.play();
+                playOnFullscreen && self.video.play();
                 that.bind({
                     mousemove: function() {
                         if (!self.mouseIsInControls) {
@@ -1793,7 +1798,7 @@ Ox.VideoPlayer = function(options, self) {
                         zIndex: 1
                     })
                     .appendTo(self.$parent);
-                wasPlaying && self.video.play();
+                playOnFullscreen && self.video.play();
                 self.options.enableKeyboard && that.gainFocus();
                 //showInterface();
             });

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

@@ -55,8 +55,8 @@ Ox.Tooltip = function(options, self) {
         that.appendTo(Ox.UI.$body);
         width = that.width();
         height = that.height();
-        left = Ox.limit(x - width / 2, 0, Ox.UI.$document.width() - width);
-        top = y > Ox.UI.$document.height() - height - 16 ? y - 32 : y + 16;
+        left = Ox.limit(x - width / 2, 0, window.innerWidth - width);
+        top = y > window.innerHeight - height - 16 ? y - 16 - height : y + 16;
         that.css({
             left: left + 'px',
             top: top + 'px'