<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>
            #host.window { width: 280px; margin-top: 5px; }
            .text_input { margin: 3px 0px; }
            .header { color: #fff; font-size: 22px; margin-top: -4px; }
            .confirm { float: right; }

            .toggle-button-label { font-size: 14px; }
            .spacing { margin: 4px 0px; }
        </style>
		<title>Host</title>
	</head>
    <body>
        <div id="host" class="window with-header">
            <script data-template-name="host" type="text/x-handlebars">
                {{view Ember.TextField class="text_input" valueBinding="App.options.port" placeholder="Port"}}
                <div class="clear"></div>
                {{view Ember.TextField class="text_input" typeBinding="App.options.passwordType" valueBinding="App.options.password" placeholder="Password (optional)"}}
                <div class="clear spacing"></div>
                <label class="serif toggle-button-label">
                    Save Password
                    {{view App.ToggleButton checkedBinding="App.options.save"}}
                </label>
                <div class="clear spacing"></div>
                <label class="serif toggle-button-label">
                    Show Password
                    {{view App.ToggleButton checkedBinding="App.options.show"}}
                </label>
                <div style="margin-top: 4px;">
                    <button class="confirm" {{action "confirm" target="App.options"}}>Confirm</button>
                    <button {{action "back" target="App.options"}}>Back</button>
                </div>
            </script>
            <div class="header serif">
                <div style="text-align: center;">Host Options</div>
            </div>
            <div id="options" class="options"></div>
        </div>

        <script type="text/javascript" src="../js/model.js"></script>
        <script type="text/javascript">
            $(document).bind('creaWindowLoaded', function() {
                App.Options = Ember.Object.extend({
                    port: '',
                    password: '',
                    save: false,
                    show: false,
                    passwordType: function() {
                        return this.get('show') ? 'text' : 'password';
                    }.property('show'),
                    confirm: function() {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/confirm.ogg');
                        Crea.invoke('submitHost', App.options)
                        Crea.invoke('load', "html/world_selection.html");
                    },
                    back: function() {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/cancel.ogg');
                        Crea.invoke('back');
                    }
                });

                App.options = App.Options.create();

                var view = Ember.View.create({ templateName: 'host' });
                view.appendTo("#options");
                populate();
            });
        </script>
	</body>
</html>
