From 074902d079d3d81d30d2de64a409a4c9daa60dcb Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Wed, 21 Dec 2011 21:03:52 +0530
Subject: [PATCH] form elements rewrite, part 2

---
 demos/arrayinput/js/arrayinput.js             |  4 +-
 demos/form2/color.html                        |  1 +
 source/Ox.UI/js/Calendar/Ox.Calendar.js       | 11 ++--
 source/Ox.UI/js/Calendar/Ox.ListCalendar.js   | 14 ++---
 source/Ox.UI/js/Core/Ox.Element.js            |  9 ++++
 source/Ox.UI/js/Form/Ox.ArrayInput.js         |  2 +-
 source/Ox.UI/js/Form/Ox.ButtonGroup.js        | 16 +++---
 source/Ox.UI/js/Form/Ox.CheckboxGroup.js      | 16 +++---
 source/Ox.UI/js/Form/Ox.ColorInput.js         |  6 +--
 source/Ox.UI/js/Form/Ox.DateInput.js          | 52 ++++++++++---------
 source/Ox.UI/js/Form/Ox.DateTimeInput.js      |  2 +-
 source/Ox.UI/js/Form/Ox.Editable.js           |  5 +-
 source/Ox.UI/js/Form/Ox.Filter.js             | 17 +++---
 source/Ox.UI/js/Form/Ox.Form.js               |  4 +-
 source/Ox.UI/js/Form/Ox.FormElementGroup.js   |  4 +-
 source/Ox.UI/js/Form/Ox.FormPanel.js          |  1 -
 source/Ox.UI/js/Form/Ox.Input.js              | 14 +++--
 source/Ox.UI/js/Form/Ox.InputGroup.js         |  4 +-
 source/Ox.UI/js/Form/Ox.ObjectArrayInput.js   | 13 ++++-
 source/Ox.UI/js/Form/Ox.ObjectInput.js        | 20 +++----
 source/Ox.UI/js/Form/Ox.PlacePicker.js        | 16 +++---
 source/Ox.UI/js/Form/Ox.Range.js              |  1 -
 source/Ox.UI/js/Form/Ox.Select.js             |  5 ++
 source/Ox.UI/js/Form/Ox.SelectInput.js        |  3 +-
 source/Ox.UI/js/Form/Ox.Spreadsheet.js        | 11 ++--
 source/Ox.UI/js/Form/Ox.TimeInput.js          | 10 ++--
 source/Ox.UI/js/List/Ox.TextList.js           |  2 +-
 source/Ox.UI/js/Map/Ox.ListMap.js             | 16 +++---
 source/Ox.UI/js/Map/Ox.Map.js                 |  6 +--
 source/Ox.UI/js/Panel/Ox.TabPanel.js          |  2 +-
 source/Ox.UI/js/Video/Ox.VideoEditor.js       |  2 +-
 source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js |  8 +--
 source/Ox.UI/js/Video/Ox.VideoPlayer.js       | 19 +++----
 33 files changed, 163 insertions(+), 153 deletions(-)

