make selected annotation scroll into view

source/Ox.UI/js/Form/Ox.ArrayEditable.js

@@ -199,13 +199,17 @@ Ox.ArrayEditable = function(options, self) {
 
     function triggerSelectEvent() {
         if (!self.triggered) {
-            that.triggerEvent('select', {id: self.options.selected});
+            that.triggerEvent('select', Ox.extend({
+                id: self.options.selected
+            }, self.options.selected ? {
+                top: self.$items[self.selected].offset().top
+            } : {}));
             self.triggered = true;
             setTimeout(function() {
                 self.triggered = false;
             }, 250);
         }
-    };
+    }
 
     self.setOption = function(key, value) {
         if (key == 'items') {

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

@@ -25,7 +25,11 @@ Ox.AnnotationPanel = function(options, self) {
             collapsed: false,
             editable: false,
             id: '',
+            'in': 0,
+            item: '',
             items: [],
+            out: 0,
+            position: 0,
             range: 'all',
             selected: '',
             sort: 'position',
@@ -57,7 +61,7 @@ Ox.AnnotationPanel = function(options, self) {
                     id: 'add',
                     style: 'symbol',
                     title: 'add',
-                    tooltip: 'Add',
+                    tooltip: 'Add ' + self.options.item,
                     type: 'image'
                 }).bindEvent({
                     click: function(data) {
@@ -131,9 +135,7 @@ Ox.AnnotationPanel = function(options, self) {
     function selectAnnotation(data) {
         var item = Ox.getObjectById(self.options.items, data.id);
         self.options.selected = item ? data.id : '';
-        that.triggerEvent('select', Ox.extend({
-            id: data.id
-        }, item ? {
+        that.triggerEvent('select', Ox.extend(data, item ? {
             'in': item['in'],
             out: item.out,
             layer: self.options.id

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

@@ -396,10 +396,8 @@ Ox.VideoEditor = function(options, self) {
                                 self.$annotationPanel[i_].options({selected: ''});
                             }
                         });
-                        selectAnnotation(data);
-                    } else {
-                        // ...
                     }
+                    selectAnnotation(data);
                 },
                 submit: submitAnnotation,
                 toggle: function(data) {
@@ -1100,11 +1098,26 @@ Ox.VideoEditor = function(options, self) {
         if (self.options.selected) {
             setPoint('in', data['in']);
             setPoint('out', data.out);
-            Ox.print('???', JSON.stringify(self.options.selected), getPanel(self.options.selected))
             getPanel(self.options.selected).options({selected: self.options.selected});
         }
         setTimelineState();
         updateEditMenu();
+        if (data.top) {
+            var height = self.$annotations.height(),
+                scrollTop = self.$annotations.scrollTop();
+            data.top -= 60; // 20 + 24 + 16
+            Ox.print('HEIGHT', height, 'SCROLLTOP', scrollTop, 'TOP', data.top);
+            if (data.top < 0 || data.top > height - 16) {
+                if (data.top < 0) {
+                    scrollTop += data.top - 3;
+                } else if (data.top > height - 16) {
+                    scrollTop += data.top - height + 14;
+                }
+                self.$annotations.animate({
+                    scrollTop: scrollTop + 'px'
+                }, 0);
+            }
+        }
         that.triggerEvent('select', {
             id: self.options.selected
         });

source/Ox.UI/themes/classic/css/classic.css

@@ -740,7 +740,7 @@ Video
 }
 
 .OxThemeClassic .OxAnnotationPanel .OxEditableElement.OxSelected {
-    background: rgb(128, 128, 255);
+    background: rgb(192, 192, 255);
     box-shadow: 0 0 1px rgb(64, 64, 64);
 }
 .OxThemeClassic .OxAnnotationPanel .OxEditableElement input {