diff --git a/pandora/static/js/pandora.js b/pandora/static/js/pandora.js
new file mode 100644
index 000000000..b410c0ae1
--- /dev/null
+++ b/pandora/static/js/pandora.js
@@ -0,0 +1,458 @@
+$(function(){
+ 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: field,
+ 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: "oxdbMM",
+ 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()
+ .css({'background-color': 'red'})
+ .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 results = new Ox.List({
+
+ }).appendTo(content);
+
+
+ app.launch();
+});