use Ox.Editable in Ox.AnnotationPanel

source/Ox.UI/js/Video/Ox.AnnotationPanel.js

@@ -55,9 +55,26 @@ Ox.AnnotationPanel = function(options, self) {
 
     self.$annotations = Ox.List({
             construct: function(data) {
-                return Ox.Element()
-                    .addClass('OxAnnotation OxEditable OxTarget')
-                    .html(Ox.parseHTML(data.value));
+                var $item = Ox.Element()
+                    .append(
+                        Ox.Editable({
+                            type: 'textarea',
+                            width: self.options.width - 8,
+                            value: data.value
+                        })
+                        .bindEvent({
+                            edit: function() {
+                                $item.removeClass('OxTarget');
+                            },
+                            submit: function(data) {
+                                $item.addClass('OxTarget')
+                            }
+                        })
+                    )
+                    .append($('<div>').css({height: '4px'}))
+                    .css({padding: '4px 4px 0 4px'})
+                    .addClass('OxAnnotation OxTarget');
+                return $item;
             },
             items: self.options.items.map(function(v, i) {
                 return {
@@ -65,6 +82,7 @@ Ox.AnnotationPanel = function(options, self) {
                     value: v.value
                 };
             }),
+            max: 1,
             unique: 'id'
         })
         .bindEvent({
@@ -73,6 +91,7 @@ Ox.AnnotationPanel = function(options, self) {
                 selectAnnotation({}, {ids: [item.id]});
             },
             open: function(data) {
+                return;
                 if (data.ids.length == 1) {
                     var pos = Ox.getPositionById(self.$annotations.options('items'), data.ids[0]);
                     self.$annotations.editItem(pos);

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -9,6 +9,8 @@ Ox.VideoEditor <f:Ox.Element> VideoEditor Object
     self    <o> shared private variable
 @*/
 
+// fixme: should be VideoAnnotationEditor
+
 Ox.VideoEditor = function(options, self) {
 
     self = self || {};
@@ -267,7 +269,7 @@ Ox.VideoEditor = function(options, self) {
     self.options.layers.forEach(function(layer, i) {
         self.$annotationPanel[i] = Ox.AnnotationPanel(
                 Ox.extend({
-                    width: self.options.annotationSize
+                    width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE
                 }, layer)
             )
             .bindEvent({
@@ -309,7 +311,6 @@ Ox.VideoEditor = function(options, self) {
             {id: resolution + '', title: resolution + 'p'}
         );
     });
-    Ox.print('::::::',self.resolutions)
 
     self.$keyboardShortcuts = $('<div>');
     [
@@ -612,7 +613,6 @@ Ox.VideoEditor = function(options, self) {
         src: Ox.UI.getImageURL('symbolSet')
     });
 
-
     that.$element = Ox.SplitPanel({
         elements: [
             {