$(function() {
    Ox.theme("modern");
    var $body = $("body"),
        app = new Ox.App({
            requestURL: "http://lion.oil21.org:8000/api/"
        }),
        $menu = new Ox.MainMenu({
            menus: [
                {
                    id: "demo",
                    title: "Demo",
                    items: [
                        { id: "about", title: "About" }
                    ]
                },
                {
                    id: "sort",
                    title: "Sort",
                    items: [
                        { id: "sort_movies", title: "Sort Movies by", items: [
                            { checked: false, group: "sort_movies", id: "title", title: "Title"},
                            { checked: false, group: "sort_movies", id: "director", title: "Director" },
                            { checked: false, group: "sort_movies", id: "country", title: "Country" },
                            { checked: true, group: "sort_movies", id: "year", title: "Year" },
                        ] },
                        { 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" },
                        ] }
                    ]
                },
            ],
            size: "large"
        }),
        $list = new Ox.TextList({
            columns: [
                {
                    align: "left",
                    id: "title",
                    operator: "+",
                    title: "Title",
                    visible: true,
                    width: 160
                },
                {
                    align: "left",
                    id: "director",
                    operator: "+",
                    title: "Director",
                    visible: true,
                    width: 160
                },
                {
                    align: "left",
                    id: "country",
                    operator: "+",
                    title: "Country",
                    visible: true,
                    width: 120
                },
                {
                    align: "right",
                    id: "year",
                    operator: "-",
                    title: "Year",
                    visible: true,
                    width: 80
                },
                {
                    align: "right",
                    id: "runtime",
                    operator: "-",
                    title: "Runtime",
                    visible: false,
                    width: 80
                }
            ],
            request: function(options) {
                app.request("find", $.extend(options, {
                    query: {
                        conditions: [
                            {
                                key: "country",
                                value: "",
                                operator: ""
                            }
                        ],
                        operator: ""
                    }
                }), options.callback);
            },
            sort: [
                {
                    key: "year",
                    operator: "-"
                }
            ]
        }),
        $main = Ox.SplitPanel({
            elements: [
                {
                    element: $menu,
                    size: 24
                },
                {
                    element: $list
                }
            ],
            orientation: "vertical"
        }).appendTo($body);
});