<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>
            .header { color: #fff; font-size: 22px; margin-top: -4px;}
            #world_creation.window { width: 280px; margin-top: 5px; }
            .menu_button { float: none; width: 100px; margin: 4px 0px; }
            .name_text { margin-bottom: 4px; }
            .name { font-size: 18px; }
            .status {
                display: inline-block;
                font-size: 14px;
                padding-top: 10px;
                padding-bottom: 2px;
            }
        </style>
        <title>World Creation</title>
    </head>
    <body>
        <div id="world_creation" class="window with-header">
            <script data-template-name="options" type="text/x-handlebars">
                <div style="text-align: center;">
                    {{#if App.nameValue.generating}}
                        <span class="name serif">{{App.nameValue.value}}</span>
                        <div class="clear"></div>
                        <span class="status serif">{{App.nameValue.status}}</span>
                    {{else}}
                        {{view App.FocusedTextField class="name_text" valueBinding="App.nameValue.value" placeholder="World Name"}}
                        <div class="clear"></div>
                        {{#each App.optionsController}}
                            {{#view App.OptionView contentBinding="this"}}
                                <button class="menu_button" {{bindAttr disabled="App.nameValue.isInvalid"}} {{action "select" target="view"}}>{{view.content.name}}</button>
                                <div class="clear"></div>
                            {{/view}}
                        {{/each}}
                    {{/if}}
                </div>
            </script>
            <div class="header serif">
                <div style="text-align: center;">World Creation</div>
            </div>
            <div id="options" class="options"></div>
            <script data-template-name="navigation" type="text/x-handlebars">
                {{#if App.nameValue.notGenerating}}
                    <button {{action "back" target="view"}}>Back</button>
                {{/if}}
            </script>
            <div id="navigation" class="navigation"></div>
        </div>

        <script type="text/javascript" src="../js/model.js"></script>
        <script type="text/javascript">
            $(document).bind('creaWindowLoaded', function() {
                App.Option = Ember.Object.extend({
                    name: null,
                    index: 0,
                });

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

                App.NameValue = Ember.Object.extend({
                    value: '',
                    status: '',
                    generating: false,
                    notGenerating: Ember.computed.not('generating'),
                    isInvalid: function() {
                        return !Boolean(this.value) || this.generating;
                    }.property('value', 'generating')
                });

                App.nameValue = App.NameValue.create();

                App.OptionViews = Ember.View.extend({
                    templateName: 'options',
                    controller: App.optionsController,
                });

                App.OptionView = Ember.View.extend({
                    content: null,
                    select: function(event) {
                        App.nameValue.set('generating', true);
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/confirm.ogg');
                        Crea.invoke('selectWorldOption', App.nameValue.value, this.content);
                    }
                });

                App.NavigationView = Ember.View.extend({
                    templateName: 'navigation',
                    back: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/cancel.ogg');
                        Crea.invoke('back');
                    }
                });
                App.navigationView = App.NavigationView.create();

                var view = App.OptionViews.create({});
                view.appendTo('#options');
                App.navigationView.appendTo('#navigation');
                populate();
            });
        </script>
    </body>
</html>
