From 527aac6880b54b0ccb83f8262225f8144a9f7d20 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rollux.org>
Date: Sat, 4 Jun 2011 06:42:38 +0000
Subject: [PATCH] home screen demo

---
 static/js/pandora/ui/menu.js | 129 +++++++++++++++++++++++++++++++++++
 1 file changed, 129 insertions(+)

diff --git a/static/js/pandora/ui/menu.js b/static/js/pandora/ui/menu.js
index 90484f89..979d00b6 100644
--- a/static/js/pandora/ui/menu.js
+++ b/static/js/pandora/ui/menu.js
@@ -207,6 +207,134 @@ pandora.ui.mainMenu = function() {
                         title: 'About'
                     }).open();
                 } else if (data.id == 'home') {
+                    var $screen = $('<div>')
+                            .attr({id: 'screen'})
+                            .css({
+                                position: 'absolute',
+                                width: '100%',
+                                height: '100%',
+                                background: 'rgb(32, 32, 32)',
+                                opacity: 0,
+                                zIndex: 1000
+                            })
+                            .appendTo(Ox.UI.$body),
+                        $logo = $('<img>')
+                            .attr({
+                                src: '/static/png/logo256.png'
+                            })
+                            .css({
+                                position: 'absolute',
+                                left: 0,
+                                top: 0,
+                                right: 0,
+                                bottom: '160px',
+                                width: window.innerWidth + 'px',
+                                margin: 'auto'
+                            })
+                            .bind({
+                                click: function() {
+                                    $screen.find('div').add('#screen > input').animate({opacity: 0}, 250);
+                                    $logo.animate({
+                                        width: window.innerWidth + 'px'
+                                    }, 500)
+                                    $screen.animate({opacity: 0}, 500, function() {
+                                        $screen.remove();
+                                    });
+                                }
+                            })
+                            .appendTo($screen),
+                        $input = Ox.Input({
+                                width: 156
+                            })
+                            .css({
+                                position: 'absolute',
+                                left: 0,
+                                top: '48px',
+                                right: '164px',
+                                bottom: 0,
+                                margin: 'auto',
+                                opacity: 0
+                            })
+                            .click(function(e) {
+                                e.stopPropagation();
+                            })
+                            .appendTo($screen),
+                        $findButton = Ox.Button({
+                                title: 'Find',
+                                width: 74
+                            })
+                            .css({
+                                position: 'absolute',
+                                left: '82px',
+                                top: '48px',
+                                right: 0,
+                                bottom: 0,
+                                margin: 'auto',
+                                opacity: 0
+                            })
+                            .appendTo($screen),
+                        $browseButton = Ox.Button({
+                                title: 'Browse',
+                                width: 74
+                            })
+                            .css({
+                                position: 'absolute',
+                                left: '246px',
+                                top: '48px',
+                                right: 0,
+                                bottom: 0,
+                                margin: 'auto',
+                                opacity: 0
+                            })
+                            .appendTo($screen);
+                        $signupButton = Ox.Button({
+                                title: 'Sign Up',
+                                width: 74
+                            })
+                            .css({
+                                position: 'absolute',
+                                left: 0,
+                                top: '112px',
+                                right: '246px',
+                                bottom: 0,
+                                margin: 'auto',
+                                opacity: 0
+                            })
+                            .appendTo($screen);
+                        $signinButton = Ox.Button({
+                                title: 'Sign In',
+                                width: 74
+                            })
+                            .css({
+                                position: 'absolute',
+                                left: 0,
+                                top: '112px',
+                                right: '82px',
+                                bottom: 0,
+                                margin: 'auto',
+                                opacity: 0
+                            })
+                            .appendTo($screen);
+                        $aboutButton = Ox.Button({
+                                title: 'About',
+                                width: 156
+                            })
+                            .css({
+                                position: 'absolute',
+                                left: '164px',
+                                top: '112px',
+                                right: 0,
+                                bottom: 0,
+                                margin: 'auto',
+                                opacity: 0
+                            })
+                            .appendTo($screen);
+                    $screen.animate({opacity: 1}, 500, function() {
+                        $screen.find('div').add('#screen > input').animate({opacity: 1}, 250)
+                    });
+                    $logo.animate({width: '320px'}, 500);
+                        
+                    /*
                     var $dialog = new Ox.Dialog({
                         buttons: [
                             new Ox.Button({
@@ -224,6 +352,7 @@ pandora.ui.mainMenu = function() {
                         title: app.site.site.name,
                         width: 800
                     }).open();
+                    */
                 } else if (data.id == 'register') {
                     app.$ui.accountDialog = pandora.ui.accountDialog('register').open();
                 } else if (data.id == 'loginlogout') {