From 8384fcc9135a8d3c03d3a06e29dabaaf3ffbf268 Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Fri, 13 Jan 2012 21:55:47 +0530
Subject: [PATCH] update video editor (places, events)

---
 source/Ox.UI/css/Ox.UI.css                   |  14 +-
 source/Ox.UI/js/Calendar/Ox.Calendar.js      | 158 ++++++------
 source/Ox.UI/js/Calendar/Ox.ListCalendar.js  |   6 +-
 source/Ox.UI/js/Core/Ox.Request.js           |   2 +-
 source/Ox.UI/js/Form/Ox.ArrayEditable.js     |   7 +-
 source/Ox.UI/js/Form/Ox.ArrayInput.js        |   2 +
 source/Ox.UI/js/Map/Ox.ListMap.js            |   4 +-
 source/Ox.UI/js/Map/Ox.Map.js                |  10 +-
 source/Ox.UI/js/Panel/Ox.CollapsePanel.js    |   1 +
 source/Ox.UI/js/Video/Ox.AnnotationFolder.js | 250 +++++++++++++++----
 source/Ox.UI/js/Video/Ox.AnnotationPanel.js  |  25 +-
 source/Ox.UI/js/Video/Ox.VideoEditor.js      |   8 +
 source/Ox.UI/themes/classic/css/classic.css  |   3 +-
 13 files changed, 346 insertions(+), 144 deletions(-)

diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css
index bc333c9d..7f8f93a0 100644
--- a/source/Ox.UI/css/Ox.UI.css
+++ b/source/Ox.UI/css/Ox.UI.css
@@ -148,6 +148,10 @@ Bars
 .OxResizebar {
     z-index: 2;
 }
+.OxResizebar:hover > .OxSpace {
+    //background: rgba(128, 128, 128, 0.25);
+}
+
 .OxResizebar.OxHorizontal {
     width: 100%;
     height: 5px;
@@ -293,34 +297,27 @@ Calendar
 }
 .OxCalendar .OxCalendarControl.OxCalendarButtonCenter {
     left: 24px;
-    bottom: 56px;
 }
 .OxCalendar .OxCalendarControl.OxCalendarButtonDown {
     left: 24px;
-    bottom: 36px;
 }
 .OxCalendar .OxCalendarControl.OxCalendarButtonLeft {
     left: 4px;
-    bottom: 56px;
 }
 .OxCalendar .OxCalendarControl.OxCalendarButtonRight {
     left: 44px;
-    bottom: 56px;
 }
 .OxCalendar .OxCalendarControl.OxCalendarButtonUp {
     left: 24px;
-    bottom: 76px;
 }
 
 .OxCalendar .OxEventControl.OxEventName {
     right: 24px;
-    bottom: 36px;
     width: 128px;
     text-overflow: ellipsis;
 }
 .OxCalendar .OxEventControl.OxEventDeselectButton {
     right: 4px;
-    bottom: 36px;
 }
 
 .OxCalendar .OxRange .OxArrow {
@@ -1695,6 +1692,9 @@ Panels
 .OxCollapsePanel > .OxBar > .OxExtras {
     float: right;
 }
+.OxCollapsePanel > .OxBar > .OxExtras > * {
+    float: left;
+}
 .OxCollapsePanel > .OxBar > .OxExtras > .OxButton {
     //position: absolute;
     //right: 0px;
diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js
index 14e5e7ee..ad819409 100644
--- a/source/Ox.UI/js/Calendar/Ox.Calendar.js
+++ b/source/Ox.UI/js/Calendar/Ox.Calendar.js
@@ -38,7 +38,9 @@ Ox.Calendar = function(options, self) {
             range: [1000, 3000],
             selected: '',
             showControls: false,
+            showToolbar: false,
             showTypes: ['date', 'place', 'person', 'other'],
+            showZoombar: false,
             width: 256,
             zoom: 8
         })
@@ -289,61 +291,65 @@ Ox.Calendar = function(options, self) {
         }
     ];
 
