allow for autocomplete in annotations of type entity (first pass)

source/UI/js/Form/ArrayEditable.js

@@ -156,6 +156,13 @@ Ox.ArrayEditable = function(options, self) {
                         .appendTo(that);
                 }
                 self.$items[i] = Ox.Editable({
+                        autocomplete: self.options.autocomplete,
+                        autocompleteReplace: self.options.autocompleteReplace,
+                        autocompleteReplaceCorrect: self.options.autocompleteReplaceCorrect,
+                        autocompleteSelect: self.options.autocompleteSelect,
+                        autocompleteSelectHighlight: self.options.autocompleteSelectHighlight,
+                        autocompleteSelectMaxWidth: self.options.autocompleteSelectMaxWidth,
+                        autocompleteSelectSubmit: self.options.autocompleteSelectSubmit,
                         blurred: self.editing && i == self.selected ? blur : false,
                         clickLink: self.options.clickLink,
                         editable: self.options.editable && item.editable,

source/UI/js/Form/Editable.js

@@ -144,6 +144,13 @@ Ox.Editable = function(options, self) {
             self.originalValue = self.options.value;
             if (!self.$input) {
                 self.$input = Ox.Input({
+                        autocomplete: self.options.autocomplete,
+                        autocompleteReplace: self.options.autocompleteReplace,
+                        autocompleteReplaceCorrect: self.options.autocompleteReplaceCorrect,
+                        autocompleteSelect: self.options.autocompleteSelect,
+                        autocompleteSelectHighlight: self.options.autocompleteSelectHighlight,
+                        autocompleteSelectMaxWidth: self.options.autocompleteSelectMaxWidth,
+                        autocompleteSelectSubmit: self.options.autocompleteSelectSubmit,
                         changeOnKeypress: true,
                         element: self.options.type == 'input' ? '<span>' : '<div>',
                         style: 'square',

source/UI/js/Video/AnnotationFolder.js

@@ -265,7 +265,7 @@ Ox.AnnotationFolder = function(options, self) {
             .appendTo(self.$outer);         
     }
 
-    self.$annotations = Ox.ArrayEditable({
+    self.$annotations = Ox.ArrayEditable(Ox.extend({
             clickLink: self.options.clickLink,
             editable: self.options.editable,
             getSortValue: self.options.type == 'text'
@@ -286,7 +286,16 @@ Ox.AnnotationFolder = function(options, self) {
             width: self.options.width,
             maxHeight: self.options.type == 'text' ? Infinity : void 0,
             type: self.options.type == 'text' ? 'textarea' : 'input'
-        })
+        }, self.options.type == 'entity' ? {
+            autocomplete: function(value, callback) {
+                self.options.autocomplete(self.options.id, value, callback);
+            },
+            autocompleteReplace: true,
+            autocompleteReplaceCorrect: true,
+            autocompleteSelect: true,
+            autocompleteSelectHighlight: true,
+            autocompleteSelectMaxWidth: 256
+        } : {}))
         .bindEvent({
             add: function(data) {
                 if (self.editing) {

source/UI/js/Video/AnnotationPanel.js

@@ -339,6 +339,7 @@ Ox.AnnotationPanel = function(options, self) {
                     collapsed: !self.options.showLayers[layer.id],
                     editable: self.options.editable,
                     highlight: self.options.highlight,
+                    id: layer.id,
                     'in': self.options['in'],
                     keyboard: index + 1 + '',
                     out: self.options.out,
@@ -347,7 +348,9 @@ Ox.AnnotationPanel = function(options, self) {
                     selected: selected,
                     sort: self.options.sort,
                     width: self.options.width - Ox.UI.SCROLLBAR_SIZE
-                }, layer, layer.type == 'event' ? {
+                }, layer, layer.type == 'entity' ? {
+                    autocomplete: self.options.autocomplete,
+                } : layer.type == 'event' ? {
                     showWidget: self.options.showCalendar,
                     widgetSize: self.options.calendarSize
                 } : layer.type == 'place' ? {

source/UI/js/Video/VideoAnnotationPanel.js

@@ -53,6 +53,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
                 annotationsSort: 'position',
                 annotationsTooltip: Ox._('annotations'),
                 audioTrack: '',
+                autocomplete: null,
                 censored: [],
                 censoredIcon: '',
                 censoredTooltip: '',
@@ -793,6 +794,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
         .appendTo(self.$menubar.$element);
 
     self.$annotationPanel = Ox.AnnotationPanel({
+            autocomplete: self.options.autocomplete,
             calendarSize: self.options.annotationsCalendarSize,
             clickLink: self.options.clickLink,
             editable: true,