allow for annotation highlight if same value

source/UI/js/Form/ArrayEditable.js

@@ -485,12 +485,14 @@ Ox.ArrayEditable = function(options, self) {
     };
 
     that.updateItemGroup = function() {
-        var group = self.options.items[self.selected].group;
+        var group = self.selected > - 1 ? self.options.items[self.selected].group : '';
         self.$items.forEach(function($item, index) {
             $item[
-                self.options.items[index].group == group ? 'addClass' : 'removeClass'
+                self.options.highlightGroup && group
+                && self.options.items[index].group == group
+                ? 'addClass' : 'removeClass'
             ]('OxGroup');
-        })
+        });
     }
 
     return that;

source/UI/js/Video/AnnotationFolder.js

@@ -38,7 +38,7 @@ Ox.AnnotationFolder = function(options, self) {
             collapsed: false,
             editable: false,
             highlight: '',
-            highlightAnnotations: false,
+            highlightAnnotations: 'none',
             id: '',
             'in': 0,
             item: '',
@@ -479,7 +479,9 @@ Ox.AnnotationFolder = function(options, self) {
             );
         }).map(function(item) {
             return Ox.extend(item, {
-                group: item['in'] + '-' + item.out
+                group: self.options.highlightAnnotations == 'none' ? ''
+                    : self.options.highlightAnnotations == 'value' ? item.value
+                    : item['in'] + '-' + item.out
             });
         });
         return annotations;
@@ -650,7 +652,9 @@ Ox.AnnotationFolder = function(options, self) {
 
     function updateAnnotations() {
         self.annotations = getAnnotations();
+        self.$annotations.options({highlightGroup: self.options.highlightAnnotations != 'none'});
         self.$annotations.options({items: self.annotations});
+        self.$annotations.updateItemGroup();
         showWarnings();
         if (self.widget) {
             self.options.type == 'event'
@@ -746,10 +750,10 @@ Ox.AnnotationFolder = function(options, self) {
         Ox.forEach(data, function(value, key) {
             item[key] = value;
         });
-        item.group = item['in'] + '-' + item.out;
-        if (self.options.highlightAnnotations) {
-            self.$annotations.updateItemGroup();
-        }
+        item.group = self.options.highlightAnnotations == 'none' ? ''
+            : self.options.highlightAnnotations == 'value' ? item.value
+            : item['in'] + '-' + item.out;
+        self.$annotations.updateItemGroup();
         if (id != item.id) {
             self.$annotations.find('.OxEditableElement').each(function() {
                 var $element = $(this);

source/UI/js/Video/AnnotationPanel.js

@@ -52,7 +52,7 @@ Ox.AnnotationPanel = function(options, self) {
             enableExport: false,
             enableImport: false,
             highlight: '',
-            highlightAnnotations: false,
+            highlightAnnotations: 'none',
             highlightLayer: '*',
             itemName: {singular: 'video', plural: 'videos'},
             layers: [],
@@ -514,8 +514,9 @@ Ox.AnnotationPanel = function(options, self) {
                         {},
                         {id: 'highlightannotations', title: Ox._('Highlight Annotations'), disabled: true},
                         {group: 'highlight', max: 1, items: [
-                            {id: 'none', title: Ox._('None'), checked: !self.options.highlightAnnotations},
-                            {id: 'selection', title: Ox._('Matching Current Selection'), checked: self.options.highlightAnnotations}
+                            {id: 'none', title: Ox._('None'), checked: self.options.highlightAnnotations == 'none'},
+                            {id: 'value', title: Ox._('Same Value'), checked: self.options.highlightAnnotations == 'value'},
+                            {id: 'selection', title: Ox._('Same Selection'), checked: self.options.highlightAnnotations == 'selection'}
                         ]}
                     ] : [],
                     self.languages.length > 1 ? [
@@ -574,7 +575,7 @@ Ox.AnnotationPanel = function(options, self) {
                         that.options({highlightLayer: layer});
                         that.triggerEvent('highlightlayer', self.options.highlightLayer);
                     } else if (data.id == 'highlight') {
-                        var value = data.checked[0].id == 'selection'
+                        var value = data.checked[0].id
                         that.options({highlightAnnotations: value});
                         that.triggerEvent('highlightannotations', self.options.highlightAnnotations);
                     } else {

source/UI/js/Video/VideoAnnotationPanel.js

@@ -49,7 +49,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
     var that = Ox.Element({}, self)
             .defaults({
                 annotationsCalendarSize: 256,
-                annotationsHighlight: false,
+                annotationsHighlight: 'none',
                 annotationsMapSize: 256,
                 annotationsRange: 'all',
                 annotationsSeparator: ';',