diff --git a/source/Ox.UI/js/Form/Ox.ArrayEditable.js b/source/Ox.UI/js/Form/Ox.ArrayEditable.js
index 29003c1f..f55375ae 100644
--- a/source/Ox.UI/js/Form/Ox.ArrayEditable.js
+++ b/source/Ox.UI/js/Form/Ox.ArrayEditable.js
@@ -16,6 +16,7 @@ Ox.ArrayEditable = function(options, self) {
             items: [],
             position: -1,
             selected: '',
+            sort: [],
             submitOnBlur: true,
             type: 'input',
             width: 256
@@ -106,7 +107,11 @@ Ox.ArrayEditable = function(options, self) {
 
     function renderItems() {
         that.empty();
-        self.options.items.forEach(function(item, i) {
+        (
+            Ox.isEmpty(self.options.sort)
+            ? self.options.items
+            : Ox.sortBy(self.options.items, self.options.sort)
+        ).forEach(function(item, i) {
             i && self.options.type == 'input'
                 && $('<span>')
                     .html(', ')
@@ -216,6 +221,8 @@ Ox.ArrayEditable = function(options, self) {
             renderItems();
         } else if (key == 'selected') {
             selectItem(value);
+        } else if (key == 'sort') {
+            renderItems();
         }
     }
 
diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js
index c3419f3e..62d96a7e 100644
--- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js
+++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js
@@ -39,19 +39,7 @@ Ox.AnnotationPanel = function(options, self) {
         })
         .options(options || {});
 
-    self.sort = self.options.sort == 'duration' ? [
-        {key: 'duration', operator: '-'},
-        {key: 'position', operator: '+'},
-        {key: 'value', operator: '+'}
-    ] : self.options.sort == 'position' ? [
-        {key: 'position', operator: '+'},
-        {key: 'duration', operator: '-'},
-        {key: 'value', operator: '+'}
-    ] : [ // 'text'
-        {key: 'value', operator: '+'},
-        {key: 'position', operator: '+'},
-        {key: 'duration', operator: '-'}
-    ];
+    self.sort = getSort();
 
     that.setElement(
         Ox.CollapsePanel({
@@ -132,6 +120,14 @@ Ox.AnnotationPanel = function(options, self) {
         });
     }
 
+    function getSort() {
+        return ({
+            duration: ['-duration', '+in', '+value'],
+            position: ['+in', '-duration', '+value'],
+            text: ['+value', '+in', '-duration']
+        })[self.options.sort];
+    }
+
     function selectAnnotation(data) {
         var item = Ox.getObjectById(self.options.items, data.id);
         self.options.selected = item ? data.id : '';
@@ -156,9 +152,9 @@ Ox.AnnotationPanel = function(options, self) {
 
     self.setOption = function(key, value) {
         if (['in', 'out'].indexOf(key) > -1 && self.editing) {
-            var item = Ox.getObjectById(self.options.items, self.options.selected);
-            items[key] = value;
-            items.duration = self.options.out - self.options['in']; 
+            var index = Ox.getIndexById(self.options.items, self.options.selected);
+            self.options.items[index][key] = value;
+            self.options.items[index].duration = self.options.out - self.options['in']; 
         }
         if (key == 'in') {
             //fixme: array editable should support item updates while editing
@@ -180,7 +176,8 @@ Ox.AnnotationPanel = function(options, self) {
         } else if (key == 'selected') {
             self.$annotations.options('selected', value);
         } else if (key == 'sort') {
-            self.$annotations.options('sort', value);
+            self.sort = getSort();
+            self.$annotations.options('sort', self.sort);
         }
     };