Ox.load('UI', {
    debug: true,
    theme: 'modern'
}, function() {

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

        var subtitles = Ox.parseSRT(srt, 25);

        var $appPanel, $mainPanel;

        var $videoEditor = Ox.VideoEditor({
            annotationsSize: 256,
            duration: 6336.08,
            find: 'dode',
            getFrameURL: function(position, width) {
                return 'http://next.0xdb.org/0393109/frame/' + width + '/' + position + '.jpg'
            },
            getLargeTimelineImageURL: function(i) {
                return 'http://next.0xdb.org/0393109/timelines/timeline.64.' + i + '.png';
            },
            getSmallTimelineImageURL: function(i) {
                return 'http://next.0xdb.org/0393109/timelines/timeline.16.' + i + '.png';
            },
            height: window.innerHeight - 129,
            'in': 3128.76, 
            out: 3130.72,
            position: 3168.04,
            posterFrame: 3168.04,
            subtitles: subtitles,
            video: {
                96: 'http://next.0xdb.org/0393109/96p.webm',
                240: 'http://next.0xdb.org/0393109/96p.webm?240p',
                480: 'http://next.0xdb.org/0393109/96p.webm?480p'
            },
            videoHeight: 96,
            videoSize: 'small',
            videoWidth: 180,
            width: window.innerWidth - 257
        });

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

        Ox.UI.$window.bind({
            resize: function() {
                $videoEditor.options({
                    width: $appPanel.size(1),
                    height: $mainPanel.size(1)
                });
            }
        });

        $mainPanel.bindEvent({
            resize: function(foo, size) {
                $videoEditor.options({
                    width: size
                });
            }
        });

        $videoEditor.bindEvent({
            resize: function(foo, size) {
                Ox.print('RESIZE!!!!!!!!!')
                $videoEditor.options({
                    height: size
                });
            }
        });


    });

});