misc changes

build/css/ox.ui.classic.css

@@ -174,6 +174,11 @@ Lists
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(255, 255, 255)), color-stop(1, rgb(224, 224, 224)));
 }
 .OxThemeClassic .OxIconList .OxItem.OxSelected > .OxIcon img {
+    border-color: rgb(160, 160, 160);
+    -moz-box-shadow: 0 0 4px rgba(160, 160, 160, 1);
+    -webkit-box-shadow: 0 0 4px rgba(160, 160, 160, 1);
+}
+.OxThemeClassic .OxIconList.OxFocus .OxItem.OxSelected > .OxIcon img {
     border-color: rgb(128, 128, 128);
     -moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
     -webkit-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
@@ -186,6 +191,12 @@ Lists
     text-shadow: rgb(255, 255, 255) 1px 1px 0;
 }
 .OxThemeClassic .OxIconList .OxItem.OxSelected > .OxText > div {
+    border-color: rgb(160, 160, 160);
+    background: rgba(160, 160, 160, 0.5);
+    -moz-box-shadow: 0 0 4px rgba(160, 160, 160, 1);
+    -webkit-box-shadow: 0 0 4px rgba(160, 160, 160, 1);
+}
+.OxThemeClassic .OxIconList.OxFocus .OxItem.OxSelected > .OxText > div {
     border-color: rgb(128, 128, 128);
     background: rgba(128, 128, 128, 0.5);
     -moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1);

build/css/ox.ui.css

@@ -840,9 +840,9 @@ Lists
 .OxTextList .OxBar .OxSelect {
     position: absolute;
     right: 0px;
-    width: 10px;
+    width: 11px;
     height: 16px;
-    border-width: 0 1px 0 1px;
+    border-width: 0 1px 0 0;
     background: rgba(0, 0, 0, 0);
     font-size: 11px;
     text-align: center;

build/css/ox.ui.modern.css

@@ -152,6 +152,11 @@ Lists
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(32, 32, 32)), color-stop(1, rgb(0, 0, 0)));
 }
 .OxThemeModern .OxIconList .OxItem.OxSelected > .OxIcon img {
+    border-color: rgb(96, 96, 96);
+    -moz-box-shadow: 0 0 4px rgba(96, 96, 96, 1);
+    -webkit-box-shadow: 0 0 4px rgba(96, 96, 96, 1);
+}
+.OxThemeModern .OxIconList.OxFocus .OxItem.OxSelected > .OxIcon img {
     border-color: rgb(128, 128, 128);
     -moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
     -webkit-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
@@ -164,6 +169,12 @@ Lists
     text-shadow: rgb(0, 0, 0) 1px 1px 0;
 }
 .OxThemeModern .OxIconList .OxItem.OxSelected > .OxText > div {
+    border-color: rgb(96, 96, 96);
+    background: rgba(96, 96, 96, 0.5);
+    -moz-box-shadow: 0 0 4px rgba(96, 96, 96, 1);
+    -webkit-box-shadow: 0 0 4px rgba(96, 96, 96, 1);
+}
+.OxThemeModern .OxIconList.OxFocus .OxItem.OxSelected > .OxText > div {
     border-color: rgb(128, 128, 128);
     background: rgba(128, 128, 128, 0.5);
     -moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1);

build/js/ox.js

