$(function(){ Ox.theme("modern"); app = new Ox.App({ requestURL: "/api/" }); 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)" })*/; //FIXME: how to properly overwrite functions without replacing them var super_launch = app.launch; app.launch = function() { app.request('hello', function(result) { app.user = result.data.user; if(app.user.group!='guest') { app.menu.getItem('status').options('title', "User: " + app.user.username); app.menu.getItem('login').options('title', 'Logout'); } }); super_launch(); }; var loadingIcon = new Ox.LoadingIcon({ size: "medium" }) .css({ marginLeft: "4px" }); app.menu = new Ox.MainMenu({ extras: [ new Ox.Input({ autocomplete: function(option, value, callback) { var field = option.substring(6).toLowerCase(); Ox.print('app.menu.find.autocomplete: option: ', option, 'value: ', value, ', callback:',callback); Ox.print('app.menu.find.autocomplete: field: ', field); if(field == 'all') { callback([]); } else { value = value.toLowerCase(); //var order = $.inArray(field, ['year', 'date'])?'-':''; app.request('find', { query: { conditions: [ { key: field, value: value, operator: '~' } ] }, list: 'all', sort: [{key:field, operator: ''}], keys: [field], range: [0, 10] }, function(result) { var items = $.map( result.data.items, function(item, i) { return item.title; } ); callback(items); }); } }, clear: true, highlight: false, id: "find", label: ["Find: Title", "Find: All", "Find: Director", "Find: Country", "Find: Cinematographer"], labelWidth: 96 }).width(320), loadingIcon ], menus: [ { id: "pandoraMM", title: site.name, items: [ { id: "about", title: "About " + site.name }, {}, { id: "faq", title: "Frequently Asked Questions"}, { id: "tos", title: "Terms of Service"}, { id: "sas", title: "Security Advisory System"}, {}, { id: "contact", title: "Contact"}, {}, { id: "technology", title: "Technology"}, { id: "source", title: "Source Code"}, { id: "report", title: "Report a Bug..."}, ] }, { id: "user", id: "user", title: "User", items: [ { id: "status", title: "User: not logged in", disabled:true }, {}, { id: "accunt", title: "Account", disabled:true}, { id: "preferences", title: "Preferences", disabled:true}, {}, {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_ad", 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" }); var pageDialog = function(title, page) { Ox.print(title, page); var $dialog = new Ox.Dialog({ title: title, buttons: [ { value: "Ok", click: function() { $dialog.close(); } } ] }) .append(page) .open(); }; //this should be: mainMenu.bind('click_about', function(event) { Ox.Event.bind(app.menu.id, 'click_about', function() { pageDialog('About ' + site.name, site.pages.about); }); Ox.Event.bind(app.menu.id, 'click_faq', function() { pageDialog(app.menu.getItem('faq').options('title')[0], site.pages.faq); }); Ox.Event.bind(app.menu.id, 'click_tos', function() { pageDialog(app.menu.getItem('tos').options('title')[0], site.pages.tos); }); Ox.Event.bind(app.menu.id, 'click_sas', function() { pageDialog(app.menu.getItem('sas').options('title')[0], site.pages.sas); }); OxForm = function(options, self) { var self = self || {}, that = new Ox.Element({}, self) .defaults({ elements: [], }) .options(options || {}) .addClass("OxForm"), length = self.options.elements.length; $.each(self.options.elements, function(i, v) { that.append(Ox.Container().css({'margin': '5px'}).append(v)); }); that.values = function() { var values = {}; $.each(self.options.elements, function(i, v) { values[v.$input.attr('name')] = v.$input.val(); }); return values; } return that; }; Ox.Event.bind(app.menu.id, 'click_contact', function() { var labelWidth = 64; var inputWidth = 380; var u = new Ox.Input({ label: "Your Email", labelWidth: labelWidth, name:'email', size: 'medium' }).width(inputWidth).addClass("margin"); if(app.user && app.user.preferences.email) { u.val(app.user.preferences.email); } var form = new OxForm({ elements: [ u, new Ox.Input({ label: "Subject", labelWidth: labelWidth, name: "subject", size: "medium" }).width(inputWidth).addClass("margin"), new Ox.Input({ label: "Message", labelWidth: labelWidth, type: "textarea", size: "medium", name: "message" }).width(380).height(176).addClass("margin") ] }); var $dialog = new Ox.Dialog({ title: "Contact", width: 424, height: 320, buttons: [ { value: "Cancel", click: function() { $dialog.close(); } }, { value: "Contact", click: function() { app.request('contact', form.values(), function(result) { if(result.status.code == 200) { $dialog.close(); } else { $dialog.append(result.status.text); } }); } } ] }) .append(form) .open(); }); Ox.Event.bind(app.menu.id, 'click_technology', function() { pageDialog(app.menu.getItem('technology').options('title')[0], site.pages.technology); }); Ox.Event.bind(app.menu.id, 'click_source', function() { pageDialog(app.menu.getItem('source').options('title')[0], site.pages.source); }); Ox.Event.bind(app.menu.id, 'click_report', function() { pageDialog(app.menu.getItem('report').options('title')[0], site.pages.report); }); app.logout = function () { this.request('logout'); this.user = {}; this.menu.getItem('logout').toggle(); this.menu.getItem('status').options('title', "User: not logged in"); }; Ox.Event.bind(app.menu.id, 'click_logout', function(event, data) { app.logout(); }); Ox.Event.bind(app.menu.id, 'click_login', function(element) { var labelWidth = 64; var inputWidth = labelWidth+200; var loginForm = new OxForm({ elements: [ new Ox.Input({ label: "Username", labelWidth: labelWidth, name:'username', size: 'medium' }).addClass("margin").width(inputWidth), new Ox.Input({ label: 'Password', labelWidth: labelWidth, name:'password', type: 'password', size: 'medium' }).addClass("margin").width(inputWidth) ] }).css({ 'padding-top': '48px', }); var submit = function() { app.request('login', loginForm.values(), function(result) { if(result.status.code == 200) { $dialog.close(); app.user = result.data.user; app.menu.getItem('status').options(title, "User: " + app.user.username); app.menu.getItem('login').toggle(); } else { $dialog.append('Login failed ' + result.status.text); } }); } var d = new Ox.Container(); var registerInfo = new Ox.Panel(); registerInfo.append(Ox.Element().css({'margin-left': '4px'}).append('
Forgot your password? Recover Password
Dont have an account? Register Now')); var panel = Ox.SplitPanel({ elements: [ { element: loginForm, }, { element: registerInfo, size: 80 } ], orientation: "vertical" }).appendTo(d); var $dialog = new Ox.Dialog({ title: "Login", width: inputWidth+24, height: 184, buttons: [ [],[ { value: "Cancel", click: function() { $dialog.close(); } }, { value: "Login", click: submit } ] ] }) .append(d) .open(); }); var bottomPanel = Ox.Toolbar({size: "small"}) .css({ zIndex: 2, MozBoxShadow: "0 0 4px rgb(0, 0, 0)", WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)" }) .append( $("
") .addClass("bottom") .html(site.url + " - a rather unique kind of movie database.") ); var mainSplitPanel = Ox.SplitPanel({ elements: [ { element: app.menu, size: 24 }, { element: middleSplitPanel }, { element: bottomPanel, size: 24 } ], orientation: "vertical" }).appendTo($body); var listPanel = new Ox.CollapsePanel({ title: "Lists" }).appendTo(sidePanel); listPanel.$content.html("Nouvelle Vague
Hollywood 40's
Pirate Cinema Berlin") var historyPanel = new Ox.CollapsePanel({ title: "Search History" }).appendTo(sidePanel); historyPanel.$content.html("Paris
Matirx
Godard") /* var tabbar = new Ox.Tabbar({ values: ["Info", "Scenes", "Timeline", "Map", "Admin"], selected: 0, }).appendTo(mainPanel) */ var content = new Ox.Container() .appendTo(mainPanel); /* tabbar.bind('OxButtonToggle', function(event, data) { Ox.print('tabbar selected'); Ox.print(data.value); if(data.value=='Info') { content.html('this is for testing purposes only, lets get down to it...'); } else if(data.value=='Scenes') { content.html('what a wonderfull scene'); } else if(data.value=='Timeline') { content.html('here we will see a timeline'); } else if(data.value=='Map') { content.html('Here be a map of dragons'); } else if(data.value=='Admin') { content.html('Here be admin'); } }); */ var loadResult = function(query) { var columns = [ { align: "left", id: "title", operator: "+", title: "Title", visible: true, width: 160 }, { align: "left", id: "director", operator: "+", title: "Director", visible: true, width: 160 }, { align: "right", id: "year", operator: "-", title: "Year", visible: true, width: 80 } ]; return new Ox.TextList({ columns: columns, request: function(options) { app.request("find", $.extend(options, { query: query }), options.callback); }, id: "results", sort: [{ key: "year", operator: "-" }] }); } var results = loadResult({ conditions: [], operator: "&" }).appendTo(content); Ox.Event.bind(false, 'submit_find', function(event, data) { var r = loadResult({ conditions: [ { key: data.option.substr(6).toLowerCase(), value: data.value, operator: "~" } ], operator: "&" }); results.replaceWith(r); results = r; }); app.launch(); });