-    self.$toolbar = Ox.Bar({
-            size: 24
-        })
-        .appendTo(that);
+    if (self.options.showToolbar) {
 
-    self.$typeSelect = Ox.Select({
-            items: [
-                {id: 'date', title: 'Dates'},
-                {id: 'place', title: 'Places'},
-                {id: 'person', title: 'People'},
-                {id: 'other', title: 'Other'}
-            ],
-            max: -1,
-            min: 1,
-            title: 'Show...',
-            value: self.options.showTypes,
-            width: 80
-        })
-        .css({float: 'left', margin: '4px'})
-        .bindEvent({
-            change: function(data) {
-                self.options.showTypes = data.value;
-                getLines();
-                renderCalendar();
-            }
-        })
-        .appendTo(self.$toolbar);
+        self.$toolbar = Ox.Bar({
+                size: 24
+            })
+            .appendTo(that);
 
-    self.$dateInput = Ox.Input({
-            clear: true,
-            //placeholder: 'Date',
-            value: Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true),
-            width: 160
-        })
-        .css({float: 'right', margin: '4px'})
-        .bindEvent({
-            change: function(data) {
-                panTo(Ox.parseDate(data.value, true))
-            }
-        })
-        .appendTo(self.$toolbar);
+        self.$typeSelect = Ox.Select({
+                items: [
+                    {id: 'date', title: 'Dates'},
+                    {id: 'place', title: 'Places'},
+                    {id: 'person', title: 'People'},
+                    {id: 'other', title: 'Other'}
+                ],
+                max: -1,
+                min: 1,
+                title: 'Show...',
+                value: self.options.showTypes,
+                width: 80
+            })
+            .css({float: 'left', margin: '4px'})
+            .bindEvent({
+                change: function(data) {
+                    self.options.showTypes = data.value;
+                    getLines();
+                    renderCalendar();
+                }
+            })
+            .appendTo(self.$toolbar);
+
+        self.$dateInput = Ox.Input({
+                clear: true,
+                //placeholder: 'Date',
+                value: Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true),
+                width: 160
+            })
+            .css({float: 'right', margin: '4px'})
+            .bindEvent({
+                change: function(data) {
+                    panTo(Ox.parseDate(data.value, true))
+                }
+            })
+            .appendTo(self.$toolbar);
+
+    }
 
     self.$scalebar = Ox.Element()
         .addClass('OxTimeline')
         .css({
             posision: 'absolute',
-            top: '24px'
+            top: (self.options.showToolbar * 24) + 'px'
         })
         .appendTo(that);
 
     self.$container = Ox.Element()
         .addClass('OxCalendarContainer')
         .css({
-            top: '40px',
-            bottom: '16px'
+            top: (self.options.showToolbar * 24) + 16 + 'px',
+            bottom: (self.options.showZoombar * 16) + 'px'
         })
         .bind({
             mouseleave: mouseleave,
@@ -372,17 +378,36 @@ Ox.Calendar = function(options, self) {
         .addClass('OxTimeline')
         .css({
             posision: 'absolute',
-            bottom: '16px'
+            bottom: (self.options.showZoombar * 16) + 'px'
         })
         .appendTo(that);
 
-    self.$zoombar = Ox.Element()
-        .css({
-            position: 'absolute',
-            bottom: 0,
-            height: '16px'
-        })
-        .appendTo(that);
+    if (self.options.showZoombar) {
+
+        self.$zoombar = Ox.Element()
+            .css({
+                position: 'absolute',
+                bottom: 0,
+                height: '16px'
+            })
+            .appendTo(that);
+
+        self.$zoomInput = Ox.Range({
+                arrows: true,
+                changeOnDrag: true,
+                max: self.maxZoom,
+                min: 0,
+                size: self.options.width,
+                thumbSize: 32,
+                thumbValue: true,
+                value: self.options.zoom
+            })
+            .bindEvent({
+                change: changeZoom
+            })
+            .appendTo(self.$zoombar);
+
+    }
 
     self.$controls = {
         center: Ox.Button({
@@ -390,6 +415,7 @@ Ox.Calendar = function(options, self) {
                 type: 'image'
             })
             .addClass('OxCalendarControl OxCalendarButtonCenter')
+            .css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
             .bindEvent({
                 singleclick: function() {
                     // ...
@@ -404,6 +430,7 @@ Ox.Calendar = function(options, self) {
                 type: 'image'
             })
             .addClass('OxCalendarControl OxCalendarButtonDown')
+            .css({bottom: 20 + (self.options.showZoombar * 16) + 'px'})
             .bindEvent({
                 singleclick: function() {
                     scrollBy(1);
@@ -418,6 +445,7 @@ Ox.Calendar = function(options, self) {
                 type: 'image'
             })
             .addClass('OxCalendarControl OxCalendarButtonLeft')
+            .css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
             .bindEvent({
                 singleclick: function() {
                     panBy(-self.$content.width() / 2 * getSecondsPerPixel() * 1000);
@@ -433,6 +461,7 @@ Ox.Calendar = function(options, self) {
                 type: 'image'
             })
             .addClass('OxCalendarControl OxCalendarButtonRight')
+            .css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
             .bindEvent({
                 singleclick: function() {
                     panBy(self.$content.width() / 2 * getSecondsPerPixel() * 1000);
@@ -447,6 +476,7 @@ Ox.Calendar = function(options, self) {
                 title: 'up',
                 type: 'image'
             })
+            .css({bottom: 60 + (self.options.showZoombar * 16) + 'px'})
             .addClass('OxCalendarControl OxCalendarButtonUp')
             .bindEvent({
                 singleclick: function() {
@@ -465,6 +495,7 @@ Ox.Calendar = function(options, self) {
     self.$eventControls = {
         name: Ox.Label()
             .addClass('OxEventControl OxEventName')
+            .css({bottom: 20 + (self.options.showZoombar * 16) + 'px'})
             .bindEvent({
                 singleclick: function() {
                     panToSelected();
@@ -479,6 +510,7 @@ Ox.Calendar = function(options, self) {
                 type: 'image',
             })
             .addClass('OxEventControl OxEventDeselectButton')
+            .css({bottom: 20 + (self.options.showZoombar * 16) + 'px'})
             .bindEvent({
                 click: function() {
                     selectEvent('');
@@ -490,21 +522,6 @@ Ox.Calendar = function(options, self) {
         $eventControl.css({opacity: 0}).hide();
     });
 
-    self.$zoomInput = Ox.Range({
-            arrows: true,
-            changeOnDrag: true,
-            max: self.maxZoom,
-            min: 0,
-            size: self.options.width,
-            thumbSize: 32,
-            thumbValue: true,
-            value: self.options.zoom
-        })
-        .bindEvent({
-            change: changeZoom
-        })
-        .appendTo(self.$zoombar);
-
     self.$tooltip = Ox.Tooltip({
             animate: false
         })
@@ -1008,7 +1025,8 @@ Ox.Calendar = function(options, self) {
     function renderCalendar() {
         self.contentHeight = Math.max(
             self.lineEvents.length * 16 + 16, // fixme: why +16 ?,
-            self.options.height - 56 // 24 + 16 + 16
+            self.options.height - (self.options.showToolbar * 24) - 16 - 16
+            // self.options.height - 56 // 24 + 16 + 16
         );
         self.$content.css({height: self.contentHeight + 'px'});
         $('.OxBackground').empty();
@@ -1017,7 +1035,7 @@ Ox.Calendar = function(options, self) {
         renderTimelines();
         renderOverlay();
         renderEvents();
-        self.$dateInput.value(
+        self.options.showToolbar && self.$dateInput.value(
             Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true)
         );
     }
@@ -1045,7 +1063,7 @@ Ox.Calendar = function(options, self) {
         Ox.Element()
             .addClass('OxOverlay')
             .css({
-                bottom: '16px'
+                bottom: (self.options.showZoombar * 16) + 'px'
             })
             .append(
                 $('<div>').css({
@@ -1169,7 +1187,7 @@ Ox.Calendar = function(options, self) {
 
     function zoomTo(zoom) {
         self.options.zoom = Ox.limit(zoom, 0, self.maxZoom);
-        self.$zoomInput.value(self.options.zoom);
+        self.options.showZoombar && self.$zoomInput.value(self.options.zoom);
         renderCalendar();
     }
 
@@ -1279,7 +1297,7 @@ Ox.Calendar = function(options, self) {
     that.resizeCalendar = function() {
         self.options.width = that.width();
         self.options.height = that.height();
-        self.$zoomInput.options({size: self.options.width});
+        self.options.showZoombar && self.$zoomInput.options({size: self.options.width});
         renderCalendar();
         return that;
     };
diff --git a/source/Ox.UI/js/Calendar/Ox.ListCalendar.js b/source/Ox.UI/js/Calendar/Ox.ListCalendar.js
index 63fe0908..f81d80ef 100644
--- a/source/Ox.UI/js/Calendar/Ox.ListCalendar.js
+++ b/source/Ox.UI/js/Calendar/Ox.ListCalendar.js
@@ -233,6 +233,8 @@ Ox.ListCalendar = function(options, self) {
             events: Ox.clone(self.options.events, true),
             height: self.options.height,
             showControls: self.options.showControls,
+            showToolbar: true,
+            showZoombar: true,
             width: self.options.width - 514,
             zoom: 4
         })
@@ -331,7 +333,7 @@ Ox.ListCalendar = function(options, self) {
         .bindEvent({
             change: function(data) {
                 Ox.Log('Calendar', 'CHANGE', data);
-                var exists = false, values
+                var exists = false, values;
                 if (['name', 'alternativeNames'].indexOf(data.id) > -1) {
                     exists = '';
                     values = data.id == 'name' ? [data.data.value] : data.data.value;
@@ -624,4 +626,4 @@ Ox.ListCalendar = function(options, self) {
 
     return that;
 
-};
\ No newline at end of file
+};
diff --git a/source/Ox.UI/js/Core/Ox.Request.js b/source/Ox.UI/js/Core/Ox.Request.js
index c117118a..3d17a561 100644
--- a/source/Ox.UI/js/Core/Ox.Request.js
+++ b/source/Ox.UI/js/Core/Ox.Request.js
@@ -290,7 +290,7 @@ Ox.Request = (function() {
                         })
                         .open();
                         // fixme: change this to Send / Don't Send
-                    }, error == 'timeout' ? 250 : 0);
+                    }, error == 'timeout' ? 1000 : 0);
                 }
                 pending[options.id] = false;
             }
diff --git a/source/Ox.UI/js/Form/Ox.ArrayEditable.js b/source/Ox.UI/js/Form/Ox.ArrayEditable.js
index 844c2946..8c49747c 100644
--- a/source/Ox.UI/js/Form/Ox.ArrayEditable.js
+++ b/source/Ox.UI/js/Form/Ox.ArrayEditable.js
@@ -150,6 +150,7 @@ Ox.ArrayEditable = function(options, self) {
     }
 
     function selectItem(idOrPosition) {
+        Ox.print('???????', self.editing)
         if (Ox.isString(idOrPosition)) {
             self.options.selected = idOrPosition;
             self.selected = getSelectedPosition();
@@ -157,7 +158,7 @@ Ox.ArrayEditable = function(options, self) {
             self.selected = idOrPosition;
             self.options.selected = getSelectedId();
         }
-        if (self.options.selected == '' && self.editing) {
+        if (/*self.options.selected == '' && */self.editing) {
             self.editing = false;
             that.blurItem();
         }
@@ -253,13 +254,15 @@ Ox.ArrayEditable = function(options, self) {
     };
 
     that.blurItem = function() {
+        /*
         if (self.options.selected) {
             self.$items[self.selected].options({editing: false});
         } else {
+        */
             self.$items.forEach(function($item) {
                 $item.options({editing: false});
             });
-        }
+        //}
     };
 
     that.editItem = function() {
diff --git a/source/Ox.UI/js/Form/Ox.ArrayInput.js b/source/Ox.UI/js/Form/Ox.ArrayInput.js
index 207d4648..16e5c5d5 100644
--- a/source/Ox.UI/js/Form/Ox.ArrayInput.js
+++ b/source/Ox.UI/js/Form/Ox.ArrayInput.js
@@ -36,6 +36,8 @@ Ox.ArrayInput = function(options, self) {
         addInput(i, value);
     });
 
+    self.options.value = getValue();
+
     function addInput(index, value, focus) {
         Ox.Log('Form', 'add', index)
         self.$element.splice(index, 0, Ox.Element()
diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js
index c3f22db5..9e436d77 100644
--- a/source/Ox.UI/js/Map/Ox.ListMap.js
+++ b/source/Ox.UI/js/Map/Ox.ListMap.js
@@ -479,7 +479,7 @@ Ox.ListMap = function(options, self) {
             change: function(data) {
                 var isResult = self.selectedPlace[0] == '_';
                 if (!self.isAsync) {
-                    
+                    // ...
                 } else {
                     !isResult && editPlace(['type'])
                 }
@@ -508,7 +508,7 @@ Ox.ListMap = function(options, self) {
                 // fixme: if type is set, no change event fires
                 var isResult = self.selectedPlace[0] == '_';
                 if (!self.isAsync) {
-                    
+                    // ...
                 } else {
                     !isResult && editPlace([v])
                 }
diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js
index 4bd46416..36327a3d 100644
--- a/source/Ox.UI/js/Map/Ox.Map.js
+++ b/source/Ox.UI/js/Map/Ox.Map.js
@@ -108,9 +108,9 @@ Ox.Map = function(options, self) {
             showControls: false,
             showLabels: false,
             showTypes: false,
-            statusbar: false,
-            toolbar: false,
-            zoombar: false
+            statusbar: false, // FIXME: showStatusbar
+            toolbar: false, // FIXME: showToolbar
+            zoombar: false // FIXME: showZoombar
             // fixme: width, height
         })
         .options(options || {})
@@ -1112,6 +1112,7 @@ Ox.Map = function(options, self) {
 	}
 
     function selectPlace(id, zoom) {
+        Ox.print('SELECT PLACE', id)
         // id can be null (deselect)
         var place,
             selected = getSelectedMarker();
@@ -1366,7 +1367,7 @@ Ox.Map = function(options, self) {
                 self.map.fitBounds(mapBounds);
             });
         } else if (key == 'selected') {
-            selectPlace(value);
+            selectPlace(value || null);
         } else if (key == 'type') {
             
         }
@@ -1477,6 +1478,7 @@ Ox.Map = function(options, self) {
             size: self.options.width
         });
         updateFormElements();
+        Ox.print('triggering google maps resize event, height', self.options.height)
         google.maps.event.trigger(self.map, 'resize');
 		return that;
     }
diff --git a/source/Ox.UI/js/Panel/Ox.CollapsePanel.js b/source/Ox.UI/js/Panel/Ox.CollapsePanel.js
index 8d17b3c4..462ff1f9 100644
--- a/source/Ox.UI/js/Panel/Ox.CollapsePanel.js
+++ b/source/Ox.UI/js/Panel/Ox.CollapsePanel.js
@@ -59,6 +59,7 @@ Ox.CollapsePanel = function(options, self) {
     if (self.options.extras.length) {
         self.$extras = Ox.Element()
             .addClass('OxExtras')
+            .css({width: self.options.extras.length * 16 + 1 + 'px'})
             .appendTo(self.$titlebar);
         self.options.extras.forEach(function($extra) {
             $extra.appendTo(self.$extras);
diff --git a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js
index 56a32076..df360803 100644
--- a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js
+++ b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js
@@ -32,32 +32,55 @@ Ox.AnnotationFolder = function(options, self) {
             position: 0,
             range: 'all',
             selected: '',
+            showWidget: false,
             sort: 'position',
             title: '',
             type: 'text',
             users: 'all',
+            widgetSize: 256,
             width: 0
         })
         .options(options || {});
 
+    Ox.print('SO', self.options)
+
     self.sort = getSort();
+    self.widget = self.options.type == 'event' ? 'Calendar'
+        : self.options.type == 'place' ? 'Map' : '';
 
     that.setElement(
         Ox.CollapsePanel({
             collapsed: self.options.collapsed,
-            extras: self.options.editable ? [
-                Ox.Button({
-                    id: 'add',
-                    style: 'symbol',
-                    title: 'add',
-                    tooltip: 'Add ' + self.options.item,
-                    type: 'image'
-                }).bindEvent({
-                    click: function(data) {
-                        that.triggerEvent('add', {value: ''});
-                    }
-                })
-            ] : [],
+            extras: Ox.merge(
+                self.widget ? [
+                    Ox.MenuButton({
+                        items: [
+                            {id: 'show', title: 'Show ' + self.widget, checked: true}
+                        ],
+                        style: 'square',
+                        title: 'set',
+                        type: 'image'
+                    })
+                    .bindEvent({
+                        click: function(data) {
+                            
+                        }
+                    })
+                ] : [],
+                self.options.editable ? [
+                    Ox.Button({
+                        id: 'add',
+                        style: 'symbol',
+                        title: 'add',
+                        tooltip: 'Add ' + self.options.item,
+                        type: 'image'
+                    }).bindEvent({
+                        click: function(data) {
+                            that.triggerEvent('add', {value: ''});
+                        }
+                    })
+                ] : []
+            ),
             size: 16,
             title: self.options.title
         })
@@ -68,62 +91,152 @@ Ox.AnnotationFolder = function(options, self) {
     );
     that.$content = that.$element.$content;
 
+    if (self.widget) {
+        self.widgetSize = self.options.showWidget * self.options.widgetSize;
+    }
+
     if (self.options.type == 'event') {
-        self.$annotations = Ox.Element();
-    } else if (self.options.type == 'place') {
-        self.$annotations = Ox.Element()
+        self.$outer = Ox.Element()
+            .css({
+                display: 'table-cell',
+                width: self.options.width + 'px',
+                //height: '256px'
+            });
+        self.$calendar = Ox.Calendar({
+                events: getEvents(),
+                height: self.widgetSize,
+                width: self.options.width
+            })
             .css({
                 width: self.options.width + 'px',
-                height: '256px'
-            });
-        Ox.print('PLACES::', self.places)
+                height: self.widgetSize + 'px'
+            })
+            .bindEvent({
+                select: function(data) {
+                    selectAnnotation({id: data.annotationId});
+                }
+            })
+            .appendTo(self.$outer);
+    } else if (self.options.type == 'place') {
+        Ox.print('SWS', self.widgetSize)
+        self.$outer = Ox.Element()
+            .css({
+                display: 'table-cell',
+                width: self.widgetSize + 'px',
+            })
+            .appendTo(that.$content);
+        self.$inner = Ox.Element()
+            .css({height: self.widgetSize + 'px', overflow: 'hidden'})
+            .appendTo(self.$outer);
         self.$map = Ox.Map({
                 places: getPlaces()
                 // showLabels: true
             })
+            .css({height: self.widgetSize + 'px'})
             .bindEvent({
+                // FIXME: should be select, not selectplace
                 selectplace: function(data) {
-                    selectAnnotation({id: data.annotationId});
+                    self.$annotations.options({selected: data.annotationId});
+                    // selectAnnotation({id: data.annotationId});
                 }
             })
-            .appendTo(self.$annotations);
-    } 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,
-                submitOnBlur: false,
-                width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
-                type: self.options.type == 'text' ? 'textarea' : 'input'
-            })
-            .bindEvent({
-                add: function(data) {
-                    that.triggerEvent('add', {value: data.value || ''});
-                },
-                blur: function() {
-                    that.triggerEvent('blur');
-                },
-                'delete': function(data) {
-                    that.triggerEvent('remove', {id: data.id});
-                },
-                edit: function() {
-                    self.editing = true;
-                    that.triggerEvent('edit');
-                },
-                select: selectAnnotation,
-                submit: submitAnnotation,
-                key_space: function() {
-                    that.triggerEvent('paused');
-                }
-            });
+            .appendTo(self.$inner);
     }
-    self.$annotations.appendTo(that.$content);
+
+    if (self.widget) {
+
+        self.$resizebar = Ox.Element({
+                tooltip: 'Drag to resize or click to toggle map' // fixme: update as w/ splitpanels
+            })
+            .addClass('OxResizebar OxHorizontal')
+            .css({
+                position: 'absolute',
+                top: self.options.widgetSize + 'px',
+                cursor: 'ns-resize'
+            })
+            .append($('<div>').addClass('OxSpace'))
+            .append($('<div>').addClass('OxLine'))
+            .append($('<div>').addClass('OxSpace'))
+            .bindEvent({
+                anyclick: toggleWidget,
+                dragstart: dragstart,
+                drag: drag,
+                dragend: dragend
+            })
+            .appendTo(self.$outer);         
+
+    }
+
+    self.$annotations = Ox.ArrayEditable({
+            editable: self.options.editable,
+            items: getAnnotations(),
+            selected: self.options.selected,
+            sort: self.sort,
+            submitOnBlur: false,
+            width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
+            type: self.options.type == 'text' ? 'textarea' : 'input'
+        })
+        //.css({marginTop: '256px'})
+        .bindEvent({
+            add: function(data) {
+                that.triggerEvent('add', {value: data.value || ''});
+            },
+            blur: function() {
+                that.triggerEvent('blur');
+            },
+            'delete': function(data) {
+                that.triggerEvent('remove', {id: data.id});
+            },
+            edit: function() {
+                self.editing = true;
+                that.triggerEvent('edit');
+            },
+            select: selectAnnotation,
+            submit: submitAnnotation,
+            key_space: function() {
+                that.triggerEvent('paused');
+            }
+        })
+        .appendTo(
+            ['event', 'place'].indexOf(self.options.type) > -1
+            ? self.$outer : that.$content
+        );
+
+    Ox.print('SAH', self.$annotations.height())
 
     self.options.selected && setTimeout(function() {
         selectAnnotation({id: self.options.selected});
     }, 0);
 
+    if (self.options.type == 'place') {
+        self.$annotations.find('.OxValue').each(function() {
+            var $element = $(this);
+            if (!Ox.getObject(self.options.items, 'value', $element.html()).place) {
+                $element.css({color: 'rgb(192, 64, 64)'});
+            }
+        });
+    }
+
+    function dragstart() {
+        self.drag = {
+            startSize: self.options.widgetSize
+        };
+    }
+
+    function drag(e) {
+        self.options.widgetSize = Ox.limit(
+            self.drag.startSize + e.clientDY, 128, 384
+        );
+        Ox.print('DRAG', self.options.widgetSize, e.clientDY);
+        self.$resizebar.css({top: self.options.widgetSize + 'px'});
+        self.$inner.css({height: self.options.widgetSize + 'px'});
+        self.$map.css({height: self.options.widgetSize + 'px'}).resizeMap();        
+    }
+
+    function dragend(e) {
+
+    }
+
     function getAnnotations() {
         return self.options.items.filter(function(item) {
             return self.editing && item.id == self.options.selected || (
@@ -145,6 +258,21 @@ Ox.AnnotationFolder = function(options, self) {
         });
     }
 
+    function getEvents() {
+        var events = [];
+        getAnnotations().forEach(function(item) {
+            if (item.event && Ox.getIndexById(events, item.event.id) == -1) {
+                events.push(Ox.extend({
+                    annotationId: item.id
+                }, item.event));
+            }
+        });
+        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) {
@@ -168,6 +296,14 @@ Ox.AnnotationFolder = function(options, self) {
     function selectAnnotation(data) {
         var item = Ox.getObjectById(self.options.items, data.id);
         self.options.selected = item ? data.id : '';
+        ///*
+        if (self.options.type == 'place') {
+            self.$map.options({
+                    selected: item && item.place ? item.place.id : null
+                })
+                .panToPlace();
+        }
+        //*/
         that.triggerEvent('select', Ox.extend(data, item ? {
             'in': item['in'],
             out: item.out,
@@ -190,6 +326,16 @@ Ox.AnnotationFolder = function(options, self) {
         that.triggerEvent('toggle', {collapsed: self.options.collapsed});
     }
 
+    function toggleWidget() {
+        self.options.showWidget = !self.options.showWidget;
+        self.widgetSize = self.options.showWidget * self.options.widgetSize;
+        self.$resizebar.animate({top: self.widgetSize + 'px'}, 250);
+        self.$inner.animate({height: self.widgetSize + 'px'}, 250);
+        self.$map.animate({height: self.widgetSize + 'px'}, 250, function() {
+            self.$map.resizeMap();
+        });
+    }
+
     self.setOption = function(key, value) {
         if (['in', 'out'].indexOf(key) > -1 && self.editing) {
             var index = Ox.getIndexById(self.options.items, self.options.selected);
diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js
index d69657b0..7af65d2e 100644
--- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js
+++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js
@@ -9,13 +9,17 @@ Ox.AnnotationPanel = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
         .defaults({
+            calendarSize: 256,
             editable: false,
             font: 'small',
             layers: [],
+            mapSize: 256,
             range: 'all',
             selected: '',
+            showCalendar: false,
             showFonts: false,
             showLayers: {},
+            showMap: false,
             showUsers: false,
             sort: 'position',
             width: 256
@@ -112,7 +116,10 @@ Ox.AnnotationPanel = function(options, self) {
                     {id: 'deselect', title: 'Deselect Annotation', disabled: !self.options.selected, keyboard: 'escape'},
                     {},
                     {id: 'save', title: 'Save Changes', disabled: true, keyboard: 'shift return'},
-                    {id: 'undo', title: 'Undo Changes', disabled: true, keyboard: 'escape'}
+                    {id: 'undo', title: 'Undo Changes', disabled: true, keyboard: 'escape'},
+                    {},
+                    {id: 'find', title: 'Find Annotation', disabled: true},
+                    {id: 'manage', title: 'Edit Place/Event', disabled: true}
                 ],
                 style: 'square',
                 title: 'edit',
@@ -152,7 +159,13 @@ Ox.AnnotationPanel = function(options, self) {
                     selected: selected,
                     sort: self.options.sort,
                     width: self.options.width - Ox.UI.SCROLLBAR_SIZE
-                }, layer)
+                }, layer, layer.type == 'event' ? {
+                    showWidget: self.options.showCalendar,
+                    widgetSize: self.options.calendarSize
+                } : layer.type == 'place' ? {
+                    showWidget: self.options.showMap,
+                    widgetSize: self.options.mapSize
+                } : {})
             )
             .bindEvent({
                 add: function(data) {
@@ -271,6 +284,7 @@ Ox.AnnotationPanel = function(options, self) {
         self.$folder[i].addItem(item);
     };
 
+
     that.blurItem = function() {
         getFolder(self.options.selected).blurItem();
     };
@@ -279,6 +293,11 @@ Ox.AnnotationPanel = function(options, self) {
         getFolder(self.options.selected).editItem();
     };
 
+    that.updateItem = function(layer, item) {
+        var i = Ox.getIndexById(self.options.layers, layer);
+        self.$folder[i].updateItem(item);
+    };
+
     return that;
   
-};
\ No newline at end of file
+};
diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js
index 7ff0f605..7e6247e6 100644
--- a/source/Ox.UI/js/Video/Ox.VideoEditor.js
+++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js
@@ -18,7 +18,9 @@ Ox.VideoEditor = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
             .defaults({
+                annotationsCalendarSize: 256,
                 annotationsFont: 'small',
+                annotationsMapSize: 256,
                 annotationsRange: 'all',
                 annotationsSize: 256,
                 annotationsSort: 'position',
@@ -42,6 +44,8 @@ Ox.VideoEditor = function(options, self) {
                 resolution: 0,
                 selected: '',
                 showAnnotations: false,
+                showAnnotationsCalendar: false,
+                showAnnotationsMap: false,
                 showLargeTimeline: true,
                 showLayers: {},
                 showUsers: false,
@@ -588,16 +592,20 @@ Ox.VideoEditor = function(options, self) {
         .appendTo(self.$menubar.$element);
 
     self.$annotationPanel = Ox.AnnotationPanel({
+            calendarSize: self.options.annotationsCalendarSize,
             editable: true,
             font: self.options.annotationsFont,
             'in': self.options['in'],
             layers: self.options.layers,
+            mapSize: self.options.annotationsMapSize,
             out: self.options.out,
             position: self.options.position,
             range: self.options.annotationsRange,
             selected: self.options.selected,
             sort: self.options.annotationsSort,
+            showCalendar: self.options.showAnnotationsCalendar,
             showLayers: self.options.showLayers,
+            showMap: self.options.showAnnotationsMap,
             showUsers: self.options.showUsers,
             width: self.options.annotationsSize
         })
diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css
index 23f9d53a..35740e19 100644
--- a/source/Ox.UI/themes/classic/css/classic.css
+++ b/source/Ox.UI/themes/classic/css/classic.css
@@ -263,7 +263,8 @@ Forms
 
 
 .OxThemeClassic .OxButton.OxSelected,
-.OxThemeClassic .OxSelect.OxSelected {
+.OxThemeClassic .OxSelect.OxSelected,
+.OxThemeClassic .OxCollapsePanel > .OxBar > .OxExtras > .OxSelect.OxSelected {
     background: -moz-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
     background: -o-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
     background: -webkit-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));