update video editor

source/Ox.UI/js/Map/Ox.ListMap.js

@@ -10,6 +10,7 @@ Ox.ListMap <f:Ox.Element> ListMap object
     options <o> Options object
         height <n|256> Height in px
         labels <b|false> If true, show labels
+        names <a|f|null> Array or names (undefined places), or function
         places <a|f|null> Array of places, or function that returns places
         selected <a|[]> Selected places
         width <n|256> Width in px
@@ -26,10 +27,11 @@ Ox.ListMap = function(options, self) {
             getMatches: null,
             height: 256,
             labels: false,
+            names: null,
             pageLength: 100,
             places: null,
             removePlace: null,
-            selected: [],
+            selected: '',
             showControls: false,
             showLabels: false,
             showTypes: false,
@@ -220,6 +222,59 @@ Ox.ListMap = function(options, self) {
         size: 24
     });
 
+    if (self.options.names) {
+
+        self.$listSelect = Ox.Select({
+                items: [
+                    {id: 'places', title: 'Show Places'},
+                    {id: 'names', title: 'Show Names'}
+                ],
+                max: 1,
+                min: 1,
+                style: 'symbol',
+                title: 'set',
+                type: 'image',
+                value: 'places'
+            })
+            .css({float: 'left', margin: '4px 0 4px 4px'})
+            .bindEvent({
+                change: toggleList
+            })
+            .appendTo(self.$listToolbar);
+
+        self.$namesList = Ox.TextList({
+                columns: [
+                    {
+                        id: 'name',
+                        operator: '+',
+                        title: 'Name',
+                        visible: true,
+                        width: 256
+                    },
+                    {
+                        align: 'right',
+                        id: 'matches',
+                        operator: '-',
+                        title: 'Matches',
+                        visible: true,
+                        width: 64,
+                    }
+                ],
+                columnsVisible: true,
+                items: [],
+                max: 1,
+                min: 0,
+                scrollbarVisible: true,
+                sort: [{key: 'name', operator: '+'}]
+            })
+            .bindEvent({
+                select: function(data) {
+                    
+                }
+            });
+
+    }
+
     self.$findElement = Ox.FormElementGroup({
             elements: [
                 self.$findSelect = Ox.Select({
@@ -242,7 +297,7 @@ Ox.ListMap = function(options, self) {
                 self.$findInput = Ox.Input({
                         clear: true,
                         placeholder: 'Find in List',
-                        width: 234
+                        width: self.options.names ? 214 : 234
                     })
                     .bindEvent({
                         submit: function(data) {
@@ -267,8 +322,11 @@ Ox.ListMap = function(options, self) {
             columnsVisible: true,
             //items: Ox.clone(self.options.places),
             items: self.options.places,
+            max: 1,
+            min: 0,
             pageLength: self.options.pageLength,
             scrollbarVisible: true,
+            selected: self.options.selected ? [self.options.selected] : [],
             sort: self.options.sort
         })
         .bindEvent({
@@ -308,6 +366,7 @@ Ox.ListMap = function(options, self) {
         findPlaceholder: 'Find on Map',
         height: self.options.height,
         places: self.options.places,
+        selected: self.options.selected,
         //statusbar: true,
         showControls: self.options.showControls,
         showLabels: self.options.showLabels,
@@ -622,7 +681,7 @@ Ox.ListMap = function(options, self) {
             elements: [
                 {
                     collapsible: true,
-                    element: Ox.SplitPanel({
+                    element: self.$listPanel = Ox.SplitPanel({
                         elements: [
                             {
                                 element: self.$listToolbar,
@@ -821,6 +880,22 @@ Ox.ListMap = function(options, self) {
         return Ox.isNumber(val) ? val.toFixed(8) : val; // fixme: why can a string be passed ??
     }
 
+    function toggleList() {
+        var list = self.$listSelect.options('value');
+        list == 'names' && !self.namesLoaded ? load() : toggle();
+        function load() {
+            self.options.names(function(data) {
+                Ox.print('DATA IS', data);
+                self.$namesList.options({items: data});
+                self.namesLoaded = true;
+                toggle();
+            });
+        }
+        function toggle() {
+            self.$listPanel.replaceElement(1, self[list == 'places' ? '$list' : '$namesList']);
+        }
+    }
+
     function updateList(key, value) {
         var query = {
                 conditions: Ox.merge(