diff --git a/demos/arrayinput/js/arrayinput.js b/demos/arrayinput/js/arrayinput.js
index f80cddff..ec462b83 100644
--- a/demos/arrayinput/js/arrayinput.js
+++ b/demos/arrayinput/js/arrayinput.js
@@ -25,9 +25,7 @@ Ox.load('UI', function() {
         .css({marginLeft: '16px'})
         .bindEvent({
             click: function() {
-                $arrayInput.options({
-                    value: ['foo', 'bar']
-                });
+                $arrayInput.value(['foo', 'bar']);
             }
         })
         .appendTo(Ox.$body)
diff --git a/demos/form2/color.html b/demos/form2/color.html
index 72b6d75e..aff9260f 100644
--- a/demos/form2/color.html
+++ b/demos/form2/color.html
@@ -27,6 +27,7 @@
                     var colors = getColors(i);
                     $ranges[i] = new Ox.Range({
                             arrows: true,
+                            changeOnDrag: true,
                             id: rgb[i],
                             max: 255,
                             size: 256,
diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js
index ea368ebf..cdad273e 100644
--- a/source/Ox.UI/js/Calendar/Ox.Calendar.js
+++ b/source/Ox.UI/js/Calendar/Ox.Calendar.js
@@ -307,7 +307,7 @@ Ox.Calendar = function(options, self) {
         .css({float: 'left', margin: '4px'})
         .bindEvent({
             change: function(data) {
-                self.options.showTypes = data.selected.map(function(type) {
+                self.options.showTypes = data.value.map(function(type) {
                     return type.id;
                 });
                 getLines();
@@ -491,6 +491,7 @@ Ox.Calendar = function(options, self) {
 
     self.$zoomInput = Ox.Range({
             arrows: true,
+            changeOnDrag: true,
             max: self.maxZoom,
             min: 0,
             size: self.options.width,
@@ -1008,9 +1009,9 @@ Ox.Calendar = function(options, self) {
         renderTimelines();
         renderOverlay();
         renderEvents();
-        self.$dateInput.options({
-            value: Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true)
-        });
+        self.$dateInput.value(
+            Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true)
+        );
     }
 
     function renderEvents() {
@@ -1160,7 +1161,7 @@ Ox.Calendar = function(options, self) {
 
     function zoomTo(zoom) {
         self.options.zoom = Ox.limit(zoom, 0, self.maxZoom);
-        self.$zoomInput.options({value: self.options.zoom});
+        self.$zoomInput.value(self.options.zoom);
         renderCalendar();
     }
 
diff --git a/source/Ox.UI/js/Calendar/Ox.ListCalendar.js b/source/Ox.UI/js/Calendar/Ox.ListCalendar.js
index 51326fff..65393053 100644
--- a/source/Ox.UI/js/Calendar/Ox.ListCalendar.js
+++ b/source/Ox.UI/js/Calendar/Ox.ListCalendar.js
@@ -156,7 +156,7 @@ Ox.ListCalendar = function(options, self) {
                     })
                     .bindEvent({
                         change: function(data) {
-                            var key = data.selected[0].id,
+                            var key = data.value,
                                 value = self.$findInput.value();
                             value && updateList(key, value);
                         }
@@ -364,7 +364,7 @@ Ox.ListCalendar = function(options, self) {
                         self.$alternativeNamesInput.setErrors([exists]);
                     }
                 } else if (data.id == 'type') {
-                    editEvent('type', data.data.selected[0].id);
+                    editEvent('type', data.data.value);
                 } else if (data.id == 'start') {
                     editEvent('start', data.data.value);
                 } else if (data.id == 'end') {
@@ -508,14 +508,14 @@ Ox.ListCalendar = function(options, self) {
                 if (key == 'name') {
                     self.$eventName.options({title: value});
                 } else if (['start', 'end'].indexOf(key) > -1) {
-                    self.$durationInput.options({
-                        value: Ox.formatDateRangeDuration(
-                            self.$startInput.options('value'),
-                            self.$endInput.options('value')
+                    self.$durationInput.value(
+                        Ox.formatDateRangeDuration(
+                            self.$startInput.value(),
+                            self.$endInput.value()
                                 || Ox.formatDate(new Date(), '%Y-%m-%d %H%:%M:%S'),
                             true
                         )
-                    });
+                    );
                 }
             } else {
                 alert(result.status.text);
diff --git a/source/Ox.UI/js/Core/Ox.Element.js b/source/Ox.UI/js/Core/Ox.Element.js
index 70762bde..1907b541 100644
--- a/source/Ox.UI/js/Core/Ox.Element.js
+++ b/source/Ox.UI/js/Core/Ox.Element.js
@@ -487,6 +487,15 @@ Ox.Element = function(options, self) {
         return that;
     };
 
+    /*@
+    value <f> Shortcut to get or set self.options.value
+    @*/
+    that.value = function() {
+        return that.options(
+            arguments.length == 0 ? 'value' : {value: arguments[0]}
+        );
+    };
+
     return that;
 
 };
diff --git a/source/Ox.UI/js/Form/Ox.ArrayInput.js b/source/Ox.UI/js/Form/Ox.ArrayInput.js
index 2c07880f..95e0e6cb 100644
--- a/source/Ox.UI/js/Form/Ox.ArrayInput.js
+++ b/source/Ox.UI/js/Form/Ox.ArrayInput.js
@@ -76,7 +76,7 @@ Ox.ArrayInput = function(options, self) {
                 click: function() {
                     var index = $(this).parent().data('index');
                     if (self.$input[index].value() !== '') {
-                        self.$input[index].options({value: ''});
+                        self.$input[index].value('');
                         self.options.value = getValue();
                         that.triggerEvent('change', {
                             value: self.options.value
diff --git a/source/Ox.UI/js/Form/Ox.ButtonGroup.js b/source/Ox.UI/js/Form/Ox.ButtonGroup.js
index 61764ec7..6764cc9e 100644
--- a/source/Ox.UI/js/Form/Ox.ButtonGroup.js
+++ b/source/Ox.UI/js/Form/Ox.ButtonGroup.js
@@ -75,20 +75,20 @@ Ox.ButtonGroup = function(options, self) {
 
     function toggleButton(pos) {
         var toggled = self.optionGroup.toggle(pos);
-        Ox.print('TOGGLED::', toggled)
         if (!toggled.length) {
-            self.$buttons[pos].options({
-                value: !self.$buttons[pos].options('value')
-            });
+            // FIXME: fix and use that.toggleOption()
+            self.$buttons[pos].value(!self.$buttons[pos].value());
         } else {
             toggled.forEach(function(i) {
-                i != pos && self.$buttons[i].options({
-                    // FIXME: fix and use that.toggleOption()
-                    value: !self.$buttons[i].options('value')
-                });
+                i != pos && self.$buttons[i].value(!self.$buttons[i].value());
             });
             self.options.value = self.optionGroup.value();
             that.triggerEvent('change', {
+                title: Ox.isString(self.options.value)
+                    ? Ox.getObjectById(self.options.buttons, self.options.value).title
+                    : self.options.value.map(function(value) {
+                        return Ox.getObjectById(self.options.buttons, value).title;
+                    }),
                 value: self.options.value
             });
         }
diff --git a/source/Ox.UI/js/Form/Ox.CheckboxGroup.js b/source/Ox.UI/js/Form/Ox.CheckboxGroup.js
index dae4e0f5..9738e1f2 100644
--- a/source/Ox.UI/js/Form/Ox.CheckboxGroup.js
+++ b/source/Ox.UI/js/Form/Ox.CheckboxGroup.js
@@ -49,6 +49,7 @@ Ox.CheckboxGroup = function(options, self) {
         'checked'
     );
     self.options.checkboxes = self.optionGroup.init();
+    self.options.value = self.optionGroup.value();
 
     self.$checkboxes = [];
     if (self.options.type == 'group') {
@@ -78,18 +79,19 @@ Ox.CheckboxGroup = function(options, self) {
         var toggled = self.optionGroup.toggle(pos);
         Ox.Log('Form', 'change', pos, 'toggled', toggled)
         if (!toggled.length) {
-            self.$checkboxes[pos].options({
-                value: !self.$checkboxes[pos].options('value')
-            });
+            // FIXME: fix and use that.toggleOption()
+            self.$checkboxes[pos].value(!self.$checkboxes[pos].value());
         } else {
             toggled.forEach(function(i) {
-                i != pos && self.$checkboxes[i].options({
-                    // FIXME: fix and use that.toggleOption()
-                    value: !self.$checkboxes[i].options('value')
-                });
+                i != pos && self.$checkboxes[i].value(!self.$checkboxes[i].value());
             });
             self.options.value = self.optionGroup.value();
             that.triggerEvent('change', {
+                title: Ox.isString(self.options.value)
+                    ? Ox.getObjectById(self.options.checkboxes, self.options.value).title
+                    : self.options.value.map(function(value) {
+                        return Ox.getObjectById(self.options.checkboxes, value).title;
+                    }),
                 value: self.options.value
             });
         }
diff --git a/source/Ox.UI/js/Form/Ox.ColorInput.js b/source/Ox.UI/js/Form/Ox.ColorInput.js
index d7c10f9d..b1b36ce0 100644
--- a/source/Ox.UI/js/Form/Ox.ColorInput.js
+++ b/source/Ox.UI/js/Form/Ox.ColorInput.js
@@ -48,9 +48,7 @@ Ox.ColorInput = function(options, self) {
                 //Ox.Log('Form', 'change function called');
                 self.options.value = data.value;
                 Ox.loop(3, function(i) {
-                    self.$inputs[i].options({
-                        value: self.options.value[i]
-                    });
+                    self.$inputs[i].value(self.options.value[i]);
                 });
                 self.$inputs[3].css({
                     background: 'rgb(' + getRGB().join(', ') + ')'
@@ -76,7 +74,7 @@ Ox.ColorInput = function(options, self) {
 
     function change() {
         self.options.value = self.$inputs.map(function(input, i) {
-            return i < 3 ? input.options('value') : null;
+            return i < 3 ? input.value() : null;
         });
         self.$inputs[3].css({
             background: 'rgb(' + getRGB().join(', ') + ')'
diff --git a/source/Ox.UI/js/Form/Ox.DateInput.js b/source/Ox.UI/js/Form/Ox.DateInput.js
index 97134bcc..adbbfd9c 100644
--- a/source/Ox.UI/js/Form/Ox.DateInput.js
+++ b/source/Ox.UI/js/Form/Ox.DateInput.js
@@ -115,26 +115,29 @@ Ox.DateInput = function(options, self) {
     }), self);
 
     function changeDay() {
-        self.options.weekday && self.$input.weekday.options({
-            value: Ox.formatDate(new Date([
-                self.$input.month.options('value'),
-                self.$input.day.options('value'),
-                self.$input.year.options('value')
+        self.options.weekday && self.$input.weekday.value(
+            Ox.formatDate(new Date([
+                self.$input.month.value(),
+                self.$input.day.value(),
+                self.$input.year.value()
             ].join(' ')), self.formats.weekday)
-        });
+        );
         self.options.value = join();
     }
 
     function changeMonthOrYear() {
-        var day = self.$input.day.options('value'),
-            month = self.$input.month.options('value'),
-            year = self.$input.year.options('value'),
+        var day = self.$input.day.value(),
+            month = self.$input.month.value(),
+            year = self.$input.year.value(),
             days = Ox.getDaysInMonth(year, self.options.format == 'short' ? parseInt(month, 10) : month);
         day = day <= days ? day : days;
         //Ox.Log('Form', year, month, 'day days', day, days)
-        self.options.weekday && self.$input.weekday.options({
-            value: Ox.formatDate(new Date([month, day, year].join(' ')), self.formats.weekday)
-        });
+        self.options.weekday && self.$input.weekday.value(
+            Ox.formatDate(
+                new Date([month, day, year].join(' ')),
+                self.formats.weekday
+            )
+        );
         self.$input.day.options({
             autocomplete: Ox.range(1, days + 1).map(function(i) {
                 return self.options.format == 'short' ? Ox.pad(i, 2) : i.toString();
@@ -146,21 +149,20 @@ Ox.DateInput = function(options, self) {
 
     function changeWeekday() {
         var date = getDateInWeek(
-            self.$input.weekday.options('value'),
-            self.$input.month.options('value'),
-            self.$input.day.options('value'),
-            self.$input.year.options('value')
+            self.$input.weekday.value(),
+            self.$input.month.value(),
+            self.$input.day.value(),
+            self.$input.year.value()
         );
-        self.$input.month.options({value: date.month});
+        self.$input.month.value(date.month);
         self.$input.day.options({
             autocomplete: Ox.range(1, Ox.getDaysInMonth(date.year, date.month) + 1).map(function(i) {
                     return self.options.format == 'short' ? Ox.pad(i, 2) : i.toString();
                 }),
             value: date.day
         });
-        self.$input.year.options({value: date.year});
+        self.$input.year.value(date.year);
         self.options.value = join();
-        Ox.print('self.options.value =', self.options.value)
     }
 
     function getDate(value) {
@@ -190,13 +192,13 @@ Ox.DateInput = function(options, self) {
 
     function join() {
         return Ox.formatDate(new Date(self.options.format == 'short' ? [
-            self.$input.year.options('value'),
-            self.$input.month.options('value'),
-            self.$input.day.options('value')
+            self.$input.year.value(),
+            self.$input.month.value(),
+            self.$input.day.value()
         ].join('/') : [
-            self.$input.month.options('value'),
-            self.$input.day.options('value'),
-            self.$input.year.options('value')
+            self.$input.month.value(),
+            self.$input.day.value(),
+            self.$input.year.value()
         ].join(' ')), '%F');
     }
 
diff --git a/source/Ox.UI/js/Form/Ox.DateTimeInput.js b/source/Ox.UI/js/Form/Ox.DateTimeInput.js
index ab1a8ed5..b19aeec3 100644
--- a/source/Ox.UI/js/Form/Ox.DateTimeInput.js
+++ b/source/Ox.UI/js/Form/Ox.DateTimeInput.js
@@ -60,7 +60,7 @@ Ox.DateTimeInput = function(options, self) {
 
     function join() {
         return that.options('inputs').map(function($input) {
-            return $input.options('value');
+            return $input.value();
         }).join(' ');
     }
 
diff --git a/source/Ox.UI/js/Form/Ox.Editable.js b/source/Ox.UI/js/Form/Ox.Editable.js
index 3f86ea01..d348c81c 100644
--- a/source/Ox.UI/js/Form/Ox.Editable.js
+++ b/source/Ox.UI/js/Form/Ox.Editable.js
@@ -67,7 +67,7 @@ Ox.Editable = function(options, self) {
 
     function cancel() {
         self.options.value = self.originalValue;
-        self.$input.options({value: formatInputValue()}).hide();
+        self.$input.value(formatInputValue()).hide();
         self.$test.html(formatTestValue());
         self.$value.html(formatValue()).show();
     }
@@ -191,7 +191,7 @@ Ox.Editable = function(options, self) {
     function submit() {
         self.options.editing = false;
         self.options.value = Ox.parseHTML(self.$input.value());
-        self.$input.options({value: formatInputValue()}).hide();
+        self.$input.value(formatInputValue()).hide();
         self.$test.html(formatTestValue());
         self.$value.html(formatValue()).show();
         that.$tooltip.options({title: self.options.tooltip});
@@ -204,7 +204,6 @@ Ox.Editable = function(options, self) {
         if (key == 'height' || key == 'width') {
             var css = {};
             css[key] = value + 'px';
-            Ox.print(key, 'VALUE', value)
             self.$test && self.$test.css(css);
             self.$input && self.$input.css(css);
             self.$input && self.$input.find(self.options.type).css(css);
diff --git a/source/Ox.UI/js/Form/Ox.Filter.js b/source/Ox.UI/js/Form/Ox.Filter.js
index e2272c81..0db3ac78 100644
--- a/source/Ox.UI/js/Form/Ox.Filter.js
+++ b/source/Ox.UI/js/Form/Ox.Filter.js
@@ -392,7 +392,7 @@ Ox.Filter = function(options, self) {
 
     function changeOperator(data) {
         var changeGroupOperator = false;
-        self.options.query.operator = data.selected[0].id;
+        self.options.query.operator = data.value;
         self.options.query.conditions.forEach(function(condition, pos) {
             if (condition.conditions) {
                 condition.operator = condition.operator == '&' ? '|' : '&';
@@ -549,7 +549,7 @@ Ox.Filter = function(options, self) {
                 changeConditionKey(
                     $element.data('position'),
                     $element.data('subposition'),
-                    data.selected[0].id
+                    data.value
                 );
             }
         });
@@ -581,7 +581,7 @@ Ox.Filter = function(options, self) {
                 changeConditionOperator(
                     $element.data('position'),
                     $element.data('subposition'),
-                    data.selected[0].id
+                    data.value
                 );
             }
         });
@@ -717,7 +717,6 @@ Ox.Filter = function(options, self) {
             if (formatType == 'color') {
                 isHue = formatArgs[0] == 'hue';
                 $input = Ox.Range({
-                    changeOnDrag: false,
                     max: isHue ? 360 : 1,
                     min: 0,
                     size: !isArray ? 288 : 128, // fixme: should be width!
@@ -793,11 +792,13 @@ Ox.Filter = function(options, self) {
                         })
                     ],
                     float: 'right',
-                    joinValues: function(values) {
-                        Ox.print(values, '?????')
+                    join: function(value) {
                         return formatType == 'value'
-                            ? values[0] * values[1]
-                            : values[0];
+                            ? value[0] * value[1]
+                            : value[0];
+                    },
+                    split: function(value) {
+                        
                     },
                     width: !isArray ? 288 : 128
                 })
diff --git a/source/Ox.UI/js/Form/Ox.Form.js b/source/Ox.UI/js/Form/Ox.Form.js
index 1477d3b8..6f269d1c 100644
--- a/source/Ox.UI/js/Form/Ox.Form.js
+++ b/source/Ox.UI/js/Form/Ox.Form.js
@@ -149,7 +149,7 @@ Ox.Form = function(options, self) {
             self.$items.forEach(function($item, i) {
                 values[self.itemIds[i]] = self.$items[i].value();
                 //fixme: make the following work
-                //values[self.itemIds[i]] = self.$items[i].options('value');
+                //values[self.itemIds[i]] = self.$items[i].value();
             });
             //Ox.Log('Form', 'VALUES', values)
             return values;
@@ -158,7 +158,7 @@ Ox.Form = function(options, self) {
             Ox.forEach(arguments[0], function(value, key) {
                 var index = getItemIndexById(key);
                 //index > -1 && Ox.Log('Form', ':::::::', key, value)
-                index > -1 && self.options.items[index].options({value: value});
+                index > -1 && self.options.items[index].value(value);
             });
             return that;
         }
diff --git a/source/Ox.UI/js/Form/Ox.FormElementGroup.js b/source/Ox.UI/js/Form/Ox.FormElementGroup.js
index f90efed6..f5f3f160 100644
--- a/source/Ox.UI/js/Form/Ox.FormElementGroup.js
+++ b/source/Ox.UI/js/Form/Ox.FormElementGroup.js
@@ -79,7 +79,7 @@ Ox.FormElementGroup = function(options, self) {
 
     function getValue() {
         var value = self.options.elements.map(function($element) {
-            return $element.options('value');
+            return $element.value();
         });
         return self.options.join ? self.options.join(value) : value;
     }
@@ -93,7 +93,7 @@ Ox.FormElementGroup = function(options, self) {
             ? self.options.split(self.options.value)
             : self.options.value;
         values.forEach(function(value, i) {
-            self.options.elements[i].options({value: value});
+            self.options.elements[i].value(value);
         });
     }
 
diff --git a/source/Ox.UI/js/Form/Ox.FormPanel.js b/source/Ox.UI/js/Form/Ox.FormPanel.js
index bcfe9fee..3e82dfc5 100644
--- a/source/Ox.UI/js/Form/Ox.FormPanel.js
+++ b/source/Ox.UI/js/Form/Ox.FormPanel.js
@@ -117,7 +117,6 @@ Ox.FormPanel = function(options, self) {
                         //that.triggerEvent('change', data);
                     },
                     validate: function(data) {
-                        Ox.print('---------------VALIDATE', data);
                         self.$list.value(section.title, 'valid', data.valid);
                         that.triggerEvent('validate', {
                             title: section.title,
diff --git a/source/Ox.UI/js/Form/Ox.Input.js b/source/Ox.UI/js/Form/Ox.Input.js
index 84f34048..e914c14a 100644
--- a/source/Ox.UI/js/Form/Ox.Input.js
+++ b/source/Ox.UI/js/Form/Ox.Input.js
@@ -1875,20 +1875,18 @@ Ox.Range_ = function(options, self) {
             width: thumbWidth + 'px'
         }, self.options.animate ? animate : 0, function() {
             if (self.options.thumbValue) {
-                $thumb.options({
-                    value: self.options.valueNames ?
-                            self.options.valueNames[self.options.value] :
-                            self.options.value
-                });
+                $thumb.value(
+                    value: self.options.valueNames
+                        ? self.options.valueNames[self.options.value]
+                        : self.options.value
+                );
             }
         });
     }
     function setValue(val, animate) {
         val = Ox.limit(val, self.options.min, self.options.max);
         if (val != self.options.value) {
-            that.options({
-                value: val
-            });
+            that.value(val);
             setThumb(animate);
             that.triggerEvent('change', {value: val});
         }
diff --git a/source/Ox.UI/js/Form/Ox.InputGroup.js b/source/Ox.UI/js/Form/Ox.InputGroup.js
index 9c919452..459341cc 100644
--- a/source/Ox.UI/js/Form/Ox.InputGroup.js
+++ b/source/Ox.UI/js/Form/Ox.InputGroup.js
@@ -100,7 +100,7 @@ Ox.InputGroup = function(options, self) {
 
     function getValue() {
         var value = self.options.inputs.map(function($input) {
-            return $input.options('value');
+            return $input.value();
         });
         return self.options.join ? self.options.join(value) : value;
     }
@@ -118,7 +118,7 @@ Ox.InputGroup = function(options, self) {
             ? self.options.split(self.options.value)
             : self.options.value;
         values.forEach(function(value, i) {
-            self.options.inputs[i].options({value: value});
+            self.options.inputs[i].value(value);
         });
     }
 
diff --git a/source/Ox.UI/js/Form/Ox.ObjectArrayInput.js b/source/Ox.UI/js/Form/Ox.ObjectArrayInput.js
index 1f9ee8a9..6c04d593 100644
--- a/source/Ox.UI/js/Form/Ox.ObjectArrayInput.js
+++ b/source/Ox.UI/js/Form/Ox.ObjectArrayInput.js
@@ -33,7 +33,6 @@ Ox.ObjectArrayInput = function(options, self) {
     });
 
     function addInput(index, value) {
-        Ox.print('addInput', index)
         self.$element.splice(index, 0, Ox.Element()
             .css({
                 width: self.options.width + 'px',
@@ -53,6 +52,11 @@ Ox.ObjectArrayInput = function(options, self) {
                 labelWidth: self.options.labelWidth,
                 width: self.options.width
             })
+            .bindEvent({
+                change: function(data) {
+                    // ...
+                }
+            })
             .appendTo(self.$element[index])
         );
         self.$removeButton.splice(index, 0, Ox.Button({
@@ -115,6 +119,13 @@ Ox.ObjectArrayInput = function(options, self) {
         });
     }
 
+    self.setOption = function(key, value) {
+        if (key == 'value') {
+            // ...
+        }
+    };
+
+    // FIXME: remove
     that.value = function() {
         return self.$input.map(function($input) {
             return $input.value();
diff --git a/source/Ox.UI/js/Form/Ox.ObjectInput.js b/source/Ox.UI/js/Form/Ox.ObjectInput.js
index 846881f4..51c19970 100644
--- a/source/Ox.UI/js/Form/Ox.ObjectInput.js
+++ b/source/Ox.UI/js/Form/Ox.ObjectInput.js
@@ -16,8 +16,6 @@ Ox.ObjectInput = function(options, self) {
             height: self.options.elements.length * 24 - 8 + 'px'
         });
 
-    Ox.print('ObjI', self.options)
-
     self.options.elements.forEach(function($element) {
         $element.options({
             labelWidth: self.options.labelWidth,
@@ -25,18 +23,22 @@ Ox.ObjectInput = function(options, self) {
         })
         .bindEvent({
             change: function(data) {
-                // ...
+                self.options.value = {};
+                self.options.elements.forEach(function(element) {
+                    self.options.value[element.options('id')] = element.value();
+                });
+                that.triggerEvent('change', {
+                    value: self.options.value
+                });
             }
         })
         .appendTo(that);
     });
 
-    that.value = function() {
-        var value = {};
-        self.options.elements.forEach(function(element) {
-            value[element.options('id')] = element.value();
-        });
-        return value;
+    self.setOption = function(key, value) {
+        if (key == 'value') {
+            // ...
+        }
     };
 
     return that;
diff --git a/source/Ox.UI/js/Form/Ox.PlacePicker.js b/source/Ox.UI/js/Form/Ox.PlacePicker.js
index e4696ab5..cefd9b33 100644
--- a/source/Ox.UI/js/Form/Ox.PlacePicker.js
+++ b/source/Ox.UI/js/Form/Ox.PlacePicker.js
@@ -60,6 +60,7 @@ Ox.PlacePicker = function(options, self) {
                 .append(
                     self.$range = Ox.Range({
                             arrows: true,
+                            changeOnDrag: true,
                             id: self.options.id + 'Range',
                             max: 22,
                             size: 256,
@@ -107,12 +108,11 @@ Ox.PlacePicker = function(options, self) {
     function clickLabel() {
         var name = that.$label.html();
         if (name) {
-            self.$input.options({
-                value: name
-            })
-            .triggerEvent('submit', {
-                value: name
-            });
+            self.$input
+                .value(name)
+                .triggerEvent('submit', {
+                    value: name
+                });
         }
     }
 
@@ -128,9 +128,7 @@ Ox.PlacePicker = function(options, self) {
     }
 
     function onZoom(data) {
-        self.$range.options({
-            value: data.value
-        });
+        self.$range.value(data.value);
     }
 
     function showPicker() {
diff --git a/source/Ox.UI/js/Form/Ox.Range.js b/source/Ox.UI/js/Form/Ox.Range.js
index 4c2b7694..eb602a11 100644
--- a/source/Ox.UI/js/Form/Ox.Range.js
+++ b/source/Ox.UI/js/Form/Ox.Range.js
@@ -67,7 +67,6 @@ Ox.Range = function(options, self) {
         self.options.thumbValue = true;
         self.options.value = Ox.isNumber(self.options.value)
             ? self.options.values[self.options.value] : self.options.value;
-        Ox.print('!!!$!!!', self.options.value)
     }
     self.options.arrowStep = options.arrowStep || self.options.step;
     self.options.trackImages = Ox.toArray(self.options.trackImages);
diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js
index 0b449c48..9460af54 100644
--- a/source/Ox.UI/js/Form/Ox.Select.js
+++ b/source/Ox.UI/js/Form/Ox.Select.js
@@ -156,6 +156,11 @@ Ox.Select = function(options, self) {
             self.options.title ? self.options.title : getItem(self.options.value).title
         );
         that.triggerEvent('change', {
+            title: Ox.isString(self.options.value)
+                ? getItem(self.options.value).title
+                : self.options.value.map(function(value) {
+                    return getItem(value).title;
+                }),
             value: self.options.value
         });
     }
diff --git a/source/Ox.UI/js/Form/Ox.SelectInput.js b/source/Ox.UI/js/Form/Ox.SelectInput.js
index 8bc4db5f..b1b8b9d0 100644
--- a/source/Ox.UI/js/Form/Ox.SelectInput.js
+++ b/source/Ox.UI/js/Form/Ox.SelectInput.js
@@ -47,7 +47,7 @@ Ox.SelectInput = function(options, self) {
                     self.$select.options({width: self.otherWidth})
                         .addClass('OxOverlapRight');
                     self.$input.show().focusInput(true);
-                    self.options.value = self.$input.options('value');
+                    self.options.value = self.$input.value();
                 }
             }
         });
@@ -58,7 +58,6 @@ Ox.SelectInput = function(options, self) {
         })
         .bindEvent({
             change: function(data) {
-                Ox.print('DATA:', data)
                 self.options.value = data.value;
             }
         })
diff --git a/source/Ox.UI/js/Form/Ox.Spreadsheet.js b/source/Ox.UI/js/Form/Ox.Spreadsheet.js
index cdbf2d9d..fe9e10cf 100644
--- a/source/Ox.UI/js/Form/Ox.Spreadsheet.js
+++ b/source/Ox.UI/js/Form/Ox.Spreadsheet.js
@@ -32,11 +32,9 @@ Ox.Spreadsheet = function(options, self) {
 
     function addColumn(index) {
         self.options.columns.splice(index, 0, '');
-        Ox.print('sv', JSON.stringify(self.values))
         self.values.forEach(function(columns) {
             columns.splice(index, 0, 0);
         });
-        Ox.print('sv', JSON.stringify(self.values))
         renderSpreadsheet();
     }
 
@@ -52,7 +50,6 @@ Ox.Spreadsheet = function(options, self) {
             row: Ox.repeat([0], self.rows),
             sheet: 0
         };
-        Ox.print('sv', self.values);
         self.values.forEach(function(columns, r) {
             columns.forEach(function(value, c) {
                 sums.column[c] += value;
@@ -93,12 +90,10 @@ Ox.Spreadsheet = function(options, self) {
 
         Ox.merge([self.options.title], Ox.clone(self.options.rows), ['Total']).forEach(function(row, r) {
             r--;
-            Ox.print('ROW', row);
             Ox.merge([''], Ox.clone(self.options.columns), ['Total']).forEach(function(column, c) {
                 c--;
                 if (r == -1) {
                     if (c == -1 || c == self.columns) {
-                        Ox.print('c', c, 'row', row)
                         Ox.Label({
                                 style: 'square',
                                 textAlign: c == -1 ? 'left' : 'right',
@@ -210,9 +205,9 @@ Ox.Spreadsheet = function(options, self) {
                             change: function(data) {
                                 self.values[r][c] = parseInt(data.value);
                                 self.sums = getSums();
-                                self.$input[c + ',' + self.rows].options({value: self.sums.column[c]});
-                                self.$input[self.columns + ',' + r].options({value: self.sums.row[r]});
-                                self.$input[self.columns + ',' + self.rows].options({value: self.sums.sheet});
+                                self.$input[c + ',' + self.rows].value(self.sums.column[c]);
+                                self.$input[self.columns + ',' + r].value(self.sums.row[r]);
+                                self.$input[self.columns + ',' + self.rows].value(self.sums.sheet);
                                 triggerChangeEvent();
                             }
                         });                    
diff --git a/source/Ox.UI/js/Form/Ox.TimeInput.js b/source/Ox.UI/js/Form/Ox.TimeInput.js
index f25c6a32..516d44ce 100644
--- a/source/Ox.UI/js/Form/Ox.TimeInput.js
+++ b/source/Ox.UI/js/Form/Ox.TimeInput.js
@@ -143,17 +143,17 @@ Ox.TimeInput = function(options, self) {
         return Ox.formatDate(
             new Date(
                 '1970/01/01 ' + [
-                    self.$input.hours.options('value'),
-                    self.$input.minutes.options('value'),
-                    self.options.seconds ? self.$input.seconds.options('value') : '00'
+                    self.$input.hours.value(),
+                    self.$input.minutes.value(),
+                    self.options.seconds ? self.$input.seconds.value() : '00'
                 ].join(':') + (
-                    self.options.ampm ? ' ' + self.$input.ampm.options('value') : ''
+                    self.options.ampm ? ' ' + self.$input.ampm.value() : ''
                 )
             ),
             (
                 self.options.seconds ? '%T' : '%H:%M'
             ) + (
-                self.options.milliseconds ? '.' + self.$input.milliseconds.options('value') : ''
+                self.options.milliseconds ? '.' + self.$input.milliseconds.value() : ''
             )
         );
     }
diff --git a/source/Ox.UI/js/List/Ox.TextList.js b/source/Ox.UI/js/List/Ox.TextList.js
index d44d45c2..ae4003f5 100644
--- a/source/Ox.UI/js/List/Ox.TextList.js
+++ b/source/Ox.UI/js/List/Ox.TextList.js
@@ -265,7 +265,7 @@ Ox.TextList = function(options, self) {
     function changeColumns(data) {
         var add,
             ids = [];
-        Ox.forEach(data.selected, function(column) {
+        Ox.forEach(data.value, function(column) {
             var index = getColumnIndexById(column.id);
             if (!self.options.columns[index].visible) {
                 addColumn(column.id);
diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js
index aa35c332..51eb3f9f 100644
--- a/source/Ox.UI/js/Map/Ox.ListMap.js
+++ b/source/Ox.UI/js/Map/Ox.ListMap.js
@@ -234,7 +234,7 @@ Ox.ListMap = function(options, self) {
                     })
                     .bindEvent({
                         change: function(data) {
-                            var key = data.selected[0].id,
+                            var key = data.value,
                                 value = self.$findInput.value();
                             value && updateList(key, value);
                         }
@@ -324,7 +324,7 @@ Ox.ListMap = function(options, self) {
         */
         changeplace: function(data) {
             self.$placeForm.values(data).show();
-            self.$areaKmInput.options({value: Ox.formatArea(data.area)});
+            self.$areaKmInput.value(Ox.formatArea(data.area));
         },
         changeplaceend: function(data) {
             //Ox.Log('Map', 'ssP', self.selectedPlace);
@@ -470,7 +470,7 @@ Ox.ListMap = function(options, self) {
                 {id: 'borough', title: 'Borough'},
                 {id: 'street', title: 'Street'}, // streets, squares, bridges, tunnels, ...
                 {id: 'building', title: 'Building'}, // airports, stations, stadiums, military installations, ...
-                {id: 'feature', title: 'Feature'} // continents, islands, rivers, lakes, seas, oceans, ...
+                {id: 'feature', title: 'Feature'} // continents, islands, rivers, lakes, seas, oceans, mountains...
             ],
             label: 'Type',
             labelWidth: 64,
@@ -483,7 +483,7 @@ Ox.ListMap = function(options, self) {
                 } else {
                     !isResult && editPlace(['type'])
                 }
-                self.$map.value(self.selectedPlace, 'type', data.selected[0].id);
+                self.$map.value(self.selectedPlace, 'type', data.value);
             }
         })
     ], ['Latitude', 'Longitude', 'South', 'West', 'North', 'East'].map(function(v) {
@@ -805,7 +805,7 @@ Ox.ListMap = function(options, self) {
             });
             self.$placeName.options({title: place.geoname || ''});
             self.$placeTitle.show();
-            self.$areaKmInput.options({value: Ox.formatArea(place.area)});
+            self.$areaKmInput.value(Ox.formatArea(place.area));
             self.$placeForm.values(place).show();
             self.$placeButton.options({title: isResult ? 'Add Place' : 'Remove Place'}).show();
             updateMatches();
@@ -850,12 +850,12 @@ Ox.ListMap = function(options, self) {
                 return name !== '';
             });
             if (names.length) {
-                self.$matchesInput.options({value: ''});
+                self.$matchesInput.value('');
                 self.options.getMatches(names, function(matches) {
-                    self.$matchesInput.options({value: Ox.formatNumber(matches)});
+                    self.$matchesInput.value(Ox.formatNumber(matches));
                 });
             } else {
-                self.$matchesInput.options({value: 0});
+                self.$matchesInput.value(0);
             }
         }
     }
diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js
index 70b8f065..9309a7fa 100644
--- a/source/Ox.UI/js/Map/Ox.Map.js
+++ b/source/Ox.UI/js/Map/Ox.Map.js
@@ -575,6 +575,7 @@ Ox.Map = function(options, self) {
             self.$zoomInput && self.$zoomInput.remove();
             self.$zoomInput = Ox.Range({
                     arrows: true,
+                    changeOnDrag: true,
                     max: self.maxZoom,
                     min: self.minZoom,
                     size: that.width(),
@@ -817,7 +818,7 @@ Ox.Map = function(options, self) {
             that.overlayView.draw();
 
             if (self.options.find) {
-                self.$findInput.options({value: self.options.find})
+                self.$findInput.value(self.options.find)
                     .triggerEvent('submit', {value: self.options.find});
             } else if (self.options.selected) {
                 selectPlace(self.options.selected, true);
@@ -906,7 +907,6 @@ Ox.Map = function(options, self) {
                     }
                 });
             } else {
-                Ox.print ('sG cD', spansGlobe(), crossesDateline())
                 self.options.places({
                     keys: self.placeKeys,
                     query: {
@@ -1363,7 +1363,7 @@ Ox.Map = function(options, self) {
             self.map.setZoom(self.maxZoom);
         } else {
             self.zoomChanged = true;
-            self.$zoomInput && self.$zoomInput.options({value: zoom});
+            self.$zoomInput && self.$zoomInput.value(zoom);
             that.triggerEvent('zoom', {
                 value: zoom
             });
diff --git a/source/Ox.UI/js/Panel/Ox.TabPanel.js b/source/Ox.UI/js/Panel/Ox.TabPanel.js
index 7f18ea9b..685515b2 100644
--- a/source/Ox.UI/js/Panel/Ox.TabPanel.js
+++ b/source/Ox.UI/js/Panel/Ox.TabPanel.js
@@ -21,7 +21,7 @@ Ox.TabPanel = function(options, self) {
         })
         .bindEvent({
             change: function(data) {
-                self.selected = data.selected[0];
+                self.selected = data.value;
                 that.$element.replaceElement(1, getContent());
                 that.triggerEvent('change', {selected: self.selected});
             }
diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js
index 75bfa2a8..6e6132cf 100644
--- a/source/Ox.UI/js/Video/Ox.VideoEditor.js
+++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js
@@ -435,7 +435,7 @@ Ox.VideoEditor = function(options, self) {
                         width: 256
                     }).open();
                 } else if (id == 'resolution') {
-                    self.options.resolution = parseInt(data.checked[0].id);
+                    self.options.resolution = parseInt(value);
                     self.$player[0].options({resolution: self.options.resolution});
                 }
             }
diff --git a/source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js b/source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js
index 0d0120a4..f633d4fb 100644
--- a/source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js
@@ -261,9 +261,7 @@ Ox.VideoEditorPlayer = function(options, self) {
         self.options.position = data.position;
         setMarkers();
         setSubtitle();
-        self.$positionInput.options({
-            value: Ox.formatDuration(self.options.position, 3)
-        });
+        self.$positionInput.value(Ox.formatDuration(self.options.position, 3));
         that.triggerEvent('playing', {
             position: self.options.position
         });
@@ -322,9 +320,7 @@ Ox.VideoEditorPlayer = function(options, self) {
         }
         setMarkers();
         setSubtitle();
-        self.$positionInput.options({
-            value: Ox.formatDuration(self.options.position, 3)
-        });
+        self.$positionInput.value(Ox.formatDuration(self.options.position, 3));
     }
 
     function setSubtitle() {
diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
index 3a689701..96a407eb 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
@@ -658,9 +658,7 @@ Ox.VideoPlayer = function(options, self) {
                                     }
                                     self.$position.hide();
                                     self.$positionInput
-                                        .options({
-                                            value: formatPosition()
-                                        })
+                                        .value(formatPosition())
                                         .show()
                                         .focusInput(false);
                                 }
@@ -1019,6 +1017,7 @@ Ox.VideoPlayer = function(options, self) {
             .appendTo(self.$volume);
 
         self.$volumeInput = Ox.Range({
+                changeOnDrag: true,
                 max: 1,
                 min: 0,
                 step: 0.001,
@@ -1916,9 +1915,7 @@ Ox.VideoPlayer = function(options, self) {
         showVolume();
         self.options.volume = Ox.limit(self.options.volume + num, 0, 1);
         setVolume(self.options.volume);
-        self.$volumeInput && self.$volumeInput.options({
-            value: self.options.volume
-        });
+        self.$volumeInput && self.$volumeInput.value(self.options.volume);
     }
 
     function setVolume(volume) {
@@ -2030,8 +2027,8 @@ Ox.VideoPlayer = function(options, self) {
     function submitPositionInput() {
         self.$positionInput.hide();
         self.$position.html('').show();
-        //Ox.Log('Video', '###', parsePositionInput(self.$positionInput.options('value')))
-        setPosition(parsePositionInput(self.$positionInput.options('value')));
+        //Ox.Log('Video', '###', parsePositionInput(self.$positionInput.value()))
+        setPosition(parsePositionInput(self.$positionInput.value()));
         if (self.playOnSubmit) {
             togglePaused();
             self.$video.play();
@@ -2143,9 +2140,9 @@ Ox.VideoPlayer = function(options, self) {
         self.$volumeButton && self.$volumeButton.attr({
             src: getVolumeImageURL()
         });
-        self.$volumeInput && self.$volumeInput.options({
-            value: self.options.muted ? 0 : self.options.volume
-        });
+        self.$volumeInput && self.$volumeInput.value(
+            self.options.muted ? 0 : self.options.volume
+        );
         self.$volumeValue && self.$volumeValue.html(
             self.options.muted ? 0 : Math.round(self.options.volume * 100)
         );