refactoring editor to include annotations

build/css/ox.ui.css

@@ -291,7 +291,6 @@ input::-moz-focus-inner {
 textarea {
     //padding: 2px 4px 2px 4px;
     padding: 0 4px 0 4px;
-    margin: -1px 0 0 0;
     resize: none;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
@@ -1285,11 +1284,11 @@ Video
 ================================================================================
 */
 
-.OxEditor {
+.OxVideoEditor {
     overflow-x: hidden;
     overflow-y: auto;
 }
-.OxEditor .OxVideoPlayer {
+.OxVideoEditor .OxVideoPlayer {
     position: absolute;
     margin: 4px;
     //background: red;

build/js/ox.js

@@ -98,6 +98,7 @@ Ox.uid = function() {
 }();
 
 Ox.user = function() {
+    // fixme: move to ox.ui
     $.get("http://www.maxmind.com/app/locate_my_ip", function(data) {
         var arr = data.split("tblProduct1"),
             re = />(.+?)<\/td>\n<td class=output align="center">\n(.*?)\n/,

build/js/ox.ui.js

@@ -3002,6 +3002,7 @@ requires
             .appendTo(that.$element);
 
         // fixme: is there a better way than this one?
+        // should at least go into ox.ui.theme.foo.js
         if (self.options.type == 'textarea') {
             $.extend(self, {
                 colors: Ox.theme() == 'classic' ?
@@ -10420,6 +10421,34 @@ requires
     ============================================================================
     */
 
+    Ox.AnnotationPanel = function(options, self) {
+
+        var self = self || {},
+            that = new Ox.Element('div', self)
+                .defaults({
+                    id: '',
+                    title: '',
+                    type: 'text'
+                })
+                .options(options || {});
+
+        that.$element = new Ox.CollapsePanel({
+                collapsed: false,
+                size: 16,
+                title: self.options.title
+            })
+            .bindEvent({
+                toggle: togglePanel
+            });
+
+        function togglePanel() {
+            
+        }
+
+        return that;
+
+    };
+
     Ox.BlockTimeline = function(options, self) {
 
         var self = self || {},
@@ -11217,16 +11246,19 @@ requires
         var self = self || {},
             that = new Ox.Element('div', self)
                 .defaults({
+                    annotationsSize: 0,
                     cuts: [],
                     duration: 0,
                     find: '',
                     frameURL: function() {},
 					height: 0,
                     largeTimeline: true,
+                    layers: [],
                     matches: [],
                     points: [0, 0],
                     position: 0,
                     posterFrame: 0,
+                    showAnnotations: false,
                     subtitles: [],
                     videoHeight: 0,
                     videoId: '',
@@ -11236,7 +11268,6 @@ requires
                     width: 0
                 })
                 .options(options || {})
-                .addClass('OxEditor')
                 .mousedown(function() {
                     that.gainFocus();
                 })
@@ -11326,6 +11357,9 @@ requires
             margin: 8,
             videoRatio: self.options.videoWidth / self.options.videoHeight
         });
+
+        self.$video = new Ox.Element().addClass('OxVideoEditor');
+
         self.sizes = getSizes();
 
         $.each(['play', 'in', 'out'], function(i, type) {
@@ -11357,7 +11391,7 @@ requires
                         setPoint(type);
                     }
                 })
-                .appendTo(that);
+                .appendTo(self.$video);
         });
 
         self.$timeline[0] = new Ox.LargeTimeline({
@@ -11378,7 +11412,7 @@ requires
             })
             .bindEvent('change', changeTimelineLarge)
             .bindEvent('changeEnd', changeTimelineLarge)
-            .appendTo(that);
+            .appendTo(self.$video);
 
         self.$timeline[1] = new Ox.BlockTimeline({
                 cuts: self.options.cuts,
@@ -11397,9 +11431,36 @@ requires
                 top: self.sizes.timeline[1].top + 'px'
             })
             .bindEvent('change', changeTimelineSmall)
-            .appendTo(that);
+            .appendTo(self.$video);
 
-        // that.gainFocus();
+        self.$annotations = new Ox.Element()
+            .bindEvent({
+                resize: resizeAnnotations,
+                toggle: toggleAnnotations
+            });
+        self.$annotationPanel = [];
+
+        self.options.layers.forEach(function(layer, i) {
+            self.$annotationPanel[i] = new Ox.AnnotationPanel(layer)
+                .appendTo(self.$annotations);
+        });
+
+        that.$element = new Ox.SplitPanel({
+            elements: [
+                {
+                    element: self.$video
+                },
+                {
+                    collapsed: !self.options.showAnnotations,
+                    collapsible: true,
+                    element: self.$annotations,
+                    resizable: true,
+                    resize: [192, 256, 320, 384],
+                    size: self.options.annotationsSize
+                }
+            ],
+            orientation: 'horizontal'
+        });
 
         function changePlayer(event, data) {
             self.options.position = data.position;
@@ -11464,7 +11525,9 @@ requires
         function getSizes(scrollbarIsVisible) {
             //Ox.print('getSizes', scrollbarIsVisible)
             var scrollbarWidth = oxui.scrollbarSize,
-				contentWidth = self.options.width - (scrollbarIsVisible ? scrollbarWidth : 0),
+				contentWidth = self.options.width - 
+				    (self.options.showAnnotations * self.options.annotationsSize) - 1 -
+				    (scrollbarIsVisible ? scrollbarWidth : 0),
                 height,
                 lines,
 				size = {
@@ -11518,7 +11581,7 @@ requires
             lines = Math.ceil(self.options.duration / size.timeline[1].width);
             height = getHeight();
             //Ox.print('lines', lines, getHeight(), self.options.height, (scrollbarIsVisible && getHeight() <= self.options.height) ? 'scroll' : 'auto')
-            that.css({
+            self.$video.css({
                 overflowY: (scrollbarIsVisible && height <= self.options.height) ? 'scroll' : 'auto'
             });
             return (!scrollbarIsVisible && height > self.options.height) ? getSizes(true) : size;
@@ -11557,6 +11620,11 @@ requires
             self.$player[0].playInToOut();
         }
 
+        function resizeAnnotations(event, data) {
+            self.options.annotationsSize = data;
+            setSizes();
+        }
+
         function resizeEditor(event, data) {
             var width = data - 2 * margin + 100;
             resizeVideoPlayers(width);
@@ -11639,6 +11707,11 @@ requires
             });
         }
 
+        function toggleAnnotations(event, data) {
+            self.options.showAnnotations = !data.collapsed;
+            setSizes();
+        }
+
         function toggleMute() {
             self.$player[0].toggleMute();
         }