<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>

        <style>
            body {  }
            .header { color: #fff; font-size: 22px; margin-top: -4px;}
            .back { float: left; }
            #worlds.window { width: 280px; margin-top: 5px; }
            .create_world { float: right;}
            .world_button { float: none; min-width: 100px; margin: 4px 0px; }
        </style>
        <title>World Selection</title>
    </head>
    <body>
        <div id="worlds" class="window with-header">
            <script data-template-name="menu" type="text/x-handlebars">
                <div class="world_list">
                    <div style="text-align: center; margin-bottom: 5px;">
                        {{#each App.worldsController}}
                            {{#view App.WorldView contentBinding="this"}}
                                <button class="world_button" {{action "select" target="view"}}>{{view.content.name}}</button>
                            {{/view}}
                        {{/each}}
                    </div>
                    <button class="create_world" {{action "createWorld" target="view"}}>Create World</button>
                    <button class="back" {{action "back" target="view"}}>Back</button>
                </div>
            </script>
            <div class="header serif">
                <div style="text-align: center;">World Selection</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.World = Ember.Object.extend({
                    name: null,
                    path: null,
                });

                App.worldsController = Ember.ArrayController.create({
                    content: [],
                });

                App.WorldsView = Ember.View.extend({
                    templateName: 'menu',
                    createWorld: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/confirm.ogg');
                        Crea.invoke('load', 'html/world_creation.html');
                    },
                    back: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/cancel.ogg');
                        Crea.invoke('back');
                    }
                });

                App.WorldView = Ember.View.extend({
                    content: null,
                    select: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/confirm.ogg');
                        Crea.invoke('selectWorld', this.content.path);
                        Crea.invoke('load', 'html/character_selection.html');
                    },
                })

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