<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
        <style>
            input {
                //float: left;
                //margin: 4px 0 4px 0;
            }
            .top {
                margin: 4px;
                font-family: Monaco, Consolas;
                font-size: 16px;
                line-height: 16px;
            }
            .bottom {
                margin: 7px;
                font-family: Monaco, Consolas;
                font-size: 10px;
                line-height: 10px;
            }
            .margin {
                float: left;
                margin: 4px 2px 4px 2px;
            }
            .padding {
                float: left;
                margin: 4px 0 4px 0;
                padding: 0 4px 0 4px;
            }
        </style>
        <script type="text/javascript" src="../../build/js/jquery-1.4.js"></script>
        <script type="text/javascript" src="../../build/js/ox.js"></script>
        <script type="text/javascript" src="../../build/js/ox.ui.js"></script>
        <script>
            $(function() {
                var size = window.location.hash.substr(1) || "medium",
                    $body = $("body"),
                    $toolbars = [];

                var sidePanel = new Ox.Panel();
                var mainPanel = new Ox.Panel().css({
                    //borderLeft: "1px solid rgb(160, 160, 160)"
                });
                var middleSplitPanel = Ox.SplitPanel({
                    elements: [
                        {
                            element: sidePanel,
                            size: 256
                        },
                        {
                            element: mainPanel
                        }
                    ],
                    orientation: "horizontal"
                })/*.css({
                    borderTop: "1px solid rgb(160, 160, 160)",
                    borderBottom: "1px solid rgb(160, 160, 160)"
                })*/;

                var loadingIcon = new Ox.LoadingIcon({
                        size: "medium"
                    })
                    .css({
                        marginLeft: "4px"
                    });

                var mainMenu = new Ox.MainMenu({
                    extras: [
                        new Ox.Input({
                            autocomplete: {
                                "Find: All": [],
                                "Find: Title": [
                                    "A bout de souffle",
                                    "Casino",
                                    "Diaries, Notes and Sketches",
                                    "L'age d'or",
                                    "Far From Heaven",
                                    "In girum imus nocte et consumimur igni",
                                    "It Felt Like a Kiss",
                                    "Mulholland Dr.",
                                    "Querelle",
                                    "Vertigo"
                                ],
                                "Find: Director": [
                                    "Luis Buñuel",
                                    "Adam Curtis",
                                    "Guy Debord",
                                    "Rainer Werner Fassbinder",
                                    "Jean-Luc Godard",
                                    "Todd Haynes",
                                    "Alfred Hitchcock",
                                    "David Lynch",
                                    "Jonas Mekas",
                                    "Martin Scorsese"
                                ],
                                "Find: Country": [
                                    "Austria",
                                    "Canada",
                                    "France",
                                    "Germany",
                                    "Italy",
                                    "Japan",
                                    "Spain",
                                    "Switzerland",
                                    "UK",
                                    "USA"
                                ],
                                "Find: Cinematographer": []
                            },
                            clear: true,
                            highlight: false,
                            id: "find",
                            label: ["Find: All", "Find: Title", "Find: Director", "Find: Country", "Find: Cinematographer"],
                            labelWidth: 96
                        }).width(320),
                        loadingIcon
                    ],
                    menus: [
                        {
                            id: "oxjs",
                            title: "Oxjs",
                            items: [
                                { id: "about", title: "About" },
                                {},
                                { id: "contact", title: "Contact"}
                            ]
                        },
                        {
                            id: "user",
                            title: "User",
                            items: [
                                { disabled: true, id: "user", title: "User: not logged in"},
                                {},
                                { id: "login", title: "Login" }
                            ]
                        },
                        {
                            id: "file",
                            title: "File",
                            items: [
                                { id: "load", keyboard: "control o", title: "Open" },
                                { id: "save", keyboard: "control a", title: "Save" },
                                { id: "save_as", keyboard: "shift control s", title: "Save As..."}
                            ]
                        },
                        {
                            id: "edit",
                            title: "Edit",
                            items: [
                                { id: "undo", keyboard: "control z", title: "Undo" },
                                { id: "redo", keyboard: "shift control z", title: "Redo" },
                                {},
                                { id: "cut", keyboard: "control x", title: "Cut" },
                                { id: "copy", keyboard: "control c", title: "Copy" },
                                { id: "paste", keyboard: "control v", title: "Paste"},
                                { id: "delete", keyboard: "delete", title: "Delete"},
                                {},
                                { id: "select_all", keyboard: "control a", title: "Select All" },
                                { id: "select_none", keyboard: "shift control a", title: "Select None" },
                                { id: "invert_selection", keyboard: "alt control a", title: "Invert Selection" },
                            ]
                        },
                        {
                            id: "sort",
                            title: "Sort",
                            items: [
                                { id: "sort_movies", title: "Sort Movies by", items: [
                                    { checked: true, group: "sort_movies", id: "title", title: "Title"},
                                    { checked: false, group: "sort_movies", id: "director", title: "Director" },
                                ] },
                                { id: "order_movies", title: "Order Movies", items: [
                                    { checked: false, group: "order_movies", id: "ascending", title: "Ascending"},
                                    { checked: true, group: "order_movies", id: "descending", title: "Descending" },
                                ] }
                            ]
                        },
                        {
                            id: "help",
                            title: "Help",
                            items: [
                                { id: "help", keyboard: "control h", title: "Help" }
                            ]
                        }
                    ],
                    size: "large"
                });
                Ox.Event.bind(null, "submit_find", function(data) {
                    loadingIcon.start();
                    setTimeout(function() {
                        loadingIcon.stop();
                    }, 5000);
                });

                var loginDialog = new Ox.Dialog({
                    buttons: [
                        [
                            { value: "Register", click: function() { loginDialog.close(); } },
                            { value: "Reset Password", click: function() { loginDialog.close(); } }
                        ],
                        [
                            { value: "Cancel", click: function() { loginDialog.close(); } },
                            { value: "Login", click: function() { loginDialog.close(); } }
                        ]
                    ],
                    title: "Login"
                });

                Ox.Event.bind(null, "click_login", function() {
                    loginDialog.open();
                });

                var bottomPanel = Ox.Bar({size: "small"})
                    .css({
                        zIndex: 2,
                        MozBoxShadow: "0 0 4px rgb(0, 0, 0)",
                        WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)"
                    })
                    .append(
                        $("<div/>")
                            .addClass("bottom")
                            .html("Ox.js - A JavaScript Library for Web Applications")
                    );
                var mainSplitPanel = Ox.SplitPanel({
                    elements: [
                        {
                            element: mainMenu,
                            size: 24
                        },
                        {
                            element: middleSplitPanel
                        },
                        {
                            element: bottomPanel,
                            size: 24
                        }
                    ],
                    orientation: "vertical"
                }).appendTo($body);

                var oxjsPanel = new Ox.CollapsePanel({
                    title: "ox.js"
                }).appendTo(sidePanel);
                oxjsPanel.$content.html("Core<br/>Array/Object<br/>Color<br/>Date<br/>Format<br/>Math<br/>String<br/>Type").click(function() {$(this).append("<div>foo</div>")})
                var oxdatajsPanel = new Ox.CollapsePanel({
                    title: "ox.data.js"
                }).appendTo(sidePanel);
                oxdatajsPanel.$content.html("HTML<br/>ISO<br/>Unicode")
                var oxuijsPanel = new Ox.CollapsePanel({
                    title: "ox.ui.js"
                }).appendTo(sidePanel);
                oxuijsPanel.$content.html("Core<br/>Bars<br/>Forms<br/>Panels")

                $tabbar = new Ox.Tabbar({
                    selected: 0, // fixme: should not be necessary
                    tabs: [
                        { id: "documentation", value: "Documentation" },
                        { id: "demo", value: "Demo" },
                        { id: "source_code", value: "Source Code" }
                    ]
                }).appendTo(mainPanel);

                for (var i = 0; i < 5; i++) {
                    $toolbars[i] = Ox.Bar({size: i ? "medium" : "large"}).appendTo(mainPanel);
                }
                $toolbars[5] = Ox.Bar({size: 24}).appendTo(mainPanel);

                Ox.Button({
                    size: "large",
                    type: "text",
                    value: "Switch Theme"
                }).addClass("margin").click(switchTheme).appendTo($toolbars[0]);
                Ox.Button({
                    size: "large",
                    type: "text",
                    value: "Open Dialog"
                }).addClass("margin").click(openDialog).appendTo($toolbars[0]);
                Ox.Button({
                    size: size,
                    type: "text",
                    value: "Button"
                }).addClass("margin").appendTo($toolbars[1]);
                ///*
                Ox.Button({
                    size: "small",
                    type: "text",
                    value: ['Button, value=["foo", "bar"] (foo)', 'Button, value=["foo", "bar"] (bar)']
                }).addClass("margin").css({width: "256px"}).appendTo($toolbars[1]);
                //*/
                Ox.Button({
                    selectable: true,
                    size: size,
                    type: "text",
                    value: "Button, selectable=true"
                }).addClass("margin").appendTo($toolbars[1]);
                Ox.ButtonGroup({
                    buttons: [
                        { id: "buttongroup0", value: "Button Group (0)" },
                        { id: "buttongroup1", value: "Button Group (1)" },
                        { id: "buttongroup2", value: "Button Group (2)" }
                    ]
                }).addClass("padding").appendTo($toolbars[1]);
                $.each(["close", "add", "remove", ["play", "pause"]], function(i, v) {
                    Ox.Button({
                            size: size,
                            type: "image",
                            value: v
                        })
                        .addClass("margin")
                        .mousedown(function() {
                            clickButton($(this).val())
                        })
                        .appendTo($toolbars[2]);
                });
                ///*
                Ox.Button({
                    size: size,
                    type: "text",
                    value: "Enabled"
                }).addClass("margin").appendTo($toolbars[2]);
                Ox.Button({
                    disabled: true,
                    size: size,
                    type: "text",
                    value: "Disabled"
                }).addClass("margin").appendTo($toolbars[2]);
                //*/
                Ox.ButtonGroup({
                    buttons: [
                        { id: "close", value: "close" },
                        { id: "add", value: "add" },
                        { id: "remove", value: "remove" }
                    ],
                    selectable: true,
                    selected: 0,
                    size: "medium",
                    type: "image",
                }).addClass("padding").appendTo($toolbars[2]);
                ///*
                Ox.Input({
                    placeholder: "Placeholder",
                    size: size
                }).addClass("margin").appendTo($toolbars[3]);
                Ox.Input({
                    label: "Label",
                    labelWidth: 48,
                    size: size
                }).addClass("margin").appendTo($toolbars[3]);
                var range = Ox.Range({
                    max: 10,
                    min: 0,
                    size: 200,
                    step: 0.1,
                    value: 0
                }).addClass("margin").appendTo($toolbars[4])
                var input = Ox.Input({
                        value: 0
                    })
                    .addClass("margin")
                    .css({
                        width: "32px"
                    })
                    .bindEvent("change." + range.id, update)
                    .appendTo($toolbars[4]);
                function update() {
                    //Ox.print("update", range.options("value"))
                    /*
                    // fixme: make this work
                    input.options({
                        value: range.options("value")
                    });
                    */
                    input.val(range.options("value").toFixed(1))
                }
                //Ox.print("binding to OxRange" + range.id + "Change")
                Ox.Range({
                    animate: true,
                    arrows: true,
                    max: 300,
                    min: 100,
                    size: 202,
                    step: 100,
                    thumbValue: true,
                    trackImages: ["png/r.png", "png/g.png", "png/b.png"],
                    value: 100
                }).addClass("margin").appendTo($toolbars[4])
                Ox.Button({
                    selectable: true,
                    size: size,
                    type: "text",
                    value: "Foo"
                }).addClass("margin").appendTo(mainPanel);
                Ox.Button({
                    selectable: true,
                    size: size,
                    type: "text",
                    value: "Bar"
                }).addClass("margin").appendTo(mainPanel);
                Ox.Select({
                    id: "select1",
                    items: [
                        {
                            checked: true,
                            id: "one",
                            title: "One"
                        },
                        {
                            id: "two",
                            title: "Two"
                        },
                        {
                            id: "three",
                            title: "Three"
                        }
                    ]
                }).addClass("margin").width(96).appendTo(mainPanel);
                Ox.Select({
                    id: "select2",
                    items: [
                        {
                            checked: true,
                            id: "four",
                            title: "Four"
                        },
                        {
                            id: "five",
                            title: "Five"
                        },
                        {
                            id: "six",
                            title: "Six"
                        }
                    ]
                }).addClass("margin").width(96).appendTo(mainPanel);
                Ox.Button({
                    selectable: true,
                    size: size,
                    type: "text",
                    value: "Foo"
                }).addClass("margin").appendTo(mainPanel);
                Ox.Button({
                    selectable: true,
                    size: size,
                    type: "text",
                    value: "Bar"
                }).addClass("margin").appendTo(mainPanel);
                Ox.Input({
                    autocomplete: {
                        City: [
                            "Albuquerque",
                            "Austin",
                            "Baltimore",
                            "Boston",
                            "Chicago",
                            "Cleveland",
                            "Dallas",
                            "Denver",
                            "Detroit",
                            "El Paso",
                            "Honululu",
                            "Houston",
                            "Kansas City",
                            "Las Vegas",
                            "Los Angeles",
                            "Memphis",
                            "Miami",
                            "Minneapolis",
                            "Nashville",
                            "New Orleans",
                            "New York",
                            "Oklahoma City",
                            "Philadelphia",
                            "Phoenix",
                            "Pittsburgh",
                            "Portland",
                            "San Antonio",
                            "San Diego",
                            "San Francisco",
                            "St. Louis",
                            "St. Paul",
                            "Seattle",
                            "Washington"
                        ],
                        State: [
                            "Alabama", "Alaska", "Arizona", "Arkansas", "California",
                            "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida",
                            "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana",
                            "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine",
                            "Maryland", "Massachusetts", "Michigan", "Minnessota", "Mississippi",
                            "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire",
                            "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota",
                            "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island",
                            "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah",
                            "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin",
                            "Wyoming"
                        ]
                    },
                    clear: false,
                    highlight: true,
                    id: "citystate",
                    placeholder: ["City", "State"],
                    selected: 1
                }).addClass("margin").width(160).appendTo(mainPanel);
                Ox.Button({
                    selectable: true,
                    size: size,
                    type: "text",
                    value: "Foo"
                }).addClass("margin").appendTo(mainPanel);
                Ox.Button({
                    selectable: true,
                    size: size,
                    type: "text",
                    value: "Bar"
                }).addClass("margin").appendTo(mainPanel);
                $("<br>").appendTo(mainPanel.$element);
                $("<br>").appendTo(mainPanel.$element);
                Ox.Input({
                    label: "Label"
                }).width(400).addClass("margin").appendTo(mainPanel);
                $("<br>").appendTo(mainPanel.$element);
                $("<br>").appendTo(mainPanel.$element);
                Ox.Input({
                    label: "Label",
                    //placeholder: "some\ntext",
                    type: "textarea"
                }).width(400).height(100).addClass("margin").appendTo(mainPanel);
                $("<br>").attr({clear: "all"}).appendTo(mainPanel.$element);
                Ox.Select({
                    id: "selectLabel",
                    items: [
                        {
                            checked: true,
                            id: "label1",
                            title: "Label 1"
                        },
                        {
                            id: "label2",
                            title: "Label 2"
                        },
                        {
                            id: "label3",
                            title: "Label 3"
                        }
                    ]
                }).addClass("margin").width(104).appendTo(mainPanel);
                Ox.Input().width(200).addClass("margin").appendTo(mainPanel);
                $("<br>").attr({clear: "all"}).appendTo(mainPanel.$element);
                Ox.Label({
                    title: "Label"
                }).width(100).addClass("margin").appendTo(mainPanel);
                Ox.Input().width(200).addClass("margin").appendTo(mainPanel);
                $("<br>").attr({clear: "all"}).appendTo(mainPanel.$element);
                Ox.Label({
                    title: "Label"
                }).width(100).addClass("margin").appendTo(mainPanel);
                Ox.Input({
                    type: "textarea"
                }).width(200).height(100).addClass("margin").appendTo(mainPanel);
                //*/
                function openDialog() {
                    var $dialog = new Ox.Dialog({
                            title: "Dialog",
                            buttons: [
                                {
                                    value: "Switch Theme",
                                    click: switchTheme
                                },
                                {
                                    value: "Close",
                                    click: function() {
                                        $dialog.close();
                                    }
                                }
                            ]
                        })
                        .append($.map(Ox.range(100), function(v, i) {
                            return "Line #" + (i + 1)
                        }).join("<br/>"))
                        .open();
                }
                function switchTheme() {
                    if (Ox.theme() == "classic") {
                        Ox.theme("modern");
                    } else {
                        Ox.theme("classic");
                    }
                }
                function clickButton(val) {
                   // Ox.print(val);
                }
            });
        </script>
    </head>
    <body></body>
</html>