From 2c9d6c7e916421715d98e147c06d98f5d6973d47 Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Thu, 3 Feb 2011 22:58:31 +0000
Subject: [PATCH] some css for text annotations

---
 build/css/ox.ui.css        |  9 +++++++++
 build/css/ox.ui.modern.css |  4 ++++
 build/js/ox.ui.js          | 27 ++++++++++++++++++++++++++-
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css
index 13ba032d..7ffce970 100644
--- a/build/css/ox.ui.css
+++ b/build/css/ox.ui.css
@@ -1284,6 +1284,15 @@ Video
 ================================================================================
 */
 
+.OxAnnotation {
+    border-width: 0 0 1px 0;
+    border-style: solid;
+    padding: 4px;
+}
+.OxAnnotation:last-child {
+    border-width: 0;
+}
+
 .OxVideoEditor {
     overflow-x: hidden;
     overflow-y: auto;
diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css
index 29628e83..13d1b6ca 100644
--- a/build/css/ox.ui.modern.css
+++ b/build/css/ox.ui.modern.css
@@ -346,6 +346,10 @@ Video
 ================================================================================
 */
 
+.OxThemeModern .OxAnnotation {
+    border-color: rgb(48, 48, 48);
+}
+
 .OxThemeModern .OxVideoPlayer {
     background: rgb(0, 0, 0);
 }
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index 8e2f8e55..7db34ed0 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -10427,6 +10427,7 @@ requires
             that = new Ox.Element('div', self)
                 .defaults({
                     id: '',
+                    items: [],
                     title: '',
                     type: 'text'
                 })
@@ -10434,12 +10435,31 @@ requires
 
         that.$element = new Ox.CollapsePanel({
                 collapsed: false,
+                extras: [
+                    new Ox.Button({
+                        id: 'add',
+                        style: 'symbol',
+                        title: 'Add',
+                        type: 'image'
+                    })
+                ],
                 size: 16,
                 title: self.options.title
             })
+            .addClass('OxAnnotationPanel')
             .bindEvent({
                 toggle: togglePanel
             });
+        that.$content = that.$element.$content;
+
+        self.$annotations = new Ox.Element('div')
+            .appendTo(that.$content);
+        self.options.items.forEach(function(item, i) {
+            new Ox.Element('div')
+                .addClass('OxAnnotation')
+                .html(item.value)
+                .appendTo(self.$annotations);
+        });
 
         function togglePanel() {
             
@@ -11434,6 +11454,9 @@ requires
             .appendTo(self.$video);
 
         self.$annotations = new Ox.Element()
+            .css({
+                overflowY: 'auto'
+            })
             .bindEvent({
                 resize: resizeAnnotations,
                 toggle: toggleAnnotations
@@ -11441,7 +11464,9 @@ requires
         self.$annotationPanel = [];
 
         self.options.layers.forEach(function(layer, i) {
-            self.$annotationPanel[i] = new Ox.AnnotationPanel(layer)
+            self.$annotationPanel[i] = new Ox.AnnotationPanel(
+                    $.extend({}, layer, layer.id == 'subtitles' ? {items: self.options.subtitles} : {})
+                )
                 .appendTo(self.$annotations);
         });