self.setOption ~> that.update

source/Ox.UI/js/Bar/Ox.Progressbar.js

@@ -40,6 +40,14 @@ Ox.Progressbar = function(options, self) {
             width: 256
         })
         .options(options || {})
+        .update({
+            cancelled: toggleCancelled,
+            paused: togglePaused,
+            progress: function() {
+                self.options.progress = Ox.limit(self.options.progress, 0, 1);
+                !self.options.paused && !self.options.cancelled && setProgress(true);
+            }
+        })
         .addClass('OxProgressbar')
         .css({width: self.options.width - 2 + 'px'});
 
@@ -213,17 +221,6 @@ Ox.Progressbar = function(options, self) {
         that.triggerEvent(self.options.paused ? 'pause' : 'resume');
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'cancelled') {
-            toggleCancelled();
-        } else if (key == 'paused') {
-            togglePaused();
-        } else if (key == 'progress') {
-            self.options.progress = Ox.limit(self.options.progress, 0, 1);
-            !self.options.paused && !self.options.cancelled && setProgress(true);
-        }
-    };
-
     /*@
     that.status <f> Returns time elapsed / remaining
         () -> <o> status

source/Ox.UI/js/Bar/Ox.Resizebar.js

@@ -32,7 +32,13 @@ Ox.Resizebar = function(options, self) {
                 resize: [],
                 size: 0
             })
-            .options(options || {}) // fixme: options function should be able to handle undefined, no need for || {}
+            .options(options || {})
+            .update({
+                collapsed: function() {
+                    that.css({cursor: getCursor()});
+                    self.$tooltip && self.$tooltip.options({title: getTitle()});
+                }
+            })
             .addClass('OxResizebar Ox' + Ox.toTitleCase(self.options.orientation))
             .bindEvent({
                 // singleclick: toggle,
@@ -189,13 +195,6 @@ Ox.Resizebar = function(options, self) {
         });
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'collapsed') {
-			that.css({cursor: getCursor()});
-			self.$tooltip && self.$tooltip.options({title: getTitle()});
-        }
-    };
-
     return that;
 
 };

source/Ox.UI/js/Calendar/Ox.Calendar.js

@@ -44,6 +44,42 @@ Ox.Calendar = function(options, self) {
             zoomOnlyWhenFocused: false
         })
         .options(options || {})
+        .update({
+            date: function() {
+                // ...
+            },
+            events: function() {
+                self.options.events.forEach(function(event) {
+                    event = getEventData(event);
+                });
+                self.$lines = [];
+                getLines();
+                renderCalendar();
+                if (self.options.selected) {
+                    selectEvent(
+                        getSelectedEvent() ? self.options.selected : ''
+                    );
+                }
+            },
+            height: function() {
+                that.css({height: self.options.height + 'px'});
+            },
+            selected: function() {
+                var selected = self.options.selected;
+                // deselect would not work if self.options.selected was already empty
+                self.options.selected = 'FIXME: THIS IS A VERY UGLY HACK';
+                selectEvent(selected);
+            },
+            width: function() {
+                that.css({width: self.options.width + 'px'});
+                self.options.showZoombar && self.$zoomInput.options({size: self.options.width});
+                renderOverlay();
+                //getLines();
+            },
+            zoom: function() {
+                // ...
+            }
+        })
         .addClass('OxCalendar')
         /*
         .css({
@@ -1225,36 +1261,6 @@ Ox.Calendar = function(options, self) {
         }
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'date') {
-            // ...
-        } else if (key == 'events') {
-            value.forEach(function(event) {
-                event = getEventData(event);
-            });
-            self.$lines = [];
-            getLines();
-            renderCalendar();
-            if (self.options.selected) {
-                selectEvent(
-                    getSelectedEvent() ? self.options.selected : ''
-                );
-            }
-        } else if (key == 'height') {
-            that.css({height: self.options.height + 'px'});
-        } else if (key == 'selected') {
-            self.options.selected = 'FIXME: THIS IS A VERY UGLY HACK';
-            selectEvent(value);
-        } else if (key == 'width') {
-            that.css({width: self.options.width + 'px'});
-            self.options.showZoombar && self.$zoomInput.options({size: self.options.width});
-            renderOverlay();
-            //getLines();
-        } else if (key == 'zoom') {
-            
-        }
-    };
-
     /*@
     that.addEvent <f> addEvent
         (event) -> <o> object

source/Ox.UI/js/Calendar/Ox.ListCalendar.js

@@ -28,6 +28,16 @@ Ox.ListCalendar = function(options, self) {
             width: 256
         })
         .options(options || {})
+        .update({
+            height: function() {
+                // fixme: should be .resizeList
+                self.$list.size();
+                self.$calendar.resizeCalendar();
+            },
+            width: function() {
+                self.$calendar.resizeCalendar();
+            }
+        })
         .css({
             width: self.options.width + 'px',
             height: self.options.height + 'px'
@@ -807,16 +817,6 @@ Ox.ListCalendar = function(options, self) {
         self.$list.options({items: events});
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'height') {
-            // fixme: should be .resizeList
-            self.$list.size();
-            self.$calendar.resizeCalendar();
-        } else if (key == 'width') {
-            self.$calendar.resizeCalendar();
-        }
-    };
-
     return that;
 
 };

source/Ox.UI/js/Code/Ox.DocPanel.js

@@ -44,7 +44,12 @@ Ox.DocPanel = function(options, self) {
             selected: '',
             size: 256
         })
-        .options(options || {});
+        .options(options || {})
+        .update({
+            selected: function() {
+                selectItem(self.options.selected);
+            }
+        });
 
     self.$list = Ox.Element();
     self.$page = Ox.Element();
@@ -185,12 +190,6 @@ Ox.DocPanel = function(options, self) {
             : 0;
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'selected') {
-            selectItem(value);
-        }
-    };
-
     return that;
 
 };

source/Ox.UI/js/Code/Ox.ExamplePanel.js

@@ -22,6 +22,11 @@ Ox.ExamplePanel = function(options, self) {
             size: 256
         })
         .options(options || {})
+        .update({
+            selected: function() {
+                self.$list.options({selected: [self.options.selected]});
+            }
+        });
 
     self.$list = Ox.Element();
     self.$page = Ox.Element();
@@ -122,12 +127,6 @@ Ox.ExamplePanel = function(options, self) {
         that.triggerEvent('select', {id: id});
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'selected') {
-            self.$list.options({selected: [value]});
-        }
-    };
-
     return that;
 
 };

source/Ox.UI/js/Core/Ox.App.js

@@ -71,14 +71,6 @@ Ox.App = function(options) {
         };
     }
 
-    /*@
-    change <f> change key/value
-        (key, value) -> <u> currently not implemented
-    @*/
-    self.setOption = function(key, value) {
-        
-    };
-
     /*@
     options <f> get/set options, see Ox.getset
         () -> <o> get options

source/Ox.UI/js/Core/Ox.Element.js

@@ -389,10 +389,10 @@ Ox.Element = function(options, self) {
         ()                  -> <obj> all options
         (key)               -> <any> the value of option[key]
         (key, value)        -> <obj> this element
-            Sets options[key] to value and calls self.setOption(key, value)
+            Sets options[key] to value and calls update(key, value)
             if the key/value pair was added or modified
         ({key: value, ...}) -> <obj> this element
-            Sets multiple options and calls self.setOption(key, value)
+            Sets multiple options and calls update(key, value)
             for every key/value pair that was added or modified
         # Arguments
         key     <str> the name of the option

source/Ox.UI/js/Core/Ox.JQueryElement.js

@@ -9,9 +9,7 @@ Ox.JQueryElement = function($element) {
     //@ id <number> Unique id
     this.oxid = Ox.uid();
     //@ $element <object> The jQuery-wrapped DOM element
-    this.$element = $element.data({
+    this.$element = $element.data({oxid: this.oxid});
-        oxid: this.oxid
-    });
     //@ 0 <element> The DOM element (for compatibility with jQuery)
     this[0] = this.$element[0];
     //@ length <number> 1 (for compatibility with jQuery)

source/Ox.UI/js/Form/Ox.ArrayEditable.js

@@ -30,6 +30,30 @@ Ox.ArrayEditable = function(options, self) {
             width: 256
         })
         .options(options || {})
+        .update({
+            highlight: function() {
+                self.$items.forEach(function($item) {
+                    $item.options({highlight: self.options.highlight})
+                });
+            },
+            items: function() {
+                if (self.options.selected && getSelectedPosition() == -1) {
+                    selectNone();
+                }
+                renderItems(true);
+            },
+            selected: function() {
+                selectItem(self.options.selected);
+            },
+            sort: renderItems,
+            width: function() {
+                var width = self.options.width;
+                that.css({width: width - 8 + 'px'}); // 2 x 4 px padding
+                self.options.type == 'textarea' && self.$items.forEach(function($item) {
+                    $item.options({width: width})
+                });
+            }
+        })
         .addClass('OxArrayEditable OxArrayEditable' + Ox.toTitleCase(self.options.type))
         .css({width: self.options.width - (self.options.type == 'input' ? 8 : 0) + 'px'}) // 2 x 4 px padding
         .bindEvent({
@@ -318,28 +342,6 @@ Ox.ArrayEditable = function(options, self) {
         }
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'highlight') {
-            self.$items.forEach(function($item) {
-                $item.options({highlight: value})
-            });
-        } else if (key == 'items') {
-            if (self.options.selected && getSelectedPosition() == -1) {
-                selectNone();
-            }
-            renderItems(true);
-        } else if (key == 'selected') {
-            selectItem(value);
-        } else if (key == 'sort') {
-            renderItems();
-        } else if (key == 'width') {
-            that.css({width: value - 8 + 'px'}); // 2 x 4 px padding
-            self.options.type == 'textarea' && self.$items.forEach(function($item) {
-                $item.options({width: value})
-            });
-        }
-    }
-
     /*@
     addItem <f> addItem
         (position, item) -> <o> add item at position

source/Ox.UI/js/Form/Ox.ArrayInput.js

@@ -23,7 +23,11 @@ Ox.ArrayInput = function(options, self) {
             value: [],
             width: 256
         })
-        .options(options || {});
+        .options(options || {})
+        .update({
+            value: setValue,
+            width: setWidths
+        });
 
     if (self.options.label) {
         self.$label = Ox.Label({
@@ -176,14 +180,6 @@ Ox.ArrayInput = function(options, self) {
         });
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'value') {
-            setValue();
-        } else if (key == 'width') {
-            setWidths();
-        }
-    }
-
     /*@
     setErrors <f> setErrors
         (values) -> <u> set erros

source/Ox.UI/js/Form/Ox.Button.js

@@ -48,6 +48,29 @@ Ox.Button = function(options, self) {
             .options(Ox.isArray(options.tooltip) ? Ox.extend(Ox.clone(options), {
                 tooltip: options.tooltip[0]
             }) : options || {})
+            .update({
+                disabled: function() {
+                    that.attr({disabled: self.options.disabled}).toggleClass('OxDisabled');
+                    self.options.disabled && that.$tooltip && that.$tooltip.hide();
+                },
+                //FIXME: check if this is still needed
+                tooltip: function() {
+                    that.$tooltip.options({title: self.options.disabled});
+                },
+                title: setTitle,
+                value: function() {
+                    if (self.options.values.length) {
+                        self.options.title = Ox.getObjectById(
+                            self.options.values, self.options.value
+                        ).title;
+                        setTitle();
+                    }
+                    self.options.selectable && that.toggleClass('OxSelected');
+                },
+                width: function() {
+                    that.$element.css({width: (self.options.width - 14) + 'px'});
+                }
+            })
             .attr({
                 disabled: self.options.disabled,
                 type: self.options.type == 'text' ? 'button' : 'image'
@@ -121,25 +144,6 @@ Ox.Button = function(options, self) {
         }
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'disabled') {
-            that.attr({disabled: value}).toggleClass('OxDisabled');
-            value && that.$tooltip && that.$tooltip.hide();
-        } else if (key == 'tooltip') {
-            that.$tooltip.options({title: value});
-        } else if (key == 'title') {
-            setTitle();
-        } else if (key == 'value') {
-            if (self.options.values.length) {
-                self.options.title = Ox.getObjectById(self.options.values, value).title;
-                setTitle();
-            }
-            self.options.selectable && that.toggleClass('OxSelected');
-        } else if (key == 'width') {
-            that.$element.css({width: (value - 14) + 'px'});
-        }
-    };
-
     /*@
     toggle <f> toggle
         () -> <o> toggle button 

source/Ox.UI/js/Form/Ox.ButtonGroup.js

@@ -30,6 +30,22 @@ Ox.ButtonGroup = function(options, self) {
                 value: options.max != 1 ? [] : ''
             })
             .options(options || {})
+            .update({
+                value: function() {
+                    // fixme: this doesn't work in cases where 
+                    // multiple buttons can be selected 
+                    var position = Ox.getIndexById(
+                        self.options.buttons, self.options.value
+                    );
+                    if (position > -1) { 
+                        self.$buttons[position].trigger('click'); 
+                    } else if (self.options.min == 0) {
+                        self.$buttons.forEach(function($button, i) {
+                            $button.options('value') && $button.trigger('click');
+                        });
+                    }
+                }
+            })
             .addClass('OxButtonGroup');
 
     self.options.buttons = self.options.buttons.map(function(button) {
@@ -99,21 +115,6 @@ Ox.ButtonGroup = function(options, self) {
         }
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'value') {
-            // fixme: this doesn't work in cases where 
-            // multiple buttons can be selected 
-            var position = Ox.getIndexById(self.options.buttons, value); 
-            if (position > -1) { 
-                self.$buttons[position].trigger('click'); 
-            } else if (self.options.min == 0) {
-                self.$buttons.forEach(function($button, i) {
-                    $button.options('value') && $button.trigger('click');
-                });
-            }
-        }
-    }
-
     return that;
 
 };

source/Ox.UI/js/Form/Ox.Checkbox.js

@@ -34,6 +34,24 @@ Ox.Checkbox = function(options, self) {
                 width: 'auto'
             })
             .options(options || {})
+            .update({
+                disabled: function() {
+                    var disabled = self.options.disabled;
+                    that.attr({disabled: disabled});
+                    self.$button.options({disabled: disabled});
+                    self.$title && self.$title.options({disabled: disabled});
+                },
+                title: function() {
+                    self.$title.options({title: self.options.title});
+                },
+                value: function() {
+                    self.$button.toggle();
+                },
+                width: function() {
+                    that.css({width: self.options.width + 'px'});
+                    self.$title && self.$title.options({width: getTitleWidth()});
+                }
+            })
             .addClass('OxCheckbox' + (
                 self.options.overlap == 'none'
                 ? '' : ' OxOverlap' + Ox.toTitleCase(self.options.overlap)
@@ -98,21 +116,6 @@ Ox.Checkbox = function(options, self) {
             - !!self.options.label * self.options.labelWidth;
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'disabled') {
-            that.attr({disabled: value});
-            self.$button.options({disabled: value});
-            self.$title && self.$title.options({disabled: value});
-        } else if (key == 'title') {
-            self.$title.options({title: value});
-        } else if (key == 'value') {
-            self.$button.toggle();
-        } else if (key == 'width') {
-            that.css({width: value + 'px'});
-            self.$title && self.$title.options({width: getTitleWidth()});
-        }
-    };
-
     return that;
 
 };

source/Ox.UI/js/Form/Ox.Editable.js

@@ -34,6 +34,29 @@ Ox.Editable = function(options, self) {
             type: 'input'
         })
         .options(options || {})
+        .update({
+            editing: function() {
+                if (self.options.editing) {
+                    // edit will toggle self.options.editing
+                    self.options.editing = false;
+                    edit();
+                } else {
+                    submit();
+                }
+            },
+            height: function() {
+                setCSS({height: self.options.height + 'px'});
+            },
+            width: function() {
+                setCSS({width: self.options.width + 'px'});
+            },
+            highlight: function() {
+                self.$value.html(formatValue());
+            },
+            value: function() {
+                self.$value.html(formatValue());
+            }
+        })
         .addClass('OxEditableElement' + (self.options.editable ? ' OxEditable' : ''))
         .on({
             click: function() {
@@ -196,6 +219,12 @@ Ox.Editable = function(options, self) {
         );
     }
 
+    function setCSS(css) {
+        self.$test && self.$test.css(css);
+        self.$input && self.$input.css(css);
+        self.$input && self.$input.find(self.options.type).css(css);
+    }
+
     function setSizes() {
         var height, width;
         self.$test.css({display: 'inline-block'});
@@ -227,28 +256,6 @@ Ox.Editable = function(options, self) {
         that.triggerEvent('submit', {value: self.options.value});
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'editing') {
-            if (value) {
-                // edit will toggle self.options.editing
-                self.options.editing = false;
-                edit();
-            } else {
-                submit();
-            }
-        } else if (key == 'height' || key == 'width') {
-            var css = {};
-            css[key] = value + 'px';
-            self.$test && self.$test.css(css);
-            self.$input && self.$input.css(css);
-            self.$input && self.$input.find(self.options.type).css(css);
-        } else if (key == 'highlight') {
-            self.$value.html(formatValue());
-        } else if (key == 'value') {
-            self.$value.html(formatValue());
-        }
-    };
-
     that.css = function(css) {
         self.css = css;
         that.$element.css(css);

source/Ox.UI/js/Form/Ox.FileButton.js

@@ -20,6 +20,15 @@ Ox.FileButton = function(options, self) {
             width: 256
         })
         .options(options || {})
+        .update({
+            disabled: function() {
+                self.$button.options({disabled: self.options.disabled});
+                self.$input[self.options.disabled ? 'hide' : 'show']();
+            },
+            title: function() {
+                self.$button.options({title: self.options.title});
+            }
+        })
         .addClass('OxFileButton')
         .css({width: self.options.width + 'px'});
 
@@ -98,15 +107,6 @@ Ox.FileButton = function(options, self) {
             .appendTo(that);
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'disabled') {
-            self.$button.options({disabled: value});
-            self.$input[value ? 'hide' : 'show']();
-        } else if (key == 'title') {
-            self.$button.options({title: value});
-        }
-    }
-
     /*@
     blurButton <f> blurButton
     @*/

