$(function() {
    var button = new Ox.Button({
                value: "First",
            }).css({
                position: "absolute",
                left: "16px",
                top: "16px",
                width: "64px",
                textAlign: "left"
            }).appendTo($("body")),
        menu = new Ox.Menu({
                element: button,
                id: "select",
                items: [
                    {
                        checked: true,
                        group: "123",
                        id: "first",
                        title: "First"
                    },
                    {
                        checked: false,
                        group: "123",
                        id: "second",
                        title: "Second"
                    },
                    {
                        checked: false,
                        group: "123",
                        id: "third",
                        title: "Third"
                    },
                    {},
                    {
                        checked: false,
                        group: "123",
                        id: "fourth",
                        title: "Fourth"
                    },
                    {
                        checked: false,
                        disabled: true,
                        group: "123",
                        id: "fifth",
                        title: "Fifth"
                    },
                    {
                        checked: false,
                        group: "123",
                        id: "sixth",
                        title: "Sixth"
                    },
                    {},
                    {
                        id: "more",
                        items: [
                            {
                                checked: true,
                                group: "789",
                                id: "seventh",
                                title: "Seventh"
                            },
                            {
                                checked: false,
                                group: "789",
                                id: "eighth",
                                title: "Eighth"
                            },
                            {
                                checked: false,
                                group: "789",
                                id: "ninth",
                                title: "Ninth"
                            },
                        ],
                        title: "More",
                    },
                    {
                        id: "even_more",
                        items: [
                            {
                                checked: true,
                                group: "101112",
                                id: "tenth",
                                title: "Tenth"
                            },
                            {
                                checked: false,
                                group: "101112",
                                id: "eleventh",
                                title: "Eleventh"
                            },
                            {
                                checked: false,
                                group: "101112",
                                id: "twelfth",
                                title: "Twelfth"
                            },
                        ],
                        title: "Even More"
                    },
                    {
                        id: "nothing_more",
                        items: [
                            {
                                disabled: true,
                                id: "nothing",
                                title: "Nothing"
                            }
                        ],
                        title: "Nothing More"
                    },
                    {},
                    {
                        id: "foo",
                        title: "Foo"
                    },
                    {
                        id: "bar",
                        title: "Bar"
                    },
                    {
                        id: "baz",
                        title: "Baz"
                    }
                ]
            });
        button
            .click(function() {
                $(this).blur(); // fix for firefox
                menu.toggleMenu();
            })
            .bindEvent("OxClickMenu." + menu.id, function(event, data) {
                button.options({
                    value: data.value
                });
            });
        $select = $("<select>")
            .css({
                position: "absolute",
                left: "160px",
                top: "16px"
            })
            .appendTo($("body"));
        $.each(["First", "Second", "Third"], function(i, v) {
            $select.append(
                $("<option>").html(v)
            );
        });
});