oxjstmp/build/js/ox.ui.js

/*
################################################################################
ox.ui.js

requires
    jquery-1.4.js
    ox.js
################################################################################
*/

// also see test.js, in demos ...

(function() {

    var oxui = {
            defaultTheme: "classic",
            elements: {},
            getDimensions: function(orientation) {
                return orientation == "horizontal" ?
                    ["width", "height"] : ["height", "width"];
            },
            getEdges: function(orientation) {
                return orientation == "horizontal" ?
                    ["left", "right", "top", "bottom"] :
                    ["top", "bottom", "left", "right"];
            },
            getBarSize: function(size) {
                var sizes = {
                    small: 20,
                    medium: 24,
                    large: 28,
                };
                return sizes[size];
            },
            jQueryFunctions: function() {
                var functions = [],
                    $element = $("<div>");
                //delete $element.length;
                Ox.each($element, function(k, v) {
                    if (typeof v == "function") {
                        functions.push(k);
                    }
                });
                return functions.sort();
            }(),
            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"
            }
        },
        $window, $document, $body;

    $(function() {
        $window = $(window),
        $document = $(document),
        $body = $("body"),
        $elements = {};
        Ox.theme(oxui.defaultTheme);
    });

    /*
    ============================================================================
    Application
    ============================================================================
    */

    /*
    ----------------------------------------------------------------------------
    Ox.App
    ----------------------------------------------------------------------------
    */

    Ox.App = function() {
        /*
        options:
        requestTimeout
        requestType
        requestURL
        */
        return function(options) {

            options = options || {};
            var self = {},
                that = this;

            self.options = $.extend({
                requestTimeout: oxui.requestTimeout,
                requestType: oxui.requestType,
                requestURL: oxui.requestURL
            }, options);

            self.change = function(key, value) {
                
            };

            that.launch = function() {
                $.ajaxSetup({
                    timeout: self.options.requestTimeout,
                    type: self.options.requestType,
                    url: self.options.requestURL
                });
            };

            that.options = function() {
                return Ox.getset(self.options, Array.slice.call(arguments), self.change, that); 
            };

            that.request = function(action, data, callback) {
                if (arguments.length == 2) {
                    callback = data;
                    data = {};
                }
                return Ox.Request.send({
                    url: self.options.requestURL,
                    data: {
                        action: action,
                        data: JSON.stringify(data)
                    },
                    callback: callback
                });
            };

            return that;

        };

    }();

    /*
    ----------------------------------------------------------------------------
    Ox.Event
    ----------------------------------------------------------------------------

    naming convention for event/trigger
    verb.id.namespace, i.e. verb.sourceId.targetId (?)
    ...
    bind("keydown.shift+dot.numpad", function() {
        // ...
    })
    keyboard handler then would:
    $.each(stack, function(i, v) {
        elements[v].trigger("keydown.shift+0.numpad");
    });
    and the element would implement
    this.trigger(event, data) {
        
    }
    ...
    keyboard handler also triggers keydown.buffer
    */

    // use dom elements / jquery instead

    Ox.Event = function() {
        var keyboardEvents = {};
            $eventHandler = $("<div>");
        function isKeyboardEvent(event) {
            return event.substr(0, 4) == "key_";
        }
        return {
            bind: function(id, event, callback) {
                if (arguments.length == 2) {
                    callback = event;
                    event = id;
                }
                if (isKeyboardEvent(event)) {
                    keyboardEvents[id] = keyboardEvents[id] || {};
                    keyboardEvents[id][event] = callback;
                }
                if (!isKeyboardEvent(event) || Ox.Focus.focused() == id) {
                    Ox.print("bind", id, event)
                    $eventHandler.bind(event, callback);
                }
            },
            bindKeyboard: function(id) {
                $.each(keyboardEvents[id] || [], function(event, callback) {
                    Ox.Event.bind(id, event, callback);
                    //$eventHandler.bind(event, callback);
                });
            },
            trigger: function(event, data) {
                Ox.print("trigger", event, data || {});
                $eventHandler.trigger(event, data || {});
            },
            unbind: function(id, event, callback) {
                if (isKeyboardEvent(event)) {
                    $.each(keyboardEvents[id] || [], function(e, callback) {
                        if (e == event) {
                            delete keyboardEvents[id][e];
                            return false;
                        }
                    });
                }
                Ox.print("unbind", id, event)
                $eventHandler.unbind(event, callback);
            },
            unbindKeyboard: function(id) {
                $.each(keyboardEvents[id] || [], function(event, callback) {
                    Ox.print("unbind", id, event)
                    $eventHandler.unbind(event, callback);
                });
            }
        }
    }();

    Ox.Event_ = function() { // unused
        var events = {};
        return {
            // make these bind, trigger, unbind
            publish: function(event, data) {
                if (events[event]) {
                    $.each(events[event], function(i, v) {
                        setTimeout(function() {
                            v(data);                                
                        }, 0);
                    });
                }
            },
            subscribe: function(event, callback) {
                if (events[event]) {
                    events[event].push(callback);
                } else {
                    events[event] = [callback];
                }
            },
            unsubscribe: function(event, callback) {
                $.each(events[event], function(i, v) {
                    if (Ox.startsWith(callback.toString(), v.toString())) {
                        events[event].splice(i, 1);
                    }
                });
            }
        };
    }();

    /*
    ----------------------------------------------------------------------------
    Ox.Focus
    ----------------------------------------------------------------------------
    */

    Ox.Focus = function() {
        var stack = [];
        return {
            blur: function(id) {
                if (stack.indexOf(id) == stack.length - 1) {
                    $elements[Ox.Focus.focused()].removeClass("OxFocus");
                    $(".OxFocus").removeClass("OxFocus"); // fixme: the above is better, and should work
                    stack.splice(stack.length - 2, 0, stack.pop());
                    Ox.Event.unbindKeyboard(id);
                    Ox.Event.bindKeyboard(stack[stack.length - 1]);
                    Ox.print("blur", id, stack);
                }
            },
            focus: function(id) {
                var index = stack.indexOf(id);
                if (stack.length) {
                    Ox.Event.unbindKeyboard(stack[stack.length - 1])
                }
                if (index > -1) {
                    stack.splice(index, 1);
                }
                stack.push(id);
                $elements[Ox.Focus.focused()].addClass("OxFocus");
                Ox.Event.bindKeyboard(id);
                Ox.print("focus", id, stack);
            },
            focused: function() {
                return stack[stack.length - 1];
            }
        };
    }();

    /*
    ----------------------------------------------------------------------------
    Ox.History
    ----------------------------------------------------------------------------
    */

    /*
    ----------------------------------------------------------------------------
    Ox.Keyboard
    ----------------------------------------------------------------------------
    */

    (function() {

        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"
                    // see dojo, for ex.
                };
            }(),
            modifierNames = {
                altKey: "alt", // mac: option
                ctrlKey: "control",
                // metaKey: "meta", // mac: command
                shiftKey: "shift"
            };

        $(function() {
            // fixme: how to do this better?
            // in firefox on mac, keypress doesn't fire for up/down
            // if the cursor is at the start/end of an input element
            // on linux, it doesn't seem to fire if the input element has focus
            if ($.browser.mozilla) {
                $document.keypress(keypress);
                $document.keydown(function(event) {
                    var $element = $("input:focus");
                    if ($element.length) {
                        if (
                            (
                                keyNames[event.keyCode] == "up" &&
                                $element[0].selectionStart + $element[0].selectionEnd == 0
                            ) || (
                                keyNames[event.keyCode] == "down" &&
                                $element[0].selectionStart == $element.val().length &&
                                $element[0].selectionEnd == $element.val().length
                            )
                        ) {
                            keypress(event);
                        }
                    }
                });                
            } else {
                $document.keydown(keypress);                
            }
        });
        function keypress(event) {
            var key,
                keys = [],
                //ret = true,
                time;
            $.each(modifierNames, function(k, v) {
                if (event[k]) {
                    keys.push(v);
                }
            });
            // avoid pushing modifier twice
            Ox.print("keys", keys)
            if (keyNames[event.keyCode] && keys.indexOf(keyNames[event.keyCode]) == -1) {
                keys.push(keyNames[event.keyCode]);
            }
            key = keys.join("_");
            if (key.match(/^[\w\d-]$|SPACE/)) {
                time = Ox.getTime();
                if (time - bufferTime > bufferTimeout) {
                    buffer = "";
                }
                buffer += key == "SPACE" ? " " : key;
                bufferTime = time;                    
            }
            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);
                return ret;
            });
            */                
        }
        
    })();

    /*
    ----------------------------------------------------------------------------
    Ox.Mouse (??)
    ----------------------------------------------------------------------------
    */

    /*
    ----------------------------------------------------------------------------
    Ox.Request
    ----------------------------------------------------------------------------
    */

    Ox.Request = function() {

        var cache = {},
            pending = {},
            requests = {},
            self = {
                options: {
                    timeout: 15000,
                    type: "POST",
                    url: "api"
                }
            };

        return {

            cancel: function() {
                var index;
                if (arguments.length == 0) {
                    requests = {};
                } else if (Ox.isFunction(arguments[0])) {
                    // cancel with function
                    $.each(requests, function(id, req) {
                        if (arguments[0](req)) {
                            delete requests[id];
                        }
                    })
                } else {
                    // cancel by id
                    delete requests[arguments[0]]
                }
            },

            emptyCache: function() {
                cache = {};
            },

            options: function(options) {
                return Ox.getset(self.options, options, $.noop(), this);
            },

            send: function(options) {

                var options = $.extend({
                        age: -1,
                        callback: function() {},
                        id: Ox.uid(),
                        timeout: self.options.timeout,
                        type: self.options.type,
                        url: self.options.url
                    }, options),
                    req = JSON.stringify({
                        url: options.url,
                        data: options.data
                    });

                function callback(data) {
                    delete requests[options.id];
                    Ox.length(requests) == 0 && Ox.Event.trigger("requestStop"); 
                    options.callback(data);
                }

                function debug(request) {
                    var $iframe = $("<iframe>")
                            .css({ // fixme: should go into a class
                                width: 768,
                                height: 384
                            }),
                        $dialog = new Ox.Dialog({
                                title: "Application Error",
                                buttons: [
                                    {
                                        value: "Close",
                                        click: function() {
                                            $dialog.close();
                                        }
                                    }
                                ],
                                width: 800,
                                height: 400
                            })
                            .append($iframe)
                            .open(),
                        iframe = $iframe[0].contentDocument || $iframe[0].contentWindow.document;
                    iframe.open();
                    iframe.write(request.responseText);
                    iframe.close();
                }

                function error(request, status, error) {
                    var data;
                    if (arguments.length == 1) {
                        data = arguments[0]
                    } else {
                        try {
                            data = JSON.parse(request.responseText);
                        } catch (err) {
                            data = {
                                status: {
                                    code: request.status,
                                    text: request.statusText
                                }
                            };
                        }
                    }
                    if (data.status.code < 500) {
                        callback(data);
                    } else {
                        var $dialog = new Ox.Dialog({
                                title: "Application Error",
                                buttons: [
                                    {
                                        value: "Details",
                                        click: function() {
                                            $dialog.close(function() {
                                                debug(request);                                                
                                            });
                                        }
                                    },
                                    {
                                        value: "Close",
                                        click: function() {
                                            $dialog.close(function() {
                                                callback(data);
                                            });
                                        }
                                    }
                                ],
                                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.")
                            .open();
                            // fixme: change this to Send / Don't Send
                        Ox.print({
                            request: request,
                            status: status,
                            error: error
                        });
                    }
                    pending[options.id] = false;
                }

                function success(data) {
                    pending[options.id] = false;
                    cache[req] = {
                        data: data,
                        time: Ox.getTime()
                    };
                    callback(data);
                }

                if (pending[options.id]) {
                    setTimeout(function() {
                        Ox.Request.send(options);
                    }, 0);
                } else {
                    requests[options.id] = {
                        url: options.url,
                        data: options.data
                    };
                    if (cache[req] && (options.age == -1 || options.age > Ox.getTime() - cache[req].time)) {
                        setTimeout(function() {
                            callback(cache[req].data);
                        }, 0);
                    } else {
                        pending[options.id] = true;
                        $.ajax({
                            data: options.data,
                            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");
                    }
                }

                return options.id;

            },

            requests: function() {
                return Ox.length(requests);
            }

        };
    }();

    /*
    ----------------------------------------------------------------------------
    Ox.URL
    ----------------------------------------------------------------------------
    */

    /*
    ============================================================================
    Core
    ============================================================================
    */

    /*
    ----------------------------------------------------------------------------
    Ox.Container
    ----------------------------------------------------------------------------
    */

    // fixme: wouldn't it be better to let the elements be,
    // rather then $element, $content, and potentially others,
    // 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(options, self)
            .addClass("OxContainer");
        that.$content = new Ox.Element(options, self)
            .addClass("OxContent")
            .appendTo(that);
        return that;
    };

    /*
    ----------------------------------------------------------------------------
    Ox.Element
    ----------------------------------------------------------------------------
    */

    // check out http://ejohn.org/apps/learn/#36 (-#38, making fns work w/o new)

    Ox.Element = function() {

        var elements = {}; // fixme: unused, we need this outside Element (for Focus)

        return function(options, self) {

            // construct
            options = options || {};
            self = self || {};
            var that = this;

            // init
            (function() {
                // 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") + "/>", {
                    data: {
                        ox: that.id
                    }
                });
                $elements[that.id] = that;
                wrapjQuery();
            })();

            // private
            function wrapjQuery() {
                $.each(oxui.jQueryFunctions, function(i, fn) {
                    that[fn] = function() {
                        var args = arguments,
                            length = args.length,
                            id, ret;
                        $.each(args, function(i, arg) {
                            if (Ox.isUndefined(arg)) {
                                Ox.print("fn", fn, "undefined argument")
                            }
                            // if an ox object was passed
                            // then pass its $element instead
                            // so we can do oxObj.jqFn(oxObj)
                            if (arg.ox) {
                                args[i] = arg.$element;
                            }
                            /*
                            if (arg.ox) { // fixme: or is this too much magic?
                                if (fn == "appendTo" && arg.$content) {
                                    args[i] = arg.$content
                                } else {
                                    args[i] = arg.$element;
                                }
                            }
                            */
                        });
                        /*
                        if (fn == "html" && that.$content) { // fixme: or is this too much magic?
                            $element = that.$content;
                        } else {
                            $element = that.$element;
                        }
                        */
                        // why does this not work? (that?)
                        // ret = that.$element[fn].apply(this, arguments);
                        if (length == 0) {
                            ret = that.$element[fn]();
                        } else if (length == 1) {
                            ret = that.$element[fn](args[0]);
                        } else if (length == 2) {
                            ret = that.$element[fn](args[0], args[1]);
                        } else if (length == 3) {
                            ret = that.$element[fn](args[0], args[1], args[2]);
                        } 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 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")] ?
                                $elements[id] : ret;
                    }
                });
            }

            // shared
            self.onChange = function() {
                // self.onChange(key, value)
                // is called when an option changes
                // (to be implemented by widget)
            };

            // public
            that.bindEvent = function() {
                // fixme: shouldn't this work the other way around,
                // and bind a function to an event triggered by this widget?
                /*
                bindEvent(event, fn) or bindEvent({event0: fn0, event1: fn1, ...})
                */
                if (arguments.length == 1) {
                    $.each(arguments[0], function(event, fn) {
                        Ox.Event.bind(that.id, event, fn);
                    });
                } else {
                    Ox.Event.bind(that.id, arguments[0], arguments[1]);
                }
                return that;
            };
            that.defaults = function(defaults) {
                /*
                    that.defaults({foo: x})         sets self.defaults
                */
                self.defaults = defaults;
                delete self.options; // fixme: hackish fix for that = Ox.Foo({...}, self).defaults({...}).options({...})
                return that;
            };
            that.gainFocus = function() {
                Ox.Focus.focus(that.id);
                return that;
            };
            that.hasFocus = function() {
                return Ox.Focus.focused() == that.id;
            };
            that.loseFocus = function() {
                Ox.Focus.blur(that.id);
                return that;
            };
            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,
                                                    returns that
                    that.options({foo: x, bar: y})  sets self.options.foo
                                                    and self.options.bar,
                                                    returns that
                */
                var length = arguments.length,
                    // args, options, ret;
                    args, ret;
                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") {
                    // options(str)
                    ret = self.options ? self.options[arguments[0]] : options[arguments[0]];
                } else {
                    // options (str, val) or options({str: val, ...})
                    // translate (str, val) to ({str: val})
                    args = Ox.makeObject.apply(that, arguments);
                    /*
                    options = self.options;
                    */
                    // if options have not been set, extend defaults,
                    // otherwise, extend options
                    self.options = $.extend(self.options || self.defaults, args);
                    $.each(args, function(key, value) {
                        self.onChange(key, value);
                        /*
                        fixme: why does this not work?
                        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...")
                            self.onChange(key, value);
                        } else {
                            Ox.print("NO CHANGE");
                        }
                        */
                    });
                    ret = that;                            
                }
                return ret;
            };
            that.remove = function() {
                that.$element.remove();
                delete $elements[that.ox];
                return that;
            };
            that.triggerEvent = function() {
                /*
                triggerEvent(event, fn) or triggerEvent({event0: fn0, event1: fn1, ...})
                */
                if (Ox.isObject(arguments[0])) {
                    $.each(arguments[0], function(event, fn) {
                        Ox.Event.trigger(event + "_" + self.options.id, fn);
                    });
                } else {
                    Ox.Event.trigger(arguments[0] + "_" + self.options.id, arguments[1] || {});
                }
                return that;
            };
            that.unbindEvent = function() {
                /*
                unbindEvent(event, fn) or unbindEvent({event0: fn0, event1: fn1, ...})
                */
                if (arguments.length == 1) {
                    $.each(arguments[0], function(event, fn) {
                        Ox.Event.unbind(that.id, event, fn);
                    })
                } else {
                    Ox.Event.unbind(that.id, arguments[0], arguments[1]);
                }
                return that;
            };

            // return
            return that;

        }

    }();

    Ox._Element = function(element) {
        var that = this;
        that.def = {};
        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);
        oxui.elements[that.id] = that;
        // Ox.print("oxui.elements", oxui.elements)
        //function setOption() {};
        that.setOption = function() {};
        /*
        */
        that.destroy = function() {
            that.$element.remove();
            delete oxui.elements[that.ox];
        }
        /*
        */
        that.disable = function() {
            
        }
        /*
        */
        that.enable = function() {
            
        }
        /*
        */
        ///*
        that.defaults = function() {
            var length = arguments.length,
                ret;
            if (length == 0) {
                ret = that.def
            } else if (length == 1 && typeof arguments[0] == "string") {
                ret = that.def[arguments[0]];
            } else {
                // translate ("key", "value") to {"key": "value"}
                that.def = $.extend(
                    that.def, Ox.makeObject.apply(that, arguments)
                );
                ret = that;
            }
            return ret;
        }
        //*/
        /*
        Ox.Element.options()
            get options
        Ox.Element.options("foo")
            get options.foo
        Ox.Element.options("foo", 0)
            set options.foo
        Ox.Element.options({foo: 0, bar: 1})
            set options.foo and options.bar
        */
        ///*
        that.options = function() {
            var length = arguments.length,
                args, ret;
            if (length == 0) {
                //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]]);
                ret = that.opt[arguments[0]];
            } else {
                // 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);
                $.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});
                })
                ret = that;
            }
            return ret;
        }
        // should become self.publish
        that.publish = function(event, data) {
            Ox.Event.publish(event + that.id, data);
            return that;
        }
        that.subscribe = function(event, callback) {
            Ox.Event.subscribe(event, callback);
            return that;
        }
        //that.setOptions = function() {};
        //*/
        // wrap jquery functions
        // so we can do oxObj.jqFn()
        $.each(oxui.jqueryFunctions, function(i, v) {
            that[v] = function() {
                var args = arguments,
                    length = args.length,
                    $element, id, ret;
                $.each(args, function(i, v) {
                    // if an oxui object was passed
                    // then pass its $element instead
                    // so we can do jqObj.append(oxObj)
                    if (v.ox) {
                        args[i] = v.$element;
                    }
                });
                if (v == "html" && that.$content) {
                    $element = that.$content;
                } else {
                    $element = that.$element;
                }
                // why does this not work?
                // ret = that.$element[v].apply(this, arguments);
                // maybe because we pass this, and not that.$element[v] ... ?
                // ret = that.$element[v].apply(that.$element[v], arguments);
                // doesn't work either ...
                if (length == 0) {
                    ret = $element[v]();
                } else if (length == 1) {
                    ret = $element[v](args[0]);
                } else if (length == 2) {
                    ret = $element[v](args[0], args[1]);
                } else if (length == 3) {
                    ret = $element[v](args[0], args[1], args[2]);
                } else if (length == 4) {
                    ret = $element[v](args[0], args[1], args[2], args[3]);
                }
                // 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)
                if (ret.jquery) {
                    //Ox.print("ret", ret, "ret.data('id')", ret.data("ox"))
                }
                return ret.jquery && oxui.elements[id = ret.data("ox")] ?
                    oxui.elements[id] : ret;
            }
        });
        return that;
    };

    /*
    ----------------------------------------------------------------------------
    Ox.Window
    ----------------------------------------------------------------------------
    */

    Ox.Window = function(options, self) {

        self = self || {},
            that = new Ox.Element("div", self)
                .defaults({
                    draggable: true,
                    fullscreenable: true, // fixme: silly name
                    height: 225,
                    resizeable: true,
                    scaleable: true,
                    width: 400
                })
                .options(options || {})

        self.center = function() {
            
        };

        self.drag = function() {
            
        };

        self.fullscreen = function() {
            
        };

        self.onChange = function() {
            
        };

        self.reset = function() {
            
        };

        self.resize = function() {
            
        };

        self.scale = function() {
            
        };

        that.close = function() {
            
        };

        that.open = function() {
            
        };

        return that;

    };

    /*
    ----------------------------------------------------------------------------
    Ox.theme()
        get theme
    Ox.theme("foo")
        set theme to "foo"
    ----------------------------------------------------------------------------
    */

    Ox.theme = function() {
        var length = arguments.length,
            classes = $body.attr("class").split(" "),
            arg, theme;
        $.each(classes, function(i, v) {
            if (Ox.startsWith(v, "OxTheme")) {
                theme = v.replace("OxTheme", "").toLowerCase();
                if (length == 1) {
                    $body.removeClass(v);
                }
                return false;
            }
        });
        if (length == 1) {
            arg = arguments[0]
            $body.addClass("OxTheme" + Ox.toTitleCase(arg));
            if (theme) {
                $("input[type=image]").each(function() {
                    var $this = $(this);
                    $this.attr({
                        src: $this.attr("src").replace(
                            "/ox.ui." + theme + "/", "/ox.ui." + arg + "/"
                        )
                    });
                });
                $(".OxLoadingIcon").each(function() {
                    var $this = $(this);
                    $this.attr({
                        src: $this.attr("src").replace(
                            "/ox.ui." + theme + "/", "/ox.ui." + arg + "/"
                        )
                    });
                })
            }
        }
        return theme;
    };

    /*
    ============================================================================
    Bars
    ============================================================================
    */

    Ox.Bar = function(options, self) {
        var self = self || {},
            that = new Ox.Element({}, self)
                .defaults({
                    orientation: "horizontal",
                    size: "medium"                  // can be int
                })
                .options(options || {})
                .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");
        return that;
    };

    /*
    ----------------------------------------------------------------------------
    Ox.Resizebar
    ----------------------------------------------------------------------------
    */

    Ox.Resizebar = function(options, self) {

        var self = self || {},
            that = new Ox.Element({}, self)
                .defaults({
                    collapsed: false,
                    collapsible: true,
                    edge: "left",
                    elements: [],
                    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))
                /*
                .attr({
                    draggable: "true"
                })
                .bind("dragstart", function(e) {
                    // e.originalEvent.dataTransfer.setDragImage($("<div>")[0], 0, 0);
                })
                .bind("drag", function(e) {
                    Ox.print("dragging", e)
                })
                */
                .mousedown(dragStart)
                .dblclick(toggle)
                .append($("<div>").addClass("OxSpace"))
                .append($("<div>").addClass("OxLine"))
                .append($("<div>").addClass("OxSpace"));

        $.extend(self, {
            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");
            }),
            length: self.options.resize.length,
            startPos: 0,
            startSize: 0
        });

        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)
            $.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("resize_" + self.ids[0], self.options.size);
            Ox.Event.trigger("resize_" + self.ids[1], 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)
            $window.mousemove(drag);
            $window.one("mouseup", dragStop);
        }

        function dragStop() {
            $window.unbind("mousemove");
        }

        function 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);
            }
            var size = self.options.position -
                        (self.options.collapsed ? 0 : self.options.size),
                animate = {};
            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]]());
                self.options.collapsed = !self.options.collapsed;
            });
        }

        return that;

    };

    /*
    ----------------------------------------------------------------------------
    Ox.Tabbar
    ----------------------------------------------------------------------------
    */

    Ox.Tabbar = function(options, self) {

        var self = self || {},
            that = new Ox.Bar({
                    size: 20
                }, self)
                .defaults({
                    selected: 0,
                    tabs: []
                })
                .options(options || {})
                .addClass("OxTabbar");

        Ox.ButtonGroup({
            buttons: self.options.tabs,
            group: true,
            selectable: true,
            selected: self.options.selected,
            size: "medium",
            style: "tab",
        }).appendTo(that);

        return that;

    };

    // fixme: no need for this
    Ox.Toolbar = function(options, self) {
        var self = self || {},
            that = new Ox.Bar({
                size: oxui.getBarSize(options.size)
            }, self);
        return that;
    };

    /*
    ============================================================================
    Ox.Dialog
    ============================================================================
    */

    Ox.Dialog = function(options, self) {

        // fixme: dialog should be derived from a generic draggable
        // fixme: pass button elements directly
        var self = self || {},
            that = new Ox.Element("div", self)
                .defaults({
                    title: "",
                    buttons: [],
                    height: 216,
                    minHeight: 144,
                    minWidth: 256,
                    padding: 16,
                    width: 384
                })
                .options(options || {})
                .addClass("OxDialog");

        if (!Ox.isArray(self.options.buttons[0])) {
            self.options.buttons = [[], self.options.buttons];
        }

        that.$titlebar = new Ox.Bar({
                size: "medium"
            })
            .addClass("OxTitleBar")
            .mousedown(drag)
            .dblclick(center)
            .appendTo(that);
        that.$title = new Ox.Element()
            .addClass("OxTitle")
            .html(self.options.title)
            .appendTo(that.$titlebar);
        // fixme: should the following be a container?
        that.$content = new Ox.Element()
            .addClass("OxContent")
            .css({
                padding: self.options.padding + "px",
                overflow: "auto"
            })
            .appendTo(that);
        that.$buttonsbar = new Ox.Bar({})
            .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",
                    value: button.value // fixme: use title
                })
                .addClass("OxLeft")
                .click(button.click) // fixme: rather use event?
                .appendTo(that.$buttonsbar);
        });
        that.$resize = new Ox.Element()
            .addClass("OxResize")
            .mousedown(resize)
            .dblclick(reset)
            .appendTo(that.$buttonsbar);
        $.each(self.options.buttons[1].reverse(), function(i, button) {
            that.$buttons[that.$buttons.length] = new Ox.Button({
                    disabled: button.disabled || false,
                    id: button.id,
                    size: "medium",
                    value: button.value
                })
                .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")
            .mousedown(mousedownLayer)
            .mouseup(mouseupLayer);

        function center() {
            var documentHeight = $document.height();
            that.css({
                left: 0,
                top: Math.max(parseInt(-documentHeight / 10), self.options.height - documentHeight + 40) + "px",
                right: 0,
                bottom: 0,
                margin: "auto"
            });
        }

        function drag(event) {
            var bodyWidth = $body.width(),
                bodyHeight = $document.height(),
                elementWidth = that.width(),
                offset = that.offset(),
                x = event.clientX,
                y = event.clientY;                
            $window.mousemove(function(event) {
                that.css({
                    margin: 0
                });
                var left = Ox.limit(
                        offset.left - x + event.clientX,
                        24 - elementWidth, bodyWidth - 24
                        //0, documentWidth - elementWidth
                    ),
                    top = Ox.limit(
                        offset.top - y + event.clientY,
                        24, bodyHeight - 24
                        //24, documentHeight - elementHeight
                    );
                that.css({
                    left: left + "px",
                    top: top + "px"
                });
            });
            $window.one("mouseup", function() {
                $window.unbind("mousemove");
            });            
        }

        function getButtonById(id) {
            var ret = null
            $.each(that.$buttons, function(i, button) {
                if (button.options("id") == id) {
                    ret = button;
                    return false;
                }
            });
            return ret;
        }

        function mousedownLayer() {
            that.$layer.stop().animate({
                opacity: 0.5
            }, 0);
        }

        function mouseupLayer() {
            that.$layer.stop().animate({
                opacity: 0
            }, 0);
        }

        function reset() {
            that.css({
                    left: Math.max(that.offset().left, 24 - that.width())
                })
                .width(self.options.width)
                .height(self.options.height);
            that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
        }

        function resize(event) {
            var documentWidth = $document.width(),
                documentHeight = $document.height(),
                elementWidth = that.width(),
                elementHeight = that.height(),
                offset = that.offset(),
                x = event.clientX,
                y = event.clientY;
            $window.mousemove(function(event) {
                that.css({
                    left: offset.left,
                    top: offset.top,
                    margin: 0
                });
                var width = Ox.limit(
                        elementWidth - x + event.clientX,
                        self.options.minWidth, Math.min(documentWidth, documentWidth - offset.left)
                    ),
                    height = Ox.limit(
                        elementHeight - y + event.clientY,
                        self.options.minHeight, documentHeight - offset.top
                    );
                that.width(width);
                that.height(height);
                that.$content.height(height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
            });
            $window.one("mouseup", function() {
                $window.unbind("mousemove");
            });            
        }

        self.onChange = function(key, value) {
            if (key == "height" || key == "width") {
                that.animate({
                    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") {
                that.$title.animate({
                    opacity: 0
                }, 250, function() {
                    that.$title.html(value).animate({
                        opacity: 1
                    }, 250);
                });
            }
        }

        that.append = function($element) {
            that.$content.append($element);
            return that;
        }

        that.close = function(callback) {
            callback = callback || function() {};
            that.animate({
                opacity: 0
            }, 200, function() {
                that.remove();
                that.$layer.remove();
                callback();
            });
            $window.unbind("mouseup", mouseupLayer)
            return that;
        }

        that.disable = function() {
            // to be used on submit of form, like login
            that.$layer.addClass("OxFront");
            return that;
        };

        that.disableButton = function(id) {
            getButtonById(id).options({
                disabled: true
            });
        };

        that.enable = function() {
            that.$layer.removeClass("OxFront");
            return that;
        };

        that.enableButton = function(id) {
            getButtonById(id).options({
                disabled: false
            });
        };

        that.open = function() {
            that.$layer.appendTo($body);
            center();
            reset();
            that.css({
                opacity: 0
            }).appendTo($body).animate({
                opacity: 1
            }, 200);
            $window.bind("mouseup", mouseupLayer)
            return that;
        };

        return that;

    }

    /*
    ============================================================================
    Forms
    ============================================================================
    */

    /*
    ----------------------------------------------------------------------------
    Ox.Filter
    ----------------------------------------------------------------------------
    */

    Ox.Filter = function(options, self) {

        var self = self || {}
            that = new Ox.Element()
                .defaults({
                    
                })
                .options(options || {});

        return that;

    };

    /*
    ----------------------------------------------------------------------------
    Ox.Form
    ----------------------------------------------------------------------------
    */

    Ox.Form = function(options, self) {

        var self = self || {},
            that = new Ox.Element("div", self)
                .defaults({
                    error: "",
                    id: "",
                    items: [],
                    submit: null
                })
                .options(options || {}); // fixme: the || {} can be done once, in the options function

        $.extend(self, {
            $items: [],
            $messages: [],
            formIsValid: false,
            itemIds: [],
            itemIsValid: []
        });

        // fixme: form isn't necessarily empty/invalid
        $.map(self.options.items, function(item, i) {
            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");
            that.append(self.$items[i] = new Ox.FormItem(item))
                .append(self.$messages[i] = new Ox.Element().addClass("OxFormMessage"));
            Ox.Event.bind("validate_" + id, function(event, data) {
                validate(i, data.valid);
            });
            Ox.Event.bind("blur_" + id, function(event, data) {
                validate(i, data.valid);
                if (data.valid) {
                    self.$messages[i].html("").hide();
                } else {
                    self.$messages[i].html(data.message).show();
                }
            });
            Ox.Event.bind("submit_" + id, function(event, data) {
                self.formIsValid && that.submit();
            });
        });

        function getItemPositionById(id) {
            return self.itemIds.indexOf(id);
        }

        function setMessage(id, message) {
            self.$messages[getItemPositionById(id)].html(message)[message !== "" ? "show" : "hide"]();
        }

        function submitCallback(data) {
            $.each(data, function(i, v) {
                setMessage(v.id, v.message);
            });
        }

        function 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", {
                    valid: self.formIsValid
                });
            }
        }

        that.submit = function() {
            self.options.submit(that.values(), submitCallback);
        };

        that.values = function() { // fixme: can this be private?
            var values = {};
            if (arguments.length == 0) {
                $.each(self.$items, function(i, $item) {
                    values[self.itemIds[i]] = self.$items[i].value();
                });
                return values;
            } else {
                $.each(arguments[0], function(key, value) {
                    
                });
                return that;
            }
        };

        return that;

    };

    Ox.FormItem = function(options, self) {

        var self = self || {},
            that = new Ox.Element("div", self)
                .defaults({
                    element: null,
                    error: "",
                })
                .options(options || {})
                .addClass("OxFormItem")
                .append(self.options.element);

        that.value = function() {
            return self.options.element.$input.val();
        };

        return that;

    }

    /*
    ----------------------------------------------------------------------------
    Ox.Button
    ----------------------------------------------------------------------------
    */

    Ox.Button = function(options, self) {
        /*
        events:
        click       non-selectable button was clicked
        deselect    selectable button was deselected
        select      selectable button was selected
        */
        var self = self || {},
            that = new Ox.Element("input", self)
                .defaults({
                    disabled: false,
                    group: null,
                    id: "",
                    selectable: false,
                    selected: false,
                    size: "medium",
                    style: "default", // can be default, symbol or tab
                    type: "text",
                    value: "",
                    values: [] // fixme: shouldn't this go into self.values?
                })
                .options($.extend(options, {
                    value: $.isArray(options.value) ?
                        options.value[0] : options.value,
                    values: $.makeArray(options.value)
                }))
                .attr({
                    disabled: self.options.disabled ? "disabled" : "",
                    type: self.options.type == "text" ? "button" : "image"
                })
                .addClass("OxButton Ox" + Ox.toTitleCase(self.options.size) +
                    (self.options.style != "default" ? " Ox" + Ox.toTitleCase(self.options.style) : "") +
                    (self.options.disabled ? " OxDisabled": "") +
                    (self.options.selected ? " OxSelected": ""))
                .mousedown(mousedown)
                .click(click);
        //Ox.print(self.options.value, self.options.disabled)
        /*
        that.bind("OxElement" + that.id + "SetOptions", function(e, data) {
            if (typeof data.selected != "undefined") {
                if (data.selected != that.hasClass("OxSelected")) {
                    that.toggleClass("OxSelected");
                }
            }
            if (typeof data.value != "undefined") {
                if (self.options.type == "image") {
                    that.attr({
                        src: oxui.path + "png/" + Ox.theme() +
                            "/button" + Ox.toTitleCase(options.value) + ".png"
                    });
                } else {
                    that.val(self.options.value);
                }
            }
        })
        */
        function mousedown(e) {
            if (self.options.type == "image" && $.browser.safari) {
                // keep image from being draggable
                e.preventDefault();
            }
        }
        function click() {
            if (!self.options.selectable) {
                that.triggerEvent("click");
            } else if (!self.options.group || !self.options.selected) {
                if (self.options.group) {
                    that.triggerEvent("select");
                } else {
                    that.toggleSelected();
                }
            }
            if (self.options.values.length == 2) {
                that.options({
                    value: self.options.value == self.options.values[0] ?
                        self.options.values[1] : self.options.values[0]
                }); 
            }
            //self.options.click();
        }
        self.onChange = function(key, value) {
            //Ox.print("setOption", option, value)
            if (key == "disabled") {
                that.attr({
                        disabled: value ? "disabled" : ""
                    })
                    .toggleClass("OxDisabled");
            } else if (key == "selected") {
                if (value != that.hasClass("OxSelected")) { // fixme: neccessary?
                    that.toggleClass("OxSelected");
                }
                that.triggerEvent("change");
            } else if (key == "value") {
                if (self.options.type == "image") {
                    that.attr({
                        src: oxui.path + "png/ox.ui." + Ox.theme() +
                            "/button" + Ox.toTitleCase(value) + ".png"
                    });
                } else {
                    that.val(value);
                }
            }
        }
        that.toggleDisabled = function() {
            that.options({
                enabled: !self.options.disabled
            });
        }
        that.toggleSelected = function() {
            that.options({
                selected: !self.options.selected
            });
        }
        that.options("value", self.options.value);
        return that;
    };

    /*
    ----------------------------------------------------------------------------
    Ox.ButtonGroup
    ----------------------------------------------------------------------------
    */

    Ox.ButtonGroup = function(options, self) {

        /*
        events:
        change  {id, value}     selection within a group changed
        */

        var self = self || {},
            that = new Ox.Element({}, self)
                .defaults({
                    buttons: [],
                    group: false,
                    selectable: false,
                    selected: -1,
                    size: "medium",
                    style: "",
                    type: "text",
                })
                .options(options || {})
                .addClass("OxButtonGroup");
        self.position = {};

        that.$buttons = [];
        $.each(self.options.buttons, function(position, button) {
            that.$buttons[position] = Ox.Button({
                disabled: button.disabled,
                group: self.options.group ? that : null,
                id: button.id,
                selectable: self.options.selectable,
                selected: position == self.options.selected,
                size: self.options.size,
                style: self.options.style,
                type: self.options.type,
                value: button.value
            }).appendTo(that);
            self.position[that.$buttons.id] = position;
            that.bindEvent("select_" + that.$buttons[position].options("id"), function() {
                selectButton(position);
            });
        });

        function onChange(event, data) {
            console.log("event", event, "data", data)
            var id = event.split("_")[1];
            if (self.options.selected > -1) {
                that.$buttons[self.options.selected].toggleSelected();
            }
            self.options.selected = self.position[id];
            that.triggerEvent("change", {
                value: id
            });
        }

        function selectButton(position) {
            that.$buttons[self.options.selected].toggleSelected();
            self.options.selected = position;
            that.$buttons[self.options.selected].toggleSelected();
        };

        return that;
    };

    /*
    ----------------------------------------------------------------------------
    Ox.Input
    ----------------------------------------------------------------------------
    */

    Ox.Input = function(options, self) {

        /*  options:
         *      autocomplete    function, or array of values, or dict with array of values per label or placeholder
         *      autocorrect     function for live correction
         *      clear           boolean, clear button, or not
         *      highlight       boolean, highlight value in autocomplete menu, or not
         *      id
         *      label           string or array [{id, title}] (select) -- label and placeholder are mutually exclusive
         *      labelWidth      integer (px)
         *      placeholder     string or array [{id, title}] (select) -- label and placeholder are mutually exclusive
         *      selected        integer, selected label or placeholder
         *      size            "large", "medium" or "small"
         *      type            "text", "password", "textarea", etc.
         *      validate        function vor live validation, returns { message: "", valid: false }
         *      value           string
         */

        var self = self || {},
            that = new Ox.Element("div", self)
                .defaults({
                    autocomplete: null,
                    autocorrect: null,
                    clear: false,
                    highlight: false,
                    id: "",
                    label: "",
                    labelWidth: 64,
                    placeholder: "",
                    selected: 0,
                    size: "medium",
                    type: "text",
                    validate: null,
                    value: ""
                })
                .options(options || {})
                .addClass("OxInput Ox" + Ox.toTitleCase(self.options.size)),
            autocomplete; // fixme: should be self.autocomplete

        if (self.options.label) {
            self.options.label = Ox.makeArray(self.options.label);
            self.option = self.options.label[self.options.selected]; // fixme: id or title? or not use this at all?
            self.items = self.options.label;
        } else if (self.options.placeholder) {
            self.options.placeholder = Ox.makeArray(self.options.placeholder);
            self.option = self.options.placeholder[self.options.selected];
            self.items = self.options.placeholder;
        }
        if (Ox.isArray(self.options.autocomplete)) {
            autocomplete = self.options.autocomplete;
            self.options.autocomplete = {};
            self.options.autocomplete[self.placeholder] = autocomplete;
        }

        if (self.options.label) {
            that.$label = new Ox.Element()
                .addClass("OxInputLabel")
                .width(self.options.labelWidth)
                .html(self.options.label.length == 1 ? self.options.label[0] : self.options.label[0].title)
                .appendTo(that);
        }
        if (self.options.label.length > 1 || self.options.placeholder.length > 1) {
            that.$label && that.$label.click(select);
            that.$select = new Ox.Button({
                    style: "symbol",
                    type: "image",
                    value: "select"
                    // value: oxui.symbols.select
                })
                .click(select)
                .appendTo(that);
            self.selectId = Ox.toCamelCase(
                self.options.id + "_" + (self.options.label.length > 1 ? "label" : "placeholder")
            );
            self.selectMenu = new Ox.Menu({
                element: that,
                id: self.selectId,
                items: $.map(self.items, function(item, position) {
                    return {
                        checked: position == self.options.selected,
                        id: item.id,
                        group: self.selectId, // fixme: same id, works here, but should be different
                        title: item.title
                    };
                }),
                offset: {
                    left: 4,
                    top: 0
                }
            });
            that.bindEvent("change_" + self.selectId, change);
        }

        that.$input = new Ox.Element(
                self.options.type == "textarea" ? "textarea" : "input", self
            )
            .attr({
                type: self.options.type == "textarea" ? undefined : self.options.type // fixme: make conditional?
            })
            .addClass(
                "OxInput Ox" + Ox.toTitleCase(self.options.size) +
                " OxPlaceholder"
            )
            .focus(focus)
            .blur(blur)
            .change(change)
            .appendTo(that);

        self.options.placeholder && that.$input.val(self.option.title);

        if (self.options.clear) {
            that.$clear = new Ox.Button({
                    style: "symbol",
                    type: "image",
                    value: "clear"
                    //value: oxui.symbols.clear
                })
                .click(clear)
                .appendTo(that);
        }

        if (self.options.autocomplete) {
            that.$input.attr({
                autocomplete: "off"
            });
            self.autocompleteId = self.options.id + "_menu"; // fixme: we do this in other places ... are we doing it the same way? var name?
            self.autocompleteMenu = new Ox.Menu({
                element: that.$input,
                id: self.autocompleteId,
                offset: {
                    left: 4,
                    top: 0
                },
                size: self.options.size
            });
            that.bindEvent("click_" + self.autocompleteId, onClick);
        }

        if (self.options.type != "textarea") {
            that.bindEvent({
                key_enter: submit,
            });
        }

        /*
        if (self.options.validate) {
            self.valid = self.options.validate(self.options.value);
        }
        */

        that.bindEvent({
            key_escape: cancel
        });

        function autocomplete(value) {
            var value = value.toLowerCase(),
                items = [];
            if (value === "") {
                // items = self.options.autocomplete[self.placeholder];
            } else {
                $.each(self.options.autocomplete[self.option], function(i, item) {
                    if (item.toLowerCase().indexOf(value) > -1) {
                        items.push(item);
                    }
                });
            }
            autocompleteCallback(items);
        }

        function autocompleteCall() {
            var value = that.$input.val();
            Ox.print("autocomplete call", self.option, value)
            if (self.options.autocomplete) {
                if (value !== "") {
                    Ox.isFunction(self.options.autocomplete) ? (
                        self.option ?
                        self.options.autocomplete(self.option.id, value, autocompleteCallback) :
                        self.options.autocomplete(value, autocompleteCallback)
                    ) : autocomplete(value);
                } else {
                    autocompleteCallback();
                }
            }
        }

        function autocompleteCallback(items) {
            Ox.print("autocomplete callback", items)
            var items = items || [],
                selected = items.length == 1 ? 0 : -1,
                value = that.$input.val().toLowerCase();
            if (items.length) {
                items = $.map(items, function(title, position) {
                    if (value == Ox.stripTags(title.toLowerCase())) {
                        selected = position;
                    }
                    return {
                        id: title.toLowerCase(), // fixme: need function to do lowercase, underscores etc?
                        title: self.options.highlight ? title.replace(
                            new RegExp("(" + value + ")", "ig"),
                            "<span class=\"OxHighlight\">$1</span>"
                        ) : title
                    };
                });
                self.selectMenu.hideMenu();
                self.autocompleteMenu.options({
                    items: items,
                    selected: selected
                }).showMenu();
            } else {
                self.autocompleteMenu.hideMenu();
            }
        }

        function autocorrect(blur) {
            var blur = blur || false,
                length = self.value.length;
                pos = cursor(),
            self.value = self.options.autocorrect(self.value, blur);
            that.$input.val(self.value);
            if (!blur) {
                cursor(pos + self.value.length - length);
            }
        }

        function blur() {
            that.loseFocus();
            that.removeClass("OxFocus");
            self.options.autocorrect && autocorrect(that.$input.val(), true);
            self.options.validate && that.triggerEvent("blur", { // fixme: is this a good event name for validation on blur?
                message: self.message,
                valid: self.valid
            });
            if (self.options.placeholder && that.$input.val() === "") {
                that.$input.addClass("OxPlaceholder").val(self.option.title);
            }
            if (self.options.autocomplete || self.options.autocorrect || self.options.validate) { // fixme: duplicated, make a var
                $document.unbind("keydown", keypress);
                $document.unbind("keypress", keypress);
            }
        }

        function cancel() {
            that.$input.blur();
        }

        function change(event, data) {
            Ox.print("input change", event, data)
            if (data) {
                self.option = { 
                    id: data.id,
                    title: data.value // fixme: should be data.title
                };
            }
            if (self.options.label) {
                that.$label.html(self.option.title);
                that.$input.focus();
                autocompleteCall();
            } else {
                if (that.$input.is(".OxPlaceholder")) {
                    that.$input.val(self.option.title);
                    //that.$input.focus();
                } else {
                    that.$input.focus();
                    autocompleteCall();
                }
            }
        }

        function clear() {
            that.$input.val("").focus();
            //autocompleteCall();
        }

        function cursor() {
            // fixme: see selection()
            if (arguments.length == 0) {
                return that.$input.$element[0].selectionStart;
            } else {
                that.$input.$element[0].setSelectionRange(arguments[0], arguments[0]);
            }
        }

        function focus() {
            var value;
            that.gainFocus();
            that.addClass("OxFocus");
            if (that.$input.is(".OxPlaceholder")) {
                that.$input.val("").removeClass("OxPlaceholder");
            }
            value = that.$input.val();
            if (self.options.autocomplete || self.options.autocorrect || self.options.validate) {
                // fixme: different in webkit and firefox (?), see keyboard handler, need generic function
                $document.bind("keydown", keypress);
                $document.bind("keypress", keypress);
                if (self.options.autocomplete) {
                    value !== "" && Ox.isFunction(self.options.autocomplete) ?
                            self.options.autocomplete(self.option.id, value, autocompleteCallback) :
                            autocomplete(value);
                }
            }
        }

        function keypress(event) {
            if (event.keyCode != 13) {
                setTimeout(function() {
                    var value = that.$input.val();
                    if (value != self.value) {
                        self.value = value;
                        self.options.autocomplete && autocompleteCall();
                        self.options.autocorrect && autocorrect();
                        self.options.validate && validateCall();
                    }
                }, 25);
            }
        }

        function onClick(event, data) {
            Ox.print("onClick", data);
            that.$input.val(Ox.stripTags(data.title));
            self.autocompleteMenu.hideMenu();
            submit();
        }

        function select() {
            self.selectMenu.showMenu();
        }

        function selection() {
            // fixme: not used!
            var start, end;
            if (arguments.length == 0) {
                return [self.element.selectionStart, self.element.selectionEnd];
            } else {
                start = arguments[0];
                end = arguments[1] || start;
                self.element.setSelectionRange(start, end);
            }
        }

        function submit() {
            Ox.print("input submit", that.$input.val())
            that.$input.trigger("blur");
            that.triggerEvent("submit", self.option ? {
                key: self.option.id,
                value: that.$input.val()
            } : that.$input.val());
        }

        function validate() {
            var value = that.$input.val(),
                valid = self.options.validate(value) != null;
            validateCallback({
                valid: valid,
                message: "Invalid " + self.options.label
            });
        }

        function validateCall() {
            var value = that.$input.val();
            Ox.print("validate call", value)
            if (self.options.validate) {
                if (value !== "") {
                    Ox.isFunction(self.options.validate) ?
                        self.options.validate(value, validateCallback) :
                        validate(value);
                } else {
                    validateCallback({
                        valid: false,
                        message: ""
                    });
                }
            }
        }

        function validateCallback(data) {
            if (data.valid != self.valid) {
                self.message = data.message;
                self.valid = data.valid;
                that.triggerEvent("validate", data);
            }
        }

        that.changeLabel = function(id) {
            that.$label.html(Ox.getObjectById(self.options.label, id).title);
            self.selectMenu.checkItem(id);
        };

        that.height = function(value) {
            var stop = 8 / value;
            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))"
                    })
                    .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)))"
                    });
                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))"
                    })
                    .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)))"
                    });
            }
            return that;
        }

        that.width = function(value) {
            that.$element.width(value);
            that.$input.width(value - (self.options.type == "textarea" ? 0 : 2) -
                    (self.options.label ? self.options.labelWidth + 25 : 0) -
                    (self.options.placeholder.length > 1 ? 16 : 0) -
                    (self.options.clear ? 25 : 0));
            // fixme: the values above are all weird guesswork
            return that;
        }

        return that;

    };

    /*
    ----------------------------------------------------------------------------
    Ox.Label
    ----------------------------------------------------------------------------
    */

    Ox.Label = function(options, self) {
        var self = self || {},
            that = new Ox.Element({}, self)
                .defaults({
                    id: "",
                    title: ""
                })
                .options(options)
                .addClass("OxLabel");
        that.html(self.options.title);
        return that;
    };

    /*
    ----------------------------------------------------------------------------
    Ox.Range

    options:
        animate      boolean         if true, animate thumb
        arrows       boolean         if true, show arrows
        arrowStep    number          step when clicking arrows
        arrowSymbols array           arrow symbols, like ["minus", "plus"]
        max          number          maximum value
        min          number          minimum value
        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
        thumbValue   boolean         if true, display value on thumb
        trackImages  string or array one or multiple track background image URLs          
        trackStep    number          0 (scroll here) or step when clicking track
        value        number          initial value
    ----------------------------------------------------------------------------
    */

    Ox.Range = function(options, self) {

        /*
            init
        */
        var self = self || {},
            that = new Ox.Element({}, self)
                .defaults({
                    animate: false,
                    arrows: false,
                    arrowStep: 1,
                    arrowSymbols: ["previous", "next"],
                    max: 100,
                    min: 0,
                    orientation: "horizontal",
                    step: 1,
                    size: 128,
                    thumbSize: 16,
                    thumbValue: false,
                    trackImages: [],
                    trackStep: 0,
                    value: 0
                })
                .options($.extend(options, {
                    arrowStep: options.arrowStep ?
                        options.arrowStep : options.step,
                    trackImages: $.makeArray(options.trackImages || [])
                }))
                .addClass("OxRange");

        // fixme: self. ... ?
        var trackImages = self.options.trackImages.length,
            values = (self.options.max - self.options.min + self.options.step) /
                    self.options.step;

        /*
            construct
        */
        that.$element
            .css({
                width: self.options.size + "px"
            });
        if (self.options.arrows) {
            var $arrowDec = Ox.Button({
                    style: "symbol",
                    type: "image",
                    value: self.options.arrowSymbols[0]
                })
                .addClass("OxArrow")
                .mousedown(mousedownArrow)
                .click(clickArrowDec)
                .appendTo(that.$element);
        }
        var $track = new Ox.Element()
                .addClass("OxTrack")
                .mousedown(clickTrack)
                .appendTo(that.$element); // fixme: make that work

        if (trackImages) {
            var width = parseFloat(screen.width / trackImages),
                $image = $("<canvas/>")
                    .attr({
                        width: width * trackImages,
                        height: 14
                    })
                    .addClass("OxImage")
                    .appendTo($track.$element), // fixme: make that work
                c = $image[0].getContext('2d');
                c.mozImageSmoothingEnabled = false; // we may want to remove this later
            $.each(self.options.trackImages, function(i, v) {
                $("<img/>")
                    .attr({
                        src: v
                    })
                    .load(function() {
                        c.drawImage(this, i * width, 0, width, 14);
                    });
            });
        }
        var $thumb = Ox.Button({})
            .addClass("OxThumb")
            .appendTo($track);
        if (self.options.arrows) {
            var $arrowInc = Ox.Button({
                    style: "symbol",
                    type: "image",
                    value: self.options.arrowSymbols[1]
                })
                .addClass("OxArrow")
                .mousedown(mousedownArrow)
                .click(clickArrowInc)
                .appendTo(that.$element);
        }
        var rangeWidth, trackWidth, imageWidth, thumbWidth;
        setWidth(self.options.size);

        /*
            private functions
        */

        function clickArrowDec() {
            that.removeClass("OxActive");
            setValue(self.options.value - self.options.arrowStep, 200)
        }
        function clickArrowInc() {
            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") ?
                    e.clientX - $thumb.offset().left - thumbWidth / 2 - 2 : 0;
            function val(e) {
                return getVal(e.clientX - left - offset);
            }
            setValue(val(e), 200);
            $window.mousemove(function(e) {
                setValue(val(e));
            });
            $window.one("mouseup", function() {
                $window.unbind("mousemove");
            });
        }
        function getPx(val) {
            var pxPerVal = (trackWidth - thumbWidth - 2) /
                (self.options.max - self.options.min);
            return Math.ceil((val - self.options.min) * pxPerVal + 1);
        }
        function getVal(px) {
            var px = trackWidth / values >= 16 ? px : px - 8,
                valPerPx = (self.options.max - self.options.min) /
                        (trackWidth - thumbWidth);    
            return Ox.limit(self.options.min +
                Math.floor(px * valPerPx / self.options.step) * self.options.step,
                self.options.min, self.options.max);
        }
        function mousedownArrow() {
            that.addClass("OxActive");
        }
        function setThumb(animate) {
            var animate = typeof animate != "undefined" ? animate : 0;
            $thumb.animate({
                marginLeft: (getPx(self.options.value) - 2) + "px",
                width: thumbWidth + "px"
            }, self.options.animate ? animate : 0, function() {
                if (self.options.thumbValue) {
                    $thumb.options({
                        value: self.options.value
                    });
                }
            });
        }
        function setValue(val, animate) {
            val = Ox.limit(val, self.options.min, self.options.max);
            if (val != self.options.value) {
                that.options({
                    value: val
                });
                setThumb(animate);
                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"
            });
            $track.css({
                width: (trackWidth - 2) + "px"
            });
            if (trackImages) {
                $image.css({
                    width: (trackWidth - 2) + "px"
                });
            }
            $thumb.css({
                width: (thumbWidth - 2) + "px",
                padding: 0
            });
            setThumb();
        }

        /*
            shared functions
        */

        self.onChange = function(option, value) {
            
        }

        return that;

    };

    /*
    ----------------------------------------------------------------------------
    Ox.Select
    ----------------------------------------------------------------------------
    */

    Ox.Select = function(options, self) {

        var self = self || {},
            that = new Ox.Element("div", self) // fixme: do we use "div", or {}, or "", by default?
                .defaults({
                    id: "",
                    items: [],
                    size: "medium"
                })
                .options(options)
                .addClass("OxSelect Ox" + Ox.toTitleCase(self.options.size));
        self.buttonId = self.options.id + "_button";
        self.groupId = self.options.id; // + "_group"
        self.menuId = self.options.id + "_menu",

        $.each(self.options.items, function(i, item) {
            self.options.items[i] = $.extend(self.options.items[i], {
                checked: item.checked || false,
                group: self.groupId
            });
            if (item.checked) {
                self.selected = i;
            }
        });

        Ox.print(self.options.id)
        that.$button = new Ox.Button($.extend(self.options, {
                id: self.buttonId,
                type: "text", // fixme: this shouldn't be necessary
                value: self.options.items[self.selected].title // fixme: title instead of value?
            }), {})
            .click(clickButton)
            .appendTo(that);

        that.$symbol = new Ox.Button({
                style: "symbol",
                type: "image",
                value: "select"
            })
            .click(clickButton)
            .appendTo(that);

        that.$menu = new Ox.Menu({
            element: that.$button,
            id: self.menuId,
            items: self.options.items,
            offset: {
                left: 8,
                top: 0
            },
            side: "bottom",
            size: self.options.size
        });
        
        that.bindEvent("change_" + self.groupId, clickMenu);

        function clickButton() {
            that.$menu.toggleMenu();
        }

        function clickMenu(event, data) {
            that.$button.options({
                value: data.value
            });
            that.triggerEvent("change", data.value);
        }

        self.onChange = function(key, value) {
            
        };

        that.selectItem = function(id) {
            that.$button.options({
                value: Ox.getObjectById(self.options.items, id).title
            });
            that.$menu.checkItem(id);
        };

        that.width = function(val) {
            // fixme: silly hack, and won't work for css()
            that.$element.width(val + 16);
            that.$button.width(val);
            //that.$symbol.width(val);
            return that;
        };

        return that;

    }

    /*
    ============================================================================
    Lists
    ============================================================================
    */

    Ox.IconList = function(options, self) {

        var self = self || {},
            that = new Ox.Element({}, self)
                .defaults({
                    id: "",
                    item: function() {},
                    keys: [],
                    orientation: "both",
                    request: function() {},
                    size: 128,
                    sort: [],
                })
                .options(options || {});

        $.extend(self, {
            itemHeight: self.options.size * 1.5,
            itemWidth: self.options.size
        });

        that.$element = new Ox.List({
                construct: constructItem,
                itemHeight: self.itemHeight,
                itemWidth: self.itemWidth,
                keys: $,
                orientation: "both",
                request: function() {},
                rowLength: 1,
                size: 128,
                type: "icon",            
            }, self)
            .click(click)
            .dblclick(dblclick)
            .scroll(scroll);

        function click() {
            
        }

        function constructItem(data) {
            var data = self.options.item(data, self.options.sort);
            return new Ox.IconItem($.extend(data, {
                size: self.options.size
            }));
        }

        function dblclick() {
            
        }

        function scroll() {
            
        }

        return that;

    };

    Ox.IconItem = function(options, self) {

        var self = self || {}
            that = new Ox.Element({}, self)
                .defaults({
                    height: 0,
                    id: "",
                    info: "",
                    size: 128,
                    title: "",
                    width: 0,
                    url: ""
                })
                .options(options || {});

        $.extend(self, {
            height: self.options.size * 1.5,
            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"
        });
        that.$icon = $("<div>")
            .addClass("OxIcon")
            .css({
                top: self.options.size == 64 ? -70 : -128,
                width: self.options.size + "px",
                height: self.options.size + "px"
            });
        that.$iconImage = $("<img>")
            .attr({
                src: self.url
            })
            .css({
                width: iconWidth + "px",
                height: iconHeight + "px"
            })
            .mouseenter(mouseenter)
            .mouseleave(mouseleave)
            .one("load", function() {
                that.$iconImage.attr({
                    src: self.options.url
                });
            });
        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"
            })
        that.$text = $("<div>")
            .html(self.options.title + "<br/><span class=\"OxInfo\">" + self.options.info + "</span>")
            .mouseenter(mouseenter)
            .mouseleave(mouseleave)
        that.$reflection = $("<div>")
            .addClass("OxReflection")
            .css({
                top: (self.options.size + 2) + "px",
                width: self.options.size + "px",
                height: (self.options.size / 2) + "px"
            });
        that.$reflectionImage = $("<img>")
            .addClass("OxReflection")
            .attr({
                src: self.url
            })
            .css({
                width: self.options.width + "px",
                height: self.options.height + "px"
            })
            .one("load", function() {
                that.$reflectionImage.attr({
                    src: self.options.url
                });
            });
        that.$gradient = $("<div>")
            .addClass("OxGradient")
            .css({
                top: (-self.options.size - 2) + "px"
            });

        that.append(
            that.$reflection.append(
                that.$reflectionImage
            ).append(
                that.$gradientImage
            )
        ).append(
            that.$textBox.append(
                that.$text
            )
        ).append(
            that.$icon.append(
                that.$iconImage
            )
        );

        function mouseenter() {
            that.addClass("OxHover");
        }

        function mouseleave() {
            that.removeClass("OxHover");
        }

        return that;

    };

    Ox.List = function(options, self) {

        var self = self || {},
            that = new Ox.Container({}, self)
                .defaults({
                    construct: function() {},
                    itemHeight: 16,
                    itemWidth: 16,
                    keys: [],
                    orientation: "vertical",
                    request: function() {}, // {sort:, range:, callback:}, without parameter returns {items, size etc.}
                    rowLength: 1,
                    sort: [],
                    type: "text",
                    unique: ""
                })
                .options(options || {})
                .click(click)
                .scroll(scroll);

        $.extend(self, {
            $items: [],
            $pages: [],
            ids: {},
            keyboardEvents: {
                key_alt_control_a: invertSelection,
                key_control_a: selectAll,
                key_control_shift_a: selectNone,
                key_end: scrollToFirst,
                key_enter: open,
                key_home: scrollToLast,
                key_pagedown: scrollPageDown,
                key_pageup: scrollPageUp,
                key_space: preview
            },
            page: 0,
            pageLength: 100,
            preview: false,
            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;

        updateQuery();
        Ox.print("s.o", self.options)
        that.bindEvent(self.keyboardEvents);

        function addAllToSelection(pos) {
            var arr,
                len = self.$items.length;
            if (!isSelected(pos)) {
                if (self.selected.length == 0) {
                    addToSelection(pos);
                } else {
                    if (Ox.min(self.selected) < pos) {
                         var arr = [pos];
                         for (var i = pos - 1; i >= 0; i--) {
                             if (isSelected(i)) {
                                 $.each(arr, function(i, v) {
                                     addToSelection(v);
                                 });
                                 break;
                             }
                             arr.push(i);
                         }
                    }
                    if (Ox.max(self.selected) > pos) {
                        var arr = [pos];
                        for (var i = pos + 1; i < len; i++) {
                            if (isSelected(i)) {
                                $.each(arr, function(i, v) {
                                    addToSelection(v);
                                });
                                break;
                            }
                            arr.push(i);
                        }
                    }
                }
            }
        }

        function addNextToSelection() {
            var pos = getNext();
            if (pos > -1) {
                addToSelection(pos);
                scrollTo(pos);
            }
        }

        function addPreviousToSelection() {
            var pos = getPrevious();
            if (pos > -1) {
                addToSelection(pos);
                scrollTo(pos);
            }
        }

        function addToSelection(pos) {
            if (!isSelected(pos)) {
                self.selected.push(pos);
                if (!Ox.isUndefined(self.$items[pos])) {
                    self.$items[pos].addClass("OxSelected");
                }
                Ox.print("addToSelection")
                triggerSelectEvent();
            }
        }

        function clear() {
            $.each(self.requests, function(i, v) {
                Ox.print("Ox.Request.cancel", v);
                Ox.Request.cancel(v);
            });
            $.extend(self, {
                $items: [],
                $pages: [],
                page: 0,
                requests: []
            });
        }

        function click(e) {
            var $element = $(e.target), pos;
            that.gainFocus();
            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 (e.shiftKey) {
                    addAllToSelection(pos);
                } else if (e.metaKey) {
                    toggleSelection(pos);
                } else {
                    select(pos);
                }
            } else {
                selectNone();
            }
        }

        function deselect(pos) {
            if (isSelected(pos)) {
                self.selected.splice(self.selected.indexOf(pos), 1);
                if (!Ox.isUndefined(self.$items[pos])) {
                    self.$items[pos].removeClass("OxSelected");
                }
                triggerSelectEvent();
            }
        }

        function getHeight() {
            return that.height() - (that.$content.width() > that.width() ? oxui.scrollbarSize : 0);
        }

        function getNext() {
            var pos = -1;
            if (self.selected.length) {
                pos = Ox.max(self.selected) + 1;
                if (pos == self.$items.length) {
                    pos = -1;
                }
            }
            return pos;
        }

        function getPage() {
            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) {
                return self.ids[v];
            }));
            // fixme: optimize: send non-selected ids if more than half of the items are selected
            if (self.selected.length /*&& self.selected.length < self.listLength*/) {
                self.requests.push(self.options.request({
                    callback: getPositionsCallback,
                    ids: $.map(self.selected, function(v, i) {
                        return self.ids[v];
                    }),
                    sort: self.options.sort
                }));
            } else {
                getPositionsCallback();
            }
        }

        function 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)
                    self.selected.push(pos);
                });
            }
            load();
        }

        function getPrevious() {
            var pos = -1;
            if (self.selected.length) {
                pos = Ox.min(self.selected) - 1;
            }
            return pos;
        }

        function getSelectedIds() {
            // fixme: is carring self.ids around the best way?
            return $.map(self.selected, function(v, i) {
                return self.ids[v];
            });
        }

        function getWidth() {
            return that.width() - (that.$content.height() > that.height() ? oxui.scrollbarSize : 0);
        }

        function invertSelection() {
            $.each(Ox.range(self.listLength), function(i, v) {
                toggleSelection(v);
            });
        }

        function isSelected(pos) {
            return self.selected.indexOf(pos) > -1;
        }

        function load() {
            that.scrollTop(0);
            that.$content.empty();
            loadPages(self.page);
        }

        function loadPage(page, callback) {
            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"]),
                offset = page * self.pageLength,
                range = [offset, offset + (page < self.pages - 1 ?
                        self.pageLength : self.listLength % self.pageLength)];
            if (Ox.isUndefined(self.$pages[page])) {
                self.requests.push(self.options.request({
                    callback: function(result) {
                        self.$pages[page] = new Ox.ListPage();
                        if (self.options.type == "text") {
                            self.$pages[page].css({
                                top: (page * self.pageHeight) + "px"
                            });
                        } else {
                            self.$pages[page].css({

                            });
                        }
                        $.each(result.data.items, function(i, v) {
                            var pos = offset + i;
                            self.$items[pos] = new Ox.ListItem({
                                construct: self.options.construct,
                                data: v,
                                id: v[self.options.unique],
                                position: pos
                            });
                            self.ids[pos] = v[self.options.unique];
                            if (isSelected(pos)) {
                                self.$items[pos].addClass("OxSelected");
                            }
                            self.$items[pos].appendTo(self.$pages[page]);
                        });
                        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"
                                });
                                $.each(Ox.range(result.data.items.length, visibleItems), function(i, v) {
                                    new Ox.ListItem({
                                        construct: self.options.construct,
                                        data: {},
                                        id: "",
                                        position: v
                                    }).appendTo(self.$pages[page]);
                                });
                            }
                        }
                        self.$pages[page].appendTo(that.$content);
                        !Ox.isUndefined(callback) && callback();
                    },
                    keys: keys,
                    range: range,
                    sort: self.options.sort
                }));
            } else {
                self.$pages[page].appendTo(that.$content);
            }
        }

        function loadPages(page, callback) {
            var counter = 0,
                fn = function() {
                    counter++;
                    counter == 2 && !Ox.isUndefined(callback) && callback();
                };
            loadPage(page, function() {
                loadPage(page - 1, fn);
                loadPage(page + 1, fn);
            });
        }

        function open() {
            that.triggerEvent("open", {
                ids: getSelectedIds()
            });
        }

        function preview() {
            self.preview = !self.preview;
            if (self.preview) {
                that.triggerEvent("openpreview", {
                    ids: getSelectedIds()
                });
            } else {
                that.triggerEvent("closepreview");
            }
        }

        function scroll() {
            var page = self.page;
            self.page = getPage();
            setTimeout(function() {
                if (self.page == getPage()) {
                    if (self.page == page - 1) {
                        unloadPage(self.page + 2);
                        loadPage(self.page - 1);
                    } else if (self.page == page + 1) {
                        unloadPage(self.page - 2);
                        loadPage(self.page + 1);
                    } else if (self.page == page - 2) {
                        unloadPage(self.page + 3);
                        unloadPage(self.page + 2);
                        loadPage(self.page);
                        loadPage(self.page - 1);
                    } else if (self.page == page + 2) {
                        unloadPage(self.page - 3);
                        unloadPage(self.page - 2);
                        loadPage(self.page);
                        loadPage(self.page + 1);                    
                    } else if (self.page != page) {
                        unloadPages(page);
                        loadPages(self.page);
                    }
                }
            }, 100);
        }

        function scrollPageDown() {
            that.scrollBy(getHeight());
        }

        function scrollPageUp() {
            that.scrollBy(-getHeight());
        }

        function scrollTo(pos) {
            var positions = [], scroll, size; 
            if (self.options.orientation == "horizontal") {

            } 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"
                    }, 0);
                } else if (positions[1] > scroll + size) {
                    that.animate({
                        scrollTop: (positions[1] - size) + "px"
                    }, 0);
                }
            } else {
                
            }
        }

        function scrollToFirst() {
            that.scrollTop(0);
        }

        function scrollToLast() {
            that.scrollTop(self.listHeight);
        }

        function select(pos) {
            if (!isSelected(pos) || self.selected.length > 1) {
                selectNone();
                addToSelection(pos);
            }
        }

        function selectAll() {
            $.each(Ox.range(self.listLength), function(i, v) {
                Ox.print("adding", v);
                addToSelection(v);
            });
        }

        function selectNext() {
            var pos = getNext();
            if (pos > -1) {
                select(pos);
                scrollTo(pos);
            }
        }

        function selectNone() {
            $.each(self.$items, function(i, v) {
                deselect(i);
            });
        }

        function selectPrevious() {
            var pos = getPrevious();
            if (pos > -1) {
                select(pos);
                scrollTo(pos);
            }
        }

        function selectQuery(str) {
            $.each(self.$items, function(i, v) {
                if (Ox.toLatin(v.title).toUpperCase().indexOf(str) == 0) {
                    select(i);
                    scrollTo(i);
                    return false;
                }
            });
        }

        function toggleSelection(pos) {
            if (!isSelected(pos)) {
                addToSelection(pos);
            } else {
                deselect(pos);
            }
        }

        function triggerSelectEvent() {
            var ids = getSelectedIds();
            setTimeout(function() {
                var ids_ = getSelectedIds();
                if (ids.length == ids_.length && (ids.length == 0 || ids[0] == ids_[0])) {
                    that.triggerEvent("select", {
                        ids: ids
                    });
                    self.preview && that.triggerEvent("openpreview", {
                        ids: ids
                    });
                } else {
                    Ox.print("select event not triggered after timeout");
                }
            }, 100);
        }

        function unloadPage(page) {
            if (page < 0 || page >= self.pages) {
                return;
            }
            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();
        }

        function unloadPages(page) {
            unloadPage(page);
            unloadPage(page - 1);
            unloadPage(page + 1)
        }

        function updateQuery() {
            clear();
            self.requests.push(self.options.request({
                callback: function(result) {
                    var keys = {};
                    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" ?
                                self.pageLength * self.options.itemWidth : 0,
                        pageHeight: self.options.orientation == "horizontal" ? 0 :
                                self.pageLength * self.options.itemHeight / self.options.rowLength
                    });
                    that.$content.css({
                        height: self.listHeight + "px"
                    });
                    getPositions();
                }
            }));
        }

        function updateSort() {
            if (self.listLength > 1) {
                clear();
                getPositions();
            }
        }

        self.onChange = function(key, value) {
            Ox.print("list onChange", key, value);
            if (key == "request") {
                updateQuery();
            }
        };

        that.clearCache = function() { // fixme: unused? make private?
            self.$pages = [];
        };

        that.sort = function(key, operator) {
            if (key != self.options.sort[0].key || operator != self.options.sort[0].operator) {
                self.options.sort[0] = {
                    key: key,
                    operator: operator
                }
                that.triggerEvent("sort", self.options.sort[0]);
                updateSort();
            }
        }

        return that;

    };

    Ox.ListItem = function(options, self) {

        var self = self || {},
            that = new Ox.Element({}, self)
                .defaults({
                    construct: function() {},
                    data: {},
                    id: "",
                    position: 0
                })
                .options(options || {});

        $.each(self.options.data, function(k, v) {
            self.options.data[k] = $.isArray(v) ? v.join(", ") : v;
        });

        that.$element = self.options.construct(self.options.data)
            .addClass("OxItem")
            .attr({
                id: self.options.id
            })
            .data("position", self.options.position);

        return that;

    };

    Ox.ListPage = function(options, self) {
        var self = self || {},
            that = new Ox.Element({}, self)
                .addClass("OxPage");
        return that;
    };

    Ox.TextList = function(options, self) {

        var self = self || {},
            that = new Ox.Element({}, self)
                .defaults({
                    columns: [],
                    columnWidth: [40, 800],
                    id: "",
                    request: function() {}, // {sort, range, keys, callback}
                    sort: []
                })
                .options(options || {})
                .addClass("OxTextList");

        $.each(self.options.columns, function(i, v) { // fixme: can this go into a generic ox.js function?
            if (Ox.isUndefined(v.unique)) {
                v.unique = false;
            }
            if (Ox.isUndefined(v.visible)) {
                v.visible = false;
            }
            if (v.unique) {
                self.unique = v.id;
            }
        });

        $.extend(self, {
            columnPositions: [],
            columnWidths: [],
            itemHeight: 16,
            page: 0,
            pageLength: 100,
            scrollLeft: 0,
            selectedColumn: getColumnIndexById(self.options.sort[0].key),
            visibleColumns: $.map(self.options.columns, function(v, i) {
                return v.visible ? v : null;
            })
        });
        $.extend(self, {
            pageHeight: self.pageLength * self.itemHeight
        });

        // Head

        that.$bar = new Ox.Bar({
            orientation: "horizontal",
            size: 16
        }).appendTo(that);
        that.$head = new Ox.Container()
            .addClass("OxHead")
            .appendTo(that.$bar);
        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))
                .css({
                    width: (v.width - 9) + "px",
                    textAlign: v.align
                })
                .html(v.title)
                .mousedown(function(e) {
                    timeout = setTimeout(function() {
                        dragColumn(v.id, e);
                        timeout = 0;
                    }, 250);
                })
                .mouseup(function() {
                    if (timeout) {
                        clearTimeout(timeout);
                        timeout = 0;
                        clickColumn(v.id);
                    }
                })
                .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"
                )])
                .click(function() {
                    $(this).prev().trigger("click")
                })
                .appendTo(that.$head.$content.$element);
            $resize = $("<div>")
                .addClass("OxResize")
                .mousedown(function(e) {
                    var startWidth = self.columnWidths[i],
                        startX = e.clientX;
                    $window.mousemove(function(e) {
                        var x = e.clientX,
                            width = Ox.limit(
                                startWidth - startX + x,
                                self.options.columnWidth[0],
                                self.options.columnWidth[1]
                            );
                            resizeColumn(v.id, width);
                    });
                    $window.mouseup(function() {
                        $window.unbind("mousemove");
                        $window.unbind("mouseup");
                    });
                })
                .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);
        });
        that.$head.$content.css({
            width: (Ox.sum(self.columnWidths) + 2) + "px"
        });
        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"
            });
        }
        that.$select = new Ox.Button({
            style: "symbol",
            type: "image",
            value: "select"
        }).appendTo(that.$bar.$element);

        // Body

        that.$body = new Ox.List({
                construct: constructItem,
                id: self.options.id,
                itemHeight: 16,
                itemWidth: getItemWidth(),
                keys: $.map(self.visibleColumns, function(v, i) {
                    return v.id;
                }),
                orientation: "vertical",
                request: self.options.request,
                sort: self.options.sort,
                type: "text",
                unique: self.unique
            })
            .addClass("OxBody")
            .scroll(function() {
                var scrollLeft = $(this).scrollLeft();
                if (scrollLeft != self.scrollLeft) {
                    self.scrollLeft = scrollLeft;
                    that.$head.scrollLeft(scrollLeft);
                }
            })
            .appendTo(that);
        that.$body.$content.css({
            width: getItemWidth() + "px"
        });

        Ox.print("s.vC", self.visibleColumns)

        function addColumn(id) {
            
        }

        function 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.columns[i].operator
            );
        }

        function constructItem(data) {
            var $item = $("<div>")
                    .css({
                        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))
                        .css({
                            width: (self.columnWidths[i] - 9) + "px",
                            textAlign: v.align
                        })
                        .html(!$.isEmptyObject(data) ? data[v.id] : "")
                        .appendTo($item);
            });
            return $item;
        }

        function dragColumn(id, e) {
            var startX = e.clientX,
                startPos = getColumnPositionById(id),
                pos = startPos,
                stopPos = startPos,
                positions = $.map(self.visibleColumns, function(v, i) {
                    return self.columnPositions[i] - self.columnPositions[startPos]
                });
            $(".OxColumn" + Ox.toTitleCase(id)).css({
                opacity: 0.1
            });
            that.$titles[startPos].addClass("OxDrag").css({ // fixme: why does the class not work?
                cursor: "move"
            });
            Ox.print("positions", positions)
            $window.mousemove(function(e) {
                var d = e.clientX - startX;
                $.each(positions, function(i, v) {
                    if (d < 0 && d < v) {
                        stopPos = i;
                        return false;
                    } else if (d > 0 && d > v) {
                        stopPos = i;
                    }
                });
                if (stopPos != pos) {
                    pos = stopPos;
                    moveColumn(id, pos);
                }
            });
            $window.mouseup(function() {
                dropColumn(id, pos);
                $window.unbind("mousemove");
                $window.unbind("mouseup");
            });
        }

        function dropColumn(id, pos) {
            Ox.print("dropColumn", id, pos)
            var startPos = getColumnPositionById(id),
                stopPos = pos,
                $title = that.$titles.splice(startPos, 1)[0],
                column = self.visibleColumns.splice(startPos, 1)[0],
                width = self.columnWidths.splice(startPos, 1)[0];
            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({
                opacity: 1
            });
            that.$titles[stopPos].removeClass("OxDrag").css({
                cursor: "pointer"
            });
        }

        function getColumnIndexById(id) {
            var pos = -1;
            $.each(self.options.columns, function(i, v) {
                if (v.id == id) {
                    pos = i;
                    return false;
                }
            });
            return pos;
        }

        function getColumnPositionById(id) {
            var pos = -1;
            $.each(self.visibleColumns, function(i, v) {
                if (v.id == id) {
                    pos = i;
                    return false;
                }
            });
            return pos;
        }

        function getItemWidth() {
            return Ox.sum(self.columnWidths)
            return Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize);
        }

        function 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),
                $order = $column.next(),
                $resize = $order.next();
            $column.detach().insertBefore($(".OxTitle" + stopClassName));
            $order.detach().insertAfter($column);
            $resize.detach().insertAfter($order);
            $.each(that.$body.find(".OxItem"), function(i, v) {
                var $v = $(v);
                $v.children(startClassName).detach().insertBefore($v.children(stopClassName));
            });
        }

        function removeColumn(id) {
            
        }

        function resize() {
            
        }

        function resizeColumn(id, width) {
            var i = getColumnIndexById(id),
                pos = getColumnPositionById(id);
            self.columnWidths[pos] = width;
            that.$head.$content.css({
                width: (Ox.sum(self.columnWidths) + 2) + "px"
            });
            that.$titles[pos].css({
                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.css({
                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"
            });
            that.$body.clearCache();
        }

        function toggleSelected(id) {
            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");
                that.$titles[pos].css({
                    width: (
                        that.$titles[pos].width() + (that.$titles[pos].hasClass("OxSelected") ? -16 : 16)
                    ) + "px"
                });
            }
        }

        function updateOrder(id) {
            var pos = getColumnPositionById(id);
            Ox.print(id, pos)
            that.$titles[pos].next().html(oxui.symbols[
                "triangle_" +  (self.options.sort[0].operator === "" ? "up" : "down")
            ]);
        }

        self.onChange = function(key, value) {
            if (key == "request") {
                that.$body.options(key, value);
            }
        };

        that.closePreview = function() {
            self.preview = false;
        };

        that.resizeColumn = function(id, width) {
            resizeColumn(id, width);
            return that;
        }

        that.sort = function(key, operator) {
            var isSelected = key == self.options.sort[0].key;
            self.options.sort = [
                {
                    key: key,
                    operator: operator
                }
            ];
            if (isSelected) {
                updateOrder(self.options.columns[self.selectedColumn].id);
            } else {
                toggleSelected(self.options.columns[self.selectedColumn].id);
                self.selectedColumn = getColumnIndexById(key);
                toggleSelected(self.options.columns[self.selectedColumn].id);
            }
            that.$body.sort(self.options.sort[0].key, self.options.sort[0].operator);
            return that;
        };

        return that;

    };

    /*
    ============================================================================
    Maps
    ============================================================================
    */

    Ox.Map = function(options, self) {

        var self = self || {}
            that = new Ox.Element("div", self)
                .defaults({
                    places: [],
                    type: "satellite"
                })
                .options(options || {});

        init();

        function canContain(outerBounds, innerBounds) {
            var outerSpan = outerBounds.toSpan(),
                innerSpan = innerBounds.toSpan();
            return outerSpan.lat() > innerSpan.lat() &&
                    outerSpan.lng() > innerSpan.lng();
        }

        function click(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();
                }
            })
        }

        function getLocationByLatLng(latlng, bounds, callback) {
            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)
                var length = results.length;
                if (status == google.maps.GeocoderStatus.OK) {
                    if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                        if (bounds) {
                            $.each(results.reverse(), function(i, result) {
                                if (
                                    i == length - 1 ||
                                    canContain(bounds, result.geometry.bounds || result.geometry.viewport)
                                ) {
                                    callback(new Location(results[i]));
                                    return false;
                                }
                            });
                        } else {
                            callback(new Location(results[0]));
                        }
                    } else {
                        callback(null);
                    }
                } else {
                    Ox.print("geocode failed:", status);
                    callback(null);
                }
            });
        }

        function getLocationByName(name, callback) {
            self.geocoder.geocode({
                address: name
            }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                        callback(new Location(results[0]))
                    } else {
                        callback(null);
                    }
                } else {
                    Ox.print("geocode failed:", status);
                    callback(null);
                }
            });
        }

        function init() {
            var counter = 0,
                length = self.options.places.length;
            $.extend(self, {
                geocoder: new google.maps.Geocoder(),
                locations: [],
                selectedMarker: null
            });
            $.each(self.options.places, function(i, place) {
                if (Ox.isString(place)) {
                    self.options.places[i] = {
                        name: place
                    };
                } else if (Ox.isArray(place)) {
                    self.options.places[i] = {
                        name: "",
                        point: place
                    };
                }
                "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)
                    self.locations.push(location);
                    self.bounds = counter == 0 ? location.rectangle.bounds :
                            self.bounds.union(location.rectangle.bounds);
                }
                if (counter++ == length - 1) {
                    loadMap();
                }
            }
        }

        function loadMap() {
            Ox.print("loadMap");
            $.extend(self, {
                map: new google.maps.Map(that.$element[0], {
                    center: self.bounds.getCenter(),
                    disableDefaultUI: true,
                    mapTypeId: google.maps.MapTypeId[self.options.type.toUpperCase()],
                    zoom: 0
                })
            });
            self.map.fitBounds(self.bounds)
            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();
            });
        };

        function resize() {
            google.maps.event.trigger(self.map, "resize");
        }

        function zoom() {
            
        }

        function Location(geocode) {
            Ox.print("geocode", geocode);
            var bounds = geocode.geometry.bounds || geocode.geometry.viewport,
                area = [
                    [bounds.getSouthWest().lat(), bounds.getSouthWest().lng()],
                    [bounds.getNorthEast().lat(), bounds.getNorthEast().lng()]
                ],
                location = {
                    geocode: geocode,
                    name: {
                        formatted: geocode.formatted_address,
                        long: $.map(geocode.address_components, function(v) {
                            return v.long_name;
                        }).join(", ")
                    },
                    rectangle: new Rectangle(area),
                };
            Ox.print("area", area)
            return $.extend(location, {
                marker: new Marker(location),
                polygon: new Polygon(location)
            });
        }

        function Marker(location) {
            var listeners = {},
                marker = new google.maps.Marker({
                    icon: icon("red"),
                    position: location.rectangle.center,
                    title: location.name.formatted
                }),
                selected = false;
            function click() {
                selected = !selected;
                marker.setOptions({
                    icon: icon(selected ? "blue" : "red")
                });
                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 {
                add: function() {
                    marker.setMap(self.map);
                    listeners = {
                        click: google.maps.event.addListener(marker, "click", click),
                        dblclick: google.maps.event.addListener(marker, "dblclick", dblclick),
                    };
                    return this;
                },
                deselect: function() {
                    
                },
                remove: function() {
                    marker.setMap(null);
                    $.each(listeners, function(i, listener) {
                        google.maps.event.removeListener(listener);
                    });
                    return this;
                },
                select: function() {
                    
                }
            };
        }

        function Polygon(location) {
            var listeners = {},
                points = [
                    location.rectangle.latlng.sw,
                    location.rectangle.latlng.nw,
                    location.rectangle.latlng.ne,
                    location.rectangle.latlng.se,
                    location.rectangle.latlng.sw
                ],
                polygon = new google.maps.Polygon({
                    paths: points
                }),
                selected = false;
            setOptions();
            function click() {
                selected = !selected;
                setOptions();
            }
            function setOptions() {
                var color = selected ? "#8080FF" : "#FFFFFF";
                polygon.setOptions({
                    clickable: true,
                    fillColor: color,
                    fillOpacity: selected ? 0.1 : 0,
                    strokeColor: color,
                    strokeOpacity: 1,
                    strokeWeight: 2
                });
            }
            return {
                add: function() {
                    polygon.setMap(self.map);
                    listeners.click = google.maps.event.addListener(polygon, "click", click);
                    return this;
                },
                deselect: function() {
                    selected = false;
                    setOptions();
                },
                remove: function() {
                    polygon.setMap(null);
                    google.maps.event.removeListener(listeners.click);
                    return this;
                },
                select: function() {
                    selected = true;
                    setOptions();
                }
            };
        }

        function Rectangle(area) {
            var latlng = {
                    sw: new google.maps.LatLng(area[0][0], area[0][1]),
                    ne: new google.maps.LatLng(area[1][0], area[1][1])
                },
                bounds = new google.maps.LatLngBounds(latlng.sw, latlng.ne),
                lat = {},
                lng = {};
            latlng.mc = bounds.getCenter();
            $.each(latlng, function(k, v) {
                lat[k] = v.lat();
                lng[k] = v.lng();
            });
            $.extend(latlng, {
                sc: new google.maps.LatLng(lat.sw, lng.mc),
                se: new google.maps.LatLng(lat.sw, lng.ne),
                mw: new google.maps.LatLng(lat.mc, lng.sw),
                mw: new google.maps.LatLng(lat.mc, lng.ne),
                nw: new google.maps.LatLng(lat.ne, lng.sw),
                nc: new google.maps.LatLng(lat.ne, lng.mc),
            });
            return {
                area: area,
                bounds: bounds,
                canContain: function(rectangle) {
                    var outerSpan = this.bounds.toSpan(),
                        innerSpan = rectangle.bounds.toSpan();
                    return outerSpan.lat() > innerSpan.lat() &&
                            outerSpan.lng() > innerSpan.lng();
                },
                center: latlng.mc,
                contains: function(rectangle) {
                    return this.bounds.contains(rectangle.bounds.getSouthWest()) &&
                            this.bounds.contains(rectangle.bounds.getNorthEast());
                },
                latlng: latlng
            };
        }

        self.onChange = function(key, value) {
            if (key == "type") {
                
            }
        };

        return that;

    };

    Ox.MapImage = function(options, self) {

        /*
        options:
            height      image height (px)
            places      array of either names (""), points ([0, 0]),
                        or objects ({name, point, highlight})
            type        map type ("hybrid", "roadmap", "satellite", "terrain")
            width       image width (px)
        */

        var self = self || {},
            that = new Ox.Element("img", self)
                .defaults({
                    height: 360,
                    markerColorHighlight: "yellow",
                    markerColorNormal: "blue",
                    places: [],
                    type: "satellite",
                    width: 640
                })
                .options(options || {})

        $.extend(self, {
            markers: {
                highlight: [],
                normal: []
            },
            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) {
            $.each(self.options.places, function(i, place) {
                if (Ox.isString(place)) {
                    self.markers.normal.push(place);
                } else if (Ox.isArray(place)) {
                    self.markers.normal.push(place.join(","));
                } else {
                    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("|")
                }
            });
        } else {
            self.src += "&center=0,0&zoom=2"
        }

        that.attr({
            src: self.src
        });

        self.onChange = function(key, value) {
            
        };

        return that;

    };

    /*
    ============================================================================
    Menus
    ============================================================================
    */

    Ox.MainMenu = function(options, self) {

        /*  options:
         *      extras
         *      menus
         *      size
         */

        var self = self || {},
            that = new Ox.Bar({}, self)
                .defaults({
                    extras: [],
                    menus: [],
                    size: "medium"
                })
                .options(options || {})
                .addClass("OxMainMenu Ox" + Ox.toTitleCase(self.options.size)) // fixme: bar should accept small/medium/large ... like toolbar
                .click(click)
                .mousemove(mousemove);

        self.focused = false;
        self.selected = -1;
        that.menus = [];
        that.titles = [];
        that.layer = $("<div>").addClass("OxLayer");

        $.each(self.options.menus, function(position, menu) {
            that.titles[position] = $("<div>")
                .addClass("OxTitle")
                .html(menu.title)
                .data("position", position)
                .appendTo(that.$element);
            that.menus[position] = new Ox.Menu($.extend(menu, {
                element: that.titles[position],
                mainmenu: that,
                size: self.options.size
            }));
            that.bindEvent("hide_" + that.menus[position].options("id"), onHideMenu);
        });

        if (self.options.extras.length) {
            that.extras = $("<div>")
                .addClass("OxExtras")
                .appendTo(that.$element);
            $.each(self.options.extras, function(position, extra) {
                extra.css({
                    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;
            clickTitle(position);
        }

        function clickTitle(position) {
            var selected = self.selected;
            if (self.selected > -1) {
                that.menus[self.selected].hideMenu();
            }
            if (position > -1) {
                if (position != selected) {
                    self.focused = true;
                    self.selected = position;
                    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;
            if (self.focused && position != self.selected) {
                if (position > -1) {
                    clickTitle(position);                        
                } else {
                    focused = self.focused;
                    that.menus[self.selected].hideMenu();
                    self.focused = focused;
                }
            }
        }

        function onHideMenu() {
            if (self.selected > -1) {
                that.titles[self.selected].removeClass("OxSelected");
                self.selected = -1;
            }
            self.focused = false;
        }

        self.onChange = function(key, value) {

        };

        that.addMenuAfter = function(id) {
            
        };

        that.addMenuBefore = function(id) {
            
        };

        that.checkItem = function(id) {
            that.getItem(id).options({
                checked: true
            });
        };

        that.disableItem = function(id) {
            that.getItem(id).options({
                disabled: true
            });
        };

        that.enableItem = function(id) {
            that.getItem(id).options({
                disabled: false
            });
        };

        that.getItem = function(id) {
            var ids = id.split("_"),
                item;
            if (ids.length == 1) {
                $.each(that.menus, function(i, menu) {
                    item = menu.getItem(id);
                    return !item;
                });
            } else {
                item = getMenuById(ids.shift()).getItem(ids.join("_"));
            }
            return item;
        };

        that.removeMenu = function() {
            
        };

        that.selectNextMenu = function() {
            if (self.selected < self.options.menus.length - 1) {
                clickTitle(self.selected + 1);
            }
        };

        that.selectPreviousMenu = function() {
            if (self.selected) {
                clickTitle(self.selected - 1);
            }
        };

        that.uncheckItem = function(id) {
            that.getItem(id).options({
                checked: false
            });
        };

        return that;

    };

    Ox.Menu = function(options, self) {

        /*

        options:
        element         the element the menu is attached to
        id              the menu id
        items           array of menu items
        mainmenu        the main menu this menu is part of, if any
        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"

        methods:

        events:
        change_groupId  {id, value}     checked item of a group has changed
        click_itemId                    item not belonging to a group was clicked
        click_menuId    {id, value}     item not belonging to a group was clicked
        deselect_menuId {id, value}     item was deselected                             not needed, not implemented
        hide_menuId                     menu was hidden
        select_menuId   {id, value}     item was selected                               not needed, not implemented

        */

        var self = self || {},
            that = new Ox.Element({}, self)
                .defaults({
                    element: null,
                    id: "",
                    items: [],
                    mainmenu: null,
                    offset: {
                        left: 0,
                        top: 0
                    },
                    parent: null,
                    selected: -1,
                    side: "bottom",
                    size: "medium",
                })
                .options(options)
                .addClass(
                    "OxMenu Ox" + Ox.toTitleCase(self.options.side) +
                    " Ox" + Ox.toTitleCase(self.options.size)
                )
                .click(click)
                .mouseenter(mouseenter)
                .mouseleave(mouseleave)
                .mousemove(mousemove),
            itemHeight = self.options.size == "small" ? 12 : (self.options.size == "medium" ? 16 : 20),
            // menuHeight,
            scrollSpeed = 1,
            $item; // fixme: used?
            // fixme: attach all private vars to self?

        self.keyboardEvents = {
            key_up: selectPreviousItem,
            key_down: selectNextItem,
            key_left: selectSupermenu,
            key_right: selectSubmenu,
            key_escape: hideMenu,
            key_enter: clickSelectedItem
        };

        // construct
        that.items = [];
        that.submenus = {};
        that.$scrollbars = [];
        that.$top = $("<div>")
            .addClass("OxTop")
            .appendTo(that.$element);
        that.$scrollbars.up = constructScrollbar("up")
            .appendTo(that.$element);
        that.$container = $("<div>")
            .addClass("OxContainer")
            .appendTo(that.$element);
        that.$content = $("<table>")
            .addClass("OxContent")
            .appendTo(that.$container);
        constructItems(self.options.items);
        that.$scrollbars.down = constructScrollbar("down")
            .appendTo(that.$element);
        that.$bottom = $("<div>")
            .addClass("OxBottom")
            .appendTo(that.$element);
        that.$layer = $("<div>")
            .addClass(self.options.mainmenu ? "OxMainMenuLayer" : "OxLayer");

        function click(event) {
            var item,
                position,
                $target = $(event.target);
            if ($target.is(".OxCell")) {
                position = $target.parent().data("position");
                item = that.items[position];
                if (!item.options("disabled")) {
                    clickItem(position);
                } else {
                    that.hideMenu();
                }
            } else {
                that.hideMenu();
            }
        }

        function clickItem(position) {
            var item = that.items[position];
            if (!item.options("items").length) {
                if (that.options("parent")) {
                    Ox.print("t.o.p", that.options("parent"))
                    that.options("parent").hideMenu().triggerEvent("click");
                }
                if (item.options("checked") !== null && (!item.options("group") || !item.options("checked"))) {
                    item.options({
                        checked: !item.options("checked")
                    });
                    Ox.Event.trigger("change_" + item.options("group"), {
                        id: item.options("id"),
                        value: item.options("title")[0] // fixme: value or title?
                    });
                } else {
                    Ox.Event.trigger("click_" + self.options.id, {
                        id: item.options("id"),
                        title: item.options("title")[0]
                    });
                    Ox.Event.trigger("click_" + item.options("id"));
                }
                if (item.options("title").length == 2) {
                    item.toggleTitle();
                }
            }
            that.hideMenu();
        }

        function clickSelectedItem() {
            // called on key.enter
            if (self.options.selected > -1) {
                clickItem(self.options.selected);
            } else {
                that.hideMenu();
            }
        }

        function constructItems(items) {
            that.items = [];
            that.$content.empty();
            scrollMenuUp();
            $.each(items, function(i, item) {
                var position;
                if (item.id) {
                    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?;
                    if (item.items) {
                        that.submenus[item.id] = new Ox.Menu({
                            element: that.items[position],
                            id: Ox.toCamelCase(self.options.id + "/" + item.id),
                            items: item.items,
                            mainmenu: self.options.mainmenu,
                            offset: {
                                left: 0,
                                top: -4
                            },
                            parent: that,
                            side: "right",
                            size: self.options.size,
                        });
                    }
                } else {
                    that.$content.append(constructSpace());
                    that.$content.append(constructLine());
                    that.$content.append(constructSpace());
                }
            });
            if (!that.is(":hidden")) {
                that.hideMenu();
                that.showMenu();
            }
        }

        function constructLine() {
            return $("<tr>").append(
                $("<td>", {
                    "class": "OxLine",
                    colspan: 5
                })
            );
        }

        function constructScrollbar(direction) {
            var interval,
                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;
                },
                mousedown: function() {
                    scrollSpeed = 2;
                    return false;
                },
                mouseenter: function() {
                    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") {
                            that.$content.css({
                                top: -itemHeight + "px"
                            });
                        }
                    }
                    scrollMenu(speed);
                    interval = setInterval(function() {
                        scrollMenu(speed);
                    }, 100);
                },
                mouseleave: function() {
                    $(this).removeClass("OxSelected");
                    clearInterval(interval);
                },
                mouseup: function() {
                    scrollSpeed = 1;
                    return false;
                }
            });
        }

        function constructSpace() {
            return $("<tr>").append(
                $("<td>", {
                    "class": "OxSpace",
                    colspan: 5
                })
            );
        }

        function getElement(id) {
            // fixme: needed?
            return $("#" + Ox.toCamelCase(options.id + "/" + id));
        }

        function hideMenu() {
            // called on key_escape
            that.hideMenu();
        }

        function isFirstEnabledItem() {
            var ret = true;
            $.each(that.items, function(i, item) {
                if (i < self.options.selected && !item.options("disabled")) {
                    return ret = false;
                }
            });
            return ret;
        }

        function isLastEnabledItem() {
            var ret = true;
            $.each(that.items, function(i, item) {
                if (i > self.options.selected && !item.options("disabled")) {
                    return ret = false;
                }
            });
            return ret;
        }

        function mouseenter() {
            that.gainFocus();
        }

        function mouseleave() {
            if (self.options.selected > -1 && !that.items[self.options.selected].options("items").length) {
                selectItem(-1);
            }
        }

        function mousemove(event) {
            var item,
                position,
                $target = $(event.target);
            if ($target.is(".OxCell")) {
                position = $target.parent().data("position");
                item = that.items[position];
                if (!item.options("disabled") && position != self.options.selected) {
                    selectItem(position);
                }
            } else {
                mouseleave();
            }
        }

        function scrollMenu(speed) {
            var containerHeight = that.$container.height(),
                contentHeight = that.$content.height(),
                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.$container.height(containerHeight + itemHeight);
                that.items[that.items.length - 1].trigger("mouseover");
            } else if (top >= max - itemHeight) {
                top = max;
                that.$scrollbars.up.hide().trigger("mouseleave");
                that.$container.height(containerHeight + itemHeight);
                that.items[0].trigger("mouseover");
            }
            that.$content.css({
                top: top + "px"
            });
        }

        function scrollMenuUp() {
            if (that.$scrollbars.up.is(":visible")) {
                that.$content.css({
                    top: "0px"
                });
                that.$scrollbars.up.hide();
                if (that.$scrollbars.down.is(":hidden")) {
                    that.$scrollbars.down.show();
                } else {
                    that.$container.height(that.$container.height() + itemHeight);
                }
            }
        }

        function selectItem(position) {
            var item;
            if (self.options.selected > -1) {
                item = that.items[self.options.selected]
                item.removeClass("OxSelected");
            }
            if (position > -1) {
                item = that.items[position];
                $.each(that.submenus, function(id, submenu) {
                    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");
            }
            self.options.selected = position;
        }

        function selectNextItem() {
            var offset,
                selected = self.options.selected;
            Ox.print("sNI", selected)
            if (!isLastEnabledItem()) {
                if (selected == -1) {
                    scrollMenuUp();
                } else {
                    that.items[selected].removeClass("OxSelected");
                }
                do {
                    selected++;                    
                } 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")) {
                        that.$scrollbars.up.show();
                        that.$container.height(that.$container.height() - itemHeight);
                        offset += itemHeight;
                    }
                    if (selected == that.items.length - 1) {
                        that.$scrollbars.down.hide();
                        that.$container.height(that.$container.height() + itemHeight);
                    } else {
                        that.$content.css({
                            top: ((parseInt(that.$content.css("top")) || 0) - offset) + "px"
                        });
                    }
                }
            }            
        }

        function selectPreviousItem() {
            var offset,
                selected = self.options.selected;
            Ox.print("sPI", selected)
            if (selected > - 1) {
                if (!isFirstEnabledItem()) {
                    that.items[selected].removeClass("OxSelected");
                    do {
                        selected--;                    
                    } 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")) {
                        that.$scrollbars.down.show();
                        that.$container.height(that.$container.height() - itemHeight);
                    }
                    if (selected == 0) {
                        that.$scrollbars.up.hide();
                        that.$container.height(that.$container.height() + itemHeight);
                    }
                    that.$content.css({
                        top: ((parseInt(that.$content.css("top")) || 0) - offset) + "px"
                    });
                }
            }
        }

        function selectSubmenu() {
            Ox.print("selectSubmenu", self.options.selected)
            if (self.options.selected > -1) {
                var submenu = that.submenus[that.items[self.options.selected].options("id")];
                if (submenu && submenu.hasEnabledItems()) {
                    submenu.gainFocus();
                    submenu.selectFirstItem();
                } else if (self.options.mainmenu) {
                    self.options.mainmenu.selectNextMenu();
                }
            } else if (self.options.mainmenu) {
                self.options.mainmenu.selectNextMenu();
            }
        }

        function selectSupermenu() {
            Ox.print("selectSupermenu", self.options.selected)
            if (self.options.parent) {
                that.items[self.options.selected].trigger("mouseleave");
                self.options.parent.gainFocus();
            } else if (self.options.mainmenu) {
                self.options.mainmenu.selectPreviousMenu();
            }
        }

        self.onChange = function(key, value) {
            if (key == "items") {
                constructItems(value);
            } else if (key == "selected") {
                selectItem(value);
            }
        }

        that.addItem = function(item, position) {
            
        };

        that.addItemAfter = function(item, id) {

        };

        that.addItemBefore = function(item, id) {

        };

        that.checkItem = function(id) {
            that.getItem(id).options({
                checked: true
            });
        };

        that.getItem = function(id) {
            var ids = id.split("_"),
                item;
            if (ids.length == 1) {
                $.each(that.items, function(i, v) {
                    if (v.options("id") == id) {
                        item = v;
                        return false;
                    }
                });
                if (!item) {
                    $.each(that.submenus, function(k, submenu) {
                        item = submenu.getItem(id);
                        return !item;
                    });
                }
            } else {
                item = that.submenus[ids.shift()].getItem(ids.join("_"));
            }
            return item;
        };

        that.hasEnabledItems = function() {
            var ret = false;
            $.each(that.items, function(i, item) {
                if (!item.options("disabled")) {
                    return ret = true;
                }
            });
            return ret;
        };

        that.hideMenu = function() {
            if (that.is(":hidden")) {
                return;
            }
            $.each(that.submenus, function(i, submenu) {
                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.down.hide();
            if (self.options.parent) {
                self.options.element.removeClass("OxSelected");
            }
            that.hide()
                .loseFocus()
                .unbindEvent(self.keyboardEvents)
                .triggerEvent("hide");
            that.$layer.hide();
            $document.unbind("click", click);
            return that;
            //that.triggerEvent("hide");
        };

        that.removeItem = function() {

        };

        that.selectFirstItem = function() {
            selectNextItem();
        };

        that.showMenu = function() {
            if (!that.is(":hidden")) {
                return;
            }
            if (!self.options.parent && !that.$layer.parent().length) {
                that.$layer.appendTo($body);
            }
            that.parent().length || that.appendTo($body);
            that.css({
                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),
                menuHeight = that.$content.outerHeight(); // fixme: why is outerHeight 0 when hidden?
                menuMaxHeight = Math.floor($window.height() - top - 16);
            if (self.options.parent) {
                if (menuHeight > menuMaxHeight) {
                    top = Ox.limit(top - menuHeight + menuMaxHeight, self.options.parent.offset().top, top); 
                    menuMaxHeight = Math.floor($window.height() - top - 16);
                }
            }
            that.css({
                left: left + "px",
                top: top + "px"
            });
            if (menuHeight > menuMaxHeight) {
                that.$container.height(menuMaxHeight - itemHeight - 8); // margin
                that.$scrollbars.down.show();
            } else {
                that.$container.height(menuHeight);
            }
            !self.options.parent && that.gainFocus();
            that.bindEvent(self.keyboardEvents);
            setTimeout(function() {
                $document.bind("click", click);
            }, 100);
            return that;
            //that.triggerEvent("show");
        };

        that.toggleMenu = function() {
            that.is(":hidden") ? that.showMenu() : that.hideMenu();
        };

        return that;

    };

    Ox.MenuItem = function(options, self) {

        var self = self || {},
            that = new Ox.Element("tr", self)
                .defaults({
                    bind: [],
                    checked: null,
                    disabled: false,
                    group: "",
                    icon: "",
                    id: "",
                    items: [],
                    keyboard: "",
                    menu: null, // fixme: is passing the menu to 100s of menu items really memory-neutral?
                    position: 0,
                    title: [],
                })
                .options($.extend(options, {
                    keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
                    title: Ox.makeArray(options.title || self.defaults.title)
                }))
                .addClass("OxItem" + (self.options.disabled ? " OxDisabled" : ""))
                .attr({
                    id: Ox.toCamelCase(self.options.menu.options("id") + "/" + self.options.id)
                })
                .data("group", self.options.group); // fixme: why?

        // construct
        that.append(
                that.$status = $("<td>", {
                    "class": "OxCell OxStatus",
                    html: self.options.checked ? oxui.symbols.check : ""
                })
            )
            .append(
                that.$icon = $("<td>", {
                    "class": "OxCell OxIcon"
                })
                .append(self.options.icon ?
                    $("<img>", {
                        src: self.options.icon
                    }) : null
                )
            )
            .append(
                that.$title = $("<td>", {
                    "class": "OxCell OxTitle",
                    html: self.options.title[0]
                })
            )
            .append(
                $("<td>", {
                    "class": "OxCell OxModifiers",
                    html: $.map(self.options.keyboard.modifiers, function(modifier) {
                        return oxui.symbols[modifier];
                    }).join("")
                })
            )
            .append(
                $("<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()
                })
            );            

        function parseKeyboard(str) {
            var modifiers = str.split(" "),
                key = modifiers.pop();
            return {
                modifiers: modifiers,
                key: key
            };
        }

        self.onChange = function(key, value) {
            if (key == "checked") {
                if (value && self.options.group) {
                    $.each(self.options.menu.items, function(i, item) {
                        if (
                            item.options("id") != self.options.id &&
                            item.options("group") == self.options.group &&
                            item.options("checked")
                        ) {
                            item.options({
                                checked: false
                            });
                            return false;
                        }
                    });
                }
                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]);
            }
        }

        that.toggle = function() {
            // toggle id and title
        };

        that.toggleChecked = function() {

        };

        that.toggleDisabled = function() {

        };

        that.toggleTitle = function() {
            Ox.print("s.o.t", self.options.title)
            that.options({
                title: self.options.title.reverse()
            });
        };

        return that;

    };

    /*
    ============================================================================
    Panels
    ============================================================================
    */

    /*
    ----------------------------------------------------------------------------
    Ox.CollapsePanel
    ----------------------------------------------------------------------------
    */

    Ox.CollapsePanel = function(options, self) {
        var self = self || {},
            that = new Ox.Panel({}, self)
                .defaults({
                    collapsed: false,
                    size: 20,
                    title: ""
                })
                .options(options)
                .addClass("OxCollapsePanel"),
            value = self.options.collapsed ?
                ["expand", "collapsed"] : ["collapse", "expand"],
            $titlebar = new Ox.Bar({
                    orientation: "horizontal",
                    size: self.options.size,
                })
                .dblclick(dblclickTitlebar)
                .appendTo(that),
            $switch = new Ox.Button({
                    style: "symbol",
                    type: "image",
                    value: value,
                })
                .click(toggleCollapsed)
                .appendTo($titlebar),
            $title = new Ox.Element()
                .addClass("OxTitle")
                .html(self.options.title/*.toUpperCase()*/)
                .appendTo($titlebar);
        that.$content = new Ox.Element()
            .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"
            });
        }
        function dblclickTitlebar(e) {
            if (!$(e.target).hasClass("OxButton")) {
                toggleCollapsed();
            }
        }
        function toggleCollapsed() {
            that.options({
                collapsed: !self.options.collapsed
            });
            var top = self.options.collapsed ?
                -that.$content.height() : 0;
            that.$content.animate({
                marginTop: top + "px"
            }, 200);
        }
        self.onChange = function(option, value) {
            if (option == "collapsed") {
                $switch.options({
                    value: value ? "expand" : "collapse"
                });
            } else if (option == "title") {
                $title.html(self.options.title);
            }
        };
        return that;
    };

    /*
    ----------------------------------------------------------------------------
    Ox.Panel
    ----------------------------------------------------------------------------
    */

    Ox.Panel = function(options, self) {
        var self = self || {},
            that = new Ox.Element({}, self)
                .addClass("OxPanel");
        return that;
    };

    /*
    ----------------------------------------------------------------------------
    Ox.SplitPanel
    options:
        elements: [{            array of one, two or three elements
            collapsible: false, collapsible or not (only for outer elements)
            collapsed: false,   collapsed or not (only for collapsible elements)
            element: {},        OxElement (if any element is resizable or
                                collapsible, all OxElements must have an id)
            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)
            size: 0             size in px (one element must have no size)
        }],
        orientation: ""         "horizontal" or "vertical"
    methods:
        isCollapsed(id)         element is collapsed or not
        resize(id, size)        resize element to size px
        toggle(id)              collapse or expand element
    events:
        resize
        toggle
    ----------------------------------------------------------------------------
    */

    Ox.SplitPanel = function(options, self) {

        var self = self || {},
            that = new Ox.Element({}, self) // fixme: Container
                .defaults({
                    elements: [],
                    orientation: "horizontal"
                })
                .options(options || {})
                .addClass("OxSplitPanel");

        $.extend(self, {
            dimensions: oxui.getDimensions(self.options.orientation),
            edges: oxui.getEdges(self.options.orientation),
            length: self.options.elements.length
        });

        that.$elements = [];

        $.each(self.options.elements, function(i, v) {
            self.options.elements[i] = $.extend({
                collapsible: false,
                collapsed: false,
                resizable: false,
                resize: [],
                size: "auto"
            }, v);
            that.$elements[i] = v.element
                .css(self.edges[2], 0)
                .css(self.edges[3], 0);
        });

        setSizes();

        $.each(self.options.elements, function(i, v) {
            //that.append(element)
            Ox.print("V: ", v)
            that.$elements[i].appendTo(that); // fixme: that.$content
            if (v.collapsible || v.resizable) {
                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",
                        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]);
            }
        });

        function getPositionById(id) {
            var position = -1;
            $.each(self.options.elements, function(i, element) {
                if (element.element.options("id") == id) {
                    position = i;
                    return false;
                }
            });
            return position;
        }

        function getSize(element) {
            return element.size + element.resizable;
        }

        function setSizes() {
            $.each(self.options.elements, function(i, v) {
                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"
                    );
                } 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" || 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"
                    );
                }
            });
        }

        that.isCollapsed = function(id) {
            return self.options.elements[getPositionById(id)].collapsed;
        };

        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"); }))
            self.options.elements[pos].size = size;
            setSizes();
            return that;
        };

        that.toggle = function(id) {
            Ox.print("toggle", id);
            /*
            // something like this is needed to load in collapsed state
            if (Ox.isUndefined(self.options.position)) {
                self.options.position = parseInt(self.options.parent.css(self.options.edge)) +
                        (self.options.collapsed  ? self.options.size : 0);
            }
            var size = self.options.position -
                        (self.options.collapsed ? 0 : self.options.size),
                animate = {};
            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;
                Ox.Event.trigger("resize_" + id, self.options.elements[i][self.dimensions[1]]());
                self.options.elements[pos].collapsed = !self.options.elements[pos].collapsed;
            });
        };

        return that;

    };

    Ox.TabPanel = function(options, self) {
        
    };

    /*
    ============================================================================
    Requests
    ============================================================================
    */

    /*
    ----------------------------------------------------------------------------
    Ox.LoadingIcon
    ----------------------------------------------------------------------------
    */

    Ox.LoadingIcon = function(options, self) {
        var self = self || {},
            that = new Ox.Element("img", self)
                .defaults({
                    size: "medium"
                })
                .options(options || {})
                .attr({
                    src: oxui.path + "/png/ox.ui." + Ox.theme() + "/loading.png" // fixme: oxui.themePath needed?
                })
                .addClass(
                    "OxLoadingIcon Ox" + Ox.toTitleCase(self.options.size)
                );
        self.deg = 0;
        self.interval = 0;
        self.isRunning = false;
        function clear() {
            clearInterval(self.interval);
            self.deg = 0;
            self.interval = 0;
            update();
        }
        function update() {
            that.css({
                MozTransform: "rotate(" + self.deg + "deg)",
                WebkitTransform: "rotate(" + self.deg + "deg)"
            });
        }
        that.start = function() {
            self.isRunning = true;
            clear();
            that.animate({
                opacity: 1
            }, 250);
            self.interval = setInterval(function() {
                self.deg = (self.deg + 30) % 360;
                update();
            }, 83);
        };
        that.stop = function() {
            that.animate({
                opacity: 0
            }, 250, function() {
                !self.isRunning && clear();
                self.isRunning = false;
            });
        }
        return that;
    }

    /*
    ----------------------------------------------------------------------------
    Ox.Progressbar
    ----------------------------------------------------------------------------
    */

    /*
    ============================================================================
    Miscellaneous
    ============================================================================
    */

    /*
    ----------------------------------------------------------------------------
    Ox.Tooltip
    ----------------------------------------------------------------------------
    */

    Ox.Tooltip = function(options, self) {

        var self = self || {},
            that = new Ox.Element()
                .defaults({
                    text: ""
                })
                .options(options || {})
                .addClass("OxTooltip")
                .html(self.options.text);

        self.onChange = function(key, value) {
            if (key == "text") {
                that.html(value);
            }
        };

        that.hide = function() {
            that.animate({
                opacity: 0
            }, 250, function() {
                that.remove();
            });
            return that;
        };

        that.show = function(e) {
            var left, top, width, height;
            that.appendTo($body);
            width = that.width();
            height = that.height();
            left = Ox.limit(e.clientX - width / 2, 0, $document.width() - width);
            top = e.clientY > $document.height() - height - 16 ? e.clientY - 32 : e.clientY + 16;
            that.css({
                    left: left + "px",
                    top: top + "px"
                })
                .animate({
                    opacity: 1
                }, 250);
            return that;
        };

        return that;

    };

})();