diff --git a/demos/video/js/video.js b/demos/video/js/video.js
index e266560d..54e1bc44 100644
--- a/demos/video/js/video.js
+++ b/demos/video/js/video.js
@@ -2,37 +2,154 @@ Ox.load('UI', {
     debug: true,
     theme: 'modern'
 }, function() {
-    var id = '0393109';
-    var url = 'http://next.0xdb.org/' + id + '/96p.webm?' + Ox.random(1000000);
-    var timeline = 'http://next.0xdb.org/' + id + '/timeline.16.png';
-    Ox.UI.$body.css({
-        padding: '16px'
-    });
-    Ox.VideoPlayer({
-        controls: ['play', 'mute', 'size', 'scale', 'timeline', 'position'],
-        height: 96 * 384/180,//96 * 256/180,
-        logoLink: 'http://next.0xdb.org/' + id,
-        logoTitle: 'Watch on 0xdb',
-        logo: 'png/logo.png',
-        paused: true,
-        scaleToFill: true,
-        subtitles: 'srt/' + id + '.srt',
-        timeline: timeline,
-        title: '<b>Brick</b> - Rian Johnson - 2005',
-        video: url,
-        width: 500//384//256
+    var id = '0393109',
+        poster = 'http://next.0xdb.org/' + id + '/poster.jpg',
+        timeline = 'http://next.0xdb.org/' + id + '/timeline.16.png',
+        url = 'http://next.0xdb.org/' + id + '/96p.webm',
+        videoSize = getVideoSize(),
+        $videos = [
+            Ox.VideoPlayer({
+                    controls: ['play', 'mute', 'scale', 'timeline', 'position'],
+                    enableKeyboard: true,
+                    focus: 'mouseenter',
+                    height: 192,
+                    logoLink: 'http://next.0xdb.org/' + id,
+                    logoTitle: 'Watch on 0xdb',
+                    logo: 'png/logo.png',
+                    paused: true,
+                    poster: poster,
+                    showIconOnLoad: true,
+                    showProgress: false,
+                    subtitles: 'srt/' + id + '.srt',
+                    timeline: timeline,
+                    title: '<b>Brick</b> - Rian Johnson - 2005',
+                    video: url + '?' +  + Ox.random(1000000),
+                    width: 360
+                })
+                .css({
+                    margin: '16px'
+                }),        
+            Ox.VideoPlayer({
+                    height: 192,
+                    'in': 3128.725, 
+                    //keepIconVisible: true,
+                    out: 3130.725,
+                    paused: true,
+                    playInToOut: true,
+                    //preload: 'none',
+                    showIcon: true,
+                    showIconOnLoad: true,
+                    timeline: timeline,
+                    video: url + '?' +  + Ox.random(1000000),
+                    width: 360
+                })
+                .css({
+                    margin: '16px'
+                }),
+            Ox.VideoPlayer({
+                    controls: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'],
+                    externalControls: true,
+                    height: videoSize.height,
+                    'in': 3128.725, 
+                    out: 3130.725,
+                    paused: true,
+                    showMilliseconds: 2,
+                    subtitles: 'srt/' + id + '.srt',
+                    timeline: timeline,
+                    video: url + '?' +  + Ox.random(1000000),
+                    width: videoSize.width
+                })
+                .css({
+                    margin: '16px'
+                })
+        ];
+    window.$videos = $videos
+    Ox.SplitPanel({
+        elements: [
+            {
+                element: Ox.SplitPanel({
+                        elements: [
+                            {
+                                element: Ox.Element()
+                                    .append($videos[0])
+                                    .bindEvent({
+                                        resize: function(foo, size) {
+                                            $videos[0].options({height: size - 32});
+                                        }
+                                    }),
+                                size: 224,
+                                resizable: true,
+                                resize: [100, 400]
+                            },
+                            {
+                                element: Ox.Element()
+                            }
+                        ],
+                        orientation: 'vertical'
+                    })
+                    .bindEvent({
+                        resize: function(foo, size) {
+                            $videos[0].options({width: size - 32});
+                        }
+                    }),
+                size: 392,
+                resizable: true,
+                resize: [200, 600]
+            },
+            {
+                element: Ox.Element()
+                    .append($videos[1])
+                    .bindEvent({
+                        resize: resizeVideo
+                    })
+            },
+            {
+                element: Ox.SplitPanel({
+                        elements: [
+                            {
+                                element: Ox.Element()
+                                    .append($videos[2])
+                                    .bindEvent({
+                                        resize: function(foo, size) {
+                                            $videos[2].options({height: size - 48});
+                                        }
+                                    }),
+                                size: 240,
+                                resizable: true,
+                                resize: [100, 400]
+                            },
+                            {
+                                element: Ox.Element()
+                            }
+                        ],
+                        orientation: 'vertical'
+                    })
+                    .bindEvent({
+                        resize: function(foo, size) {
+                            $videos[2].options({width: size - 32});
+                        }
+                    }),
+                size: 392,
+                resizable: true,
+                resize: [200, 600]
+            }
+        ],
+        orientation: 'horizontal'
     }).appendTo(Ox.UI.$body);
-    /*
-    var id = '0133093';
-    var url = 'http://next.0xdb.org/' + id + '/96p.webm?' + Ox.random(1000000);
-    var timeline = 'http://next.0xdb.org/' + id + '/timeline.16.png';
-    Ox.VideoPlayer({
-        height: 96 * 256/230,
-        timeline: timeline,
-        url: url,
-        width: 256
-    }).css({
-        left: '300px'
-    }).appendTo(Ox.UI.$body);
-    */
+
+    function getVideoSize() {
+        var size = {},
+            widths = $videos ? $videos[0].options('width') + $videos[2].options('width') : 720
+        size.width = window.innerWidth - widths - 98;
+        size.height = Math.round(size.width / 180 * 96);
+        return size;
+    }
+    function resizeVideo() {
+        var size = getVideoSize();
+        $videos[1].options({
+            width: size.width,
+            height: size.height
+        });
+    }
+
 });
diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css
index fa080f0c..9182d11c 100644
--- a/source/Ox.UI/css/Ox.UI.css
+++ b/source/Ox.UI/css/Ox.UI.css
@@ -1647,7 +1647,6 @@ Video
     margin-left: 4px;
 }
 
-
 .OxVideoPlayer > .OxBar .OxInputGroup {
     //width: 98px;
 }
diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
index 15d9ff92..b99b732f 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
@@ -35,14 +35,15 @@ Ox.VideoPlayer <f> Generic Video Player
         preload <s|'auto'> 'auto', 'metadata' or 'none'
         out <n|-1> Out point (sec)
         scaleToFill <b|false> If true, scale to fill (otherwise, scale to fit)
-        showControlsOnLoad <b|false> If true, show controls on load
         showFind <b|false> If true, show find input
         showHours <b|false> If true, don't show hours for videos shorter than one hour
         showIcon <b|false> If true, show play icon
         showIconOnLoad <b|false> If true, show icon on load
+        showInterfaceOnLoad <b|false> If true, show controls and title on load
         showLargeTimeline <b|false> If true, show large timeline
-        showMilliseconds <b|false> If true, show milliseconds
+        showMilliseconds <n|0> Number of decimals to show
         showPointMarkers <b|false> If true, show in/out markers
+        showProgress <|false> If true, show buffering progress
         sizeIsLarge <b|false> If true, initial state of the size control is large
         subtitles <s|[o]|[]> URL or SRT or array of subtitles
             in <n> In point (sec)
@@ -63,13 +64,13 @@ Ox.VideoPlayer = function(options, self) {
         .defaults({
             annotations: [],
             controls: [],
-            duration: -1,
+            duration: 86399,
             enableKeyboard: false,
             externalControls: false,
             focus: 'click',
             fps: 25,
             height: 144,
-            'in': -1,
+            'in': 0,
             keepIconVisible: false,
             keepLargeTimelineVisible: false,
             keepLogoVisible: false,
@@ -82,16 +83,17 @@ Ox.VideoPlayer = function(options, self) {
             position: 0,
             poster: '',
             preload: 'auto',
-            out: -1,
+            out: 0,
             scaleToFill: false,
-            showControlsOnLoad: false,
             showFind: false,
             showHours: false,
             showIcon: false,
             showIconOnLoad: false,
+            showInterfaceOnLoad: false,
             showLargeTimeline: false,
-            showMilliseconds: false,
+            showMilliseconds: 0,
             showPointMarkers: false,
+            showProgress: false,
             subtitles: [],
             timeline: '',
             title: '',
@@ -101,11 +103,50 @@ Ox.VideoPlayer = function(options, self) {
             width: 256
         })
         .options(options || {})
+        .addClass('OxVideo')
         .css({
             position: 'absolute'
         });
 
-    if (self.options.controls.length || self.options.showIcon || self.options.title) {
+    self['in'] = self.options.playInToOut ? self.options['in'] : 0,
+    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;
+
+    if (self.options.enableKeyboard) {
+        that.bindEvent({
+            key_left: function() {
+                setPosition(self.options.position + self.secondsPerFrame);
+            },
+            key_right: function() {
+                setPosition(self.options.position - self.secondsPerFrame);
+            },
+            key_space: function() {
+                self.$playButton && self.$playButton.toggleTitle();
+                togglePaused();
+            }
+        })
+    }
+
+    if (self.options.enableKeyboard) {
+        if (self.options.focus == 'mouseenter') {
+            that.bind({
+                mouseenter: that.gainFocus,
+                mouseleave: that.loseFocus
+            });
+        } else {
+            that.bind({
+                click: that.gainFocus
+            });
+        }
+    }
+
+    if ((!self.options.externalControls && self.options.controls.length) || self.options.showIcon || self.options.title) {
         that.bind({
             mouseenter: showInterface,
             mouseleave: hideInterface
@@ -123,12 +164,6 @@ Ox.VideoPlayer = function(options, self) {
         }
     }
 
-    // fixme: this is _relative_, resizing can happen
-    self.ratio = self.options.width / self.options.height;
-    self.barHeight = 16;
-    setSize();
-
-    self.millisecondsPerFrame = 1000 / self.options.fps;
 
     self.buffered = [];
     self.controlsTimeout;
@@ -137,10 +172,15 @@ Ox.VideoPlayer = function(options, self) {
     self.$videoContainer = $('<div>')
         .css({
             position: 'absolute',
-            width: self.options.width + 'px',
-            height: self.options.height + 'px',
+            background: 'rgb(0, 0, 0)',
             overflow: 'hidden'
         })
+        .bind({
+            click: function() {
+                togglePaused();
+                self.$playButton && self.$playButton.toggleTitle();
+            }
+        })
         .appendTo(that.$element)
 
     self.$video = $('<video>')
@@ -149,59 +189,46 @@ Ox.VideoPlayer = function(options, self) {
             src: self.options.video
         }, !self.options.paused ? {
             autoplay: 'autoplay'
-        } : {}, self.options.poster ? {
+        } : {}/*, self.options.poster ? {
             poster: self.options.poster
-        } : {}))
+        } : {}*/))
         .css({
             position: 'absolute'
         })
-        .bind({
-            click: togglePaused,
+        .bind(Ox.extend({
             ended: ended,
             loadedmetadata: loadedmetadata,
-            progress: progress,
             seeked: seeked,
             seeking: seeking
-        })
+        }, self.options.progress ? {
+            progress: progress
+        } : {}))
         .appendTo(self.$videoContainer);
     self.video = self.$video[0];
 
-    if (self.options.title) {
-        self.$titlebar = $('<div>')
-            .addClass('OxInterface')
-            .css({
-                position: 'absolute',
-                width: self.options.width + 'px',
-                height: (self.barHeight - 1) + 'px',
-                paddingTop: '1px',
-                textAlign: 'center'
+    if (self.options.poster) {
+        self.$poster = $('<img>')
+            .attr({
+                src: self.options.poster
             })
             .css({
-                backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
+                position: 'absolute'
             })
-            .css({
-                backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
-            })
-            .html(self.options.title)
-            .appendTo(that.$element);
+            .appendTo(self.$videoContainer);
+        self.posterIsVisible = true;
     }
 
     if (self.options.logo) {
-        self.logoHeight = Math.round(self.options.height / 10);
-        self.logoMargin = Math.round(self.options.height / 20);
         self.$logo = $('<img>')
             .attr({
                 src: self.options.logo
             })
             .css({
                 position: 'absolute',
-                left: self.logoMargin + 'px',
-                top: self.logoMargin + 'px',
-                height: self.logoHeight + 'px',
                 cursor: self.options.logoLink ? 'pointer' : 'default',
                 opacity: 0.25,
             })
-            .appendTo(that.$element);
+            .appendTo(self.$videoContainer);
         if (self.options.logoTitle) {
             self.$logoTooltip = Ox.Tooltip({
                 title: self.options.logoTitle
@@ -209,45 +236,33 @@ Ox.VideoPlayer = function(options, self) {
         }
     }
 
-    self.iconSize = Math.min(Math.round(self.options.height / 10), 16);
     self.$loadingIcon = $('<img>')
         .attr({
-            src: Ox.UI.getImagePath('symbolLoadingAnimated.svg').replace('/classic/', '/modern/')
+            src: Ox.UI.getImagePath('symbolLoadingAnimated.svg')
+                .replace('/classic/', '/modern/')
         })
         .css({
-            position: 'absolute',
-            left: parseInt((self.options.width - self.iconSize) / 2) + 'px',
-            top: parseInt((self.options.height - self.iconSize) / 2) + 'px',
-            width: self.iconSize + 'px',
-            height: self.iconSize + 'px'
+            position: 'absolute'
         })
-        .appendTo(that.$element);
+        .appendTo(self.$videoContainer);
 
-    if (self.options.showIcon) {
-        self.$playIcon = $('<div>')
-            .addClass('OxInterface')
+    if (self.options.showIcon || self.options.showIconOnLoad) {
+        self.$playIcon = $('<img>')
+            .attr({
+                src: Ox.UI.getImagePath(
+                    'symbol' + (self.options.paused ? 'Play' : 'Pause') + '.svg'
+                ).replace('/classic/', '/modern/')
+            })
             .css({
                 position: 'absolute',
-                left: parseInt(self.options.width / 2) - 16 + 'px',
-                top: parseInt(self.options.height / 2) - 16 + 'px',
-                width: '28px',
-                height: '28px',
                 border: '2px solid rgb(255, 255, 255)',
-                borderRadius: '16px',
+                background: 'rgba(0, 0, 0, 0.5)',
                 opacity: 0
             })
-            .append(
-                self.$playIconImage = $('<img>')
-                    .attr({
-                        src: Ox.UI.getImagePath('symbolPlay.svg').replace('/classic/', '/modern/')
-                    })
-                    .css({
-                        width: '20px',
-                        height: '20px',
-                        margin: '4px'
-                    })
-            )
-            .appendTo(that.$element);
+            .appendTo(self.$videoContainer);
+        if (self.options.showIconOnLoad) {
+            self.iconIsVisible = true;
+        }
     }
 
     if (self.options.subtitles.length) {
@@ -261,19 +276,20 @@ Ox.VideoPlayer = function(options, self) {
                 textShadow: 'rgba(0, 0, 0, 1) 0 0 4px',
                 color: 'rgb(255, 255, 255)'
             })
-            .appendTo(that.$element);
-        setSubtitleSize();
+            .appendTo(self.$videoContainer);
     }
 
-    if (self.options.controls.length) {
-
-        self.$controls = $('<div>')
+    if (self.options.title) {
+        self.$titlebar = $('<div>')
             .addClass('OxInterface')
             .css({
                 position: 'absolute',
-                bottom: 0,
                 width: self.options.width + 'px',
-                height: self.barHeight + 'px'
+                height: (self.barHeight - 1) + 'px',
+                paddingTop: '1px',
+                textAlign: 'center',
+                color: 'rgb(255, 255, 255)',
+                opacity: 0
             })
             .css({
                 backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
@@ -281,19 +297,33 @@ Ox.VideoPlayer = function(options, self) {
             .css({
                 backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
             })
+            .html(self.options.title)
+            .appendTo(that.$element);
+    }
+
+    if (self.options.controls.length) {
+
+        self.$controls = Ox.Bar({
+                size: self.barHeight
+            })
+            .addClass('OxInterface')
+            .css({
+                position: 'absolute',
+                bottom: 0,
+                opacity: self.options.externalControls ? 1 : 0
+            })
             .appendTo(that.$element);
 
-        self.$control = {};
+        if (!self.options.externalControls) {
+            self.$controls.css({
+                backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
+            })
+            .css({
+                backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
+            });
+        }
 
-        self.positionWidth = 48 + (self.options.showMilliseconds ? 16 : 0);
-        self.outerTrackWidth = self.options.width - self.options.controls.reduce(function(prev, curr) {
-            return prev + (
-                curr == 'timeline' || curr == 'space' ? 0 :
-                curr == 'position' ? self.positionWidth : 16
-            );
-        }, 0);
-        self.innerTrackWidth = self.outerTrackWidth - self.barHeight;
-        self.markerOffset = -self.innerTrackWidth - 8;
+        self.$control = {};
 
         self.options.controls.forEach(function(control) {
 
@@ -330,8 +360,8 @@ Ox.VideoPlayer = function(options, self) {
                 self.$muteButton = Ox.Button({
                     style: 'symbol',
                     title: [
-                        {id: 'mute', title: 'mute', selected: self.options.muted},
-                        {id: 'unmute', title: 'unmute', selected: !self.options.muted}
+                        {id: 'mute', title: 'mute', selected: !self.options.muted},
+                        {id: 'unmute', title: 'unmute', selected: self.options.muted}
                     ],
                     tooltip: ['Mute', 'Unmute'],
                     type: 'image'
@@ -362,8 +392,8 @@ Ox.VideoPlayer = function(options, self) {
                 self.$scaleButton = Ox.Button({
                     style: 'symbol',
                     title: [
-                        {id: 'fill', title: 'fill', selected: self.options.scaleToFill},
-                        {id: 'fit', title: 'fit', selected: !self.options.scaleToFill}
+                        {id: 'fill', title: 'fill', selected: !self.options.scaleToFill},
+                        {id: 'fit', title: 'fit', selected: self.options.scaleToFill}
                     ],
                     tooltip: ['Scale to Fill', 'Scale to Fit'],
                     type: 'image'
@@ -374,56 +404,56 @@ Ox.VideoPlayer = function(options, self) {
 
             } else if (control == 'timeline') {
 
-                self.$outerTrack = Ox.Element()
+                self.$timeline = Ox.Element()
+                    .addClass('timeline')
                     .css({
                         float: 'left',
-                        width: self.outerTrackWidth + 'px',
                         height: self.barHeight + 'px',
                         background: 'rgba(0, 0, 0, 0.75)',
                         borderRadius: self.barHeight / 2 + 'px'
                     })
                     .appendTo(self.$controls);
 
-                self.$innerTrack = Ox.Element()
+                self.$timelineImages = Ox.Element()
+                    .addClass('timelineimages')
                     .css({
                         float: 'left',
-                        width: self.innerTrackWidth + 'px',
                         height: self.barHeight + 'px',
                         marginLeft: self.barHeight / 2 + 'px'
                     })
-                    .appendTo(self.$outerTrack);
+                    .appendTo(self.$timeline);
 
-                self.$timeline = $('<img>')
+                self.$timelineImage = $('<img>')
+                    .addClass('timelineimage')
                     .attr({
                         src: self.options.timeline
                     })
                     .css({
                         float: 'left',
-                        width: self.innerTrackWidth + 'px',
                         height: self.barHeight + 'px'
                     })
-                    .appendTo(self.$innerTrack.$element);
+                    .appendTo(self.$timelineImages.$element);
 
-                /*
-                self.$buffered = $('<img>')
-                    .attr({
-                        src: getBufferedImageURL()
-                    })
-                    .css({
-                        float: 'left',
-                        marginLeft: -self.innerTrackWidth + 'px',
-                        width: self.innerTrackWidth + 'px',
-                        height: self.barHeight + 'px',
-                    })
-                    .appendTo(self.$innerTrack.$element);
-                */
+                ///*
+                if (self.options.showProgress) {
+                    self.$progress = $('<img>')
+                        .attr({
+                            src: getProgressImageURL()
+                        })
+                        .css({
+                            float: 'left',
+                            height: self.barHeight + 'px',
+                        })
+                        .appendTo(self.$timelineImages.$element);
+                }
+                //*/
 
                 self.$positionMarker = $('<div>')
+                    .addClass('positionmarker')
                     .css({
                         float: 'left',
                         width: '14px',
                         height: '14px',
-                        marginLeft: self.markerOffset + 'px',
                         border: '1px solid rgba(0, 0, 0, 0.5)',
                         borderRadius: '8px'
                     })
@@ -445,14 +475,12 @@ Ox.VideoPlayer = function(options, self) {
                                     })
                             )
                     )
-                    .appendTo(self.$outerTrack.$element);
+                    .appendTo(self.$timeline.$element);
 
-                self.$trackInterface = Ox.Element()
+                self.$timelineInterface = Ox.Element()
                     .css({
                         float: 'left',
-                        width: self.outerTrackWidth + 'px',
                         height: self.barHeight + 'px',
-                        marginLeft: - self.outerTrackWidth + 'px'
                     })
                     .appendTo(self.$controls);
 
@@ -461,42 +489,51 @@ Ox.VideoPlayer = function(options, self) {
                 });
 
             } else if (control == 'space') {
-                
+
+                self.$space = $('<div>')
+                    .css({float: 'left'})
+                    .html('&nbsp;') // fixme: ??
+                    .appendTo(self.$controls.$element);
+
             } else if (control == 'position') {
 
+                self.positionWidth = 48 +
+                    !!self.options.showMilliseconds * 2
+                    + self.options.showMilliseconds * 6;
+
                 self.$position = $('<div>')
                     .addClass('foo')
                     .css({
                         float: 'left',
-                        width: '44px',
+                        width: (self.positionWidth - 4) + 'px',
                         height: '12px',
                         padding: '2px',
                         fontSize: '9px',
-                        textAlign: 'center'
+                        textAlign: 'center',
+                        color: 'rgb(255, 255, 255)'
                     })
-                    .html(Ox.formatDuration(self.options.position))
+                    .html(formatPosition)
                     .bind({
                         click: function() {
                             if (!self.options.paused) {
                                 self.wasPlaying = true;
                                 togglePaused();
-                                //togglePlayIcon();
-                                self.$playButton.toggleTitle();
+                                self.$playButton && self.$playButton.toggleTitle();
                             }
                             self.$position.hide();
                             self.$positionInput
                                 .options({
-                                    value: Ox.formatDuration(self.options.position)
+                                    value: formatPosition()
                                 })
                                 .show()
                                 .focusInput(false);
                         }
                     })
-                    .appendTo(self.$controls);
+                    .appendTo(self.$controls.$element);
 
                 self.$positionInput = Ox.Input({
-                        value: Ox.formatDuration(self.options.position),
-                        width: 48
+                        value: formatPosition(),
+                        width: self.positionWidth
                     })
                     .css({
                         float: 'left',
@@ -504,16 +541,22 @@ Ox.VideoPlayer = function(options, self) {
                         MozBoxShadow: '0 0 0',
                         WebkitBoxShadow: '0 0 0'
                     })
+                    .bind({
+                        blur: function() {
+                            self.inputHasFocus = false;
+                        },
+                        focus: function() {
+                            self.inputHasFocus = true;
+                        }
+                    })
                     .bindEvent({
-                        blur: submitPositionInput,
-                        change: submitPositionInput,
-                        //submit: submitPositionInput
+                        blur: submitPositionInput
                     })
                     .hide()
-                    .appendTo(self.$controls);
+                    .appendTo(self.$controls.$element);
 
                 self.$positionInput.children('input').css({
-                        width: '42px',
+                        width: (self.positionWidth - 6) + 'px',
                         height: '16px',
                         padding: '0 3px 0 3px',
                         border: '0px',
@@ -534,8 +577,103 @@ Ox.VideoPlayer = function(options, self) {
 
     }
 
+    setSizes();
+
     function ended() {
-        
+        if (!self.options.paused) {
+            togglePaused();
+            self.$playButton && self.$playButton.toggleTitle();
+        }
+        if (self.options.poster) {
+            self.$poster.animate({
+                opacity: 1
+            }, 250);
+            self.posterIsVisible = true;
+        }
+        if (self.options.showIconOnLoad) {
+            self.$playIcon.animate({
+                opacity: 1
+            }, 250);
+            self.iconIsVisible = true;
+        }
+    }
+
+    function formatPosition(position) {
+        position = Ox.isUndefined(position) ? self.options.position : position;
+        return Ox.formatDuration(position, self.options.showMilliseconds);
+    }
+
+    function getPosition(e) {
+        // fixme: no offsetX in firefox???
+        if ($.browser.mozilla) {
+            //Ox.print(e, e.layerX - 56)
+            return Ox.limit(
+                (e.layerX - 48 - self.barHeight / 2) / self.timelineImageWidth * self.video.duration,
+                0, self.video.duration
+            );
+        } else {
+            /*Ox.print(e.offsetX, Ox.limit(
+                (e.offsetX - self.barHeight / 2) / self.timelineImageWidth * self.video.duration,
+                0, self.video.duration
+            ))*/
+            return Ox.limit(
+                (e.offsetX - self.barHeight / 2) / self.timelineImageWidth * self.video.duration,
+                0, self.video.duration
+            );
+        }
+    } 
+
+    function getPositionMarkerCSS() {
+        var position = self.options.duration ? 
+            (self.options.position - self['in']) / self.options.duration : 0;
+        return {
+            marginLeft: position * self.timelineImageWidth -
+                self.timelineImageWidth - 8 + 'px',
+        };
+    }
+
+    function getProgressImageURL() {
+        Ox.print('---', self.timelineImageWidth)
+        if (!self.timelineImageWidth) return;
+        var width = self.timelineImageWidth,
+            height = self.barHeight,
+            canvas = $('<canvas>')
+                .attr({
+                    width: width,
+                    height: height
+                })[0],
+            context = canvas.getContext('2d'),
+            imageData, data;
+        context.fillStyle = 'rgba(255, 0, 0, 0.5)';
+        context.fillRect(0, 0, width, height);
+        imageData = context.getImageData(0, 0, width, height),
+        data = imageData.data;
+        self.buffered.forEach(function(range) {
+            var left = Math.round(range[0] * width / self.video.duration),
+                right = Math.round(range[1] * width / self.video.duration);
+            Ox.loop(left, right, function(x) {
+                Ox.loop(height, function(y) {
+                    index = x * 4 + y * 4 * width;
+                    data[index + 3] = 0;
+                });
+            });
+        });
+        context.putImageData(imageData, 0, 0);
+        return canvas.toDataURL();
+    }
+
+    function getSubtitle() {
+        var subtitle = '';
+        Ox.forEach(self.options.subtitles, function(v) {
+            if (
+                v['in'] <= self.options.position &&
+                v.out > self.options.position
+            ) {
+                subtitle = v.text;
+                return false;
+            }
+        });
+        return subtitle;
     }
 
     function getVideoCSS() {
@@ -564,75 +702,10 @@ Ox.VideoPlayer = function(options, self) {
         };
     }
 
-    function getBufferedImageURL() {
-        var width = self.innerTrackWidth,
-            height = self.barHeight,
-            $canvas = $('<canvas>')
-                .attr({
-                    width: width,
-                    height: height,
-                }),
-            canvas = $canvas[0],
-            context = canvas.getContext('2d');
-        //Ox.print(width, height)
-        context.fillStyle = 'rgba(255, 0, 0, 0.5)';
-        context.fillRect(0, 0, width, height);
-        var imageData = context.getImageData(0, 0, width, height),
-            data = imageData.data;
-
-        self.buffered.forEach(function(range) {
-            var left = Math.round(range[0] * width / self.video.duration),
-                right = Math.round(range[1] * width / self.video.duration);
-            Ox.loop(left, right, function(x) {
-                Ox.loop(height, function(y) {
-                    index = x * 4 + y * 4 * width;
-                    data[index + 3] = 0;
-                });
-            });
-        });
-        context.putImageData(imageData, 0, 0);
-        return canvas.toDataURL();
-    }
-
-    function getPosition(e) {
-        // fixme: no offsetX in firefox???
-        if ($.browser.mozilla) {
-            //Ox.print(e, e.layerX - 56)
-            return Ox.limit(
-                (e.layerX - 48 - self.barHeight / 2) / self.innerTrackWidth * self.video.duration,
-                0, self.video.duration
-            );
-        } else {
-            /*Ox.print(e.offsetX, Ox.limit(
-                (e.offsetX - self.barHeight / 2) / self.innerTrackWidth * self.video.duration,
-                0, self.video.duration
-            ))*/
-            return Ox.limit(
-                (e.offsetX - self.barHeight / 2) / self.innerTrackWidth * self.video.duration,
-                0, self.video.duration
-            );
-        }
-    } 
-
-    function getSubtitle() {
-        var subtitle = '';
-        Ox.forEach(self.options.subtitles, function(v) {
-            if (
-                v['in'] <= self.options.position &&
-                v.out > self.options.position
-            ) {
-                subtitle = v.text;
-                return false;
-            }
-        });
-        return subtitle;
-    }
-
     function hideInterface() {
-        Ox.print('HIDE')
-        if (!(self.$positionInput && self.$positionInput.hasFocus())) {
+        if (!self.inputHasFocus) {
             self.controlsTimeout = setTimeout(function() {
-                $('.OxInterface').animate({
+                that.find('.OxInterface').animate({
                     opacity: 0
                 }, 250);
                 self.$logo && self.$logo.animate({
@@ -643,25 +716,13 @@ Ox.VideoPlayer = function(options, self) {
                     self.options.logoTitle &&
                         self.$logo.unbind('mouseenter').unbind('mouseleave');
                 });
-                self.$subtitle.animate({
+                self.$subtitle && self.$subtitle.animate({
                     bottom: parseInt(self.options.height / 16) + 'px',
                 });
             }, 1000);
         }
     }
 
-    /*
-    function hideLoadingIcon() {
-        self.$loadingIcon.animate({
-            opacity: 0
-        }, 0, function() {
-            self.$playIcon.animate({
-                opacity: 1
-            }, 250);
-        });
-    }
-    */
-
     function hideLoadingIcon() {
         self.$loadingIcon.hide().attr({
             src: Ox.UI.getImagePath('symbolLoading.svg')
@@ -671,17 +732,28 @@ Ox.VideoPlayer = function(options, self) {
 
     function loadedmetadata() {
 
+        self.loaded = true;
+        self.out = self.options.playInToOut &&
+            self.options.out < self.video.duration ?
+            self.options.out : self.video.duration;
+        self.options.duration = self.out - self['in'];
+        self.video.currentTime = self.options.position;
         self.$video.css(getVideoCSS());
 
         hideLoadingIcon();
-        that.gainFocus().bindEvent({
-            key_space: function() {
-                togglePlayIcon();
-                self.$playButton.toggleTitle();
-                togglePaused();
+        if (self.options.showIcon || self.options.showIconOnLoad) {
+            //!self.options.keepIconVisible && self.$playIcon.addClass('OxInterface');
+            if (self.options.showIconOnLoad) {
+                self.$playIcon.animate({
+                    opacity: 1
+                }, 250);
             }
-        });
-        self.$trackInterface
+        }
+
+        if (self.options.enableKeyboard && self.options.focus == 'load') {
+            that.gainFocus();
+        }
+        self.$timeline && self.$timelineInterface
             .bind({
                 mousedown: mousedownTrack,
                 mouseleave: mouseleaveTrack,
@@ -692,11 +764,6 @@ Ox.VideoPlayer = function(options, self) {
                 dragpause: dragpauseTrack,
                 dragend: dragpauseTrack
             });
-        // fixme: maybe not the right moment
-        if (!self.options.paused) {
-            self.playInterval = setInterval(playing, self.millisecondsPerFrame);
-        }
-        Ox.print('W', self.video.videoWidth)
     }
 
     function dragTrack(e) {
@@ -723,39 +790,50 @@ Ox.VideoPlayer = function(options, self) {
 
     function mousemoveTrack(e) {
         self.$tooltip.options({
-            title: Ox.formatDuration(getPosition(e))
-        }).show(e.clientX, e.clientY);
+            title: formatPosition(getPosition(e))
+        }).show(e);
     }
 
     function parsePositionInput(str) {
-        var position, split = str.split(':').reverse();
+        var split = str.split(':').reverse();
         while (split.length > 3) {
             split.pop();
         }
-        position = split.reduce(function(prev, curr, i) {
+        return split.reduce(function(prev, curr, i) {
             return prev + (parseFloat(curr) || 0) * Math.pow(60, i);
-        }, 0)
-        return Ox.limit(position, 0, self.video.duration);
+        }, 0);
     }
 
     function playing() {
-        var event = 'playing';
-        self.options.position = Math.round(
-            self.video.currentTime * self.options.fps
-        ) / self.options.fps;
+        self.options.position = self.video.currentTime;
         if (
             (self.options.playInToOut || self.playInToOut) &&
             self.options.position >= self.options.out
         )  {
+            ///*
             togglePaused();
             setPosition(self.options.out);
+            //self.video.currentTime = self.options.position;
+            self.$playButton && self.$playButton.toggleTitle();
+            //*/
+            //ended();
+            self.playInToOut = false;
         } else {
             setPosition();
         }
     }
 
+    function playInToOut() {
+        self.playInToOut = true;
+        setPosition(self.options['in']);
+        self.video.currentTime = self.options['in'];
+        if (self.options.paused) {
+            togglePaused();
+            self.$playButton && self.$playButton.toggleTitle();
+        }
+    }
+
     function progress() {
-        return;
         var buffered = self.video.buffered;
         for (var i = 0; i < buffered.length; i++) {
             self.buffered[i] = [buffered.start(i), buffered.end(i)];
@@ -764,9 +842,9 @@ Ox.VideoPlayer = function(options, self) {
                 self.buffered[i][0] = 0;
             }
         }
-        self.$buffered.attr({
-            src: getBufferedImageURL()
-        })
+        self.$progress.attr({
+            src: getProgressImageURL()
+        });
     }
 
     function seeked() {
@@ -777,29 +855,121 @@ Ox.VideoPlayer = function(options, self) {
         showLoadingIcon();
     }
 
-    function setSize() {
-        self.height = self.options.height + (
-            self.options.externalControls
-            ? (!!self.options.controls.length + !!self.options.title) * self.barHeight
-            : 0
-        );
+    function setPosition(position) {
+        if (!Ox.isUndefined(position)) {
+            self.options.position = Ox.limit(position, self['in'], self['out']);
+        }
+        self.options.position = Math.round(
+            self.options.position * self.options.fps
+        ) / self.options.fps;
+        if (self.iconIsVisible) {
+            self.$playIcon.animate({
+                opacity: 0
+            }, 250);
+            self.iconIsVisible = false;
+        }
+        if (self.posterIsVisible) {
+            self.$poster.animate({
+                opacity: 0
+            }, 250);
+            self.posterIsVisible = false;
+        }
+        self.$subtitle && setSubtitle();
+        self.$timeline && self.$positionMarker.css(getPositionMarkerCSS());
+        self.$position && self.$position.html(formatPosition());
+    }
+
+    function setSizes() {
+        var iconSize = Math.max(Math.round(self.options.height / 10), 16),
+            iconLeft = parseInt((self.options.width - iconSize) / 2),
+            iconTop = parseInt((self.options.height - iconSize) / 2),
+            logoHeight,
+            playIconPadding, playIconSize,
+            playerHeight = self.options.height + (
+                self.options.externalControls
+                ? (!!self.options.controls.length + !!self.options.title) * self.barHeight
+                : 0
+            ),
+            timelineWidth;
         that.css({
             position: 'absolute',
             width: self.options.width + 'px',
-            height: self.height + 'px'
+            height: playerHeight + 'px'
         });
-    }
-
-    function setPosition(position) {
-        if (!Ox.isUndefined(position)) {
-            self.options.position = position;
+        self.$videoContainer.css({
+            width: self.options.width + 'px',
+            height: self.options.height + 'px'
+        });
+        self.loaded && self.$video.css(getVideoCSS());
+        self.$poster && self.$poster.css({
+            width: self.options.width + 'px',
+            height: self.options.height + 'px'
+        });
+        if (self.$logo) {
+            logoHeight = Math.round(self.options.height / 10);
+            self.logoMargin = Math.round(self.options.height / 20);
+            self.$logo.css({
+                left: self.logoMargin + 'px',
+                top: self.logoMargin + 'px',
+                height: logoHeight + 'px',
+            });
         }
-        //Ox.print('SP', self.options.position)
-        setSubtitle();
-        self.$positionMarker.css({
-            marginLeft: self.innerTrackWidth * self.options.position / self.video.duration + self.markerOffset + 'px',
+        self.$loadingIcon.css({
+            left: iconLeft + 'px',
+            top: iconTop + 'px',
+            width: iconSize + 'px',
+            height: iconSize + 'px'
         });
-        self.$position.html(Ox.formatDuration(self.options.position));
+        if (self.$playIcon) {
+            playIconPadding = Math.round(iconSize * 1/8);
+            playIconSize = iconSize - 2 * playIconPadding - 4;
+            self.$playIcon.css({
+                left: iconLeft + 'px',
+                top: iconTop + 'px',
+                width: playIconSize + 'px',
+                height: playIconSize + 'px',
+                padding: playIconPadding + 'px',
+                borderRadius: Math.round(iconSize / 2) + 'px'
+            });
+        }
+        self.$subtitle && self.$subtitle.css({
+            bottom: parseInt(self.options.height / 16) + 'px',
+            width: self.options.width + 'px',
+            fontSize: parseInt(self.options.height / 20) + 'px',
+            WebkitTextStroke: (self.options.height / 1000) + 'px rgb(0, 0, 0)'
+        });
+        self.$titlebar && self.$titlebar.css({
+            width: self.options.width + 'px'
+        });
+        self.$controls && self.$controls.css({
+            width: self.options.width + 'px'
+        });
+        if (self.$timeline || self.$space) {
+            timelineWidth = self.options.width - self.options.controls.reduce(function(prev, curr) {
+                return prev + (
+                    curr == 'timeline' || curr == 'space' ? 0 :
+                    curr == 'position' ? self.positionWidth : 16
+                );
+            }, 0);
+            if (self.$timeline) {
+                self.timelineImageWidth = timelineWidth - self.barHeight;
+                self.$timeline.css({width: timelineWidth + 'px'});
+                self.$timelineImages.css({width: self.timelineImageWidth + 'px'});
+                self.$timelineImage.css({width: self.timelineImageWidth + 'px'});
+                self.$progress && self.$progress.css({
+                    width: self.timelineImageWidth + 'px',
+                    marginLeft: -self.timelineImageWidth + 'px'
+                });
+                self.$positionMarker.css(getPositionMarkerCSS());
+                self.$timelineInterface.css({
+                    width: timelineWidth + 'px',
+                    marginLeft: -timelineWidth + 'px'
+                });
+            } else {
+                self.$space.css({width: timelineWidth + 'px'});
+            }
+        }
+        
     }
 
     function setSubtitle() {
@@ -813,18 +983,9 @@ Ox.VideoPlayer = function(options, self) {
         }
     }
 
-    function setSubtitleSize() {
-        self.$subtitle.css({
-            bottom: parseInt(self.options.height / 16) + 'px',
-            width: self.options.width + 'px',
-            fontSize: parseInt(self.options.height / 20) + 'px',
-            WebkitTextStroke: (self.options.height / 1000) + 'px rgb(0, 0, 0)'
-        });
-    }
-
     function showInterface() {
         clearTimeout(self.controlsTimeout);
-        $('.OxInterface').animate({
+        that.find('.OxInterface').animate({
             opacity: 1
         }, 250);
         self.$logo && self.$logo.animate({
@@ -839,9 +1000,11 @@ Ox.VideoPlayer = function(options, self) {
                 });
             self.options.logoTitle && self.$logo
                 .bind({
-                    mouseenter: self.$logoTooltip.show,
+                    mouseenter: function(e) {
+                        self.$logoTooltip.show(e);
+                    },
                     mouseleave: self.$logoTooltip.hide
-                });            
+                });
         });
         self.$subtitle.animate({
             bottom: self.barHeight + parseInt(self.options.height / 16) + 'px',
@@ -852,19 +1015,20 @@ Ox.VideoPlayer = function(options, self) {
         self.$loadingIcon.attr({
             src: Ox.UI.getImagePath('symbolLoadingAnimated.svg')
                 .replace('/classic/', '/modern/')
-        })
-        .show();
+        }).show();
     }
 
     function submitPositionInput() {
         self.$positionInput.hide();
         self.$position.html('').show();
         setPosition(parsePositionInput(self.$positionInput.options('value')));
-        self.video.currentTime = self.options.position;
+        if (self.loaded) {
+            self.video.currentTime = self.options.position;
+        }
         if (self.wasPlaying) {
+            togglePaused();
             self.video.play();
-            togglePlayIcon();
-            self.$playButton.toggleTitle();
+            self.$playButton && self.$playButton.toggleTitle();
             self.wasPlaying = false;
         }
     }
@@ -876,27 +1040,42 @@ Ox.VideoPlayer = function(options, self) {
 
     function togglePaused() {
         self.options.paused = !self.options.paused;
-        self.$positionMarkerRing.css({
+        self.$timeline && self.$positionMarkerRing.css({
             borderColor: 'rgba(255, 255, 255, ' + (self.options.paused ? 0.5 : 1) + ')'
         });
         if (self.options.paused) {
             self.video.pause();
             clearInterval(self.playInterval);
-            self.playInToOut = false;
+            if (self.options.showIcon) {
+                togglePlayIcon();
+                self.options.showIcon && self.$playIcon.animate({
+                    opacity: 1
+                }, 250);
+            }
         } else {
+            if (self.options.playInToOut && self.options.position > self.options.out - self.secondsPerFrame) {
+                setPosition(self.options['in']);
+                self.video.currentTime = self.options.position;
+            }
             self.video.play();
             self.playInterval = setInterval(playing, self.millisecondsPerFrame);
+            if (self.options.showIcon) {            
+                self.options.showIcon && self.$playIcon.animate({
+                    opacity: 0
+                }, 250/*, togglePlayIcon()*/);
+            }
         }
     }
 
     function togglePlayIcon() {
-        self.$playIconImage.attr({
-            src: Ox.UI.getImagePath('symbol' + (self.video.paused() ? 'Play' : 'Pause')+ '.svg').replace('/classic/', '/modern/')
-        })
+        self.$playIcon.attr({
+            src: Ox.UI.getImagePath(
+                'symbol' + (self.options.paused ? 'Play' : 'Pause'
+            )+ '.svg').replace('/classic/', '/modern/')
+        });
     }
 
     function toggleScale() {
-        Ox.print('TOGGLE SCALE')
         self.options.scaleToFill = !self.options.scaleToFill;
         self.$video.animate(getVideoCSS(), 250);
     }
@@ -908,26 +1087,25 @@ Ox.VideoPlayer = function(options, self) {
         });
     }
 
-    self.setOptions = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'height' || key == 'width') {
-            setSize();
+            setSizes();
         } else if (key == 'muted') {
             toggleMuted();
+            self.$muteButton && self.$muteButton.toggleTitle();
         } else if (key == 'paused') {
             togglePaused();
         } else if (key == 'position') {
             setPosition();
+        } else if (key == 'scaleToFill') {
+            self.$video.css(getVideoCSS());
         }
-    }
-
-    that.playInToOut = function() {
-        self.playInToOut = true;
-        setPosition(self.options['in']);
-        self.options.paused && that.play();
-        return that;
     };
 
-
+    that.playInToOut = function() {
+        playInToOut();
+        return that;
+    };
 
     return that;
 
diff --git a/source/Ox.UI/js/Window/Ox.Tooltip.js b/source/Ox.UI/js/Window/Ox.Tooltip.js
index a8803a4e..14da1dda 100644
--- a/source/Ox.UI/js/Window/Ox.Tooltip.js
+++ b/source/Ox.UI/js/Window/Ox.Tooltip.js
@@ -34,8 +34,13 @@ Ox.Tooltip = function(options, self) {
         return that;
     };
 
+    // can pass event instead of x/y
     that.show = function(x, y) {
         var left, top, width, height;
+        if (arguments.length == 1) {
+            y = arguments[0].clientY;
+            x = arguments[0].clientX;
+        }
         $('.OxTooltip').remove(); // fixme: don't use DOM
         that.appendTo(Ox.UI.$body);
         width = that.width();
diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css
index 51ad1389..f486f570 100644
--- a/source/Ox.UI/themes/modern/css/modern.css
+++ b/source/Ox.UI/themes/modern/css/modern.css
@@ -459,6 +459,12 @@ Video
     background: rgb(48, 48, 48);
 }
 
+.OxThemeModern .OxVideo.OxFocus {
+    -moz-box-shadow: 0 0 2px rgb(128, 128, 128);
+    -webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
+}
+
+
 .OxThemeModern .OxVideoPlayer {
     background: rgb(0, 0, 0);
 }