@@ -409,9 +409,9 @@ Ox.serialize = function(obj) {
     */
     var arr = [];
     Ox.each(obj, function(k, v) {
-        arr.push(k + "=" + v);
+        v !== '' && arr.push(k + '=' + v);
     });
-    return arr.join("&");
+    return arr.join('&');
 };
 
 Ox.setPropertyOnce = function(arr, str) {
@@ -482,8 +482,8 @@ Ox.unique = function(arr) {
 
 Ox.unserialize = function(str) {
     var arr, obj = {};
-    Ox.each(str.split("&"), function(i, v) {
+    Ox.each(str.split('&'), function(i, v) {
-        arr = v.split("=");
+        arr = v.split('=');
         obj[arr[0]] = arr[1];
     });
     return obj;

build/js/ox.ui.js

@@ -2689,22 +2689,7 @@ requires
         }
 
         if (self.options.autocomplete && self.options.autocompleteSelect) {
-            self.$autocompleteMenu = new Ox.Menu({
+            self.$autocompleteMenu = constructAutocompleteMenu();
-                    element: self.$input,
-                    id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?,
-                    offset: {
-                        left: 4,
-                        top: 0
-                    },
-                    size: self.options.size
-                })
-                .bindEvent('click', clickMenu);
-            if (self.options.autocompleteReplace) {
-                self.$autocompleteMenu.bindEvent({
-                    deselect: deselectMenu,
-                    select: selectMenu,
-                });
-            }
         }
 
         self.options.placeholder && setPlaceholder();
@@ -2796,6 +2781,26 @@ requires
 
         }
 
+        function constructAutocompleteMenu() {
+            var menu = new Ox.Menu({
+                    element: self.$input,
+                    id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?,
+                    offset: {
+                        left: 4,
+                        top: 0
+                    },
+                    size: self.options.size
+                })
+                .bindEvent('click', clickMenu);
+            if (self.options.autocompleteReplace) {
+                menu.bindEvent({
+                    deselect: deselectMenu,
+                    select: selectMenu,
+                });
+            }
+            return menu;
+        }
+
         function autovalidate() {
 
             var blur, oldCursor, oldValue;
@@ -3115,7 +3120,12 @@ requires
 
         self.onChange = function(key, value) {
             var inputWidth, val;
-			if (key == 'disabled') {
+            if (['autocomplete', 'autocompleteReplace', 'autocompleteSelect', 'autovalidate'].indexOf(key) > -1) {
+                if (self.options.autocomplete && self.options.autocompleteSelect) {
+                    self.$autocompleteMenu = constructAutocompleteMenu();
+                }
+                self.bindKeyboard = self.options.autocomplete || self.options.autovalidate;
+            } else if (key == 'disabled') {
 				self.$input.attr({
 					disabled: value ? 'disabled' : ''
 				});
@@ -5769,6 +5779,7 @@ requires
         var self = self || {},
             that = new Ox.Element({}, self)
                 .defaults({
+                    centerSelection: false,
                     id: '',
                     item: function() {},
                     keys: [],
@@ -5788,6 +5799,7 @@ requires
         });
 
         that.$element = new Ox.List({
+                centered: self.options.centered,
                 construct: constructItem,
                 id: self.options.id,
                 itemHeight: self.itemHeight,
@@ -5850,6 +5862,10 @@ requires
             that.$element.closePreview();
         };
 
+        that.scrollToSelection = function() {
+            that.$element.scrollToSelection();
+        };
+
         that.size = function() {
             that.$element.size();
         }
@@ -6025,6 +6041,7 @@ requires
         var self = self || {},
             that = new Ox.Container({}, self)
                 .defaults({
+                    centered: false,
                     construct: function() {},
                     itemHeight: 16,
                     itemWidth: 16,
@@ -6604,8 +6621,13 @@ requires
                 scroll,
                 size;
             if (self.options.orientation == 'horizontal') {
-                positions[0] = pos * itemWidth;
+                if (self.options.centered) {
-                positions[1] = positions[0] + itemWidth + self.itemMargin;
+                    that.animate({
+                        scrollLeft: (self.listMargin / 2 + (pos + 0.5) * itemWidth - that.width() / 2) + 'px'
+                    }, 0);
+                } else {
+                    positions[0] = pos * itemWidth + self.listMargin / 2;
+                    positions[1] = positions[0] + itemWidth + self.itemMargin / 2;
                     scroll = that.scrollLeft();
                     size = getWidth();
                     if (positions[0] < scroll || leftOrTopAlign) {
@@ -6617,6 +6639,7 @@ requires
                             scrollLeft: (positions[1] - size) + 'px'
                         }, 0);
                     }
+                }
             } else {
                 positions[0] = (self.options.orientation == 'vertical' ? pos : getRow(pos)) * itemHeight;
                 positions[1] = positions[0] + itemHeight + (self.options.orientation == 'vertical' ? 0 : self.itemMargin);
@@ -6638,6 +6661,7 @@ requires
             if (!isSelected(pos) || self.selected.length > 1) {
                 selectNone();
                 addToSelection(pos);
+                self.options.centered && scrollToPosition(pos);
             }
         }
 
@@ -6826,7 +6850,11 @@ requires
             return that;
         };
 
-        that.size = function() {
+        that.scrollToSelection = function() {
+            self.selected.length && scrollToPosition(self.selected[0]);
+        };
+
+        that.size = function() { // fixme: not a good function name
             if (self.options.orientation == 'both') {
                 var rowLength = getRowLength(),
                     pageLength = self.pageLengthByRowLength[rowLength],
@@ -9175,7 +9203,7 @@ requires
             return self.options.elements[pos].collapsed;
         };
 
-        that.replace = function(id, element) {
+        that.replace = function(id, element) { // fixme: should be replaceElement
             // one can pass pos instead of id
             var pos = Ox.isNumber(id) ? id : getPositionById(id);
             Ox.print('replace', pos, element);
@@ -9894,13 +9922,15 @@ requires
                     width: 0
                 })
                 .options(options || {})
-                .addClass('OxEditor');
+                .addClass('OxEditor')
                 /*.css({
 					//height: self.options.height + 'px',
 					overflowY: 'scroll',
 					//width: self.options.width + 'px'
 				});*/
 
+        that.click(that.gainFocus)
+
         $.extend(self, {
             $player: [],
             $timeline: [],
@@ -10050,7 +10080,7 @@ requires
             }
         });
 
-        that.gainFocus();
+        // that.gainFocus();
 
         function changePlayer(event, data) {
             self.options.position = data.position;