oxjs/demos/form2/js/form.js

$(function() {

    var $body = $("body"),
        $panel = $("<div>")
            .attr({
                id: "panel"
            })
            .appendTo($body),
        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: {
                        title: [
                            {id: "one", title: "expand"},
                            {id: "two", title: "collapse"},
                        ],
                        type: "image"
                    },
                    title: "Multi-Title Image Button"
                },
                {
                    options: {
                        selectable: true,
                        title: [
                            {id: "off", title: "Off"},
                            {id: "on", title: "On"},
                        ],
                        width: 32
                    },
                    title: "Multi-Title Selectable Text Button"
                }
            ],
            "ButtonGroup": [
                {
                    options: {
                        buttons: [
                            { id: "", title: "close" },
                            { id: "", title: "remove" },
                            { id: "", title: "add" },
                            { id: "", title: "check" },
                            { id: "", title: "edit" },
                            { id: "", title: "find" },
                            { id: "", title: "select" },
                            { id: "", title: "unlock" },
                            { id: "", title: "lock" },
                            { id: "", title: "previous" },
                            { id: "", title: "next" },
                            { id: "", title: "above" },
                            { id: "", title: "below" },
                            { id: "", title: "play" },
                            { id: "", title: "pause" },
                            { id: "", title: "mute" },
                            { id: "", title: "volume" },
                            { id: "", title: "unmute" },
                            { id: "", title: "expand" },
                            { id: "", title: "collapse" },
                            { id: "", title: "info" },
                            { id: "", title: "help" },
                            { id: "", title: "warning" },
                            { id: "", title: "user" },
                            { id: "", title: "location" },
                            { id: "", title: "date" },
                            { id: "", title: "time" },
                        ],
                        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
                    },
                    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: {},
                    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,
                        width: 300
                    },
                    title: "CheckboxGroup, select any"
                },
            ],
            "ColorInput": [
                {
                    options: {
                        id: "colorInput",
                        value: "255, 0, 0"
                    },
                    title: "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: {
                        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: [
                            new Ox.Label({
                                title: "Match",
                                overlap: "right",
                            }),
                            new Ox.Select({
                                id: "select_",
                                items: [
                                    {id: "all", title: "all"},
                                    {id: "any", title: "any"},
                                ],
                                overlap: "right",
                                width: 48
                            }),
                            new Ox.Label({
                                title: "of the following conditions",
                            }),
                        ],
                        float: "left",
                        id: "formElementGroupLabels"
                    },
                    title: "foo"
                },
                {
                    options: {
                        elements: [
                            new Ox.Select({
                                id: "selectOne",
                                items: [
                                    {id: "one", title: "Title"},
                                    {id: "two", title: "Date"},
                                    {id: "three", title: "Place"}
                                ],
                                overlap: "right",
                                width: 128
                            }),
                            new Ox.Select({
                                id: "selectTwo",
                                items: [
                                    {id: "one", title: "is"},
                                    {id: "two", title: "is between"},
                                    {id: "three", title: "is not between"}
                                ],
                                overlap: "right",
                                width: 128
                            }),
                            new Ox.InputGroup({
                                id: "input",
                                inputs: [
                                    new Ox.DateInput({
                                        id: "inputOne",
                                        width: {
                                            day: 36,
                                            month: 36,
                                            year: 56
                                        }
                                    }),
                                    new Ox.DateInput({
                                        id: "inputTwo",
                                        width: {
                                            day: 36,
                                            month: 36,
                                            year: 56
                                        }
                                    }),
                                ],
                                separators: [
                                    {title: "and", width: 32}
                                ]
                            })
                        ],
                        id: "formElementGroupSelectSelectInput"
                    },
                    title: "FormElementGroup (two Selects, one Input)"
                }
            ],
            "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: {
                        type: "float"
                    },
                    title: "Float Input (0.0 - 100.0)"
                },
                {
                    options: {
                        max: 255,
                        type: "integer"
                    },
                    title: "Integer Input (0 - 255)"
                },
                {
                    options: {
                        clear: true,
                        id: "integerClear",
                        max: 255,
                        type: "integer"
                    },
                    title: "Integer Input with Clear Button"
                },
                {
                    options: {
                        arrows: true,
                        id: "integerArrows",
                        max: 255,
                        type: "integer"
                    },
                    title: "Integer Input with Arrows"
                },
                {
                    options: {
                        autocomplete: $.map(Ox.getCountries(), function(v, i) {
                            return v.name;
                        }),
                        autocompleteReplace: true,
                        id: "autocompleteReplace"
                    },
                    title: "Autocomplete with Replace"
                },
                {
                    options: {
                        autocomplete: $.map(Ox.getCountries(), function(v, i) {
                            return v.name;
                        }),
                        autocompleteReplace: true,
                        autocompleteReplaceCorrect: true,
                        id: "autocompleteReplaceCorrect"
                    },
                    title: "Autocomplete with Replace and Correct"
                },
                {
                    options: {
                        autocomplete: $.map(Ox.getCountries(), function(v, i) {
                            return v.name;
                        }),
                        autocompleteSelect: true,
                        autocompleteSelectHighlight: true,
                        id: "autocompleteSelect"
                    },
                    title: "Autocomplete with Select"
                },
                {
                    options: {
                        autocomplete: $.map(Ox.getCountries(), function(v, i) {
                            return v.name;
                        }),
                        autocompleteReplace: true,
                        autocompleteSelect: true,
                        autocompleteSelectHighlight: true,
                        id: "autocompleteReplaceSelect"
                    },
                    title: "Autocomplete with Replace and Select"
                },
                {
                    options: {
                        autocomplete: $.map(Ox.getCountries(), function(v, i) {
                            return v.name;
                        }),
                        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: "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}
                        ]
                    }
                },
                {
                    options: {
                        id: 'debug',
                        inputs: [
                            new Ox.Checkbox({
                                id: 'tttt',
                                width: 16
                            }),
                            new Ox.FormElementGroup({
                                elements: [
                                    new Ox.Input({
                                        //overlap: "right",
                                        width: 64
                                    }),
                                    new 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
                            }),
                            new Ox.Select({
                                items: [
                                    {id: "title", title: "Title"},
                                    {id: "director", title: "Director"},
                                ],
                                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,
                        valueNames: ["Off", "On"]
                    },
                    title: "Range with Value Names"
                },
                {
                    options: {
                        id: "rangeTrackColors",
                        max: 255,
                        min: 0,
                        size: 400,
                        thumbSize: 40,
                        thumbValue: true,
                        trackColors: [
                            "rgb(0, 0, 0)",
                            "rgb(255, 255, 255)"
                        ],
                    },
                    title: "Range with Track Colors"
                },
                {
                    options: {
                        id: "rangeTrackColorsColor",
                        max: 359,
                        min: 0,
                        size: 400,
                        thumbSize: 40,
                        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)"
                        ]
                    },
                    title: "Range with Track Colors"
                },
                {
                    options: {
                        id: "rangeTrackImage",
                        size: 400,
                        trackImages: ["png/timeline.png"]
                    },
                    title: "Range with Track Image"
                },
                {
                    options: {
                        id: "rangeTrackImages",
                        max: 5,
                        size: 386,
                        thumbValue: true,
                        trackImages: [
                            "png/red.png",
                            "png/yellow.png",
                            "png/green.png",
                            "png/cyan.png",
                            "png/blue.png",
                            "png/magenta.png"
                        ],
                        valueNames: ["Red", "Yellow", "Green", "Cyan", "Blue", "Magenta"]
                    },
                    title: "Range with Track Images"
                },
                {
                    options: {
                        id: "rangeTrackImages",
                        max: 9,
                        size: 240,
                        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: "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: "textSelectNone",
                        items: [
                            {id: "one", title: "Item One"},
                            {id: "two", title: "Item Two"},
                            {id: "three", title: "Item Three"}
                        ],
                        selectable: false,
                        title: "Title..."
                    },
                    title: "Text Select, select none"
                },
                {
                    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"
                }
            ],
            "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: "00:00:00",
                        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, $button;
            $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) {
                
            }
            $element = new Ox[object](element.options)
                .addClass("margin")
                .appendTo($div);
            if (object != "Button" && object != "Label") {
                $button = new Ox.Button({
                        id: "id" + Ox.uid(),
                        title: "Value"
                    })
                    .addClass("margin")
                    .bindEvent("click", function() {
                        var value = $element.options("value"),
                            $dialog = new Ox.Dialog({
                                buttons: [
                                    new Ox.Button({
                                        id: 'close',
                                        title: 'Close'
                                    }).bindEvent({
                                        click: function() { $dialog.close(); }
                                    })
                                ],
                                content: Ox.isUndefined(value) ? "undefined" : value,
                                height: 128,
                                id: "value",
                                title: "Value",
                                width: 256
                            })
                            .open();
                    })
                    .appendTo($div);
            }
            $("<br clear=\"both\">").appendTo($panel);
        });
    });

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

});