source/Ox.UI/js/Form/Ox.FormElementGroup.js

@@ -27,6 +27,9 @@ Ox.FormElementGroup = function(options, self) {
                 width: 0
             })
             .options(options || {})
+            .update({
+                value: setValue
+            })
             .addClass('OxInputGroup');
 
     if (Ox.isEmpty(self.options.value)) {
@@ -97,12 +100,6 @@ Ox.FormElementGroup = function(options, self) {
         
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'value') {
-            setValue();
-        }
-    };
-
     /*@
     replaceElement <f> replaceElement
         (pos, element) -> <u> replcae element at position

source/Ox.UI/js/Form/Ox.Input.js

@@ -99,6 +99,49 @@ Ox.Input = function(options, self) {
                 width: 128
             })
             .options(options || {})
+            .update(function(key, value) {
+                var inputWidth;
+                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});
+                } else if (key == 'height') {
+                    that.css({height: value + 'px'});
+                    self.$input.css({height: value - 6 + 'px'});
+                } else if (key == 'labelWidth') {
+                    self.$label.options({width: value});
+                    inputWidth = getInputWidth();
+                    self.$input.css({
+                        width: inputWidth + 'px'
+                    });
+                    self.hasPasswordPlaceholder && self.$placeholder.css({
+                        width: inputWidth + 'px'
+                    });
+                } else if (key == 'placeholder') {
+                    setPlaceholder();
+                } else if (key == 'value') {
+                    if (self.options.type == 'float' && self.options.decimals) {
+                        self.options.value = self.options.value.toFixed(self.options.decimals);
+                    }
+                    self.$input.val(self.options.value);
+                    that.is('.OxError') && that.removeClass('OxError');
+                    setPlaceholder();
+                } else if (key == 'width') {
+                    that.css({width: self.options.width + 'px'});
+                    inputWidth = getInputWidth();
+                    self.$input.css({
+                        width: inputWidth + 'px'
+                    });
+                    self.hasPasswordPlaceholder && self.$placeholder.css({
+                        width: inputWidth + 'px'
+                    });
+                }
+            })
             .addClass(
                 'OxInput OxMedium Ox' + Ox.toTitleCase(self.options.style) /*+ (
                     self.options.overlap != 'none' ?
@@ -847,48 +890,6 @@ Ox.Input = function(options, self) {
         });
     }
 
-    self.setOption = function(key, value) {
-        var inputWidth;
-        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});
-		} else if (key == 'height') {
-		    that.css({height: value + 'px'});
-		    self.$input.css({height: value - 6 + 'px'});
-		} else if (key == 'labelWidth') {
-		    self.$label.options({width: value});
-		    inputWidth = getInputWidth();
-            self.$input.css({
-                width: inputWidth + 'px'
-            });
-            self.hasPasswordPlaceholder && self.$placeholder.css({
-                width: inputWidth + 'px'
-            });
-		} else if (key == 'placeholder') {
-            setPlaceholder();
-        } else if (key == 'value') {
-            if (self.options.type == 'float' && self.options.decimals) {
-                self.options.value = self.options.value.toFixed(self.options.decimals);
-            }
-            self.$input.val(self.options.value);
-            that.is('.OxError') && that.removeClass('OxError');
-            setPlaceholder();
-        } else if (key == 'width') {
-            that.css({width: self.options.width + 'px'});
-            inputWidth = getInputWidth();
-            self.$input.css({
-                width: inputWidth + 'px'
-            });
-            self.hasPasswordPlaceholder && self.$placeholder.css({
-                width: inputWidth + 'px'
-            });
-        }
-    };
-
     /*@
     blurInput <f> blurInput
     @*/

