<html>
    <head>
        <title>Equipment</title>
        <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 { -webkit-user-select: none; width: 350px; }

            .clear { clear: both; }

            .stats { width: 80px; }

            .is-open { opacity:0.4; }

            .gear_icon { color: rgba(255, 255, 255, 0.5); }

            #header { color: #fff; font-size: 18px; padding: 4px; }
            .slots { }

            .stats-container { padding: 0px 10px; float: left; margin-top: 10px; }
            .stat-section { width: 105px; float: left; margin: 10px 0px; }
            .talent-section { margin-left: 40px; }

            .gear-slot { float: left; }
            .qty_div { position: absolute; bottom: -1px; right: 1px; }
            .quantity { color: #fff; }
            .tiny-text { font-size: 10px; font-family: sans-serif; font-weight: bold; -webkit-user-select: none;
                text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black }

            .maxstat_name { font-size: 10px; font-weight: bold; width: 70px; display: block; }
            .maxstat_value { width: 20px; }
            .max-stat-bar { height: 6px; }
            .stat-number { font-size: 12px; }

            .name_text { color: #eee; font-size: 10px; font-weight: bold; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1.0); }

            .stat { border-width: 2px; border-color: black; }
            .stat_name { padding-bottom: 5px; float: left; }
            .stat_value { float: right; color: #E6E477; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1.0); }

            .talent { margin-bottom: 5px; }
            .talent_name { float: left; }
            .talent_level { float: right; font-size: 10px; color: #E6E477; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1.0); }
            .talent_level .number { display: inline-block; text-align: right; }
            .talent-bar { margin-top: 0px; padding-top: 14px; }
            .level_bar {
                background-image: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0, rgba(67, 106, 153, 1.0)),
                    color-stop(1, rgba(112, 172, 200, 1.0))
                );
            }


            .max-stats-divisor {
                width: 100%;
                height: 2px;
                margin: 10px 0px 5px 0px;
                background-color: rgba(180, 180, 180, 0.6);
                box-shadow: inset 0px 1px 0px rgba(70, 70, 70, 0.6);
            }

            .stats-divisor {
                width: 100%;
                height: 2px;
                margin: 0px 0px 10px 0px;
                background-color: rgba(180, 180, 180, 0.6);
                box-shadow: inset 0px 1px 0px rgba(40, 40, 40, 0.6);
            }

            .info_div { overflow: hidden; margin: 0 0 6px; }
            .info_div:last-child { overflow: hidden; margin: 0 0 5px; padding: 0 10px; }

            .stat-label { float: left; line-height: 1; font-size: 11px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9); }
            .stat-container { margin-left: 22px; font-size: 10px; font-family: sans-serif; font-weight: bold; }
            .stat-container .stat-text { top: 1px; margin-bottom: -10px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
                text-align: center; line-height: 1; position: relative; z-index: 99; }

        </style>
    </head>
    <body>
        <script data-template-name="equipment_header_template" type="text/x-handlebars">
            <span id="character_name">{{App.character.name}}</span>
        </script>

        <script data-template-name="character_template" type="text/x-handlebars">
            <div class="stats-container">
                <div class="max-stats">
                    {{#each App.character.maxStats}}
                        <div class="name_text info_div">
                            <span id="max_label" class="stat-label">{{name}}</span>
                            <div class="stat-container">
                                <div class="stat-text">
                                    <span id="hp_amount" class="stat-number">{{value}}</span>
                                    <span class="divider">/</span>
                                    <span id="hp_max_amount" class="stat-number">{{max}}</span>
                                </div>
                                <div class="stat-bar max-stat-bar"><div class="stat-bar-fill" {{bindAttr id="id"}}></div></div>
                            </div>
                        </div>
                    {{/each}}
                </div>
                <div class="max-stats-divisor"></div>
                <div class="stat-section">
                    <div class="clear"></div>
                    <div>
                        {{#each App.character.stats}}
                            <div class="stat">
                                <span class="sans-serif name_text stat_name">{{name}}</span>
                                <span class="stat_value">{{value}}</span>
                            </div>
                            <div style="clear: both;"></div>
                        {{/each}}
                    </div>
                </div>

                <div class="stat-section talent-section">
                    <div id="talents">
                        {{#each App.character.talents}}
                            <div class="talent">
                                <span class="name_text talent_name">{{name}}</span>
                                <span class="talent_level">LVL <span class="number">{{level}}</span></span>
                                <div class="xp-info talent-bar stat-bar"><div class="level_bar stat-bar-fill" {{bindAttr id="points.id"}}></div></div>
                            </div>
                            <div class="clear"></div>
                        {{/each}}
                    </div>
                </div>
                <div class="clear"></div>
                <div class="stats-divisor"></div>
                <div class="slots">
                    {{#each App.character.slots}}
                        {{#view App.GearSlotView contentBinding="this"}}
                            <div class="itemslot">
                                <img width="24" height="24" {{bindAttr src="view.content.getIcon" class="view.content.isOpen"}}></img>
                                <div class="qty_div">
                                    {{#if view.content.showQuantity}}
                                        <span class="quantity tiny-text">{{view.content.quantity}}<span>
                                    {{/if}}
                                </div>
                            </div>
                        {{/view}}
                    {{/each}}
                </div>
            </div>
        </script>

        <div id="equipment" class="window with-header" data-handle="Equipment">
            <div id="header" class="header"></div>
            <div id="main"></div>
        </div>

        <script type="text/javascript" src="../js/model.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                App.Character = Ember.Object.extend({
                    name: "",
                    clevel: null,
                    maxStats: null,
                    stats: null,
                    talents: null,
                    slots: null,
                    init: function() {
                        this._super();
                        this.clevel = App.LevelTracker.create({name: "COMBAT"});
                        this.maxStats = Ember.ArrayController.create({content: []});
                        this.stats = Ember.ArrayController.create({content: []});
                        this.talents = Ember.ArrayController.create({content: []});
                        this.talents.pushObject(this.clevel);
                        this.slots = Ember.ArrayController.create({content: []});
                    }
                });
                App.CharacterView = Ember.View.extend({
                    templateName: 'character_template',
                    content: null,
                    didInsertElement: function() {
                        Ember.run.later(this, function() {
                            for (var i = 0; i < App.character.talents.content.length; ++i) {
                                App.character.talents.content[i].points.handleChanged();
                            }
                        }, 500);
                    }
                });
                App.character = App.Character.create();

                App.GearSlot = App.Item.extend({
                    key: "",
                    placeholder: "",
                    quantity: 0,
                    isUnique: true,
                    showQuantity: function() {
                        return this.quantity > 0 && !this.isUnique;
                    }.property('quantity', 'isUnique'),
                    isOpen: function() {
                        return !Boolean(this.icon);
                    }.property('icon'),
                    getIcon: function() {
                        if (this.icon) {
                            return this.icon;
                        } else {
                            return this.placeholder;
                        }
                    }.property('icon', 'placeholder')
                });

                App.GearSlotView = App.ItemView.extend({
                    classNames: ["gear-slot"],
                    mouseUp: function(event) {
                        if (this.content && this.content == App.clicked) {
                            if (event.which == 1) {
                                Crea.invoke('clickedSlot', this.content.get('key'));
                            } else if (event.which == 3) {
                                Crea.invoke('splitSlot', this.content.get('key'));
                            }
                        }
                    },
                    mouseDown: function(event) {
                        App.clicked = this.content;
                    },
                    mouseEnter: function() {
                        this._super();
                        if (this.content != null && (this.content.get('id') == 0 && this.content.get('content') == 0)) {
                            Crea.invoke('showTooltip', 'simple', getArea(this.$('div')), this.content.get('name'));
                        }
                    }
                });

                App.HeaderView = Ember.View.extend({
                    templateName: 'equipment_header_template',
                    content: null
                });

                var headerView = App.HeaderView.create();
                headerView.appendTo("#header");

                var view = App.CharacterView.create();
                view.appendTo("#main");
                populate();
            });
        </script>

    </body>
</html>