<html>
    <head>
        <link rel="stylesheet" href="../css/style.css" type="text/css" />
        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript" src="../js/handlebars.js"></script>
        <script type="text/javascript" src="../js/ember.js"></script>
        <script type="text/javascript" src="../js/common.js"></script>

        <title>Crea</title>

        <style>
            body { margin: 0; }
            .header { color: #fff; font-size: 22px; margin-top: -4px;}
            #menu.window { width: 280px; margin-top: 5px; }
            .menu-button { float: none; width: 100px; margin: 4px 0px; }
        </style>
    </head>
    <body>
        <div id="menu" class="window with-header">
            <script data-template-name="menu" type="text/x-handlebars">
                <button class="menu-button" {{action "quickLoad" target="App.view"}} {{bindAttr disabled="view.cannotQuickPlay"}} tabindex="-1">Quick Play</button><div class="clear"></div>
                <button class="menu-button" {{action "solo" target="App.view"}} tabindex="-1">Solo</button><div class="clear"></div>
                <button class="menu-button" {{action "join" target="App.view"}} tabindex="-1">Join</button><div class="clear"></div>
                <button class="menu-button" {{action "host" target="App.view"}} tabindex="-1">Host</button><div class="clear"></div>
                <button class="menu-button" {{action "settings" target="App.view"}} tabindex="-1">Settings</button><div class="clear"></div>
                <button class="menu-button" {{action "exit" target="App.view"}} tabindex="-1">Exit</button>
            </script>
            <div class="header serif">
                <div style="text-align: center;">Crea</div>
            </div>
            <div id="main_menu" style="text-align: center;"></div>
        </div>

        <script type="text/javascript" src="../js/model.js"></script>
        <script type="text/javascript">
            $(document).bind('creaWindowLoaded', function() {
                App.MenuView = Ember.View.extend({
                    templateName: 'menu',
                    canQuickPlay: false,
                    cannotQuickPlay: Ember.computed.not("canQuickPlay"),
                    solo: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/confirm.ogg');
                        Crea.invoke('load', 'html/world_selection.html');
                    },
                    join: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/confirm.ogg');
                        Crea.invoke('load', 'html/join.html');
                    },
                    host: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/confirm.ogg');
                        Crea.invoke('load', 'html/host.html');
                    },
                    settings: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/confirm.ogg');
                        Crea.invoke('load', 'html/menu_settings.html');
                    },
                    quickLoad: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/confirm.ogg');
                        Crea.invoke('quickLoad');
                    },
                    exit: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/cancel.ogg')
                        Crea.invoke('exit');
                    },
                });


                App.view = App.MenuView.create();
                App.view.appendTo("#main_menu");
                populate();
            });
        </script>
    </body>
</html>
