From 0eb25e9f050ae44038ab0b081d541e031c8a36b7 Mon Sep 17 00:00:00 2001
From: rolux <rolux@pandora>
Date: Fri, 3 Sep 2010 22:54:40 +0200
Subject: [PATCH] first round of fixes

---
 build/css/ox.ui.modern.css |   24 +-
 build/js/ox.ui.js          | 3148 ++++++++++++++++++------------------
 2 files changed, 1635 insertions(+), 1537 deletions(-)

diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css
index 65dda6c..5ddb99e 100644
--- a/build/css/ox.ui.modern.css
+++ b/build/css/ox.ui.modern.css
@@ -57,28 +57,41 @@ Dialog
 Forms
 ================================================================================
 */
+
+/*
 .OxThemeModern .OxInput::-selection {
     background: rgb(80, 80, 80);
 }
+*/
 
 
 .OxThemeModern .OxButton,
+.OxThemeModern input.OxCheckbox,
 .OxThemeModern input.OxInput,
-.OxThemeModern .OxRange,
+.OxThemeModern .OxLabel,
 .OxThemeModern .OxTrack {
     //border: 1px solid rgb(80, 80, 80);
     border: 1px solid rgb(48, 48, 48);
     color: rgb(192, 192, 192);
 }
+.OxThemeModern .OxSelect {
+    border: 1px solid rgb(48, 48, 48);
+}
+.OxThemeModern .OxSelect > .OxTitle {
+    color: rgb(192, 192, 192);
+}
+.OxThemeModern .OxInputLabel {
+    color: rgb(192, 192, 192);
+}
 .OxThemeModern .OxButton,
