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

    //var id = '0393109';
    var id = '0097514';

    Ox.get('srt/' + id + '.srt', function(srt) {

        var subtitles = Ox.parseSRT(srt, 25),
            layers = [
                {
                    editable: true,
                    id: 'privatenotes',
                    items: [],
                    title: 'Private Notes'
                },
                {
                    editable: true,
                    id: 'publicnotes',
                    items: [],
                    title: 'Public Notes'
                },
                {
                    id: 'subtitles',
                    items: subtitles.map(function(subtitle, i) {
                        return {id: i, 'in': subtitle.in, out: subtitle.out, value: subtitle.text};
                    }),
                    title: 'Subtitles'
                }
            ];

        var $appPanel, $mainPanel;

        var $videoEditor = Ox.VideoEditor({
            annotationsSize: 256,
            duration: 3029.96,
            find: 'dode',
            getFrameURL: function(position, width) {
                return 'http://next.0xdb.org/' + id + '/frame/' + width + '/' + position + '.jpg'
            },
            getLargeTimelineImageURL: function(i) {
                return 'http://next.0xdb.org/' + id + '/timelines/timeline.64.' + i + '.png';
            },
            getSmallTimelineImageURL: function(i) {
                return 'http://next.0xdb.org/' + id + '/timelines/timeline.16.' + i + '.png';
            },
            height: window.innerHeight - 129,
            'in': 0,
            layers: layers,
            out: 0,
            position: 0,
            posterFrame: 1515,
            showAnnotations: true,
            subtitles: subtitles,
            video: {
                96: 'http://next.0xdb.org/' + id + '/96p.webm',
                240: 'http://next.0xdb.org/' + id + '/96p.webm?240p',
                480: 'http://next.0xdb.org/' + id + '/96p.webm?480p'
            },
            videoHeight: 96,
            videoSize: 'small',
            videoWidth: 124,
            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.getSize(1),
                    height: $mainPanel.getSize(1)
                });
            }
        });

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

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


    });

});