merging changes (timeline, annotations, urls)

source/Ox.UI/js/Core/Ox.URL.js

@@ -125,9 +125,12 @@ example.com/2001/2001 -> example.com/0062622/video/00:33:21
 example.com/2002/2002 -> example.com/calendar/2002/2002
     2002 is a valid duration, but no list view supports durations. Then it is
     read as a year, and we get calendar view with find *=2002
+example.com/@paris/london -> example.com/map/@paris/london
+    paris matches place ABC (case-insensitive), but (assuming) find *=london
+    does not match place ABC, "paris" becomes the map query
 example.com/@paris/paris -> example.com/map/ABC/paris
-    paris matches a place name (case-insensitive), so we get map view, zoomed to
+    paris matches place ABC (case-insensitive), so we get map view, zoomed to
-    Paris, with find *=paris
+    ABC/Paris, which is selected, with find *=paris
 example.com/@renaissance/renaissance -> example.com/calendar/ABC/renaissance
     renaissaince matches an event name (case-insensitive), so we get calendar
     view, zoomed to the Renaissance, with find *=renaissance
@@ -200,13 +203,9 @@ Ox.URL = function(options) {
 
     function constructFind(find) {
         return find.conditions.map(function(condition) {
-            var ret;
+            return condition.conditions
-            if (condition.conditions) {
+                ? '(' + constructFind(condition) + ')'
-                ret = '(' + constructFind(condition) + ')';
+                : constructCondition(condition);
-            } else {
-                ret = constructCondition(condition);
-            }
-            return ret;
         }).join(find.operator);
     }
 
@@ -275,10 +274,7 @@ Ox.URL = function(options) {
             type = Ox.isArray(findKey.type) ? findKey.type[0] : findKey.type,
             value = str,
             values = findKey.values;
-        if (type == 'enum') {
+        return type == 'enum' ? values[value] : value;
-            return values[value];
-        }
-        return value;
     }
 
     function decodeValue(str) {
@@ -531,6 +527,7 @@ Ox.URL = function(options) {
                 if (!state.span && /^[A-Z@]/.test(parts[0])) {
                     // test for span id or name
                     self.options.getSpan(state.item, state.view, parts[0].replace(/%20/g, ' '), function(span, view) {
+                        Ox.Log('Core', 'span/view', span, view)
                         if (span) {
                             if (!state.view) {
                                 // set list or item view

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

@@ -16,6 +16,7 @@ Ox.ArrayEditable = function(options, self) {
             items: [],
             position: -1,
             selected: '',
+            type: 'input',
             width: 256
         })
         .options(options || {})
@@ -40,10 +41,14 @@ Ox.ArrayEditable = function(options, self) {
 
     function anyclick(e) {
         var $target = $(e.target),
-            $parent = $target.parent();
+            $parent = $target.parent(),
-        $target.is(':not(input)') && that.gainFocus();
+            position = $parent.data('position');
+        !$target.is('.OxInput') && that.gainFocus();
         if ($parent.is('.OxEditableElement')) {
-            selectItem($parent.data('position'));
+            selectItem(
+                e.metaKey && position == self.selected
+                ? -1 : $parent.data('position')
+            );
         } else {
             selectNone();
         }
@@ -58,10 +63,11 @@ Ox.ArrayEditable = function(options, self) {
     }
 
     function doubleclick(e) {
-        var $parent = $(e.target).parent();
+        var $target = $(e.target),
+            $parent = $target.parent();
         if ($parent.is('.OxEditableElement')) {
             that.editItem(self.options.selected);
-        } else {
+        } else if(!$target.is('.OxInput')) {
             that.triggerEvent('add');
         }
     }
@@ -88,9 +94,10 @@ Ox.ArrayEditable = function(options, self) {
     function renderItems() {
         that.empty();
         self.options.items.forEach(function(item, i) {
-            i && $('<span>')
+            i && self.options.type == 'input'
-                .html(', ')
+                && $('<span>')
-                .appendTo(that);
+                    .html(', ')
+                    .appendTo(that);
             self.$items[i] = Ox.Editable({
                     editable: item.editable,
                     format: function(value) {
@@ -99,13 +106,18 @@ Ox.ArrayEditable = function(options, self) {
                     tooltip: 'Click to select' + (
                         item.editable ? ', doubleclick to edit' : ''
                     ),
-                    value: item.value
+                    type: self.options.type,
+                    value: item.value,
+                    width: self.options.type == 'input' ? 0 : self.options.width
                 })
                 .addClass(item.id == self.options.selected ? 'OxSelected' : '')
                 .data({position: i})
                 .bindEvent({
                     cancel: function(data) {
                         
+                    },
+                    edit: function(data) {
+                        that.triggerEvent('edit', data);
                     },
                     submit: function(data) {
                         submit(i, data.value);
@@ -159,6 +171,8 @@ Ox.ArrayEditable = function(options, self) {
     self.setOption = function(key, value) {
         if (key == 'items') {
             renderItems();
+        } else if (key == 'selected') {
+            that.selectItem(value);
         }
     }
 

source/Ox.UI/js/Form/Ox.Editable.js

@@ -63,6 +63,7 @@ Ox.Editable = function(options, self) {
 
     if (self.options.editing) {
         self.options.editing = false;
+        // edit will toggle self.options.editing
         edit();
     }
 
@@ -159,7 +160,7 @@ Ox.Editable = function(options, self) {
             }
             // fixme: why can't this be chained?
             setTimeout(function() {
-                self.$input.focusInput(true);
+                self.$input.focusInput(self.options.type == 'input');
             }, 0);
             that.$tooltip && that.$tooltip.options({title: ''});
             that.triggerEvent('edit', {editing: true});

source/Ox.UI/js/Form/Ox.Input.js

@@ -885,7 +885,7 @@ Ox.Input = function(options, self) {
         var length = self.$input.val().length,
             start = Ox.isNumber(arguments[0])
                 ? (arguments[0] < 0 ? length + arguments[0] : arguments[0])
-                : 0,
+                : arguments[0] ? 0 : length,
             stop = Ox.isNumber(arguments[1])
                 ? (arguments[1] < 0 ? length + arguments[1] : arguments[1])
                 : Ox.isNumber(arguments[0]) ? arguments[0]

source/Ox.UI/js/List/Ox.ItemInput.js

@@ -1,176 +0,0 @@
-// vim: et:ts=4:sw=4:sts=4:ft=javascript
-
-'use strict';
-
-/*@
-Ox.ItemInput <f:Ox.Element> ItemInput Object
-    () ->              <f> ItemInput Object
-    (options) ->       <f> ItemInput Object
-    (options, self) -> <f> ItemInput Object
-    options <o> Options object
-        type <s|textarea> can be textarea
-        value <s> default value
-        height <n|300> height
-        width <n|100> width
-    self    <o> shared private variable
-    cancel <!> triggered if cancel button is pressed
-    save <!> triggered if save button is pressed
-@*/
-
-Ox.ItemInput = function(options, self) {
-
-    self = self || {};
-    var that = Ox.Element({}, self)
-            .defaults({
-                type: 'textarea',
-                value: '',
-                height: 300,
-                width: 100
-            })
-            .options(options || {});
-
-    self.$input = Ox.Input({
-            changeOnKeypress: true,
-            height: self.options.height,
-            style: 'square',
-            type: self.options.type,
-            value: self.options.value,
-            width: self.options.width + 6
-        })
-        .bind({
-            mousedown: function(e) {
-                // keep mousedown from reaching list
-                e.stopPropagation();
-            }
-        })
-        .bindEvent({
-            change: function(data) {
-                self.options.height = data.value.split('\n').length * 13;
-                Ox.Log('List', 'HEIGHT', self.options.height)
-                self.$input.options({
-                    height: self.options.height
-                });
-                that.css({
-                    height: self.options.height + 16 + 'px'
-                });
-                that.parent().css({
-                    height: self.options.height + 24 + 'px'
-                });
-                self.$bar.css({
-                    marginTop: 8 + 'px'
-                });
-            }
-        })
-        .appendTo(that);
-
-    self.$bar = Ox.Bar({
-            size: 16
-        })
-        .css({
-            marginTop: self.options.height - 8 + 'px'
-        })
-        .appendTo(that);
-
-    Ox.Button({
-            style: 'symbol',
-            title: 'delete',
-            tooltip: 'Remove',
-            type: 'image'
-        })
-        .css({float: 'left'})
-        .bindEvent({
-            click: function() {
-                that.triggerEvent('remove');
-            }
-        })
-        .appendTo(self.$bar);
-
-    Ox.Button({
-            style: 'symbol',
-            title: 'check',
-            tooltip: 'Save',
-            type: 'image'
-        })
-        .css({float: 'right'})
-        .bindEvent({
-            click: function() {
-                that.triggerEvent('save', {
-                    value: self.$input.value()
-                });
-            }
-        })
-        .appendTo(self.$bar);
-
-    Ox.Button({
-            style: 'symbol',
-            title: 'view',
-            tooltip: 'Preview',
-            type: 'image'
-        })
-        .css({float: 'right'})
-        .bindEvent({
-            click: function() {
-                that.triggerEvent('preview');
-            }
-        })
-        .appendTo(self.$bar);
-
-    Ox.Button({
-            style: 'symbol',
-            title: 'close',
-            tooltip: 'Cancel',
-            type: 'image'
-        })
-        .css({float: 'right'})
-        .bindEvent({
-            click: function() {
-                that.triggerEvent('cancel');
-            }
-        })
-        .appendTo(self.$bar);
-
-    /*
-    that.append(
-        $input = Ox.Input({
-                height: self.options.height,
-                style: 'square',
-                type: self.options.type,
-                value: self.options.value,
-                width: self.options.width + 6
-            })
-            .bind({
-                mousedown: function(e) {
-                    // keep mousedown from reaching list
-                    e.stopPropagation();
-                }
-            })
-        )
-        .append(Ox.Element()
-            .append(Ox.Button({type: 'text', title: 'Cancel'})
-                .css('width', '42%')
-                .bindEvent({
-                    'click': function() {
-                        that.triggerEvent('cancel');
-                    }
-            }))
-            .append(Ox.Button({type: 'text', title: 'Save'})
-                .css('width', '42%')
-                .bindEvent({
-                    'click': function() {
-                        that.triggerEvent('save', {
-                            value: $input.value()
-                        });
-                    }
-            }))
-            .css({
-                'margin-top': self.options.height-8,
-                'height': '16px',
-                'text-align': 'right',
-            })
-        );
-    Ox.Log('List', $input);
-    */
-
-    return that;
-
-};

source/Ox.UI/js/List/Ox.List.js

@@ -1538,56 +1538,6 @@ Ox.List = function(options, self) {
         return that;
     };
 
-    /*@
-    editItem <f> turn item into edit form
-        (pos) -> <u> edit item at position
-        pos <n> position of item to edit
-    @*/
-    that.editItem = function(pos) {
-        var $input,
-            item = self.options.items[pos],
-            $item = self.$items[pos],
-            width = $item.width(), // fixme: don't lookup in DOM
-            height = $item.height();
-        $item
-            .height(height + 8 + 16)
-            .empty()
-            .addClass('OxEdit');
-
-        $input = Ox.ItemInput({
-            type: 'textarea',
-            value: item.value,
-            height: height,
-            width: width
-        }).bindEvent({
-            cancel: cancel,
-            remove: remove,
-            save: submit
-        }).appendTo($item.$element);
-        /*
-        setTimeout(function() {
-                $input.gainFocus();
-                $input.focus();
-        });
-        */
-        function cancel() {
-            $item.options('data', item);
-            that.triggerEvent('cancel', item);
-            loadItems();
-        }
-        function remove() {
-            that.triggerEvent('remove', item.id);
-        }
-        function submit(data) {
-            item.value = data.value;
-            //$input.loseFocus().remove();
-            // fixme: leaky, inputs remain in focus stack
-            $item.options('data', item);
-            that.triggerEvent('submit', item);
-            loadItems();
-        }
-    }
-
     /*@
     paste <f> paste data
         (data) -> <o> the list

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

@@ -26,7 +26,7 @@ Ox.AnnotationPanel = function(options, self) {
             id: '',
             items: [],
             range: 'all',
-            selected: -1,
+            selected: '',
             sort: 'position',
             title: '',
             type: 'text',
@@ -78,12 +78,14 @@ Ox.AnnotationPanel = function(options, self) {
         self.$annotations = Ox.Element();
     } else if (self.options.type == 'place') {
         self.$annotations = Ox.Element();
-    } else if (self.options.type == 'string') {
+    } else if (['string', 'text'].indexOf(self.options.type) > -1) {
         self.$annotations = Ox.ArrayEditable({
                 editable: self.options.editable,
                 items: getAnnotations(),
+                selected: self.options.selected,
                 sort: self.sort,
-                width: pandora.user.ui.annotationsSize - Ox.UI.SCROLLBAR_SIZE
+                width: self.options.width,
+                type: self.options.type == 'text' ? 'textarea' : 'input'
             })
             .bindEvent({
                 add: function(data) {
@@ -94,81 +96,25 @@ Ox.AnnotationPanel = function(options, self) {
                 'delete': function(data) {
                     that.triggerEvent('remove', {id: data.id});
                 },
-                select: function(data) {
+                edit: function(data) {
-                    selectAnnotation({ids: [data.id]});
+                    that.triggerEvent('edit', data);
-                },
-                submit: updateAnnotation
-            });
-    } else if (self.options.type == 'text') {
-        self.$annotations = Ox.List({
-                construct: function(data) {
-                    var $item = Ox.Element()
-                        .addClass('OxAnnotation OxTarget')
-                        .css({padding: '4px 4px 0 4px'})
-                        .append(
-                            Ox.Editable({
-                                type: 'textarea',
-                                width: self.options.width - 8,
-                                value: data.value
-                            })
-                            .bindEvent({
-                                edit: function() {
-                                    $item.removeClass('OxTarget');
-                                },
-                                submit: function(newData) {
-                                    $item.addClass('OxTarget');
-                                    updateAnnotation({
-                                        id: data.id,
-                                        value: newData.value 
-                                    });
-                                }
-                            })
-                        )
-                        .append($('<div>').css({height: '4px'}));
-                    return $item;
-                },
-                items: getAnnotations(),
-                max: 1,
-                min: 0,
-                sort: self.sort,
-                type: 'none', // fixme
-                unique: 'id'
-            })
-            .bindEvent({
-                cancel: function(item) {
-                    //reset in/out points
-                    selectAnnotation({ids: [item.id]});
-                },
-                open: function(data) {
-                    return;
-                    if (data.ids.length == 1) {
-                        var pos = Ox.getIndexById(self.$annotations.options('items'), data.ids[0]);
-                        self.$annotations.editItem(pos);
-                    }
-                },
-                'delete': function(data) {
-                    that.triggerEvent('remove', {id: data.ids[0]});
                 },
                 select: selectAnnotation,
-                submit: updateAnnotation
+                submit: editAnnotation
             });
     }
     self.$annotations.appendTo(that.$content);
 
-    /*
+    Ox.print('SOS', self.options.selected);
-    self.$annotations = Ox.Element()
+    self.options.selected && setTimeout(function() {
-        .appendTo(that.$content);
+        selectAnnotation({id: self.options.selected});
-    self.$annotation = [];
+    }, 0);
-    self.options.items.forEach(function(item, i) {
+
-        self.$annotation[i] = Ox.Element()
+    function editAnnotation(data) {
-            .addClass('OxAnnotation')
+        var item = Ox.getObjectById(self.options.items, data.id);
-            .html(item.value.replace(/\n/g, '<br/>'))
+        item.value = data.value;
-            .click(function() {
+        that.triggerEvent('submit', item);
-                clickAnnotation(i);
+    }
-            })
-            .appendTo(self.$annotations);
-    });
-    */
 
     function getAnnotations() {
         return self.options.items.filter(function(item) {
@@ -179,24 +125,20 @@ Ox.AnnotationPanel = function(options, self) {
             ) || (
                 self.options.range == 'position'
                 && item['in'] <= self.options.position
-                && item.out > self.options.position
+                && item.out >= self.options.position
             )
         });
     }
 
     function selectAnnotation(data) {
-        var item = Ox.getObjectById(self.options.items, data.ids[0]);
-        item && that.triggerEvent('select', {
-            'in': item['in'],
-            'out': item.out,
-            'layer': self.options.id
-        });
-    }
-
-    function updateAnnotation(data) {
         var item = Ox.getObjectById(self.options.items, data.id);
-        item.value = data.value;
+        that.triggerEvent('select', Ox.extend({
-        that.triggerEvent('submit', item);
+            id: data.id
+        }, item ? {
+            'in': item['in'],
+            out: item.out,
+            layer: self.options.id
+        } : {}));
     }
 
     function togglePanel() {
@@ -221,7 +163,7 @@ Ox.AnnotationPanel = function(options, self) {
                 items: getAnnotations()
             });
         } else if (key == 'sort') {
-            self.$annotations.options({sort: value});
+            self.$annotations.options('sort', value);
         }
     };
 
@@ -231,11 +173,7 @@ Ox.AnnotationPanel = function(options, self) {
     that.addItem = function(item) {
         var pos = 0;
         self.options.items.splice(pos, 0, item);
-        if (self.$annotations.addItem) {
+        self.$annotations.addItem(pos, item);
-            self.$annotations.addItem(pos, item);
-        } else {
-            self.$annotations.addItems(pos, [item]);
-        }
         self.$annotations.editItem(pos);
     };
 
@@ -243,7 +181,7 @@ Ox.AnnotationPanel = function(options, self) {
     deselectItems <f> deselectItems
     @*/
     that.deselectItems = function() {
-        self.$annotations.options('selected', []);
+        self.$annotations.options('selected', '');
     };
 
     /*@

source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js

@@ -16,6 +16,7 @@ Ox.BlockVideoTimeline = function(options, self) {
             results: [],
             showPointMarkers: false,
             showSubtitles: false,
+            state: 'default',
             subtitles: [],
             width: 0
         })
@@ -50,16 +51,16 @@ Ox.BlockVideoTimeline = function(options, self) {
     setCSS();
 
     self.$image = Ox.SmallVideoTimelineImage({
-            duration: self.options.duration,
+        duration: self.options.duration,
-            editing: self.options.editing,
+        editing: self.options.editing,
-            'in': self.options['in'],
+        'in': self.options['in'],
-            out: self.options.out,
+        out: self.options.out,
-            results: self.options.results,
+        results: self.options.results,
-            subtitles: self.options.showSubtitles ? self.options.subtitles : [],
+        subtitles: self.options.showSubtitles ? self.options.subtitles : [],
-            timeline: self.options.getImageURL,
+        timeline: self.options.getImageURL,
-            width: Math.round(self.options.duration),
+        width: Math.round(self.options.duration),
-            type: self.options.type
+        type: 'editor'
-        });
+    });
 
     Ox.loop(self.lines, function(i) {
         addLine(i);
@@ -217,6 +218,11 @@ Ox.BlockVideoTimeline = function(options, self) {
         updateTimelines();
     }
 
+    function setState() {
+        self.$image.options({state: self.options.state});
+        updateTimelines();        
+    }
+
     function setWidth() {
         self.lines = getLines();
 		setCSS();
@@ -266,6 +272,8 @@ Ox.BlockVideoTimeline = function(options, self) {
             setPositionMarker();
         } else if (key == 'results') {
             setResults();
+        } else if (key == 'state') {
+            setState();
         } else if (key == 'width') {
             setWidth();
         }

source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js

@@ -6,11 +6,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
     var that = Ox.Element({}, self)
         .defaults({
             duration: 0,
-            editing: false,
             'in': 0,
             out: 0,
             results: [],
-            selected: false,
+            state: 'default',
             subtitles: [],
             timeline: '',
             width: 256,
@@ -102,8 +101,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         .appendTo(that.$element);
 
     function getImageURL(image, callback) {
-        var width = image == 'results' || image == 'selection' ?
+        var width = image == 'results' || image == 'selection'
-                self.options.width : self.imageWidth,
+                ? self.options.width : self.imageWidth,
             height = self.imageHeight,
             canvas = $('<canvas>')
                 .attr({
@@ -125,9 +124,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                     ) + 1;
                 Ox.loop(left, right, function(x) {
                     Ox.loop(top, bottom, function(y) {
-                        var alpha = self.options.type == 'player' ? 128
+                        var alpha = self.options.type == 'editor'
-                                : (y == top || y == bottom - 1) ? 255 : 64,
+                                && (y == top || y == bottom - 1) ? 192 : 64,
-                            color = Ox.Theme[self.theme].timeline.result,
+                            color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1
+                                ? [0, 0, 0] : [255, 255, 0],
                             index = x * 4 + y * 4 * width;
                         data[index] = color[0];
                         data[index + 1] = color[1];
@@ -145,15 +145,14 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                 ) + 1,
                 top = 0,
                 bottom = height,
-                rgb = self.options.editing ? [128, 255, 255] : [255, 255, 255];
+                rgb = self.options.state == 'editing' ? [[0, 0, 128], [128, 128, 255]]
+                    : self.options.state == 'selected' ? [[0, 128, 0], [128, 255, 128]]
+                    : [[0, 0, 0], [255, 255, 255]];
             Ox.loop(left, right, function(x) {
                 Ox.loop(top, bottom, function(y) {
-                    var alpha = self.options.type == 'player' ? 128
+                    var alpha = self.options.type == 'editor'
-                            : (y == top || y == bottom - 1) ? 255 : 255,
+                            && (y == top || y == bottom - 1) ? 192 : 64,
-                        color = Ox.Theme[self.theme].timeline[
+                        color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1],
-                            self.options.editing ? 'editing'
-                            : self.options.selected ? 'selected' : 'default'
-                        ],
                         index = x * 4 + y * 4 * width;
                     data[index] = color[0];
                     data[index + 1] = color[1];
@@ -209,6 +208,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
             self.$subtitles.attr({
                 src: getImageURL('subtitles')
             });
+        } else if (key == 'state') {
+            self.$selection.attr({
+                src: getImageURL('selection')
+            });
         } else if (key == 'width') {
             that.css({width: value + 'px'});
             self.$results

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -40,8 +40,10 @@ Ox.VideoEditor = function(options, self) {
                 posterFrame: 0,
                 posterFrameControls: false,
                 resolution: 0,
+                selected: '',
                 showAnnotations: false,
                 showLargeTimeline: true,
+                state: 'default',
                 subtitles: [],
                 tooltips: false,
                 videoRatio: 16/9,
@@ -155,6 +157,8 @@ Ox.VideoEditor = function(options, self) {
         margin: 8,
     });
 
+    Ox.print('VIDEO EDITOR OPTIONS', self.options)
+
     self.words = [];
     Ox.forEach(Ox.count(Ox.words(self.options.subtitles.map(function(subtitle) {
         return subtitle.text;
@@ -284,6 +288,7 @@ Ox.VideoEditor = function(options, self) {
             results: find(self.options.find),
             showPointMarkers: true,
             showSubtitles: true,
+            state: self.options.state,
             subtitles: self.options.subtitles,
             videoId: self.options.videoId,
             width: self.sizes.timeline[1].width
@@ -306,6 +311,8 @@ Ox.VideoEditor = function(options, self) {
     self.$annotationPanel = [];
 
     self.options.layers.forEach(function(layer, i) {
+        var item = Ox.getObjectById(layer.items, self.options.selected),
+            selected = item ? item.id : '';
         self.$annotationPanel[i] = Ox.AnnotationPanel(
                 Ox.extend({
                     font: self.options.annotationsFont,
@@ -313,6 +320,7 @@ Ox.VideoEditor = function(options, self) {
                     out: self.options.out,
                     position: self.options.position,
                     range: self.options.annotationsRange,
+                    selected: selected,
                     sort: self.options.annotationsSort,
                     width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE
                 }, layer)
@@ -324,6 +332,9 @@ Ox.VideoEditor = function(options, self) {
                     data.out = self.options.out;
                     that.triggerEvent('addannotation', data);
                 },
+                edit: function(data) {
+                    setState(data.editing ? 'editing' : 'selected');
+                },
                 remove: function(data) {
                     that.triggerEvent('removeannotation', {
                         id: data.id,
@@ -331,14 +342,16 @@ Ox.VideoEditor = function(options, self) {
                     });
                 },
                 select: function(data) {
-                    self.options.layers.forEach(function(layer_, i_) {
+                    if (data.id) {
-                        if (i_ != i) {
+                        self.options.layers.forEach(function(layer_, i_) {
-                            // FIXME: the way AnnotationPanel is set up,
+                            if (i_ != i) {
-                            // it does not actually have that method
+                                self.$annotationPanel[i_].deselectItems();
-                            // self.$annotationPanel[i_].deselectItems();
+                            }
-                        }
+                        });
-                    });
+                        selectAnnotation(data);
-                    selectAnnotation(data);
+                    } else {
+                        // ...
+                    }
                 },
                 submit: editAnnotation
             })
@@ -671,50 +684,52 @@ Ox.VideoEditor = function(options, self) {
         })
         .appendTo(self.$annotationsbar);
 
-    that.$element = Ox.SplitPanel({
+    that.setElement(
-        elements: [
+        Ox.SplitPanel({
-            {
+            elements: [
-                element: Ox.SplitPanel({
+                {
-                    elements: [
+                    element: Ox.SplitPanel({
-                        {
+                        elements: [
-                            element: self.$videobar,
+                            {
-                            size: 16
+                                element: self.$videobar,
-                        },
+                                size: 16
-                        {
+                            },
-                            element: self.$editor
+                            {
-                        }
+                                element: self.$editor
-                    ],
+                            }
-                    orientation: 'vertical'
+                        ],
-                })
+                        orientation: 'vertical'
-            },
+                    })
-            {
+                },
-                collapsed: !self.options.showAnnotations,
+                {
-                collapsible: true,
+                    collapsed: !self.options.showAnnotations,
-                element: Ox.SplitPanel({
+                    collapsible: true,
-                    elements: [
+                    element: Ox.SplitPanel({
-                        {
+                        elements: [
-                            element: self.$annotationsbar,
+                            {
-                            size: 16
+                                element: self.$annotationsbar,
-                        },
+                                size: 16
-                        {
+                            },
-                            element: self.$annotations,
+                            {
-                        }
+                                element: self.$annotations,
-                    ],
+                            }
-                    orientation: 'vertical'
+                        ],
-                })
+                        orientation: 'vertical'
-                .bindEvent({
+                    })
-                    resize: resizeAnnotations,
+                    .bindEvent({
-                    resizeend: resizeendAnnotations,
+                        resize: resizeAnnotations,
-                    toggle: toggleAnnotations
+                        resizeend: resizeendAnnotations,
-                }),
+                        toggle: toggleAnnotations
-                resizable: true,
+                    }),
-                resize: [192, 256, 320, 384],
+                    resizable: true,
-                size: self.options.annotationsSize,
+                    resize: [192, 256, 320, 384],
-                tooltip: self.options.tooltips ? 'annotations' : false
+                    size: self.options.annotationsSize,
-            }
+                    tooltip: self.options.tooltips ? 'annotations' : false
-        ],
+                }
-        orientation: 'horizontal'
+            ],
-    });
+            orientation: 'horizontal'
+        })
+    );
 
     // we need a timeout so that a chained bindEvent
     // actually catches the event
@@ -864,9 +879,9 @@ Ox.VideoEditor = function(options, self) {
         //Ox.Log('Video', 'getSizes', scrollbarIsVisible, height, self.options.height, size)
         return (!scrollbarIsVisible && height > self.options.height - 16) ? getSizes(true) : size;
         function getHeight() {
-            return size.player[0].height + self.controlsHeight +
+            return size.player[0].height + self.controlsHeight
-                size.timeline[0].height + lines * 16 +
+                + size.timeline[0].height + lines * 16
-                (lines + 3) * self.margin;
+                + (lines + 3) * self.margin;
         }
     }
 
@@ -920,9 +935,15 @@ Ox.VideoEditor = function(options, self) {
     }
 
     function selectAnnotation(data) {
-        //setPosition(data['in']);
+        self.options.annotationsRange != 'position' && setPosition(data['in']);
-        setPoint('in', data['in']);
+        setState(data.id ? 'selected' : 'default');
-        setPoint('out', data.out);
+        that.triggerEvent('select', {
+            id: data.id || ''
+        });
+        if (data.id) {
+            setPoint('in', data['in']);
+            setPoint('out', data.out);
+        }
     }
 
     function select(type) {
@@ -930,9 +951,12 @@ Ox.VideoEditor = function(options, self) {
         setPoints();
     }
 
-    function setPoint(point, position) {
+    function setPoint(point, position, annotation) {
         var otherPoint = point == 'in' ? 'out' : 'in';
         self.options[point] = position;
+        if (self.options.state == 'selected') {
+            setState('default');
+        }
         self.$player.forEach(function($player) {
             $player.options(point, self.options[point]);
         });
@@ -1000,6 +1024,11 @@ Ox.VideoEditor = function(options, self) {
         });
     }
 
+    function setState(state) {
+        self.options.state = state;
+        self.$timeline[1].options({state: state});
+    }
+
     function submitFindInput(value, hasPressedEnter) {
         self.options.find = value;
         self.results = find(self.options.find);

source/Ox.UI/themes/classic/css/classic.css

@@ -340,10 +340,6 @@ Forms
     background: -webkit-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
 }
 
-.OxThemeClassic .OxEditableElement.OxSelected {
-    background: rgb(208, 208, 208);
-}
-
 /*
 ================================================================================
 Images
@@ -743,6 +739,13 @@ Video
     background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(192, 192, 192, 1));
 }
 
+.OxThemeClassic .OxAnnotationPanel .OxEditableElement.OxSelected {
+    background: rgb(192, 255, 192);
+}
+.OxThemeClassic .OxAnnotationPanel .OxEditableElement input {
+    background: rgb(192, 192, 255);
+}
+
 /*
 ================================================================================
 Miscellaneous
@@ -775,7 +778,10 @@ Miscellaneous
     -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
-.OxThemeClassic ::selection {
+.OxThemeClassic ::selection,
+.OxThemeClassic ::-moz-selection,
+.OxThemeClassic ::-o-selection,
+.OxThemeClassic ::-webkit-selection {
     background: rgb(192, 192, 192);
     //color: rgb(255, 255, 255);
 }

source/Ox.UI/themes/modern/css/modern.css

@@ -760,6 +760,12 @@ Video
     //display: none;
 }
 
+.OxThemeModern .OxAnnotationPanel .OxEditableElement.OxSelected {
+    background: rgb(0, 128, 0);
+}
+.OxThemeModern .OxAnnotationPanel .OxEditableElement input {
+    background: rgb(64, 64, 192);
+}
 
 /*
 ================================================================================

source/Ox/js/Collection.js

@@ -104,8 +104,8 @@ Ox.filter <f> Filters a collection by a given condition
     objects and strings.
     > Ox.filter([2, 1, 0], function(v, i) { return v == i; })
     [1]
-    > Ox.keys(Ox.filter({a: 'c', b: 'b', c: 'a'}, function(v, k) { return v == k; }))
+    > Ox.filter({a: 'c', b: 'b', c: 'a'}, function(v, k) { return v == k; })
-    ['b']
+    {b: 'b'}
     > Ox.filter(' foo bar ', function(v) { return v != ' '; })
     'foobar'
 @*/
@@ -113,14 +113,14 @@ Ox.filter <f> Filters a collection by a given condition
 Ox.filter = function(col, fn) {
     var type = Ox.typeOf(col),
         ret = type == 'array' ? [] : type == 'object' ? {} : '';
-    Ox.forEach(col, function(v, k) {
+    Ox.forEach(col, function(val, key) {
-        if (fn(v, k)) {
+        if (fn(val, key)) {
             if (type == 'array') {
-                ret.push(v);
+                ret.push(val);
             } else if (type == 'object') {
-                ret[k] = v;
+                ret[key] = val;
             } else {
-                ret += v;
+                ret += val;
             }
         }
     });
@@ -384,7 +384,7 @@ Ox.last = function(arr, val) {
 Ox.len <f> Returns the length of an array, function, object or string
     Not to be confused with <code>Ox.length</code>, which is the
     <code>length</code> property of the <code>Ox</code> function
-    (<code>1</code>).
+    (<code>1</code>). // FIXME: 1 becomes 67 in DocPanel
     > Ox.len([1, 2, 3])
     3
     > Ox.len([,])
@@ -455,7 +455,6 @@ Ox.makeArray <f> Takes an array-like object and returns a true array
     > Ox.makeArray({0: "f", 1: "o", 2: "o", length: 3})
     ["f", "o", "o"]
 @*/
-
 Ox.makeArray = /MSIE/.test(navigator.userAgent)
     ? function(col) {
         var i, len, ret = [];
@@ -632,7 +631,6 @@ Ox.shuffle <f> Randomizes the order of values within a collection
     > Ox.shuffle('123').length
     3
 @*/
-
 Ox.shuffle = function(col) {
     var keys, ret, type = Ox.typeOf(col), values;
     function sort() {