Ox.load('UI', {
    debug: true,
    theme: 'modern'
}, function() {
    var id = '0393109',
        poster = 'png/poster.png',
        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', 'fullscreen', '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({
                    left: '16px',
                    top: '16px'
                }),
            Ox.VideoPlayer({
                    enableKeyboard: true,
                    height: videoSize.height,
                    'in': 3128.725, 
                    //keepIconVisible: true,
                    out: 3130.725,
                    paused: true,
                    playInToOut: true,
                    //preload: 'none',
                    showIcon: true,
                    timeline: timeline,
                    video: url + '?' +  + Ox.random(1000000),
                    width: videoSize.width
                })
                .css({
                    left: '16px',
                    top: '16px'
                }),
            Ox.VideoPlayer({
                    controls: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'],
                    externalControls: true,
                    height: 192,
                    'in': 3128.725, 
                    out: 3130.725,
                    paused: true,
                    showMilliseconds: 2,
                    subtitles: 'srt/' + id + '.srt',
                    timeline: timeline,
                    video: url + '?' +  + Ox.random(1000000),
                    width: 360
                })
                .css({
                    left: '16px',
                    top: '16px'
                })
                .bindEvent({
                    size: function() {

                    }
                })
        ];
    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);

    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
        });
    }

});