add video timeline player and demo

demos/videotimelineplayer/js/demo.js

@@ -0,0 +1,77 @@
+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();
+
+    });
+
+});