oxjs/demos/form2/js/form.js

Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {

    var $body = $("body"),
        $panel = $("<div>")
            .attr({
                id: "panel"
            })
            .appendTo($body),
        countries = Ox.sortASCII(Ox.map(Ox.COUNTRIES, function(country) {
            return country.dissolved ? null : country.name;
        }));
        objects = {
            "Button": [
                {
                    options: {
                        style: "symbol",
                        title: "add",
                        type: "image"
                    },
                    title: "Symbol Button"
                },
                {
                    options: {
                        title: "add",
                        type: "image",
                    },
                    title: "Image Button"
                },
                {
                    options: {
                        title: "Button",
                    },
                    title: "Text Button"
                },
                {
                    options: {
                        selectable: true,
                        title: "Button",
                    },
                    title: "Selectable Button"
                },
                {
                    options: {
                        disabled: true,
                        title: "Button",
                    },
                    title: "Disabled Button"
                },
                {
                    options: {
                        values: [
                            {id: "collapsed", title: "right"},
                            {id: "expanded", title: "down"},
                        ],
                        type: "image"
                    },
                    title: "Multi-Value Image Button"
                },
                {
                    options: {
                        selectable: true,
                        value: 'on',
                        values: [
                            {id: "off", title: "Off"},
                            {id: "on", title: "On"}
                        ],
                        width: 32
                    },
                    title: "Multi-Value Selectable Text Button"
                }
            ],
            "ButtonGroup": [
                {
                    options: {
                        buttons: [
                            'Add', 'Remove', 'Close', 'Select',
                            'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
                            'Left', 'Right', 'Up', 'Down',
                            'Pause', 'PlayInToOut', 'GoToIn', 'GoToOut', 'SetIn', 'SetOut',
                            'GoToPoster', 'SetPoster',
                            'Center', 'Zoom', 'Grow', 'Shrink', 'Fill', 'Fit',
                            'Unmute', 'VolumeUp', 'VolumeDown', 'Mute',
                            'Undo', 'Redo', 'Unlock', 'Lock',
                            'Volume', 'Mount', 'Unmount', 'Sync',
                            'Info', 'Warning', 'Help',
                            'Check', 'Embed', 'Bracket',
                            'Upload', 'Download',
                            'Copyright', 'NoCopyright',
                            'Click', 'Delete', 'Edit', 'Find', 'Flag', 'Icon', 'Like',
                            'Mail', 'Publish', 'Set', 'Star', 'User', 'View', 'Loading'
                        ],
                        id: "buttonGroupImage",
                        type: "image"
                    },
                    title: "Image ButtonGroup"
                },
                {
                    options: {
                        buttons: [
                            {
                                id: "one",
                                title: "do something",
                            },
                            {
                                id: "two",
                                title: "do something else",
                            }
                        ],
                        id: "buttonGroupText"
                    },
                    title: "Text ButtonGroup"
                },
                {
                    options: {
                        buttons: [
                            {
                                id: "either",
                                title: "select me",
                            },
                            {
                                id: "or1",
                                title: "or select me",
                            },
                            {
                                id: "or2",
                                title: "or select me",
                            }
                        ],
                        id: "selectableButtonGroupOne",
                        selectable: true
                    },
                    title: "Selectable ButtonGroup, select one"
                },
                {
                    options: {
                        buttons: [
                            {
                                id: "both",
                                title: "select me",
                            },
                            {
                                id: "and",
                                title: "and select me",
                            },
                            {
                                id: "or",
                                title: "or select me",
                            }
                        ],
                        id: "selectableButtonGroupOneTwo",
                        max: 2,
                        min: 1,
                        selectable: true
                    },
                    title: "Selectable ButtonGroup, select one or two"
                },
                {
                    options: {
                        buttons: [
                            {
                                id: "both",
                                title: "select me",
                            },
                            {
                                id: "and",
                                title: "and select me",
                            },
                            {
                                id: "or",
                                title: "or select me",
                            }
                        ],
                        id: "selectableButtonGroupTwo",
                        max: 2,
                        min: 2,
                        selectable: true
                    },
                    title: "Selectable ButtonGroup, select two"
                },
                {
                    options: {
                        buttons: [
                            {
                                id: "both",
                                title: "select me",
                            },
                            {
                                id: "and1",
                                title: "and select me",
                            },
                            {
                                id: "and2",
                                title: "and select me",
                            }
                        ],
                        id: "selectableButtonGroupAny",
                        max: -1,
                        min: 0,
                        selectable: true,
                        value: 'and1'
                    },
                    title: "Selectable ButtonGroup, select any"
                },
                {
                    options: {
                        buttons: [
                            {
                                id: "either",
                                title: "select me",
                            },
                            {
                                id: "or1",
                                title: "or select me",
                            },
                            {
                                id: "or2",
                                title: "or select me",
                            }
                        ],
                        id: "tabButtonGroup",
                        selectable: true,
                        style: "tab"
                    },
                    title: "Tab ButtonGroup"
                }
            ],
            "Checkbox": [
                {
                    options: {
                        value: true
                    },
                    title: "Checkbox",
                },
                {
                    options: {
                        title: "check me",
                    },
                    title: "Checkbox with Title"
                },
                {
                    options: {
                        disabled: true,
                        title: "check me",
                    },
                    title: "Disabled Checkbox with Title"
                },
                {
                    options: {
                        title: "check me",
                        width: 300,
                    },
                    title: "Checkbox with Title and Width"
                }
            ],
            "CheckboxGroup": [
                {
                    options: {
                        checkboxes: [
                            {id: "either", title: "check me"},
                            {id: "or1", title: "or check me"},
                            {id: "or2", title: "or check me"},
                        ],
                        id: "CheckboxGroupOne",
                        width: 300
                    },
                    title: "CheckboxGroup, select one"
                },
                {
                    options: {
                        checkboxes: [
                            {id: "either", title: "check me"},
                            {id: "or1", title: "or check me"},
                            {id: "or2", title: "or check me"},
                        ],
                        id: "CheckboxGroupTwo",
                        max: 2,
                        min: 2,
                        width: 300
                    },
                    title: "CheckboxGroup, select two"
                },
                {
                    options: {
                        checkboxes: [
                            {id: "both", title: "check me"},
                            {id: "and1", title: "and check me"},
                            {id: "and2", title: "and check me"},
                        ],
                        id: "CheckboxGroupAny",
                        max: -1,
                        min: 0,
                        value: 'and1',
                        width: 300
                    },
                    title: "CheckboxGroup, select any"
                },
            ],
            "ColorInput": [
                {
                    options: {
                        id: "colorInputRGB",
                        value: [255, 0, 0]
                    },
                    title: "RGB ColorInput"
                },
                {
                    options: {
                        id: "colorInputHSL",
                        mode: "HSL",
                        value: [0, 1, 0.5]
                    },
                    title: "HSL ColorInput"
                }
            ],
            "DateInput": [
                {
                    options: {
                        id: "dateInputShort"
                    },
                    title: "Short DateInput"
                },
                {
                    options: {
                        format: "medium",
                        id: "dateInputMedium"
                    },
                    title: "Medium DateInput"
                },
                {
                    options: {
                        format: "long",
                        id: "dateInputLong",
                    },
                    title: "Long DateInput"
                },
                {
                    options: {
                        id: "dateInputShortValue",
                        value: "2000-01-01"
                    },
                    title: "Short DateInput with Value"
                },
                {
                    options: {
                        format: "medium",
                        id: "dateInputMediumWeekday",
                        weekday: true
                    },
                    title: "Medium DateInput with Weekday"
                },
                {
                    options: {
                        format: "long",
                        id: "dateInputLongWeekday",
                        weekday: true
                    },
                    title: "Long DateInput with Weekday"
                }
            ],
            "DateTimeInput": [
                {
                    options: {
                        id: "dateTimeInputShort"
                    },
                    title: "Short DateTimeInput"
                },
                {
                    options: {
                        format: 'medium',
                        id: "dateTimeInputMedium",
                        seconds: true,
                        weekday: true
                    },
                    title: "Medium DateTimeInput"
                },
                {
                    options: {
                        ampm: true,
                        format: "long",
                        id: "dateTimeInputLong",
                        seconds: true,
                        weekday: true,
                    },
                    title: "Long DateTimeInput"
                },
            ],
            "FormElementGroup": [
                {
                    options: {
                        elements: [
                            new Ox.Select({
                                id: "select",
                                items: [
                                    {id: "one", title: "Find: One"},
                                    {id: "two", title: "Find: Two"},
                                    {id: "three", title: "Find: Three"}
                                ],
                                overlap: "right",
                                width: 128
                            }),
                            new Ox.Input({
                                id: "input",
                                width: 128
                            })
                        ],
                        id: "formElementGroupSelectInput"
                    },
                    title: "FormElementGroup (Select and Input)"
                },
                {
                    options: {
                        elements: [
                            new Ox.Input({
                                id: "input_",
                                width: 128
                            }),
                            new Ox.Select({
                                id: "select_",
                                items: [
                                    {id: "kb", title: "KB"},
                                    {id: "mb", title: "MB"},
                                    {id: "gb", title: "GB"},
                                    {id: "tb", title: "TB"}
                                ],
                                overlap: "left",
                                width: 128
                            }),
                        ],
                        float: "right",
                        id: "formElementGroupInputSelect"
                    },
                    title: "FormElementGroup (Input and Select)"
                },
                {
                    options: {
                        elements: [
                            Ox.Label({
                                title: "Match",
                                overlap: "right",
                                width: 48
                            }),
                            Ox.FormElementGroup({
                                elements: [
                                    Ox.Select({
                                        id: "select_",
                                        items: [
                                            {id: "all", title: "all"},
                                            {id: "any", title: "any"},
                                        ],
                                        width: 48
                                    }),
                                    Ox.Label({
                                        overlap: "left",
                                        title: "of the following conditions",
                                        width: 160
                                    })
                                ],
                                float: 'right',
                                width: 208
                            })
                        ],
                        join: function(value) {
                            return value[1][0];
                        },
                        float: "left",
                        id: "formElementGroupLabels",
                        split: function(value) {
                            return [null, [value, null]];
                        }
                    },
                    title: "FormElementGroup (Select and Labels)"
                },
                {
                    options: {
                        elements: [
                            new Ox.Select({
                                items: [
                                    {id: "title", title: "Title"},
                                    {id: "date", title: "Date"},
                                    {id: "place", title: "Place"}
                                ],
                                overlap: "right",
                                width: 128
                            }),
                            new Ox.Select({
                                items: [
                                    {id: "is", title: "is"},
                                    {id: "is_between", title: "is between"},
                                    {id: "is_not_between", title: "is not between"}
                                ],
                                overlap: "right",
                                width: 128
                            }),
                            new Ox.InputGroup({
                                inputs: [
                                    new Ox.DateInput({
                                        width: {
                                            day: 36,
                                            month: 36,
                                            year: 56
                                        }
                                    }),
                                    new Ox.DateInput({
                                        width: {
                                            day: 36,
                                            month: 36,
                                            year: 56
                                        }
                                    }),
                                ],
                                separators: [
                                    {title: "and", width: 32}
                                ]
                            })
                        ],
                        id: "formElementGroupSelectInputGroup",
                    },
                    title: "FormElementGroup (Selects and InputGroup)"
                }
            ],
            "Input": [
                {
                    options: {
                        value: "Value"
                    },
                    title: "Input"
                },
                {
                    options: {
                        disabled: true,
                        value: "Disabled"
                    },
                    title: "Disabled Input"
                },
                {
                    options: {
                        placeholder: "Placeholder"
                    },
                    title: "Input with Placeholder"
                },
                {
                    options: {
                        label: "Label"
                    },
                    title: "Input with Label"
                },
                {
                    options: {
                        clear: true
                    },
                    title: "Input with Clear Button"
                },
                {
                    options: {
                        clear: true,
                        label: "Label",
                        placeholder: "Placeholder",
                        width: 256
                    },
                    title: "Input with Label, Placeholder and Button"
                },
                {
                    options: {
                        type: "password"
                    },
                    title: "Password Input"
                },
                {
                    options: {
                        clear: true,
                        placeholder: "Password",
                        type: "password"
                    },
                    title: "Password Input with Placeholder"
                },
                {
                    options: {
                        min: 0,
                        max: 100,
                        type: "float"
                    },
                    title: "Float Input (0.0 - 100.0)"
                },
                {
                    options: {
                        min: 0,
                        max: 255,
                        type: "int"
                    },
                    title: "Integer Input (0 - 255)"
                },
                {
                    options: {
                        clear: true,
                        id: "integerClear",
                        type: "int"
                    },
                    title: "Integer Input with Clear Button"
                },
                {
                    options: {
                        arrows: true,
                        id: "integerArrows",
                        type: "int"
                    },
                    title: "Integer Input with Arrows"
                },
                {
                    options: {
                        autocomplete: countries,
                        autocompleteReplace: true,
                        id: "autocompleteReplace"
                    },
                    title: "Autocomplete with Replace"
                },
                {
                    options: {
                        autocomplete: countries,
                        autocompleteReplace: true,
                        autocompleteReplaceCorrect: true,
                        id: "autocompleteReplaceCorrect"
                    },
                    title: "Autocomplete with Replace and Correct"
                },
                {
                    options: {
                        autocomplete: countries,
                        autocompleteSelect: true,
                        autocompleteSelectHighlight: true,
                        id: "autocompleteSelect"
                    },
                    title: "Autocomplete with Select"
                },
                {
                    options: {
                        autocomplete: countries,
                        autocompleteReplace: true,
                        autocompleteSelect: true,
                        autocompleteSelectHighlight: true,
                        id: "autocompleteReplaceSelect"
                    },
                    title: "Autocomplete with Replace and Select"
                },
                {
                    options: {
                        autocomplete: countries,
                        autocompleteReplace: true,
                        autocompleteReplaceCorrect: true,
                        autocompleteSelect: true,
                        autocompleteSelectHighlight: true,
                        id: "autocompleteReplaceCorrectSelect"
                    },
                    title: "Autocomplete with Replace, Correct and Select"
                },
                {
                    options: {
                        height: 128,
                        type: 'textarea',
                        width: 256
                    },
                    title: 'Textarea'
                }
                /*
                {
                    options: {
                        autocomplete: function(value, callback) {
                            callback([value]);
                        },
                        autocompleteSelect: true,
                        autocompleteSelectHighlight: true,
                        id: "autocompleteFunction"
                    },
                    title: "Autocomplete with Select (Function)"
                },
                {
                    options: {
                        autocorrect: /\d/,
                    },
                    title: "Autocorrect with RegExp (Integer)"
                },
                {
                    options: {
                        autocorrect: function(value, blur, callback) {
                            var length = value.length;
                            value = $.map(value.toLowerCase().split(""), function(v, i) {
                                Ox.print(new RegExp("[\d" + ((i == 0 || (i == length - 1 && blur)) ? "" : "\.") + "]"))
                                if (new RegExp("[\\d" + ((i == 0 || (i == length - 1 && blur) || i != value.indexOf(".")) ? "" : "\\.") + "]")(v)) {
                                    return v;
                                } else {
                                    return null;
                                }
                            }).join("");
                            callback(blur ? parseFloat(value) : value);
                        },
                    },
                    title: "Autocorrect with Function (Float)"
                },
                */
            ],
            "InputGroup": [
                {
                    options: {
                        id: "inputGroup",
                        inputs: [
                            Ox.Input({id: "width", placeholder: "Width", width: 64}),
                            Ox.Input({id: "height", placeholder: "Height", width: 64})
                        ],
                        separators: [
                            {title: "x", width: 16}
                        ]
                    },
                    title: "InputGroup"
                },
                {
                    options: {
                        id: "inputGroupWithWidth",
                        inputs: [
                            Ox.Input({id: "width", placeholder: "Width"}),
                            Ox.Input({id: "height", placeholder: "Height"})
                        ],
                        separators: [
                            {title: "x", width: 16}
                        ],
                        width: 128
                    },
                    title: "InputGroup with Width"
                },
                {
                    options: {
                        id: "inputGroupWithSplitAndJoin",
                        inputs: [
                            Ox.Input({id: "width", placeholder: "Width"}),
                            Ox.Input({id: "height", placeholder: "Height"})
                        ],
                        join: function(value) {
                            return value.join('x');
                        },
                        separators: [
                            {title: "x", width: 16}
                        ],
                        split: function(value) {
                            return value.split('x');
                        },
                        value: '256x96',
                        width: 128
                    },
                    title: "InputGroup with Split and Join"
                },
                {
                    options: {
                        id: "inputGroupWithObjectValue",
                        inputs: [
                            Ox.Input({id: "width", placeholder: "Width"}),
                            Ox.Input({id: "height", placeholder: "Height"})
                        ],
                        join: function(value) {
                            return {width: value[0], height: value[1]};
                        },
                        separators: [
                            {title: "x", width: 16}
                        ],
                        split: function(value) {
                            return [value.width, value.height];
                        },
                        value: {width: 256, height: 96},
                        width: 128
                    },
                    title: "InputGroup with Object Value"
                },
                {
                    options: {
                        id: "inputGroupUsernamePassword",
                        inputs: [
                            Ox.Input({clear: true, id: "username", label: "Username", labelWidth: 80, placeholder: "Username"}),
                            Ox.Input({clear: true, id: "password", label: "Password", labelWidth: 80, placeholder: "Password", type: "password"})
                        ],
                        separators: [
                            {title: "", width: 8},
                        ],
                        width: 400
                    },
                    title: "Complex InputGroup"
                },
                {
                    options: {
                        id: "inputGroupTest",
                        inputs: [
                            Ox.Select({
                                id: "select",
                                items: [
                                    {id: "one", title: "One"},
                                    {id: "two", title: "Two"},
                                    {id: "three", title: "Three"}
                                ],
                                overlap: "right",
                                width: 128
                            }),
                            Ox.Input({
                                id: "input",
                                placeholder: "Placeholder",
                                width: 128
                            })
                        ],
                        separators: [
                            {title: "", width: 0}
                        ]
                    },
                    title: 'foo'
                },
                {
                    options: {
                        id: 'debug',
                        inputs: [
                            Ox.Checkbox({
                                id: 'tttt',
                                width: 16
                            }),
                            Ox.FormElementGroup({
                                elements: [
                                    Ox.Input({
                                        //overlap: "right",
                                        width: 64
                                    }),
                                    Ox.Select({
                                        items: [
                                            {id: "items", title: "items"},
                                            {},
                                            {id: "hours", title: "hours"},
                                            {id: "days", title: "days"},
                                            {},
                                            {id: "GB", title: "GB"},
                                        ],
                                        overlap: "left",
                                        width: 64
                                    }),
                                ],
                                float: "right",
                                width: 128
                            }),
                            Ox.Select({
                                items: [
                                    {id: "title", title: "Title"},
                                    {id: "director", title: "Director"},
                                ],
                                value: 'title',
                                width: 128
                            })
                        ],
                        separators: [
                            {title: 'Limit to', width: 64},
                            {title: 'sorted by', width: 64}
                        ],
                        //width: 480
                    },
                    title: "bar"
                }
            ],
            "Label": [
                {
                    options: {
                        title: "Title"
                    },
                    title: "Label"
                },
                {
                    options: {
                        disabled: true,
                        title: "Title"
                    },
                    title: "Disabled Label"
                },
                {
                    options: {
                        title: "Title",
                        width: 128
                    },
                    title: "Label with Width"
                },
                {
                    options: {
                        textAlign: "right",
                        title: "Title",
                        width: 128
                    },
                    title: "Right-Aligned Label"
                }
            ],
            "PlaceInput": [
                {
                    options: {
                        id: "placeInput"
                    },
                    title: "PlaceInput"
                }
            ],
            "Range": [
                {
                    options: {
                        id: "range"
                    },
                    title: "Range"
                },
                {
                    options: {
                        arrows: true,
                        id: "rangeArrows"
                    },
                    title: "Range with Arrows"
                },
                {
                    options: {
                        arrows: true,
                        id: "rangeThumbValue",
                        max: 10,
                        min: 0,
                        thumbSize: 32,
                        thumbValue: true,
                    },
                    title: "Range with Thumb Value"
                },
                {
                    options: {
                        id: "rangeValueNames",
                        max: 1,
                        min: 0,
                        size: 48,
                        thumbSize: 32,
                        thumbValue: true,
                        values: ["Off", "On"]
                    },
                    title: "Range with Values"
                },
                {
                    options: {
                        id: "rangeTrackColors",
                        size: 360,
                        thumbValue: true,
                        trackColors: [
                            "rgb(255, 0, 0)",
                            "rgb(255, 255, 0)",
                            "rgb(0, 255, 0)",
                            "rgb(0, 255, 255)",
                            "rgb(0, 0, 255)",
                            "rgb(255, 0, 255)"
                        ],
                        values: ['Red', 'Yellow', 'Green', 'Cyan', 'Blue', 'Magenta']
                    },
                    title: "Range with Track Colors"
                },
                {
                    options: {
                        id: "rangeTrackGradientColor",
                        max: 359,
                        min: 0,
                        size: 360,
                        thumbSize: 36,
                        thumbValue: true,
                        trackColors: [
                            "rgb(255, 0, 0)",
                            "rgb(255, 255, 0)",
                            "rgb(0, 255, 0)",
                            "rgb(0, 255, 255)",
                            "rgb(0, 0, 255)",
                            "rgb(255, 0, 255)",
                            "rgb(255, 0, 0)"
                        ],
                        trackGradient: true
                    },
                    title: "Range with Track Gradient"
                },
                {
                    options: {
                        id: "rangeTrackGradient",
                        max: 255,
                        min: 0,
                        size: 360,
                        thumbSize: 36,
                        thumbValue: true,
                        trackColors: [
                            "rgb(0, 0, 0)",
                            "rgb(255, 255, 255)"
                        ],
                        trackGradient: true
                    },
                    title: "Range with Track Gradient"
                },
                {
                    options: {
                        id: "rangeTrackImage",
                        size: 360,
                        trackImages: ["png/timeline.png"]
                    },
                    title: "Range with Track Image"
                },
                {
                    options: {
                        id: "rangeTrackImages",
                        max: 9,
                        size: 240,
                        thumbStyle: 'transparent',
                        trackImages: [
                            "jpg/Children's Games.jpg",
                            "jpg/Dulle Griet.jpg",
                            "jpg/Landscape with the Fall of Icarus.jpg",
                            "jpg/Netherlandish Proverbs.jpg",
                            "jpg/The Fight Between Carnival and Lent.jpg",
                            "jpg/The Hunters in the Snow.jpg",
                            "jpg/The Procession to Calvary.jpg",
                            "jpg/The Tower of Babel.jpg",
                            "jpg/The Triumph of Death.jpg",
                            "jpg/Winter Landscape with a Bird Trap.jpg",
                        ]
                    },
                    title: "Range with Track Images"
                },
            ],
            "Select": [
                {
                    options: {
                        id: 'simpleSelect',
                        items: ['foo', 'bar', 'baz']
                    },
                    title: 'Simple Select'
                },
                {
                    options: {
                        id: "imageSelectOne",
                        items: [
                            {id: "one", title: "select me"},
                            {id: "two", title: "or select me"},
                            {id: "three", title: "or select me"}
                        ],
                        type: "image"
                    },
                    title: "Image Select, select one"
                },
                {
                    options: {
                        id: "imageSelectTwo",
                        items: [
                            {id: "one", title: "select me"},
                            {id: "two", title: "or select me"},
                            {id: "three", title: "or select me"}
                        ],
                        max: 2,
                        min: 2,
                        type: "image"
                    },
                    title: "Image Select, select two"
                },
                {
                    options: {
                        id: "imageSelectAny",
                        items: [
                            {id: "one", title: "select me"},
                            {id: "two", title: "and select me"},
                            {id: "three", title: "and select me"}
                        ],
                        max: -1,
                        min: 0,
                        type: "image"
                    },
                    title: "Image Select, select any"
                },
                {
                    options: {
                        id: "textSelectOne",
                        items: [
                            {id: "one", title: "Item One"},
                            {id: "two", title: "Item Two"},
                            {id: "three", title: "Item Three"}
                        ]
                    },
                    title: "Text Select, select one"
                },
                {
                    options: {
                        id: "textSelectAny",
                        items: [
                            {id: "one", title: "Item One"},
                            {id: "two", title: "Item Two"},
                            {id: "three", title: "Item Three"}
                        ],
                        max: -1,
                        min: 0,
                        title: "Title..."
                    },
                    title: "Text Select, select any"
                },
                {
                    options: {
                        id: "textSelectWidth",
                        items: [
                            {id: "one", title: "Item One"},
                            {id: "two", title: "Item Two"},
                            {id: "three", title: "Item Three Has a Long Title"}
                        ],
                        width: 128
                    },
                    title: "Text Select with Width"
                },
                {
                    options: {
                        id: "textSelectMaxWidth",
                        items: [
                            {id: "one", title: "Item One"},
                            {id: "two", title: "Item Two"},
                            {id: "three", title: "Item Three Has a Long Title"}
                        ],
                        maxWidth: 128,
                        width: 128
                    },
                    title: "Text Select with Max Width"
                }
            ],
            'SelectInput': [
                {
                    options: {
                        id: 'selectInput',
                        items: [
                            {id: 'male', title: 'Male'},
                            {id: 'female', title: 'Female'},
                            {id: 'other', title: 'Other...'}
                        ],
                        width: 256
                    },
                    title: 'SelectInput'
                }
            ],
            "TimeInput": [
                {
                    options: {
                        id: "timeInput",
                        //width: 72
                    },
                    title: "TimeInput"
                },
                {
                    options: {
                        id: "timeInputSeconds",
                        seconds: true,
                        //width: 112
                    },
                    title: "TimeInput with Seconds"
                },
                {
                    options: {
                        id: "timeInputMilliseconds",
                        milliseconds: true,
                        //width: 168
                    },
                    title: "TimeInput with Milliseconds"
                },
                {
                    options: {
                        ampm: true,
                        id: "timeInputAmPm",
                        seconds: true,
                        //width: 152
                    },
                    title: "TimeInput with am/pm"
                },
                {
                    options: {
                        id: "timeInputValue",
                        seconds: true,
                        value: "23:59:59",
                        //width: 112
                    },
                    title: "TimeInput with Value"
                }
            ]
        };

    $.each(objects, function(object, elements) {
        var $div = $("<div>").appendTo($panel);
        new Ox.Label({
                title: "Ox." + object,
                width: 840
            })
            .addClass("margin")
            .appendTo($div);
        $("<br clear=\"both\">").appendTo($panel);
        // if (object != "PlaceInput") return;
        $.each(elements, function(i, element) {
            var $div = $("<div>").appendTo($panel),
                $label, $element;
            $label = Ox.Label({
                    textAlign: "right",
                    title: element.title,
                    width: 256
                })
                .addClass("margin")
                .appendTo($div);
            try {
                $label.attr({
                    title: "Ox." + object + "(" + JSON.stringify(element.options) + ")"
                });
            } catch(error) {
                
            }
            Ox.Button({
                    title: 'Options'
                })
                .addClass("margin")
                .bindEvent({
                    click: function() {
                        var $dialog = Ox.Dialog({
                            buttons: [
                                Ox.Button({
                                    id: 'close',
                                    title: 'Close'
                                }).bindEvent({
                                    click: function() { $dialog.close(); }
                                })
                            ],
                            content: $('<div>')
                                .css({margin: '16px'})
                                .html(
                                    JSON.stringify(Ox.map($element.options(), function(val, key) {
                                        return Ox.isEqual(val, $element.defaults(key)) ? null : val;
                                    }), void 0, 4)
                                        .replace(/\n/g, '<br/>')
                                        .replace(/\s/g, '&nbsp;')
                                ),
                            height: 256,
                            title: "Options",
                            width: 384
                        }).open()
                    }
                })
                .appendTo($div);
            $element = Ox[object](element.options)
                .addClass("margin")
                .appendTo($div);
            if (object != "Button" && object != "Label") {
                Ox.Button({
                        id: "id" + Ox.uid(),
                        title: "Value"
                    })
                    .addClass("margin")
                    .bindEvent("click", function() {
                        var value = $element.options("value"),
                            $dialog = Ox.Dialog({
                                buttons: [
                                    Ox.Button({
                                        id: 'close',
                                        title: 'Close'
                                    }).bindEvent({
                                        click: function() { $dialog.close(); }
                                    })
                                ],
                                content: $('<div>')
                                    .css({margin: '16px'})
                                    .html(
                                        Ox.isUndefined(value)
                                            ? "undefined"
                                            : JSON.stringify(value, void 0, 4)
                                                .replace(/\n/g, '<br/>')
                                                .replace(/\s/g, '&nbsp;')
                                        ),
                                height: 256,
                                title: "Value",
                                width: 384
                            })
                            .open();
                    })
                    .appendTo($div);
            }
            $("<br clear=\"both\">").appendTo($panel);
        });
    });

    $("<div>")
        .css({
            height: "256px"
        })
        .appendTo($panel);

});