diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css
index 13d1b6ca..338ead22 100644
--- a/build/css/ox.ui.modern.css
+++ b/build/css/ox.ui.modern.css
@@ -349,6 +349,9 @@ Video
 .OxThemeModern .OxAnnotation {
     border-color: rgb(48, 48, 48);
 }
+.OxThemeModern .OxAnnotation.OxSelected {
+    background: rgb(48, 48, 48);
+}
 
 .OxThemeModern .OxVideoPlayer {
     background: rgb(0, 0, 0);
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index 7db34ed0..36be7ac9 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -10,6 +10,8 @@ requires
 
 // also see test.js, in demos ...
 
+// fixme: render might be a better function name than construct
+
 (function() {
 
     // fixme: move into Ox.UI
@@ -6452,21 +6454,36 @@ requires
 
     Ox.List = function(options, self) {
 
+        /***
+        basic list object
+        Options
+        centered        boolean     if true, and orientation is 'horizontal',
+                                    then keep the selected item centered
+        construct       function    function(data), returns the list item HTML
+        request         function    function(callback) returns {items, size, ...}
+                                    function(data, callback) returns [items]
+        Methods
+        Events
+        ***/
+
+        // fixme: items and request should be the same option
+
         var self = self || {},
             that = new Ox.Container({}, self)
                 .defaults({
                     centered: false,
-                    construct: function() {},
+                    construct: null,
                     draggable: false,
                     format: [],
                     itemHeight: 16,
+                    items: null,
                     itemWidth: 16,
                     keys: [],
                     max: -1,
                     min: 0,
                     orientation: 'vertical',
                     pageLength: 100,
-                    request: function() {}, // (data, callback), without data returns {items, size etc.}
+                    request: null,              
                     selected: [],
                     sort: [],
                     sortable: false,
@@ -6518,17 +6535,13 @@ requires
             scrollTimeout: 0,
             selected: []
         });
-        if (self.options.max == -1) {
-            $.extend(self.keyboardEvents, {
-                key_alt_control_a: invertSelection,
-                key_control_a: selectAll
-            });
-        }
-        if (self.options.min == 0) {
-            $.extend(self.keyboardEvents, {
-                key_control_shift_a: selectNone
-            });
-        }
+        self.options.max == -1 && $.extend(self.keyboardEvents, {
+            key_alt_control_a: invertSelection,
+            key_control_a: selectAll
+        });
+        self.options.min == 0 && $.extend(self.keyboardEvents, {
+            key_control_shift_a: selectNone
+        });
         self.keyboardEvents[
             'key_' + (self.options.orientation == 'vertical' ? 'up' : 'left')
         ] = selectPrevious;
@@ -6567,9 +6580,14 @@ requires
             });
         }
 
-        updateQuery(self.options.selected);
+        Ox.print('OxList', self.options)
+        if (Ox.isArray(self.options.items)) {
+            loadItems();
+        } else {
+            updateQuery(self.options.selected);
+        }
         that.bindEvent(self.keyboardEvents);
-        $window.resize(that.size);
+        $window.resize(that.size); // fixme: this is not the widget's job
 
         function addAboveToSelection() {
             var pos = getAbove();
@@ -7040,6 +7058,21 @@ requires
             return self.selected.indexOf(pos) > -1;
         }
 
+        function loadItems() {
+            self.options.items.forEach(function(item, pos) {
+                // fixme: duplicated
+                self.$items[pos] = new Ox.ListItem({
+                    construct: self.options.construct,
+                    data: item,
+                    draggable: self.options.draggable,
+                    position: pos,
+                    unique: self.options.unique
+                });
+                isSelected(pos) && self.$items[pos].addClass('OxSelected');
+                self.$items[pos].appendTo(that.$content);
+            });
+        }
+
         function loadPage(page, callback) {
             if (page < 0 || page >= self.pages) {
                 !Ox.isUndefined(callback) && callback();
@@ -7171,18 +7204,17 @@ requires
         }
 
         function _mousedown(e) {
-            Ox.print('mousedown')
             var pos = findItemPosition(e),
                 clickable, editable,
                 clickTimeout = false,
                 selectTimeout = false,
                 $cell,
                 hadFocus = that.hasFocus();
+            Ox.print('mousedown', pos)
             that.gainFocus();
             if (pos > -1) {
                 if (!self.clickTimeout) {
                     // click
-                    //Ox.print('^^^^', 'pos', pos, 'id', $item.data('id'))
                     if (e.metaKey) {
                         if (!isSelected(pos) && (self.options.max == -1 || self.options.max > self.selected.length)) {
                             addToSelection(pos);
@@ -7488,7 +7520,7 @@ requires
             var ids = self.options.selected = getSelectedIds();
             setTimeout(function() {
                 var ids_ = getSelectedIds();
-                //Ox.print('ids', ids, 'ids after 100 msec', ids_)
+                Ox.print('ids', ids, 'ids after 100 msec', ids_)
                 if (ids.length == ids_.length && (ids.length == 0 || ids[0] == ids_[0])) {
                     that.triggerEvent('select', {
                         ids: ids
@@ -7497,7 +7529,7 @@ requires
                         ids: ids
                     });
                 } else {
-                    //Ox.print('select event not triggered after timeout');
+                    Ox.print('select event not triggered after timeout');
                 }
             }, 100);
         }
@@ -7521,9 +7553,10 @@ requires
             unloadPage(page + 1)
         }
 
-        function updateQuery(ids) {
+        function updateQuery(ids) { // fixme: shouldn't this be setQuery?
             // ids are the selcected ids
             // (in case list is loaded with selection)
+            Ox.print('####', self.options)
             clear();
             self.requests.push(self.options.request({}, function(result) {
                 var keys = {};
@@ -10429,10 +10462,13 @@ requires
                     id: '',
                     items: [],
                     title: '',
-                    type: 'text'
+                    type: 'text',
+                    width: 0
                 })
                 .options(options || {});
 
+        self.selected = -1;
+
         that.$element = new Ox.CollapsePanel({
                 collapsed: false,
                 extras: [
@@ -10452,14 +10488,59 @@ requires
             });
         that.$content = that.$element.$content;
 
+        self.$annotations = new Ox.List({
+                construct: function(data) {
+                    return new Ox.Element('div')
+                        .addClass('OxAnnotation OxTarget')
+                        .html(data.value);
+                },
+                items: $.map(self.options.items, function(v, i) {
+                    return {value: v.value.replace(/\n/g, '<br/>')};
+                }),
+            })
+            .bindEvent({
+                select: selectAnnotation
+            })
+            .appendTo(that.$content);
+
+        /*
         self.$annotations = new Ox.Element('div')
             .appendTo(that.$content);
+        self.$annotation = [];
         self.options.items.forEach(function(item, i) {
-            new Ox.Element('div')
+            self.$annotation[i] = new Ox.Element('div')
                 .addClass('OxAnnotation')
-                .html(item.value)
+                .html(item.value.replace(/\n/g, '<br/>'))
+                .click(function() {
+                    clickAnnotation(i);
+                })
                 .appendTo(self.$annotations);
         });
+        */
+
+        function selectAnnotation(event, data) {
+            var pos = data.selected.ids[0],
+                item = self.options.items[pos];
+            if (pos != self.selected) {
+                self.selected > -1 &&
+                    self.$annotation[self.selected].removeClass('OxSelected');
+                self.selected = pos;
+                self.$annotation[self.selected].addClass('OxSelected');
+                that.triggerEvent('select', {
+                    'in': item.in,
+                    'out': item.out 
+                });
+            } else {
+                self.$annotation[pos].replaceWith(
+                    new Ox.Input({
+                        height: 128,
+                        type: 'textarea',
+                        value: item.value,
+                        width: self.options.width
+                    })
+                );
+            }
+        }
 
         function togglePanel() {
             
@@ -11465,8 +11546,13 @@ requires
 
         self.options.layers.forEach(function(layer, i) {
             self.$annotationPanel[i] = new Ox.AnnotationPanel(
-                    $.extend({}, layer, layer.id == 'subtitles' ? {items: self.options.subtitles} : {})
+                    $.extend({
+                        width: self.options.annotationSize
+                    }, layer, layer.id == 'subtitles' ? {items: self.options.subtitles} : {})
                 )
+                .bindEvent({
+                    select: selectAnnotation
+                })
                 .appendTo(self.$annotations);
         });
 
@@ -11674,6 +11760,13 @@ requires
             });
         }
 
+        function selectAnnotation(event, data) {
+            self.options.position = data.in
+            self.options.points = [data.in, data.out];
+            setPosition();
+            setPoints();
+        }
+
         function setPoint(point) {
             self.options.points[point == 'in' ? 0 : 1] = self.options.position;
             self.$player[point == 'in' ? 1 : 2].options({
@@ -11685,13 +11778,16 @@ requires
                     position: self.options.position
                 });
             }
+            setPoints();
+        }
+
+        function setPoints() {
             $.each(self.$player, function(i, v) {
                 v.options({
                     points: self.options.points
                 });
             });
             $.each(self.$timeline, function(i, v) {
-                //Ox.print('points:', self.options.points)
                 v.options({
                     points: self.options.points
                 });