source/Ox.UI/js/Form/Ox.InputGroup.js

@@ -24,6 +24,9 @@ Ox.InputGroup = function(options, self) {
             width: 0
         })
         .options(options || {})
+        .update({
+            value: setValue
+        })
         .addClass('OxInputGroup')
         .click(click);
 
@@ -136,12 +139,6 @@ Ox.InputGroup = function(options, self) {
         that.triggerEvent('validate', data);
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'value') {
-            setValue();
-        }
-    };
-
     // fixme: is this used?
     that.getInputById = function(id) {
         var input = null;

source/Ox.UI/js/Form/Ox.Label.js

@@ -9,45 +9,44 @@ Ox.Label = function(options, self) {
 
     self = self || {};
     var that = Ox.Element({}, self)
-            .defaults({
+        .defaults({
-                disabled: false,
+            disabled: false,
-                id: '',
+            id: '',
-                overlap: 'none',
+            overlap: 'none',
-                textAlign: 'left',
+            textAlign: 'left',
-                style: 'rounded',
+            style: 'rounded',
-                title: '',
+            title: '',
-                width: 'auto'
+            width: 'auto'
-            })
+        })
-            .options(options || {})
+        .options(options || {})
-            .addClass(
+        .update({
-                'OxLabel Ox' + Ox.toTitleCase(self.options.style) 
+            title: function() {
-                + (self.options.disabled ? ' OxDisabled' : '')
+                that.html(self.options.title);
-                + (
+            },
-                    self.options.overlap != 'none'
+            width: function() {
-                    ?
+                that.css({
-                    ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : ''
+                    width: self.options.width - (
-                )
+                        self.options.style == 'rounded' ? 14 : 8
+                    ) + 'px'
+                });
+            }
+        })
+        .addClass(
+            'OxLabel Ox' + Ox.toTitleCase(self.options.style) 
+            + (self.options.disabled ? ' OxDisabled' : '')
+            + (
+                self.options.overlap != 'none'
+                ? ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : ''
             )
-            .css(Ox.extend(self.options.width == 'auto' ? {} : {
+        )
-                width: self.options.width - (
+        .css(Ox.extend(self.options.width == 'auto' ? {} : {
-                    self.options.style == 'rounded' ? 14 : 8
+            width: self.options.width - (
-                ) + 'px'
+                self.options.style == 'rounded' ? 14 : 8
-            }, {
+            ) + 'px'
-                textAlign: self.options.textAlign
+        }, {
-            }))
+            textAlign: self.options.textAlign
-            .html(self.options.title);
+        }))
-
+        .html(self.options.title);
-	self.setOption = function(key, value) {
-		if (key == 'title') {
-			that.html(value);
-		} else if (key == 'width') {
-		    that.css({
-		        width: self.options.width - (
-		            self.options.style == 'rounded' ? 14 : 8
-		        ) + 'px'
-		    });
-		}
-	};
 
     return that;
 

source/Ox.UI/js/Form/Ox.ObjectArrayInput.js

@@ -25,6 +25,11 @@ Ox.ObjectArrayInput = function(options, self) {
             width: 256
         })
         .options(options || {})
+        .update({
+            value: function() {
+                setValue(self.options.value);
+            }
+        })
         .addClass('OxObjectArrayInput');
 
     if (Ox.isEmpty(self.options.value)) {
@@ -163,12 +168,6 @@ Ox.ObjectArrayInput = function(options, self) {
         });
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'value') {
-            setValue(value);
-        }
-    };
-
     return that;
 
 };

source/Ox.UI/js/Form/Ox.ObjectInput.js

@@ -17,6 +17,11 @@ Ox.ObjectInput = function(options, self) {
             width: 256
         })
         .options(options || {})
+        .update({
+            value: function() {
+                setValue(self.options.value);
+            }
+        })
         .addClass('OxObjectInput')
         .css({
             width: self.options.width + 'px',
@@ -59,12 +64,6 @@ Ox.ObjectInput = function(options, self) {
         });
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'value') {
-            setValue(value);
-        }
-    };
-
     return that;
 
 };

source/Ox.UI/js/Form/Ox.Range.js

@@ -50,6 +50,11 @@ Ox.Range = function(options, self) {
             values: []
         })
         .options(options || {})
+        .update({
+            size: setSizes,
+            trackColors: setTrackColors,
+            value: setThumb
+        })
         .addClass('OxRange')
         .css({
             width: self.options.size + 'px'
@@ -280,16 +285,6 @@ Ox.Range = function(options, self) {
         }
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'size') {
-            setSizes();
-        } else if (key == 'trackColors') {
-            setTrackColors();
-        } else if (key == 'value') {
-            setThumb();
-        }
-    }
-
     return that;
 
 };

source/Ox.UI/js/Form/Ox.Select.js

@@ -52,6 +52,33 @@ Ox.Select = function(options, self) {
             })
             // fixme: make default selection restorable
             .options(options)
