make cursor keys work across annotation folders; make clicking in string annotation folder deselect annotation in other folder

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

@@ -171,7 +171,11 @@ Ox.ArrayEditable = function(options, self) {
     }
 
     function selectFirst() {
-        self.selected > -1 && selectItem(0);
+        if (self.selected > -1) {
+            self.selected > 0
+                ? selectItem(0)
+                : that.triggerEvent('selectbefore');
+        }
     }
 
     function selectItem(idOrPosition) {
@@ -193,13 +197,19 @@ Ox.ArrayEditable = function(options, self) {
     }
 
     function selectLast() {
-        self.selected > -1 && selectItem(self.options.items.length - 1);
+        if (self.selected > -1) {
+            self.selected < self.options.items.length - 1
+                ? selectItem(self.options.items.length - 1)
+                : that.triggerEvent('selectafter');
+        }
     }
 
     function selectNext() {
-        self.selected > -1
-            && self.selected < self.options.items.length - 1
-            && selectItem(self.selected + 1);
+        if (self.selected > -1) {
+            self.selected < self.options.items.length - 1
+                ? selectItem(self.selected + 1)
+                : that.triggerEvent('selectafter');
+        }
     }
 
     function selectNone() {
@@ -207,7 +217,11 @@ Ox.ArrayEditable = function(options, self) {
     }
 
     function selectPrevious() {
-        self.selected > 0 && selectItem(self.selected - 1);
+        if (self.selected > -1) {
+            self.selected > 0
+                ? selectItem(self.selected - 1)
+                : that.triggerEvent('selectbefore');
+        }
     }
 
     function singleclick(e) {
@@ -230,8 +244,14 @@ Ox.ArrayEditable = function(options, self) {
                     // blur if still in editing mode
                     that.blurItem();
                 } else {
-                    // othewise deselect selected
-                    selectNone();
+                    // otherwise
+                    if (self.selected > -1) {
+                        // deselect selected
+                        selectNone();
+                    } else {
+                        // or trigger event
+                        that.triggerEvent('selectnone');
+                    }
                 }
             }
             that.gainFocus();

source/Ox.UI/js/Video/Ox.AnnotationFolder.js

@@ -237,6 +237,15 @@ Ox.AnnotationFolder = function(options, self) {
                 that.triggerEvent('edit');
             },
             select: selectAnnotation,
+            selectafter: function() {
+                that.triggerEvent('selectafter');
+            },
+            selectbefore: function() {
+                that.triggerEvent('selectbefore');
+            },
+            selectnone: function() {
+                that.triggerEvent('selectnone');
+            },
             submit: submitAnnotation,
             key_space: function() {
                 that.triggerEvent('paused');
@@ -560,6 +569,20 @@ Ox.AnnotationFolder = function(options, self) {
         return that;
     };
 
+    that.selectItem = function(position) {
+        // selects the first (0) or last (-1) visible annotation
+        if (self.annotations.length) {
+            that.options({selected: self.annotations[
+                position == 0 ? 0 : self.annotations.length - 1
+            ].id});
+            self.$annotations.gainFocus();
+        } else {
+            that.triggerEvent(
+                position == 0 ? 'selectafter' : 'selectbefore'
+            );
+        }
+    };
+
     /*@
     removeItems <f> removeItems
     @*/

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

@@ -204,6 +204,13 @@ Ox.AnnotationPanel = function(options, self) {
                 select: function(data) {
                     selectAnnotation(data, i);
                 },
+                selectafter: function() {
+                    selectNext(layer.id, 1);
+                },
+                selectbefore: function() {
+                    selectNext(layer.id, -1);
+                },
+                selectnone: selectNone,
                 submit: function(data) {
                     that.triggerEvent('submit', Ox.extend({layer: layer.id}, data));
                 },
@@ -303,6 +310,21 @@ Ox.AnnotationPanel = function(options, self) {
         that.triggerEvent('select', data);
     }
 
+    function selectNone() {
+        if (self.options.selected) {
+            getFolder(self.options.selected).options({selected: ''});
+        }
+    }
+
+    function selectNext(layer, direction) {
+        var index = Ox.mod(
+            Ox.getIndexById(self.options.layers, layer) + direction,
+            self.options.layers.length
+        );
+        Ox.print('index', index)
+        self.$folder[index].selectItem(direction == 1 ? 0 : -1);
+    }
+
     function updateEditMenu() {
         var action = self.options.selected ? 'enableItem' : 'disableItem';
         self.$editMenuButton[action]('edit');