<html>
    <head>
        <link rel="stylesheet" href="../css/style.css" type="text/css" />
        <link rel="stylesheet" href="../css/jquery-ui.css" type="text/css" />
        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript" src="../js/jquery-ui.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>Character Creation</title>
        <style>
            body {
                overflow: hidden;
                -webkit-user-select: none;
            }

            #host.window {
                width: 366;
            }

            .customization_list {
                min-height: 181;
                margin-top: 5px;
            }

            .customization:first-of-type {
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }

            .customization:last-of-type {
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
            }

            .customization {
                border-radius: 0px;
                box-shadow: inset 1px 1px 1px rgba(0,0,0,0.7), 1px 1px 1px rgba(255,255,255,0.5);
                margin-bottom: 1px;
                color: #ddd;
                background-color: #999;
                width: 160px;
                text-align: center;
                text-transform:uppercase;
                padding: 3px 0px;
            }

            .arrow {
                text-align: none;
            }

            .arrow.left {
                -webkit-transform: scaleX(-1);
                left: 0px;
            }

            .customization:hover {
                color: #fff;
                background-image: -webkit-gradient(
                    linear,
                    left top,
                    left bottom,
                    color-stop(0, #999),
                    color-stop(1, #888)
                );
            }

            .customization.is-selected {
                color: #fff;
                background-image: -webkit-gradient(
                    linear,
                    left top,
                    left bottom,
                    color-stop(0, #888),
                    color-stop(1, #777)
                );
            }

            .name {
                position: absolute;
                top: 0px;
                right: 0px;
                width: 200px;
            }

            .character_area {
                position: absolute;
                top: 26px;
                right: 0px;
                height: 155px;
                width: 200px;
                background-color: white;
                border: 0px;
                border-radius: 5px;
                box-shadow: inset 1px 1px 1px rgba(0,0,0,0.7), 1px 1px 1px rgba(255,255,255,0.5);
            }

            .navigation { margin-top: 6px; }

            .confirm { float: right; }

            .sliders {
                position: absolute;
                bottom: 0px;
                left: 10px;
            }

            .color-slider {
                margin: 4px 0px;
                float: left;
                clear: left;
                width: 182px;
                height: 6px;
            }

            .ui-slider-horizontal .ui-slider-handle {
                top: -5px;
                margin-left: -5px;
                width: 7px;
                height: 8px;
                border: 0px;
                border-radius: 0px;
                background: transparent;
                background-image: url("../images/hsv-handle.png");
            }
            .ui-slider-horizontal .ui-slider-handle:focus {
                outline: none;
            }
            .ui-slider-horizontal { height: 6px; border-radius: 5px; border-color: #888; }
            .ui-slider-horizontal .ui-slider-range { background: transparent; }
            #hue { background-image: url("../images/hsv-hue.png"); }
            #saturation { background-image: url("../images/hsv-saturation.png"); }
            #value { background-image: url("../images/hsv-value.png"); }
        </style>
    </head>
    <body>
        <div id="host" class="window with-header">
            <script data-template-name="options" type="text/x-handlebars">
                <div class="customization_list">
                    {{#each item in App.customizationsController}}
                        {{#view App.CustomizationView contentBinding="item"}}
                            <div {{bindAttr class="item.isSelected:is-selected :customization :serif"}} {{action "customizationSelected" target="view"}}>
                                {{#if item.canChange}}
                                    <img class="arrow left" {{action "previousCustomization" target="view"}} src="../images/arrow.png"></img>
                                {{/if}}
                                <span class="customization-text">{{item.identifier}}</span>
                                {{#if item.canChange}}
                                <img class="arrow" {{action "nextCustomization" target="view"}} src="../images/arrow.png"></img>
                                {{/if}}
                            </div>
                        {{/view}}
                    {{/each}}
                </div>
                {{view App.FocusedTextField valueBinding="App.character.name" class="name" placeholder="Name"}}
                <div class="character_area">
                    <div class="sliders">
                        <div id="hue" class="color-slider"></div>
                        <div id="saturation" class="color-slider"></div>
                        <div id="value" class="color-slider"></div>
                    </div>
                </div>
            </script>
            <div class="header serif">
                <div style="text-align: center;">Character Creation</div>
            </div>
            <div id="options" class="options"></div>
            <script data-template-name="navigation" type="text/x-handlebars">
                <button class="confirm" {{bindAttr disabled="App.character.isInvalid"}} {{action "confirmCharacter" target="App.character"}}>Confirm</button>
                <button {{action "cancelCharacter" target="App.character"}}>Cancel</button>
            </script>
            <div style="clear: both;"></div>
            <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.Customization = Ember.Object.extend({
                    identifier: null,
                    isSelected: false,
                    canColor: false,
                    count: 0,
                    hue: 360,
                    saturation: 100,
                    value: 100,
                    canChange: function() {
                        //Only allow the user to change the customization if selected and more than one
                        return this.isSelected && this.count > 1;
                    }.property('isSelected', 'count')
                });

                App.Character = Ember.Object.extend({
                    name: '',
                    isInvalid: function() {
                        return !Boolean(this.name);
                    }.property('name'),
                    confirmCharacter: function(event) {
                        Crea.invoke('confirmCharacterCreate', this.name, App.customizationsController.content);
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/confirm.ogg');
                        Crea.invoke('back');
                    },
                    cancelCharacter: function(event) {
                        Crea.invoke('exitCharacterCreation');
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/cancel.ogg');
                        Crea.invoke('back');
                    }
                });

                App.character = App.Character.create();

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

                App.updatingColor = false;
                App.OptionView = Ember.View.extend({
                    templateName: 'options',
                    selectedItem: null,
                    controller: App.customizationsController,
                });

                App.CustomizationView = Ember.View.extend({
                    content: null,
                    didInsertElement: function() {
                        this._super();
                        $("#hue").slider({
                            orientation: "horizontal",
                            range: "min",
                            max: 360,
                            value: 360,
                            slide: updateColor,
                            change: updateColor
                        });
                        $("#saturation, #value").slider({
                            orientation: "horizontal",
                            range: "min",
                            max: 100,
                            value: 100,
                            slide: updateColor,
                            change: updateColor
                        });
                    },
                    customizationSelected: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/select.ogg');
                        if (App.customizationView.selectedItem == this.content) {
                            return;
                        }
                        if (App.customizationView.selectedItem != null) {
                            App.customizationView.selectedItem.set('isSelected', false);
                        }
                        this.content.set('isSelected', true);
                        App.updatingColor = true;
                        $("#hue").slider("value", this.content.get('hue'));
                        $("#saturation").slider("value", this.content.get('saturation'));
                        $("#value").slider("value", this.content.get('value'));
                        App.customizationView.set('selectedItem', this.content);
                        updateColor();
                        App.updatingColor = false;
                        Crea.invoke('selectCustomization', App.character.name, this.content);
                    },
                    previousCustomization: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/select.ogg');
                        Crea.invoke('previousCustomization', this.content.identifier);
                    },
                    nextCustomization: function(event) {
                        Crea.invoke('playSound', 'mods/core/audio/sfx/ui/select.ogg');
                        Crea.invoke('nextCustomization', this.content.identifier);
                    }
                });


                App.NavigationView = Ember.View.extend({
                    templateName: 'navigation'
                });

                App.customizationView = App.OptionView.create();
                App.navigationView = App.NavigationView.create();

                App.customizationView.appendTo('#options');
                App.navigationView.appendTo('#navigation');
                populate();
                //Since this menu is loaded in the same view as Crea it is ok to assume Crea object exists
                Crea.invoke('setCharacterPosition', 280, 198);
            });

            function updateColor() {
                if (!App.updatingColor && App.customizationView.selectedItem != null) {
                    App.customizationView.selectedItem.set('hue', $("#hue").slider("value"));
                    App.customizationView.selectedItem.set('saturation', $("#saturation").slider("value"));
                    App.customizationView.selectedItem.set('value', $("#value").slider("value"));
                    Crea.invoke('colorChange', App.customizationView.selectedItem);
                }
            }
        </script>
    </body>
</html>