+            .update({
+                labelWidth: function() {
+                    self.$label.options({width: self.options.labelWidth});
+                    self.$title.css({width: getTitleWidth() + 'px'});
+                },
+                title: function() {
+                    if (self.options.type == 'text') {
+                        self.$title.html(self.options.title);
+                    } else {
+                        self.$button.options({title: self.options.title});
+                    }
+                },
+                width: function() {
+                    that.css({width: self.options.width- 2 + 'px'});
+                    self.$title.css({width: getTitleWidth() + 'px'});
+                },
+                value: function() {
+                    var value = self.options.value;
+                    if (self.options.type == 'text' && !self.options.title) {
+                        self.$title.html(getItem(value).title);
+                    }
+                    value !== '' && Ox.makeArray(value).forEach(function(value) {
+                        self.$menu.checkItem(value);
+                    });
+                    self.options.value = self.optionGroup.value();
+                }
+            })
             .addClass(
                 'OxSelect Ox' + Ox.toTitleCase(self.options.size)
                 + ' Ox' + Ox.toTitleCase(self.options.style) + (
@@ -194,30 +221,6 @@ Ox.Select = function(options, self) {
         self.$menu.showMenu();
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'labelWidth') {
-            self.$label.options({width: value});
-            self.$title.css({width: getTitleWidth() + 'px'});
-        } else if (key == 'title') {
-            if (self.options.type == 'text') {
-                self.$title.html(value);
-            } else {
-                self.$button.options({title: value});
-            }
-        } else if (key == 'width') {
-            that.css({width: value - 2 + 'px'});
-            self.$title.css({width: getTitleWidth() + 'px'});
-        } else if (key == 'value') {
-            if (self.options.type == 'text' && !self.options.title) {
-                self.$title.html(getItem(value).title);
-            }
-            value !== '' && Ox.makeArray(value).forEach(function(value) {
-                self.$menu.checkItem(value);
-            });
-            self.options.value = self.optionGroup.value();
-        }
-    };
-
     /*@
     disableItem <f> disableItem
     @*/

source/Ox.UI/js/Form/Ox.SelectInput.js

@@ -1,5 +1,5 @@
 'use strict';
-
+//FIXME: does not work without options
 /*@
 Ox.SelectInput <f:Ox.FormElementGroup> Select Input
     ([options[, self]]) -> <o> Select Input
@@ -21,7 +21,7 @@ Ox.SelectInput = function(options, self) {
             title: '',
             value: options.max == 1 ? '' : [],
             width: 384
-        }, options)
+        }, options || {})
     });
 
     self.other = self.options.items[self.options.items.length - 1].id;
@@ -58,23 +58,24 @@ Ox.SelectInput = function(options, self) {
     setValue();
 
     that = Ox.FormElementGroup({
-        elements: [
+            elements: [
-            self.$select,
+                self.$select,
-            self.$input
+                self.$input
-        ],
+            ],
-        id: self.options.id,
+            id: self.options.id,
-        join: function(value) {
+            join: function(value) {
-            return value[value[0] == self.other ? 1 : 0]
+                return value[value[0] == self.other ? 1 : 0]
-        },
+            },
-        split: function(value) {
+            split: function(value) {
-            return Ox.filter(self.options.items, function(item, i) {
+                return Ox.filter(self.options.items, function(item, i) {
-                return i < item.length - 1;
+                    return i < item.length - 1;
-            }).map(function(item) {
+                }).map(function(item) {
-                return item.id;
+                    return item.id;
-            }).indexOf(value) > -1 ? [value, ''] : [self.other, value];
+                }).indexOf(value) > -1 ? [value, ''] : [self.other, value];
-        },
+            },
-        width: self.options.width
+            width: self.options.width
-    });
+        })
+        .update({value: setValue});
 
     function getTitle() {
         var value = self.$select ? self.$select.value() : self.options.value;
@@ -118,12 +119,6 @@ Ox.SelectInput = function(options, self) {
         self.$select.options({title: getTitle()});
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'value') {
-            setValue();
-        }
-    };
-
     /*@
     value <f> get/set value
         () -> value     get value

source/Ox.UI/js/List/Ox.Chart.js

@@ -34,6 +34,12 @@ Ox.Chart = function(options, self) {
             width: 512
         })
         .options(options || {})
+        .update({
+            width: function() {
+                self.$chart.empty();
+                renderChart();
+            }
+        })
         .addClass('OxChart')
         .css({
             width: self.options.width + 'px',
@@ -266,13 +272,6 @@ Ox.Chart = function(options, self) {
         return $element;
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'width') {
-            self.$chart.empty();
-            renderChart();
-        }
-    }
-
     return that;
 
 };

source/Ox.UI/js/List/Ox.IconList.js

@@ -49,7 +49,19 @@ Ox.IconList = function(options, self) {
                 sort: [],
                 unique: ''
             })
-            .options(options || {});
+            .options(options || {})
+            .update({
+                items: function() {
+                    that.$element.options('items', self.options.items);
+                },
+                selected: function() {
+                    that.$element.options('selected', self.options.selected);
+                },
+                sort: function() {
+                    updateKeys();
+                    that.$element.options('sort', self.options.sort);
+                }
+            });
 
     if (self.options.fixedRatio) {
         self.options.defaultRatio = self.options.fixedRatio;
@@ -127,21 +139,6 @@ Ox.IconList = function(options, self) {
         });
     }
 
-    /*@
-    setOption <f> set key/value
-        (key, value) -> <u> set key in options to value
-    @*/
-    self.setOption = function(key, value) {
-        if (key == 'items') {
-            that.$element.options(key, value);
-        } else if (key == 'selected') {
-            that.$element.options(key, value);
-        } else if (key == 'sort') {
-            updateKeys();
-            that.$element.options(key, value);
-        }
-    };
-
     /*@
     closePreview <f> close preview
         () -> <o> the list

source/Ox.UI/js/List/Ox.InfoList.js

@@ -26,6 +26,30 @@ Ox.InfoList = function(options, self) {
             unique: ''
         })
         .options(options || {})
+        .update({
+            items: function() {
+                that.$element.options('items', self.options.items);
+            },
+            selected: function() {
+                that.$element.options('selected', self.options.selected);
+            },
+            sort: function() {
+                updateKeys();
+                that.$element.options('sort', self.options.sort);
+            },
+            width: function() {
+                var width = getItemWidth();
+                $('.OxInfoElement').each(function() {
+                    var $parent = $(this).parent(),
+                        id = parseInt(/OxId(.*?)$/.exec(this.className)[1]);
+                    $parent.css({width: width - 144});
+                    $parent.parent().css({width: width - 144});
+                    $parent.parent().parent().css({width: width - 8});
+                    Ox.Log('List', '@@@', this.className, id)
+                    Ox.UI.elements[id].options({width: width - 152});
+                });
+            }
+        });
 
     //Ox.print('INFO LIST FIND', self.options.find);
 
@@ -154,30 +178,8 @@ Ox.InfoList = function(options, self) {
         });
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'items') {
-            that.$element.options(key, value);
-        } else if (key == 'selected') {
-            that.$element.options(key, value);
-        } else if (key == 'sort') {
-            updateKeys();
-            that.$element.options(key, value);
-        } else if (key == 'width') {
-            var width = getItemWidth();
-            $('.OxInfoElement').each(function() {
-                var $parent = $(this).parent(),
-                    id = parseInt(/OxId(.*?)$/.exec(this.className)[1]);
-                $parent.css({width: width - 144});
-                $parent.parent().css({width: width - 144});
-                $parent.parent().parent().css({width: width - 8});
-                Ox.Log('List', '@@@', this.className, id)
-                Ox.UI.elements[id].options({width: width - 152});
-            });
-        }
-    };
-
     /*@
-    closePreivew <f> closePreview
+    closePreview <f> closePreview
     @*/
     that.closePreview = function() {
         that.$element.closePreview();

source/Ox.UI/js/List/Ox.List.js

@@ -71,6 +71,38 @@ Ox.List = function(options, self) {
                 unique: ''
             })
             .options(options || {})
+            .update({
+                items: function() {
+                    if (Ox.isArray(self.options.items)) {
+                        self.options.items = Ox.api(self.options.items, {
+                            cache: true,
+                            sort: self.options.sort,
+                            sums: self.options.sums,
+                            unique: self.options.unique
+                        });                
+                        /*
+                        self.listLength = self.options.items.length;
+                        updateSelected();
+                        updateSort();
+                        */
+                    }
+                    updateQuery();
+                },
+                selected: function() {
+                    var previousSelected = self.selected;
+                    setSelected(self.options.selected);
+                    // fixme: the following was added in order 
+                    // to make text list find-as-you-type work,
+                    // this may break other things
+                    if (!self.isAsync && !Ox.isEqual(self.selected, previousSelected)) {
+                        triggerSelectEvent(self.options.selected);
+                    }
+                },
+                sort: function() {
+                    //Ox.Log('List', '---sort---')
+                    updateSort();
+                }
+            })
             .scroll(scroll);
 
     self.options.sort = self.options.sort.map(function(sort) {
@@ -1394,39 +1426,6 @@ Ox.List = function(options, self) {
         //}
     }
 
-    self.setOption = function(key, value) {
-        //Ox.Log('List', 'list setOption', key, value);
-        var previousSelected;
-        if (key == 'items') {
-            if (Ox.isArray(value)) {
-                self.options.items = Ox.api(self.options.items, {
-                    cache: true,
-                    sort: self.options.sort,
-                    sums: self.options.sums,
-                    unique: self.options.unique
-                });                
-                /*
-                self.listLength = value.length;
-                updateSelected();
-                updateSort();
-                */
-            }
-            updateQuery();
-        } else if (key == 'selected') {
-            previousSelected = self.selected;
-            setSelected(value);
-            // fixme: the following was added in order 
-            // to make text list find-as-you-type work,
-            // this may break other things
-            if (!self.isAsync && !Ox.isEqual(self.selected, previousSelected)) {
-                triggerSelectEvent(value);
-            }
-        } else if (key == 'sort') {
-            //Ox.Log('List', '---sort---')
-            updateSort();
-        }
-    };
-
     /*@
     addItems <f> add item to list
         (pos, items) -> <u> add items to list at position

source/Ox.UI/js/List/Ox.ListItem.js

@@ -25,7 +25,12 @@ Ox.ListItem = function(options, self) {
             position: 0,
             unique: ''
         })
-        .options(options || {});
+        .options(options || {})
+        .update({
+            data: function() {
+                constructItem(true);
+            }
+        });
 
     constructItem();
 
@@ -42,12 +47,6 @@ Ox.ListItem = function(options, self) {
         that.setElement($element);
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'data') {
-            constructItem(true);
-        }
-    };
-
     return that;
 
 };

source/Ox.UI/js/List/Ox.TextList.js

@@ -69,6 +69,21 @@ Ox.TextList = function(options, self) {
                 sums: []
             })
             .options(options || {})
+            .update({
+                items: function() {
+                    that.$body.options('items', self.options.items);
+                },
+                paste: function() {
+                    that.$body.options('paste', self.options.paste);
+                },
+                selected: function() {
+                    that.$body.options('selected', self.options.selected);
+                },
+                sort: function() {
+                    updateColumn();
+                    that.$body.options('sort', self.options.sort);
+                }
+            })
             .addClass('OxTextList')
             .bindEvent({
                 key_left: function() {
@@ -816,20 +831,6 @@ Ox.TextList = function(options, self) {
         }
     }
 
-    self.setOption = function(key, value) {
-        //Ox.Log('List', '---------------------------- TextList setOption', key, value)
-        if (key == 'items') {
-            that.$body.options(key, value);
-        } else if (key == 'paste') {
-            that.$body.options(key, value);
-        } else if (key == 'selected') {
-            that.$body.options(key, value);
-        } else if (key == 'sort') {
-            updateColumn();
-            that.$body.options(key, value);
-        }
-    };
-
     that.addItem = function(item) {
         /*
         self.options.items.push(item);

source/Ox.UI/js/List/Ox.TreeList.js

@@ -27,7 +27,20 @@ Ox.TreeList = function(options, self) {
                 selected: [],
                 width: 'auto'
             })
-            .options(options || {});
+            .options(options || {})
+            .update({
+                data: function() {
+                    // ...
+                },
+                selected: function() {
+                    //self.$list.options({selected: self.options.selected});
+                    selectItem({ids: self.options.selected});
+                    self.$list.scrollToSelection();
+                },
+                width: function() {
+                    // ...
+                }
+            });
 
     if (self.options.data) {
         self.options.items = [];
@@ -249,18 +262,6 @@ Ox.TreeList = function(options, self) {
         });
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'data') {
-            // ...
-        } else if (key == 'selected') {
-            //self.$list.options({selected: value});
-            selectItem({ids: value});
-            self.$list.scrollToSelection();
-        } else if (key == 'width') {
-            // ...
-        }
-    };
-
     /*@
     gainFocus <f> gainFocus
     @*/

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

@@ -39,6 +39,18 @@ Ox.ListMap = function(options, self) {
             width: 256
         })
         .options(options || {})
+        .update({
+            height: function() {
+                self.$list.size();
+                self.$map.resizeMap();
+            },
+            selected: function() {
+                self.$list.options({selected: self.options.selected});
+            },
+            width: function() {
+                self.$map.resizeMap();
+            }
+        })
         .css({
             width: self.options.width + 'px',
             height: self.options.height + 'px'
@@ -1119,20 +1131,6 @@ Ox.ListMap = function(options, self) {
         });
     }
 
-    /*@
-    setOption <f> setOption
-    @*/
-    self.setOption = function(key, value) {
-        if (key == 'height') {
-            self.$list.size();
-            self.$map.resizeMap();
-        } else if (key == 'selected') {
-            self.$list.options({selected: value});
-        } else if (key == 'width') {
-            self.$map.resizeMap();
-        }
-    }
-
     /*@
     focusList <f> focusList
     @*/

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

@@ -114,6 +114,48 @@ Ox.Map = function(options, self) {
             // fixme: width, height
         })
         .options(options || {})
+        .update({
+            find: function() {
+                self.$findInput
+                    .value(self.options.find)
+                    .triggerEvent('submit', {value: self.options.find});
+            },
+            height: function() {
+                that.$element.css({height: self.options.height + 'px'});
+                that.resizeMap();
+            },
+            places: function() {
+                addPlaces();
+                getMapBounds(function(mapBounds) {
+                    if (mapBounds) {
+                        self.map.fitBounds(mapBounds);
+                    } else {
+                        self.map.setZoom(self.minZoom);
+                        self.map.setCenter(new google.maps.LatLng(0, 0));
+                    }
+                    // fixme: the following is just a guess
+                    self.boundsChanged = true;
+                    mapChanged();
+                });
+                if (self.options.selected) {
+                    if (getSelectedPlace()) {
+                        selectPlace(self.options.selected);
+                    } else {
+                        self.options.selected = '';
+                    }
+                }
+            },
+            selected: function() {
+                selectPlace(self.options.selected || null);
+            },
+            type: function() {
+                // ...    
+            },
+            width: function() {
+                that.$element.css({width: self.options.width + 'px'});
+                that.resizeMap();
+            }
+        })
         .addClass('OxMap')
 		.bindEvent({
 		    gainfocus: function() {
@@ -1402,41 +1444,6 @@ Ox.Map = function(options, self) {
 		place && self.map.fitBounds(place.bounds);
 	}
 
-    self.setOption = function(key, value) {
-        if (key == 'find') {
-            self.$findInput
-                .value(self.options.find)
-                .triggerEvent('submit', {value: self.options.find});
-        } else if (key == 'height' || key == 'width') {
-            that.$element.css(key, value + 'px');
-            that.resizeMap();
-        } else if (key == 'places') {
-            addPlaces();
-            getMapBounds(function(mapBounds) {
-                if (mapBounds) {
-                    self.map.fitBounds(mapBounds);
-                } else {
-                    self.map.setZoom(self.minZoom);
-                    self.map.setCenter(new google.maps.LatLng(0, 0));
-                }
-                // fixme: the following is just a guess
-                self.boundsChanged = true;
-                mapChanged();
-            });
-            if (self.options.selected) {
-                if (getSelectedPlace()) {
-                    selectPlace(self.options.selected);
-                } else {
-                    self.options.selected = '';
-                }
-            }
-        } else if (key == 'selected') {
-            selectPlace(value || null);
-        } else if (key == 'type') {
-            
-        }
-    };
-
     /*@
     addPlace <f> addPlace
         (data) -> <u> add place to places  

source/Ox.UI/js/Map/Ox.MapImage.js

@@ -25,7 +25,7 @@ Ox.MapImage = function(options, self) {
                 type: 'satellite',
                 width: 640
             })
-            .options(options || {})
+            .options(options || {});
 
     self.src = document.location.protocol
         + '//maps.google.com/maps/api/staticmap?sensor=false' +
@@ -68,10 +68,6 @@ Ox.MapImage = function(options, self) {
         }).join('')
     }
 
-    self.setOption = function(key, value) {
-        
-    };
-
     return that;
 
 };

source/Ox.UI/js/Menu/Ox.MainMenu.js

@@ -120,10 +120,6 @@ Ox.MainMenu = function(options, self) {
         that.menus[position].remove();
     }
 
-    self.setOption = function(key, value) {
-
-    };
-
     that.addMenuAfter = function(id) {
         
     };

source/Ox.UI/js/Menu/Ox.Menu.js

@@ -45,6 +45,15 @@ Ox.Menu = function(options, self) {
             size: 'medium' // fixme: remove
         })
         .options(options || {})
+        .update({
+            items: function() {
+                renderItems(self.options.items);
+            },
+            selected: function() {
+                that.$content.find('.OxSelected').removeClass('OxSelected');
+                selectItem(self.options.selected);
+            }
+        })
         .addClass(
             'OxMenu Ox' + Ox.toTitleCase(self.options.side) +
             ' Ox' + Ox.toTitleCase(self.options.size)
@@ -567,15 +576,6 @@ Ox.Menu = function(options, self) {
         }
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'items') {
-            renderItems(value);
-        } else if (key == 'selected') {
-            that.$content.find('.OxSelected').removeClass('OxSelected');
-            selectItem(value);
-        }
-    }
-
     /*@
     addItem <f>
     @*/

source/Ox.UI/js/Menu/Ox.MenuButton.js

@@ -34,6 +34,19 @@ Ox.MenuButton = function(options, self) {
             width: 'auto'
         })
         .options(options || {})
+        .update({
+            title: function() {
+                if (self.options.type == 'text') {
+                    self.$title.html(self.options.title);
+                } else {
+                    self.$button.options({title: self.options.title});
+                }
+            },
+            width: function() { 
+                that.css({width: self.options.width - 2 + 'px'});
+                self.$title.css({width: self.options.width - 24 + 'px'});
+            }
+        })
         .addClass(
             'OxSelect Ox' + Ox.toTitleCase(self.options.style)
         )
@@ -98,19 +111,6 @@ Ox.MenuButton = function(options, self) {
         that.triggerEvent('show');
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'title') {
-            if (self.options.type == 'text') {
-                self.$title.html(value);
-            } else {
-                self.$button.options({title: value});
-            }
-        } else if (key == 'width') {
-            that.css({width: value - 2 + 'px'});
-            self.$title.css({width: self.options.width - 24 + 'px'});
-        }
-    }
-
     /*@
     checkItem <f> checkItem
         (id) -> <o> check item with id

source/Ox.UI/js/Menu/Ox.MenuItem.js

@@ -41,6 +41,18 @@ Ox.MenuItem = function(options, self) {
                 keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
                 title: Ox.makeArray(options.title || self.defaults.title)
             }))
+            .update({
+                checked: function() {
+                    that.$status.html(self.options.checked ? Ox.UI.symbols.check : '')
+                },
+                disabled: function() {
+                    that.toggleClass('OxDisabled');
+                },
+                title: function() {
+                    self.options.title = Ox.makeArray(self.options.title);
+                    that.$title.html(self.options.title[0]);
+                }
+            })
             .addClass('OxItem' + (self.options.disabled ? ' OxDisabled' : ''))
             /*
             .attr({
@@ -124,20 +136,6 @@ Ox.MenuItem = function(options, self) {
         };
     }
 
-    /*@
-    setOption <f> setOption
-    @*/
-    self.setOption = function(key, value) {
-        if (key == 'checked') {
-            that.$status.html(value ? Ox.UI.symbols.check : '')
-        } else if (key == 'disabled') {
-            that.toggleClass('OxDisabled');
-        } else if (key == 'title') {
-            self.options.title = Ox.makeArray(value);
-            that.$title.html(self.options.title[0]);
-        }
-    };
-
     that.toggle = function() {
         // toggle id and title
     };

source/Ox.UI/js/Panel/Ox.CollapsePanel.js

@@ -1,7 +1,7 @@
 'use strict';
 
 /*@
-Ox.CollapsePanel <f:Ox.Panel> CollapsePanel Object
+Ox.CollapsePanel <f:Ox.Element> CollapsePanel Object
     ([options[, self]]) -> <o> CollapsePanel Object
     options <o> Options object
         collapsed <b|false> collapsed state
@@ -14,7 +14,7 @@ Ox.CollapsePanel <f:Ox.Panel> CollapsePanel Object
 Ox.CollapsePanel = function(options, self) {
 
     self = self || {};
-    var that = Ox.Panel({}, self)
+    var that = Ox.Element({}, self)
             .defaults({
                 animate: true,
                 collapsed: false,
@@ -23,7 +23,18 @@ Ox.CollapsePanel = function(options, self) {
                 title: ''
             })
             .options(options)
-            .addClass('OxCollapsePanel');
+            .update({
+                collapsed: function() {
+                    // will be toggled again in toggleCollapsed
+                    self.options.collapsed = !self.options.collapsed;
+                    self.$button.toggle();
+                    toggleCollapsed();
+                },
+                title: function() {
+                    self.$title.html(self.options.title);
+                }
+            })
+            .addClass('OxPanel OxCollapsePanel');
 
     self.$titlebar = Ox.Bar({
             orientation: 'horizontal',
@@ -106,21 +117,6 @@ Ox.CollapsePanel = function(options, self) {
         });
     }
 
-    /*@
-    setOption <f> setOption
-        (key, value) -> <u> set key to value
-    @*/
-    self.setOption = function(key, value) {
-        if (key == 'collapsed') {
-            // will be toggled again in toggleCollapsed
-            self.options.collapsed = !self.options.collapsed;
-            self.$button.toggle();
-            toggleCollapsed();
-        } else if (key == 'title') {
-            self.$title.html(self.options.title);
-        }
-    };
-
     /*@
     update <f> Update panel when in collapsed state
     @*/

source/Ox.UI/js/Panel/Ox.Panel.js

@@ -1,15 +0,0 @@
-'use strict';
-
-/*@
-Ox.Panel <f:Ox.Element> Panel Object
-    ([options[, self]]) -> <f> Panel Object
-    options <o> Options object
-    self    <o> shared private variable
-@*/
-
-Ox.Panel = function(options, self) {
-    self = self || {};
-    var that = Ox.Element({}, self)
-            .addClass('OxPanel');
-    return that;
-};

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

@@ -39,7 +39,56 @@ Ox.AnnotationFolder = function(options, self) {
             widgetSize: 256,
             width: 0
         })
-        .options(options || {});
+        .options(options || {})
+        .update(function(key, value) {
+            if (key == 'highlight') {
+                self.$annotations.options({highlight: value});
+            }
+            if (['in', 'out'].indexOf(key) > -1 && self.editing) {
+                var item = Ox.getObjectById(self.options.items, self.options.selected);
+                item[key] = value;
+                item.duration = self.options.out - self.options['in'];
+                self.points = getPoints();
+            }
+            if (key == 'in') {
+                //fixme: array editable should support item updates while editing
+                self.options.range == 'selection' && updateAnnotations();
+            } else if (key == 'out') {
+                self.options.range == 'selection' && updateAnnotations();
+            } else if (key == 'position') {
+                if (self.options.range == 'position') {
+                    crossesPoint() && updateAnnotations();
+                    self.position = self.options.position;
+                }
+            } else if (key == 'range') {
+                updateAnnotations();
+            } else if (key == 'selected') {
+                if (value === '') {
+                    self.editing = false;
+                }
+                if (value && self.options.collapsed) {
+                    self.$panel.options({animate: false});
+                    self.$panel.options({collapsed: false});
+                    self.$panel.options({animate: true});
+                }
+                self.$annotations.options({selected: value});
+            } else if (key == 'sort') {
+                self.sort = getSort();
+                self.$annotations.options({sort: self.sort});
+                showWarnings();
+            } else if (key == 'users') {
+                updateAnnotations();
+            } else if (key == 'width') {
+                if (self.widget) {
+                    self.$outer.options({width: self.options.width});
+                    self.$inner.options({width: self.options.width});
+                    self.$widget.options({width: self.options.width});
+                }
+                self.$annotations.options({
+                    width: self.options.type == 'text' ? self.options.width + 8 : self.options.width
+                });
+            }
+        });
 
     if (self.options.selected) {
         self.options.collapsed = false;
@@ -511,56 +560,6 @@ Ox.AnnotationFolder = function(options, self) {
         }
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'highlight') {
-            self.$annotations.options({highlight: value});
-        }
-        if (['in', 'out'].indexOf(key) > -1 && self.editing) {
-            var item = Ox.getObjectById(self.options.items, self.options.selected);
-            item[key] = value;
-            item.duration = self.options.out - self.options['in'];
-            self.points = getPoints();
-        }
-        if (key == 'in') {
-            //fixme: array editable should support item updates while editing
-            self.options.range == 'selection' && updateAnnotations();
-        } else if (key == 'out') {
-            self.options.range == 'selection' && updateAnnotations();
-        } else if (key == 'position') {
-            if (self.options.range == 'position') {
-                crossesPoint() && updateAnnotations();
-                self.position = self.options.position;
-            }
-        } else if (key == 'range') {
-            updateAnnotations();
-        } else if (key == 'selected') {
-            if (value === '') {
-                self.editing = false;
-            }
-            if (value && self.options.collapsed) {
-                self.$panel.options({animate: false});
-                self.$panel.options({collapsed: false});
-                self.$panel.options({animate: true});
-            }
-            self.$annotations.options({selected: value});
-        } else if (key == 'sort') {
-            self.sort = getSort();
-            self.$annotations.options({sort: self.sort});
-            showWarnings();
-        } else if (key == 'users') {
-            updateAnnotations();
-        } else if (key == 'width') {
-            if (self.widget) {
-                self.$outer.options({width: self.options.width});
-                self.$inner.options({width: self.options.width});
-                self.$widget.options({width: self.options.width});
-            }
-            self.$annotations.options({
-                width: self.options.type == 'text' ? self.options.width + 8 : self.options.width
-            });
-        }
-    };
-
     /*@
     addItem <f> addItem
     @*/