-.OxThemeModern .OxRange {
+.OxThemeModern div.OxInput,
+.OxThemeModern .OxSelect {
     background: -moz-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
     //background: -moz-linear-gradient(left top, left bottom, from(rgb(64, 64, 64)), to(rgb(32, 32, 32)));
     //background: -webkit-gradient(linear, left top, left bottom, from(rgb(64, 64, 64)), to(rgb(32, 32, 32)));
 }
-.OxThemeModern .OxButton:active,
-.OxThemeModern .OxRange.OxActive {
+.OxThemeModern .OxButton:active {
     background: rgb(80, 80, 80);
     //background: rgb(64, 64, 64);
 }
@@ -86,7 +99,8 @@ Forms
     background: rgb(80, 80, 80);
     color: rgb(128, 128, 128);
 }
-.OxThemeModern .OxButton.OxSelected {
+.OxThemeModern .OxButton.OxSelected,
+.OxThemeModern .OxSelect.OxSelected {
     //background: -moz-linear-gradient(left top, left bottom, from(rgb(80, 80, 80)), to(rgb(112, 112, 112)));
     //background: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(112, 112, 112)));
     background: -moz-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32) 10%, rgb(64, 64, 64));
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index 67109c3..f646e89 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -13,16 +13,16 @@ requires
 (function() {
 
     var oxui = {
-            defaultTheme: "classic",
+            defaultTheme: 'classic',
             elements: {},
             getDimensions: function(orientation) {
-                return orientation == "horizontal" ?
-                    ["width", "height"] : ["height", "width"];
+                return orientation == 'horizontal' ?
+                    ['width', 'height'] : ['height', 'width'];
             },
             getEdges: function(orientation) {
-                return orientation == "horizontal" ?
-                    ["left", "right", "top", "bottom"] :
-                    ["top", "bottom", "left", "right"];
+                return orientation == 'horizontal' ?
+                    ['left', 'right', 'top', 'bottom'] :
+                    ['top', 'bottom', 'left', 'right'];
             },
             getBarSize: function(size) {
                 var sizes = {
@@ -34,71 +34,71 @@ requires
             },
             jQueryFunctions: function() {
                 var functions = [],
-                    $element = $("<div>");
+                    $element = $('<div>');
                 //delete $element.length;
                 Ox.each($element, function(k, v) {
-                    if (typeof v == "function") {
+                    if (typeof v == 'function') {
                         functions.push(k);
                     }
                 });
                 return functions.sort();
             }(),
-            path: $("script[src*=ox.ui.js]").attr("src")
-                .replace("js/ox.ui.js", ""),
+            path: $('script[src*=ox.ui.js]').attr('src')
+                .replace('js/ox.ui.js', ''),
             scrollbarSize: $.browser.mozilla ? 16 : 12,
             symbols: {
-                alt: "\u2325",
-                apple: "\uF8FF",
-                arrow_down: "\u2193",
-                arrow_left: "\u2190",
-                arrow_right: "\u2192",
-                arrow_up: "\u2191",
-                backspace: "\u232B",
-                backup: "\u2707",
-                ballot: "\u2717",
-                black_star: "\u2605",
-                burn: "\u2622",
-                caps_lock: "\u21EA",
-                check: "\u2713",
-                //clear: "\u2327",
-                clear: "\u00D7",
-                click: "\uF803",
-                close: "\u2715",
-                command: "\u2318",
-                control: "\u2303",
-                cut: "\u2702",
-                "delete": "\u2326",
-                diamond: "\u25C6",
-                edit: "\uF802",
-                eject: "\u23CF",
-                escape: "\u238B",
-                end: "\u2198",
-                enter: "\u2324",
-                fly: "\u2708",
-                gear: "\u2699",
-                home: "\u2196",
-                info: "\u24D8",
-                navigate: "\u2388",
-                option: "\u2387",
-                page_up: "\u21DE",
-                page_down: "\u21DF",
-                redo: "\u21BA",
-                "return": "\u21A9",
-                //select: "\u21D5",
-                select: "\u25BE",
-                shift: "\u21E7",
-                sound: "\u266B",
-                space: "\u2423",
-                tab: "\u21E5",
-                trash: "\u267A",
-                triangle_down: "\u25BC",
-                triangle_left: "\u25C0",
-                triangle_right: "\u25BA",
-                triangle_up: "\u25B2",
-                undo: "\u21BB",
-                voltage: "\u26A1",
-                warning: "\u26A0",
-                white_star: "\u2606"
+                alt: '\u2325',
+                apple: '\uF8FF',
+                arrow_down: '\u2193',
+                arrow_left: '\u2190',
+                arrow_right: '\u2192',
+                arrow_up: '\u2191',
+                backspace: '\u232B',
+                backup: '\u2707',
+                ballot: '\u2717',
+                black_star: '\u2605',
+                burn: '\u2622',
+                caps_lock: '\u21EA',
+                check: '\u2713',
+                //clear: '\u2327',
+                clear: '\u00D7',
+                click: '\uF803',
+                close: '\u2715',
+                command: '\u2318',
+                control: '\u2303',
+                cut: '\u2702',
+                'delete': '\u2326',
+                diamond: '\u25C6',
+                edit: '\uF802',
+                eject: '\u23CF',
+                escape: '\u238B',
+                end: '\u2198',
+                enter: '\u2324',
+                fly: '\u2708',
+                gear: '\u2699',
+                home: '\u2196',
+                info: '\u24D8',
+                navigate: '\u2388',
+                option: '\u2387',
+                page_up: '\u21DE',
+                page_down: '\u21DF',
+                redo: '\u21BA',
+                'return': '\u21A9',
+                //select: '\u21D5',
+                select: '\u25BE',
+                shift: '\u21E7',
+                sound: '\u266B',
+                space: '\u2423',
+                tab: '\u21E5',
+                trash: '\u267A',
+                triangle_down: '\u25BC',
+                triangle_left: '\u25C0',
+                triangle_right: '\u25BA',
+                triangle_up: '\u25B2',
+                undo: '\u21BB',
+                voltage: '\u26A1',
+                warning: '\u26A0',
+                white_star: '\u2606'
             }
         },
         $window, $document, $body;
@@ -106,7 +106,7 @@ requires
     $(function() {
         $window = $(window),
         $document = $(document),
-        $body = $("body"),
+        $body = $('body'),
         $elements = {};
         Ox.theme(oxui.defaultTheme);
     });
@@ -186,28 +186,28 @@ requires
     */
 
     Ox.Event = function() {
-        var $eventHandler = $("<div>"),
+        var $eventHandler = $('<div>'),
             events = {};
         function addEvent(id, type, event, callback) {
             events[id] = events[id] || {};
             events[id][type] = events[id][type] || {};
             events[id][type][event] = events[id][type][event] || [];
             events[id][type][event].push(callback);
-            if (type == "normal" || Ox.Focus.focused() == id) {
-                Ox.print("bind", id, event);
-                $eventHandler.bind(event + "_" + id, callback);
+            if (type == 'normal' || Ox.Focus.focused() == id) {
+                Ox.print('bind', id, event);
+                $eventHandler.bind(event + (id ? '_' + id : ''), callback); // requestStart/requestStop currently have '' as id
             }
         }
         function removeEvent(id, type, event, callback) {
-            var focused = type == "normal" || Ox.Focus.focused() == id,
-                toString = (callback || "").toString();
-            Ox.print("removeEvent", id, type, event, callback);
+            var focused = type == 'normal' || Ox.Focus.focused() == id,
+                toString = (callback || '').toString();
+            Ox.print('removeEvent', id, type, event, callback);
             if (events[id] && events[id][type] && (!event || events[id][type][event])) {
                 $.each(events[id][type], function(e, fns) {
                     if (!event || event == e) {
                         events[id][type][e] = $.map(events[id][type][e], function(fn, i) {
                             if (!callback || toString == fn.toString()) {
-                                focused && $eventHandler.unbind(e + "_" + id, fn);
+                                focused && $eventHandler.unbind(e + '_' + id, fn);
                                 return null;
                             } else {
                                 return fn;
@@ -228,7 +228,7 @@ requires
             }
         }
         function isKeyboardEvent(event) { // fixme: currently unused
-            return event.substr(0, 4) == "key_";
+            return event.substr(0, 4) == 'key_';
         }
         return {
             _print: function() {
@@ -236,21 +236,21 @@ requires
             },
             add: function(id, event, callback) {
                 // add keyboard event
-                addEvent(id, "keyboard", event, callback);
+                addEvent(id, 'keyboard', event, callback);
             },
             bind: function(id, event, callback) {
                 // bind event
-                addEvent(id, "normal", event, callback);
+                addEvent(id, 'normal', event, callback);
             },
             bindKeyboard: function(id) {
                 // bind all keyboard events
-                //Ox.print("binding", "id", id, "events", events[id], Ox.length(events[id]), "keyboardevents", events[id]["keyboard"])
+                //Ox.print('binding', 'id', id, 'events', events[id], Ox.length(events[id]), 'keyboardevents', events[id]['keyboard'])
                 $.each(events[id], function(k, v) {
-                    Ox.print("|" + k + "|");
+                    Ox.print('|' + k + '|');
                 })
                 events[id] && events[id].keyboard && $.each(events[id].keyboard, function(event, callbacks) {
                     $.each(callbacks, function(i, callback) {
-                        Ox.print("bind", id, event);
+                        Ox.print('bind', id, event);
                         $eventHandler.bind(event, callback);
                     });
                 });
@@ -258,10 +258,10 @@ requires
             changeId: function(oldId, newId) {
                 // fixme: would it be better to pass that.id instead of self.options.id?
                 // then this renaming wouldn't be necessary
-                Ox.print("changeId", oldId, newId, events[oldId]);
+                Ox.print('changeId', oldId, newId, events[oldId]);
                 $.each($.extend({}, events[oldId] || {}), function(type, events_) {
-                    var bind = type == "normal" ? "bind" : "add",
-                        unbind = type == "normal" ? "unbind" : "remove";
+                    var bind = type == 'normal' ? 'bind' : 'add',
+                        unbind = type == 'normal' ? 'unbind' : 'remove';
                     $.each(events_, function(event, callbacks) {
                         $.each(callbacks, function(i, callback) {
                             Ox.Event[unbind](oldId, event, callback);
@@ -273,26 +273,26 @@ requires
             remove: function(id, event, callback) {
                 // remove keyboard event
                 // event and callback are optional
-                removeEvent(id, "keyboard", event, callback);
+                removeEvent(id, 'keyboard', event, callback);
             },
             unbind: function(id, event, callback) {
                 // unbind event
                 // event and callback are optional
-                removeEvent(id, "normal", event, callback);
+                removeEvent(id, 'normal', event, callback);
             },
             trigger: function(id, event, data) {
                 // trigger event
                 // data is optional
-                // keyboard handler will call this with "" as id
-                Ox.print("trigger", id, event, data || {});
-                $eventHandler.trigger(event + (id ? "_" + id : ""), data || {});
+                // keyboard handler will call this with '' as id
+                Ox.print('trigger', id, event, data || {});
+                $eventHandler.trigger(event + (id ? '_' + id : ''), data || {});
             },
             unbindKeyboard: function(id) {
                 // unbind all keyboard events
-                Ox.print("unbinding", id /*events[id].keyboard*/)
+                Ox.print('unbinding', id /*events[id].keyboard*/)
                 events[id] && events[id].keyboard && $.each(events[id].keyboard, function(event, callbacks) {
                     $.each(callbacks, function(i, callback) {
-                        Ox.print("unbind", event)
+                        Ox.print('unbind', event)
                         $eventHandler.unbind(event, callback);
                     });
                 });
@@ -312,24 +312,24 @@ requires
             blur: function(id) {
                 var index = stack.indexOf(id);
                 if (index == stack.length - 1) {
-                    $elements[id].removeClass("OxFocus");
-                    //$(".OxFocus").removeClass("OxFocus"); // fixme: the above is better, and should work
+                    $elements[id].removeClass('OxFocus');
+                    //$('.OxFocus').removeClass('OxFocus'); // fixme: the above is better, and should work
                     stack.length == 1 ? stack.pop() :
                             stack.splice(stack.length - 2, 0, stack.pop());
-                    Ox.Event.unbindKeyboard($elements[id].options("id"));
-                    stack.length && Ox.Event.bindKeyboard($elements[stack[stack.length - 1]].options("id"));
-                    Ox.print("blur", id, stack);
+                    Ox.Event.unbindKeyboard($elements[id].options('id'));
+                    stack.length && Ox.Event.bindKeyboard($elements[stack[stack.length - 1]].options('id'));
+                    Ox.print('blur', id, stack);
                 }
             },
             focus: function(id) {
                 var index = stack.indexOf(id);
                 if (index == -1 || index < stack.length - 1) {
-                    stack.length && Ox.Event.unbindKeyboard($elements[stack[stack.length - 1]].options("id"));
+                    stack.length && Ox.Event.unbindKeyboard($elements[stack[stack.length - 1]].options('id'));
                     index > -1 && stack.splice(index, 1);
                     stack.push(id);
-                    $elements[id].addClass("OxFocus");
-                    Ox.Event.bindKeyboard($elements[id].options("id"));
-                    Ox.print("focus", id, stack);
+                    $elements[id].addClass('OxFocus');
+                    Ox.Event.bindKeyboard($elements[id].options('id'));
+                    Ox.print('focus', id, stack);
                 }
             },
             focused: function() {
@@ -352,125 +352,125 @@ requires
 
     (function() {
 
-        var buffer = "",
+        var buffer = '',
             bufferTime = 0,
             bufferTimeout = 1000,
             keyNames = function() {
                 return {
-                    0: "section",
-                    8: "backspace",
-                    9: "tab",
-                    12: "clear",
-                    13: "enter",
-                    16: "shift",
-                    17: "control",
-                    18: "alt",
-                    20: "capslock",
-                    27: "escape",
-                    32: "space",
-                    33: "pageup",
-                    34: "pagedown",
-                    35: "end",
-                    36: "home",
-                    37: "left",
-                    38: "up",
-                    39: "right",
-                    40: "down",
-                    45: "insert",
-                    46: "delete",
-                    47: "help",
-                    48: "0",
-                    49: "1",
-                    50: "2",
-                    51: "3",
-                    52: "4",
-                    53: "5",
-                    54: "6",
-                    55: "7",
-                    56: "8",
-                    57: "9",
-                    65: "a",
-                    66: "b",
-                    67: "c",
-                    68: "d",
-                    69: "e",
-                    70: "f",
-                    71: "g",
-                    72: "h",
-                    73: "i",
-                    74: "j",
-                    75: "k",
-                    76: "l",
-                    77: "m",
-                    78: "n",
-                    79: "o",
-                    80: "p",
-                    81: "q",
-                    82: "r",
-                    83: "s",
-                    84: "t",
-                    85: "u",
-                    86: "v",
-                    87: "w",
-                    88: "x",
-                    89: "y",
-                    90: "z",
-                    91: "meta.left",
-                    92: "meta.right",
-                    93: "select",
-                    96: "0.numpad",
-                    97: "1.numpad",
-                    98: "2.numpad",
-                    99: "3.numpad",
-                    100: "4.numpad",
-                    101: "5.numpad",
-                    102: "6.numpad",
-                    103: "7.numpad",
-                    104: "8.numpad",
-                    105: "9.numpad",
-                    106: "asterisk.numpad",
-                    107: "plus.numpad",
-                    109: "minus.numpad",
-                    108: "enter.numpad",
-                    110: "dot.numpad",
-                    111: "slash.numpad",
-                    112: "f1",
-                    113: "f2",
-                    114: "f3",
-                    115: "f4",
-                    116: "f5",
-                    117: "f6",
-                    118: "f7",
-                    119: "f8",
-                    120: "f9",
-                    121: "f10",
-                    122: "f11",
-                    123: "f12",
-                    124: "f13",
-                    125: "f14",
-                    126: "f15",
-                    127: "f16",
-                    144: "numlock",
-                    145: "scrolllock",
-                    186: "semicolon",
-                    187: "equal",
-                    188: "comma",
-                    189: "minus",
-                    190: "dot",
-                    191: "slash",
-                    192: "backtick",
-                    219: "openbracket",
-                    220: "backslash",
-                    221: "closebracket",
-                    222: "quote"
+                    0: 'section',
+                    8: 'backspace',
+                    9: 'tab',
+                    12: 'clear',
+                    13: 'enter',
+                    16: 'shift',
+                    17: 'control',
+                    18: 'alt',
+                    20: 'capslock',
+                    27: 'escape',
+                    32: 'space',
+                    33: 'pageup',
+                    34: 'pagedown',
+                    35: 'end',
+                    36: 'home',
+                    37: 'left',
+                    38: 'up',
+                    39: 'right',
+                    40: 'down',
+                    45: 'insert',
+                    46: 'delete',
+                    47: 'help',
+                    48: '0',
+                    49: '1',
+                    50: '2',
+                    51: '3',
+                    52: '4',
+                    53: '5',
+                    54: '6',
+                    55: '7',
+                    56: '8',
+                    57: '9',
+                    65: 'a',
+                    66: 'b',
+                    67: 'c',
+                    68: 'd',
+                    69: 'e',
+                    70: 'f',
+                    71: 'g',
+                    72: 'h',
+                    73: 'i',
+                    74: 'j',
+                    75: 'k',
+                    76: 'l',
+                    77: 'm',
+                    78: 'n',
+                    79: 'o',
+                    80: 'p',
+                    81: 'q',
+                    82: 'r',
+                    83: 's',
+                    84: 't',
+                    85: 'u',
+                    86: 'v',
+                    87: 'w',
+                    88: 'x',
+                    89: 'y',
+                    90: 'z',
+                    91: 'meta.left',
+                    92: 'meta.right',
+                    93: 'select',
+                    96: '0.numpad',
+                    97: '1.numpad',
+                    98: '2.numpad',
+                    99: '3.numpad',
+                    100: '4.numpad',
+                    101: '5.numpad',
+                    102: '6.numpad',
+                    103: '7.numpad',
+                    104: '8.numpad',
+                    105: '9.numpad',
+                    106: 'asterisk.numpad',
+                    107: 'plus.numpad',
+                    109: 'minus.numpad',
+                    108: 'enter.numpad',
+                    110: 'dot.numpad',
+                    111: 'slash.numpad',
+                    112: 'f1',
+                    113: 'f2',
+                    114: 'f3',
+                    115: 'f4',
+                    116: 'f5',
+                    117: 'f6',
+                    118: 'f7',
+                    119: 'f8',
+                    120: 'f9',
+                    121: 'f10',
+                    122: 'f11',
+                    123: 'f12',
+                    124: 'f13',
+                    125: 'f14',
+                    126: 'f15',
+                    127: 'f16',
+                    144: 'numlock',
+                    145: 'scrolllock',
+                    186: 'semicolon',
+                    187: 'equal',
+                    188: 'comma',
+                    189: 'minus',
+                    190: 'dot',
+                    191: 'slash',
+                    192: 'backtick',
+                    219: 'openbracket',
+                    220: 'backslash',
+                    221: 'closebracket',
+                    222: 'quote'
                     // see dojo, for ex.
                 };
             }(),
             modifierNames = {
-                altKey: "alt", // mac: option
-                ctrlKey: "control",
-                // metaKey: "meta", // mac: command
-                shiftKey: "shift"
+                altKey: 'alt', // mac: option
+                ctrlKey: 'control',
+                // metaKey: 'meta', // mac: command
+                shiftKey: 'shift'
             };
 
         $(function() {
@@ -481,14 +481,14 @@ requires
             if ($.browser.mozilla) {
                 $document.keypress(keypress);
                 $document.keydown(function(event) {
-                    var $element = $("input:focus");
+                    var $element = $('input:focus');
                     if ($element.length) {
                         if (
                             (
-                                keyNames[event.keyCode] == "up" &&
+                                keyNames[event.keyCode] == 'up' &&
                                 $element[0].selectionStart + $element[0].selectionEnd == 0
                             ) || (
-                                keyNames[event.keyCode] == "down" &&
+                                keyNames[event.keyCode] == 'down' &&
                                 $element[0].selectionStart == $element.val().length &&
                                 $element[0].selectionEnd == $element.val().length
                             )
@@ -512,25 +512,25 @@ requires
                 }
             });
             // avoid pushing modifier twice
-            Ox.print("keys", keys)
+            Ox.print('keys', keys)
             if (keyNames[event.keyCode] && keys.indexOf(keyNames[event.keyCode]) == -1) {
                 keys.push(keyNames[event.keyCode]);
             }
-            key = keys.join("_");
+            key = keys.join('_');
             if (key.match(/^[\w\d-]$|SPACE/)) {
                 time = Ox.getTime();
                 if (time - bufferTime > bufferTimeout) {
-                    buffer = "";
+                    buffer = '';
                 }
-                buffer += key == "SPACE" ? " " : key;
+                buffer += key == 'SPACE' ? ' ' : key;
                 bufferTime = time;                    
             }
-            Ox.Event.trigger("", "key_" + key);
+            Ox.Event.trigger('', 'key_' + key);
             //return false;
             /*
             $.each(stack, function(i, v) {
                 // fixme: we dont get the return value!
-                ret = Ox.event.trigger(keyboard + Ox.toCamelCase(key) + "." + v);
+                ret = Ox.event.trigger(keyboard + Ox.toCamelCase(key) + '.' + v);
                 return ret;
             });
             */                
@@ -558,8 +558,8 @@ requires
             self = {
                 options: {
                     timeout: 15000,
-                    type: "POST",
-                    url: "api"
+                    type: 'POST',
+                    url: 'api'
                 }
             };
 
@@ -607,21 +607,21 @@ requires
 
                 function callback(data) {
                     delete requests[options.id];
-                    Ox.length(requests) == 0 && Ox.Event.trigger("requestStop"); 
+                    Ox.length(requests) == 0 && Ox.Event.trigger('', 'requestStop'); 
                     options.callback(data);
                 }
 
                 function debug(request) {
-                    var $iframe = $("<iframe>")
+                    var $iframe = $('<iframe>')
                             .css({ // fixme: should go into a class
                                 width: 768,
                                 height: 384
                             }),
                         $dialog = new Ox.Dialog({
-                                title: "Application Error",
+                                title: 'Application Error',
                                 buttons: [
                                     {
-                                        value: "Close",
+                                        title: 'Close',
                                         click: function() {
                                             $dialog.close();
                                         }
@@ -658,10 +658,10 @@ requires
                         callback(data);
                     } else {
                         var $dialog = new Ox.Dialog({
-                                title: "Application Error",
+                                title: 'Application Error',
                                 buttons: [
                                     {
-                                        value: "Details",
+                                        title: 'Details',
                                         click: function() {
                                             $dialog.close(function() {
                                                 debug(request);                                                
@@ -669,7 +669,7 @@ requires
                                         }
                                     },
                                     {
-                                        value: "Close",
+                                        title: 'Close',
                                         click: function() {
                                             $dialog.close(function() {
                                                 callback(data);
@@ -680,7 +680,7 @@ requires
                                 width: 400,
                                 height: 200
                             })
-                            .append("Sorry, we have encountered an application error while handling your request. To help us find out what went wrong, you may want to report this error to an administrator. Otherwise, please try again later.")
+                            .append('Sorry, we have encountered an application error while handling your request. To help us find out what went wrong, you may want to report this error to an administrator. Otherwise, please try again later.')
                             .open();
                             // fixme: change this to Send / Don't Send
                         Ox.print({
@@ -718,15 +718,15 @@ requires
                         pending[options.id] = true;
                         $.ajax({
                             data: options.data,
-                            dataType: "json",
+                            dataType: 'json',
                             error: error,
                             success: success,
                             timeout: options.timeout,
                             type: options.type,
                             url: options.url
                         });
-                        Ox.print("request", options.data);
-                        Ox.length(requests) == 1 && Ox.Event.trigger("requestStart");
+                        Ox.print('request', options.data, Ox.length(requests));
+                        Ox.length(requests) == 1 && Ox.Event.trigger('', 'requestStart');
                     }
                 }
 
@@ -764,12 +764,12 @@ requires
     // 0, 1, 2, etc, so that append would append 0, and appendTo
     // would append (length - 1)?
     Ox.Container = function(options, self) {
-        var that = new Ox.Element("div", self)
+        var that = new Ox.Element('div', self)
             .options(options || {})
-            .addClass("OxContainer");
-        that.$content = new Ox.Element("div", self)
+            .addClass('OxContainer');
+        that.$content = new Ox.Element('div', self)
             .options(options || {})
-            .addClass("OxContent")
+            .addClass('OxContent')
             .appendTo(that);
         return that;
     };
@@ -793,15 +793,15 @@ requires
 
             // init
             (function() {
-                // allow for Ox.Widget("tagname", self)
-                if (typeof options == "string") {
+                // allow for Ox.Widget('tagname', self)
+                if (typeof options == 'string') {
                     options = {
                         element: options
                     };
                 }
                 that.ox = Ox.version;
                 that.id = Ox.uid();
-                that.$element = $("<" + (options.element || "div") + "/>", {
+                that.$element = $('<' + (options.element || 'div') + '/>', {
                     data: {
                         ox: that.id
                     }
@@ -819,7 +819,7 @@ requires
                             id, ret;
                         $.each(args, function(i, arg) {
                             if (Ox.isUndefined(arg)) {
-                                Ox.print("fn", fn, "undefined argument")
+                                Ox.print('fn', fn, 'undefined argument')
                             }
                             // if an ox object was passed
                             // then pass its $element instead
@@ -829,7 +829,7 @@ requires
                             }
                             /*
                             if (arg.ox) { // fixme: or is this too much magic?
-                                if (fn == "appendTo" && arg.$content) {
+                                if (fn == 'appendTo' && arg.$content) {
                                     args[i] = arg.$content
                                 } else {
                                     args[i] = arg.$element;
@@ -838,7 +838,7 @@ requires
                             */
                         });
                         /*
-                        if (fn == "html" && that.$content) { // fixme: or is this too much magic?
+                        if (fn == 'html' && that.$content) { // fixme: or is this too much magic?
                             $element = that.$content;
                         } else {
                             $element = that.$element;
@@ -857,13 +857,13 @@ requires
                         } else if (length == 4) {
                             ret = that.$element[fn](args[0], args[1], args[2], args[3]);
                         }
-                        if (fn == "data") {
-                            // Ox.print("data ret", ret, $(ret))
+                        if (fn == 'data') {
+                            // Ox.print('data ret', ret, $(ret))
                         }
                         // if the $element of an ox object was returned
                         // then return the ox object instead
                         // so we can do oxObj.jqFn().oxFn()
-                        return ret.jquery && $elements[id = ret.data("ox")] ?
+                        return ret.jquery && $elements[id = ret.data('ox')] ?
                                 $elements[id] : ret;
                     }
                 });
@@ -934,8 +934,8 @@ requires
             that.options = function() { // fixme: use Ox.getset
                 /*
                     that.options()                  returns self.options
-                    that.options("foo")             returns self.options.foo
-                    that.options("foo", x)          sets self.options.foo,
+                    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,
@@ -947,7 +947,7 @@ requires
                 if (length == 0) {
                     // options()
                     ret = self.options || options; // this is silly. make sure self.options get populated with options
-                } else if (length == 1 && typeof arguments[0] == "string") {
+                } else if (length == 1 && typeof arguments[0] == 'string') {
                     // options(str)
                     ret = self.options ? self.options[arguments[0]] : options[arguments[0]];
                 } else {
@@ -961,17 +961,17 @@ requires
                     // otherwise, extend options
                     self.options = $.extend(self.options || self.defaults, args);
                     $.each(args, function(key, value) {
-                        key == "id" && id && Ox.Event.changeId(id, value);
+                        key == 'id' && id && Ox.Event.changeId(id, value);
                         self.onChange(key, value);
                         /*
                         fixme: why does this not work?
-                        Ox.print("options", options, key, value)
+                        Ox.print('options', options, key, value)
                         //Ox.print(!options, !options || !options[key], !options || !options[key] || options[key] !== value)
                         if (!options || !options[key] || options[key] !== value) {
-                            Ox.print("onChange...")
+                            Ox.print('onChange...')
                             self.onChange(key, value);
                         } else {
-                            Ox.print("NO CHANGE");
+                            Ox.print('NO CHANGE');
                         }
                         */
                     });
@@ -1044,12 +1044,12 @@ requires
         that.opt = {};
         that.ox = Ox.version;
         that.id = Ox.uid();
-        //Ox.print("that.id", that.id)
-        that.$element = $("<" + (element || "div") + "/>")
-            //.addClass("OxElement")
-            .data("ox", that.id);
+        //Ox.print('that.id', that.id)
+        that.$element = $('<' + (element || 'div') + '/>')
+            //.addClass('OxElement')
+            .data('ox', that.id);
         oxui.elements[that.id] = that;
-        // Ox.print("oxui.elements", oxui.elements)
+        // Ox.print('oxui.elements', oxui.elements)
         //function setOption() {};
         that.setOption = function() {};
         /*
@@ -1076,10 +1076,10 @@ requires
                 ret;
             if (length == 0) {
                 ret = that.def
-            } else if (length == 1 && typeof arguments[0] == "string") {
+            } else if (length == 1 && typeof arguments[0] == 'string') {
                 ret = that.def[arguments[0]];
             } else {
-                // translate ("key", "value") to {"key": "value"}
+                // translate ('key', 'value') to {'key': 'value'}
                 that.def = $.extend(
                     that.def, Ox.makeObject.apply(that, arguments)
                 );
@@ -1091,9 +1091,9 @@ requires
         /*
         Ox.Element.options()
             get options
-        Ox.Element.options("foo")
+        Ox.Element.options('foo')
             get options.foo
-        Ox.Element.options("foo", 0)
+        Ox.Element.options('foo', 0)
             set options.foo
         Ox.Element.options({foo: 0, bar: 1})
             set options.foo and options.bar
@@ -1103,23 +1103,23 @@ requires
             var length = arguments.length,
                 args, ret;
             if (length == 0) {
-                //Ox.print("getting all options", options);
+                //Ox.print('getting all options', options);
                 ret = that.opt;
-            } else if (length == 1 && typeof arguments[0] == "string") {
-                //Ox.print("getting one option", options, arguments[0], options[arguments[0]]);
+            } else if (length == 1 && typeof arguments[0] == 'string') {
+                //Ox.print('getting one option', options, arguments[0], options[arguments[0]]);
                 ret = that.opt[arguments[0]];
             } else {
-                // translate ("key", "value") to {"key": "value"}
+                // translate ('key', 'value') to {'key': 'value'}
                 args = Ox.makeObject.apply(that, arguments);
                 // if options have been set then extend options,
                 // otherwise extend defaults
                 that.opt = $.extend(Ox.length(that.opt) ?
                     that.opt : that.def, args);
-                // that.trigger("OxElement" + that.id + "SetOptions", args);
+                // that.trigger('OxElement' + that.id + 'SetOptions', args);
                 $.each(args, function(k, v) {
                     that.setOption(k, v);
-                    //Ox.print("triggering", "OxElement" + that.id + "SetOption", {k: v})
-                    //that.trigger("OxElement" + that.id + "SetOption", {k: v});
+                    //Ox.print('triggering', 'OxElement' + that.id + 'SetOption', {k: v})
+                    //that.trigger('OxElement' + that.id + 'SetOption', {k: v});
                 })
                 ret = that;
             }
@@ -1151,7 +1151,7 @@ requires
                         args[i] = v.$element;
                     }
                 });
-                if (v == "html" && that.$content) {
+                if (v == 'html' && that.$content) {
                     $element = that.$content;
                 } else {
                     $element = that.$element;
@@ -1175,11 +1175,11 @@ requires
                 // if the $element of an oxui object was returned
                 // then return the oxui object instead
                 // so we can do oxObj.jqFn().oxFn()
-                //Ox.print("v", v, "arguments", arguments)
+                //Ox.print('v', v, 'arguments', arguments)
                 if (ret.jquery) {
-                    //Ox.print("ret", ret, "ret.data('id')", ret.data("ox"))
+                    //Ox.print('ret', ret, 'ret.data('id')', ret.data('ox'))
                 }
-                return ret.jquery && oxui.elements[id = ret.data("ox")] ?
+                return ret.jquery && oxui.elements[id = ret.data('ox')] ?
                     oxui.elements[id] : ret;
             }
         });
@@ -1195,7 +1195,7 @@ requires
     Ox.Window = function(options, self) {
 
         self = self || {},
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
                     draggable: true,
                     fullscreenable: true, // fixme: silly name
@@ -1250,18 +1250,18 @@ requires
     ----------------------------------------------------------------------------
     Ox.theme()
         get theme
-    Ox.theme("foo")
-        set theme to "foo"
+    Ox.theme('foo')
+        set theme to 'foo'
     ----------------------------------------------------------------------------
     */
 
     Ox.theme = function() {
         var length = arguments.length,
-            classes = $body.attr("class").split(" "),
+            classes = $body.attr('class').split(' '),
             arg, theme;
         $.each(classes, function(i, v) {
-            if (Ox.startsWith(v, "OxTheme")) {
-                theme = v.replace("OxTheme", "").toLowerCase();
+            if (Ox.startsWith(v, 'OxTheme')) {
+                theme = v.replace('OxTheme', '').toLowerCase();
                 if (length == 1) {
                     $body.removeClass(v);
                 }
@@ -1270,21 +1270,21 @@ requires
         });
         if (length == 1) {
             arg = arguments[0]
-            $body.addClass("OxTheme" + Ox.toTitleCase(arg));
+            $body.addClass('OxTheme' + Ox.toTitleCase(arg));
             if (theme) {
-                $("input[type=image]").each(function() {
+                $('input[type=image]').each(function() {
                     var $this = $(this);
                     $this.attr({
-                        src: $this.attr("src").replace(
-                            "/ox.ui." + theme + "/", "/ox.ui." + arg + "/"
+                        src: $this.attr('src').replace(
+                            '/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/'
                         )
                     });
                 });
-                $(".OxLoadingIcon").each(function() {
+                $('.OxLoadingIcon').each(function() {
                     var $this = $(this);
                     $this.attr({
-                        src: $this.attr("src").replace(
-                            "/ox.ui." + theme + "/", "/ox.ui." + arg + "/"
+                        src: $this.attr('src').replace(
+                            '/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/'
                         )
                     });
                 })
@@ -1303,16 +1303,16 @@ requires
         var self = self || {},
             that = new Ox.Element({}, self)
                 .defaults({
-                    orientation: "horizontal",
-                    size: "medium"                  // can be int
+                    orientation: 'horizontal',
+                    size: 'medium'                  // can be int
                 })
                 .options(options || {})
-                .addClass("OxBar Ox" + Ox.toTitleCase(self.options.orientation)),
+                .addClass('OxBar Ox' + Ox.toTitleCase(self.options.orientation)),
             dimensions = oxui.getDimensions(self.options.orientation);
         self.options.size = Ox.isString(self.options.size) ?
                 oxui.getBarSize(self.options.size) : self.options.size;
-        that.css(dimensions[0], "100%")
-            .css(dimensions[1], self.options.size + "px");
+        that.css(dimensions[0], '100%')
+            .css(dimensions[1], self.options.size + 'px');
         return that;
     };
 
@@ -1329,39 +1329,39 @@ requires
                 .defaults({
                     collapsed: false,
                     collapsible: true,
-                    edge: "left",
+                    edge: 'left',
                     elements: [],
-                    orientation: "horizontal",
+                    orientation: 'horizontal',
                     parent: null,
                     resizable: true,
                     resize: [],
                     size: 0
                 })
                 .options(options || {}) // fixme: options function should be able to handle undefined, no need for || {}
-                .addClass("OxResizebar Ox" + Ox.toTitleCase(self.options.orientation))
+                .addClass('OxResizebar Ox' + Ox.toTitleCase(self.options.orientation))
                 /*
                 .attr({
-                    draggable: "true"
+                    draggable: 'true'
                 })
-                .bind("dragstart", function(e) {
-                    // e.originalEvent.dataTransfer.setDragImage($("<div>")[0], 0, 0);
+                .bind('dragstart', function(e) {
+                    // e.originalEvent.dataTransfer.setDragImage($('<div>')[0], 0, 0);
                 })
-                .bind("drag", function(e) {
-                    Ox.print("dragging", e)
+                .bind('drag', function(e) {
+                    Ox.print('dragging', e)
                 })
                 */
                 .mousedown(dragStart)
                 .dblclick(toggle)
-                .append($("<div>").addClass("OxSpace"))
-                .append($("<div>").addClass("OxLine"))
-                .append($("<div>").addClass("OxSpace"));
+                .append($('<div>').addClass('OxSpace'))
+                .append($('<div>').addClass('OxLine'))
+                .append($('<div>').addClass('OxSpace'));
 
         $.extend(self, {
-            clientXY: self.options.orientation == "horizontal" ? "clientY" : "clientX",
+            clientXY: self.options.orientation == 'horizontal' ? 'clientY' : 'clientX',
             dimensions: oxui.getDimensions(self.options.orientation), // fixme: should orientation be the opposite orientation here?
             edges: oxui.getEdges(self.options.orientation),
             ids: $.map(self.options.elements, function(v, i) {
-                return v.options("id");
+                return v.options('id');
             }),
             length: self.options.resize.length,
             startPos: 0,
@@ -1371,34 +1371,34 @@ requires
         function drag(e) {
             var d = e[self.clientXY] - self.startPos, i;
             self.options.size = Ox.limit(self.startSize + d, self.options.resize[0], self.options.resize[self.length - 1]);
-            Ox.print("sS", self.startSize, "d", d, "s.o.s", self.options.size)
+            Ox.print('sS', self.startSize, 'd', d, 's.o.s', self.options.size)
             $.each(self.options.resize, function(i, v) {
                 if (self.options.size > v - 8 && self.options.size < v + 8) {
                     self.options.size = v;
                     return false;
                 }
             });
-            that.css(self.edges[2], self.options.size + "px");
-            self.options.elements[0].css(self.dimensions[1], self.options.size + "px");
-            self.options.elements[1].css(self.edges[2], (self.options.size + 1) + "px");
-            Ox.Event.trigger(self.ids[0], "resize", self.options.size);
-            Ox.Event.trigger(self.ids[1], "resize", self.options.elements[1][self.dimensions[1]]());
+            that.css(self.edges[2], self.options.size + 'px');
+            self.options.elements[0].css(self.dimensions[1], self.options.size + 'px');
+            self.options.elements[1].css(self.edges[2], (self.options.size + 1) + 'px');
+            Ox.Event.trigger(self.ids[0], 'resize', self.options.size);
+            Ox.Event.trigger(self.ids[1], 'resize', self.options.elements[1][self.dimensions[1]]());
         }
 
         function dragStart(e) {
             self.startPos = e[self.clientXY];
             self.startSize = self.options.size;
-            Ox.print("startSize", self.startSize)
+            Ox.print('startSize', self.startSize)
             $window.mousemove(drag);
-            $window.one("mouseup", dragStop);
+            $window.one('mouseup', dragStop);
         }
 
         function dragStop() {
-            $window.unbind("mousemove");
+            $window.unbind('mousemove');
         }
 
         function toggle() {
-            Ox.print("toggle");
+            Ox.print('toggle');
             if (Ox.isUndefined(self.options.position)) {
                 self.options.position = parseInt(self.options.parent.css(self.options.edge)) +
                         (self.options.collapsed  ? self.options.size : 0);
@@ -1406,11 +1406,11 @@ requires
             var size = self.options.position -
                         (self.options.collapsed ? 0 : self.options.size),
                 animate = {};
-            Ox.print("s.o.e", self.options.edge);
+            Ox.print('s.o.e', self.options.edge);
             animate[self.options.edge] = size;
             self.options.parent.animate(animate, 200, function() {
-                var i = (self.options.edge == "left" || self.options.edge == "top") ? 1 : 0;
-                Ox.Event.trigger("resize_" + self.ids[i], self.options.elements[i][self.dimensions[1]]());
+                var i = (self.options.edge == 'left' || self.options.edge == 'top') ? 1 : 0;
+                Ox.Event.trigger(self.ids[i], 'resize', self.options.elements[i][self.dimensions[1]]());
                 self.options.collapsed = !self.options.collapsed;
             });
         }
@@ -1436,15 +1436,15 @@ requires
                     tabs: []
                 })
                 .options(options || {})
-                .addClass("OxTabbar");
+                .addClass('OxTabbar');
 
         Ox.ButtonGroup({
             buttons: self.options.tabs,
             group: true,
             selectable: true,
             selected: self.options.selected,
-            size: "medium",
-            style: "tab",
+            size: 'medium',
+            style: 'tab',
         }).appendTo(that);
 
         return that;
@@ -1471,9 +1471,9 @@ requires
         // fixme: dialog should be derived from a generic draggable
         // fixme: pass button elements directly
         var self = self || {},
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
-                    title: "",
+                    title: '',
                     buttons: [],
                     height: 216,
                     minHeight: 144,
@@ -1482,47 +1482,47 @@ requires
                     width: 384
                 })
                 .options(options || {})
-                .addClass("OxDialog");
+                .addClass('OxDialog');
 
         if (!Ox.isArray(self.options.buttons[0])) {
             self.options.buttons = [[], self.options.buttons];
         }
 
         that.$titlebar = new Ox.Bar({
-                size: "medium"
+                size: 'medium'
             })
-            .addClass("OxTitleBar")
+            .addClass('OxTitleBar')
             .mousedown(drag)
             .dblclick(center)
             .appendTo(that);
         that.$title = new Ox.Element()
-            .addClass("OxTitle")
+            .addClass('OxTitle')
             .html(self.options.title)
             .appendTo(that.$titlebar);
         // fixme: should the following be a container?
         that.$content = new Ox.Element()
-            .addClass("OxContent")
+            .addClass('OxContent')
             .css({
-                padding: self.options.padding + "px",
-                overflow: "auto"
+                padding: self.options.padding + 'px',
+                overflow: 'auto'
             })
             .appendTo(that);
         that.$buttonsbar = new Ox.Bar({})
-            .addClass("OxButtonsBar")
+            .addClass('OxButtonsBar')
             .appendTo(that);
         that.$buttons = [];
         $.each(self.options.buttons[0], function(i, button) {
             that.$buttons[i] = new Ox.Button({
                     disabled: button.disabled || false,
-                    size: "medium",
+                    size: 'medium',
                     title: button.title
                 })
-                .addClass("OxLeft")
+                .addClass('OxLeft')
                 .click(button.click) // fixme: rather use event?
                 .appendTo(that.$buttonsbar);
         });
         that.$resize = new Ox.Element()
-            .addClass("OxResize")
+            .addClass('OxResize')
             .mousedown(resize)
             .dblclick(reset)
             .appendTo(that.$buttonsbar);
@@ -1530,16 +1530,16 @@ requires
             that.$buttons[that.$buttons.length] = new Ox.Button({
                     disabled: button.disabled || false,
                     id: button.id,
-                    size: "medium",
+                    size: 'medium',
                     title: button.title
                 })
-                .addClass("OxRight")
+                .addClass('OxRight')
                 .click(button.click) // fixme: rather use event?
                 .appendTo(that.$buttonsbar);
         });
         that.$buttons[0].focus();
         that.$layer = new Ox.Element() // fixme: Layer widget, that would handle click?
-            .addClass("OxLayer")
+            .addClass('OxLayer')
             .mousedown(mousedownLayer)
             .mouseup(mouseupLayer);
 
@@ -1547,10 +1547,10 @@ requires
             var documentHeight = $document.height();
             that.css({
                 left: 0,
-                top: Math.max(parseInt(-documentHeight / 10), self.options.height - documentHeight + 40) + "px",
+                top: Math.max(parseInt(-documentHeight / 10), self.options.height - documentHeight + 40) + 'px',
                 right: 0,
                 bottom: 0,
-                margin: "auto"
+                margin: 'auto'
             });
         }
 
@@ -1576,19 +1576,19 @@ requires
                         //24, documentHeight - elementHeight
                     );
                 that.css({
-                    left: left + "px",
-                    top: top + "px"
+                    left: left + 'px',
+                    top: top + 'px'
                 });
             });
-            $window.one("mouseup", function() {
-                $window.unbind("mousemove");
+            $window.one('mouseup', function() {
+                $window.unbind('mousemove');
             });            
         }
 
         function getButtonById(id) {
             var ret = null
             $.each(that.$buttons, function(i, button) {
-                if (button.options("id") == id) {
+                if (button.options('id') == id) {
                     ret = button;
                     return false;
                 }
@@ -1643,19 +1643,19 @@ requires
                 that.height(height);
                 that.$content.height(height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
             });
-            $window.one("mouseup", function() {
-                $window.unbind("mousemove");
+            $window.one('mouseup', function() {
+                $window.unbind('mousemove');
             });            
         }
 
         self.onChange = function(key, value) {
-            if (key == "height" || key == "width") {
+            if (key == 'height' || key == 'width') {
                 that.animate({
-                    height: self.options.height + "px",
-                    width: self.options.width + "px"
+                    height: self.options.height + 'px',
+                    width: self.options.width + 'px'
                 }, 250);
                 that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
-            } else if (key == "title") {
+            } else if (key == 'title') {
                 that.$title.animate({
                     opacity: 0
                 }, 250, function() {
@@ -1680,13 +1680,13 @@ requires
                 that.$layer.remove();
                 callback();
             });
-            $window.unbind("mouseup", mouseupLayer)
+            $window.unbind('mouseup', mouseupLayer)
             return that;
         }
 
         that.disable = function() {
             // to be used on submit of form, like login
-            that.$layer.addClass("OxFront");
+            that.$layer.addClass('OxFront');
             return that;
         };
 
@@ -1697,7 +1697,7 @@ requires
         };
 
         that.enable = function() {
-            that.$layer.removeClass("OxFront");
+            that.$layer.removeClass('OxFront');
             return that;
         };
 
@@ -1716,7 +1716,7 @@ requires
             }).appendTo($body).animate({
                 opacity: 1
             }, 200);
-            $window.bind("mouseup", mouseupLayer)
+            $window.bind('mouseup', mouseupLayer)
             return that;
         };
 
@@ -1758,10 +1758,10 @@ requires
     Ox.Form = function(options, self) {
 
         var self = self || {},
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
-                    error: "",
-                    id: "",
+                    error: '',
+                    id: '',
                     items: [],
                     submit: null
                 })
@@ -1777,27 +1777,27 @@ requires
 
         // fixme: form isn't necessarily empty/invalid
         $.map(self.options.items, function(item, i) {
-            self.itemIds[i] = item.id || item.element.options("id");
+            self.itemIds[i] = item.id || item.element.options('id');
             self.itemIsValid[i] = false;
         });
 
         $.each(self.options.items, function(i, item) {
-            var id = item.element.options("id");
+            var id = item.element.options('id');
             that.append(self.$items[i] = new Ox.FormItem(item))
-                .append(self.$messages[i] = new Ox.Element().addClass("OxFormMessage"));
+                .append(self.$messages[i] = new Ox.Element().addClass('OxFormMessage'));
             // fixme: use widget.bindEvent()
-            Ox.Event.bind(id, "validate", function(event, data) {
+            Ox.Event.bind(id, 'validate', function(event, data) {
                 validate(i, data.valid);
             });
-            Ox.Event.bind(id, "blur", function(event, data) {
+            Ox.Event.bind(id, 'blur', function(event, data) {
                 validate(i, data.valid);
                 if (data.valid) {
-                    self.$messages[i].html("").hide();
+                    self.$messages[i].html('').hide();
                 } else {
                     self.$messages[i].html(data.message).show();
                 }
             });
-            Ox.Event.bind(id, "submit", function(event, data) {
+            Ox.Event.bind(id, 'submit', function(event, data) {
                 self.formIsValid && that.submit();
             });
         });
@@ -1807,7 +1807,7 @@ requires
         }
 
         function setMessage(id, message) {
-            self.$messages[getItemPositionById(id)].html(message)[message !== "" ? "show" : "hide"]();
+            self.$messages[getItemPositionById(id)].html(message)[message !== '' ? 'show' : 'hide']();
         }
 
         function submitCallback(data) {
@@ -1817,11 +1817,11 @@ requires
         }
 
         function validate(pos, valid) {
-            Ox.print("validate", pos, valid)
+            Ox.print('validate', pos, valid)
             self.itemIsValid[pos] = valid;
             if (Ox.every(self.itemIsValid) != self.formIsValid) {
                 self.formIsValid = !self.formIsValid;
-                that.triggerEvent("validate", {
+                that.triggerEvent('validate', {
                     valid: self.formIsValid
                 });
             }
@@ -1853,13 +1853,13 @@ requires
     Ox.FormItem = function(options, self) {
 
         var self = self || {},
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
                     element: null,
-                    error: "",
+                    error: '',
                 })
                 .options(options || {})
-                .addClass("OxFormItem")
+                .addClass('OxFormItem')
                 .append(self.options.element);
 
         that.value = function() {
@@ -1884,45 +1884,45 @@ requires
             select      selectable button was selected
         */
         var self = self || {},
-            that = new Ox.Element("input", self)
+            that = new Ox.Element('input', self)
                 .defaults({
                     disabled: false,
                     group: false,
-                    id: "",
-                    overlap: "none",
+                    id: '',
+                    overlap: 'none',
                     selectable: false,
                     selected: false,
-                    size: "medium",
-                    // fixme: "default" or ""?
-                    style: "default", // can be default, checkbox, symbol, or tab
-                    title: "",
-                    tooltip: "",
-                    type: "text",
-                    width: "auto"
+                    size: 'medium',
+                    // fixme: 'default' or ''?
+                    style: 'default', // can be default, checkbox, symbol, or tab
+                    title: '',
+                    tooltip: '',
+                    type: 'text',
+                    width: 'auto'
                 })
                 .options(options || {})
                 .attr({
-                    disabled: self.options.disabled ? "disabled" : "",
-                    type: self.options.type == "text" ? "button" : "image"
+                    disabled: self.options.disabled ? 'disabled' : '',
+                    type: self.options.type == 'text' ? 'button' : 'image'
                 })
-                .addClass("OxButton Ox" + Ox.toTitleCase(self.options.size) +
-                    (self.options.disabled ? " OxDisabled": "") +
-                    (self.options.selected ? " OxSelected": "") +
-                    (self.options.style != "default" ? " Ox" + Ox.toTitleCase(self.options.style) : "") +
-                    (self.options.overlap != "none" ? " OxOverlap" + Ox.toTitleCase(self.options.overlap) : ""))
-                .css(self.options.width == "auto" ? {} : {
-                    width: (self.options.width - 14) + "px"
+                .addClass('OxButton Ox' + Ox.toTitleCase(self.options.size) +
+                    (self.options.disabled ? ' OxDisabled': '') +
+                    (self.options.selected ? ' OxSelected': '') +
+                    (self.options.style != 'default' ? ' Ox' + Ox.toTitleCase(self.options.style) : '') +
+                    (self.options.overlap != 'none' ? ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : ''))
+                .css(self.options.width == 'auto' ? {} : {
+                    width: (self.options.width - 14) + 'px'
                 })
                 .mousedown(mousedown)
                 .click(click);
 
         $.extend(self, Ox.isArray(self.options.title) ? {
-            selectedTitle: Ox.setPropertyOnce(self.options.title, "selected"),
+            selectedTitle: Ox.setPropertyOnce(self.options.title, 'selected'),
             titles: self.options.title
         } : {
             selectedTitle: 0,
             titles: [{
-                id: "",
+                id: '',
                 title: self.options.title
             }]
         });
@@ -1941,10 +1941,10 @@ requires
         function click() {
             var data = self.titles[self.selectedTitle];
             if (!self.options.selectable) {
-                that.triggerEvent("click", data);
+                that.triggerEvent('click', data);
             } else {
                 if (self.options.group) {
-                    that.triggerEvent("select", data);
+                    that.triggerEvent('select', data);
                 } else {
                     that.toggleSelected();
                 }
@@ -1955,7 +1955,7 @@ requires
         }
 
         function mousedown(event) {
-            if (self.options.type == "image" && $.browser.safari) {
+            if (self.options.type == 'image' && $.browser.safari) {
                 // keep image from being draggable
                 event.preventDefault();
             }
@@ -1971,10 +1971,10 @@ requires
 
         function setTitle(title) {
             self.title = title;
-            if (self.options.type == "image") {
+            if (self.options.type == 'image') {
                 that.attr({
-                    src: oxui.path + "png/ox.ui." + Ox.theme() +
-                        "/symbol" + Ox.toTitleCase(title) + ".png"
+                    src: oxui.path + 'png/ox.ui.' + Ox.theme() +
+                        '/symbol' + Ox.toTitleCase(title) + '.png'
                 });
             } else {
                 that.val(title);
@@ -1982,21 +1982,21 @@ requires
         }
 
         self.onChange = function(key, value) {
-            if (key == "disabled") {
+            if (key == 'disabled') {
                 that.attr({
-                        disabled: value ? "disabled" : ""
+                        disabled: value ? 'disabled' : ''
                     })
-                    .toggleClass("OxDisabled");
-            } else if (key == "selected") {
-                if (value != that.hasClass("OxSelected")) { // fixme: neccessary?
-                    that.toggleClass("OxSelected");
+                    .toggleClass('OxDisabled');
+            } else if (key == 'selected') {
+                if (value != that.hasClass('OxSelected')) { // fixme: neccessary?
+                    that.toggleClass('OxSelected');
                 }
-                that.triggerEvent("change");
-            } else if (key == "title") {
+                that.triggerEvent('change');
+            } else if (key == 'title') {
                 setTitle(value);
-            } else if (key == "width") {
+            } else if (key == 'width') {
                 that.$element.css({
-                    width: (value - 14) + "px"
+                    width: (value - 14) + 'px'
                 });
             }
         }
@@ -2016,7 +2016,7 @@ requires
         that.toggleTitle = function() {
             self.selectedTitle = 1 - self.selectedTitle;
             setTitle(self.titles[self.selectedTitle].title);
-            self.$tooltip.options({
+            self.$tooltip && self.$tooltip.options({
                 title: self.tooltips[self.selectedTitle]
             });
         }
@@ -2034,7 +2034,7 @@ requires
             max         integer, maximum number of selected buttons, 0 for all
             min         integer, minimum number of selected buttons, 0 for none
             selectable  if true, buttons are selectable
-            type        string, "image" or "text"
+            type        string, 'image' or 'text'
         events:
             change  {id, value}     selection within a group changed
         */
@@ -2046,19 +2046,19 @@ requires
                     max: 1,
                     min: 1,
                     selectable: false,
-                    size: "medium",
-                    style: "",
-                    type: "text",
+                    size: 'medium',
+                    style: '',
+                    type: 'text',
                 })
                 .options(options || {})
-                .addClass("OxButtonGroup");
+                .addClass('OxButtonGroup');
 
         if (self.options.selectable) {
             self.optionGroup = new Ox.OptionGroup(
                 self.options.buttons,
                 self.options.min,
                 self.options.max,
-                "selected"
+                'selected'
             );
             self.options.buttons = self.optionGroup.init();
         }
@@ -2077,7 +2077,7 @@ requires
                     title: button.title,
                     type: self.options.type
                 })
-                .bindEvent("select", function() {
+                .bindEvent('select', function() {
                     selectButton(position);
                 })
                 .appendTo(that);
@@ -2089,7 +2089,7 @@ requires
                 $.each(toggled, function(i, pos) {
                     self.$buttons[pos].toggleSelected();
                 });
-                that.triggerEvent("change", {
+                that.triggerEvent('change', {
                     selected: $.map(self.optionGroup.selected(), function(v, i) {
                         return self.options.buttons[v].id;
                     })
@@ -2122,34 +2122,34 @@ requires
         ***/
 
         var self = self || {},
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
                     disabled: false,
-                    id: "",
+                    id: '',
                     group: false,
                     checked: false,
-                    title: "",
-                    width: "auto"
+                    title: '',
+                    width: 'auto'
                 })
                 .options(options || {})
-                .addClass("OxCheckbox")
+                .addClass('OxCheckbox')
                 .attr(self.options.disabled ? {
-                    disabled: "disabled"
+                    disabled: 'disabled'
                 } : {});
 
         if (self.options.title) {
-            self.options.width != "auto" && that.css({
-                    width: self.options.width + "px"
+            self.options.width != 'auto' && that.css({
+                    width: self.options.width + 'px'
                 });
             self.$title = new Ox.Label({
                     disabled: self.options.disabled,
-                    id: self.options.id + "Label",
-                    overlap: "left",
+                    id: self.options.id + 'Label',
+                    overlap: 'left',
                     title: self.options.title,
                     width: self.options.width - 16
                 })
                 .css({
-                    float: "right"
+                    float: 'right'
                 })
                 .click(clickTitle)
                 .appendTo(that);
@@ -2157,14 +2157,14 @@ requires
 
         self.$button = new Ox.Button({
                 disabled: self.options.disabled,
-                id: self.options.id + "Button",
+                id: self.options.id + 'Button',
                 title: [
-                    {id: "none", title: "none", selected: !self.options.checked},
-                    {id: "check", title: "check", selected: self.options.checked}
+                    {id: 'none', title: 'none', selected: !self.options.checked},
+                    {id: 'check', title: 'check', selected: self.options.checked}
                 ],
-                type: "image"
+                type: 'image'
             })
-            .addClass("OxCheckbox")
+            .addClass('OxCheckbox')
             .click(clickButton)
             .appendTo(that);
 
@@ -2173,7 +2173,7 @@ requires
             // click will have toggled the button,
             // if it is part of a group, we have to revert that
             self.options.group && that.toggleChecked();
-            that.triggerEvent("change", {
+            that.triggerEvent('change', {
                 checked: self.options.checked,
                 id: self.options.id,
                 title: self.options.title
@@ -2181,11 +2181,11 @@ requires
         }
 
         function clickTitle() {
-            !self.options.disabled && self.$button.trigger("click");
+            !self.options.disabled && self.$button.trigger('click');
         }
 
         self.onChange = function(key, value) {
-            if (key == "checked") {
+            if (key == 'checked') {
                 that.toggleChecked();
             }
         };
@@ -2202,7 +2202,7 @@ requires
     Ox.CheckboxGroup = function(options, self) {
 
         var self = self || {},
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
                     checkboxes: [],
                     max: 1,
@@ -2210,7 +2210,7 @@ requires
                     width: 256
                 })
                 .options(options || {})
-                .addClass("OxCheckboxGroup");
+                .addClass('OxCheckboxGroup');
 
         self.optionGroup = new Ox.OptionGroup(
             self.options.checkboxes,
@@ -2234,7 +2234,7 @@ requires
                     id: id,
                     width: self.checkboxWidth[position]
                 }))
-                .bindEvent("change", function() {
+                .bindEvent('change', function() {
                     change(position);
                 })
                 .appendTo(that);
@@ -2242,12 +2242,12 @@ requires
 
         function change(pos) {
             var toggled = self.optionGroup.toggle(pos);
-            //Ox.print("change", pos, "toggled", toggled)
+            //Ox.print('change', pos, 'toggled', toggled)
             if (toggled.length) {
                 $.each(toggled, function(i, pos) {
                     self.$checkboxes[pos].toggleChecked();
                 });
-                that.triggerEvent("change", {
+                that.triggerEvent('change', {
                     checked: $.map(self.optionGroup.checked(), function(v, i) {
                         return self.options.checkboxes[v].id;
                     })
@@ -2263,7 +2263,7 @@ requires
 
         /*
         options:
-            arrows                      boolearn, if true, and type is "float" or "integer", display arrows
+            arrows                      boolearn, if true, and type is 'float' or 'integer', display arrows
             arrowStep                   number, step when clicking arrows
             autocomplete                array of possible values, or
                                         function(key, value, callback), returns one or more values
@@ -2272,18 +2272,18 @@ requires
             autocompleteSelect          boolean, if true, menu is displayed
             autocompleteSelectHighlight boolean, if true, value in menu is highlighted
             autocompleteSelectSubmit    boolean, if true, submit input on menu selection
-            autovalidate                string ("email", "float", "integer", "phone", "url"), or
+            autovalidate                string ('email', 'float', 'integer', 'phone', 'url'), or
                                         regexp(value), or
                                         function(key, value, blur, callback), returns value
             clear                       boolean, if true, has clear button
             disabled                    boolean, if true, is disabled
-            height                      integer, px (for type="textarea" and type="range" with orientation="horizontal")
+            height                      integer, px (for type='textarea' and type='range' with orientation='horizontal')
             id                          string, element id
             key                         string, to be passed to autocomplete and autovalidate functions
-            max                         number, max value if type is "integer" or "float"
-            min                         number, min value if type is "integer" or "float"
-            name                        string, will be displayed by autovalidate function ("invalid " + name)
-            overlap                     string, "", "left" or "right", will cause padding and negative margin
+            max                         number, max value if type is 'integer' or 'float'
+            min                         number, min value if type is 'integer' or 'float'
+            name                        string, will be displayed by autovalidate function ('invalid ' + name)
+            overlap                     string, '', 'left' or 'right', will cause padding and negative margin
             picker
             //rangeOptions
                 arrows              boolean, if true, display arrows
@@ -2291,7 +2291,7 @@ requires
                 //arrowSymbols        array of two strings
                 max                 number, maximum value
                 min                 number, minimum value
-                orientation         "horizontal" or "vertical"
+                orientation         'horizontal' or 'vertical'
                 step                number, step
                 thumbValue          boolean, if true, value is displayed on thumb, or
                                     array of strings per value, or
@@ -2300,11 +2300,11 @@ requires
                 trackGradient       string, css gradient for track
                 trackImage          string, image url, or
                                     array of image urls
-                //trackStep           number, 0 for "scroll here", positive for step
+                //trackStep           number, 0 for 'scroll here', positive for step
                 trackValues         boolean
             serialize
-            textAlign                   "left", "center" or "right"
-            type                        "float", "integer", "password", "text"
+            textAlign                   'left', 'center' or 'right'
+            type                        'float', 'integer', 'password', 'text'
             value                       string
             width                       integer, px
         methods:
@@ -2314,7 +2314,7 @@ requires
         */
 
         var self = self || {},
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
                     arrows: false,
                     arrowStep: 1,
@@ -2326,22 +2326,22 @@ requires
                     autocompleteSelectSubmit: false,
                     autovalidate: null,
                     clear: false,
-                    key: "",
+                    key: '',
                     min: 0,
                     max: 100,
-                    label: "",
+                    label: '',
                     labelWidth: 64,
-                    overlap: "none",
-                    placeholder: "",
+                    overlap: 'none',
+                    placeholder: '',
                     serialize: null,
-                    textAlign: "left",
-                    type: "text",
-                    value: "",
+                    textAlign: 'left',
+                    type: 'text',
+                    value: '',
                     width: 128
                 })
                 .options(options)
-                .addClass("OxInput OxMedium")
-                .addEvent($.extend(self.options.type == "textarea" ? {} : {
+                .addClass('OxInput OxMedium')
+                .addEvent($.extend(self.options.type == 'textarea' ? {} : {
                     key_enter: submit
                 }, {
                     key_escape: cancel
@@ -2351,35 +2351,35 @@ requires
             Ox.isArray(self.options.autocomplete) &&
             self.options.autocompleteReplace &&
             self.options.autocompleteReplaceCorrect &&
-            self.options.value === ""
+            self.options.value === ''
         ) {
             self.options.value = self.options.autocomplete[0]
         }
 
         // fixme: set to min, not 0
-        if (self.options.type == "float") {
+        if (self.options.type == 'float') {
             $.extend(self.options, {
-                autovalidate: "float",
-                textAlign: "right",
-                value: self.options.value || "0.0"
+                autovalidate: 'float',
+                textAlign: 'right',
+                value: self.options.value || '0.0'
             });
-        } else if (self.options.type == "integer") {
+        } else if (self.options.type == 'integer') {
             $.extend(self.options, {
-                autovalidate: "integer",
-                textAlign: "right",
-                value: self.options.value || "0"
+                autovalidate: 'integer',
+                textAlign: 'right',
+                value: self.options.value || '0'
             });
         }
 
         if (self.options.label) {
             self.$label = new Ox.Label({
-                overlap: "right",
-                textAlign: "right",
+                overlap: 'right',
+                textAlign: 'right',
                 title: self.options.label,
                 width: self.options.labelWidth
             })
             .css({
-                float: "left", // fixme: use css rule
+                float: 'left', // fixme: use css rule
             })
             .click(function() {
                 that.focus();
@@ -2391,24 +2391,24 @@ requires
             self.arrows = [];
             self.arrows[0] = [
                 new Ox.Button({
-                        overlap: "right",
-                        title: "previous",
-                        type: "image"
+                        overlap: 'right',
+                        title: 'previous',
+                        type: 'image'
                     })
                     .css({
-                        float: "left"
+                        float: 'left'
                     })
                     .click(function() {
                         clickArrow(0);
                     })
                     .appendTo(that),
                 new Ox.Button({
-                        overlap: "left",
-                        title: "next",
-                        type: "image"
+                        overlap: 'left',
+                        title: 'next',
+                        type: 'image'
                     })
                     .css({
-                        float: "right"
+                        float: 'right'
                     })
                     .click(function() {
                         clickArrow(1);
@@ -2419,31 +2419,31 @@ requires
 
         $.extend(self, {
             bindKeyboard: self.options.autocomplete || self.options.autovalidate,
-            hasPasswordPlaceholder: self.options.type == "password" && self.options.placeholder,
+            hasPasswordPlaceholder: self.options.type == 'password' && self.options.placeholder,
             inputWidth: getInputWidth()
         });
 
         if (self.options.clear) {
             self.$button = new Ox.Button({
-                    overlap: "left",
-                    title: "clear",
-                    type: "image"
+                    overlap: 'left',
+                    title: 'clear',
+                    type: 'image'
                 })
                 .css({
-                    float: "right" // fixme: use css rule
+                    float: 'right' // fixme: use css rule
                 })
                 .click(clear)
                 .appendTo(that);
         }
 
-        self.$input = $("<input>")
-            .addClass("OxInput OxMedium")
+        self.$input = $('<input>')
+            .addClass('OxInput OxMedium')
             .attr({
-                disabled: self.options.disabled ? "disabled" : "",
-                type: self.options.type == "password" ? "password" : "text"
+                disabled: self.options.disabled ? 'disabled' : '',
+                type: self.options.type == 'password' ? 'password' : 'text'
             })
             .css({
-                width: self.inputWidth + "px",
+                width: self.inputWidth + 'px',
                 textAlign: self.options.textAlign
             })
             .val(self.options.value)
@@ -2454,14 +2454,14 @@ requires
 
         if (self.hasPasswordPlaceholder) {
             self.$input.hide();
-            self.$placeholder = $("<input>")
-                .addClass("OxInput OxMedium OxPlaceholder")
+            self.$placeholder = $('<input>')
+                .addClass('OxInput OxMedium OxPlaceholder')
                 .attr({
-                    type: "text"
+                    type: 'text'
                 })
                 .css({
-                    //float: "left",
-                    width: self.inputWidth + "px"
+                    //float: 'left',
+                    width: self.inputWidth + 'px'
                 })
                 .val(self.options.placeholder)
                 .focus(focus)
@@ -2471,14 +2471,14 @@ requires
         if (self.options.autocomplete && self.options.autocompleteSelect) {
             self.$autocompleteMenu = new Ox.Menu({
                     element: self.$input,
-                    id: self.options.id + "Menu", // fixme: we do this in other places ... are we doing it the same way? var name?,
+                    id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?,
                     offset: {
                         left: 4,
                         top: 0
                     },
                     size: self.options.size
                 })
-                .bindEvent("click", clickMenu);
+                .bindEvent('click', clickMenu);
             if (self.options.autocompleteReplace) {
                 self.$autocompleteMenu.bindEvent({
                     deselect: deselectMenu,
@@ -2514,7 +2514,7 @@ requires
 
             function autocompleteCallback(values) {
 
-                Ox.print("autocompleteCallback", values[0], self.options.value, self.options.value.length, oldValue, oldCursor)
+                Ox.print('autocompleteCallback', values[0], self.options.value, self.options.value.length, oldValue, oldCursor)
 
                 var length = self.options.value.length,
                     deleted = length <= oldValue.length - (oldCursor[1] - oldCursor[0]),
@@ -2528,7 +2528,7 @@ requires
                     selectEnd = length == 0 || (values[0] && values[0].length),
                     value;
 
-                Ox.print("selectEnd", selectEnd)
+                Ox.print('selectEnd', selectEnd)
 
                 if (self.options.autocompleteReplace) {
                     self.options.value = newValue;
@@ -2554,10 +2554,10 @@ requires
                                     selected = i;
                                 }
                                 return {
-                                    id: v.toLowerCase().replace(/ /g, "_"), // fixme: need function to do lowercase, underscores etc?
+                                    id: v.toLowerCase().replace(/ /g, '_'), // fixme: need function to do lowercase, underscores etc?
                                     title: self.options.autocompleteSelectHighlight ? v.replace(
-                                        new RegExp("(" + value + ")", "ig"),
-                                        "<span class=\"OxHighlight\">$1</span>"
+                                        new RegExp('(' + value + ')', 'ig'),
+                                        '<span class="OxHighlight">$1</span>'
                                     ) : v
                                 };
                             }),
@@ -2568,7 +2568,7 @@ requires
                     }
                 }
 
-                that.triggerEvent("autocomplete", {
+                that.triggerEvent('autocomplete', {
                     value: newValue
                 });
 
@@ -2604,56 +2604,56 @@ requires
 
             function autovalidateFunction(value) {
                 var regexp = new RegExp(self.options.autovalidate);
-                return $.map(value.toLowerCase().split(""), function(v, i) {
+                return $.map(value.toLowerCase().split(''), function(v, i) {
                     if (regexp(v)) {
                         return v;
                     } else {
                         return null;
                     }
-                }).join("");
+                }).join('');
             }
 
             function autovalidateTypeFunction(type, value) {
                 var cursor,
-                    regexp = type == "float" ? /[\d\.]/ : /\d/;
-                if (type == "float") {
-                    if (value.indexOf(".") != value.lastIndexOf(".")) {
+                    regexp = type == 'float' ? /[\d\.]/ : /\d/;
+                if (type == 'float') {
+                    if (value.indexOf('.') != value.lastIndexOf('.')) {
                         value = oldValue;
                     } else {
                         if (self.autovalidateFloatFlag) {
-                            if (Ox.endsWith(value, ".")) {
+                            if (Ox.endsWith(value, '.')) {
                                 value = value.substr(0, value.length - 1);
                             }
                             self.autovalidateFloatFlag = false;
                         }
-                        while (Ox.startsWith(value, ".")) {
-                            if (Ox.startsWith(value, "..")) {
+                        while (Ox.startsWith(value, '.')) {
+                            if (Ox.startsWith(value, '..')) {
                                 value = value.substr(1);
                             } else {
-                                value = "0" + value;
+                                value = '0' + value;
                             }
                         }
-                        if (Ox.endsWith(value, ".")) {
-                            value += "0";
+                        if (Ox.endsWith(value, '.')) {
+                            value += '0';
                             cursor = [value.length - 1, value.length];
                             self.autovalidateFloatFlag = true;
                         }
                     }
                 }
-                value = $.map(value.split(""), function(v, i) {
+                value = $.map(value.split(''), function(v, i) {
                     if (regexp(v)) {
                         return v;
                     } else {
                         return null;
                     }
-                }).join("");
-                if (type == "integer") {
-                    while (value.length > 1 && Ox.startsWith(value, "0")) {
+                }).join('');
+                if (type == 'integer') {
+                    while (value.length > 1 && Ox.startsWith(value, '0')) {
                         value = value.substr(1);
                     }
                 }
-                if (value === "") {
-                    value = type == "float" ? "0.0" : "0";
+                if (value === '') {
+                    value = type == 'float' ? '0.0' : '0';
                     cursor = [0, value.length];
                 } else if (value > self.options.max) {
                     value = oldValue;
@@ -2662,13 +2662,13 @@ requires
             }
 
             function autovalidateCallback(newValue, newCursor) {
-                Ox.print("autovalidateCallback", newValue, oldCursor)
+                Ox.print('autovalidateCallback', newValue, oldCursor)
                 self.options.value = newValue;
                 self.$input.val(self.options.value);
                 !blur && cursor(
                     newCursor || (oldCursor[1] + newValue.length - oldValue.length)
                 );
-                that.triggerEvent("autovalidate", {
+                that.triggerEvent('autovalidate', {
                     value: self.options.value
                 });
             }
@@ -2678,7 +2678,7 @@ requires
         /*
 
         function autovalidate(blur) {
-            Ox.print("autovalidate", self.options.value, blur || false)
+            Ox.print('autovalidate', self.options.value, blur || false)
             self.autocorrectBlur = blur || false;
             self.autocorrectCursor = cursor();
             Ox.isFunction(self.options.autocorrect) ?
@@ -2696,27 +2696,27 @@ requires
 
         function autovalidateFunction(value) {
             var length = value.length;
-            return $.map(value.toLowerCase().split(""), function(v, i) {
+            return $.map(value.toLowerCase().split(''), function(v, i) {
                 if (new RegExp(self.options.autocorrect)(v)) {
                     return v;
                 } else {
                     return null;
                 }
-            }).join("");
+            }).join('');
         }
 
         */
 
         function blur() {
-            Ox.print("blur")
+            Ox.print('blur')
             that.loseFocus();
-            //that.removeClass("OxFocus");
+            //that.removeClass('OxFocus');
             self.options.value = self.$input.val();
             self.options.autovalidate && autovalidate(true);
             self.options.placeholder && setPlaceholder();
             if (self.bindKeyboard) {
-                $document.unbind("keydown", keypress);
-                $document.unbind("keypress", keypress);
+                $document.unbind('keydown', keypress);
+                $document.unbind('keypress', keypress);
             }
         }
 
@@ -2726,7 +2726,7 @@ requires
 
         function change() {
             self.options.value = self.$input.val();
-            that.triggerEvent("change", {
+            that.triggerEvent('change', {
                 value: self.options.value
             });
         }
@@ -2734,11 +2734,11 @@ requires
         function clear() {
             // fixme: set to min, not zero
             // fixme: make this work for password
-            var value = "";
-            if (self.options.type == "float") {
-                value = "0.0";
-            } else if (self.options.type == "integer") {
-                value = "0"
+            var value = '';
+            if (self.options.type == 'float') {
+                value = '0.0';
+            } else if (self.options.type == 'integer') {
+                value = '0'
             }
             self.$input.val(value);
             cursor(0, value.length);
@@ -2754,7 +2754,7 @@ requires
         }
 
         function clickMenu(event, data) {
-            Ox.print("clickMenu", data);
+            Ox.print('clickMenu', data);
             self.options.value = data.title;
             self.$input.val(self.options.value).focus();
             that.gainFocus();
@@ -2785,18 +2785,18 @@ requires
         }
 
         function focus() {
-            Ox.print("focus()")
+            Ox.print('focus()')
             if (
-                that.hasClass("OxFocus") || // fixme: this is just a workaround, since for some reason, focus() gets called twice on focus
-                (self.$autocompleteMenu && self.$autocompleteMenu.is(":visible")) ||
-                (self.hasPasswordPlaceholder && self.$input.is(":visible"))
+                that.hasClass('OxFocus') || // fixme: this is just a workaround, since for some reason, focus() gets called twice on focus
+                (self.$autocompleteMenu && self.$autocompleteMenu.is(':visible')) ||
+                (self.hasPasswordPlaceholder && self.$input.is(':visible'))
             ) {
                 return;
             }
             that.gainFocus();
             self.options.placeholder && setPlaceholder();
             if (self.bindKeyboard) {
-                Ox.print("binding...")
+                Ox.print('binding...')
                 // fixme: different in webkit and firefox (?), see keyboard handler, need generic function
                 $document.keydown(keypress);
                 $document.keypress(keypress);
@@ -2817,12 +2817,12 @@ requires
                 newValue = oldValue.substr(0, oldCursor[0] - 1),
                 hasDeletedSelectedEnd = (event.keyCode == 8 || event.keyCode == 46) &&
                     oldCursor[0] < oldCursor[1] && oldCursor[1] == oldValue.length;
-            Ox.print("keypress", event.keyCode)
+            Ox.print('keypress', event.keyCode)
             if (event.keyCode != 9 && event.keyCode != 13 && event.keyCode != 27) { // fixme: can't 13 and 27 return false?
                 setTimeout(function() { // wait for val to be set
                     var value = self.$input.val();
                     if (self.options.autocompleteReplaceCorrect && hasDeletedSelectedEnd) {
-                        Ox.print(value, "->", newValue);
+                        Ox.print(value, '->', newValue);
                         value = newValue; // value.substr(0, value.length - 1);
                         self.$input.val(value);
                     }
@@ -2833,14 +2833,14 @@ requires
                     }
                 }, 0);
             }
-            if ((event.keyCode == 38 || event.keyCode == 40) && self.options.autocompleteSelect && self.$autocompleteMenu.is(":visible")) {
+            if ((event.keyCode == 38 || event.keyCode == 40) && self.options.autocompleteSelect && self.$autocompleteMenu.is(':visible')) {
                 return false;
             }
         }
 
         function selectMenu(event, data) {
             var pos = cursor();
-            Ox.print("selectMenu", pos)
+            Ox.print('selectMenu', pos)
             self.options.value = data.title
             self.$input.val(self.options.value);
             cursor(pos[0], self.options.value.length)
@@ -2848,30 +2848,30 @@ requires
 
         function setPlaceholder() {
             if (self.options.placeholder) {
-                if (that.hasClass("OxFocus")) {
-                    if (self.options.value === "") {
-                        if (self.options.type == "password") {
+                if (that.hasClass('OxFocus')) {
+                    if (self.options.value === '') {
+                        if (self.options.type == 'password') {
                             self.$placeholder.hide();
                             self.$input.show().focus();
                         } else {
                             self.$input
-                                .removeClass("OxPlaceholder")
-                                .val("");
+                                .removeClass('OxPlaceholder')
+                                .val('');
                         }
                     }
                 } else {
-                    if (self.options.value === "") {
-                        if (self.options.type == "password") {
+                    if (self.options.value === '') {
+                        if (self.options.type == 'password') {
                             self.$input.hide();
                             self.$placeholder.show();
                         } else {
                             self.$input
-                                .addClass("OxPlaceholder")
+                                .addClass('OxPlaceholder')
                                 .val(self.options.placeholder)
                         }
                     } else {
                         self.$input
-                            .removeClass("OxPlaceholder")
+                            .removeClass('OxPlaceholder')
                             .val(self.options.value)
                     }
                 }
@@ -2884,24 +2884,24 @@ requires
 
         function submit() {
             self.$input.blur();
-            that.triggerEvent("submit", {
+            that.triggerEvent('submit', {
                 value: self.options.value
             });
         }
 
         self.onChange = function(key, value) {
             var inputWidth, val;
-            if (key == "value") {
+            if (key == 'value') {
                 val = self.$input.val();
                 self.$input.val(value);
                 setPlaceholder();
-            } else if (key == "width") {
+            } else if (key == 'width') {
                 inputWidth = getInputWidth();
                 self.$input.css({
-                    width: inputWidth + "px"
+                    width: inputWidth + 'px'
                 });
                 self.hasPasswordPlaceholder && self.$placeholder.css({
-                    width: inputWidth + "px"
+                    width: inputWidth + 'px'
                 });
             }
         };
@@ -2922,13 +2922,13 @@ requires
             ret = null,
             values = [];
             $.each(Ox.range(min, max + 1), function(i, v) {
-                values.push(v + "");
+                values.push(v + '');
                 pad && v.toString().length < maxLength && values.push(Ox.pad(v, maxLength));
             });
         return function(value, blur, callback) {
             var results;
-            if (year && value == "1") {
-                value = "1900";
+            if (year && value == '1') {
+                value = '1900';
             } else {
                 results = Ox.find(values, value);
                 value = results[0].length == 1 && results[0][0].length < maxLength ?
@@ -2949,15 +2949,15 @@ requires
         ***/
 
         var self = self || {},
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
-                    id: "",
+                    id: '',
                     inputs: [],
                     separators: [],
                     width: 0
                 })
                 .options(options || {})
-                .addClass("OxInputGroup")
+                .addClass('OxInputGroup')
                 .click(click);
 
         if (self.options.width) {
@@ -2966,7 +2966,7 @@ requires
             self.options.width = getWidth();
         }
         that.css({
-            width: self.options.width + "px"
+            width: self.options.width + 'px'
         });
 
         $.extend(self, {
@@ -2976,27 +2976,27 @@ requires
 
         $.each(self.options.separators, function(i, v) {
             self.$separator[i] = new Ox.Label({
-                textAlign: "center",
+                textAlign: 'center',
                 title: v.title,
                 width: v.width + 32
             })
-            .addClass("OxSeparator")
+            .addClass('OxSeparator')
             .css({
-                marginLeft: (self.options.inputs[i].options("width") - (i == 0 ? 16 : 32)) + "px"
+                marginLeft: (self.options.inputs[i].options('width') - (i == 0 ? 16 : 32)) + 'px'
             })
             .appendTo(that);
         });
 
         $.each(self.options.inputs, function(i, $input) {
             $input.options({
-                    id: self.options.id + Ox.toTitleCase($input.options("id")),
+                    id: self.options.id + Ox.toTitleCase($input.options('id')),
                     parent: that
                 })
                 .css({
                     marginLeft: -Ox.sum($.map(self.options.inputs, function(v_, i_) {
-                        return i_ > i ? self.options.inputs[i_ - 1].options("width") +
+                        return i_ > i ? self.options.inputs[i_ - 1].options('width') +
                             self.options.separators[i_ - 1].width : (i_ == i ? 16 : 0);
-                    })) + "px"
+                    })) + 'px'
                 })
                 .bindEvent({
                     change: change,
@@ -3006,20 +3006,20 @@ requires
         });
 
         function change(event, data) {
-            Ox.print("InputGroup change")
+            Ox.print('InputGroup change')
             // fixme: would be good to pass a value here
-            that.triggerEvent("change");
+            that.triggerEvent('change');
         }
 
         function click(event) {
-            if ($(event.target).hasClass("OxSeparator")) {
+            if ($(event.target).hasClass('OxSeparator')) {
                 self.options.inputs[0].focus();
             }
         }
 
         function getWidth() {
             return Ox.sum($.map(self.options.inputs, function(v, i) {
-                return v.options("width");
+                return v.options('width');
             })) + Ox.sum($.map(self.options.separators, function(v, i) {
                 return v.width;
             }));
@@ -3043,8 +3043,8 @@ requires
         that.getInputById = function(id) {
             var input = null;
             $.each(self.options.inputs, function(i, v) {
-                Ox.print(v, v.options("id"), id)
-                if (v.options("id") == self.options.id + Ox.toTitleCase(id)) {
+                Ox.print(v, v.options('id'), id)
+                if (v.options('id') == self.options.id + Ox.toTitleCase(id)) {
                     input = v;
                     return false;
                 }
@@ -3060,38 +3060,38 @@ requires
 
         var self = $.extend(self || {}, {
                 options: $.extend({
-                    id: "",
-                    value: "0, 0, 0"
+                    id: '',
+                    value: '0, 0, 0'
                 }, options)
             }),
             that;
 
-        self.values = self.options.value.split(", ");
+        self.values = self.options.value.split(', ');
         self.$inputs = [];
-        $.each(["red", "green", "blue"], function(i, v) {
+        $.each(['red', 'green', 'blue'], function(i, v) {
             self.$inputs[i] = new Ox.Input({
                 id: v,
                 max: 255,
-                type: "integer",
+                type: 'integer',
                 value: self.values[i],
                 width: 36
             })
-            .bindEvent("autovalidate", change);
+            .bindEvent('autovalidate', change);
         });
         self.$inputs[3] = new Ox.Label({
-                id: "color",
+                id: 'color',
                 width: 36
             })
             .css({
-                background: "rgb(" + self.options.value + ")"
+                background: 'rgb(' + self.options.value + ')'
             });
         self.$inputs[4] = new Ox.ColorPicker({
-                id: "picker"
+                id: 'picker'
             })
-            .bindEvent("change", function(event, data) {
-                Ox.print("change function called");
+            .bindEvent('change', function(event, data) {
+                Ox.print('change function called');
                 self.options.value = data.value;
-                self.values = data.value.split(", ");
+                self.values = data.value.split(', ');
                 $.each(Ox.range(3), function(i) {
                     self.$inputs[i].options({
                         value: self.values[i]
@@ -3106,21 +3106,21 @@ requires
                 id: self.options.id,
                 inputs: self.$inputs,
                 separators: [
-                    {title: ",", width: 8},
-                    {title: ",", width: 8},
-                    {title: "", width: 8},
-                    {title: "", width: 8}
+                    {title: ',', width: 8},
+                    {title: ',', width: 8},
+                    {title: '', width: 8},
+                    {title: '', width: 8}
                 ],
                 value: self.options.value // fixme: it'd be nicer if this would be taken care of by passing self
             }, self)
-            .bindEvent("change", change);
+            .bindEvent('change', change);
 
         function change() {
             self.options.value = $.map(self.$inputs, function(v, i) {
-                return v.options("value");
-            }).join(", ");
+                return v.options('value');
+            }).join(', ');
             self.$inputs[3].css({
-                background: "rgb(" + self.options.value + ")"
+                background: 'rgb(' + self.options.value + ')'
             });
         }
 
@@ -3132,13 +3132,13 @@ requires
 
         var self = $.extend(self || {}, {
                 options: $.extend({
-                    format: "short",
-                    value: Ox.formatDate(new Date(), "%F"),
+                    format: 'short',
+                    value: Ox.formatDate(new Date(), '%F'),
                     weekday: false,
                     width: {
                         day: 32,
-                        month: options.format == "long" ? 80 : (options.format == "medium" ? 40 : 32),
-                        weekday: options.format == "long" ? 80 : 40,
+                        month: options.format == 'long' ? 80 : (options.format == 'medium' ? 40 : 32),
+                        weekday: options.format == 'long' ? 80 : 40,
                         year: 48
                     }
                 }, options)
@@ -3146,18 +3146,18 @@ requires
             that;
 
         $.extend(self, {
-            date: new Date(self.options.value.replace(/-/g, "/")),
+            date: new Date(self.options.value.replace(/-/g, '/')),
             formats: {
-                day: "%d",
-                month: self.options.format == "short" ? "%m" :
-                        (self.options.format == "medium" ? "%b" : "%B"),
-                weekday: self.options.format == "long" ? "%A" : "%a",
-                year: "%Y"
+                day: '%d',
+                month: self.options.format == 'short' ? '%m' :
+                        (self.options.format == 'medium' ? '%b' : '%B'),
+                weekday: self.options.format == 'long' ? '%A' : '%a',
+                year: '%Y'
             },
-            months: self.options.format == "long" ? Ox.MONTHS : $.map(Ox.MONTHS, function(v, i) {
+            months: self.options.format == 'long' ? Ox.MONTHS : $.map(Ox.MONTHS, function(v, i) {
                 return v.substr(0, 3);
             }),
-            weekdays: self.options.format == "long" ? Ox.WEEKDAYS : $.map(Ox.WEEKDAYS, function(v, i) {
+            weekdays: self.options.format == 'long' ? Ox.WEEKDAYS : $.map(Ox.WEEKDAYS, function(v, i) {
                 return v.substr(0, 3);
             })
         });
@@ -3167,115 +3167,115 @@ requires
                     autocomplete: self.weekdays,
                     autocompleteReplace: true,
                     autocompleteReplaceCorrect: true,
-                    id: "weekday",
+                    id: 'weekday',
                     value: Ox.formatDate(self.date, self.formats.weekday),
                     width: self.options.width.weekday
                 })
-                .bindEvent("autocomplete", changeWeekday),
+                .bindEvent('autocomplete', changeWeekday),
         } : {}, {
             day: new Ox.Input({
                     autocomplete: $.map(Ox.range(1, Ox.getDaysInMonth(
-                        parseInt(Ox.formatDate(self.date, "%Y"), 10),
-                        parseInt(Ox.formatDate(self.date, "%m"), 10)
+                        parseInt(Ox.formatDate(self.date, '%Y'), 10),
+                        parseInt(Ox.formatDate(self.date, '%m'), 10)
                     ) + 1), function(v, i) {
-                        return self.options.format == "short" ? Ox.pad(v, 2) : v.toString();
+                        return self.options.format == 'short' ? Ox.pad(v, 2) : v.toString();
                     }),
                     autocompleteReplace: true,
                     autocompleteReplaceCorrect: true,
-                    id: "day",
+                    id: 'day',
                     value: Ox.formatDate(self.date, self.formats.day),
-                    textAlign: "right",
+                    textAlign: 'right',
                     width: self.options.width.day
                 })
-                .bindEvent("autocomplete", changeDay),
+                .bindEvent('autocomplete', changeDay),
             month: new Ox.Input({
-                    autocomplete: self.options.format == "short" ? $.map(Ox.range(1, 13), function(v, i) {
+                    autocomplete: self.options.format == 'short' ? $.map(Ox.range(1, 13), function(v, i) {
                         return Ox.pad(v, 2);
                     }) : self.months,
                     autocompleteReplace: true,
                     autocompleteReplaceCorrect: true,
-                    id: "month",
+                    id: 'month',
                     value: Ox.formatDate(self.date, self.formats.month),
-                    textAlign: self.options.format == "short" ? "right" : "left",
+                    textAlign: self.options.format == 'short' ? 'right' : 'left',
                     width: self.options.width.month
                 })
-                .bindEvent("autocomplete", changeMonthOrYear),
+                .bindEvent('autocomplete', changeMonthOrYear),
             year: new Ox.Input({
                     autocomplete: $.map($.merge(Ox.range(1900, 3000), Ox.range(1000, 1900)), function(v, i) {
                         return v.toString();
                     }),
                     autocompleteReplace: true,
                     autocompleteReplaceCorrect: true,
-                    id: "year",
+                    id: 'year',
                     value: Ox.formatDate(self.date, self.formats.year),
-                    textAlign: "right",
+                    textAlign: 'right',
                     width: self.options.width.year
                 })
-                .bindEvent("autocomplete", changeMonthOrYear)
+                .bindEvent('autocomplete', changeMonthOrYear)
         });
 
         that = new Ox.InputGroup($.extend(self.options, {
             id: self.options.id,
             inputs: $.merge(self.options.weekday ? [
                 self.$input.weekday
-            ] : [], self.options.format == "short" ? [
+            ] : [], self.options.format == 'short' ? [
                 self.$input.year, self.$input.month, self.$input.day
             ] : [
                 self.$input.month, self.$input.day, self.$input.year
             ]),
             separators: $.merge(self.options.weekday ? [
-                {title: self.options.format == "short" ? "" : ",", width: 8},
-            ] : [], self.options.format == "short" ? [
-                {title: "-", width: 8}, {title: "-", width: 8}
+                {title: self.options.format == 'short' ? '' : ',', width: 8},
+            ] : [], self.options.format == 'short' ? [
+                {title: '-', width: 8}, {title: '-', width: 8}
             ] : [
-                {title: "", width: 8}, {title: ",", width: 8}
+                {title: '', width: 8}, {title: ',', width: 8}
             ]),
             width: 0
         }), self);
 
-        Ox.print("SELF", self)
+        Ox.print('SELF', self)
 
         function changeDay() {
             self.options.weekday && self.$input.weekday.options({
                 value: Ox.formatDate(new Date([
-                    self.$input.month.options("value"),
-                    self.$input.day.options("value"),
-                    self.$input.year.options("value")
-                ].join(" ")), self.formats.weekday)
+                    self.$input.month.options('value'),
+                    self.$input.day.options('value'),
+                    self.$input.year.options('value')
+                ].join(' ')), self.formats.weekday)
             });
             setValue();
         }
 
         function changeMonthOrYear() {
-            var day = self.$input.day.options("value"),
-                month = self.$input.month.options("value"),
-                year = self.$input.year.options("value"),
-                days = Ox.getDaysInMonth(year, self.options.format == "short" ? parseInt(month, 10) : month);
+            var day = self.$input.day.options('value'),
+                month = self.$input.month.options('value'),
+                year = self.$input.year.options('value'),
+                days = Ox.getDaysInMonth(year, self.options.format == 'short' ? parseInt(month, 10) : month);
             day = day <= days ? day : days;
-            Ox.print(year, month, "day days", day, days)
+            Ox.print(year, month, 'day days', day, days)
             self.options.weekday && self.$input.weekday.options({
-                value: Ox.formatDate(new Date([month, day, year].join(" ")), self.formats.weekday)
+                value: Ox.formatDate(new Date([month, day, year].join(' ')), self.formats.weekday)
             });
             self.$input.day.options({
                 autocomplete: $.map(Ox.range(1, days + 1), function(v, i) {
-                    return self.options.format == "short" ? Ox.pad(v, 2) : v.toString();
+                    return self.options.format == 'short' ? Ox.pad(v, 2) : v.toString();
                 }),
-                value: self.options.format == "short" ? Ox.pad(day, 2) : day.toString()
+                value: self.options.format == 'short' ? Ox.pad(day, 2) : day.toString()
             });
             setValue();
         }
 
         function changeWeekday() {
             var date = getDateInWeek(
-                    self.$input.weekday.options("value"),
-                    self.$input.month.options("value"),
-                    self.$input.day.options("value"),
-                    self.$input.year.options("value")
+                    self.$input.weekday.options('value'),
+                    self.$input.month.options('value'),
+                    self.$input.day.options('value'),
+                    self.$input.year.options('value')
                 );
             self.$input.month.options({value: date.month});
             self.$input.day.options({
                 autocomplete: $.map(Ox.range(1, Ox.getDaysInMonth(date.year, date.month) + 1), function(v, i) {
-                        return self.options.format == "short" ? Ox.pad(v, 2) : v.toString();
+                        return self.options.format == 'short' ? Ox.pad(v, 2) : v.toString();
                     }),
                 value: date.day
             });
@@ -3284,8 +3284,8 @@ requires
         }
 
         function getDateInWeek(weekday, month, day, year) {
-            Ox.print([month, day, year].join(" "))
-            var date = new Date([month, day, year].join(" "));
+            Ox.print([month, day, year].join(' '))
+            var date = new Date([month, day, year].join(' '));
             date = Ox.getDateInWeek(date, weekday);
             return {
                 day: Ox.formatDate(date, self.formats.day),
@@ -3295,26 +3295,26 @@ requires
         }
 
         function setValue() {
-            self.options.value = Ox.formatDate(new Date(self.options.format == "short" ? [
-                self.$input.year.options("value"),
-                self.$input.month.options("value"),
-                self.$input.day.options("value")
-            ].join("/") : [
-                self.$input.month.options("value"),
-                self.$input.day.options("value"),
-                self.$input.year.options("value")
-            ].join(" ")), "%F");
+            self.options.value = Ox.formatDate(new Date(self.options.format == 'short' ? [
+                self.$input.year.options('value'),
+                self.$input.month.options('value'),
+                self.$input.day.options('value')
+            ].join('/') : [
+                self.$input.month.options('value'),
+                self.$input.day.options('value'),
+                self.$input.year.options('value')
+            ].join(' ')), '%F');
         }
 
         /*
         function normalize() {
-            var year = that.getInputById("year").options("value"),
-                month = that.getInputById("month").options("value"),
-                day = that.getInputById("day").options("value")
+            var year = that.getInputById('year').options('value'),
+                month = that.getInputById('month').options('value'),
+                day = that.getInputById('day').options('value')
             return {
                 year: year,
-                month: self.options.format == "short" ? month :
-                        Ox.pad((format == "medium" ? Ox.WEEKDAYS.map(function(v, i) {
+                month: self.options.format == 'short' ? month :
+                        Ox.pad((format == 'medium' ? Ox.WEEKDAYS.map(function(v, i) {
                             return v.substr(0, 3);
                         }) : Ox.WEEKDAYS).indexOf(month), 2),
                 day: Ox.pad(day, 2)
@@ -3325,7 +3325,7 @@ requires
         /*
         that.serialize = function() {
             var normal = normalize();
-            return [normal.year, normal.month, normal.day].join("-");
+            return [normal.year, normal.month, normal.day].join('-');
         }
         */
 
@@ -3339,43 +3339,43 @@ requires
             that = new Ox.Element({}, self)
                 .defaults({
                     ampm: false,
-                    format: "short",
+                    format: 'short',
                     seconds: false,
-                    value: Ox.formatDate(new Date(), "%F %T"),
+                    value: Ox.formatDate(new Date(), '%F %T'),
                     weekday: false
                 })
                 .options(options || {});
 
-        self.values = self.options.value.split(" ");
+        self.values = self.options.value.split(' ');
         Ox.print(self.values)
 
         that = new Ox.InputGroup({
                 inputs: [
                     new Ox.DateInput({
                         format: self.options.format,
-                        id: "date",
+                        id: 'date',
                         value: self.values[0],
                         weekday: self.options.weekday
                     }),
                     new Ox.TimeInput({
                         ampm: self.options.ampm,
-                        id: "time",
+                        id: 'time',
                         value: self.values[1],
                         seconds: self.options.seconds
                     })
                 ],
                 separators: [
-                    {title: "", width: 8}
+                    {title: '', width: 8}
                 ],
                 value: self.options.value
             })
-            .bindEvent("change", setValue);
+            .bindEvent('change', setValue);
 
         function setValue() {
             self.options.value = [
-                self.options("inputs")[0].options("value"),
-                self.options("inputs")[1].options("value")
-            ].join(" ");
+                self.options('inputs')[0].options('value'),
+                self.options('inputs')[1].options('value')
+            ].join(' ');
         }
 
         return that;
@@ -3386,8 +3386,8 @@ requires
 
         var self = $.extend(self || {}, {
                 options: $.extend({
-                    id: "",
-                    value: "United States"
+                    id: '',
+                    value: 'United States'
                 }, options)
             }),
             that;
@@ -3396,18 +3396,18 @@ requires
                 id: self.options.id,
                 elements: [
                     new Ox.Input({
-                        id: "input",
+                        id: 'input',
                         value: self.options.value
                     }),
                     new Ox.PlacePicker({
-                        id: "picker",
-                        overlap: "left",
+                        id: 'picker',
+                        overlap: 'left',
                         value: self.options.value
                     })
                 ],
-                float: "right"
+                float: 'right'
             }, self)
-            .bindEvent("change", change);
+            .bindEvent('change', change);
 
         function change() {
             
@@ -3426,14 +3426,14 @@ requires
                     ampm: false,
                     seconds: false,
                     milliseconds: false,
-                    value: Ox.formatDate(new Date(), "%T"),
+                    value: Ox.formatDate(new Date(), '%T'),
                 })
                 .options(options || {});
 
         if (self.options.milliseconds) {
             self.options.seconds = true;
-            if (self.options.value.indexOf(".") == -1) {
-                self.options.value += ".000";
+            if (self.options.value.indexOf('.') == -1) {
+                self.options.value += '.000';
             }
         }
 
@@ -3447,8 +3447,8 @@ requires
                 }),
                 autocompleteReplace: true,
                 autocompleteReplaceCorrect: true,
-                id: "hours",
-                textAlign: "right",
+                id: 'hours',
+                textAlign: 'right',
                 value: self.values.hours,
                 width: 32
             }),
@@ -3458,8 +3458,8 @@ requires
                 }),
                 autocompleteReplace: true,
                 autocompleteReplaceCorrect: true,
-                id: "minutes",
-                textAlign: "right",
+                id: 'minutes',
+                textAlign: 'right',
                 value: self.values.minutes,
                 width: 32
             }),
@@ -3469,8 +3469,8 @@ requires
                 }),
                 autocompleteReplace: true,
                 autocompleteReplaceCorrect: true,
-                id: "seconds",
-                textAlign: "right",
+                id: 'seconds',
+                textAlign: 'right',
                 value: self.values.seconds,
                 width: 32
             }),
@@ -3480,16 +3480,16 @@ requires
                 }),
                 autocompleteReplace: true,
                 autocompleteReplaceCorrect: true,
-                id: "milliseconds",
-                textAlign: "right",
+                id: 'milliseconds',
+                textAlign: 'right',
                 value: self.values.milliseconds,
                 width: 40
             }),
             ampm: Ox.Input({
-                autocomplete: ["AM", "PM"],
+                autocomplete: ['AM', 'PM'],
                 autocompleteReplace: true,
                 autocompleteReplaceCorrect: true,
-                id: "ampm",
+                id: 'ampm',
                 value: self.values.ampm,
                 width: 32
             })
@@ -3507,22 +3507,22 @@ requires
                     self.$input.ampm
                 ] : []),
                 separators: $.merge($.merge($.merge([
-                    {title: ":", width: 8},
+                    {title: ':', width: 8},
                 ], self.options.seconds ? [
-                    {title: ":", width: 8}
+                    {title: ':', width: 8}
                 ] : []), self.options.milliseconds ? [
-                    {title: ".", width: 8}
+                    {title: '.', width: 8}
                 ] : []), self.options.ampm ? [
-                    {title: "", width: 8}
+                    {title: '', width: 8}
                 ] : []),
                 //width: self.options.width || 128
             }), self)
-            .bindEvent("change", setValue);
+            .bindEvent('change', setValue);
 
         setValue();
 
         function getDate() {
-            return new Date("1970/01/01 " + (
+            return new Date('1970/01/01 ' + (
                 self.options.milliseconds ?
                 self.options.value.substr(0, self.options.value.length - 4) :
                 self.options.value
@@ -3532,23 +3532,23 @@ requires
         function getValues() {
             self.date = getDate();
             return {
-                ampm: Ox.formatDate(self.date, "%p"),
-                hours: Ox.formatDate(self.date, self.options.ampm ? "%I" : "%H"),
-                milliseconds: self.options.milliseconds ? self.options.value.substr(-3) : "000",
-                minutes: Ox.formatDate(self.date, "%M"),
-                seconds: Ox.formatDate(self.date, "%S")
+                ampm: Ox.formatDate(self.date, '%p'),
+                hours: Ox.formatDate(self.date, self.options.ampm ? '%I' : '%H'),
+                milliseconds: self.options.milliseconds ? self.options.value.substr(-3) : '000',
+                minutes: Ox.formatDate(self.date, '%M'),
+                seconds: Ox.formatDate(self.date, '%S')
             };
         }
 
         function setValue() {
-            self.options.value = Ox.formatDate(new Date("1970/01/01 " + [
-                self.$input.hours.options("value"),
-                self.$input.minutes.options("value"),
-                self.options.seconds ? self.$input.seconds.options("value") : "00"
-            ].join(":") + (self.options.ampm ? " " + self.$input.ampm.options("value") : "")),
-                (self.options.seconds? "%T" : "%H:%M")) +
-                (self.options.milliseconds ? "." + self.$input.milliseconds.options("value") : "");
-            Ox.print("SETVALUE", self.options.value);
+            self.options.value = Ox.formatDate(new Date('1970/01/01 ' + [
+                self.$input.hours.options('value'),
+                self.$input.minutes.options('value'),
+                self.options.seconds ? self.$input.seconds.options('value') : '00'
+            ].join(':') + (self.options.ampm ? ' ' + self.$input.ampm.options('value') : '')),
+                (self.options.seconds? '%T' : '%H:%M')) +
+                (self.options.milliseconds ? '.' + self.$input.milliseconds.options('value') : '');
+            Ox.print('SETVALUE', self.options.value);
         }
 
         function setValues() {
@@ -3561,7 +3561,7 @@ requires
         }
 
         self.onChange = function(key, value) {
-            if (key == "value") {
+            if (key == 'value') {
                 setValues();
             }
         }
@@ -3573,23 +3573,23 @@ requires
     Ox.Label = function(options, self) {
 
         var self = self || {},
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
                     disabled: false,
-                    id: "",
-                    overlap: "none",
-                    textAlign: "left",
-                    title: "",
-                    width: "auto"
+                    id: '',
+                    overlap: 'none',
+                    textAlign: 'left',
+                    title: '',
+                    width: 'auto'
                 })
                 .options(options)
                 .addClass(
-                    "OxLabel" + (self.options.disabled ? " OxDisabled" : "") +
-                    (self.options.overlap != "none" ?
-                    " OxOverlap" + Ox.toTitleCase(self.options.overlap) : "")
+                    'OxLabel' + (self.options.disabled ? ' OxDisabled' : '') +
+                    (self.options.overlap != 'none' ?
+                    ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : '')
                 )
-                .css($.extend(self.options.width == "auto" ? {} : {
-                    width: (self.options.width - 14) + "px"
+                .css($.extend(self.options.width == 'auto' ? {} : {
+                    width: (self.options.width - 14) + 'px'
                 }, {
                     textAlign: self.options.textAlign
                 }))
@@ -3605,7 +3605,7 @@ requires
             to be used by ButtonGroup, CheckboxGroup, Select and Menu
         */
 
-        var property = property || "checked"
+        var property = property || 'checked'
             length = items.length,
             max = max == -1 ? length : max;
 
@@ -3614,11 +3614,12 @@ requires
             var last = -1;
             Ox.print(items, items.length, length, $.merge(
                 pos > 0 ? Ox.range(pos - 1, -1, -1) : [],
-                pos < length - 1 ? Ox.range(length - 1, pos, -1) : []
+                pos < items.length - 1 ? Ox.range(items.length - 1, pos, -1) : []
             ))
+            // fixme: why is length not == items.length here?
             $.each($.merge(
                 pos > 0 ? Ox.range(pos - 1, -1, -1) : [],
-                pos < length - 1 ? Ox.range(length - 1, pos, -1) : []
+                pos < items.length - 1 ? Ox.range(items.length - 1, pos, -1) : []
             ), function(i, v) {
                 Ox.print(pos, v)
                 if (items[v][property]) {
@@ -3709,10 +3710,10 @@ requires
         Options:
             arrows          boolean         if true, show arrows
             arrowStep       number          step when clicking arrows
-            arrowSymbols    array           arrow symbols, like ["minus", "plus"]
+            arrowSymbols    array           arrow symbols, like ['minus', 'plus']
             max             number          maximum value
             min             number          minimum value
-            orientation     string          "horizontal" or "vertical"
+            orientation     string          'horizontal' or 'vertical'
             step            number          step between values
             size             number          width or height, in px
             thumbSize       number          minimum width or height of thumb, in px
@@ -3729,10 +3730,10 @@ requires
                 .defaults({
                     arrows: false,
                     arrowStep: 1,
-                    arrowSymbols: ["previous", "next"],
+                    arrowSymbols: ['previous', 'next'],
                     max: 100,
                     min: 0,
-                    orientation: "horizontal",
+                    orientation: 'horizontal',
                     step: 1,
                     size: 128,
                     thumbSize: 16,
@@ -3748,9 +3749,9 @@ requires
                         options.arrowStep : options.step,
                     trackImages: $.makeArray(options.trackImages || [])
                 }))
-                .addClass("OxRange")
+                .addClass('OxRange')
                 .css({
-                    width: self.options.size + "px"
+                    width: self.options.size + 'px'
                 });
 
         $.extend(self, {
@@ -3774,11 +3775,11 @@ requires
             self.$arrows = [];
             $.each(Ox.range(0, 2), function(i) {
                 self.$arrows[i] = Ox.Button({
-                    overlap: i == 0 ? "right" : "left",
+                    overlap: i == 0 ? 'right' : 'left',
                     title: self.options.arrowSymbols[i],
-                    type: "image"
+                    type: 'image'
                 })
-                .addClass("OxArrow")
+                .addClass('OxArrow')
                 .mousedown(function(e) {
                     clickArrow(e, i);
                 })
@@ -3786,12 +3787,12 @@ requires
             });
         }
 
-        self.$track = $("<div>")
-            .addClass("OxTrack")
+        self.$track = $('<div>')
+            .addClass('OxTrack')
             .css($.extend({
-                width: (self.trackSize - 2) + "px"
+                width: (self.trackSize - 2) + 'px'
             }, self.trackImages == 1 ? {
-                background: "rgb(0, 0, 0)"
+                background: 'rgb(0, 0, 0)'
             } : {}))
             .mousedown(clickTrack)
             .appendTo(that.$element);
@@ -3799,22 +3800,22 @@ requires
         self.trackColors && setTrackColors();
 
         if (self.trackImages) {
-            self.$trackImages = $("<div>")
+            self.$trackImages = $('<div>')
                 .css({
-                    width: self.trackSize + "px",
-                    marginRight: (-self.trackSize - 1) + "px"
+                    width: self.trackSize + 'px',
+                    marginRight: (-self.trackSize - 1) + 'px'
                 })
                 .appendTo(self.$track);
             $.each(self.options.trackImages, function(i, v) {
                 Ox.print(self.trackImageWidths[i])
-                $("<img>")
+                $('<img>')
                     .attr({
                         src: v
                     })
-                    .addClass(i == 0 ? "OxFirstChild" : "")
-                    .addClass(i == self.trackImages - 1 ? "OxLastChild" : "")
+                    .addClass(i == 0 ? 'OxFirstChild' : '')
+                    .addClass(i == self.trackImages - 1 ? 'OxLastChild' : '')
                     .css({
-                        width: self.trackImageWidths[i] + "px"
+                        width: self.trackImageWidths[i] + 'px'
                     })
                     .mousedown(function(e) {
                         e.preventDefault(); // prevent drag
@@ -3825,17 +3826,17 @@ requires
         }
 
         self.$thumb = Ox.Button({
-                id: self.options.id + "Thumb",
+                id: self.options.id + 'Thumb',
                 title: self.options.thumbValue ? (self.options.valueNames ?
                         self.options.valueNames[self.options.value] :
-                        self.options.value) : "",
+                        self.options.value) : '',
                 width: self.thumbSize
             })
-            .addClass("OxThumb")
+            .addClass('OxThumb')
             /*
             .css({
-                border: "1px solid rgb(255, 255, 255)",
-                background: "rgba(0, 0, 0, 0)"
+                border: '1px solid rgb(255, 255, 255)',
+                background: 'rgba(0, 0, 0, 0)'
             })
             */
             .appendTo(self.$track);
@@ -3851,7 +3852,7 @@ requires
                     }, 50);
                 }, 500);
             setValue(self.options.value + self.options.arrowStep * (i == 0 ? -1 : 1) * (e.shiftKey ? 2 : 1), true);
-            $window.one("mouseup", function() {
+            $window.one('mouseup', function() {
                 clearInterval(interval);
                 clearTimeout(timeout);
             });
@@ -3859,15 +3860,15 @@ requires
 
         function clickTrack(e) {
             //Ox.Focus.focus();
-            var isThumb = $(e.target).hasClass("OxThumb"),
+            var isThumb = $(e.target).hasClass('OxThumb'),
                 left = self.$track.offset().left,
                 offset = isThumb ? e.clientX - self.$thumb.offset().left - 8 /*self.thumbSize / 2*/ : 0;
             setValue(val(e), !isThumb);
             $window.mousemove(function(e) {
                 setValue(val(e));
             });
-            $window.one("mouseup", function() {
-                $window.unbind("mousemove");
+            $window.one('mouseup', function() {
+                $window.unbind('mousemove');
             });
             function val(e) {
                 return getVal(e.clientX - left - offset);
@@ -3897,8 +3898,8 @@ requires
 
         function setThumb(animate) {
             self.$thumb.stop().animate({
-                marginLeft: (getPx(self.options.value) - 1) + "px",
-                //width: self.thumbSize + "px"
+                marginLeft: (getPx(self.options.value) - 1) + 'px',
+                //width: self.thumbSize + 'px'
             }, animate ? 200 : 0, function() {
                 if (self.options.thumbValue) {
                     self.$thumb.options({
@@ -3913,14 +3914,14 @@ requires
         function setTrackColors() {
             self.$track.css({
                 backgroundImage: $.browser.mozilla ?
-                    ("-moz-linear-gradient(left, " +
-                    self.options.trackColors[0] + " 0%, " + $.map(self.options.trackColors, function(v, i) {
-                        return v + " " + ((self.trackColorsStart + self.trackColorsStep * i) * 100) + "%";
-                    }).join(", ") + ", " + self.options.trackColors[self.trackColors - 1] + " 100%)") :
-                    ("-webkit-gradient(linear, left top, right top, color-stop(0, " +
-                    self.options.trackColors[0] + "), " + $.map(self.options.trackColors, function(v, i) {
-                        return "color-stop(" + (self.trackColorsStart + self.trackColorsStep * i) + ", " + v + ")";
-                    }).join(", ") + ", color-stop(1, " + self.options.trackColors[self.trackColors - 1] + "))")
+                    ('-moz-linear-gradient(left, ' +
+                    self.options.trackColors[0] + ' 0%, ' + $.map(self.options.trackColors, function(v, i) {
+                        return v + ' ' + ((self.trackColorsStart + self.trackColorsStep * i) * 100) + '%';
+                    }).join(', ') + ', ' + self.options.trackColors[self.trackColors - 1] + ' 100%)') :
+                    ('-webkit-gradient(linear, left top, right top, color-stop(0, ' +
+                    self.options.trackColors[0] + '), ' + $.map(self.options.trackColors, function(v, i) {
+                        return 'color-stop(' + (self.trackColorsStart + self.trackColorsStep * i) + ', ' + v + ')';
+                    }).join(', ') + ', color-stop(1, ' + self.options.trackColors[self.trackColors - 1] + '))')
             });
         }
 
@@ -3930,16 +3931,16 @@ requires
                 //time = getTime(self.options.value, value);
                 self.options.value = value;
                 setThumb(animate);
-                that.triggerEvent("change", {
+                that.triggerEvent('change', {
                     value: value
                 });
             }
         }
 
         self.onChange = function(key, value) {
-            if (key == "trackColors") {
+            if (key == 'trackColors') {
                 setTrackColors();
-            } else if (key == "value") {
+            } else if (key == 'value') {
                 setThumb();
             }
         }
@@ -3951,33 +3952,33 @@ requires
     Ox.Select = function(options, self) {
 
         var self = self || {},
-            that = new Ox.Element("div", self) // fixme: do we use "div", or {}, or "", by default?
+            that = new Ox.Element('div', self) // fixme: do we use 'div', or {}, or '', by default?
                 .defaults({
-                    id: "",
+                    id: '',
                     items: [],
                     max: 1,
                     min: 1,
-                    overlap: "none", // can be none, left or right
+                    overlap: 'none', // can be none, left or right
                     selectable: true,
-                    size: "medium",
-                    title: "",
-                    type: "text", // can be "text" or "image"
-                    width: "auto"
+                    size: 'medium',
+                    title: '',
+                    type: 'text', // can be 'text' or 'image'
+                    width: 'auto'
                 })
                 .options(options)
                 .addClass(
-                    "OxSelect Ox" + Ox.toTitleCase(self.options.size) +
-                    (self.options.overlap == "none" ? "" : " OxOverlap" +
+                    'OxSelect Ox' + Ox.toTitleCase(self.options.size) +
+                    (self.options.overlap == 'none' ? '' : ' OxOverlap' +
                     Ox.toTitleCase(self.options.overlap))
                 )
-                .css(self.options.width == "auto" ? {} : {
-                    width: self.options.width + "px"
+                .css(self.options.width == 'auto' ? {} : {
+                    width: self.options.width + 'px'
                 });
 
         $.extend(self, {
-            buttonId: self.options.id + "Button",
-            groupId: self.options.id + "Group",
-            menuId: self.options.id + "Menu"
+            buttonId: self.options.id + 'Button',
+            groupId: self.options.id + 'Group',
+            menuId: self.options.id + 'Menu'
         });
 
         if (self.options.selectable) {
@@ -3990,11 +3991,11 @@ requires
             self.checked = self.optionGroup.checked();
         }
 
-        if (self.options.type == "text") {
-            self.$title = $("<div>")
-                .addClass("OxTitle")
+        if (self.options.type == 'text') {
+            self.$title = $('<div>')
+                .addClass('OxTitle')
                 .css({
-                    width: (self.options.width - 22) + "px"
+                    width: (self.options.width - 22) + 'px'
                 })
                 .html(
                     self.options.title ? self.options.title :
@@ -4006,11 +4007,11 @@ requires
 
         self.$button = new Ox.Button({
                 id: self.buttonId,
-                style: "symbol",
-                title: "select",
-                type: "image"
+                style: 'symbol',
+                title: 'select',
+                type: 'image'
             })
-            .bindEvent("click", clickButton)
+            .bindEvent('click', clickButton)
             .appendTo(that);
 
         self.$menu = new Ox.Menu({
@@ -4022,46 +4023,59 @@ requires
                     max: self.options.max,
                     min: self.options.min
                 } : self.options.items],
-                side: "bottom",
+                side: 'bottom',
                 size: self.options.size
             })
-            .bindEvent("hide", hideMenu);
-
-        if (self.options.selectable) {
-            // fixme: the menu should fire a change event
-            // so we can attach a bindEvent() directly
-            // (may fire one already, but needs to pass group id)
-            Ox.Event.bind(self.groupId, "change", clickMenu);
-        }
+            .bindEvent({
+                change: changeMenu,
+                click: clickMenu,
+                hide: hideMenu
+            });
 
         function clickButton() {
-            that.addClass("OxSelected");
+            that.addClass('OxSelected');
             self.$menu.showMenu();
         }
 
         function clickMenu(event, data) {
-            Ox.print("clickMenu: ", self.options.id, data)
+            
+        }
+
+        function changeMenu(event, data) {
+            Ox.print('clickMenu: ', self.options.id, data)
+            self.checked = self.optionGroup.checked();
             self.$title && self.$title.html(
                 self.options.title ? self.options.title :
-                data.checked[0].title
+                        data.checked[0].title
             );
-            that.triggerEvent("change", data);
+            that.triggerEvent('change', data);
         }
 
         function hideMenu() {
-            that.removeClass("OxSelected");
-            self.$button.removeClass("OxSelected");
+            that.removeClass('OxSelected');
+            self.$button.removeClass('OxSelected');
         }
 
         self.onChange = function(key, value) {
             
         };
 
+        that.selected = function() {
+            return $.map(/*self.checked*/self.optionGroup.checked(), function(v, i) {
+                return {
+                    id: self.options.items[i].id,
+                    title: self.options.items[i].title
+                };
+            });
+        };
+
         that.selectItem = function(id) {
-            self.options.type == "text" && self.$title.html(
-                Ox.getObjectById(self.options.items, id).title
+            Ox.print('selectItem', id, Ox.getObjectById(self.options.items, id).title)
+            self.options.type == 'text' && self.$title.html(
+                Ox.getObjectById(self.options.items, id).title[0] // fixme: title should not have become an array
             );
             self.$menu.checkItem(id);
+            self.checked = self.optionGroup.checked();
         };
 
         /*
@@ -4081,20 +4095,20 @@ requires
     Ox.FormElementGroup = function(options, self) {
 
         var self = self || {},
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
-                    id: "",
+                    id: '',
                     elements: [],
-                    float: "left",
+                    float: 'left',
                     separators: [],
                     width: 0
                 })
                 .options(options || {})
-                .addClass("OxInputGroup");
+                .addClass('OxInputGroup');
 
-        $.each(self.options.float == "left" ? self.options.elements : self.options.elements.reverse(), function(i, $element) {
+        $.each(self.options.float == 'left' ? self.options.elements : self.options.elements.reverse(), function(i, $element) {
             $element.options({
-                    id: self.options.id + Ox.toTitleCase($element.options("id")),
+                    id: self.options.id + Ox.toTitleCase($element.options('id')),
                     parent: that
                 })
                 .css({
@@ -4110,7 +4124,7 @@ requires
             self.options.width = getWidth();
         }
         that.css({
-            width: self.options.width + "px"
+            width: self.options.width + 'px'
         });
         */
 
@@ -4123,7 +4137,7 @@ requires
         }
 
         self.onChange = function(key, value) {
-            if (key == "trackColors") {
+            if (key == 'trackColors') {
                 
             }
         }
@@ -4135,40 +4149,40 @@ requires
     Ox.Picker = function(options, self) {
 
         var self = self || {},
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
                     element: null,
                     elementHeight: 128,
                     elementWidth: 256,
-                    id: "",
-                    overlap: "none"
+                    id: '',
+                    overlap: 'none'
                 })
                 .options(options || {});
 
         self.$selectButton = new Ox.Button({
                 overlap: self.options.overlap,
-                title: "select",
-                type: "image"
+                title: 'select',
+                type: 'image'
             })
             .click(showMenu)
             .appendTo(that);
 
-        self.$menu = new Ox.Element("div")
-            .addClass("OxPicker")
+        self.$menu = new Ox.Element('div')
+            .addClass('OxPicker')
             .css({
-                width: self.options.elementWidth + "px",
-                height: (self.options.elementHeight + 24) + "px"
+                width: self.options.elementWidth + 'px',
+                height: (self.options.elementHeight + 24) + 'px'
             });
 
         self.options.element
             .css({
-                width: self.options.elementWidth + "px",
-                height: self.options.elementHeight + "px"
+                width: self.options.elementWidth + 'px',
+                height: self.options.elementHeight + 'px'
             })
             .appendTo(self.$menu);
 
         self.$bar = new Ox.Bar({
-                orientation: "horizontal",
+                orientation: 'horizontal',
                 size: 24
             })
             .appendTo(self.$menu);
@@ -4179,26 +4193,26 @@ requires
             .appendTo(self.$bar);
 
         self.$doneButton = new Ox.Button({
-                title: "Done",
+                title: 'Done',
                 width: 48
             })
             .click(hideMenu)
             .appendTo(self.$bar);
 
-        self.$layer = $("<div>")
-            .addClass("OxLayer")
+        self.$layer = $('<div>')
+            .addClass('OxLayer')
             .click(hideMenu);
 
         function hideMenu() {
             self.$menu.detach();
             self.$layer.detach();
             self.$selectButton
-                .removeClass("OxSelected")
+                .removeClass('OxSelected')
                 .css({
-                    MozBorderRadius: "8px",
-                    WebkitBorderRadius: "8px"
+                    MozBorderRadius: '8px',
+                    WebkitBorderRadius: '8px'
                 });
-            that.triggerEvent("hide");
+            that.triggerEvent('hide');
         };
 
         function showMenu() {
@@ -4206,19 +4220,19 @@ requires
                 left = offset.left,
                 top = offset.top + 15;
             self.$selectButton
-                .addClass("OxSelected")
+                .addClass('OxSelected')
                 .css({
-                    MozBorderRadius: "8px 8px 0 0",
-                    WebkitBorderRadius: "8px 8px 0 0"
+                    MozBorderRadius: '8px 8px 0 0',
+                    WebkitBorderRadius: '8px 8px 0 0'
                 });
             self.$layer.appendTo($body);
             self.$menu
                 .css({
-                    left: left + "px",
-                    top: top + "px"
+                    left: left + 'px',
+                    top: top + 'px'
                 })
                 .appendTo($body);
-            that.triggerEvent("show");
+            that.triggerEvent('show');
         };
 
         return that;
@@ -4228,17 +4242,17 @@ requires
     Ox.ColorPicker = function(options, self) {
 
         var self = self || {},
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
-                    id: "",
-                    value: "0, 0, 0"
+                    id: '',
+                    value: '0, 0, 0'
                 })
                 .options(options || {});
 
         Ox.print(self)
         self.$ranges = [];
-        self.rgb = ["red", "green", "blue"];
-        self.values = self.options.value.split(", ");
+        self.rgb = ['red', 'green', 'blue'];
+        self.values = self.options.value.split(', ');
 
         $.each(Ox.range(3), function(i) {
             self.$ranges[i] = new Ox.Range({
@@ -4252,25 +4266,25 @@ requires
                     value: self.values[i]
                 })
                 .css({
-                    position: "absolute",
-                    top: (i * 15) + "px"
+                    position: 'absolute',
+                    top: (i * 15) + 'px'
                 })
-                .bindEvent("change", function(event, data) {
+                .bindEvent('change', function(event, data) {
                     change(i, data.value);
                 })
                 .appendTo(that);
             // fixme: make self.$ranges[i].children() work
             if (i == 0) {
-                self.$ranges[i].$element.children("input.OxOverlapRight").css({
+                self.$ranges[i].$element.children('input.OxOverlapRight').css({
                     MozBorderRadius: 0,
                     WebkitBorderRadius: 0
                 });
-                self.$ranges[i].$element.children("input.OxOverlapLeft").css({
-                    MozBorderRadius: "0 8px 0 0",
-                    WebkitBorderRadius: "0 8px 0 0"
+                self.$ranges[i].$element.children('input.OxOverlapLeft').css({
+                    MozBorderRadius: '0 8px 0 0',
+                    WebkitBorderRadius: '0 8px 0 0'
                 });
             } else {
-                self.$ranges[i].$element.children("input").css({
+                self.$ranges[i].$element.children('input').css({
                     MozBorderRadius: 0,
                     WebkitBorderRadius: 0
                 });
@@ -4286,9 +4300,9 @@ requires
 
         function change(index, value) {
             self.values[index] = value;
-            self.options.value = self.values.join(", ");
+            self.options.value = self.values.join(', ');
             that.$label.css({
-                background: "rgb(" + self.options.value + ")"
+                background: 'rgb(' + self.options.value + ')'
             });
             $.each(Ox.range(3), function(i) {
                 if (i != index) {
@@ -4297,19 +4311,19 @@ requires
                     });
                 }
             });
-            that.triggerEvent("change", {
+            that.triggerEvent('change', {
                 value: self.options.value
             });
         }
 
         function getColors(index) {
             return [
-                "rgb(" + $.map(Ox.range(3), function(v) {
+                'rgb(' + $.map(Ox.range(3), function(v) {
                     return v == index ? 0 : self.values[v];
-                }).join(", ") + ")",
-                "rgb(" + $.map(Ox.range(3), function(v) {
+                }).join(', ') + ')',
+                'rgb(' + $.map(Ox.range(3), function(v) {
                     return v == index ? 255 : self.values[v];
-                }).join(", ") + ")"
+                }).join(', ') + ')'
             ]
         }
 
@@ -4321,40 +4335,40 @@ requires
 
         var self = $.extend(self || {}, {
                 options: $.extend({
-                    id: "",
-                    value: "United States"
+                    id: '',
+                    value: 'United States'
                 }, options)
             }),
             that;
 
-        self.$element = new Ox.Element("div")
+        self.$element = new Ox.Element('div')
             .css({
-                width: "256px",
-                height: "192px"
+                width: '256px',
+                height: '192px'
             })
             .append(
                 self.$topBar = new Ox.Bar({
                         size: 16
                     })
                     .css({
-                        MozBorderRadius: "0 8px 0 0",
-                        WebkitBorderRadius: "0 8px 0 0"
+                        MozBorderRadius: '0 8px 0 0',
+                        WebkitBorderRadius: '0 8px 0 0'
                     })
                     .append(
                         self.$input = new Ox.Input({
                                 clear: true,
-                                id: self.options.id + "Input",
-                                placeholder: "Find",
+                                id: self.options.id + 'Input',
+                                placeholder: 'Find',
                                 width: 256
                             })
-                            .bindEvent("submit", findPlace)
+                            .bindEvent('submit', findPlace)
                     )
             )
             .append(
-                self.$container = new Ox.Element("div")
+                self.$container = new Ox.Element('div')
                     .css({
-                        width: "256px",
-                        height: "160px"
+                        width: '256px',
+                        height: '160px'
                     })
             )
             .append(
@@ -4364,27 +4378,27 @@ requires
                     .append(
                         self.$range = new Ox.Range({
                                 arrows: true,
-                                id: self.options.id + "Range",
+                                id: self.options.id + 'Range',
                                 max: 22,
                                 size: 256,
                                 thumbSize: 32,
                                 thumbValue: true
                             })
-                            .bindEvent("change", changeZoom)
+                            .bindEvent('change', changeZoom)
                     )
             );
 
-        self.$input.$element.children("input[type=text]").css({
-            width: "230px",
-            paddingLeft: "2px",
-            MozBorderRadius: "0 8px 8px 0",
-            WebkitBorderRadius: "0 8px 8px 0"
+        self.$input.$element.children('input[type=text]').css({
+            width: '230px',
+            paddingLeft: '2px',
+            MozBorderRadius: '0 8px 8px 0',
+            WebkitBorderRadius: '0 8px 8px 0'
         });
-        self.$input.$element.children("input[type=image]").css({
-            MozBorderRadius: "0 8px 0 0",
-            WebkitBorderRadius: "0 8px 0 0"
+        self.$input.$element.children('input[type=image]').css({
+            MozBorderRadius: '0 8px 0 0',
+            WebkitBorderRadius: '0 8px 0 0'
         });
-        self.$range.$element.children("input").css({
+        self.$range.$element.children('input').css({
             MozBorderRadius: 0,
             WebkitBorderRadius: 0
         });
@@ -4397,14 +4411,14 @@ requires
                 overlap: self.options.overlap,
                 value: self.options.value
             }, self)
-            .bindEvent("show", showPicker);
+            .bindEvent('show', showPicker);
 
-        that.$label.bind("click", clickLabel)
+        that.$label.bind('click', clickLabel)
 
         self.map = false;
 
         function changeZoom(event, data) {
-            Ox.print("changeZoom")
+            Ox.print('changeZoom')
             self.$map.zoom(data.value);
         }
 
@@ -4414,14 +4428,14 @@ requires
                 self.$input.options({
                     value: name
                 })
-                .triggerEvent("submit", {
+                .triggerEvent('submit', {
                     value: name
                 });
             }
         }
 
         function findPlace(event, data) {
-            Ox.print("findPlace", data);
+            Ox.print('findPlace', data);
             self.$map.find(data.value, function(location) {
                 if (location) {
                     that.$label.html(location.name.formatted);
@@ -4442,12 +4456,12 @@ requires
         function showPicker() {
             if (!self.map) {
                 self.$map = new Ox.Map({
-                        id: self.options.id + "Map",
+                        id: self.options.id + 'Map',
                         places: [self.options.value]
                     })
                     .css({
-                        width: "256px",
-                        height: "160px"
+                        width: '256px',
+                        height: '160px'
                     })
                     .bindEvent({
                         select: onSelect,
@@ -4474,7 +4488,7 @@ requires
         options:
             clear                   boolean, clear button, or not
             disabled                boolean, disabled, or not
-            height                  height (px), if type is "textarea"
+            height                  height (px), if type is 'textarea'
             id
             label                   string, or
                                     array [{ id, title, checked }] (selectable label) or
@@ -4490,8 +4504,8 @@ requires
             separatorWidth          integer (px), or
                                     array of integers
             serialize               function
-            size                    "large", "medium" or "small"
-            type                    "password", "select" or "text"
+            size                    'large', 'medium' or 'small'
+            type                    'password', 'select' or 'text'
             unit                    string, or 
                                     array [{ id, title, checked }] (selectable unit)
             unitWidth               integer (px)
@@ -4503,7 +4517,7 @@ requires
         */
 
         var self = self || {},
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
                     autocomplete: null,
                     autocorrect: null,
@@ -4511,39 +4525,39 @@ requires
                     autosuggestHighlight: false,
                     autosuggestSubmit: false,
                     autovalidate: null,
-                    autovalidateName: "Value",
+                    autovalidateName: 'Value',
                     clear: false,
                     disabled: false,
                     height: 128,
-                    id: "",
-                    key: "",
-                    label: "",
+                    id: '',
+                    key: '',
+                    label: '',
                     labelWidth: 64,
-                    placeholder: "",
-                    separator: "",
+                    placeholder: '',
+                    separator: '',
                     separatorWidth: 16,
                     serialize: null,
-                    size: "medium",
-                    type: "text",
-                    unit: "",
+                    size: 'medium',
+                    type: 'text',
+                    unit: '',
                     unitWidth: 64,
-                    value: "",
+                    value: '',
                     width: 128
                 })
                 .options(options || {})
-                .addClass("OxInput Ox" + Ox.toTitleCase(self.options.size))
+                .addClass('OxInput Ox' + Ox.toTitleCase(self.options.size))
                 .css({
-                    width: self.options.width + "px"
+                    width: self.options.width + 'px'
                 });
 
         $.extend(self, {
             clearWidth: 16,
-            hasMultipleKeys: Ox.isArray(self.options.label) && "label" in self.options.label[0],
+            hasMultipleKeys: Ox.isArray(self.options.label) && 'label' in self.options.label[0],
             hasMultipleValues: Ox.isArray(self.options.value) &&
-                    (self.options.type != "select" || "items" in self.options.value[0]),
+                    (self.options.type != 'select' || 'items' in self.options.value[0]),
             hasSelectableKeys: Ox.isArray(self.options.label) || Ox.isArray(self.options.placeholder),
             hasSelectableUnits: Ox.isArray(self.options.unit),
-            keyName: self.options.label ? "label" : (self.options.placeholder ? "placeholder" : ""),
+            keyName: self.options.label ? 'label' : (self.options.placeholder ? 'placeholder' : ''),
             placeholderWidth: 16,
             selectedKey: [0], // fixme: only set on demand?
             selectedValue: 0,
@@ -4551,25 +4565,25 @@ requires
             /* valid: autovalidateCall(true) */
         });
 
-        $.each(["autocomplete", "autocorrect", "autosuggest", "autovalidate"], function(i, v) {
+        $.each(['autocomplete', 'autocorrect', 'autosuggest', 'autovalidate'], function(i, v) {
             //if (!Ox.isFunction(self.options[v])) {
                 self.options[v] = {
-                    "": self.options[v]
+                    '': self.options[v]
                 };
             //}
         });
 
         if (self.keyName && !self.hasMultipleKeys) {
             self.options[self.keyName] = [$.extend({
-                id: "",
+                id: '',
                 label: self.options[self.keyName],
-            }, self.keyName == "label" ? {
-                id: "",
+            }, self.keyName == 'label' ? {
+                id: '',
                 width: self.options.labelWidth
             } : {})];
             if (!self.hasSelectableKeys) {
                 self.options[self.keyName][0].label = [{
-                    id: "",
+                    id: '',
                     title: self.options[self.keyName][0].label
                 }];
             }
@@ -4600,31 +4614,31 @@ requires
                     (self.options.value.length - 1) * self.options.separatorWidth;
         }
         */
-        Ox.print("self.hasMulVal", self.hasMultipleValues);
-        Ox.print("self.options.value", self.options.value)
+        Ox.print('self.hasMulVal', self.hasMultipleValues);
+        Ox.print('self.options.value', self.options.value)
         if (!self.hasMultipleValues) {
-            if (self.options.type == "select") {
+            if (self.options.type == 'select') {
                 self.options.value = [{
-                    id: "",
+                    id: '',
                     items: self.options.value,
                     width: self.valueWidth
                 }];
-            } else if (self.options.type == "range") {
+            } else if (self.options.type == 'range') {
                 self.options.value = [$.extend({
-                    id: "",
+                    id: '',
                     size: self.valueWidth
                 }, self.options.value)];
             } else {
                 self.options.value = [{
-                    id: "",
+                    id: '',
                     value: self.options.value,
                     width: self.valueWidth
                 }]
             }
         }
-        Ox.print("self.options.value", self.options.value)
+        Ox.print('self.options.value', self.options.value)
         self.values = self.options.value.length;
-        Ox.print(self.options.id, "self.values", self.values)
+        Ox.print(self.options.id, 'self.values', self.values)
 
         if (Ox.isString(self.options.separator)) {
             self.options.separator = $.map(new Array(self.values - 1), function(v, i) {
@@ -4647,36 +4661,36 @@ requires
                 });
             } else {
                 self.options.unit = [{
-                    id: "",
+                    id: '',
                     title: self.options.unit
                 }];
             }
         }
 
-        Ox.print("self", self);
+        Ox.print('self', self);
 
         if (self.keyName) {
             that.$key = [];
             $.each(self.options[self.keyName], function(keyPos, key) {
-                Ox.print("keyPos key", keyPos, key)
-                if (self.keyName == "label" && key.label.length == 1) {
+                Ox.print('keyPos key', keyPos, key)
+                if (self.keyName == 'label' && key.label.length == 1) {
                     that.$key[keyPos] = new Ox.Label({
-                            overlap: "right",
+                            overlap: 'right',
                             title: key.label[0].title,
                             width: self.options.labelWidth
                         })
                         .css({
-                            float: "left"
+                            float: 'left'
                         })
                         .click(function() {
                             that.$input[0].focus();
                         })
                         .appendTo(that);
                 } else if (key.label.length > 1) {
-                    Ox.print("key.length > 1")
+                    Ox.print('key.length > 1')
                     self.selectKeyId = self.options.id + Ox.toTitleCase(self.keyName) +
-                            (self.options[self.keyName].length == 1 ? "" : keyPos);
-                    Ox.print("three", self.selectedKey, keyPos, self.selectedKey[keyPos]);
+                            (self.options[self.keyName].length == 1 ? '' : keyPos);
+                    Ox.print('three', self.selectedKey, keyPos, self.selectedKey[keyPos]);
                     that.$key[keyPos] = new Ox.Select({
                             id: self.selectKeyId,
                             items: $.map(key.label, function(value, valuePos) {
@@ -4687,27 +4701,27 @@ requires
                                     title: value.title
                                 };
                             }),
-                            overlap: "right",
-                            type: self.options.label ? "text" : "image",
+                            overlap: 'right',
+                            type: self.options.label ? 'text' : 'image',
                             width: self.options.label ? (self.options.label.length == 1 ? self.options.labelWidth : key.width) : self.placeholderWidth
                         })
                         .css({
-                            float: "left"
+                            float: 'left'
                         })
                         .appendTo(that);
-                    that.bindEvent("change_" + self.selectKeyId, changeKey);
+                    that.bindEvent('change_' + self.selectKeyId, changeKey);
                 }
             });
         }
 
         if (self.options.clear) {
             that.$clear = new Ox.Button({
-                    overlap: "left",
-                    type: "image",
-                    value: "clear"
+                    overlap: 'left',
+                    type: 'image',
+                    value: 'clear'
                 })
                 .css({
-                    float: "right"
+                    float: 'right'
                 })
                 .click(clear)
                 .appendTo(that);
@@ -4715,23 +4729,23 @@ requires
 
         if (self.options.unit.length == 1) {
             that.$unit = new Ox.Label({
-                    overlap: "left",
+                    overlap: 'left',
                     title: self.options.unit[0].title,
                     width: self.options.unitWidth
                 })
                 .css({
-                    float: "right"
+                    float: 'right'
                 })
                 .click(function() {
                     that.$input[0].focus();
                 })
                 .appendTo(that);
         } else if (self.options.unit.length > 1) {
-            self.selectUnitId = self.options.id + "Unit";
+            self.selectUnitId = self.options.id + 'Unit';
             that.$unit = new Ox.Select({
                     id: self.selectUnitId,
                     items: $.map(self.options.unit, function(unit, i) {
-                        Ox.print("unit", unit)
+                        Ox.print('unit', unit)
                         return {
                             checked: i == 0,
                             id: unit.id,
@@ -4739,12 +4753,12 @@ requires
                             title: unit.title
                         };
                     }),
-                    overlap: "left",
+                    overlap: 'left',
                     size: self.options.size,
                     width: self.options.unitWidth
                 })
                 .css({
-                    float: "right"
+                    float: 'right'
                 })
                 .appendTo(that);
         }
@@ -4754,13 +4768,13 @@ requires
             $.each(self.options.value, function(i, v) {
                 if (i < self.values - 1) {
                     that.$separator[i] = new Ox.Label({
-                            textAlign: "center",
+                            textAlign: 'center',
                             title: self.options.separator[i],
                             width: self.options.separatorWidth[i] + 32
                         })
                         .css({
-                            float: "left",
-                            marginLeft: (v.width - (i == 0 ? 16 : 32)) + "px"
+                            float: 'left',
+                            marginLeft: (v.width - (i == 0 ? 16 : 32)) + 'px'
                         })
                         .click(function() {
                             that.$input[0].focus();
@@ -4772,25 +4786,25 @@ requires
         that.$input = [];
         //self.margin = 0;
         $.each(self.options.value, function(i, v) {
-            Ox.print("o k i", self.options, self.keyName, i);
+            Ox.print('o k i', self.options, self.keyName, i);
             var id = self.keyName ? $.map(self.selectedKey, function(v, i) {
                     return self.options[self.keyName][i].id;
-                }).join(".") : "";
+                }).join('.') : '';
             //self.margin -= (i == 0 ? 16 : self.options.value[i - 1].width)
-            Ox.print("v:", v, "id:", id)
-            if (self.options.type == "select") {
+            Ox.print('v:', v, 'id:', id)
+            if (self.options.type == 'select') {
                 that.$input[i] = new Ox.Select({
                         id: v.id,
                         items: v.items,
                         width: v.width
                     }).
                     css({
-                        float: "left"
+                        float: 'left'
                     });
-            } else if (self.options.type == "range") {
+            } else if (self.options.type == 'range') {
                 that.$input[i] = new Ox.Range(v)
                     .css({
-                        float: "left"
+                        float: 'left'
                     });
             } else {
                 that.$input[i] = new Ox.InputElement({
@@ -4803,10 +4817,10 @@ requires
                     autovalidateName: self.options.autovalidateName,
                     disabled: self.options.disabled,
                     height: self.options.height,
-                    id: self.options.id + "Input" + Ox.toTitleCase(v.id),
-                    key: self.hasSelectableKeys ? self.options[self.keyName][0].label[self.selectedKey[0]].id : "",
+                    id: self.options.id + 'Input' + Ox.toTitleCase(v.id),
+                    key: self.hasSelectableKeys ? self.options[self.keyName][0].label[self.selectedKey[0]].id : '',
                     parent: that,
-                    placeholder: self.options.placeholder ? self.options.placeholder[0].label[0].title : "",
+                    placeholder: self.options.placeholder ? self.options.placeholder[0].label[0].title : '',
                     size: self.options.size,
                     type: self.options.type,
                     value: v.value,
@@ -4815,7 +4829,7 @@ requires
             }
             that.$input[i]
                 .css($.extend({}, self.options.value.length > 1 ? {
-                    float: "left",
+                    float: 'left',
                     marginLeft: -Ox.sum($.map(self.options.value, function(v_, i_) {
                         return i_ > i ? self.options.value[i_ - 1].width + self.options.separatorWidth[i_ - 1] : (i_ == i ? 16 : 0);
                     }))
@@ -4826,7 +4840,7 @@ requires
         //width(self.options.width);
 
         function changeKey(event, data) {
-            Ox.print("changeKey", data);
+            Ox.print('changeKey', data);
             if (data) { // fixme: necessary?
                 self.key = { 
                     id: data.id,
@@ -4845,7 +4859,7 @@ requires
                     placeholder: data.value // fixme: should be data.title
                 });
                 /*
-                if (that.$input.hasClass("OxPlaceholder")) {
+                if (that.$input.hasClass('OxPlaceholder')) {
                     that.$input.val(self.key.title);
                     //that.$input.focus();
                 } else {
@@ -4862,29 +4876,29 @@ requires
 
         function clear() {
             $.each(that.$input, function(i, v) {
-                v.val("");
+                v.val('');
             });
             that.$input[0].focus();
         }
 
         function height(value) {
             var stop = 8 / value;
-            if (self.options.type == "textarea") {
+            if (self.options.type == 'textarea') {
                 that.$element
                     .height(value)
                     .css({
-                        background: "-moz-linear-gradient(top, rgb(224, 224, 224), rgb(208, 208, 208) " + (stop * 100) + "%, rgb(208, 208, 208) " + (100 - stop * 100) + "%, rgb(192, 192, 192))"
+                        background: '-moz-linear-gradient(top, rgb(224, 224, 224), rgb(208, 208, 208) ' + (stop * 100) + '%, rgb(208, 208, 208) ' + (100 - stop * 100) + '%, rgb(192, 192, 192))'
                     })
                     .css({
-                        background: "-webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), color-stop(" + stop + ", rgb(208, 208, 208)), color-stop(" + (1 - stop) + ", rgb(208, 208, 208)), to(rgb(192, 192, 192)))"
+                        background: '-webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), color-stop(' + stop + ', rgb(208, 208, 208)), color-stop(' + (1 - stop) + ', rgb(208, 208, 208)), to(rgb(192, 192, 192)))'
                     });
                 that.$input
                     .height(value)
                     .css({
-                        background: "-moz-linear-gradient(top, rgb(224, 224, 224), rgb(240, 240, 240) " + (stop * 100) + "%, rgb(240, 240, 240) " + (100 - stop * 100) + "%, rgb(255, 255, 255))"
+                        background: '-moz-linear-gradient(top, rgb(224, 224, 224), rgb(240, 240, 240) ' + (stop * 100) + '%, rgb(240, 240, 240) ' + (100 - stop * 100) + '%, rgb(255, 255, 255))'
                     })
                     .css({
-                        background: "-webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), color-stop(" + stop + ", rgb(240, 240, 240)), color-stop(" + (1 - stop) + ", rgb(240, 240, 240)), to(rgb(255, 255, 255)))"
+                        background: '-webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), color-stop(' + stop + ', rgb(240, 240, 240)), color-stop(' + (1 - stop) + ', rgb(240, 240, 240)), to(rgb(255, 255, 255)))'
                     });
             }
         }
@@ -4894,10 +4908,10 @@ requires
         }
 
         function submit() {
-            Ox.print("submit")
+            Ox.print('submit')
             var value = that.$input.val();
             that.$input.blur();
-            that.triggerEvent("submit", self.options.key ? {
+            that.triggerEvent('submit', self.options.key ? {
                 key: self.options.key,
                 value: value
             } : value);
@@ -4906,7 +4920,7 @@ requires
         function width(value) {
             that.$element.width(value);
             that.$input.width(
-                value - (self.options.type == "textarea" ? 0 : 12) -
+                value - (self.options.type == 'textarea' ? 0 : 12) -
                         (self.options.label ? self.options.labelWidth : 0) -
                         (self.options.placeholder.length > 1 ? 16 : 0) -
                         (self.options.unit ? self.options.unitWidth : 0) -
@@ -4915,9 +4929,9 @@ requires
         }
 
         self.onChange = function(key, value) {
-            if (key == "height") {
+            if (key == 'height') {
                 height(value);
-            } else if (key == "width") {
+            } else if (key == 'width') {
                 width(value);
             }
         };
@@ -4935,7 +4949,7 @@ requires
 
         var self = self || {},
             that = new Ox.Element(
-                    options.type == "textarea" ? "textarea" : "input", self
+                    options.type == 'textarea' ? 'textarea' : 'input', self
                 )
                 .defaults({
                     autocomplete: null,
@@ -4946,42 +4960,42 @@ requires
                     autovalidate: null,
                     disabled: false,
                     height: 128,
-                    id: "",
-                    key: "",
+                    id: '',
+                    key: '',
                     parent: null,
-                    placeholder: "",
-                    size: "medium",
-                    type: "text",
-                    value: "",
+                    placeholder: '',
+                    size: 'medium',
+                    type: 'text',
+                    value: '',
                     width: 128                    
                 })
                 .options(options || {})
-                .addClass("OxInput Ox" + Ox.toTitleCase(self.options.size) + (
-                    (self.options.placeholder && self.options.value === "") ?
-                    " OxPlaceholder" : ""
+                .addClass('OxInput Ox' + Ox.toTitleCase(self.options.size) + (
+                    (self.options.placeholder && self.options.value === '') ?
+                    ' OxPlaceholder' : ''
                 ))
-                .attr(self.options.type == "textarea" ? {} : {
+                .attr(self.options.type == 'textarea' ? {} : {
                     type: self.options.type
                 })
                 .css({
-                    float: "left",
-                    width: (self.options.width - 14) + "px"
+                    float: 'left',
+                    width: (self.options.width - 14) + 'px'
                 })
                 .val(
-                    (self.options.placeholder && self.options.value === "") ?
+                    (self.options.placeholder && self.options.value === '') ?
                     self.options.placeholder : self.options.value
                 )
                 .blur(blur)
                 .change(change)
                 .focus(focus);
 
-        Ox.print("InputElement self.options", self.options)
+        Ox.print('InputElement self.options', self.options)
 
         self.bindKeyboard = self.options.autocomplete || self.options.autocorrect ||
                         self.options.autosuggest || self.options.autovalidate;
 
         if (self.options.autosuggest) {
-            self.autosuggestId = self.options.id + "Menu"; // fixme: we do this in other places ... are we doing it the same way? var name?
+            self.autosuggestId = self.options.id + 'Menu'; // fixme: we do this in other places ... are we doing it the same way? var name?
             self.$autosuggestMenu = new Ox.Menu({
                 element: that.$element,
                 id: self.autosuggestId,
@@ -4991,10 +5005,10 @@ requires
                 },
                 size: self.options.size
             });
-            that.bindEvent("click_" + self.autosuggestId, clickMenu);
+            that.bindEvent('click_' + self.autosuggestId, clickMenu);
         }
 
-        that.bindEvent($.extend(self.options.type == "textarea" ? {} : {
+        that.bindEvent($.extend(self.options.type == 'textarea' ? {} : {
             key_enter: submit
         }, {
             key_escape: cancel
@@ -5002,8 +5016,8 @@ requires
 
         function autocomplete(value) {
             var value = value.toLowerCase(),
-                ret = "";
-            if (value !== "") {
+                ret = '';
+            if (value !== '') {
                 $.each(self.options.autocomplete, function(i, v) {
                     if (v.toLowerCase().indexOf(value) == 0) {
                         ret = v;
@@ -5034,13 +5048,13 @@ requires
 
         function autocorrect(value) {
             var length = value.length;
-            return $.map(value.toLowerCase().split(""), function(v, i) {
+            return $.map(value.toLowerCase().split(''), function(v, i) {
                 if (new RegExp(self.options.autocorrect)(v)) {
                     return v
                 } else {
                     return null;
                 }
-            }).join("");
+            }).join('');
         }
 
         function autocorrectCall(blur) {
@@ -5061,9 +5075,9 @@ requires
         function autosuggest(value) {
             var value = value.toLowerCase(),
                 values = [[], []];
-            if (value !== "") {
+            if (value !== '') {
                 $.each(self.options.key ? self.options.autosuggest[self.options.key] : self.options.autosuggest, function(i, v) {
-                    //Ox.print("v...", v)
+                    //Ox.print('v...', v)
                     var index = v.toLowerCase().indexOf(value);
                     index > -1 && values[index == 0 ? 0 : 1].push(v);
                 });
@@ -5085,17 +5099,17 @@ requires
             var values = values || [],
                 selected = values.length == 1 ? 0 : -1,
                 value = that.$element.val().toLowerCase();
-            //Ox.print("values", values);
+            //Ox.print('values', values);
             if (values.length) {
                 values = $.map(values, function(v, i) {
                     if (value == v.toLowerCase()) {
                         selected = i;
                     }
                     return {
-                        id: v.toLowerCase().replace(/ /g, "_"), // fixme: need function to do lowercase, underscores etc?
+                        id: v.toLowerCase().replace(/ /g, '_'), // fixme: need function to do lowercase, underscores etc?
                         title: self.options.autosuggestHighlight ? v.replace(
-                            new RegExp("(" + value + ")", "ig"),
-                            "<span class=\"OxHighlight\">$1</span>"
+                            new RegExp('(' + value + ')', 'ig'),
+                            '<span class="OxHighlight">$1</span>'
                         ) : v
                     };
                 });
@@ -5112,14 +5126,14 @@ requires
         function autovalidate(value) {
             return {
                 valid: self.options.autovalidate(value) != null,
-                message: "Invalid " + self.options.name
+                message: 'Invalid ' + self.options.name
             };
         }
 
         function autovalidateCall(blur) {
             var blur = blur || false,
                 value = that.$element.val();
-            if (value !== "") {
+            if (value !== '') {
                 Ox.isFunction(self.options.autovalidate) ?
                     self.options.autovalidate(value, autovalidateCallback) :
                     autovalidateCallback(autovalidate(value), blur);
@@ -5127,7 +5141,7 @@ requires
                 autovalidateCallback({
                     blur: blur,
                     valid: false,
-                    message: "Empty " + self.options.name
+                    message: 'Empty ' + self.options.name
                 });
             }
         }
@@ -5135,27 +5149,27 @@ requires
         function autovalidateCallback(data, blur) {
             if (data.valid != self.valid) {
                 self.valid = data.valid;
-                that.triggerEvent("validate", $.extend(data, {
+                that.triggerEvent('validate', $.extend(data, {
                     blur: blur
                 }));
             }
         }
 
         function blur() {
-            if (!self.options.autosuggest || self.$autosuggestMenu.is(":hidden")) {
-                Ox.print("losing focus...")
+            if (!self.options.autosuggest || self.$autosuggestMenu.is(':hidden')) {
+                Ox.print('losing focus...')
                 that.loseFocus();
-                self.options.parent.removeClass("OxFocus");
+                self.options.parent.removeClass('OxFocus');
                 self.options.autocorrect && autocorrectCall(true);
                 // self.options.autosuggest && self.$autosuggestMenu.hideMenu();
                 self.options.autovalidate && autovalidateCall(true);
-                if (self.options.placeholder && that.$element.val() === "") {
-                    that.$element.addClass("OxPlaceholder").val(self.options.placeholder);
+                if (self.options.placeholder && that.$element.val() === '') {
+                    that.$element.addClass('OxPlaceholder').val(self.options.placeholder);
                 }
             }
             if (self.bindKeyboard) {
-                $document.unbind("keydown", keypress);
-                $document.unbind("keypress", keypress);
+                $document.unbind('keydown', keypress);
+                $document.unbind('keypress', keypress);
             }
         }
 
@@ -5168,11 +5182,11 @@ requires
         }
 
         function clear() {
-            that.$element.val("").focus();
+            that.$element.val('').focus();
         }
 
         function clickMenu(event, data) {
-            Ox.print("clickMenu", data);
+            Ox.print('clickMenu', data);
             that.$element.val(data.title);
             //self.$autosuggestMenu.hideMenu();
             self.options.autosuggestSubmit && submit();
@@ -5198,21 +5212,21 @@ requires
         function focus() {
             var val = that.$element.val();
             that.gainFocus();
-            self.options.parent.addClass("OxFocus");
-            if (that.$element.hasClass("OxPlaceholder")) {
-                that.$element.val("").removeClass("OxPlaceholder");
+            self.options.parent.addClass('OxFocus');
+            if (that.$element.hasClass('OxPlaceholder')) {
+                that.$element.val('').removeClass('OxPlaceholder');
             }
             if (self.bindKeyboard) {
                 // fixme: different in webkit and firefox (?), see keyboard handler, need generic function
                 $document.keydown(keypress);
                 $document.keypress(keypress);
-                Ox.print("calling autosuggest...")
+                Ox.print('calling autosuggest...')
                 self.options.autosuggest && setTimeout(autosuggestCall, 0); // fixme: why is the timeout needed?
             }
         }
 
         function keypress(event) {
-            Ox.print("keyCode", event.keyCode)
+            Ox.print('keyCode', event.keyCode)
             if (event.keyCode != 9 && event.keyCode != 13 && event.keyCode != 27) { // fixme: can't 13 and 27 return false?
                 setTimeout(function() { // fixme: document what this timeout is for
                     var value = that.$element.val();
@@ -5232,14 +5246,14 @@ requires
         }
 
         self.onChange = function(key, value) {
-            if (key == "placeholder") {
-                that.$element.hasClass("OxPlaceholder") && that.$element.val(value);
-            } else if (key == "value") {
+            if (key == 'placeholder') {
+                that.$element.hasClass('OxPlaceholder') && that.$element.val(value);
+            } else if (key == 'value') {
                 if (self.options.placeholder) {
-                    if (value === "") {
-                        that.$element.addClass("OxPlaceholder").val(self.options.placeholder);
+                    if (value === '') {
+                        that.$element.addClass('OxPlaceholder').val(self.options.placeholder);
                     } else {
-                        that.$element.removeClass("OxPlaceholder");
+                        that.$element.removeClass('OxPlaceholder');
                     }
                 }
                 change(); // fixme: keypress too
@@ -5261,10 +5275,10 @@ requires
                     animate: false,
                     arrows: false,
                     arrowStep: 1,
-                    arrowSymbols: ["previous", "next"],
+                    arrowSymbols: ['previous', 'next'],
                     max: 100,
                     min: 0,
-                    orientation: "horizontal",
+                    orientation: 'horizontal',
                     step: 1,
                     size: 128,
                     thumbSize: 16,
@@ -5279,9 +5293,9 @@ requires
                         options.arrowStep : options.step,
                     trackImages: $.makeArray(options.trackImages || [])
                 }))
-                .addClass("OxRange")
+                .addClass('OxRange')
                 .css({
-                    width: self.options.size + "px"
+                    width: self.options.size + 'px'
                 });
 
         // fixme: self. ... ?
@@ -5294,38 +5308,38 @@ requires
         */
         that.$element
             .css({
-                width: self.options.size + "px"
+                width: self.options.size + 'px'
             });
         if (self.options.arrows) {
             var $arrowDec = Ox.Button({
-                    style: "symbol",
-                    type: "image",
+                    style: 'symbol',
+                    type: 'image',
                     value: self.options.arrowSymbols[0]
                 })
-                .addClass("OxArrow")
+                .addClass('OxArrow')
                 .mousedown(mousedownArrow)
                 .click(clickArrowDec)
                 .appendTo(that.$element);
         }
         var $track = new Ox.Element()
-                .addClass("OxTrack")
+                .addClass('OxTrack')
                 .mousedown(clickTrack)
                 .appendTo(that.$element);
 
         if (trackImages) {
             var width = parseFloat(screen.width / trackImages),
-                $image = $("<canvas>")
+                $image = $('<canvas>')
                     .attr({
                         width: width * trackImages,
                         height: 14
                     })
-                    .addClass("OxImage")
+                    .addClass('OxImage')
                     .appendTo($track.$element),
                 c = $image[0].getContext('2d');
                 c.mozImageSmoothingEnabled = false; // we may want to remove this later
             $.each(self.options.trackImages, function(i, v) {
                 var left = 0;
-                $("<img/>")
+                $('<img/>')
                     .attr({
                         src: v
                     })
@@ -5336,16 +5350,16 @@ requires
             });
         }
         var $thumb = Ox.Button({})
-            .addClass("OxThumb")
+            .addClass('OxThumb')
             .appendTo($track);
-            Ox.print("----")
+            Ox.print('----')
         if (self.options.arrows) {
             var $arrowInc = Ox.Button({
-                    style: "symbol",
-                    type: "image",
+                    style: 'symbol',
+                    type: 'image',
                     value: self.options.arrowSymbols[1]
                 })
-                .addClass("OxArrow")
+                .addClass('OxArrow')
                 .mousedown(mousedownArrow)
                 .click(clickArrowInc)
                 .appendTo(that.$element);
@@ -5358,17 +5372,17 @@ requires
         */
 
         function clickArrowDec() {
-            that.removeClass("OxActive");
+            that.removeClass('OxActive');
             setValue(self.options.value - self.options.arrowStep, 200)
         }
         function clickArrowInc() {
-            that.removeClass("OxActive");
+            that.removeClass('OxActive');
             setValue(self.options.value + self.options.arrowStep, 200);
         }
         function clickTrack(e) {
             //Ox.Focus.focus();
             var left = $track.offset().left,
-                offset = $(e.target).hasClass("OxThumb") ?
+                offset = $(e.target).hasClass('OxThumb') ?
                     e.clientX - $thumb.offset().left - thumbWidth / 2 - 2 : 0;
             function val(e) {
                 return getVal(e.clientX - left - offset);
@@ -5377,8 +5391,8 @@ requires
             $window.mousemove(function(e) {
                 setValue(val(e));
             });
-            $window.one("mouseup", function() {
-                $window.unbind("mousemove");
+            $window.one('mouseup', function() {
+                $window.unbind('mousemove');
             });
         }
         function getPx(val) {
@@ -5395,13 +5409,13 @@ requires
                     self.options.min, self.options.max);
         }
         function mousedownArrow() {
-            that.addClass("OxActive");
+            that.addClass('OxActive');
         }
         function setThumb(animate) {
-            var animate = typeof animate != "undefined" ? animate : 0;
+            var animate = typeof animate != 'undefined' ? animate : 0;
             $thumb.animate({
-                marginLeft: (getPx(self.options.value) - 2) + "px",
-                width: thumbWidth + "px"
+                marginLeft: (getPx(self.options.value) - 2) + 'px',
+                width: thumbWidth + 'px'
             }, self.options.animate ? animate : 0, function() {
                 if (self.options.thumbValue) {
                     $thumb.options({
@@ -5419,25 +5433,25 @@ requires
                     value: val
                 });
                 setThumb(animate);
-                that.triggerEvent("change", { value: val });
+                that.triggerEvent('change', { value: val });
             }
         }
         function setWidth(width) {
             trackWidth = width - self.options.arrows * 32;
             thumbWidth = Math.max(trackWidth / values - 2, self.options.thumbSize - 2);
             that.$element.css({
-                width: (width - 2) + "px"
+                width: (width - 2) + 'px'
             });
             $track.css({
-                width: (trackWidth - 2) + "px"
+                width: (trackWidth - 2) + 'px'
             });
             if (trackImages) {
                 $image.css({
-                    width: (trackWidth - 2) + "px"
+                    width: (trackWidth - 2) + 'px'
                 });
             }
             $thumb.css({
-                width: (thumbWidth - 2) + "px",
+                width: (thumbWidth - 2) + 'px',
                 padding: 0
             });
             setThumb();
@@ -5466,10 +5480,10 @@ requires
         var self = self || {},
             that = new Ox.Element({}, self)
                 .defaults({
-                    id: "",
+                    id: '',
                     item: function() {},
                     keys: [],
-                    orientation: "both",
+                    orientation: 'both',
                     request: function() {},
                     size: 128,
                     sort: [],
@@ -5485,12 +5499,12 @@ requires
                 construct: constructItem,
                 itemHeight: self.itemHeight,
                 itemWidth: self.itemWidth,
-                keys: $,
-                orientation: "both",
+                keys: 'foo',
+                orientation: 'both',
                 request: function() {},
                 rowLength: 1,
                 size: 128,
-                type: "icon",            
+                type: 'icon',            
             }, self)
             .click(click)
             .dblclick(dblclick)
@@ -5515,6 +5529,8 @@ requires
             
         }
 
+        Ox.print('IconList', that.options('id'))
+
         return that;
 
     };
@@ -5525,83 +5541,83 @@ requires
             that = new Ox.Element({}, self)
                 .defaults({
                     height: 0,
-                    id: "",
-                    info: "",
+                    id: '',
+                    info: '',
                     size: 128,
-                    title: "",
+                    title: '',
                     width: 0,
-                    url: ""
+                    url: ''
                 })
                 .options(options || {});
 
         $.extend(self, {
             height: self.options.size * 1.5,
-            url: oxui.path + "/png/ox.ui." + Ox.theme() + "/icon.png",
+            url: oxui.path + '/png/ox.ui.' + Ox.theme() + '/icon.png',
             width: self.options.size + 4
         });
 
         that.css({
-            width: self.width + "px",
-            height: self.height + "px"
+            width: self.width + 'px',
+            height: self.height + 'px'
         });
-        that.$icon = $("<div>")
-            .addClass("OxIcon")
+        that.$icon = $('<div>')
+            .addClass('OxIcon')
             .css({
                 top: self.options.size == 64 ? -70 : -128,
-                width: self.options.size + "px",
-                height: self.options.size + "px"
+                width: self.options.size + 'px',
+                height: self.options.size + 'px'
             });
-        that.$iconImage = $("<img>")
+        that.$iconImage = $('<img>')
             .attr({
                 src: self.url
             })
             .css({
-                width: iconWidth + "px",
-                height: iconHeight + "px"
+                width: iconWidth + 'px',
+                height: iconHeight + 'px'
             })
             .mouseenter(mouseenter)
             .mouseleave(mouseleave)
-            .one("load", function() {
+            .one('load', function() {
                 that.$iconImage.attr({
                     src: self.options.url
                 });
             });
-        that.$textBox = $("<div>")
-            .addClass("OxText")
+        that.$textBox = $('<div>')
+            .addClass('OxText')
             .css({
-                top: (self.options.size / 2 + 2) + "px",
-                width: self.width + "px",
-                height: (self.options.size == 64 ? 38 : 58) + "px"
+                top: (self.options.size / 2 + 2) + 'px',
+                width: self.width + 'px',
+                height: (self.options.size == 64 ? 38 : 58) + 'px'
             })
-        that.$text = $("<div>")
-            .html(self.options.title + "<br/><span class=\"OxInfo\">" + self.options.info + "</span>")
+        that.$text = $('<div>')
+            .html(self.options.title + '<br/><span class="OxInfo">' + self.options.info + '</span>')
             .mouseenter(mouseenter)
             .mouseleave(mouseleave)
-        that.$reflection = $("<div>")
-            .addClass("OxReflection")
+        that.$reflection = $('<div>')
+            .addClass('OxReflection')
             .css({
-                top: (self.options.size + 2) + "px",
-                width: self.options.size + "px",
-                height: (self.options.size / 2) + "px"
+                top: (self.options.size + 2) + 'px',
+                width: self.options.size + 'px',
+                height: (self.options.size / 2) + 'px'
             });
-        that.$reflectionImage = $("<img>")
-            .addClass("OxReflection")
+        that.$reflectionImage = $('<img>')
+            .addClass('OxReflection')
             .attr({
                 src: self.url
             })
             .css({
-                width: self.options.width + "px",
-                height: self.options.height + "px"
+                width: self.options.width + 'px',
+                height: self.options.height + 'px'
             })
-            .one("load", function() {
+            .one('load', function() {
                 that.$reflectionImage.attr({
                     src: self.options.url
                 });
             });
-        that.$gradient = $("<div>")
-            .addClass("OxGradient")
+        that.$gradient = $('<div>')
+            .addClass('OxGradient')
             .css({
-                top: (-self.options.size - 2) + "px"
+                top: (-self.options.size - 2) + 'px'
             });
 
         that.append(
@@ -5621,11 +5637,11 @@ requires
         );
 
         function mouseenter() {
-            that.addClass("OxHover");
+            that.addClass('OxHover');
         }
 
         function mouseleave() {
-            that.removeClass("OxHover");
+            that.removeClass('OxHover');
         }
 
         return that;
@@ -5641,12 +5657,12 @@ requires
                     itemHeight: 16,
                     itemWidth: 16,
                     keys: [],
-                    orientation: "vertical",
+                    orientation: 'vertical',
                     request: function() {}, // {sort:, range:, callback:}, without parameter returns {items, size etc.}
                     rowLength: 1,
                     sort: [],
-                    type: "text",
-                    unique: ""
+                    type: 'text',
+                    unique: ''
                 })
                 .options(options || {})
                 .click(click)
@@ -5673,13 +5689,13 @@ requires
             requests: [],
             selected: []
         });
-        self.keyboardEvents["key_" + (self.options.orientation == "horizontal" ? "left" : "up")] = selectPrevious;
-        self.keyboardEvents["key_" + (self.options.orientation == "horizontal" ? "right" : "down")] = selectNext;
-        self.keyboardEvents["key_" + (self.options.orientation == "horizontal" ? "shift_left" : "shift_up")] = addPreviousToSelection;
-        self.keyboardEvents["key_" + (self.options.orientation == "horizontal" ? "shift_right" : "shift_down")] = addNextToSelection;
+        self.keyboardEvents['key_' + (self.options.orientation == 'horizontal' ? 'left' : 'up')] = selectPrevious;
+        self.keyboardEvents['key_' + (self.options.orientation == 'horizontal' ? 'right' : 'down')] = selectNext;
+        self.keyboardEvents['key_' + (self.options.orientation == 'horizontal' ? 'shift_left' : 'shift_up')] = addPreviousToSelection;
+        self.keyboardEvents['key_' + (self.options.orientation == 'horizontal' ? 'shift_right' : 'shift_down')] = addNextToSelection;
 
         updateQuery();
-        Ox.print("s.o", self.options)
+        Ox.print('s.o', self.options)
         that.addEvent(self.keyboardEvents);
 
         function addAllToSelection(pos) {
@@ -5737,16 +5753,16 @@ requires
             if (!isSelected(pos)) {
                 self.selected.push(pos);
                 if (!Ox.isUndefined(self.$items[pos])) {
-                    self.$items[pos].addClass("OxSelected");
+                    self.$items[pos].addClass('OxSelected');
                 }
-                Ox.print("addToSelection")
+                Ox.print('addToSelection')
                 triggerSelectEvent();
             }
         }
 
         function clear() {
             $.each(self.requests, function(i, v) {
-                Ox.print("Ox.Request.cancel", v);
+                Ox.print('Ox.Request.cancel', v);
                 Ox.Request.cancel(v);
             });
             $.extend(self, {
@@ -5760,12 +5776,12 @@ requires
         function click(e) {
             var $element = $(e.target), pos;
             that.gainFocus();
-            while (!$element.hasClass("OxItem") && !$element.hasClass("OxPage")) {
+            while (!$element.hasClass('OxItem') && !$element.hasClass('OxPage')) {
                 $element = $element.parent();
             }
-            if ($element.hasClass("OxItem")) {
-                Ox.print($element.attr("id"), $element.data("position"));
-                pos = $element.data("position");
+            if ($element.hasClass('OxItem')) {
+                Ox.print($element.attr('id'), $element.data('position'));
+                pos = $element.data('position');
                 if (e.shiftKey) {
                     addAllToSelection(pos);
                 } else if (e.metaKey) {
@@ -5782,7 +5798,7 @@ requires
             if (isSelected(pos)) {
                 self.selected.splice(self.selected.indexOf(pos), 1);
                 if (!Ox.isUndefined(self.$items[pos])) {
-                    self.$items[pos].removeClass("OxSelected");
+                    self.$items[pos].removeClass('OxSelected');
                 }
                 triggerSelectEvent();
             }
@@ -5804,13 +5820,13 @@ requires
         }
 
         function getPage() {
-            return self.options.orientation == "horizontal"
+            return self.options.orientation == 'horizontal'
                 ? Math.floor(that.scrollLeft() / self.pageWidth)
                 : Math.floor(that.scrollTop() / self.pageHeight);
         }
 
         function getPositions() {
-            Ox.print("getPositions", $.map(self.selected, function(v, i) {
+            Ox.print('getPositions', $.map(self.selected, function(v, i) {
                 return self.ids[v];
             }));
             // fixme: optimize: send non-selected ids if more than half of the items are selected
@@ -5828,14 +5844,14 @@ requires
         }
 
         function getPositionsCallback(result) {
-            Ox.print("getPositionsCallback", result)
+            Ox.print('getPositionsCallback', result)
             if (result) {
                 $.extend(self, {
                     ids: {},
                     selected: []
                 });
                 $.each(result.data.positions, function(id, pos) {
-                    Ox.print("id", id, "pos", pos)
+                    Ox.print('id', id, 'pos', pos)
                     self.selected.push(pos);
                 });
             }
@@ -5878,13 +5894,13 @@ requires
         }
 
         function loadPage(page, callback) {
-            Ox.print("loadPage", page)
+            Ox.print('loadPage', page)
             if (page < 0 || page >= self.pages) {
                 !Ox.isUndefined(callback) && callback();
                 return;
             }
-            var keys = $.inArray("id", self.options.keys) > -1 ? self.options.keys :
-                        $.merge(self.options.keys, ["id"]),
+            var keys = $.inArray('id', self.options.keys) > -1 ? self.options.keys :
+                        $.merge(self.options.keys, ['id']),
                 offset = page * self.pageLength,
                 range = [offset, offset + (page < self.pages - 1 ?
                         self.pageLength : self.listLength % self.pageLength)];
@@ -5892,9 +5908,9 @@ requires
                 self.requests.push(self.options.request({
                     callback: function(result) {
                         self.$pages[page] = new Ox.ListPage();
-                        if (self.options.type == "text") {
+                        if (self.options.type == 'text') {
                             self.$pages[page].css({
-                                top: (page * self.pageHeight) + "px"
+                                top: (page * self.pageHeight) + 'px'
                             });
                         } else {
                             self.$pages[page].css({
@@ -5911,22 +5927,22 @@ requires
                             });
                             self.ids[pos] = v[self.options.unique];
                             if (isSelected(pos)) {
-                                self.$items[pos].addClass("OxSelected");
+                                self.$items[pos].addClass('OxSelected');
                             }
                             self.$items[pos].appendTo(self.$pages[page]);
                         });
-                        if (self.options.type == "text" && page == 0) {
+                        if (self.options.type == 'text' && page == 0) {
                             var height = that.height() - (that.width() < that.$content.width() ? oxui.scrollbarSize : 0),
                                 visibleItems = Math.ceil(height / self.options.itemHeight);
                             if (result.data.items.length < visibleItems) {
                                 self.$pages[page].height(height).css({
-                                    overflow: "hidden"
+                                    overflow: 'hidden'
                                 });
                                 $.each(Ox.range(result.data.items.length, visibleItems), function(i, v) {
                                     new Ox.ListItem({
                                         construct: self.options.construct,
                                         data: {},
-                                        id: "",
+                                        id: '',
                                         position: v
                                     }).appendTo(self.$pages[page]);
                                 });
@@ -5957,7 +5973,7 @@ requires
         }
 
         function open() {
-            that.triggerEvent("open", {
+            that.triggerEvent('open', {
                 ids: getSelectedIds()
             });
         }
@@ -5965,11 +5981,11 @@ requires
         function preview() {
             self.preview = !self.preview;
             if (self.preview) {
-                that.triggerEvent("openpreview", {
+                that.triggerEvent('openpreview', {
                     ids: getSelectedIds()
                 });
             } else {
-                that.triggerEvent("closepreview");
+                that.triggerEvent('closepreview');
             }
         }
 
@@ -6012,20 +6028,20 @@ requires
 
         function scrollTo(pos) {
             var positions = [], scroll, size; 
-            if (self.options.orientation == "horizontal") {
+            if (self.options.orientation == 'horizontal') {
 
-            } else if (self.options.orientation == "vertical") {
+            } else if (self.options.orientation == 'vertical') {
                 positions[0] = self.options.itemHeight * pos;
                 positions[1] = positions[0] + self.options.itemHeight;
                 scroll = that.scrollTop();
                 size = getHeight();
                 if (positions[0] < scroll) {
                     that.animate({
-                        scrollTop: positions[0] + "px"
+                        scrollTop: positions[0] + 'px'
                     }, 0);
                 } else if (positions[1] > scroll + size) {
                     that.animate({
-                        scrollTop: (positions[1] - size) + "px"
+                        scrollTop: (positions[1] - size) + 'px'
                     }, 0);
                 }
             } else {
@@ -6050,7 +6066,7 @@ requires
 
         function selectAll() {
             $.each(Ox.range(self.listLength), function(i, v) {
-                Ox.print("adding", v);
+                Ox.print('adding', v);
                 addToSelection(v);
             });
         }
@@ -6100,14 +6116,14 @@ requires
             setTimeout(function() {
                 var ids_ = getSelectedIds();
                 if (ids.length == ids_.length && (ids.length == 0 || ids[0] == ids_[0])) {
-                    that.triggerEvent("select", {
+                    that.triggerEvent('select', {
                         ids: ids
                     });
-                    self.preview && that.triggerEvent("openpreview", {
+                    self.preview && that.triggerEvent('openpreview', {
                         ids: ids
                     });
                 } else {
-                    Ox.print("select event not triggered after timeout");
+                    Ox.print('select event not triggered after timeout');
                 }
             }, 100);
         }
@@ -6116,8 +6132,8 @@ requires
             if (page < 0 || page >= self.pages) {
                 return;
             }
-            Ox.print("unloadPage", page)
-            Ox.print("self.$pages", self.$pages)
+            Ox.print('unloadPage', page)
+            Ox.print('self.$pages', self.$pages)
             Ox.print(!Ox.isUndefined(self.$pages[page]))
             !Ox.isUndefined(self.$pages[page]) && self.$pages[page].remove();
         }
@@ -6133,18 +6149,18 @@ requires
             self.requests.push(self.options.request({
                 callback: function(result) {
                     var keys = {};
-                    that.triggerEvent("load", result.data);
+                    that.triggerEvent('load', result.data);
                     $.extend(self, {
                         listHeight: result.data.items * self.options.itemHeight, // fixme: should be listSize
                         listLength: result.data.items,
                         pages: Math.ceil(result.data.items / self.pageLength),
-                        pageWidth: self.options.orientation == "horizontal" ?
+                        pageWidth: self.options.orientation == 'horizontal' ?
                                 self.pageLength * self.options.itemWidth : 0,
-                        pageHeight: self.options.orientation == "horizontal" ? 0 :
+                        pageHeight: self.options.orientation == 'horizontal' ? 0 :
                                 self.pageLength * self.options.itemHeight / self.options.rowLength
                     });
                     that.$content.css({
-                        height: self.listHeight + "px"
+                        height: self.listHeight + 'px'
                     });
                     getPositions();
                 }
@@ -6159,8 +6175,8 @@ requires
         }
 
         self.onChange = function(key, value) {
-            Ox.print("list onChange", key, value);
-            if (key == "request") {
+            Ox.print('list onChange', key, value);
+            if (key == 'request') {
                 updateQuery();
             }
         };
@@ -6175,7 +6191,7 @@ requires
                     key: key,
                     operator: operator
                 }
-                that.triggerEvent("sort", self.options.sort[0]);
+                that.triggerEvent('sort', self.options.sort[0]);
                 updateSort();
             }
         }
@@ -6191,21 +6207,21 @@ requires
                 .defaults({
                     construct: function() {},
                     data: {},
-                    id: "",
+                    id: '',
                     position: 0
                 })
                 .options(options || {});
 
         $.each(self.options.data, function(k, v) {
-            self.options.data[k] = $.isArray(v) ? v.join(", ") : v;
+            self.options.data[k] = $.isArray(v) ? v.join(', ') : v;
         });
 
         that.$element = self.options.construct(self.options.data)
-            .addClass("OxItem")
+            .addClass('OxItem')
             .attr({
                 id: self.options.id
             })
-            .data("position", self.options.position);
+            .data('position', self.options.position);
 
         return that;
 
@@ -6214,7 +6230,7 @@ requires
     Ox.ListPage = function(options, self) {
         var self = self || {},
             that = new Ox.Element({}, self)
-                .addClass("OxPage");
+                .addClass('OxPage');
         return that;
     };
 
@@ -6225,12 +6241,12 @@ requires
                 .defaults({
                     columns: [],
                     columnWidth: [40, 800],
-                    id: "",
+                    id: '',
                     request: function() {}, // {sort, range, keys, callback}
                     sort: []
                 })
                 .options(options || {})
-                .addClass("OxTextList");
+                .addClass('OxTextList');
 
         $.each(self.options.columns, function(i, v) { // fixme: can this go into a generic ox.js function?
             if (Ox.isUndefined(v.unique)) {
@@ -6263,21 +6279,21 @@ requires
         // Head
 
         that.$bar = new Ox.Bar({
-            orientation: "horizontal",
+            orientation: 'horizontal',
             size: 16
         }).appendTo(that);
         that.$head = new Ox.Container()
-            .addClass("OxHead")
+            .addClass('OxHead')
             .appendTo(that.$bar);
-        that.$head.$content.addClass("OxTitles");
+        that.$head.$content.addClass('OxTitles');
         that.$titles = [];
         $.each(self.visibleColumns, function(i, v) {
             var $order, $resize, $left, $center, $right, timeout = 0;
             self.columnWidths[i] = v.width;
-            that.$titles[i] = $("<div>")
-                .addClass("OxTitle OxColumn" + Ox.toTitleCase(v.id))
+            that.$titles[i] = $('<div>')
+                .addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
                 .css({
-                    width: (v.width - 9) + "px",
+                    width: (v.width - 9) + 'px',
                     textAlign: v.align
                 })
                 .html(v.title)
@@ -6296,17 +6312,17 @@ requires
                 })
                 .appendTo(that.$head.$content.$element);
             self.columnPositions[i] = Ox.sum(self.columnWidths) - self.columnWidths[i] / 2;
-            $order = $("<div>")
-                .addClass("OxOrder")
-                .html(oxui.symbols["triangle_" + (
-                    v.operator === "" ? "up" : "down"
+            $order = $('<div>')
+                .addClass('OxOrder')
+                .html(oxui.symbols['triangle_' + (
+                    v.operator === '' ? 'up' : 'down'
                 )])
                 .click(function() {
-                    $(this).prev().trigger("click")
+                    $(this).prev().trigger('click')
                 })
                 .appendTo(that.$head.$content.$element);
-            $resize = $("<div>")
-                .addClass("OxResize")
+            $resize = $('<div>')
+                .addClass('OxResize')
                 .mousedown(function(e) {
                     var startWidth = self.columnWidths[i],
                         startX = e.clientX;
@@ -6319,32 +6335,32 @@ requires
                             );
                             resizeColumn(v.id, width);
                     });
-                    $window.one("mouseup", function() {
-                        $window.unbind("mousemove");
+                    $window.one('mouseup', function() {
+                        $window.unbind('mousemove');
                     });
                 })
                 .dblclick(function() {
                     resizeColumn(v.id, v.width);
                 })
                 .appendTo(that.$head.$content.$element);
-            $left = $("<div>").addClass("OxLeft").appendTo($resize);
-            $center = $("<div>").addClass("OxCenter").appendTo($resize);
-            $right = $("<div>").addClass("OxRight").appendTo($resize);
+            $left = $('<div>').addClass('OxLeft').appendTo($resize);
+            $center = $('<div>').addClass('OxCenter').appendTo($resize);
+            $right = $('<div>').addClass('OxRight').appendTo($resize);
         });
         that.$head.$content.css({
-            width: (Ox.sum(self.columnWidths) + 2) + "px"
+            width: (Ox.sum(self.columnWidths) + 2) + 'px'
         });
-        Ox.print("s.sC", self.selectedColumn)
+        Ox.print('s.sC', self.selectedColumn)
         if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var
             toggleSelected(self.options.columns[self.selectedColumn].id);
             that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
-                width: (self.options.columns[self.selectedColumn].width - 25) + "px"
+                width: (self.options.columns[self.selectedColumn].width - 25) + 'px'
             });
         }
         that.$select = new Ox.Button({
-            style: "symbol",
-            type: "image",
-            value: "select"
+            style: 'symbol',
+            title: 'select',
+            type: 'image'
         }).appendTo(that.$bar.$element);
 
         // Body
@@ -6357,13 +6373,13 @@ requires
                 keys: $.map(self.visibleColumns, function(v, i) {
                     return v.id;
                 }),
-                orientation: "vertical",
+                orientation: 'vertical',
                 request: self.options.request,
                 sort: self.options.sort,
-                type: "text",
+                type: 'text',
                 unique: self.unique
             })
-            .addClass("OxBody")
+            .addClass('OxBody')
             .scroll(function() {
                 var scrollLeft = $(this).scrollLeft();
                 if (scrollLeft != self.scrollLeft) {
@@ -6373,39 +6389,39 @@ requires
             })
             .appendTo(that);
         that.$body.$content.css({
-            width: getItemWidth() + "px"
+            width: getItemWidth() + 'px'
         });
 
-        Ox.print("s.vC", self.visibleColumns)
+        Ox.print('s.vC', self.visibleColumns)
 
         function addColumn(id) {
             
         }
 
         function clickColumn(id) {
-            Ox.print("clickColumn", id);
+            Ox.print('clickColumn', id);
             var i = getColumnIndexById(id),
                 isSelected = self.options.sort[0].key == self.options.columns[i].id;
             that.sort(
                 self.options.columns[i].id, isSelected ?
-                (self.options.sort[0].operator === "" ? "-" : "") :
+                (self.options.sort[0].operator === '' ? '-' : '') :
                 self.options.columns[i].operator
             );
         }
 
         function constructItem(data) {
-            var $item = $("<div>")
+            var $item = $('<div>')
                     .css({
-                        width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize) + "px"
+                        width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize) + 'px'
                     });
             $.each(self.visibleColumns, function(i, v) {
-                var $cell = $("<div>")
-                        .addClass("OxCell OxColumn" + Ox.toTitleCase(v.id))
+                var $cell = $('<div>')
+                        .addClass('OxCell OxColumn' + Ox.toTitleCase(v.id))
                         .css({
-                            width: (self.columnWidths[i] - 9) + "px",
+                            width: (self.columnWidths[i] - 9) + 'px',
                             textAlign: v.align
                         })
-                        .html(!$.isEmptyObject(data) ? data[v.id] : "")
+                        .html(!$.isEmptyObject(data) ? data[v.id] : '')
                         .appendTo($item);
             });
             return $item;
@@ -6419,13 +6435,13 @@ requires
                 positions = $.map(self.visibleColumns, function(v, i) {
                     return self.columnPositions[i] - self.columnPositions[startPos]
                 });
-            $(".OxColumn" + Ox.toTitleCase(id)).css({
+            $('.OxColumn' + Ox.toTitleCase(id)).css({
                 opacity: 0.1
             });
-            that.$titles[startPos].addClass("OxDrag").css({ // fixme: why does the class not work?
-                cursor: "move"
+            that.$titles[startPos].addClass('OxDrag').css({ // fixme: why does the class not work?
+                cursor: 'move'
             });
-            Ox.print("positions", positions)
+            Ox.print('positions', positions)
             $window.mousemove(function(e) {
                 var d = e.clientX - startX;
                 $.each(positions, function(i, v) {
@@ -6441,14 +6457,14 @@ requires
                     moveColumn(id, pos);
                 }
             });
-            $window.one("mouseup", function() {
+            $window.one('mouseup', function() {
                 dropColumn(id, pos);
-                $window.unbind("mousemove");
+                $window.unbind('mousemove');
             });
         }
 
         function dropColumn(id, pos) {
-            Ox.print("dropColumn", id, pos)
+            Ox.print('dropColumn', id, pos)
             var startPos = getColumnPositionById(id),
                 stopPos = pos,
                 $title = that.$titles.splice(startPos, 1)[0],
@@ -6457,12 +6473,12 @@ requires
             that.$titles.splice(stopPos, 0, $title);
             self.visibleColumns.splice(stopPos, 0, column);
             self.columnWidths.splice(stopPos, 0, width);
-            Ox.print("s.vC", self.visibleColumns)
-            $(".OxColumn" + Ox.toTitleCase(id)).css({
+            Ox.print('s.vC', self.visibleColumns)
+            $('.OxColumn' + Ox.toTitleCase(id)).css({
                 opacity: 1
             });
-            that.$titles[stopPos].removeClass("OxDrag").css({
-                cursor: "pointer"
+            that.$titles[stopPos].removeClass('OxDrag').css({
+                cursor: 'pointer'
             });
         }
 
@@ -6494,18 +6510,18 @@ requires
         }
 
         function moveColumn(id, pos) {
-            Ox.print("moveColumn", id, pos)
+            Ox.print('moveColumn', id, pos)
             var startPos = getColumnPositionById(id),
                 stopPos = pos,
-                startClassName = ".OxColumn" + Ox.toTitleCase(id),
-                stopClassName = ".OxColumn" + Ox.toTitleCase(self.visibleColumns[stopPos].id),
-                $column = $(".OxTitle" + startClassName),
+                startClassName = '.OxColumn' + Ox.toTitleCase(id),
+                stopClassName = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id),
+                $column = $('.OxTitle' + startClassName),
                 $order = $column.next(),
                 $resize = $order.next();
-            $column.detach().insertBefore($(".OxTitle" + stopClassName));
+            $column.detach().insertBefore($('.OxTitle' + stopClassName));
             $order.detach().insertAfter($column);
             $resize.detach().insertAfter($order);
-            $.each(that.$body.find(".OxItem"), function(i, v) {
+            $.each(that.$body.find('.OxItem'), function(i, v) {
                 var $v = $(v);
                 $v.children(startClassName).detach().insertBefore($v.children(stopClassName));
             });
@@ -6524,19 +6540,19 @@ requires
                 pos = getColumnPositionById(id);
             self.columnWidths[pos] = width;
             that.$head.$content.css({
-                width: (Ox.sum(self.columnWidths) + 2) + "px"
+                width: (Ox.sum(self.columnWidths) + 2) + 'px'
             });
             that.$titles[pos].css({
-                width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + "px"
+                width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + 'px'
             });
-            that.$body.$content.find(".OxItem").css({ // fixme: can we avoid this lookup?
-                width: getItemWidth() + "px"
+            that.$body.$content.find('.OxItem').css({ // fixme: can we avoid this lookup?
+                width: getItemWidth() + 'px'
             });
             that.$body.$content.css({
-                width: getItemWidth() + "px" // fixme: check if scrollbar visible, and listen to resize/toggle event
+                width: getItemWidth() + 'px' // fixme: check if scrollbar visible, and listen to resize/toggle event
             });
-            $(".OxCell.OxColumn" + Ox.toTitleCase(self.options.columns[i].id)).css({
-                width: (width - 9) + "px"
+            $('.OxCell.OxColumn' + Ox.toTitleCase(self.options.columns[i].id)).css({
+                width: (width - 9) + 'px'
             });
             that.$body.clearCache();
         }
@@ -6545,14 +6561,14 @@ requires
             var pos = getColumnPositionById(id);
             if (pos > -1) {
                 updateOrder(id);
-                pos > 0 && that.$titles[pos].prev().children().eq(2).toggleClass("OxSelected");
-                that.$titles[pos].toggleClass("OxSelected");
-                that.$titles[pos].next().toggleClass("OxSelected");
-                that.$titles[pos].next().next().children().eq(0).toggleClass("OxSelected");
+                pos > 0 && that.$titles[pos].prev().children().eq(2).toggleClass('OxSelected');
+                that.$titles[pos].toggleClass('OxSelected');
+                that.$titles[pos].next().toggleClass('OxSelected');
+                that.$titles[pos].next().next().children().eq(0).toggleClass('OxSelected');
                 that.$titles[pos].css({
                     width: (
-                        that.$titles[pos].width() + (that.$titles[pos].hasClass("OxSelected") ? -16 : 16)
-                    ) + "px"
+                        that.$titles[pos].width() + (that.$titles[pos].hasClass('OxSelected') ? -16 : 16)
+                    ) + 'px'
                 });
             }
         }
@@ -6561,12 +6577,12 @@ requires
             var pos = getColumnPositionById(id);
             Ox.print(id, pos)
             that.$titles[pos].next().html(oxui.symbols[
-                "triangle_" +  (self.options.sort[0].operator === "" ? "up" : "down")
+                'triangle_' +  (self.options.sort[0].operator === '' ? 'up' : 'down')
             ]);
         }
 
         self.onChange = function(key, value) {
-            if (key == "request") {
+            if (key == 'request') {
                 that.$body.options(key, value);
             }
         };
@@ -6612,10 +6628,10 @@ requires
     Ox.Map = function(options, self) {
 
         var self = self || {}
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
                     places: [],
-                    type: "satellite"
+                    type: 'satellite'
                 })
                 .options(options || {});
 
@@ -6629,26 +6645,26 @@ requires
         }
 
         function click(event) {
-            Ox.print("event", event);
+            Ox.print('event', event);
             getLocationByLatLng(event.latLng, self.map.getBounds(), function(location) {
                 self.marker && self.marker.remove();
                 self.polygon && self.polygon.remove();
                 if (location) {
                     self.marker = location.marker.add();
                     self.polygon = location.polygon.add();
-                    that.triggerEvent("select", location)
+                    that.triggerEvent('select', location)
                 }
             })
         }
 
         function getLocationByLatLng(latlng, bounds, callback) {
-            Ox.print("ll b", latlng, bounds)
+            Ox.print('ll b', latlng, bounds)
             var callback = arguments.length == 3 ? callback : bounds,
                 bounds = arguments.length == 3 ? bounds : null;
             self.geocoder.geocode({
                 latLng: latlng
             }, function(results, status) {
-                Ox.print("results", results)
+                Ox.print('results', results)
                 var length = results.length;
                 if (status == google.maps.GeocoderStatus.OK) {
                     if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
@@ -6669,7 +6685,7 @@ requires
                         callback(null);
                     }
                 } else {
-                    Ox.print("geocode failed:", status);
+                    Ox.print('geocode failed:', status);
                     callback(null);
                 }
             });
@@ -6686,7 +6702,7 @@ requires
                         callback(null);
                     }
                 } else {
-                    Ox.print("geocode failed:", status);
+                    Ox.print('geocode failed:', status);
                     callback(null);
                 }
             });
@@ -6707,17 +6723,17 @@ requires
                     };
                 } else if (Ox.isArray(place)) {
                     self.options.places[i] = {
-                        name: "",
+                        name: '',
                         point: place
                     };
                 }
-                "point" in self.options.places[i] ?
+                'point' in self.options.places[i] ?
                         getLocationByPoint(self.options.places[i].point, callback) :
                         getLocationByName(self.options.places[i].name, callback);
             });
             function callback(location) {
                 if (location) {
-                    Ox.print("counter", counter, location)
+                    Ox.print('counter', counter, location)
                     self.locations.push(location);
                     self.bounds = counter == 0 ? location.rectangle.bounds :
                             self.bounds.union(location.rectangle.bounds);
@@ -6729,7 +6745,7 @@ requires
         }
 
         function loadMap() {
-            Ox.print("loadMap");
+            Ox.print('loadMap');
             $.extend(self, {
                 map: new google.maps.Map(that.$element[0], {
                     center: self.bounds.getCenter(),
@@ -6739,8 +6755,8 @@ requires
                 })
             });
             self.map.fitBounds(self.bounds)
-            google.maps.event.addListener(self.map, "click", click);
-            google.maps.event.addListener(self.map, "zoom_changed", zoom);
+            google.maps.event.addListener(self.map, 'click', click);
+            google.maps.event.addListener(self.map, 'zoom_changed', zoom);
             $.each(self.locations, function(i, location) {
                 location.marker.add();
             });
@@ -6748,17 +6764,17 @@ requires
         };
 
         function resize() {
-            google.maps.event.trigger(self.map, "resize");
+            google.maps.event.trigger(self.map, 'resize');
         }
 
         function zoom() {
-            that.triggerEvent("zoom", {
+            that.triggerEvent('zoom', {
                 value: self.map.getZoom()
             });
         }
 
         function Location(geocode) {
-            Ox.print("geocode", geocode);
+            Ox.print('geocode', geocode);
             var bounds = geocode.geometry.bounds || geocode.geometry.viewport,
                 area = [
                     [bounds.getSouthWest().lat(), bounds.getSouthWest().lng()],
@@ -6770,11 +6786,11 @@ requires
                         formatted: geocode.formatted_address,
                         long: $.map(geocode.address_components, function(v) {
                             return v.long_name;
-                        }).join(", ")
+                        }).join(', ')
                     },
                     rectangle: new Rectangle(area),
                 };
-            Ox.print("area", area)
+            Ox.print('area', area)
             return $.extend(location, {
                 marker: new Marker(location),
                 polygon: new Polygon(location)
@@ -6784,7 +6800,7 @@ requires
         function Marker(location) {
             var listeners = {},
                 marker = new google.maps.Marker({
-                    icon: icon("red"),
+                    icon: icon('red'),
                     position: location.rectangle.center,
                     title: location.name.formatted
                 }),
@@ -6792,23 +6808,23 @@ requires
             function click() {
                 selected = !selected;
                 marker.setOptions({
-                    icon: icon(selected ? "blue" : "red")
+                    icon: icon(selected ? 'blue' : 'red')
                 });
-                location.polygon[selected ? "add" : "remove"]();
+                location.polygon[selected ? 'add' : 'remove']();
             }
             function dblclick() {
                 click();
                 self.map.fitBounds(location.rectangle.bounds);
             }
             function icon(color) {
-                return "http://dev.pan.do:8000" + oxui.path + "png/ox.ui/marker" + Ox.toTitleCase(color) + ".png"
+                return 'http://dev.pan.do:8000' + oxui.path + 'png/ox.ui/marker' + Ox.toTitleCase(color) + '.png'
             }
             return {
                 add: function() {
                     marker.setMap(self.map);
                     listeners = {
-                        click: google.maps.event.addListener(marker, "click", click),
-                        dblclick: google.maps.event.addListener(marker, "dblclick", dblclick),
+                        click: google.maps.event.addListener(marker, 'click', click),
+                        dblclick: google.maps.event.addListener(marker, 'dblclick', dblclick),
                     };
                     return this;
                 },
@@ -6847,7 +6863,7 @@ requires
                 setOptions();
             }
             function setOptions() {
-                var color = selected ? "#8080FF" : "#FFFFFF";
+                var color = selected ? '#8080FF' : '#FFFFFF';
                 polygon.setOptions({
                     clickable: true,
                     fillColor: color,
@@ -6860,7 +6876,7 @@ requires
             return {
                 add: function() {
                     polygon.setMap(self.map);
-                    listeners.click = google.maps.event.addListener(polygon, "click", click);
+                    listeners.click = google.maps.event.addListener(polygon, 'click', click);
                     return this;
                 },
                 deselect: function() {
@@ -6919,7 +6935,7 @@ requires
         }
 
         self.onChange = function(key, value) {
-            if (key == "type") {
+            if (key == 'type') {
                 
             }
         };
@@ -6949,20 +6965,20 @@ requires
         /*
         options:
             height      image height (px)
-            places      array of either names (""), points ([0, 0]),
+            places      array of either names (''), points ([0, 0]),
                         or objects ({name, point, highlight})
-            type        map type ("hybrid", "roadmap", "satellite", "terrain")
+            type        map type ('hybrid', 'roadmap', 'satellite', 'terrain')
             width       image width (px)
         */
 
         var self = self || {},
-            that = new Ox.Element("img", self)
+            that = new Ox.Element('img', self)
                 .defaults({
                     height: 360,
-                    markerColorHighlight: "yellow",
-                    markerColorNormal: "blue",
+                    markerColorHighlight: 'yellow',
+                    markerColorNormal: 'blue',
                     places: [],
-                    type: "satellite",
+                    type: 'satellite',
                     width: 640
                 })
                 .options(options || {})
@@ -6972,9 +6988,9 @@ requires
                 highlight: [],
                 normal: []
             },
-            src: "http://maps.google.com/maps/api/staticmap?sensor=false" +
-                    "&size=" + self.options.width + "x" + self.options.height +
-                    "&maptype=" + self.options.type
+            src: 'http://maps.google.com/maps/api/staticmap?sensor=false' +
+                    '&size=' + self.options.width + 'x' + self.options.height +
+                    '&maptype=' + self.options.type
         });
 
         if (self.options.places.length) {
@@ -6982,21 +6998,21 @@ requires
                 if (Ox.isString(place)) {
                     self.markers.normal.push(place);
                 } else if (Ox.isArray(place)) {
-                    self.markers.normal.push(place.join(","));
+                    self.markers.normal.push(place.join(','));
                 } else {
-                    self.markers[place.highlight ? "highlight" : "normal"]
-                        .push("point" in place ? place.point.join(",") : place.name)
+                    self.markers[place.highlight ? 'highlight' : 'normal']
+                        .push('point' in place ? place.point.join(',') : place.name)
                 }
             });
             $.each(self.markers, function(k, markers) {
                 if (markers.length) {
-                    self.src += "&markers=icon:" + "http://dev.pan.do:8000" + oxui.path + "png/ox.ui/marker" +
-                            Ox.toTitleCase(self.options["markerColor" + Ox.toTitleCase(k)]) + ".png|" +
-                            markers.join("|")
+                    self.src += '&markers=icon:' + 'http://dev.pan.do:8000' + oxui.path + 'png/ox.ui/marker' +
+                            Ox.toTitleCase(self.options['markerColor' + Ox.toTitleCase(k)]) + '.png|' +
+                            markers.join('|')
                 }
             });
         } else {
-            self.src += "&center=0,0&zoom=2"
+            self.src += '&center=0,0&zoom=2'
         }
 
         that.attr({
@@ -7030,10 +7046,10 @@ requires
                 .defaults({
                     extras: [],
                     menus: [],
-                    size: "medium"
+                    size: 'medium'
                 })
                 .options(options || {})
-                .addClass("OxMainMenu Ox" + Ox.toTitleCase(self.options.size)) // fixme: bar should accept small/medium/large ... like toolbar
+                .addClass('OxMainMenu Ox' + Ox.toTitleCase(self.options.size)) // fixme: bar should accept small/medium/large ... like toolbar
                 .click(click)
                 .mousemove(mousemove);
 
@@ -7041,37 +7057,39 @@ requires
         self.selected = -1;
         that.menus = [];
         that.titles = [];
-        that.layer = $("<div>").addClass("OxLayer");
+        that.layer = $('<div>').addClass('OxLayer');
 
         $.each(self.options.menus, function(position, menu) {
-            that.titles[position] = $("<div>")
-                .addClass("OxTitle")
+            that.titles[position] = $('<div>')
+                .addClass('OxTitle')
                 .html(menu.title)
-                .data("position", position)
+                .data('position', position)
                 .appendTo(that.$element);
             that.menus[position] = new Ox.Menu($.extend(menu, {
                     element: that.titles[position],
                     mainmenu: that,
                     size: self.options.size
                 }))
-                .bindEvent("hide", onHideMenu);
+                .bindEvent({
+                    hide: onHideMenu
+                });
         });
 
         if (self.options.extras.length) {
-            that.extras = $("<div>")
-                .addClass("OxExtras")
+            that.extras = $('<div>')
+                .addClass('OxExtras')
                 .appendTo(that.$element);
             $.each(self.options.extras, function(position, extra) {
                 extra.css({
-                    float: "left" // fixme: need class!
+                    float: 'left' // fixme: need class!
                 }).appendTo(that.extras);
             });
         }
 
         function click(event) {
             var $target = $(event.target),
-                position = typeof $target.data("position") != "undefined" ?
-                        $target.data("position") : -1;
+                position = typeof $target.data('position') != 'undefined' ?
+                        $target.data('position') : -1;
             clickTitle(position);
         }
 
@@ -7084,28 +7102,17 @@ requires
                 if (position != selected) {
                     self.focused = true;
                     self.selected = position;
-                    that.titles[self.selected].addClass("OxSelected");
+                    that.titles[self.selected].addClass('OxSelected');
                     that.menus[self.selected].showMenu();
                 }
             }
         }
 
-        function getMenuById(id) {
-            var menu = null;
-            $.each(that.menus, function(i, v) {
-                if (v.options("id") == id) {
-                    menu = v;
-                    return false;
-                }
-            });
-            return menu;
-        }
-
         function mousemove(event) {
             var $target = $(event.target),
                 focused,
-                position = typeof $target.data("position") != "undefined" ?
-                        $target.data("position") : -1;
+                position = typeof $target.data('position') != 'undefined' ?
+                        $target.data('position') : -1;
             if (self.focused && position != self.selected) {
                 if (position > -1) {
                     clickTitle(position);                        
@@ -7119,7 +7126,7 @@ requires
 
         function onHideMenu() {
             if (self.selected > -1) {
-                that.titles[self.selected].removeClass("OxSelected");
+                that.titles[self.selected].removeClass('OxSelected');
                 self.selected = -1;
             }
             self.focused = false;
@@ -7138,9 +7145,10 @@ requires
         };
 
         that.checkItem = function(id) {
-            that.getItem(id).options({
-                checked: true
-            });
+            var ids = id.split('_'),
+                itemId = ids.pop(),
+                menuId = ids.join('_');
+            that.getMenu(menuId).checkItem(itemId);
         };
 
         that.disableItem = function(id) {
@@ -7156,7 +7164,7 @@ requires
         };
 
         that.getItem = function(id) {
-            var ids = id.split("_"),
+            var ids = id.split('_'),
                 item;
             if (ids.length == 1) {
                 $.each(that.menus, function(i, menu) {
@@ -7164,11 +7172,29 @@ requires
                     return !item;
                 });
             } else {
-                item = getMenuById(ids.shift()).getItem(ids.join("_"));
+                item = that.getMenu(ids.shift()).getItem(ids.join('_'));
             }
+            Ox.print('getItem', id, item);
             return item;
         };
 
+        that.getMenu = function(id) {
+            var ids = id.split('_'),
+                menu;
+            if (ids.length == 1) {
+                $.each(that.menus, function(i, v) {
+                    if (v.options('id') == id) {
+                        menu = v;
+                        return false;
+                    }
+                });
+            } else {
+                menu = that.getMenu(ids.shift()).getSubmenu(ids.join('_'));
+            }
+            Ox.print('getMenu', id, menu);
+            return menu;
+        };
+
         that.removeMenu = function() {
             
         };
@@ -7207,8 +7233,8 @@ requires
             offset          offset of the menu, in px
             parent          the supermenu, if any
             selected        the position of the selected item
-            side            open to "bottom" or "right"
-            size            "large", "medium" or "small"
+            side            open to 'bottom' or 'right'
+            size            'large', 'medium' or 'small'
 
         methods:
 
@@ -7226,7 +7252,7 @@ requires
             that = new Ox.Element({}, self)
                 .defaults({
                     element: null,
-                    id: "",
+                    id: '',
                     items: [],
                     mainmenu: null,
                     offset: {
@@ -7235,13 +7261,13 @@ requires
                     },
                     parent: null,
                     selected: -1,
-                    side: "bottom",
-                    size: "medium",
+                    side: 'bottom',
+                    size: 'medium',
                 })
                 .options(options || {})
                 .addClass(
-                    "OxMenu Ox" + Ox.toTitleCase(self.options.side) +
-                    " Ox" + Ox.toTitleCase(self.options.size)
+                    'OxMenu Ox' + Ox.toTitleCase(self.options.side) +
+                    ' Ox' + Ox.toTitleCase(self.options.size)
                 )
                 .click(click)
                 .mouseenter(mouseenter)
@@ -7255,7 +7281,7 @@ requires
                     key_escape: hideMenu,
                     key_enter: clickSelectedItem
                 }),
-            itemHeight = self.options.size == "small" ? 12 : (self.options.size == "medium" ? 16 : 20),
+            itemHeight = self.options.size == 'small' ? 12 : (self.options.size == 'medium' ? 16 : 20),
             // menuHeight,
             scrollSpeed = 1,
             $item; // fixme: used?
@@ -7265,25 +7291,25 @@ requires
         that.items = [];
         that.submenus = {};
         that.$scrollbars = [];
-        that.$top = $("<div>")
-            .addClass("OxTop")
+        that.$top = $('<div>')
+            .addClass('OxTop')
             .appendTo(that.$element);
-        that.$scrollbars.up = constructScrollbar("up")
+        that.$scrollbars.up = constructScrollbar('up')
             .appendTo(that.$element);
-        that.$container = $("<div>")
-            .addClass("OxContainer")
+        that.$container = $('<div>')
+            .addClass('OxContainer')
             .appendTo(that.$element);
-        that.$content = $("<table>")
-            .addClass("OxContent")
+        that.$content = $('<table>')
+            .addClass('OxContent')
             .appendTo(that.$container);
         constructItems(self.options.items);
-        that.$scrollbars.down = constructScrollbar("down")
+        that.$scrollbars.down = constructScrollbar('down')
             .appendTo(that.$element);
-        that.$bottom = $("<div>")
-            .addClass("OxBottom")
+        that.$bottom = $('<div>')
+            .addClass('OxBottom')
             .appendTo(that.$element);
-        that.$layer = $("<div>")
-            .addClass(self.options.mainmenu ? "OxMainMenuLayer" : "OxLayer")
+        that.$layer = $('<div>')
+            .addClass(self.options.mainmenu ? 'OxMainMenuLayer' : 'OxLayer')
             .click(click);
 
         function click(event) {
@@ -7292,14 +7318,14 @@ requires
                 $target = $(event.target),
                 $parent = $target.parent();
             // necessary for highlight
-            if ($parent.is(".OxCell")) {
+            if ($parent.is('.OxCell')) {
                 $target = $parent;
                 $parent = $target.parent();
             }
-            if ($target.is(".OxCell")) {
-                position = $parent.data("position");
+            if ($target.is('.OxCell')) {
+                position = $parent.data('position');
                 item = that.items[position];
-                if (!item.options("disabled")) {
+                if (!item.options('disabled')) {
                     clickItem(position);
                 } else {
                     that.hideMenu();
@@ -7312,44 +7338,45 @@ requires
         function clickItem(position) {
             var item = that.items[position],
                 toggled;
-            if (!item.options("items").length) {
-                if (that.options("parent")) {
-                    that.options("parent").hideMenu().triggerEvent("click");
+            if (!item.options('items').length) {
+                if (that.options('parent')) {
+                    that.options('parent').hideMenu().triggerEvent('click');
                 }
-                if (item.options("checked") !== null) {
-                    if (item.options("group")) {
-                        Ox.print("has group", item.options("group"))
-                        toggled = self.optionGroups[item.options("group")].toggle(position);
-                        Ox.print("toggled", toggled)
+                if (item.options('checked') !== null) {
+                    if (item.options('group')) {
+                        Ox.print('has group', item.options('group'))
+                        toggled = self.optionGroups[item.options('group')].toggle(position);
+                        Ox.print('toggled', toggled)
                         if (toggled.length) {
                             $.each(toggled, function(i, pos) {
                                 that.items[pos].toggleChecked();
                             });
-                            Ox.Event.trigger(item.options("group"), "change", {
-                                checked: $.map(self.optionGroups[item.options("group")].checked(), function(v, i) {
+                            Ox.print('--triggering change event--');
+                            (self.options.mainmenu || that).triggerEvent('change', {
+                                id: item.options('group'),
+                                checked: $.map(self.optionGroups[item.options('group')].checked(), function(v, i) {
                                     return {
-                                        id: that.items[v].options("id"),
-                                        title: Ox.stripTags(that.items[v].options("title")[0])
-                                    }
+                                        id: that.items[v].options('id'),
+                                        title: Ox.stripTags(that.items[v].options('title')[0])
+                                    };
                                 })
                             });
                         }
                     } else {
                         item.toggleChecked();
-                        item.triggerEvent("change", {
-                            checked: item.options("checked"),
-                            id: item.options("id"),
-                            title: Ox.stripTags(item.options("title")[0])
+                        (self.options.mainmenu || that).triggerEvent('change', {
+                            checked: item.options('checked'),
+                            id: item.options('id'),
+                            title: Ox.stripTags(item.options('title')[0])
                         });
                     }
                 } else {
-                    that.triggerEvent("click", {
-                        id: item.options("id"),
-                        title: Ox.stripTags(item.options("title")[0])
+                    (self.options.mainmenu || that).triggerEvent('click', {
+                        id: item.options('id'),
+                        title: Ox.stripTags(item.options('title')[0])
                     });
-                    item.triggerEvent("click");
                 }
-                if (item.options("title").length == 2) {
+                if (item.options('title').length == 2) {
                     item.toggleTitle();
                 }
             }
@@ -7380,8 +7407,8 @@ requires
                     });
                     self.optionGroups[item.group] = new Ox.OptionGroup(
                         items[i],
-                        "min" in item ? item.min : 1,
-                        "max" in item ? item.max : 1
+                        'min' in item ? item.min : 1,
+                        'max' in item ? item.max : 1
                     );
                 }
             });
@@ -7394,11 +7421,11 @@ requires
                     that.items.push(new Ox.MenuItem($.extend(item, {
                         menu: that,
                         position: position = that.items.length
-                    })).data("position", position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
+                    })).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
                     if (item.items) {
                         that.submenus[item.id] = new Ox.Menu({
                             element: that.items[position],
-                            id: Ox.toCamelCase(self.options.id + "/" + item.id),
+                            id: Ox.toCamelCase(self.options.id + '/' + item.id),
                             items: item.items,
                             mainmenu: self.options.mainmenu,
                             offset: {
@@ -7406,7 +7433,7 @@ requires
                                 top: -4
                             },
                             parent: that,
-                            side: "right",
+                            side: 'right',
                             size: self.options.size,
                         });
                     }
@@ -7417,7 +7444,7 @@ requires
                 }
             });
 
-            if (!that.is(":hidden")) {
+            if (!that.is(':hidden')) {
                 that.hideMenu();
                 that.showMenu();
             }
@@ -7425,9 +7452,9 @@ requires
         }
 
         function constructLine() {
-            return $("<tr>").append(
-                $("<td>", {
-                    "class": "OxLine",
+            return $('<tr>').append(
+                $('<td>', {
+                    'class': 'OxLine',
                     colspan: 5
                 })
             );
@@ -7435,10 +7462,10 @@ requires
 
         function constructScrollbar(direction) {
             var interval,
-                speed = direction == "up" ? -1 : 1;
-            return $("<div/>", {
-                "class": "OxScrollbar Ox" + Ox.toTitleCase(direction),
-                html: oxui.symbols["triangle_" + direction],
+                speed = direction == 'up' ? -1 : 1;
+            return $('<div/>', {
+                'class': 'OxScrollbar Ox' + Ox.toTitleCase(direction),
+                html: oxui.symbols['triangle_' + direction],
                 click: function() { // fixme: do we need to listen to click event?
                     return false;
                 },
@@ -7447,14 +7474,14 @@ requires
                     return false;
                 },
                 mouseenter: function() {
-                    var $otherScrollbar = that.$scrollbars[direction == "up" ? "down" : "up"];
-                    $(this).addClass("OxSelected");
-                    if ($otherScrollbar.is(":hidden")) {
+                    var $otherScrollbar = that.$scrollbars[direction == 'up' ? 'down' : 'up'];
+                    $(this).addClass('OxSelected');
+                    if ($otherScrollbar.is(':hidden')) {
                         $otherScrollbar.show();
                         that.$container.height(that.$container.height() - itemHeight);
-                        if (direction == "down") {
+                        if (direction == 'down') {
                             that.$content.css({
-                                top: -itemHeight + "px"
+                                top: -itemHeight + 'px'
                             });
                         }
                     }
@@ -7464,7 +7491,7 @@ requires
                     }, 100);
                 },
                 mouseleave: function() {
-                    $(this).removeClass("OxSelected");
+                    $(this).removeClass('OxSelected');
                     clearInterval(interval);
                 },
                 mouseup: function() {
@@ -7475,9 +7502,9 @@ requires
         }
 
         function constructSpace() {
-            return $("<tr>").append(
-                $("<td>", {
-                    "class": "OxSpace",
+            return $('<tr>').append(
+                $('<td>', {
+                    'class': 'OxSpace',
                     colspan: 5
                 })
             );
@@ -7485,7 +7512,18 @@ requires
 
         function getElement(id) {
             // fixme: needed?
-            return $("#" + Ox.toCamelCase(options.id + "/" + id));
+            return $('#' + Ox.toCamelCase(options.id + '/' + id));
+        }
+
+        function getItemPositionById(id) {
+            var position;
+            $.each(that.items, function(i, v) {
+                if (v.options('id') == id) {
+                    position = i;
+                    return false;
+                }
+            });
+            return position;
         }
 
         function hideMenu() {
@@ -7496,7 +7534,7 @@ requires
         function isFirstEnabledItem() {
             var ret = true;
             $.each(that.items, function(i, item) {
-                if (i < self.options.selected && !item.options("disabled")) {
+                if (i < self.options.selected && !item.options('disabled')) {
                     return ret = false;
                 }
             });
@@ -7506,7 +7544,7 @@ requires
         function isLastEnabledItem() {
             var ret = true;
             $.each(that.items, function(i, item) {
-                if (i > self.options.selected && !item.options("disabled")) {
+                if (i > self.options.selected && !item.options('disabled')) {
                     return ret = false;
                 }
             });
@@ -7518,7 +7556,7 @@ requires
         }
 
         function mouseleave() {
-            if (self.options.selected > -1 && !that.items[self.options.selected].options("items").length) {
+            if (self.options.selected > -1 && !that.items[self.options.selected].options('items').length) {
                 selectItem(-1);
             }
         }
@@ -7528,14 +7566,14 @@ requires
                 position,
                 $target = $(event.target);
                 $parent = $target.parent();
-            if ($parent.is(".OxCell")) {
+            if ($parent.is('.OxCell')) {
                 $target = $parent;
                 $parent = $target.parent();
             }
-            if ($target.is(".OxCell")) {
-                position = $parent.data("position");
+            if ($target.is('.OxCell')) {
+                position = $parent.data('position');
                 item = that.items[position];
-                if (!item.options("disabled") && position != self.options.selected) {
+                if (!item.options('disabled') && position != self.options.selected) {
                     selectItem(position);
                 }
             } else {
@@ -7546,33 +7584,33 @@ requires
         function scrollMenu(speed) {
             var containerHeight = that.$container.height(),
                 contentHeight = that.$content.height(),
-                top = parseInt(that.$content.css("top")) || 0,
+                top = parseInt(that.$content.css('top')) || 0,
                 min = containerHeight - contentHeight + itemHeight,
                 max = 0;
             top += speed * scrollSpeed * -itemHeight;
             if (top <= min) {
                 top = min;
-                that.$scrollbars.down.hide().trigger("mouseleave");
+                that.$scrollbars.down.hide().trigger('mouseleave');
                 that.$container.height(containerHeight + itemHeight);
-                that.items[that.items.length - 1].trigger("mouseover");
+                that.items[that.items.length - 1].trigger('mouseover');
             } else if (top >= max - itemHeight) {
                 top = max;
-                that.$scrollbars.up.hide().trigger("mouseleave");
+                that.$scrollbars.up.hide().trigger('mouseleave');
                 that.$container.height(containerHeight + itemHeight);
-                that.items[0].trigger("mouseover");
+                that.items[0].trigger('mouseover');
             }
             that.$content.css({
-                top: top + "px"
+                top: top + 'px'
             });
         }
 
         function scrollMenuUp() {
-            if (that.$scrollbars.up.is(":visible")) {
+            if (that.$scrollbars.up.is(':visible')) {
                 that.$content.css({
-                    top: "0px"
+                    top: '0px'
                 });
                 that.$scrollbars.up.hide();
-                if (that.$scrollbars.down.is(":hidden")) {
+                if (that.$scrollbars.down.is(':hidden')) {
                     that.$scrollbars.down.show();
                 } else {
                     that.$container.height(that.$container.height() + itemHeight);
@@ -7583,28 +7621,32 @@ requires
         function selectItem(position) {
             var item;
             if (self.options.selected > -1) {
-                //Ox.print("s.o.s", self.options.selected, that.items)
+                //Ox.print('s.o.s', self.options.selected, that.items)
                 item = that.items[self.options.selected]
-                item.removeClass("OxSelected");
-                that.triggerEvent("deselect", {
-                    id: item.options("id"),
-                    title: Ox.stripTags(item.options("title")[0])
+                item.removeClass('OxSelected');
+                /* disabled
+                that.triggerEvent('deselect', {
+                    id: item.options('id'),
+                    title: Ox.stripTags(item.options('title')[0])
                 });
+                */
             }
             if (position > -1) {
                 item = that.items[position];
                 $.each(that.submenus, function(id, submenu) {
-                    if (!submenu.is(":hidden")) {
+                    if (!submenu.is(':hidden')) {
                         submenu.hideMenu();
                         return false;
                     }
                 });
-                item.options("items").length && that.submenus[item.options("id")].showMenu(); // fixme: do we want to switch to this style?
-                item.addClass("OxSelected");
-                that.triggerEvent("select", {
-                    id: item.options("id"),
-                    title: Ox.stripTags(item.options("title")[0])
+                item.options('items').length && that.submenus[item.options('id')].showMenu(); // fixme: do we want to switch to this style?
+                item.addClass('OxSelected');
+                /* disabled
+                that.triggerEvent('select', {
+                    id: item.options('id'),
+                    title: Ox.stripTags(item.options('title')[0])
                 });
+                */
             }
             self.options.selected = position;
         }
@@ -7612,21 +7654,21 @@ requires
         function selectNextItem() {
             var offset,
                 selected = self.options.selected;
-            Ox.print("sNI", selected)
+            Ox.print('sNI', selected)
             if (!isLastEnabledItem()) {
                 if (selected == -1) {
                     scrollMenuUp();
                 } else {
-                    that.items[selected].removeClass("OxSelected");
+                    that.items[selected].removeClass('OxSelected');
                 }
                 do {
                     selected++;                    
-                } while (that.items[selected].options("disabled"))
+                } while (that.items[selected].options('disabled'))
                 selectItem(selected);
                 offset = that.items[selected].offset().top + itemHeight -
                         that.$container.offset().top - that.$container.height();
                 if (offset > 0) {
-                    if (that.$scrollbars.up.is(":hidden")) {
+                    if (that.$scrollbars.up.is(':hidden')) {
                         that.$scrollbars.up.show();
                         that.$container.height(that.$container.height() - itemHeight);
                         offset += itemHeight;
@@ -7636,7 +7678,7 @@ requires
                         that.$container.height(that.$container.height() + itemHeight);
                     } else {
                         that.$content.css({
-                            top: ((parseInt(that.$content.css("top")) || 0) - offset) + "px"
+                            top: ((parseInt(that.$content.css('top')) || 0) - offset) + 'px'
                         });
                     }
                 }
@@ -7646,18 +7688,18 @@ requires
         function selectPreviousItem() {
             var offset,
                 selected = self.options.selected;
-            Ox.print("sPI", selected)
+            Ox.print('sPI', selected)
             if (selected > - 1) {
                 if (!isFirstEnabledItem()) {
-                    that.items[selected].removeClass("OxSelected");
+                    that.items[selected].removeClass('OxSelected');
                     do {
                         selected--;                    
-                    } while (that.items[selected].options("disabled"))
+                    } while (that.items[selected].options('disabled'))
                     selectItem(selected);
                 }
                 offset = that.items[selected].offset().top - that.$container.offset().top;
                 if (offset < 0) {
-                    if (that.$scrollbars.down.is(":hidden")) {
+                    if (that.$scrollbars.down.is(':hidden')) {
                         that.$scrollbars.down.show();
                         that.$container.height(that.$container.height() - itemHeight);
                     }
@@ -7666,16 +7708,17 @@ requires
                         that.$container.height(that.$container.height() + itemHeight);
                     }
                     that.$content.css({
-                        top: ((parseInt(that.$content.css("top")) || 0) - offset) + "px"
+                        top: ((parseInt(that.$content.css('top')) || 0) - offset) + 'px'
                     });
                 }
             }
         }
 
         function selectSubmenu() {
-            Ox.print("selectSubmenu", self.options.selected)
+            Ox.print('selectSubmenu', self.options.selected)
             if (self.options.selected > -1) {
-                var submenu = that.submenus[that.items[self.options.selected].options("id")];
+                var submenu = that.submenus[that.items[self.options.selected].options('id')];
+                Ox.print('submenu', submenu, that.submenus);
                 if (submenu && submenu.hasEnabledItems()) {
                     submenu.gainFocus();
                     submenu.selectFirstItem();
@@ -7688,9 +7731,10 @@ requires
         }
 
         function selectSupermenu() {
-            Ox.print("selectSupermenu", self.options.selected)
+            Ox.print('selectSupermenu', self.options.selected)
             if (self.options.parent) {
-                that.items[self.options.selected].trigger("mouseleave");
+                self.options.selected > -1 && that.items[self.options.selected].trigger('mouseleave');
+                scrollMenuUp();
                 self.options.parent.gainFocus();
             } else if (self.options.mainmenu) {
                 self.options.mainmenu.selectPreviousMenu();
@@ -7698,9 +7742,10 @@ requires
         }
 
         self.onChange = function(key, value) {
-            if (key == "items") {
+            if (key == 'items') {
                 constructItems(value);
-            } else if (key == "selected") {
+            } else if (key == 'selected') {
+                that.$content.find('.OxSelected').removeClass('OxSelected');
                 selectItem(value);
             }
         }
@@ -7718,17 +7763,29 @@ requires
         };
 
         that.checkItem = function(id) {
-            that.getItem(id).options({
-                checked: true
-            });
+            var item = that.getItem(id);
+            if (item.options('group')) {
+                var position = getItemPositionById(id),
+                    toggled = self.optionGroups[item.options('group')].toggle(position);
+                if (toggled.length) {
+                    $.each(toggled, function(i, pos) {
+                        that.items[pos].toggleChecked();
+                    });
+                }
+            } else {
+                item.options({
+                    checked: true
+                });
+            }
         };
 
         that.getItem = function(id) {
-            var ids = id.split("_"),
+            Ox.print('id', id)
+            var ids = id.split('_'),
                 item;
             if (ids.length == 1) {
                 $.each(that.items, function(i, v) {
-                    if (v.options("id") == id) {
+                    if (v.options('id') == id) {
                         item = v;
                         return false;
                     }
@@ -7740,15 +7797,27 @@ requires
                     });
                 }
             } else {
-                item = that.submenus[ids.shift()].getItem(ids.join("_"));
+                item = that.submenus[ids.shift()].getItem(ids.join('_'));
             }
             return item;
         };
 
+        that.getSubmenu = function(id) {
+            var ids = id.split('_'),
+                submenu;
+            if (ids.length == 1) {
+                submenu = that.submenus[id];
+            } else {
+                submenu = that.submenus[ids.shift()].getSubmenu(ids.join('_'));
+            }
+            Ox.print('getSubmenu', id, submenu);
+            return submenu;
+        }
+
         that.hasEnabledItems = function() {
             var ret = false;
             $.each(that.items, function(i, item) {
-                if (!item.options("disabled")) {
+                if (!item.options('disabled')) {
                     return ret = true;
                 }
             });
@@ -7756,29 +7825,30 @@ requires
         };
 
         that.hideMenu = function() {
-            if (that.is(":hidden")) {
+            if (that.is(':hidden')) {
                 return;
             }
             $.each(that.submenus, function(i, submenu) {
-                if (submenu.is(":visible")) {
+                if (submenu.is(':visible')) {
                     submenu.hideMenu();
                     return false;
                 }
             });
             selectItem(-1);
             scrollMenuUp();
-            that.$scrollbars.up.is(":visible") && that.$scrollbars.up.hide();
-            that.$scrollbars.down.is(":visible") && that.$scrollbars.down.hide();
+            that.$scrollbars.up.is(':visible') && that.$scrollbars.up.hide();
+            that.$scrollbars.down.is(':visible') && that.$scrollbars.down.hide();
             //that.$scrollbars.down.hide();
             if (self.options.parent) {
-                self.options.element.removeClass("OxSelected");
+                //self.options.element.removeClass('OxSelected');
+                self.options.parent.options({
+                    selected: -1
+                });
             }
             that.hide()
                 .loseFocus()
-                //.removeEvent(self.keyboardEvents)
-                .triggerEvent("hide");
+                .triggerEvent('hide');
             that.$layer.hide();
-            //$document.unbind("click", click);
             return that;
         };
 
@@ -7791,7 +7861,7 @@ requires
         };
 
         that.showMenu = function() {
-            if (!that.is(":hidden")) {
+            if (!that.is(':hidden')) {
                 return;
             }
             if (!self.options.parent && !that.$layer.parent().length) {
@@ -7799,14 +7869,17 @@ requires
             }
             that.parent().length == 0 && that.appendTo($body);
             that.css({
-                left: "-1000px",
-                top: "-1000px",
+                left: '-1000px',
+                top: '-1000px',
             }).show();
             var offset = self.options.element.offset(),
                 width = self.options.element.outerWidth(),
                 height = self.options.element.outerHeight(),
-                left = offset.left + self.options.offset.left + (self.options.side == "bottom" ? 0 : width),
-                top = offset.top + self.options.offset.top + (self.options.side == "bottom" ? height : 0),
+                left = Ox.limit(
+                    offset.left + self.options.offset.left + (self.options.side == 'bottom' ? 0 : width),
+                    0, $window.width() - that.width()
+                ),
+                top = offset.top + self.options.offset.top + (self.options.side == 'bottom' ? height : 0),
                 menuHeight = that.$content.outerHeight(); // fixme: why is outerHeight 0 when hidden?
                 menuMaxHeight = Math.floor($window.height() - top - 16);
             if (self.options.parent) {
@@ -7816,8 +7889,8 @@ requires
                 }
             }
             that.css({
-                left: left + "px",
-                top: top + "px"
+                left: left + 'px',
+                top: top + 'px'
             });
             if (menuHeight > menuMaxHeight) {
                 that.$container.height(menuMaxHeight - itemHeight - 8); // margin
@@ -7825,18 +7898,16 @@ requires
             } else {
                 that.$container.height(menuHeight);
             }
-            if (self.options.parent) {
-                Ox.Event.bindKeyboard(self.options.id);
-            } else {
+            if (!self.options.parent) {
                 that.gainFocus();
             }
             that.$layer.show();
             return that;
-            //that.triggerEvent("show");
+            //that.triggerEvent('show');
         };
 
         that.toggleMenu = function() {
-            that.is(":hidden") ? that.showMenu() : that.hideMenu();
+            that.is(':hidden') ? that.showMenu() : that.hideMenu();
         };
 
         return that;
@@ -7846,16 +7917,16 @@ requires
     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,
                     disabled: false,
-                    group: "",
-                    icon: "",
-                    id: "",
+                    group: '',
+                    icon: '',
+                    id: '',
                     items: [],
-                    keyboard: "",
+                    keyboard: '',
                     menu: null, // fixme: is passing the menu to 100s of menu items really memory-neutral?
                     position: 0,
                     title: [],
@@ -7864,11 +7935,11 @@ requires
                     keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
                     title: Ox.makeArray(options.title || self.defaults.title)
                 }))
-                .addClass("OxItem" + (self.options.disabled ? " OxDisabled" : ""))
+                .addClass('OxItem' + (self.options.disabled ? ' OxDisabled' : ''))
                 .attr({
-                    id: Ox.toCamelCase(self.options.menu.options("id") + "/" + self.options.id)
+                    id: Ox.toCamelCase(self.options.menu.options('id') + '/' + self.options.id)
                 })
-                .data("group", self.options.group); // fixme: why?
+                .data('group', self.options.group); // fixme: why?
 
         if (self.options.group && self.options.checked === null) {
             self.options.checked = false;
@@ -7876,38 +7947,38 @@ requires
 
         // construct
         that.append(
-                that.$status = $("<td>", {
-                    "class": "OxCell OxStatus",
-                    html: self.options.checked ? oxui.symbols.check : ""
+                that.$status = $('<td>', {
+                    'class': 'OxCell OxStatus',
+                    html: self.options.checked ? oxui.symbols.check : ''
                 })
             )
             .append(
-                that.$icon = $("<td>", {
-                    "class": "OxCell OxIcon"
+                that.$icon = $('<td>', {
+                    'class': 'OxCell OxIcon'
                 })
                 .append(self.options.icon ?
-                    $("<img>", {
+                    $('<img>', {
                         src: self.options.icon
                     }) : null
                 )
             )
             .append(
-                that.$title = $("<td>", {
-                    "class": "OxCell OxTitle",
+                that.$title = $('<td>', {
+                    'class': 'OxCell OxTitle',
                     html: self.options.title[0]
                 })
             )
             .append(
-                $("<td>", {
-                    "class": "OxCell OxModifiers",
+                $('<td>', {
+                    'class': 'OxCell OxModifiers',
                     html: $.map(self.options.keyboard.modifiers, function(modifier) {
                         return oxui.symbols[modifier];
-                    }).join("")
+                    }).join('')
                 })
             )
             .append(
-                $("<td>", {
-                    "class": "OxCell Ox" + (self.options.items.length ? "Submenu" : "Key"),
+                $('<td>', {
+                    'class': 'OxCell Ox' + (self.options.items.length ? 'Submenu' : 'Key'),
                     html: self.options.items.length ? oxui.symbols.triangle_right :
                             oxui.symbols[self.options.keyboard.key] ||
                             self.options.keyboard.key.toUpperCase()
@@ -7915,7 +7986,7 @@ requires
             );            
 
         function parseKeyboard(str) {
-            var modifiers = str.split(" "),
+            var modifiers = str.split(' '),
                 key = modifiers.pop();
             return {
                 modifiers: modifiers,
@@ -7924,11 +7995,11 @@ requires
         }
 
         self.onChange = function(key, value) {
-            if (key == "checked") {
-                that.$status.html(value ? oxui.symbols.check : "")
-            } else if (key == "disabled") {
-                that.toggleClass("OxDisabled"); // fixme: this will only work if onChange is only invoked on actual change
-            } else if (key == "title") {
+            if (key == 'checked') {
+                that.$status.html(value ? oxui.symbols.check : '')
+            } else if (key == 'disabled') {
+                that.toggleClass('OxDisabled'); // fixme: this will only work if onChange is only invoked on actual change
+            } else if (key == 'title') {
                 self.options.title = Ox.makeArray(value);
                 that.$title.html(self.options.title[0]);
             }
@@ -7949,7 +8020,7 @@ requires
         };
 
         that.toggleTitle = function() {
-            Ox.print("s.o.t", self.options.title)
+            Ox.print('s.o.t', self.options.title)
             that.options({
                 title: self.options.title.reverse()
             });
@@ -7977,60 +8048,58 @@ requires
                 .defaults({
                     collapsed: false,
                     size: 20,
-                    title: ""
+                    title: ''
                 })
                 .options(options)
-                .addClass("OxCollapsePanel"),
-            value = self.options.collapsed ?
-                ["expand", "collapsed"] : ["collapse", "expand"],
+                .addClass('OxCollapsePanel'),
+            title = self.options.collapsed ?
+                [{id: 'expand', title: 'expand'}, {id: 'collapse', title: 'collapse'}] :
+                [{id: 'collapse', title: 'collapse'}, {id: 'expand', title: 'expand'}];
             $titlebar = new Ox.Bar({
-                    orientation: "horizontal",
+                    orientation: 'horizontal',
                     size: self.options.size,
                 })
                 .dblclick(dblclickTitlebar)
                 .appendTo(that),
             $switch = new Ox.Button({
-                    style: "symbol",
-                    type: "image",
-                    value: value,
+                    id: self.options.id + 'Switch',
+                    style: 'symbol',
+                    title: title,
+                    type: 'image',
                 })
                 .click(toggleCollapsed)
                 .appendTo($titlebar),
             $title = new Ox.Element()
-                .addClass("OxTitle")
+                .addClass('OxTitle')
                 .html(self.options.title/*.toUpperCase()*/)
                 .appendTo($titlebar);
         that.$content = new Ox.Element()
-            .addClass("OxContent")
+            .addClass('OxContent')
             .appendTo(that);
         // fixme: doesn't work, content still empty
         // need to hide it if collapsed
         if (self.options.collapsed) {
             that.$content.css({
-                marginTop: -that.$content.height() + "px"
+                marginTop: -that.$content.height() + 'px'
             });
         }
         function dblclickTitlebar(e) {
-            if (!$(e.target).hasClass("OxButton")) {
-                toggleCollapsed();
+            if (!$(e.target).hasClass('OxButton')) {
+                $switch.trigger('click');
             }
         }
         function toggleCollapsed() {
-            that.options({
-                collapsed: !self.options.collapsed
-            });
-            var top = self.options.collapsed ?
-                -that.$content.height() : 0;
+            var marginTop;
+            self.options.collapsed = !self.options.collapsed;
+            marginTop = self.options.collapsed ? -that.$content.height() : 0;
             that.$content.animate({
-                marginTop: top + "px"
+                marginTop: marginTop + 'px'
             }, 200);
         }
-        self.onChange = function(option, value) {
-            if (option == "collapsed") {
-                $switch.options({
-                    value: value ? "expand" : "collapse"
-                });
-            } else if (option == "title") {
+        self.onChange = function(key, value) {
+            if (key == 'collapsed') {
+
+            } else if (key == 'title') {
                 $title.html(self.options.title);
             }
         };
@@ -8046,7 +8115,7 @@ requires
     Ox.Panel = function(options, self) {
         var self = self || {},
             that = new Ox.Element({}, self)
-                .addClass("OxPanel");
+                .addClass('OxPanel');
         return that;
     };
 
@@ -8062,10 +8131,10 @@ requires
             resizable: false,   resizable or not (only for outer elements)
             resize: [],         array of sizes (only for resizable elements,
                                 first value is min, last value is max,
-                                other values are "snappy" points in between)
+                                other values are 'snappy' points in between)
             size: 0             size in px (one element must have no size)
         }],
-        orientation: ""         "horizontal" or "vertical"
+        orientation: ''         'horizontal' or 'vertical'
     methods:
         isCollapsed(id)         element is collapsed or not
         resize(id, size)        resize element to size px
@@ -8082,10 +8151,10 @@ requires
             that = new Ox.Element({}, self) // fixme: Container
                 .defaults({
                     elements: [],
-                    orientation: "horizontal"
+                    orientation: 'horizontal'
                 })
                 .options(options || {})
-                .addClass("OxSplitPanel");
+                .addClass('OxSplitPanel');
 
         $.extend(self, {
             dimensions: oxui.getDimensions(self.options.orientation),
@@ -8101,7 +8170,7 @@ requires
                 collapsed: false,
                 resizable: false,
                 resize: [],
-                size: "auto"
+                size: 'auto'
             }, v);
             that.$elements[i] = v.element
                 .css(self.edges[2], 0)
@@ -8112,36 +8181,37 @@ requires
 
         $.each(self.options.elements, function(i, v) {
             //that.append(element)
-            //Ox.print("V: ", v, that.$elements[i])
+            //Ox.print('V: ', v, that.$elements[i])
             that.$elements[i].appendTo(that.$element); // fixme: that.$content
             if (v.collapsible || v.resizable) {
-                Ox.print("v.size", v.size)
+                Ox.print('v.size', v.size)
                 var $resizebar = new Ox.Resizebar({
                         collapsible: v.collapsible,
                         edge: self.edges[i == 0 ? 0 : 1],
                         elements: i < 2 ?
                                 [that.$elements[0], that.$elements[1]] :
                                 [that.$elements[1], that.$elements[2]],
-                        id: v.element.options("id"),
-                        orientation: self.options.orientation == "horizontal" ? "vertical" : "horizontal",
+                        id: v.element.options('id'),
+                        orientation: self.options.orientation == 'horizontal' ? 'vertical' : 'horizontal',
                         parent: that, // fixme: that.$content
                         resizable: v.resizable,
                         resize: v.resize,
                         size: v.size
                     })
                     .css(self.edges[i == 0 ? 0 : 1], v.size);
-                $resizebar[i == 0 ? "insertAfter" : "insertBefore"](that.$elements[i]);
+                $resizebar[i == 0 ? 'insertAfter' : 'insertBefore'](that.$elements[i]);
             }
         });
 
         function getPositionById(id) {
             var position = -1;
             $.each(self.options.elements, function(i, element) {
-                if (element.element.options("id") == id) {
+                if (element.element.options('id') == id) {
                     position = i;
                     return false;
                 }
             });
+            Ox.print('getPositionById', id, position);
             return position;
         }
 
@@ -8151,23 +8221,23 @@ requires
 
         function setSizes() {
             $.each(self.options.elements, function(i, v) {
-                v.size != "auto" && that.$elements[i].css(self.dimensions[0], v.size + "px");
+                v.size != 'auto' && that.$elements[i].css(self.dimensions[0], v.size + 'px');
                 if (i == 0) {
                     that.$elements[i].css(self.edges[0], 0);
-                    v.size != "auto" && that.$elements[i].css(
-                        self.edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + "px"
+                    v.size != 'auto' && that.$elements[i].css(
+                        self.edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + 'px'
                     );
                 } else if (i == 1) {
-                    self.options.elements[0].size != "auto" && that.$elements[i].css(
-                        self.edges[0], getSize(self.options.elements[0]) + "px"
+                    self.options.elements[0].size != 'auto' && that.$elements[i].css(
+                        self.edges[0], getSize(self.options.elements[0]) + 'px'
                     );
-                    (self.options.elements[0].size != "auto" || v.size != "auto") && that.$elements[i].css(
-                        self.edges[1], (self.length == 3 ? getSize(self.options.elements[2]) : 0) + "px"
+                    (self.options.elements[0].size != 'auto' || v.size != 'auto') && that.$elements[i].css(
+                        self.edges[1], (self.length == 3 ? getSize(self.options.elements[2]) : 0) + 'px'
                     );
                 } else {
                     that.$elements[i].css(self.edges[1], 0);
-                    v.size != "auto" && that.$elements[i].css(
-                        self.edges[0], (getSize(self.options.elements[0]) + getSize(self.options.elements[1])) + "px"
+                    v.size != 'auto' && that.$elements[i].css(
+                        self.edges[0], (getSize(self.options.elements[0]) + getSize(self.options.elements[1])) + 'px'
                     );
                 }
             });
@@ -8177,17 +8247,31 @@ requires
             return self.options.elements[getPositionById(id)].collapsed;
         };
 
+        that.replace = function(id, element) {
+            // one can pass pos instead of id
+            var pos = Ox.isNumber(id) ? id : getPositionById(id);
+            Ox.print('element', self.options.elements[pos].element, element)
+            self.options.elements[pos].element.replaceWith(element.$element.$element || element.$element);
+            self.options.elements[pos].element = element;
+            that.$elements[pos] = element
+                .css(self.edges[2], 0)
+                .css(self.edges[3], 0);
+            setSizes();
+            Ox.print(self.options.elements[pos])
+        };
+
         that.resize = function(id, size) {
             // one can pass pos instead of id
             var pos = Ox.isNumber(id) ? id : getPositionById(id);
-            // Ox.print("pos", pos, self.options.elements, $.map(self.options.elements, function(v, i) { return v.element.options("id"); }))
+            // Ox.print('pos', pos, self.options.elements, $.map(self.options.elements, function(v, i) { return v.element.options('id'); }))
+            Ox.print('pos', pos, 'size', size)
             self.options.elements[pos].size = size;
             setSizes();
             return that;
         };
 
         that.toggle = function(id) {
-            Ox.print("toggle", id);
+            Ox.print('toggle', id);
             /*
             // something like this is needed to load in collapsed state
             if (Ox.isUndefined(self.options.position)) {
@@ -8197,15 +8281,15 @@ requires
             var size = self.options.position -
                         (self.options.collapsed ? 0 : self.options.size),
                 animate = {};
-            Ox.print("s.o.e", self.options.edge);
+            Ox.print('s.o.e', self.options.edge);
             */
             var pos = getPositionById(id),
                 size = self.options.elements[pos].collapsed ? 0 : self.options.elements[pos].size,
                 animate = {};
             animate[self.edges[pos == 0 ? 0 : 1]] = size;
             self.options.parent.animate(animate, 200, function() {
-                var i = (self.options.edge == "left" || self.options.edge == "top") ? 1 : 0;
-                that.triggerEvent("resize", self.options.elements[i][self.dimensions[1]]());
+                var i = (self.options.edge == 'left' || self.options.edge == 'top') ? 1 : 0;
+                that.triggerEvent('resize', self.options.elements[i][self.dimensions[1]]());
                 self.options.elements[pos].collapsed = !self.options.elements[pos].collapsed;
             });
         };
@@ -8232,16 +8316,16 @@ requires
 
     Ox.LoadingIcon = function(options, self) {
         var self = self || {},
-            that = new Ox.Element("img", self)
+            that = new Ox.Element('img', self)
                 .defaults({
-                    size: "medium"
+                    size: 'medium'
                 })
                 .options(options || {})
                 .attr({
-                    src: oxui.path + "/png/ox.ui." + Ox.theme() + "/loading.png" // fixme: oxui.themePath needed?
+                    src: oxui.path + '/png/ox.ui.' + Ox.theme() + '/loading.png' // fixme: oxui.themePath needed?
                 })
                 .addClass(
-                    "OxLoadingIcon Ox" + Ox.toTitleCase(self.options.size)
+                    'OxLoadingIcon Ox' + Ox.toTitleCase(self.options.size)
                 );
         self.deg = 0;
         self.interval = 0;
@@ -8254,8 +8338,8 @@ requires
         }
         function update() {
             that.css({
-                MozTransform: "rotate(" + self.deg + "deg)",
-                WebkitTransform: "rotate(" + self.deg + "deg)"
+                MozTransform: 'rotate(' + self.deg + 'deg)',
+                WebkitTransform: 'rotate(' + self.deg + 'deg)'
             });
         }
         that.start = function() {
@@ -8303,16 +8387,16 @@ requires
     Ox.Tooltip = function(options, self) {
 
         var self = self || {},
-            that = new Ox.Element("div", self)
+            that = new Ox.Element('div', self)
                 .defaults({
-                    title: ""
+                    title: ''
                 })
                 .options(options || {})
-                .addClass("OxTooltip")
+                .addClass('OxTooltip')
                 .html(self.options.title);
 
         self.onChange = function(key, value) {
-            if (key == "title") {
+            if (key == 'title') {
                 that.html(value);
             }
         };
@@ -8328,15 +8412,15 @@ requires
 
         that.show = function(x, y) {
             var left, top, width, height;
-            $(".OxTooltip").remove(); // fixme: don't use dom
+            $('.OxTooltip').remove(); // fixme: don't use dom
             that.appendTo($body);
             width = that.width();
             height = that.height();
             left = Ox.limit(x - width / 2, 0, $document.width() - width);
             top = y > $document.height() - height - 16 ? y - 32 : y + 16;
             that.css({
-                    left: left + "px",
-                    top: top + "px"
+                    left: left + 'px',
+                    top: top + 'px'
                 })
                 .animate({
                     opacity: 1