Ox.load('UI', function() {

    Ox.Theme('modern');

    var $innerPanel = Ox.SplitPanel({
            elements: [
                {
                    element: Ox.Element(),
                    resizable: true,
                    resize: [64, 128, 192],
                    size: 64
                },
                {
                    element: Ox.Element()
                }
            ],
            orientation: 'vertical'
        }),
        $outerPanel = Ox.SplitPanel({
            elements: [
                {
                    element: Ox.Element(),
                    resizable: true,
                    resize: [128, 256, 384],
                    size: 128
                },
                {
                    element: $innerPanel
                }
            ],
            orientation: 'horizontal'
        }).appendTo(Ox.$body);

    Ox.get('srt/0097514.srt', function(srt) {

        var $videoTimelinePlayer = Ox.VideoTimelinePlayer({
                duration: 3029.96,
                getFrameURL: function(position) {
                    return 'http://0xdb.org/0097514/64p' + position + '.jpg'
                },
                getImageURL: function(i) {
                    return 'http://0xdb.org/0097514/timeline64p' + i + '.png'
                },
                height: window.innerHeight - 65,
                paused: true,
                position: 1000,
                subtitles: Ox.parseSRT(srt),
                timelineURL: 'http://0xdb.org/0097514/timeline16p.png',
                videoRatio: 1.291667,
                videoURL: 'http://0xdb.org/0097514/96p.webm',
                width: window.innerWidth - 129
            })
            .bindEvent({
                resizeend: function(data) {
                    Ox.print('RESIZE', data.size)
                    $videoTimelinePlayer.options({
                        height: data.size
                    });
                }
            });

        $innerPanel
            .replaceElement(1, $videoTimelinePlayer)
            .bindEvent({
                resize: function(data) {
                    Ox.print('RESIZE', data.size)
                    $videoTimelinePlayer.options({
                        width: data.size
                    });
                }
            });

        $videoTimelinePlayer.gainFocus();

    });

});