source/Ox.UI/js/Video/Ox.AnnotationPanel.js

@@ -46,6 +46,30 @@ Ox.AnnotationPanel = function(options, self) {
             width: 256
         })
         .options(options || {})
+        .update(function(key, value) {
+            if (key == 'highlight') {
+                self.$folder.forEach(function($folder) {
+                    $folder.options({highlight: value});
+                });
+            } else if (['in', 'out', 'position'].indexOf(key) > -1) {
+                self.$folder.forEach(function($folder) {
+                    $folder.options(key, value);
+                });
+            } else if (key == 'selected') {
+                self.options.editable && updateEditMenu();
+                if (value) {
+                    getFolder(value).options({selected: value});
+                } else {
+                    self.$folder.forEach(function($folder) {
+                        $folder.options({selected: ''});
+                    });
+                }
+            } else if (key == 'width') {
+                self.$folder.forEach(function($folder) {
+                    $folder.options({width: self.options.width - Ox.UI.SCROLLBAR_SIZE});
+                });
+            }
+        })
         .addClass('OxAnnotationPanel');
 
     self.editing = false;
@@ -458,31 +482,6 @@ Ox.AnnotationPanel = function(options, self) {
         self.$editMenuButton[action]('delete');
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'highlight') {
-            self.$folder.forEach(function($folder) {
-                $folder.options({highlight: value});
-            });
-        } else if (['in', 'out', 'position'].indexOf(key) > -1) {
-            self.$folder.forEach(function($folder) {
-                $folder.options(key, value);
-            });
-        } else if (key == 'selected') {
-            self.options.editable && updateEditMenu();
-            if (value) {
-                getFolder(value).options({selected: value});
-            } else {
-                self.$folder.forEach(function($folder) {
-                    $folder.options({selected: ''});
-                });
-            }
-        } else if (key == 'width') {
-            self.$folder.forEach(function($folder) {
-                $folder.options({width: self.options.width - Ox.UI.SCROLLBAR_SIZE});
-            });
-        }
-    };
-
     /*@
     addItem <f> add item
         (layer, item) -> <o>  add item to layer

source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js

@@ -25,6 +25,19 @@ Ox.BlockVideoTimeline = function(options, self) {
             width: 0
         })
         .options(options || {})
+        .update({
+            'in': function() {
+                self.options.showPointMarkers && setPoint('in');
+            },
+            out: function() {
+                self.options.showPointMarkers && setPoint('out');
+            },
+            position: setPositionMarker,
+            results: setResults,
+            subtitles: setSubtitles,
+            state: setState,
+            width: setWidth
+        })
         .addClass('OxBlockVideoTimeline')
         .css({
             position: 'absolute'
@@ -299,22 +312,6 @@ Ox.BlockVideoTimeline = function(options, self) {
         });
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'in' || key == 'out') {
-            self.options.showPointMarkers && setPoint(key);
-        } else if (key == 'position') {
-            setPositionMarker();
-        } else if (key == 'results') {
-            setResults();
-        } else if (key == 'subtitles') {
-            setSubtitles();
-        } else if (key == 'state') {
-            setState();
-        } else if (key == 'width') {
-            setWidth();
-        }
-    };
-
     return that;
 
 };

source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js

@@ -27,6 +27,18 @@ Ox.LargeVideoTimeline = function(options, self) {
                 width: 0
             })
             .options(options || {})
+            .update({
+                find: setSubtitles,
+                'in': function() {
+                    setPointMarker('in');
+                },
+                out: function() {
+                    setPointMarker('out');
+                },
+                position: setPosition,
+                subtitles: setSubtitles,
+                width: setWidth
+            })
             .addClass('OxLargeVideoTimeline')
             .mouseleave(mouseleave)
             .mousemove(mousemove)
@@ -216,20 +228,6 @@ Ox.LargeVideoTimeline = function(options, self) {
         }
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'find') {
-            setSubtitles();
-        } else if (key == 'in' || key == 'out') {
-            setPointMarker(key);
-        } else if (key == 'position') {
-            setPosition();
-        } else if (key == 'subtitles') {
-            setSubtitles();
-        } else if (key == 'width') {
-            setWidth();
-        }
-    };
-
     return that;
 
 };

source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js

@@ -27,6 +27,39 @@ Ox.SmallVideoTimeline = function(options, self) {
             width: 256
         })
         .options(options || {})
+        .update({
+            duration: function() {
+                self.$image.options({duration: self.options.duration});
+            },
+            'in': function() {
+                self.$image.options({'in': self.options['in']});
+                self.options.mode == 'editor' && setPointMarker('in');
+            },
+            out: function() {
+                self.$image.options({out: self.options.out});
+                self.options.mode == 'editor' && setPointMarker('out');
+            },
+            paused: function() {
+                self.$positionMarker[
+                    self.options.paused ? 'addClass' : 'removeClass'
+                ]('OxPaused');
+            },
+            position: function() {
+                setPositionMarker();
+            },
+            results: function() {
+                self.$image.options({results: self.options.results});
+            },
+            state: function() {
+                self.$image.options({state: self.options.state});
+            },
+            subtitles: function() {
+                self.$image.options({subtitles: self.options.subtitles});
+            },
+            width: function() {
+                setWidth();
+            }
+        })
         .addClass('OxSmallVideoTimeline')
         .css(Ox.extend({
             width: self.options.width + 'px'
@@ -214,32 +247,6 @@ Ox.SmallVideoTimeline = function(options, self) {
         }
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'duration') {
-            self.$image.options({duration: value});
-        } else if (key == 'in') {
-            self.$image.options({'in': value});
-            self.options.mode == 'editor' && setPointMarker('in');
-        } else if (key == 'out') {
-            self.$image.options({out: value});
-            self.options.mode == 'editor' && setPointMarker('out');
-        } else if (key == 'paused') {
-            self.$positionMarker[
-                self.options.paused ? 'addClass' : 'removeClass'
-            ]('OxPaused');
-        } else if (key == 'position') {
-            setPositionMarker();
-        } else if (key == 'results') {
-            self.$image.options({results: value});
-        } else if (key == 'state') {
-            self.$image.options({state: value});
-        } else if (key == 'subtitles') {
-            self.$image.options({subtitles: value});
-        } else if (key == 'width') {
-            setWidth();
-        }
-    };
-
     return that;
 
 };

source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js

@@ -23,6 +23,50 @@ Ox.SmallVideoTimelineImage = function(options, self) {
             width: 256
         })
         .options(options || {})
+        .update({
+            'in': function() {
+                self.$selection.attr({
+                    src: getImageURL('selection')
+                });
+            },
+            out: function() {
+                self.$selection.attr({
+                    src: getImageURL('selection')
+                });
+            },
+            results: function() {
+                self.$results.attr({
+                    src: getImageURL('results')
+                });
+            },
+            selection: function() {
+                self.$selection.attr({
+                    src: getImageURL('selection')
+                });
+            },
+            subtitles: function() {
+                self.$subtitles.attr({
+                    src: getImageURL('subtitles')
+                });
+            },
+            state: function() {
+                self.$selection.attr({
+                    src: getImageURL('selection')
+                });
+            },
+            width: function() {
+                var width = self.options.width;
+                that.css({width: width + 'px'});
+                self.$results
+                    .attr({src: getImageURL('results')})
+                    .css({width: width + 'px'});
+                self.$selection
+                    .attr({src: getImageURL('selection')})
+                    .css({width: width + 'px'});
+                self.$subtitles.css({width: width + 'px'});
+                self.$timeline.css({width: width + 'px'});
+            }
+        })
         .css({
             position: 'absolute',
             width: self.options.width + 'px'
@@ -199,40 +243,6 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'in' || key == 'out') {
-            self.$selection.attr({
-                src: getImageURL('selection')
-            });
-        } else if (key == 'results') {
-            self.$results.attr({
-                src: getImageURL('results')
-            });
-        } else if (key == 'selection') {
-            self.$selection.attr({
-                src: getImageURL('selection')
-            });
-        } else if (key == 'subtitles') {
-            self.$subtitles.attr({
-                src: getImageURL('subtitles')
-            });
-        } else if (key == 'state') {
-            self.$selection.attr({
-                src: getImageURL('selection')
-            });
-        } else if (key == 'width') {
-            that.css({width: value + 'px'});
-            self.$results
-                .attr({src: getImageURL('results')})
-                .css({width: value + 'px'});
-            self.$selection
-                .attr({src: getImageURL('selection')})
-                .css({width: value + 'px'});
-            self.$subtitles.css({width: value + 'px'});
-            self.$timeline.css({width: value + 'px'});
-        }
-    };
-
     return that;
 
 };

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -65,6 +65,34 @@ Ox.VideoEditor = function(options, self) {
                 width: 0
             })
             .options(options || {})
+            .update({
+                height: setSizes,
+                'in': function() {
+                    setPoint('in', self.options['in']);
+                },
+                out: function() {
+                    setPoint('out', self.options.out);
+                },
+                paused: function() {
+                    self.$player[0].options({
+                        paused: self.options.paused
+                    });
+                },
+                position: function() {
+                    setPosition(self.options.position);
+                },
+                selected: function() {
+                    selectAnnotation(
+                        self.options.selected
+                            ? Ox.getObjectById(self.annotations, self.options.selected)
+                            : {id: ''}
+                    );
+                },
+                showAnnotations: function() {
+                    that.$element.toggle(1);
+                },
+                width: setSizes
+            })
             .bindEvent({
                 key_0: toggleMuted,
                 key_alt_left: function() {
@@ -1389,26 +1417,6 @@ Ox.VideoEditor = function(options, self) {
         });
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'height' || key == 'width') {
-            setSizes();
-        } else if (key == 'in' || key == 'out') {
-            setPoint(key, value);
-        } else if (key == 'paused') {
-            self.$player[0].options({
-                paused: value
-            });
-        } else if (key == 'position') {
-            setPosition(value);
-        } else if (key == 'selected') {
-            selectAnnotation(
-                value ? Ox.getObjectById(self.annotations, value) : {id: ''}
-            );
-        } else if (key == 'showAnnotations') {
-            that.$element.toggle(1);
-        }
-    };
-
     /*@
     addAnnotation <f> add annotation
         (layer, item) -> <o> add annotation to layer

source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js

@@ -27,6 +27,13 @@ Ox.VideoEditorPlayer = function(options, self) {
                 width: 0
             })
             .options(options || {})
+            .update({
+                height: setHeight,
+                points: setMarkers,
+                position: setPosition,
+                posterFrame: setMarkers,
+                width: setWidth
+            })
             .addClass('OxVideoPlayer')
             .css({
                 height: (self.options.height + 16) + 'px',
@@ -359,20 +366,6 @@ Ox.VideoEditorPlayer = function(options, self) {
         });
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'height') {
-            setHeight();
-        } else if (key == 'points') {
-            setMarkers();
-        } else if (key == 'position') {
-            setPosition();
-        } else if (key == 'posterFrame') {
-            setMarkers();
-        } else if (key == 'width') {
-            setWidth();
-        }
-    }
-
     /*@
     mute <f> mute
     @*/

