From 7380595c7ef629c4c618c61794744a37c6a6dd89 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Fri, 29 Apr 2011 14:40:51 +0200
Subject: [PATCH] various improvements in OxJS and OxUI

---
 source/Ox.UI/js/Calendar/Ox.Calendar.js       |  2 +-
 source/Ox.UI/js/Core/Ox.Container.js          |  4 +-
 source/Ox.UI/js/Core/Ox.Element.js            | 90 +++++++-----------
 source/Ox.UI/js/Core/Ox.LoadingIcon.js        |  2 +-
 source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js  |  4 +-
 source/Ox.UI/js/Form/Ox.Button.js             |  4 +-
 source/Ox.UI/js/Form/Ox.Checkbox.js           |  4 +-
 source/Ox.UI/js/Form/Ox.CheckboxGroup.js      |  2 +-
 source/Ox.UI/js/Form/Ox.ColorPicker.js        |  2 +-
 source/Ox.UI/js/Form/Ox.Filter.js             |  2 +-
 source/Ox.UI/js/Form/Ox.Form.js               |  2 +-
 source/Ox.UI/js/Form/Ox.FormElementGroup.js   |  4 +-
 source/Ox.UI/js/Form/Ox.FormItem.js           |  2 +-
 source/Ox.UI/js/Form/Ox.Input.js              | 12 +--
 source/Ox.UI/js/Form/Ox.InputGroup.js         |  2 +-
 source/Ox.UI/js/Form/Ox.Label.js              |  4 +-
 source/Ox.UI/js/Form/Ox.Picker.js             |  4 +-
 source/Ox.UI/js/Form/Ox.PlacePicker.js        |  4 +-
 source/Ox.UI/js/Form/Ox.Range.js              |  2 +-
 source/Ox.UI/js/Form/Ox.Select.js             |  4 +-
 source/Ox.UI/js/Form/Ox.TimeInput.js          |  2 +-
 source/Ox.UI/js/List/Ox.IconList.js           |  2 +-
 source/Ox.UI/js/List/Ox.List.js               |  2 +-
 source/Ox.UI/js/List/Ox.ListItem.js           |  2 +-
 source/Ox.UI/js/List/Ox.TextList.js           |  2 +-
 source/Ox.UI/js/List/Ox.TreeList.js           |  4 +-
 source/Ox.UI/js/Map/Ox.ListMap.js             |  4 +-
 source/Ox.UI/js/Map/Ox.Map.js                 |  6 +-
 source/Ox.UI/js/Map/Ox.MapImage.js            |  4 +-
 source/Ox.UI/js/Menu/Ox.MainMenu.js           |  2 +-
 source/Ox.UI/js/Menu/Ox.Menu.js               |  2 +-
 source/Ox.UI/js/Menu/Ox.MenuItem.js           |  4 +-
 source/Ox.UI/js/Panel/Ox.CollapsePanel.js     |  2 +-
 source/Ox.UI/js/Panel/Ox.SplitPanel.js        |  2 +-
 source/Ox.UI/js/Video/Ox.AnnotationPanel.js   |  8 +-
 source/Ox.UI/js/Video/Ox.BlockTimeline.js     |  6 +-
 source/Ox.UI/js/Video/Ox.FilesView.js         |  2 +-
 source/Ox.UI/js/Video/Ox.Flipbook.js          |  4 +-
 source/Ox.UI/js/Video/Ox.LargeTimeline.js     |  4 +-
 source/Ox.UI/js/Video/Ox.SmallTimeline.js     |  4 +-
 source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js |  4 +-
 source/Ox.UI/js/Video/Ox.VideoElement.js      |  4 +-
 source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js  |  4 +-
 source/Ox.UI/js/Video/Ox.VideoPlayer.js       |  4 +-
 source/Ox.UI/js/Window/Ox.Dialog.js           |  4 +-
 source/Ox.UI/js/Window/Ox.Tooltip.js          |  4 +-
 source/Ox.UI/js/Window/Ox.Window.js           |  4 +-
 source/Ox.js                                  | 93 ++++++++++++++-----
 48 files changed, 184 insertions(+), 161 deletions(-)

diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js
index b219a622..48dfbc82 100644
--- a/source/Ox.UI/js/Calendar/Ox.Calendar.js
+++ b/source/Ox.UI/js/Calendar/Ox.Calendar.js
@@ -697,7 +697,7 @@ Ox.Calendar = function(options, self) {
         }
     }
 
