fix a bug where the interface of a block video timeline would be stacked above a dialog

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

@@ -1867,7 +1867,7 @@ Video
     width: 6px;
     height: 6px;
     margin-left: -3px;
-    z-index: 10;
+    z-index: 8;
 }
 .OxLargeVideoTimeline .OxMarkerPointIn {
     position: absolute;
@@ -1875,14 +1875,14 @@ Video
     width: 7px;
     height: 7px;
     margin-left: -6px;
-    z-index: 10;
+    z-index: 8;
 }
 .OxLargeVideoTimeline .OxMarkerPointOut {
     position: absolute;
     top: 63px;
     width: 7px;
     height: 7px;
-    z-index: 10;
+    z-index: 8;
 }
 .OxLargeVideoTimeline .OxMarkerPosition {
     position: absolute;
@@ -1890,7 +1890,7 @@ Video
     width: 11px;
     height: 11px;
     margin-left: -5px;
-    z-index: 10;
+    z-index: 8;
 }
 .OxLargeVideoTimeline .OxSubtitle {
     position: absolute;
@@ -1906,7 +1906,7 @@ Video
     color: rgb(255, 255, 255);
     cursor: default;
     overflow: hidden;
-    z-index: 10;
+    z-index: 8;
     -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
     -o-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
@@ -1932,6 +1932,11 @@ Video
     margin-top: 1px;
 }
 
+.OxSmallVideoTimeline .OxInterface,
+.OxBlockVideoTimeline .OxInterface {
+    position: absolute;
+    z-index: 9;
+}
 .OxSmallVideoTimeline .OxMarkerPlay {
     position: absolute;
     width: 14px;
@@ -1960,7 +1965,7 @@ Video
     width: 7px;
     height: 7px;
     margin-left: -2px;
-    z-index: 10;
+    z-index: 8;
 }
 .OxSmallVideoTimeline .OxMarkerPointIn {
     top: 15px;
@@ -1971,7 +1976,7 @@ Video
     width: 7px;
     height: 7px;
     margin-left: 4px;
-    z-index: 10;
+    z-index: 8;
 }
 .OxSmallVideoTimeline .OxMarkerPointOut {
     top: 15px;
@@ -1981,7 +1986,7 @@ Video
     position: absolute;
     width: 11px;
     height: 11px;
-    z-index: 10;
+    z-index: 8;
 }
 .OxSmallVideoTimeline .OxMarkerPosition {
     top: 2px;

source/Ox.UI/js/Form/Ox.Input.js

@@ -95,14 +95,20 @@ Ox.Input = function(options, self) {
                 value: '',
                 width: 128
             })
-            .options(options)
+            .options(options || {})
             .addClass(
                 'OxInput OxMedium Ox' + Ox.toTitleCase(self.options.style) /*+ (
                     self.options.overlap != 'none' ?
                     ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : ''
                 )*/
             )
-            .css({width: self.options.width + 'px'})
+            .css(
+                Ox.extend({
+                    width: self.options.width + 'px'
+                }, self.options.type == 'textarea' ? {
+                    height: self.options.height + 'px'
+                } : {})
+            )
             .bindEvent(Ox.extend(self.options.type == 'textarea' ? {
                 key_shift_enter: submit
             } : {
@@ -113,10 +119,10 @@ Ox.Input = function(options, self) {
             }));
 
     if (
-        Ox.isArray(self.options.autocomplete) &&
-        self.options.autocompleteReplace &&
-        self.options.autocompleteReplaceCorrect &&
-        self.options.value === ''
+        Ox.isArray(self.options.autocomplete)
+        && self.options.autocompleteReplace
+        && self.options.autocompleteReplaceCorrect
+        && self.options.value === ''
     ) {
         self.options.value = self.options.autocomplete[0]
     }
@@ -211,18 +217,24 @@ Ox.Input = function(options, self) {
             disabled: self.options.disabled,
             type: self.options.type == 'password' ? 'password' : 'text'
         })
-        .css(Ox.extend({
-            width: self.inputWidth + 'px',
-            textAlign: self.options.textAlign
-        }, self.options.type == 'textarea' ? {
-            height: self.options.height + 'px',
-        } : {}))
+        .css(
+            Ox.extend({
+                width: self.inputWidth + 'px',
+                textAlign: self.options.textAlign
+            }, self.options.type == 'textarea' ? {
+                height: self.options.height + 'px',
+            } : {})
+        )
         .val(self.options.value)
         .blur(blur)
         .change(change)
         .focus(focus)
         .appendTo(that.$element);
 
+    if (self.options.type == 'textarea') {
+        Ox.print('TEXTAREA', self.options.width, self.options.height, '...', that.css('width'), that.css('height'), '...', self.$input.css('width'), self.$input.css('height'))
+    }
+
     // fixme: is there a better way than this one?
     // should at least go into ox.ui.theme.foo.js
     // probably better: divs in the background

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

@@ -44,12 +44,10 @@ Ox.SmallVideoTimeline = function(options, self) {
         })
         .addClass('OxInterface')
         .css({
-            position: 'absolute',
             left: self.interfaceLeft + 'px',
             top: self.interfaceTop + 'px',
             width: self.interfaceWidth + 'px',
             height: '20px',
-            zIndex: 11
         })
         .bind({
             mousedown: mousedown