source/Ox.UI/js/Video/Ox.VideoPanel.js

@@ -59,6 +59,41 @@ Ox.VideoPanel = function(options, self) {
                 width: 0
             })
             .options(options || {})
+            .update({
+                fullscreen: function() {
+                    self.$video.options({fullscreen: self.options.value});
+                },
+                height: function() {
+                    self.$video.options({height: getPlayerHeight()});
+                },
+                'in': function() {
+                    setPoint('in', self.options['in']);
+                },
+                out: function() {
+                    setPoint('out', self.options.out);
+                },
+                paused: function() {
+                    self.$video.options({paused: self.options.paused});
+                },
+                position: function() {
+                    self.$video.options({position: self.options.position});
+                    self.$timeline.options({position: self.options.position});
+                    self.$annotationPanel.options({position: self.options.position});
+                },
+                selected: function() {
+                    self.$annotationPanel.options({selected: self.options.selected});
+                },
+                showAnnotations: function() {
+                    that.$element.toggle(1);
+                },
+                showTimeline: function() {
+                    self.$videoPanel.toggle(1);
+                },
+                width: function() {
+                    self.$video.options({width: getPlayerWidth()});
+                    self.$timeline.options({width: getTimelineWidth()});
+                }
+            })
             .css({
                 height: self.options.height + 'px',
                 width: self.options.width + 'px'
@@ -448,31 +483,6 @@ Ox.VideoPanel = function(options, self) {
         });
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'fullscreen') {
-            self.$video.options({fullscreen: value});
-        } else if (key == 'height') {
-            self.$video.options({height: getPlayerHeight()});
-        } else if (key == 'in' || key == 'out') {
-            setPoint(key, value);
-        } else if (key == 'paused') {
-            self.$video.options({paused: value});
-        } else if (key == 'position') {
-            self.$video.options({position: value});
-            self.$timeline.options({position: value});
-            self.$annotationPanel.options({position: value});
-        } else if (key == 'selected') {
-            self.$annotationPanel.options({selected: value});
-        } else if (key == 'showAnnotations') {
-            that.$element.toggle(1);
-        } else if (key == 'showTimeline') {
-            self.$videoPanel.toggle(1);
-        } else if (key == 'width') {
-            self.$video.options({width: getPlayerWidth()});
-            self.$timeline.options({width: getTimelineWidth()});
-        }
-    }
-
     // fixme: can these be removed?
 
     /*@

source/Ox.UI/js/Video/Ox.VideoPlayer.js

@@ -142,6 +142,52 @@ Ox.VideoPlayer = function(options, self) {
             width: 256
         })
         .options(options || {})
+        .update({
+            enableSubtitles: function() {
+                self.options.enableSubtitles = !self.options.enableSubtitles;
+                toggleSubtitles();
+            },
+            find: setSubtitleText,
+            fullscreen: function() {
+                self.options.fullscreen = !self.options.fullscreen;
+                toggleFullscreen();
+            },
+            height: setSizes,
+            'in': function() {
+                self.options.paused && setMarkers();
+                self.$timeline && self.$timeline.options('in', self.options['in']);
+            },
+            out: function() {
+                self.options.paused && setMarkers();
+                self.$timeline && self.$timeline.options('out', self.options.out);
+            },
+            muted: function() {
+                self.options.muted = !self.options.muted;
+                toggleMuted();
+            },
+            paused: function() {
+                self.options.paused = !self.options.paused;
+                togglePaused();
+            },
+            position: function() {
+                setPosition(self.options.position);
+            },
+            posterFrame: function() {
+                self.options.paused && setMarkers();
+            },
+            resolution: setResolution,
+            scaleToFill: function() {
+                self.options.scaleToFill = !self.options.scaleToFill;
+                toggleScale();
+            },
+            sizeIsLarge: function() {
+                self.$sizeButton.toggle();
+            },
+            volume: function() {
+                setVolume(self.options.volume);
+            },
+            width: setSizes
+        })
         .addClass('OxVideoPlayer');
 
     Ox.Log('VIDEO', 'VIDEO PLAYER OPTIONS', self.options)
@@ -2356,42 +2402,6 @@ Ox.VideoPlayer = function(options, self) {
         self.$volume.toggle();
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'enableSubtitles') {
-            self.options.enableSubtitles = !self.options.enableSubtitles;
-            toggleSubtitles();
-        } if (key == 'find') {
-            setSubtitleText();
-        } else if (key == 'fullscreen') {
-            self.options.fullscreen = !self.options.fullscreen;
-            toggleFullscreen();
-        } else if (key == 'height' || key == 'width') {
-            setSizes();
-        } else if (key == 'in' || key == 'out') {
-            self.options.paused && setMarkers();
-            self.$timeline && self.$timeline.options(key, value);
-        } else if (key == 'muted') {
-            self.options.muted = !self.options.muted;
-            toggleMuted();
-        } else if (key == 'paused') {
-            self.options.paused = !self.options.paused;
-            togglePaused();
-        } else if (key == 'position') {
-            setPosition(value);
-        } else if (key == 'posterFrame') {
-            self.options.paused && setMarkers();
-        } else if (key == 'resolution') {
-            setResolution();
-        } else if (key == 'scaleToFill') {
-            self.options.scaleToFill = !self.options.scaleToFill;
-            toggleScale();
-        } else if (key == 'sizeIsLarge') {
-            self.$sizeButton.toggle();
-        } else if (key == 'volume') {
-            setVolume(value);
-        }
-    };
-
     /*@
     changeVolume <f> change volume
         (num) -> <o>  change volume

source/Ox.UI/js/Video/Ox.VideoPreview.js

@@ -22,6 +22,22 @@ Ox.VideoPreview = function(options, self) {
             width: 256
         })
         .options(options || {})
+        .update({
+            height: function() {
+                that.css({height: self.options.height + 'px'});
+                self.$frame.css(getFrameCSS());
+            },
+            position: function() {
+                self.$frame.attr({src: self.options.getFrame(self.options.position)});
+            },
+            width: function() {
+                that.css({width: self.options.width + 'px'});
+                stopLoading();
+                self.$frame.attr({src: self.options.getFrame()})
+                    .css(getFrameCSS());
+                self.$timeline.css({width: self.options.width + 'px'});
+            }
+        })
         .addClass('OxVideoPreview')
         .css({
             width: self.options.width + 'px',
@@ -149,21 +165,6 @@ Ox.VideoPreview = function(options, self) {
         self.timeout && clearTimeout(self.timeout);
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'height') {
-            that.css({height: value + 'px'});
-            self.$frame.css(getFrameCSS());
-        } else if (key == 'position') {
-            self.$frame.attr({src: self.options.getFrame(value)});
-        } else if (key == 'width') {
-            that.css({width: value + 'px'});
-            stopLoading();
-            self.$frame.attr({src: self.options.getFrame()})
-                .css(getFrameCSS());
-            self.$timeline.css({width: value + 'px'});
-        }
-    }
-
     return that;
 
 };

source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js

@@ -47,6 +47,25 @@ Ox.VideoTimelinePanel = function(options, self) {
                 width: 0
             })
             .options(options || {})
+            .update({
+                height: function() {
+                    self.$player.options({height: self.options.height});
+                },
+                paused: function() {
+                    self.$player.options({
+                        paused: self.options.paused
+                    });
+                },
+                position: function() {
+                    setPosition(self.options.position);
+                },
+                showAnnotations: function() {
+                    that.$element.toggle(1);
+                },
+                width: function() {
+                    self.$player.options({width: getPlayerWidth()});
+                }
+            })
             .css({
                 height: self.options.height + 'px',
                 width: self.options.width + 'px'
@@ -268,22 +287,6 @@ Ox.VideoTimelinePanel = function(options, self) {
         });
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'height') {
-            self.$player.options({height: value});
-        } else if (key == 'paused') {
-            self.$player.options({
-                paused: value
-            });
-        } else if (key == 'position') {
-            setPosition(value);
-        } else if (key == 'showAnnotations') {
-            that.$element.toggle(1);
-        } else if (key == 'width') {
-            self.$player.options({width: getPlayerWidth()});
-        }
-    };
-
     /*@
     toggleAnnotations <f> toggle annotations
         () -> <o>  toggle annotations

source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js

@@ -37,7 +37,16 @@ Ox.VideoTimelinePlayer = function(options, self) {
             volume: 1,
             width: 0
         })
-        .options(options || {});
+        .options(options || {})
+        .update({
+            height: setHeight,
+            paused: function() {
+                self.options.paused = !self.options.paused;
+                togglePaused();
+            },
+            position: setPosition,
+            width: setWidth
+        });
 
     self.fps = 25;
     self.frame = self.options.position * self.fps;
@@ -796,19 +805,6 @@ Ox.VideoTimelinePlayer = function(options, self) {
         }
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'height') {
-            setHeight();
-        } else if (key == 'paused') {
-            self.options.paused = !self.options.paused;
-            togglePaused();
-        } else if (key == 'position') {
-            setPosition();
-        } else if (key == 'width') {
-            setWidth();
-        }
-    };
-
     /*@
     togglePaused <f> toggle paused 
         () -> <o>  toggle paused

source/Ox.UI/js/Window/Ox.Dialog.js

@@ -37,6 +37,27 @@ Ox.Dialog = function(options, self) {
                 width: 400
             })
             .options(options || {})
+            .update({
+                buttons: setButtons,
+                content: setContent,
+                height: function() {
+                    setMinAndMax();
+                    setCSS({height: self.options.height});
+                },
+                title: function() {
+                    self.$title.animate({
+                        opacity: 0
+                    }, 50, function() {
+                        self.$title.html(self.options.title).animate({
+                            opacity: 1
+                        }, 50);
+                    });
+                },
+                width: function() {
+                    setMinAndMax();
+                    setCSS({width: self.options.width});
+                }
+            })
             .addClass('OxDialog')
             .bindEvent({
                 key_enter: function() {
@@ -606,28 +627,6 @@ Ox.Dialog = function(options, self) {
         Ox.Log('Window', 'sMM', self, window.innerHeight, maxRatio)
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'buttons') {
-            setButtons();
-        } else if (key == 'content') {
-            setContent();
-        } else if (key == 'height') {
-            setMinAndMax();
-            setCSS({height: value});
-        } else if (key == 'title') {
-            self.$title.animate({
-                opacity: 0
-            }, 50, function() {
-                self.$title.html(value).animate({
-                    opacity: 1
-                }, 50);
-            });
-        } else if (key == 'width') {
-            setMinAndMax();
-            setCSS({width: value});
-        }
-    };
-
     /*@
     close <f> close
         (callback) -> <o>  close

source/Ox.UI/js/Window/Ox.Tooltip.js

@@ -31,12 +31,6 @@ Ox.Tooltip = function(options, self) {
         opacity: 0
     });
 
-    self.setOption = function(key, value) {
-        if (key == 'title') {
-
-        }
-    };
-
     /*@
     hide <f> hide tooltip
         () -> <o>  hide tooltip