-    self.onChange = function(key, val) {
+    self.setOption = function(key, val) {
         if (key == 'date') {
             
         } else if (key == 'zoom') {
diff --git a/source/Ox.UI/js/Core/Ox.Container.js b/source/Ox.UI/js/Core/Ox.Container.js
index 1c52f7f4..1deeb62d 100644
--- a/source/Ox.UI/js/Core/Ox.Container.js
+++ b/source/Ox.UI/js/Core/Ox.Container.js
@@ -6,10 +6,10 @@
 
 Ox.Container = function(options, self) {
     // fixme: to be deprecated
-    var that = new Ox.Element('div', self)
+    var that = new Ox.Element({}, self)
         .options(options || {})
         .addClass('OxContainer');
-    that.$content = new Ox.Element('div', self)
+    that.$content = new Ox.Element({}, self)
         .options(options || {})
         .addClass('OxContent')
         .appendTo(that);
diff --git a/source/Ox.UI/js/Core/Ox.Element.js b/source/Ox.UI/js/Core/Ox.Element.js
index e018f279..e6363f0b 100644
--- a/source/Ox.UI/js/Core/Ox.Element.js
+++ b/source/Ox.UI/js/Core/Ox.Element.js
@@ -16,24 +16,33 @@ Ox.Element = function() {
 
     return function(options, self) {
 
+        /*
+        // allow for 'Ox.Element()' instead of 'new Ox.Element()'
         if (!(this instanceof arguments.callee)) {
             return new arguments.callee(options, self);
         }
+        */
 
+        // create private object
         self = self || {};
+        // create defaults and options objects
+        self.defaults = {};
         self.options = options || {};
-        // allow for Ox.Element('tagname', self)
-        if (typeof self.options == 'string') {
+        // allow for Ox.TestElement('<tagname>')
+        // or Ox.TestElement('cssSelector')
+        if (Ox.isString(self.options)) {
             self.options = {
                 element: self.options
-            };
-        }
+            }
+        };
+        // create event handler
         if (!self.$eventHandler) {
             self.$eventHandler = $('<div>');
         }
 
+        // create public object
         var that = new Ox.JQueryElement(
-                $('<' + (self.options.element || 'div') + '>')
+                $(self.options.element || '<div>')
             )
             .mousedown(mousedown);
 
@@ -149,16 +158,13 @@ Ox.Element = function() {
         }
         */
 
-        self.onChange = function() {
-            // self.onChange(key, value)
+        self.setOption = function() {
+            // self.setOptions(key, value)
             // is called when an option changes
             // (to be implemented by widget)
-            // fixme: rename to self.setOption
         };
 
-        that._leakSelf = function() { // fixme: remove
-            return self;
-        }
+        that._self = self; // fixme: remove
 
         that.bindEvent = function() {
             /***
@@ -190,13 +196,9 @@ Ox.Element = function() {
         };
 
         that.defaults = function(defaults) {
-            /***
-            sets the default options
-            Usage
-                that.defaults({key0: value0, key1: value1, ...})
-            ***/
+            // sets the default options
             self.defaults = defaults;
-            delete self.options; // fixme: hackish fix for that = Ox.Foo({...}, self).defaults({...}).options({...})
+            self.options = defaults;
             return that;
         };
 
@@ -223,45 +225,21 @@ Ox.Element = function() {
             return that;
         };
 
-        that.options = function() { // fixme: use Ox.getset
-            /***
-            get or set options
-            Usage
-                that.options()                  returns self.options
-                that.options('foo')             returns self.options.foo
-                that.options('foo', x)          sets self.options.foo,
-                                                returns that
-                that.options({foo: x, bar: y})  sets self.options.foo
-                                                and self.options.bar,
-                                                returns that
-            ***/
-            var args,
-                length = arguments.length,
-                oldOptions,
-                ret;
-            if (length == 0) {
-                // options()
-                ret = self.options;
-            } else if (length == 1 && typeof arguments[0] == 'string') {
-                // options(str)
-                ret = self.options ? self.options[arguments[0]] : options[arguments[0]];
-            } else {
-                // options (str, val) or options({str: val, ...})
-                // translate (str, val) to ({str: val})
-                args = Ox.makeObject.apply(that, arguments || {});
-                oldOptions = $.extend({}, self.options);
-                // if options have not been set, extend defaults,
-                // otherwise, extend options
-                //self.options = $.extend(self.options, self.options ? {} : self.defaults, args);
-                self.options = $.extend({}, self.defaults, self.options, args);
-                //self.options = $.extend(self.options || self.defaults, args);
-                Ox.forEach(args, function(val, key) {
-                    // key == 'id' && id && Ox.Event.changeId(id, value);
-                    /*!Ox.equals(value, oldOptions[key]) &&*/ self.onChange(key, val);
-                });
-                ret = that;
-            }
-            return ret;
+        that.options = function() {
+            /*
+            that.options()
+                returns self.options
+            that.options(key)
+                returns self.options.key
+            that.options(key, val)
+                sets self.options.key to val, calls self.setOption(key, val)
+                if the key has been added or its val has changed, returns that
+            that.options({keyA: valA, keyB: valB})
+                sets self.options.keyA to valA and self.options.keyB to valB,
+                calls self.setOptions(key, val) for every key/value pair
+                that has been added or modified, returns that
+            */
+            return Ox.getset(self.options, arguments, self.setOption, that);
         };
 
         that.removeElement = function() {
diff --git a/source/Ox.UI/js/Core/Ox.LoadingIcon.js b/source/Ox.UI/js/Core/Ox.LoadingIcon.js
index 1641ba0b..dedcfa0e 100644
--- a/source/Ox.UI/js/Core/Ox.LoadingIcon.js
+++ b/source/Ox.UI/js/Core/Ox.LoadingIcon.js
@@ -1,7 +1,7 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
 Ox.LoadingIcon = function(options, self) {
     var self = self || {},
-        that = new Ox.Element('img', self)
+        that = new Ox.Element('<img>', self)
             .defaults({
                 size: 'medium'
             })
diff --git a/source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js b/source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js
index 707b283c..67e2a669 100644
--- a/source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js
+++ b/source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js
@@ -7,7 +7,7 @@
 Ox.SyntaxHighlighter = function(options, self) {
 
     self = self || {};
-    var that = new Ox.Element('div', self)
+    var that = new Ox.Element({}, self)
             .defaults({
                 height: 40,
                 lineLength: 80,         //@ number of characters per line
@@ -128,7 +128,7 @@ Ox.SyntaxHighlighter = function(options, self) {
         return str;
     }
 
-    self.onChange = function() {
+    self.setOption = function() {
     
     };
 
diff --git a/source/Ox.UI/js/Form/Ox.Button.js b/source/Ox.UI/js/Form/Ox.Button.js
index b54923a3..40d69216 100644
--- a/source/Ox.UI/js/Form/Ox.Button.js
+++ b/source/Ox.UI/js/Form/Ox.Button.js
@@ -14,7 +14,7 @@ Ox.Button = function(options, self) {
     */
 
     var self = self || {},
-        that = new Ox.Element('input', self)
+        that = new Ox.Element('<input>', self)
             .defaults({
                 disabled: false,
                 group: false,
@@ -117,7 +117,7 @@ Ox.Button = function(options, self) {
         }
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'disabled') {
             that.attr({
                     disabled: value ? 'disabled' : ''
diff --git a/source/Ox.UI/js/Form/Ox.Checkbox.js b/source/Ox.UI/js/Form/Ox.Checkbox.js
index 88b9becd..32a1120a 100644
--- a/source/Ox.UI/js/Form/Ox.Checkbox.js
+++ b/source/Ox.UI/js/Form/Ox.Checkbox.js
@@ -19,7 +19,7 @@ Ox.Checkbox = function(options, self) {
     */
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 disabled: false,
                 id: '',
@@ -85,7 +85,7 @@ Ox.Checkbox = function(options, self) {
         !self.options.disabled && self.$button.trigger('click');
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'checked') {
             that.toggleChecked();
         }
diff --git a/source/Ox.UI/js/Form/Ox.CheckboxGroup.js b/source/Ox.UI/js/Form/Ox.CheckboxGroup.js
index 95ba14e1..7d254c8e 100644
--- a/source/Ox.UI/js/Form/Ox.CheckboxGroup.js
+++ b/source/Ox.UI/js/Form/Ox.CheckboxGroup.js
@@ -13,7 +13,7 @@ Ox.CheckboxGroup = function(options, self) {
     */
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 checkboxes: [],
                 max: 1,
diff --git a/source/Ox.UI/js/Form/Ox.ColorPicker.js b/source/Ox.UI/js/Form/Ox.ColorPicker.js
index 1f1db6eb..212bdeba 100644
--- a/source/Ox.UI/js/Form/Ox.ColorPicker.js
+++ b/source/Ox.UI/js/Form/Ox.ColorPicker.js
@@ -2,7 +2,7 @@
 Ox.ColorPicker = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 id: '',
                 value: '0, 0, 0'
diff --git a/source/Ox.UI/js/Form/Ox.Filter.js b/source/Ox.UI/js/Form/Ox.Filter.js
index 33f80cdb..b84a40ac 100644
--- a/source/Ox.UI/js/Form/Ox.Filter.js
+++ b/source/Ox.UI/js/Form/Ox.Filter.js
@@ -8,7 +8,7 @@ Ox.Filter = function(options, self) {
     ***/
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 findKeys: [],
                 query: {
diff --git a/source/Ox.UI/js/Form/Ox.Form.js b/source/Ox.UI/js/Form/Ox.Form.js
index 107064c4..21fec15d 100644
--- a/source/Ox.UI/js/Form/Ox.Form.js
+++ b/source/Ox.UI/js/Form/Ox.Form.js
@@ -5,7 +5,7 @@ Ox.Form = function(options, self) {
     */
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 error: '',
                 id: '',
diff --git a/source/Ox.UI/js/Form/Ox.FormElementGroup.js b/source/Ox.UI/js/Form/Ox.FormElementGroup.js
index 35e06584..82bc0e44 100644
--- a/source/Ox.UI/js/Form/Ox.FormElementGroup.js
+++ b/source/Ox.UI/js/Form/Ox.FormElementGroup.js
@@ -2,7 +2,7 @@
 Ox.FormElementGroup = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 id: '',
                 elements: [],
@@ -49,7 +49,7 @@ Ox.FormElementGroup = function(options, self) {
         
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
 
     };
 
diff --git a/source/Ox.UI/js/Form/Ox.FormItem.js b/source/Ox.UI/js/Form/Ox.FormItem.js
index 3801bef7..3c7a9476 100644
--- a/source/Ox.UI/js/Form/Ox.FormItem.js
+++ b/source/Ox.UI/js/Form/Ox.FormItem.js
@@ -2,7 +2,7 @@
 Ox.FormItem = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 element: null,
                 error: '',
diff --git a/source/Ox.UI/js/Form/Ox.Input.js b/source/Ox.UI/js/Form/Ox.Input.js
index dbb5821b..f9b2c14e 100644
--- a/source/Ox.UI/js/Form/Ox.Input.js
+++ b/source/Ox.UI/js/Form/Ox.Input.js
@@ -56,7 +56,7 @@ Ox.Input = function(options, self) {
     */
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 arrows: false,
                 arrowStep: 1,
@@ -701,7 +701,7 @@ Ox.Input = function(options, self) {
         });
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         var inputWidth, val;
         if (['autocomplete', 'autocompleteReplace', 'autocompleteSelect', 'autovalidate'].indexOf(key) > -1) {
             if (self.options.autocomplete && self.options.autocompleteSelect) {
@@ -806,7 +806,7 @@ Ox.Input_ = function(options, self) {
     */
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 autocomplete: null,
                 autocorrect: null,
@@ -1217,7 +1217,7 @@ Ox.Input_ = function(options, self) {
         );
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'height') {
             height(value);
         } else if (key == 'width') {
@@ -1537,7 +1537,7 @@ Ox.InputElement_ = function(options, self) {
         
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'placeholder') {
             that.$element.hasClass('OxPlaceholder') && that.$element.val(value);
         } else if (key == 'value') {
@@ -1753,7 +1753,7 @@ Ox.Range_ = function(options, self) {
         shared functions
     */
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         
     }
 
diff --git a/source/Ox.UI/js/Form/Ox.InputGroup.js b/source/Ox.UI/js/Form/Ox.InputGroup.js
index ebda133c..37747437 100644
--- a/source/Ox.UI/js/Form/Ox.InputGroup.js
+++ b/source/Ox.UI/js/Form/Ox.InputGroup.js
@@ -9,7 +9,7 @@ Ox.InputGroup = function(options, self) {
     ***/
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 id: '',
                 inputs: [],
diff --git a/source/Ox.UI/js/Form/Ox.Label.js b/source/Ox.UI/js/Form/Ox.Label.js
index dbb464e7..76302f72 100644
--- a/source/Ox.UI/js/Form/Ox.Label.js
+++ b/source/Ox.UI/js/Form/Ox.Label.js
@@ -2,7 +2,7 @@
 Ox.Label = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 disabled: false,
                 id: '',
@@ -24,7 +24,7 @@ Ox.Label = function(options, self) {
             }))
             .html(self.options.title);
 
-	self.onChange = function(key, value) {
+	self.setOption = function(key, value) {
 		if (key == 'title') {
 			that.html(value);
 		}
diff --git a/source/Ox.UI/js/Form/Ox.Picker.js b/source/Ox.UI/js/Form/Ox.Picker.js
index d722d4d7..34eb90f8 100644
--- a/source/Ox.UI/js/Form/Ox.Picker.js
+++ b/source/Ox.UI/js/Form/Ox.Picker.js
@@ -2,7 +2,7 @@
 Ox.Picker = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 element: null,
                 elementHeight: 128,
@@ -20,7 +20,7 @@ Ox.Picker = function(options, self) {
         .click(showMenu)
         .appendTo(that);
 
-    self.$menu = new Ox.Element('div')
+    self.$menu = new Ox.Element({})
         .addClass('OxPicker')
         .css({
             width: self.options.elementWidth + 'px',
diff --git a/source/Ox.UI/js/Form/Ox.PlacePicker.js b/source/Ox.UI/js/Form/Ox.PlacePicker.js
index edf6105c..3993587a 100644
--- a/source/Ox.UI/js/Form/Ox.PlacePicker.js
+++ b/source/Ox.UI/js/Form/Ox.PlacePicker.js
@@ -9,7 +9,7 @@ Ox.PlacePicker = function(options, self) {
         }),
         that;
 
-    self.$element = new Ox.Element('div')
+    self.$element = new Ox.Element({})
         .css({
             width: '256px',
             height: '192px'
@@ -33,7 +33,7 @@ Ox.PlacePicker = function(options, self) {
                 )
         )
         .append(
-            self.$container = new Ox.Element('div')
+            self.$container = new Ox.Element({})
                 .css({
                     width: '256px',
                     height: '160px'
diff --git a/source/Ox.UI/js/Form/Ox.Range.js b/source/Ox.UI/js/Form/Ox.Range.js
index 23e4b117..ec68d1a2 100644
--- a/source/Ox.UI/js/Form/Ox.Range.js
+++ b/source/Ox.UI/js/Form/Ox.Range.js
@@ -234,7 +234,7 @@ Ox.Range = function(options, self) {
         }
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'size') {
             setSizes();
         } else if (key == 'trackColors') {
diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js
index c9fd077e..34c721cf 100644
--- a/source/Ox.UI/js/Form/Ox.Select.js
+++ b/source/Ox.UI/js/Form/Ox.Select.js
@@ -3,7 +3,7 @@ Ox.Select = function(options, self) {
 
     // fixme: selected item needs attribute "checked", not "selected" ... that's strange
     var self = self || {},
-        that = new Ox.Element('div', self) // fixme: do we use 'div', or {}, or '', by default?
+        that = new Ox.Element({}, self) // fixme: do we use 'div', or {}, or '', by default?
             .defaults({
                 id: '',
                 items: [],
@@ -126,7 +126,7 @@ Ox.Select = function(options, self) {
         self.$menu.showMenu();
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         
     };
 
diff --git a/source/Ox.UI/js/Form/Ox.TimeInput.js b/source/Ox.UI/js/Form/Ox.TimeInput.js
index e4fbe7ed..c92f8116 100644
--- a/source/Ox.UI/js/Form/Ox.TimeInput.js
+++ b/source/Ox.UI/js/Form/Ox.TimeInput.js
@@ -142,7 +142,7 @@ Ox.TimeInput = function(options, self) {
         });
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'value') {
             setValues();
         }
diff --git a/source/Ox.UI/js/List/Ox.IconList.js b/source/Ox.UI/js/List/Ox.IconList.js
index 051520e8..a8099c39 100644
--- a/source/Ox.UI/js/List/Ox.IconList.js
+++ b/source/Ox.UI/js/List/Ox.IconList.js
@@ -81,7 +81,7 @@ Ox.IconList = function(options, self) {
         });
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'items') {
             that.$element.options(key, value);
         } else if (key == 'paste') {
diff --git a/source/Ox.UI/js/List/Ox.List.js b/source/Ox.UI/js/List/Ox.List.js
index 6723889a..cbe48e6b 100644
--- a/source/Ox.UI/js/List/Ox.List.js
+++ b/source/Ox.UI/js/List/Ox.List.js
@@ -1209,7 +1209,7 @@ Ox.List = function(options, self) {
         }
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         //Ox.print('list onChange', key, value);
         if (key == 'items') {
             updateQuery();
diff --git a/source/Ox.UI/js/List/Ox.ListItem.js b/source/Ox.UI/js/List/Ox.ListItem.js
index c5343da9..09b9f2e0 100644
--- a/source/Ox.UI/js/List/Ox.ListItem.js
+++ b/source/Ox.UI/js/List/Ox.ListItem.js
@@ -31,7 +31,7 @@ Ox.ListItem = function(options, self) {
         that.$element = $element;
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'data') {
             constructItem(true);
         }
diff --git a/source/Ox.UI/js/List/Ox.TextList.js b/source/Ox.UI/js/List/Ox.TextList.js
index 622a62a7..ffdf4a22 100644
--- a/source/Ox.UI/js/List/Ox.TextList.js
+++ b/source/Ox.UI/js/List/Ox.TextList.js
@@ -584,7 +584,7 @@ Ox.TextList = function(options, self) {
         ]);
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'items') {
             //alert('request set!!')
             that.$body.options(key, value);
diff --git a/source/Ox.UI/js/List/Ox.TreeList.js b/source/Ox.UI/js/List/Ox.TreeList.js
index e9b4b819..6a270679 100644
--- a/source/Ox.UI/js/List/Ox.TreeList.js
+++ b/source/Ox.UI/js/List/Ox.TreeList.js
@@ -2,7 +2,7 @@
 Ox.TreeList = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 data: null,
                 items: [],
@@ -186,7 +186,7 @@ Ox.TreeList = function(options, self) {
         });
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'data') {
             
         }
diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js
index 443a9102..37a5fe0a 100644
--- a/source/Ox.UI/js/Map/Ox.ListMap.js
+++ b/source/Ox.UI/js/Map/Ox.ListMap.js
@@ -2,7 +2,7 @@
 Ox.ListMap = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 addPlace: null,
                 height: 256,
@@ -336,7 +336,7 @@ Ox.ListMap = function(options, self) {
         return val.toFixed(8);
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         Ox.print('ONCHANGE')
         if (key == 'height' || key == 'width') {
             Ox.print('ONCHANGE...')
diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js
index e940c9b4..be6e6693 100644
--- a/source/Ox.UI/js/Map/Ox.Map.js
+++ b/source/Ox.UI/js/Map/Ox.Map.js
@@ -3,7 +3,7 @@
 Ox.Map = function(options, self) {
 
     self = self || {};
-    var that = new Ox.Element('div', self)
+    var that = new Ox.Element({}, self)
         .defaults({
             // fixme: isClickable? hasZoombar?
 			clickable: false,
@@ -131,7 +131,7 @@ Ox.Map = function(options, self) {
             .appendTo(self.$toolbar)
     }
 
-    self.$map = new Ox.Element('div')
+    self.$map = new Ox.Element({})
         .css({
             left: 0,
             top: self.options.toolbar * 24 + 'px',
@@ -847,7 +847,7 @@ Ox.Map = function(options, self) {
 		}
 	}
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         /*if (key == 'height' || key == 'width') {
             resizeMap();
         } else */if (key == 'places') {
diff --git a/source/Ox.UI/js/Map/Ox.MapImage.js b/source/Ox.UI/js/Map/Ox.MapImage.js
index 3e820cf5..0af6c48c 100644
--- a/source/Ox.UI/js/Map/Ox.MapImage.js
+++ b/source/Ox.UI/js/Map/Ox.MapImage.js
@@ -11,7 +11,7 @@ Ox.MapImage = function(options, self) {
     */
 
     var self = self || {},
-        that = new Ox.Element('img', self)
+        that = new Ox.Element('<img>', self)
             .defaults({
                 height: 360,
                 markerColorHighlight: 'yellow',
@@ -59,7 +59,7 @@ Ox.MapImage = function(options, self) {
         src: self.src
     });
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         
     };
 
diff --git a/source/Ox.UI/js/Menu/Ox.MainMenu.js b/source/Ox.UI/js/Menu/Ox.MainMenu.js
index 2ab4cbe2..ba75447b 100644
--- a/source/Ox.UI/js/Menu/Ox.MainMenu.js
+++ b/source/Ox.UI/js/Menu/Ox.MainMenu.js
@@ -94,7 +94,7 @@ Ox.MainMenu = function(options, self) {
         self.focused = false;
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
 
     };
 
diff --git a/source/Ox.UI/js/Menu/Ox.Menu.js b/source/Ox.UI/js/Menu/Ox.Menu.js
index da80b675..ab47738a 100644
--- a/source/Ox.UI/js/Menu/Ox.Menu.js
+++ b/source/Ox.UI/js/Menu/Ox.Menu.js
@@ -515,7 +515,7 @@ Ox.Menu = function(options, self) {
         }
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'items') {
             constructItems(value);
         } else if (key == 'selected') {
diff --git a/source/Ox.UI/js/Menu/Ox.MenuItem.js b/source/Ox.UI/js/Menu/Ox.MenuItem.js
index a87d0009..1c9d9641 100644
--- a/source/Ox.UI/js/Menu/Ox.MenuItem.js
+++ b/source/Ox.UI/js/Menu/Ox.MenuItem.js
@@ -2,7 +2,7 @@
 Ox.MenuItem = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('tr', self)
+        that = new Ox.Element('<tr>', self)
             .defaults({
                 bind: [], // fixme: what's this?
                 checked: null,
@@ -81,7 +81,7 @@ Ox.MenuItem = function(options, self) {
         };
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'checked') {
             that.$status.html(value ? Ox.UI.symbols.check : '')
         } else if (key == 'disabled') {
diff --git a/source/Ox.UI/js/Panel/Ox.CollapsePanel.js b/source/Ox.UI/js/Panel/Ox.CollapsePanel.js
index a2d6dfbf..94d14c30 100644
--- a/source/Ox.UI/js/Panel/Ox.CollapsePanel.js
+++ b/source/Ox.UI/js/Panel/Ox.CollapsePanel.js
@@ -68,7 +68,7 @@ Ox.CollapsePanel = function(options, self) {
             collapsed: self.options.collapsed
         });
     }
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'collapsed') {
 
         } else if (key == 'title') {
diff --git a/source/Ox.UI/js/Panel/Ox.SplitPanel.js b/source/Ox.UI/js/Panel/Ox.SplitPanel.js
index 3e45e88b..25e9f3c7 100644
--- a/source/Ox.UI/js/Panel/Ox.SplitPanel.js
+++ b/source/Ox.UI/js/Panel/Ox.SplitPanel.js
@@ -250,7 +250,7 @@ Ox.SplitPanel = function(options, self) {
 Ox.SplitPanel_ = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 elements: [],
                 orientation: 'horizontal'
diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js
index 281a785b..bc7f3229 100644
--- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js
+++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js
@@ -2,7 +2,7 @@
 Ox.AnnotationPanel = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 id: '',
                 items: [],
@@ -39,7 +39,7 @@ Ox.AnnotationPanel = function(options, self) {
 
     self.$annotations = new Ox.List({
             construct: function(data) {
-                return new Ox.Element('div')
+                return new Ox.Element({})
                     .addClass('OxAnnotation OxEditable OxTarget')
                     .html(Ox.parseHTML(data.value));
             },
@@ -68,11 +68,11 @@ Ox.AnnotationPanel = function(options, self) {
         .appendTo(that.$content);
 
     /*
-    self.$annotations = new Ox.Element('div')
+    self.$annotations = new Ox.Element({})
         .appendTo(that.$content);
     self.$annotation = [];
     self.options.items.forEach(function(item, i) {
-        self.$annotation[i] = new Ox.Element('div')
+        self.$annotation[i] = new Ox.Element({})
             .addClass('OxAnnotation')
             .html(item.value.replace(/\n/g, '<br/>'))
             .click(function() {
diff --git a/source/Ox.UI/js/Video/Ox.BlockTimeline.js b/source/Ox.UI/js/Video/Ox.BlockTimeline.js
index 8aaddfa2..32a22760 100644
--- a/source/Ox.UI/js/Video/Ox.BlockTimeline.js
+++ b/source/Ox.UI/js/Video/Ox.BlockTimeline.js
@@ -2,7 +2,7 @@
 Ox.BlockTimeline = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 cuts: [],
                 duration: 0,
@@ -85,7 +85,7 @@ Ox.BlockTimeline = function(options, self) {
 
     function addLine(i) {
         // fixme: get URLs once, not once for every line
-        self.$lines[i] = new Ox.Element('div')
+        self.$lines[i] = new Ox.Element({})
             .css({
                 top: i * (self.height + self.margin) + 'px',
                 width: self.options.width + 'px'
@@ -345,7 +345,7 @@ Ox.BlockTimeline = function(options, self) {
         });
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         //Ox.print('onChange:', key, value)
         if (key == 'points') {
             //Ox.print('key', key, 'value', value)
diff --git a/source/Ox.UI/js/Video/Ox.FilesView.js b/source/Ox.UI/js/Video/Ox.FilesView.js
index df01ddbe..4128ff6f 100644
--- a/source/Ox.UI/js/Video/Ox.FilesView.js
+++ b/source/Ox.UI/js/Video/Ox.FilesView.js
@@ -10,7 +10,7 @@ Pan.do/ra
 Ox.FilesView = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 id: ''
             })
diff --git a/source/Ox.UI/js/Video/Ox.Flipbook.js b/source/Ox.UI/js/Video/Ox.Flipbook.js
index 8b518f88..1bf0b17a 100644
--- a/source/Ox.UI/js/Video/Ox.Flipbook.js
+++ b/source/Ox.UI/js/Video/Ox.Flipbook.js
@@ -22,7 +22,7 @@ Ox.Flipbook = function(options, self) {
                                 'width': '100%'
                             })
                             .hide(),
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 frames: {},
                 duration: 0,
@@ -85,7 +85,7 @@ Ox.Flipbook = function(options, self) {
         });
     }
     
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'frames') {
             cacheFrames();
         } else if (key == 'icon') {
diff --git a/source/Ox.UI/js/Video/Ox.LargeTimeline.js b/source/Ox.UI/js/Video/Ox.LargeTimeline.js
index aab02bdb..2ffb600d 100644
--- a/source/Ox.UI/js/Video/Ox.LargeTimeline.js
+++ b/source/Ox.UI/js/Video/Ox.LargeTimeline.js
@@ -2,7 +2,7 @@
 Ox.LargeTimeline = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 cuts: [],
                 duration: 0,
@@ -197,7 +197,7 @@ Ox.LargeTimeline = function(options, self) {
         }
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'points') {
             setMarkerPoint(0);
             setMarkerPoint(1);
diff --git a/source/Ox.UI/js/Video/Ox.SmallTimeline.js b/source/Ox.UI/js/Video/Ox.SmallTimeline.js
index ef799f9d..083ae5b3 100644
--- a/source/Ox.UI/js/Video/Ox.SmallTimeline.js
+++ b/source/Ox.UI/js/Video/Ox.SmallTimeline.js
@@ -2,7 +2,7 @@
 Ox.SmallTimeline = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 duration: 0,
                 find: '',
@@ -174,7 +174,7 @@ Ox.SmallTimeline = function(options, self) {
         setMarkerPoint(1);
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         //Ox.print('onChange:', key, value)
         if (key == 'points') {
             //Ox.print('key', key, 'value', value)
diff --git a/source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js b/source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js
index fc5dd9a8..7d27fc8a 100644
--- a/source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js
@@ -3,7 +3,7 @@
 Ox.VideoEditorPlayer = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 duration: 0,
                 find: '',
@@ -360,7 +360,7 @@ Ox.VideoEditorPlayer = function(options, self) {
         });
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'height') {
             setHeight();
         } else if (key == 'points') {
diff --git a/source/Ox.UI/js/Video/Ox.VideoElement.js b/source/Ox.UI/js/Video/Ox.VideoElement.js
index a6649125..3432c778 100644
--- a/source/Ox.UI/js/Video/Ox.VideoElement.js
+++ b/source/Ox.UI/js/Video/Ox.VideoElement.js
@@ -2,7 +2,7 @@
 Ox.VideoElement = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('video', self)
+        that = new Ox.Element('<video>', self)
             .defaults({
                 fps: 25,
                 height: 0,
@@ -57,7 +57,7 @@ Ox.VideoElement = function(options, self) {
         });
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'height') {
             that.size(self.options.width, value);
         } else if (key == 'muted') {
diff --git a/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js
index bd322b17..26f0a333 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js
@@ -2,7 +2,7 @@
 Ox.VideoPanelPlayer = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 annotationsSize: 256,
                 duration: 0,
@@ -385,7 +385,7 @@ Ox.VideoPanelPlayer = function(options, self) {
         });
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'height') {
             resizeVideo();
         } else if (key == 'position') {
diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
index 49fe08b9..7448cbbb 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
@@ -2,7 +2,7 @@
 Ox.VideoEditor = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 annotationsSize: 0,
                 cuts: [],
@@ -565,7 +565,7 @@ Ox.VideoEditor = function(options, self) {
         });
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'width' || key == 'height') {
             //Ox.print('XXXX setSizes', key, value, self.options.width, self.options.height)
             setSizes();
diff --git a/source/Ox.UI/js/Window/Ox.Dialog.js b/source/Ox.UI/js/Window/Ox.Dialog.js
index e222a0c6..a8f9b9f6 100644
--- a/source/Ox.UI/js/Window/Ox.Dialog.js
+++ b/source/Ox.UI/js/Window/Ox.Dialog.js
@@ -4,7 +4,7 @@ Ox.Dialog = function(options, self) {
     // fixme: dialog should be derived from a generic draggable
     // fixme: buttons should have a close attribute, or the dialog a close id
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 title: '',
                 buttons: [],
@@ -264,7 +264,7 @@ Ox.Dialog = function(options, self) {
         });
     }
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'buttons') {
             loadButtons();
             /*
diff --git a/source/Ox.UI/js/Window/Ox.Tooltip.js b/source/Ox.UI/js/Window/Ox.Tooltip.js
index 3af35855..a8803a4e 100644
--- a/source/Ox.UI/js/Window/Ox.Tooltip.js
+++ b/source/Ox.UI/js/Window/Ox.Tooltip.js
@@ -2,7 +2,7 @@
 Ox.Tooltip = function(options, self) {
 
     var self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 animate: true,
                 title: ''
@@ -15,7 +15,7 @@ Ox.Tooltip = function(options, self) {
         opacity: 0
     });
 
-    self.onChange = function(key, value) {
+    self.setOption = function(key, value) {
         if (key == 'title') {
             that.html(value);
         }
diff --git a/source/Ox.UI/js/Window/Ox.Window.js b/source/Ox.UI/js/Window/Ox.Window.js
index 90f378e4..566a8765 100644
--- a/source/Ox.UI/js/Window/Ox.Window.js
+++ b/source/Ox.UI/js/Window/Ox.Window.js
@@ -2,7 +2,7 @@
 Ox.Window = function(options, self) {
 
     self = self || {},
-        that = new Ox.Element('div', self)
+        that = new Ox.Element({}, self)
             .defaults({
                 draggable: true,
                 fullscreenable: true, // fixme: silly name
@@ -25,7 +25,7 @@ Ox.Window = function(options, self) {
         
     };
 
-    self.onChange = function() {
+    self.setOption = function() {
         
     };
 
diff --git a/source/Ox.js b/source/Ox.js
index 53ab8e6e..093cbd23 100644
--- a/source/Ox.js
+++ b/source/Ox.js
@@ -47,6 +47,11 @@ Ox.MONTHS = [
 Ox.SHORT_MONTHS = Ox.MONTHS.map(function(val) {
     return val.substr(0, 3);
 });
+Ox.PATH = Array.prototype.slice.apply(
+    document.getElementsByTagName('script')
+).filter(function(element) {
+    return /Ox\.js$/.test(element.src);
+})[0].src.replace('Ox.js', '');
 Ox.PREFIXES = ['K', 'M', 'G', 'T', 'P'];
 Ox.SYMBOLS = {
     DOLLAR: '\u0024', 
@@ -143,12 +148,6 @@ Ox.getset = function(obj, args, callback, context) {
     return ret;
 }
 
-Ox.PATH = Array.prototype.slice.apply(
-    document.getElementsByTagName('script')
-).filter(function(element) {
-    return /Ox\.js$/.test(element.src);
-})[0].src.replace('Ox.js', '');
-
 Ox.load = function(module, options, callback) {
     /***
     loads Ox modules
@@ -244,12 +243,15 @@ Ox.loadJSON = function(url, callback) {
 
 Ox.print = function() {
     /*
+    like console.log, but prepends timestamp and name of the caller function
     */
     if (window.console) {
         var args = Ox.makeArray(arguments),
-            date = new Date;
-        args.unshift(Ox.formatDate(date, '%H:%M:%S') + '.' +
-            (Ox.pad(+date % 1000, 3)));
+            date = new Date();
+        args.unshift(
+            Ox.formatDate(date, '%H:%M:%S.') + (+date).toString().substr(-3),
+            arguments.callee.caller.name || '(anonymous)'
+        );
         window.console.log.apply(window.console, args);
     }
 };
@@ -582,6 +584,23 @@ Ox.keys = function(obj) {
     return keys.sort();
 };
 
+Ox.last = function(arr, val) {
+    /***
+    >>> Ox.last([1, 2, 3])
+    3
+    >>> Ox.last([1, 2, 3], 4)
+    [1, 2, 4]
+    ***/
+    var ret;
+    if (arguments.length == 1) {
+        ret = arr[arr.length - 1];
+    } else {
+        arr[arr.length - 1] = val;
+        ret = arr;
+    }
+    return ret;
+};
+
 Ox.len = function(obj) {
     /*
     >>> Ox.len([1, 2, 3])
@@ -663,6 +682,7 @@ Ox.map = function(obj, fn) {
     >>> Ox.map([,], function(v, i) { return i; })
     [0]
     */
+    // fixme: return null to filter out is a bit esoteric
     var isObject = Ox.isObject(obj),
         ret = isObject ? {} : [];
     Ox.forEach(obj, function(val, key) {
@@ -791,13 +811,16 @@ Ox.sort = function(arr) {
     ['9', '10', 'a', 'B']
     */
     var len, matches = {}, sort = {};
+    // find leading numbers
     arr.forEach(function(val, i) {
         var match = /^\d+/(val);
         matches[val] = match ? match[0] : '';
     });
+    // get length of longest leading number
     len = Ox.max(Ox.map(matches, function(val) {
         return val.length;
     }));
+    // pad leading numbers, and make lower case
     arr.forEach(function(val) {
         sort[val] = (
             matches[val] ?
@@ -884,6 +907,7 @@ Ox.values = function(obj) {
     >>> Ox.values([1,])
     [1]
     */
+    // fixme: why doesn't this use map?
     var values = [];
     Ox.forEach(obj, function(val) {
         values.push(val);
@@ -2562,6 +2586,10 @@ Ox.contains = function(str, chr) {
     false
     >>> Ox.contains("foobar", "bar")
     true
+    >>> Ox.contains(['foo', 'bar'], 'foo')
+    true
+    // fixme: rename to Ox.has or Ox.isIn?
+    // then it'd become convenient for arrays
     */
     return str.indexOf(chr) > -1;
 };
@@ -2571,7 +2599,7 @@ Ox.endsWith = function(str, sub) {
     >>> Ox.endsWith("foobar", "bar")
     true
     */
-    return str.toString().substr(-sub.length) === sub;
+    return new RegExp(sub + '$').test(str);
 };
 
 Ox.highlight = function(txt, str) {
@@ -2590,11 +2618,15 @@ Ox.isValidEmail = function(str) {
     true
     >>> Ox.isValidEmail("foo@bar")
     false
+    >>> Ox.isValidEmail("foo@bar..com")
+    false
     */
     return !!/^[0-9A-Z\.\+\-_]+@(?:[0-9A-Z\-]+\.)+[A-Z]{2,6}$/i(str);
 }
 
 Ox.pad = function(str, len, pad, pos) {
+    // fixme: slighly obscure signature
+    // fixme: weird for negative numbers
     /*
     >>> Ox.pad(1, 2)
     "01"
@@ -2608,24 +2640,34 @@ Ox.pad = function(str, len, pad, pos) {
     "456abc"
     */
     str = str.toString().substr(0, len);
-    pad = Ox.repeat(pad || "0", len - str.length);
-    pos = pos || "left";
-    str = pos == "left" ? pad + str : str + pad;
-    str = pos == "left" ?
+    pad = Ox.repeat(pad || '0', len - str.length);
+    pos = pos || 'left';
+    str = pos == 'left' ? pad + str : str + pad;
+    str = pos == 'left' ?
         str.substr(str.length - len, str.length) :
         str.substr(0, len);
     return str;
 };
 
-Ox.repeat = function(str, num) {
+Ox.repeat = function(obj, num) {
     /*
-    fixme: make this work for arrays, like in python
+    works for arrays, numbers and strings
     >>> Ox.repeat(1, 3)
     "111"
     >>> Ox.repeat("foo", 3)
     "foofoofoo"
+    >>> Ox.repeat([1, 2], 3)
+    [1, 2, 1, 2, 1, 2]
     */
-    return num >= 1 ? new Array(num + 1).join(str.toString()) : '';
+    var ret;
+    if (Ox.isArray(obj)) {
+        ret = num >= 1 ? Ox.map(Ox.range(obj.length * num), function(v, i) {
+            return obj[i % obj.length]
+        }) : [];
+    } else {
+        ret = num >= 1 ? new Array(num + 1).join(obj.toString()) : '';
+    }
+    return ret;
 };
 
 Ox.reverse = function(str) {
@@ -2640,8 +2682,11 @@ Ox.startsWith = function(str, sub) {
     /*
     >>> Ox.startsWith("foobar", "foo")
     true
+    // fixme:
+    // !!(/^sub/(str)) is shorter than
+    // Ox.startsWith(str, sub) anyway
     */
-    return str.toString().substr(0, sub.length) === sub;
+    return new RegExp('^' + sub).test(str);
 };
 
 Ox.stripTags = function(str) {
@@ -2656,7 +2701,7 @@ Ox.substr = function(str, start, stop) {
     /***
     Ox.substr behaves like str[start:stop] in Python
     (or like str.substring() with negative values for stop)
-    not implemented
+    // fixme: needed?
     >>> Ox.substr('foobar', 1)
     "oobar"
     >>> Ox.substr('foobar', -1)
@@ -2704,12 +2749,11 @@ Ox.toDashes = function(str) {
 Ox.tokenize = (function() {
 
     // see https://github.com/mozilla/narcissus/blob/master/lib/jslex.js
+    // and https://developer.mozilla.org/en/JavaScript/Reference
 
     var identifier = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_',
-        // see https://developer.mozilla.org/en/JavaScript/Reference/Reserved_Words
         linebreak = '\n\r',
         number = '0123456789',
-        // see https://developer.mozilla.org/en/JavaScript/Reference
         operator = [
             // arithmetic
             '+', '-', '*', '/', '%', '++', '--',
@@ -2837,7 +2881,8 @@ Ox.tokenize = (function() {
                 'RangeError', 'ReferenceError', 'RegExp',
                 'String', 'SyntaxError',
                 'TypeError',
-                'undefined', 'URIError'
+                'undefined', 'URIError',
+                'window'
             ],
             property: [
                 // Function
@@ -2980,7 +3025,6 @@ Ox.tokenize = (function() {
 
 }()); 
 
-
 Ox.toSlashes = function(str) {
     /*
     >>> Ox.toSlashes("fooBarBaz")
@@ -3018,7 +3062,7 @@ Ox.toUnderscores = function(str) {
     });
 };
 
-Ox.trim = function(str) { // is in jQuery
+Ox.trim = function(str) { // is in jQuery, and in JavaScript itself
     /*
     Ox.trim(" foo ")
     "foo"
@@ -3082,6 +3126,7 @@ Ox.words = function(str) {
 }
 
 Ox.wordwrap = function(str, len, sep, bal, spa) {
+    // fixme: bad API, sep/bal/spa should be in options object
     /*
     >>> Ox.wordwrap("Anticonstitutionellement, Paris s'eveille", 25, "<br/>")
     "Anticonstitutionellement, <br/>Paris s'eveille"