<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: 290px; margin-top: 5px; }
            .text_input { margin: 3px 0px; }
            .header { color: #fff; font-size: 22px; margin-top: -4px; }
            .confirm { float: right; }
            .recent_list {
                position: absolute;
                right: 0px;
                top: 0px;
            }
            .recent_entry { margin: 2px 0px;}
            .recent { color: #ddd; }
            .recent:hover { color: #fff; }
            .star { margin-bottom: -3px; }
            .not_favorite { -webkit-filter: grayscale(75%); }
            .not_favorite:hover { -webkit-filter: grayscale(50%); }

            .toggle-button-label { font-size: 14px; }
            .spacing { margin: 4px 0px; }
        </style>
		<title>Join</title>
	</head>
    <body>
        <div id="host" class="window with-header">
            <script data-template-name="join" type="text/x-handlebars">
                <form onsubmit="join_world">
                    {{view Ember.TextField class="text_input" valueBinding="App.current.ip" placeholder="Address"}}
                    {{view Ember.TextField class="text_input" valueBinding="App.current.port" placeholder="Port"}}
                    {{view Ember.TextField class="text_input" typeBinding="App.current.passwordType" valueBinding="App.current.password" placeholder="Password"}}
                    <div class="clear spacing"></div>
                    <label class="serif toggle-button-label">
                        Save Password
                        {{view App.ToggleButton checkedBinding="App.current.save"}}
                    </label>
                    <div class="clear spacing"></div>
                    <label class="serif toggle-button-label">
                        Show Password
                        {{view App.ToggleButton checkedBinding="App.current.show"}}
                    </label>
                    <div>
                        {{#if App.attemptingConnection}}
                            <img src="../images/loading.gif"></img>
                        {{/if}}
                        <span>{{App.message}}</span>
                    </div>
                    <div class="recent_list sans-serif">
                        {{#each App.optionsController}}
                            {{#view App.RecentView contentBinding="this"}}
                                <div class="recent_entry">
                                    <img {{bindAttr class="view.content.notFavorite:not_favorite :star"}} src="../images/star.png" {{action "toggleFavorite" target="view.content"}}></img>
                                    <span class="recent" {{action "select" target="view"}}>{{view.content.ip}}</span>
                                </div>
                            {{/view}}
                        {{/each}}
                    </div>
                    <div style="margin-top: 4px;">
                        <button class="confirm" {{bindAttr disabled="App.attemptingConnection"}} {{action "confirm" target="App.current"}}>Confirm</button>
                        <button {{bindAttr disabled="App.attemptingConnection"}} {{action "cancel" target="App.current"}}>Cancel</button>
                    </div>
                </form>
            </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.Option = Ember.Object.extend({
                    ip: '',
                    port: '',
                    password: '',
                    save: false,
                    show: false,
                    isFavorite: false,
                    notFavorite: Ember.computed.not('isFavorite'),
                    passwordType: function() {
                        return this.get('show') ? 'text' : 'password';
                    }.property('show'),
                    toggleFavorite: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/select.ogg');
                        this.set('isFavorite', !this.get('isFavorite'));
                    },
                    confirm: function(event) {
                        App.set('attemptingConnection', true);
                        App.set('message', 'Connecting...');
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/confirm.ogg');
                        Crea.invoke('submitJoin', this, App.optionsController.content, true);
                    },
                    cancel: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/cancel.ogg');
                        Crea.invoke('back');
                    },
                });

                App.current = App.Option.create();

                App.optionsController = Ember.ArrayController.create({ content: [] });
                App.RecentView = Ember.View.extend({
                    controller: App.optionsController,
                    content: null,
                    select: function(event) {
                        App.current.set('ip', this.content.ip);
                        App.current.set('port', this.content.port);
                        App.current.set('save', this.content.save);
                        App.current.set('show', this.content.show);
                        App.current.set('isFavorite', this.content.isFavorite);
                    }
                });

                App.attemptingConnection = false;
                App.message = "";

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