add about dialog

static/js/pandora/ui/menu.js

@@ -181,6 +181,47 @@ pandora.ui.mainMenu = function() {
             },
             click: function(event, data) {
                 if (data.id == 'about') {
+                    var tabs = [
+                        {id: 'about', title: 'About', selected: true},
+                        {id: 'news', title: 'News'},
+                        {id: 'tour', title: 'Take a Tour'},
+                        {id: 'faq', title: 'Frequently Asked Questions'},
+                        {id: 'tos', title: 'Terms of Service'},
+                        {id: 'contact', title: 'Contact'},
+                        {id: 'software', title: 'Software'}
+                    ];
+                    var $tabPanel = Ox.TabPanel({
+                            content: function(id) {
+                                return Ox.SplitPanel({
+                                    elements: [
+                                        {
+                                            element: Ox.Element()
+                                                .css({padding: '16px'})
+                                                .append(
+                                                    $('<img>')
+                                                        .attr({src: '/static/png/logo256.png'})
+                                                        .css({width: '128px'})
+                                                ),
+                                            size: 144
+                                        },
+                                        {
+                                            element: Ox.Element()
+                                                .css({padding: '16px', overflowY: 'auto'})
+                                                .html(Ox.repeat(Ox.getObjectById(tabs, id).title + ' ', 200))
+                                        }
+                                    ],
+                                    orientation: 'horizontal'
+                                });
+                            },
+                            tabs: tabs
+                        })
+                        .bindEvent({
+                            change: function(data) {
+                                $dialog.options({
+                                    title: Ox.getObjectById(tabs, data.selected).title
+                                });
+                            }
+                        });
                     var $dialog = Ox.Dialog({
                         buttons: [
                             Ox.Button({
@@ -192,8 +233,14 @@ pandora.ui.mainMenu = function() {
                                 }
                             })
                         ],
-                        id: 'about',
+                        //closeButton: true,
-                        title: 'About'
+                        content: $tabPanel,
+                        height: Math.round((window.innerHeight - 24) * 0.75),
+                        //maximizeButton: true,
+                        minHeight: 256,
+                        minWidth: 640,
+                        title: 'About',
+                        width: Math.round(window.innerWidth * 0.75),
                     }).open();
                 } else if (data.id == 'home') {
                     var $screen = $('<div>')