pandora/static/js/ui.js

$(function() {
    Ox.initLoading();
    var pandora = new Ox.App({
            requestURL: "/api/"
        }),
        $dialog = new Ox.Dialog({
            title: "Application Error",
            buttons: [
                {
                    value: "Change Title",
                    click: function() {
                        Ox.print("click to change title")
                        $dialog.options({
                            title: "New Title"
                        });
                        $dialog.$buttons[0].toggleDisabled();
                    }
                },
                {
                    value: "Close",
                    click: function() {
                        $dialog.close();
                    }
                }
            ]
        });

    var user = {
        username: "",
        group: "guest", // guest / user / vip / admin
        prefs: {
            find: "all",
            groupMovies: "country",
            orderMovies: "ascending",
            orderGroups: "descending",
            showGroups: true,
            showInfo: true,
            showMovies: true,
            showSidebar: true,
            sortMovies: "director",
            sortGroups: "items",
            useOxdbPosters: false,
            useGroups: true,
            viewMovies: "list",
            viewIcons: "poster",
        }
    }

    Ox.Location.set("find", {
        s: user.prefs.sortMovies,
        o: user.prefs.orderMovies
    })

    var $body = $("body");
    var aspectRatio = 4 / 3;

    var foo = {
        id: "foo",
        title: ["Show Window", "Hide Window"],
        disabled: true,
        checked: false,
        group: "foo",
        shortcut: "ALT ESCAPE", // $(this).bind("OxKeyboardAltEscape", function() { $(this).trigger("click"); })
        click: function() {
            
        },
        bind: [
            ["OxUserLogin", function(e) {
                $(this).setTitle("User:" + e.user)
            }],
            ["OxResizeWindow", function() {
                $(this).toggleChecked();
                $(this).toggleDisabled();
                $(this).toggleTitle();
            }]
        ],
        trigger: true // $("*").trigger("OxMenuUserLogin") // or trigger({ "type: OxMenuGroupname", item: Item })
    }

    var m = [
        ["pandora", "Pandora", [
            ["about", "About Pandora", {
                click: loadPage
            }],
            [],
            ["faq", "Frequently Asked Questions", {
                click: loadPage
            }],
            ["tos", "Terms of Service", {
                click: loadPage
            }],
            ["sas", "Security Advisory System", {
                click: loadPage
            }],
            [],
            ["contact", "Contact", {
                click: loadPage
            }],
            [],
            ["technology", "Technology", {
                click: loadPage
            }],
            ["source", "Source Code", {
                click: loadPage
            }],
            ["report", "Report a Bug...", {
                click: loadPage
            }]
        ]],
        ["user", "User", [
            ["user", "User: not logged in", {
                disabled: true,
                bind: [
                    ["OxLogin", function() {
                        $(this).setTitle("User: " + e.username)
                    }],
                    ["OxLogout", function() {
                        $(this).toggleTitle();
                    }]
                ]
            }],
            [],
            ["account", "Account", {
                disabled: true,
                click: loadPage
            }],
            ["preferences", "Preferences", {
                disabled: true,
                shortcut: "CONTROL ,",
                click: loadPage
            }],
            [],
            ["login", ["Login", "Logout"], {
                click: loadDialog,
                bind: [
                    ["OxLogin", function() {
                        $(this).toggleTitle();
                    }],
                    ["OxLogout", function() {
                        $(this).toggleTitle();
                    }]
                ]
            }]
        ]],
        ["list", "List", [
            ["history", "History", [
                ["All Movies", "All Movies", {}]
            ]],
            ["viewFilter", "View Filter", [
                ["Most Viewed", "Most Viewed", {}],
                ["Recently Viewed", "Recently Viewed", {}]
            ]],
            ["viewList", "View List", [
                ["Favorites", "Favorites", {}]
            ]],
            ["viewFeature", "View Feature", [
                ["Situationist Film", "Situationist Film", {}],
                ["Timelines", "Timelines", {}],
            ]],
            [],
            ["newList", "New List...", {
                disabled: true,
                shortcut: "CONTROL N",
                click: loadDialog
            }],
            ["newListFromSelection", "New List from Selection...", {
                disabled: true,
                shortcut: "SHIFT CONTROL N",
                click: loadDialog
            }],
            ["newFilter", "New Filter...", {
                disabled: true,
                shortcut: "ALT CONTROL N",
                click: loadDialog
            }],
            [],
            ["add", "Add Selected Movie to List...", {
                disabled: true
            }],
            [],
            ["set", "Set Poster Frame", {
                disabled: true
            }]
        ]],
        ["edit", "Edit", [
            ["undo", "Undo", {
                disabled: true,
                shortcut: "CONTROL Z"
            }],
            ["redo", "Redo", {
                disabled: true,
                shortcut: "SHIFT CONTROL Z"
            }],
            [],
            ["cut", "Cut", {
                disabled: true,
                shortcut: "CONTROL X"
            }],
            ["copy", "Copy", {
                disabled: true,
                shortcut: "CONTROL C"
            }],
            ["paste", "Paste", {
                disabled: true,
                shortcut: "CONTROL V"
            }],
            ["delete", "Delete", {
                disabled: true,
                shortcut: "DELETE"
            }],
            [],
            ["all", "Select All", {
                disabled: true,
                shortcut: "CONTROL A"
            }],
            ["none", "Select None", {
                disabled: true,
                shortcut: "SHIFT CONTROL A"
            }],
            ["invert", "Invert Selection", {
                disabled: true,
                shortcut: "ALT CONTROL A"
            }],
        ]],
        ["view", "View", [
            ["movies", "View Movies", getMenuGroupItems("viewMovies", [
                "as List",
                "as Icons",
                "with Clips",
                "with Timelines",
                "with Maps",
                "",
                "as Scenes",
                "on Map",
                "on Calendar"
            ])],
            ["icons", "Icons", getMenuGroupItems("viewIcons", [
                "Poster",
                "Still",
                "Timeline"
            ])],
            ["info", "Info", getMenuGroupItems("viewInfo", [
                "Poster",
                "Video"
            ])],
            [],
            ["open", "Open Movie", [
                ["info", "Info", {
                    shortcut: "CONTROL RETURN"
                }],
                ["poster", "Statistics", {}],
                ["scenes", "Clips", {}],
                ["editor", "Timeline", {}],
                ["map", "Map", {}],
                ["calendar", "Calendar", {}],
                [],
                ["files", "Files", {}]
            ]],
            ["preview", "Preview", { shortcut: "CONTROL SPACE" }],
            [],
            ["toggleSidebar", ["Hide Sidebar", "Show Sidebar"], {
                shortcut: "SHIFT S"
            }],
            ["toggleInfo", ["Hide Info", "Show Info"], {
                shortcut: "SHIFT I"
            }],
            ["toggleGroups", ["Hide Groups", "Show Groups"], {
                shortcut: "SHIFT G"
            }],
            ["toggleMovies", ["Hide Movies", "show Movies"], {
                disabled: true,
                shortcut: "SHIFT M"
            }],
        ]],
        ["sort", "Sort", [
            ["sortMovies", "Sort Movies by", getMenuGroupItems("sortMovies", [
                "Title",
                "Director",
                "Country",
                "Year",
                "Runtime",
                "Language",
                "Writer",
                "Producer",
                "Cinematographer",
                "Editor",
                "Cast",
                "Genre",
                "Keywords",
                "Release Date",
                "Budget",
                "Gross",
                "Profit",
                "Rating",
                "Votes",
                "Connections",
                "Locations",
                "ID",
                "",
                "Aspect Ratio",
                "Duration",
                "Color",
                "Saturation",
                "Brightness",
                "Volume",
                "Clips",
                "Cuts",
                "Cuts per Minute",
                "Words",
                "Words per Minute",
                "",
                "Resolution",
                "Pixels",
                "Size",
                "Bitrate",
                "Files",
                "Filename",
                "Date Published",
                "Date Modified"
            ])],
            ["orderMovies", "Order Movies", getMenuGroupItems("orderMovies", [
                "Ascending",
                "Descending"
            ])],
            [],
            ["groups", "Use Groups", {
                checked: true
            }],
            ["groupMovies", "Group Movies by", getMenuGroupItems("groupMovies", [
                "Director",
                "Country",
                "Year",
                "Language",
                "Genre"
            ])],
            ["sortGroups", "Sort Groups by", getMenuGroupItems("sortGroups", [
                "Name",
                "Number of Movies"
            ])],
            ["orderGroups", "Order Groups", getMenuGroupItems("orderGroups", [
                "Ascending",
                "Descending"
            ])]
        ]],
        ["find", "Find", [
            ["find", "Find", getMenuGroupItems("find", [
                "All",
                "Title",
                "Director",
                "Country",
                "Year",
                "Language",
                "Writer",
                "Producer",
                "Cinematographer",
                "Editor",
                "Cast",
                "Name",
                "Genre",
                "Keyword",
                "Summary",
                "Trivia",
                "Dialog"
            ])],
            [],
            ["advanced", "Advanced Find...", {}]
        ]],
        ["help", "Help", [
            ["help", "Pandora Help", {
                shortcut: "SHIFT ?"
            }]
        ]]
    ];

    function getMenuGroupItems(group, titles) {
        var items = [];
        $.each(titles, function(i, v) {
            if (v) {
                //v.replace(/(^[as|on] )/, "");
                var id = v.replace("as ", "").replace("with ", "").replace(" of Movies", "").replace(" ", "").toLowerCase();
                items.push([id, v, {
                    group: group,
                    checked: user.prefs[group] == id,
                    bind: [group, function(e) {
                        if (e.sort == id) {
                            Ox.topMenu.toggleChecked("sort/" + group + "/" + id);
                        }
                    }]
                }]);
            } else {
                items.push([]);
            }
        });
        if (group == "viewMovies") {
            items.push([]),
            items.push(["rss", "RSS", {}]);
            items.push(["json", "JSON", {}]);
        }
        if (group == "viewIcons") {
            items.push([]);
            items.push(["pandora", "Always Use 0xdb Posters", {
                group: "pandoraPosters",
                checked: false
            }]);
        }
        return items;
    }

    var menus = [
        ["list", "List", [
            ["foo", "Foo", { checked: true, shortcut: "ALT ESCAPE" }, function() {}],
            ["view", "View List", getMenuItemsC()],
            ["more", "View More", getMenuItemsL()],
            [],
            ["createList", "New List...", { disabled: true, shortcut: "CONTROL N" }, function() { loadDialog("createList"); }],
            ["createListFromSelection", "New List from Selection...", { disabled: true, shortcut: "SHIFT CONTROL N" }, function() { loadDialog("createListFromSelection"); }],
            ["createSmartList", "New Filter...", { disabled: true, shortcut: "ALT CONTROL N"}, function() { loadDialog("createList"); }],
            [],
            ["add", "Add Movie to List", { disabled: false }, function() {}],
            ["remove", "Remove Movie from List", { disabled: true }, function() {}]
        ]],
        ["edit", "Edit", [
            ["undo", "Undo", { shortcut: "CONTROL Z" }, function() {}],
            ["redo", "Redo", { shortcut: "SHIFT CONTROL Z" }, function() {}],
            [],
            ["cut", "Cut", { shortcut: "CONTROL X" }, function() {}],
            ["copy", "Copy", { shortcut: "CONTROL C" }, function() {}],
            ["paste", "Paste", { shortcut: "CONTROL V" }, function() {}],
            ["delete", "Delete", { shortcut: "DELETE" }, function() {}],
            [],
            ["all", "Select All", { shortcut: "CONTROL A" }, function() {}],
            ["none", "Select None", { shortcut: "SHIFT CONTROL A" }, function() {}],
            ["invert", "Invert Selection", { shortcut: "ALT CONTROL A" }, function() {}],
        ]],
        ["view", "View", [
            ["view", "View Movies", [
                ["viewList", "as List", function() { setPref("view", "list"); }],
                ["viewGrid", "as Grid", { checked: true }, function() { setPref("view", "grid"); }],
                ["viewScenes", "as Scenes", function() { setPref("view", "scenes"); }],
                ["viewTimelines", "as Timelines", function() { setPref("view", "timelines"); }],
                ["viewMaps", "as Maps", function() { setPref("view", "maps"); }],
                [],
                ["map", "on Map", function() {}],
                ["calendar", "on Calendar", function() {}],
                [],
                ["viewRSS", "RSS", function() { setPref("view", "maps"); }],
                ["viewJSON", "JSON", function() { setPref("view", "maps"); }],
                [],
                ["foobar", "foobar", [
                    ["foo", "foo", function() { setPref("view", "maps"); }],
                    ["bar", "bar", function() { setPref("view", "maps"); }]
                ]]
            ]],
            ["icons", "Icons", [
                ["posters", "Posters", { checked: true }, function() {}],
                ["stills", "Stills", function() {}],
                ["timelines", "Timelines", function() {}],
                [],
                ["pandora", "Always Use 0xdb Posters", function() {}],
            ]],
            [],
            ["open", "Open Movie", [
                ["info", "Info", { shortcut: "CONTROL RETURN" }, function() {}],
                ["poster", "Poster", function() {}],
                ["scenes", "Scenes", function() {}],
                ["editor", "Editor", function() {}],
                ["map", "Map", function() {}],
                ["calendar", "Calendar", function() {}]
            ]],
            ["preview", "Preview Movie", { shortcut: "CONTROL SPACE" }, function() {}],
            [],
            ["lists", "Hide Lists", { shortcut: "SHIFT L" }, function() { $("#sideView").parent().next().trigger("dblclick"); $topMenu.toggleTitle("view/lists", ["Hide Lists", "Show Lists"]) }],
            ["stills", "Hide Scenes", { shortcut: "SHIFT S" }, function() {} ],
            ["groups", "Hide Groups", { shortcut: "SHIFT G" }, function() {}],
            ["movies", "Hide Movies", { disabled: true, shortcut: "SHIFT M" }, function() {}],
        ]],
        ["sort", "Sort", [
            ["sort", "Sort Movies by", [
                ["id", "ID", { group: "sort", checked: true }, function() { setPref("sort", "id"); }],
                ["title", "Title", { group: "sort" }, function() { setPref("sort", "title"); }],
                ["director", "Director", { group: "sort" }, function() { setPref("sort", "director"); }],
                ["country", "Country", { group: "sort" }, function() { setPref("sort", "country"); }],
                ["year", "Year", { group: "sort" }, function() { setPref("sort", "year"); }],
                ["language", "Language", { group: "sort" }, function() { setPref("sort", "language"); }],
                ["runtime", "Runtime", { group: "sort" }, function() { setPref("sort", "runtime"); }],
                ["producer", "Producer", { group: "sort" }, function() { setPref("sort", "producer"); }],
                ["writer", "Writer", { group: "sort" }, function() { setPref("sort", "writer"); }],
                ["cinematographer", "Cinematographer", { group: "sort" }, function() { setPref("sort", "cinematographer"); }],
                ["editor", "Editor", { group: "sort" }, function() { setPref("sort", "editor"); }],
                ["genre", "Genre", { group: "sort" }, function() { setPref("sort", "genre"); }],
                ["releasedate", "Release Date", { group: "sort" }, function() { setPref("sort", "releasedate"); }],
                ["rating", "Rating", { group: "sort" }, function() { setPref("sort", "rating"); }],
                ["votes", "Votes", { group: "sort" }, function() { setPref("sort", "votes"); }]
            ]],
            ["order", "Order Movies", [
                ["ascending", "Ascending", { group: "order", checked: true }, function() { setPref("order", "ascending"); }],
                ["descending", "Descending", { group: "order" }, function() { setPref("order", "descending"); }]
            ]],
            [],
            ["groups", "Use Groups", { checked: true }, function() {}],
            ["group", "Group Movies by", [
                ["title", "Title", function() { setPref("group", "title"); }],
                ["director", "Director", { checked: true }, function() { setPref("group", "director"); }],
                ["country", "Country", function() { setPref("group", "country"); }],
                ["year", "Year", function() { setPref("group", "year"); }]
            ]],
            ["sortGroups", "Sort Groups by", [
                ["name", "Name", { checked: true }, function() { setPref("sortGroups", "name"); }],
                ["movies", "Number of Movies", function() { setPref("sortGroups", "movies"); }]
            ]],
            ["orderGroups", "Order Groups", [
                ["ascending", "Ascending", { checked: true }, function() { setPref("orderGroups", "ascending"); }],
                ["descending", "Descending", function() { setPref("orderGroups", "descending"); }]
            ]]
        ]],
        ["find", "Find", [
            ["find", "Find", [
                ["all", "All", { checked: true }, function() {}],
                ["title", "Title", function() { setPref("find", "title"); }],
                ["director", "Director", function() { setPref("find", "director"); }],
                ["country", "Country", function() { setPref("find", "country"); }],
                ["year", "Year", function() { setPref("find", "year"); }],
                ["language", "Language", function() { setPref("find", "language"); }],
                ["producer", "Producer", function() { setPref("find", "producer"); }],
                ["writer", "Writer", function() { setPref("find", "writer"); }],
                ["cinematographer", "Cinematographer", function() { setPref("find", "cinematographer"); }],
                ["editor", "Editor", function() { setPref("find", "editor"); }],
                ["cast", "Cast", function() { setPref("find", "cast"); }],
                ["name", "Name", function() { setPref("find", "name"); }],
                ["genre", "Name", function() { setPref("find", "genre"); }],
                ["keywords", "Keywords", function() { setPref("find", "keywords"); }],
            ]],
            [],
            ["advanced", "Advanced Find", function() {}]
        ]],
        ["help", "Help", [
            ["help", "Pandora Help", { shortcut: "SHIFT ?" }, function() {}]
        ]],
        ["test", "Test", [
            ["me", "Check Me", function() { $topMenu.toggleChecked("test/me"); }],
            ["disable", "Disable It", function() { $topMenu.toggleDisabled("test/me"); $topMenu.toggleTitle("test/disable", ["Disable It", "Enable It"]); }],
            ["them", "Check Them", [
                ["me", "Check Me", { checked: true, group: "them" }, function() { $topMenu.checkItem("test/them/me"); }],
                ["her", "Check Her", { group: "them" }, function() { $topMenu.checkItem("test/them/her"); }],
                ["him", "Check Him", { group: "them" }, function() { $topMenu.checkItem("test/them/him"); }],
                [],
                ["disable", "Disable Them", function() { $topMenu.toggleDisabled("test/them/me"); $topMenu.toggleDisabled("test/them/her"); $topMenu.toggleDisabled("test/them/him"); $topMenu.toggleTitle("test/them/disable", ["Disable Them", "Enable Them"]); }]
            ]],
            ["1", "1"],
            ["2", "2"],
            ["3", "3"],
            ["4", "4"],
            ["5", "5"],
            ["6", "6"],
            ["7", "7"],
            ["8", "8"],
            ["9", "9"],
            ["10", "10"],
            ["11", "11"],
            ["12", "12"],
            [],
            ["add", "Add Item", function() { $topMenu.insertItemAfter("test/12", ["13", "13"]); $topMenu.toggleDisabled("test/add"); $topMenu.toggleDisabled("test/remove"); }],
            ["remove", "Remove Item", { disabled: true }, function() { $topMenu.removeItem("test/13"); $topMenu.toggleDisabled("test/add"); $topMenu.toggleDisabled("test/remove"); }],
        ]]
    ];

    function getMenuItemsC() {
        var items = [];
        var countries = Ox.getCountries();
        $.each(countries, function(i, v) {
            items.push([v.code, v.name, { icon: Ox.baseUrl + "png/flags/" + v.flag + ".png" }, function() {}]);            
        });
        return items;
    }
    function getMenuItemsL() {
        var items = [];
        var languages = Ox.getLanguages();
        $.each(languages, function(i, v) {
            items.push([v.code, v.name, { icon: Ox.baseUrl + "png/flags/" + v.flag + ".png" }, function() {}]);            
        });
        return items;
    }

    function getBrowserItems() {
        var items = [];
        var groups = [{"items": 3093, "title": "United States"}, {"items": 1142, "title": "France"}, {"items": 688, "title": "Germany"}, {"items": 548, "title": "United Kingdom"}, {"items": 296, "title": "Italy"}, {"items": 285, "title": "Japan"}, {"items": 253, "title": "Canada"}, {"items": 94, "title": "Austria"}, {"items": 88, "title": "Spain"}, {"items": 88, "title": "Switzerland"}, {"items": 79, "title": "Soviet Union"}, {"items": 75, "title": "Belgium"}, {"items": 72, "title": "Netherlands"}, {"items": 72, "title": "Sweden"}, {"items": 69, "title": "Unknown"}, {"items": 61, "title": "Poland"}, {"items": 52, "title": "Hong Kong"}, {"items": 50, "title": "Denmark"}, {"items": 46, "title": "Australia"}, {"items": 42, "title": "China"}, {"items": 42, "title": "India"}, {"items": 39, "title": "Finland"}, {"items": 38, "title": "South Korea"}, {"items": 36, "title": "Iran"}, {"items": 36, "title": "Russia"}, {"items": 34, "title": "Mexico"}, {"items": 34, "title": "Taiwan"}, {"items": 30, "title": "Ireland"}, {"items": 28, "title": "Portugal"}, {"items": 27, "title": "Cuba"}, {"items": 27, "title": "Yugoslavia"}, {"items": 26, "title": "Norway"}, {"items": 24, "title": "Argentina"}, {"items": 24, "title": "Brazil"}, {"items": 16, "title": "Czechoslovakia"}, {"items": 16, "title": "Luxembourg"}, {"items": 15, "title": "Thailand"}, {"items": 12, "title": "Chile"}, {"items": 12, "title": "Czech Republic"}, {"items": 11, "title": "Hungary"}, {"items": 10, "title": "Senegal"}, {"items": 9, "title": "Israel"}, {"items": 8, "title": "Greece"}, {"items": 7, "title": "Tunisia"}, {"items": 7, "title": "Turkey"}, {"items": 6, "title": "East Germany"}, {"items": 6, "title": "Egypt"}, {"items": 5, "title": "Algeria"}, {"items": 5, "title": "Burkina Faso"}, {"items": 4, "title": "Cameroon"}, {"items": 4, "title": "South Africa"}, {"items": 3, "title": "Bolivia"}, {"items": 3, "title": "Morocco"}, {"items": 3, "title": "Peru"}, {"items": 3, "title": "Philippines"}, {"items": 3, "title": "Romania"}, {"items": 3, "title": "Slovenia"}, {"items": 3, "title": "Ukraine"}, {"items": 3, "title": "Venezuela"}, {"items": 2, "title": "Armenia"}, {"items": 2, "title": "Bosnia and Herzegovina"}, {"items": 2, "title": "Croatia"}, {"items": 2, "title": "Estonia"}, {"items": 2, "title": "Iceland"}, {"items": 2, "title": "Jamaica"}, {"items": 2, "title": "Kazakhstan"}, {"items": 2, "title": "Lebanon"}, {"items": 2, "title": "Liechtenstein"}, {"items": 2, "title": "Lithuania"}, {"items": 2, "title": "Malaysia"}, {"items": 2, "title": "New Zealand"}, {"items": 2, "title": "Serbia"}, {"items": 2, "title": "Singapore"}, {"items": 2, "title": "Sri Lanka"}, {"items": 2, "title": "Vietnam"}, {"items": 1, "title": "Afghanistan"}, {"items": 1, "title": "Bangladesh"}, {"items": 1, "title": "Belarus"}, {"items": 1, "title": "Botswana"}, {"items": 1, "title": "Bulgaria"}, {"items": 1, "title": "Chad"}, {"items": 1, "title": "Colombia"}, {"items": 1, "title": "Congo"}, {"items": 1, "title": "Ecuador"}, {"items": 1, "title": "Indonesia"}, {"items": 1, "title": "Iraq"}, {"items": 1, "title": "Kenya"}, {"items": 1, "title": "Macau"}, {"items": 1, "title": "Madagascar"}, {"items": 1, "title": "Mali"}, {"items": 1, "title": "Niger"}, {"items": 1, "title": "Palestine"}, {"items": 1, "title": "Puerto Rico"}, {"items": 1, "title": "Serbia and Montenegro"}, {"items": 1, "title": "Slovakia"}, {"items": 1, "title": "Syria"}, {"items": 1, "title": "Tajikistan"}, {"items": 1, "title": "Uruguay"}, {"items": 1, "title": "Yemen"}];
        $.each(groups, function(i, v) {
            var code = Ox.getCountryCode(v.title.replace("Unknown", "Neutral Zone"));
            var flag = Ox.getFlag(v.title.replace("Unknown", "Neutral Zone"));
            var strings = v.title.split(" ");
            items.push({
                size: 64,
                id: code,
                icon: "http://localhost/pandorastatic/flags/" + flag + ".png",
                title: strings[0] + (strings.length > 1 ? "<br/>" + strings[1] : ""),
                info: Ox.formatNumber(v.items) + " Movie" + (v.items > 1 ? "s" : "")
            });
        });
        return items;
    }

    /*

    $element = new Ox.Container().css({
        width: "256px",
        height: "256px",
        background: "red"
    }).click(function() {
        Ox.print("click");
    }).html("foo").appendTo($body);

    $bar = new Ox.Bar({
        orientation: "horizontal",
        height: 16
    }).appendTo($body);

    */

    var $sideBrowserPlayer = $("<div/>")
        .attr({
            id: "sideBrowserPlayer"
        }).css({
            width: "100%",
            height: "100%"
        }).append(
            $("<img/>").attr({
                src: '/static/png/frame.png'
            }).css({
                width: "100%",
                height: "100%"
            }).click(function() {
                var maxWidth = $(document).width(),
                    maxHeight = $(document).height() - 96,
                    width = Math.min($(this).data("width"), maxWidth),
                    height = width * $(this).data("height") / $(this).data("width");
                if (height > maxHeight) {
                    width *= maxHeight / height;
                    height = maxHeight;
                }
                pandora.$dialog = new Ox.Dialog({
                    title: "Foo",
                    buttons: [
                        new Ox.Button()
                            .val("Close")
                            .click(function() {
                                pandora.$dialog.close();
                            })
                    ],
                    width: width,
                    height: height
                }).append(
                    $("<img/>")
                        .attr({
                            src: $(this).attr("src")
                        })
                        .css({
                            display: "block",
                            width: width + "px",
                            height: height + "px"
                        })
                ).open();
            })
        );

    var $sideBrowser = new Ox.Element().css({
        width: "100%",
        height: "100%"
    }).attr({
        id: "sideBrowser" // remove this later
    }).append($sideBrowserPlayer);

    var $sideBar = new Ox.Container();

    var $historyPanel = new Ox.Panel({
        title: "History"
    }).appendTo($sideBar.$content);
    for (var i = 0; i < 10; i++) {
        $historyPanel.append("Item #" + (i + 1) + "<br/>")
    }
    //$("<br/>").appendTo($sideBar.$content);
    var $filtersPanel = new Ox.Panel({
        title: "Filters"
    }).appendTo($sideBar.$content);
    for (var i = 0; i < 10; i++) {
        $filtersPanel.append("Item #" + (i + 1) + "<br/>")
    }
    var $listsPanel = new Ox.Panel({
        title: "Lists"
    }).appendTo($sideBar.$content);
    for (var i = 0; i < 10; i++) {
        $listsPanel.append("Item #" + (i + 1) + "<br/>")
    }
    var $featuresPanel = new Ox.Panel({
        title: "Features"
    }).appendTo($sideBar.$content);
    for (var i = 0; i < 10; i++) {
        $featuresPanel.append("Item #" + (i + 1) + "<br/>")
    }

    pandora.$sideView = new Ox.SplitView({
        orientation: "vertical",
        elements: [
            {
                element: $sideBar
            },
            {
                element: $sideBrowser,
                size: 145,
                resizable: true
            }
        ]
    }).attr({
        id: "sideView"
    });


    /*
    var $main = new Ox.Container();
    var $mainBar = new Ox.Bar({
        orientation: "horizontal",
        size: 16
    });
    var $mainBrowser = new Ox.IconList({
        size: 64,
        items: getBrowserItems()
    });


    var $mainView = new Ox.SplitView({
        orientation: "vertical",
        elements: [
            {
                element: $mainBrowser,
                size: 132,
                resizable: true
            },
            {
                element: $mainBar,
                size: 16
            },
            {
                element: $main
            }
        ]
    });
    */

    var $mainBrowser = new Ox.IconList({
        size: 64,
        sort: user.prefs.sortGroups,
        order: user.prefs.orderGroups,
        url: "/json/find",
        params: {g:"country"}
    }).attr({
        id: "groups"
    });
    var $main = new Ox.Table({
        list: "movies",
        columns: [
            {
                id: "id",
                title: "ID",
                order: "ascending",
                width: 60,
                align: "left",
                checked: true
            },
            {
                id: "title",
                title: "Title",
                order: "ascending",
                width: 240,
                align: "left",
                checked: true
            },
            {
                id: "director",
                title: "Director",
                order: "ascending",
                width: 180,
                align: "left",
                checked: true
            },
            {
                id: "country",
                title: "Country",
                order: "ascending",
                width: 120,
                align: "left",
                checked: true
            },
            {
                id: "year",
                title: "Year",
                order: "descending",
                width: 40,
                align: "right",
                checked: true
            },
            {
                id: "runtime",
                title: "Runtime",
                order: "descending",
                width: 60,
                align: "right",
                checked: true
            },
            {
                id: "language",
                title: "Language",
                order: "ascending",
                width: 120,
                align: "left",
                checked: true
            },
            {
                id: "genre",
                title: "Genre",
                order: "ascending",
                width: 120,
                align: "left",
                checked: true
            },
            {
                id: "rating",
                title: "Rating",
                order: "descending",
                width: 60,
                align: "right",
                checked: true
            },
            {
                id: "votes",
                title: "Votes",
                order: "descending",
                width: 60,
                align: "right",
                checked: true
            }
        ],
        sort: user.prefs.sortMovies,
        order: user.prefs.orderMovies,
        url: "/json/find",
        select: selectItem
    });

    // these should go with their respective Ox Objects
    Ox.Event.bind("menu", function(data) {
        if (data.menu == "topmenu" && Ox.startsWith(data.item, "sort/sortMovies/")) {
            var sort = data.item.split("/").pop();
            Ox.Location.set({
                s: sort
            });
            $main.$body.sort(sort);
        }
        if (data.menu == "topmenu" && Ox.startsWith(data.item, "sort/orderMovies/")) {
            var order = data.item.split("/").pop();
            Ox.Location.set({
                o: order
            });
            $main.$body.order(order);
        }
        if (data.menu == "topmenu" && data.item == "view/toggleSidebar") {
            pandora.$sideView.toggle();
            $topMenu.toggleDisabled("view/toggleInfo");
        }
        if (data.menu == "topmenu" && data.item == "view/toggleInfo") {
            $sideBrowser.toggle();
        }
        if (data.menu == "topmenu" && data.item == "view/toggleGroups") {
            $mainBrowser.toggle();
        }
        if (data.menu == "topmenu" && Ox.startsWith(data.item, "find/find/")) {
            var find = data.item.split("/").pop();
            $find.setPlaceholder("Find: " + Ox.toTitleCase(find));
        }
        if (data.menu == "topmenu" && data.item == "help/help") {
            pandora.$dialog = new Ox.Dialog({
                title: "Pandora Help",
                buttons: [
                    new Ox.Button()
                        .val("Close")
                        .click(function() {
                            pandora.$dialog.close();
                        })
                ],
                width: $(document).width() / 2,
                height: ($(document).height() / 2) - 48
            }).append(
                new Ox.Element().html(Ox.repeat("Foo<br/>", 100))
            ).open();
        }
    });

    var $mainView = new Ox.SplitView({
        orientation: "vertical",
        elements: [
            {
                element: $mainBrowser,
                size: 132,
                resizable: true
            },
            {
                element: $main
            }
        ]
    });

    var $middleView = new Ox.SplitView({
        orientation: "horizontal",
        elements: [
            {
                element: pandora.$sideView,
                size: 192,
                resizable: [128, 192, 256],
                resize: resizePlayer
            },
            {
                element: $mainView
            }
        ]
    });

    function resizePlayer(width) {
        var height = Math.round((width - 4) / aspectRatio + 4);
        //Ox.print(width, height);
        $sideBar.css({
            bottom: height + "px"
        });
        $sideBrowser.$element.parent().parent().css({
            height: height + "px"
        });
        if (pandora.$sideView.$element.css("bottom") != "0px") {
            pandora.$sideView.css({
                bottom: (4 - height) + "px"
            })
        }
    }

    function selectItem(item) {
        var url = "http://0xdb.org/" + item.id + "/still.jpg";
        var img = $("<img/>").attr({
            src: url
        }).load(function() {
            var img = new Image();
            img.src = url;
            aspectRatio = img.width / img.height;
            var width = $sideBrowser.$element.width() + 4;
            resizePlayer(width);
            $sideBrowserPlayer.children().eq(0).attr({
                src: url
            }).data("width", img.width).data("height", img.height);
        })
    }

    var $topMenu = new Ox.MenuBar({
        id: "topmenu",
        size: "large",
        menus: m
    });

    var b = [
        ["login", function(data) {
            Ox.print("username:", data.username, "this:", this);
            $topMenu.toggleChecked("user/login");
        }],
        ["sort", function(data) {
            if (data.list == "movies") {
                $topMenu.checkItem("sort/sortMovies/" + data.sort);
                $topMenu.checkItem("sort/orderMovies/" + data.order);
            }
        }],
        ["order", function(data) {
            if (data.list == "movies") {
                $topMenu.checkItem("sort/orderMovies/" + data.order);
            }
        }],
        ["toggle", function(data) {
            if (data.id == "sideView") {
                $topMenu.toggleTitle("view/toggleSidebar");
                $topMenu.toggleDisabled("view/toggleInfo");
            } else if (data.id == "sideBrowser") {
                $topMenu.toggleTitle("view/toggleInfo");
            } else if (data.id == "groups") {
                $topMenu.toggleTitle("view/toggleGroups");
            }
        }],
        ["space", function(data) {
            var height = $(document).height() - 96,
                width = height * 5/8;
            pandora.$dialog = new Ox.Dialog({
                title: data.items[0].title,
                buttons: [
                    new Ox.Button()
                        .val("Close")
                        .click(function() {
                            pandora.$dialog.close();
                        })
                ],
                width: width,
                height: height
            }).append(
                $("<img/>").attr({
                    src: "http://0xdb.org/" + data.items[0].id + "/poster.large.jpg"
                }).css({
                    display: "block",
                    width: width + "px",
                    height: height + "px"
                })
            ).open();
        }]
    ];

    $.each(b, function(i, v) {
        Ox.Event.bind(v[0], function(data) {
            v[1](data);
        });
    });

    var $statusBar = new Ox.Bar({
        orientation: "horizontal",
        size: 24
    }).attr({
        id: "statusBar"
    });

    var loadingInterval;
    $loading = $("<img/>").attr({
        id: "loading",
        src: Ox.baseUrl + "png/themes/ox/loading0.png"
    }).ajaxStart(function() {
        Ox.print("start")
        $(this).attr({
            src: Ox.baseUrl + "png/themes/ox/loading0.png"
        });
        $(this).show();
        var loadingStep = 1;
        loadingInterval = setInterval(function() {
            $loading.attr({
                src: Ox.baseUrl + "png/themes/ox/loading" + (loadingStep % 12) + ".png"
            });
            loadingStep++;
        }, 83);
        /*
        $("body").css({
            cursor: "wait"
        });
        */
    }).ajaxStop(function() {
        Ox.print("stop")
        clearInterval(loadingInterval);
        $(this).hide();
        /*
        $("body").css({
            cursor: "default"
        });
        */
    }).appendTo($topMenu.$element).trigger("ajaxStart");

    var $view = new Ox.SplitView({
        orientation: "vertical",
        elements: [
            {
                element: $topMenu,
                size: 24
            },
            {
                element: $middleView
            },
            {
                element: $statusBar,
                size: 24
            }
        ]
    }).appendTo($body);

    /*
    for (var i = 0; i < 100; i++) {
        $main.$container.append("Item #" + (i + 1) + "<br/>");
    }
    */

    $find = new Ox.Input({
        placeholder: "Find: All"
    }).attr({
        id: "find"
    }).appendTo($topMenu.$element).trigger("blur");
    $find.change(function(that) {
        var q = $(this).val();
        $main.setUrl("/json/find", {q:q});
        $mainBrowser.setUrl("/json/find", {g:"country", q:q});
    });

    /*
    $find = $("<input/>")
        .attr({
            id: "find",
            type: "text",
            placeholder: "Find: All"
        })
        .focus(function() {
            if ($(this).hasClass("OxPlaceholder")) {
                $(this)
                    .val("")
                    .removeClass("OxPlaceholder");
            }
        })
        .blur(function() {
            if ($(this).val() === "") {
                $(this)
                    .addClass("OxPlaceholder")
                    .val($(this).attr("placeholder"));
            }
        })
        .appendTo($topMenu.$element)
        .trigger("blur");

    function focusFind() {
        Ox.print("!!!")
        $find.focus();
        $find.select();
    }

    var keyboard = Ox.KeyboardController.setup({
        "CONTROL F": focusFind
    }, true);
    Ox.KeyboardController.enable(keyboard);
    */

    //Ox.print($topMenu);



    function loadDialog() {}
    function loadPage() {}
    function setPref(key, value) {
        if (key == "sort") {
            $topMenu.checkItem("sort/sort/" + value);
        }
    }

    $("<select/>").css({
        position: "absolute",
        right: "4px",
        bottom: "4px",
    }).append(
        $("<option/>").val("foo").html("Foo")
    ).append(
        $("<option/>").val("bar").html("Bar")
    ).append(
        $("<option/>").val("bar").html($main.$body.width())
    ).appendTo($statusBar.$element);


});