update video editor (maps, calendars)

source/Ox.UI/js/Video/Ox.AnnotationFolder.js

@@ -82,8 +82,7 @@ Ox.AnnotationFolder = function(options, self) {
         }
     });    
 
-    that.setElement(
-        Ox.CollapsePanel({
+    self.$panel = Ox.CollapsePanel({
             collapsed: self.options.collapsed,
             extras: Ox.merge(
                 self.widget ? [self.$defineButton] : [],
@@ -95,8 +94,9 @@ Ox.AnnotationFolder = function(options, self) {
         .addClass('OxAnnotationFolder')
         .bindEvent({
             toggle: toggleLayer
-        })
-    );
+        });
+
+    that.setElement(self.$panel);
     that.$content = that.$element.$content;
 
     if (self.widget) {
@@ -126,7 +126,11 @@ Ox.AnnotationFolder = function(options, self) {
                 })
                 .bindEvent({
                     select: function(data) {
-                        selectAnnotation({id: data.annotationId});
+                        if (!data.id || data.annotationIds.indexOf(self.options.selected) == -1) {
+                            self.$annotations.options({
+                                selected: !data.id ? '' : data.annotationIds[0]
+                            });
+                        }
                     }
                 })
                 .appendTo(self.$inner);
@@ -145,9 +149,11 @@ Ox.AnnotationFolder = function(options, self) {
                 .bindEvent({
                     // FIXME: should be select, not selectplace
                     selectplace: function(data) {
-                        Ox.print('ANNOTATION ID IS', data.annotationId)
-                        self.$annotations.options({selected: data.annotationId});
-                        // selectAnnotation({id: data.annotationId});
+                        if (!data.id || data.annotationIds.indexOf(self.options.selected) == -1) {
+                            self.$annotations.options({
+                                selected: !data.id ? '' : data.annotationIds[0]
+                            });
+                        }
                     }
                 })
                 .appendTo(self.$inner);
@@ -217,8 +223,6 @@ Ox.AnnotationFolder = function(options, self) {
             ? self.$outer : that.$content
         );
 
-    Ox.print('SAH', self.$annotations.height())
-
     self.options.selected && setTimeout(function() {
         selectAnnotation({id: self.options.selected});
     }, 0);
@@ -260,11 +264,9 @@ Ox.AnnotationFolder = function(options, self) {
             self.$inner.css({height: self.options.widgetSize + 'px'});
             self.$widget.options({height: self.options.widgetSize});
         }
-        //self.options.type == 'place' && self.$map.resizeMap();        
     }
 
     function dragend(e) {
-        //self.options.type == 'place' && self.$map.resizeMap();
         if (self.options.showWidget) {
             that.triggerEvent('resizewidget', {size: self.options.widgetSize});
         }
@@ -301,26 +303,33 @@ Ox.AnnotationFolder = function(options, self) {
 
     function getEvents() {
         var events = [];
-        getAnnotations().forEach(function(item) {
-            if (item.event && Ox.getIndexById(events, item.event.id) == -1) {
+        getAnnotations().filter(function(item) {
+            return !!item.event;
+        }).forEach(function(item) {
+            var index = Ox.getIndexById(events, item.event.id);
+            if (index == -1) {
                 events.push(Ox.extend({
-                    annotationId: item.id
-                }, item.event));
+                    annotationIds: [item.id]
+                }, item.event))
+            } else {
+                events[index].annotationIds.push(item.id);
             }
         });
-        if (!events.length) {
-            events = [{id: 'FOO', name: '20th Century', type: 'date', start: '1900', end: '2000'}]
-        }
         return events;
     }
 
     function getPlaces() {
         var places = [];
-        getAnnotations().forEach(function(item) {
-            if (item.place && Ox.getIndexById(places, item.place.id) == -1) {
+        getAnnotations().filter(function(item) {
+            return !!item.place;
+        }).forEach(function(item) {
+            var index = Ox.getIndexById(places, item.place.id);
+            if (index == -1) {
                 places.push(Ox.extend({
-                    annotationId: item.id
-                }, item.place));
+                    annotationIds: [item.id]
+                }, item.place))
+            } else {
+                places[index].annotationIds.push(item.id);
             }
         });
         return places;
@@ -335,17 +344,22 @@ Ox.AnnotationFolder = function(options, self) {
     }
 
     function selectAnnotation(data) {
+        Ox.print('SELECT annotation', data)
         var item = Ox.getObjectById(self.options.items, data.id);
         self.options.selected = item ? data.id : '';
-        self.widget && self.$defineButton.options({disabled: !self.options.selected});
-        ///*
-        if (self.options.type == 'place') {
-            self.$map.options({
-                    selected: item && item.place ? item.place.id : null
-                })
-                .panToPlace();
+        if (self.widget) {
+            if (self.options.type == 'event') {
+                self.$calendar.options({
+                        selected: item && item.event ? item.event.id : ''
+                    })
+                    .panToEvent();
+            } else {
+                self.$map.options({
+                        selected: item && item.place ? item.place.id : ''
+                    })
+                    .panToPlace();
+            }
         }
-        //*/
         that.triggerEvent('select', Ox.extend(data, item ? {
             'in': item['in'],
             out: item.out,
@@ -401,7 +415,7 @@ Ox.AnnotationFolder = function(options, self) {
     function updateWidget() {
         self.options.type == 'event'
             ? self.$calendar.options({events: getEvents()})
-            : self.$map.options({places: getPlaces()});
+            : self.$map.options({places: getPlaces()});        
     }
 
     self.setOption = function(key, value) {
@@ -437,6 +451,10 @@ Ox.AnnotationFolder = function(options, self) {
             if (value === '') {
                 self.editing = false;
             }
+            if (value && self.options.collapsed) {
+                Ox.print('HELLO??')
+                self.$panel.options({collapsed: false});
+            }
             self.$annotations.options({selected: value});
         } else if (key == 'sort') {
             self.sort = getSort();
@@ -499,7 +517,14 @@ Ox.AnnotationFolder = function(options, self) {
     that.updateItem = function(item) {
         var index = Ox.getIndexById(self.options.items, item.id);
         self.options.items[index] = item;
-        self.widget && updateWidget();
+        if (self.widget) {
+            updateWidget();
+            if (item[self.options.type]) {
+                // if updating has made the item match
+                // an event / a place, then select it
+                self.$widget.options({selected: item[self.options.type].id});
+            }
+        }
         updateAnnotations();
         return that;
     }