<html>
    <head>

        <title>Talents</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>

            #talent { width: 364px;}

            .titlebar { background-color: #fff; color: #444; padding: 5px; width: 100px; border-radius: 10px 10px 0 0; margin-left: 20px; height: 13px; font-size: 0.8em;}

            #talent-area { padding: 4px 10px 10px; position: relative; }

                #availability-container { float: right; margin-top: 2px; }
                #availability-container input { margin: 0; }
                #availability-container label { font-size: 12px; margin: 0; position: relative; top: -2px;
                    color: #bbb; }

            .category-icon {
                margin: 0px 1px;
            }

            .skills { margin: 0 0 5px 5px; }
            .skill {
                float: left;
                width: 100px;
                height: 85px;
                padding: 5px;
                border-radius: 5px;
                margin: 3px;
                position: relative;
                background-color: rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.5);
                text-align: center;
                color: #fff;
                font-size: 12px;
            }

                .skill-slot {
                    position: relative;
                    width: 34px;
                    height: 34px;
                    margin: 0 auto;
                    background-image: url("../images/ui-item-bg.png");
                    background-size: 100% 100%;
                    border-radius: 3px;
                    box-shadow: inset 0 0 2px 1px rgba(0,0,0,0.3), 0 0 2px 1px rgba(255,255,255,0.1);
                    -webkit-user-select: none;
                }
                .skill:hover {  }
                .skill.selected { background-color: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.5); }

                .skill img { margin: 5px; }
                .skill-unavailable { -webkit-filter: grayscale(100%); }
                .skill-name-container { height: 16px; overflow: hidden; }
                .skill-name {
                    color: #fff;
                    font-size: 12px;
                    position: relative;
                }
                .skill-level {
                    position: absolute;
                    top: 30px;
                    right: 10px;
                }
                .skill-unlock {
                    display: block;
                    margin-top: 4px;
                }
                .unavailable .skill-name { color: #bbb; }

            .name-divisor {
                margin: 5px 0px;
            }

            .upgrade-button {
                margin-top: 4px;
                min-width: 60px;
            }

            .details {
                position: relative;
                right: 0px;
                background: white;
            }

            .talent_info {
                position: relative;
                right: 0px;
            }

            .stat-bar {
                height: 6px;
                width: 160px;
            }

            .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))
                );
            }

            .talent_points { }
            .talent_points .number { display: inline-block; min-width: 25px; text-align: right; }
            .talent_level {
                float: right;
            }
            .talent_level .number { display: inline-block; min-width: 20px; text-align: right; }

            .category-area { padding: 0; min-width: 300px; margin: 10px 0 0; height: 308px; overflow: auto; }

        </style>
    </head>
    <body>

        <div id="talent" class="window with-header" data-handle="Talents">

            <script data-template-name="talents" type="text/x-handlebars">
                <div class="talents group">
                    <table cellspacing="0" cellpadding="0">
                    <tr>
                    <td class="serif" style="width: 154px;">
                        {{#each talent in App.talents}}
                            {{#view App.TalentView contentBinding="talent"}}
                                <img width="24" height="24" {{bindAttr class="talent.isSelected:category-selected :category-icon" src="talent.icon"}}></img>
                            {{/view}}
                        {{/each}}
                    </td>
                    <td class="serif" style="padding-left: 20px; font-size: 12px;">
                        <span class="talent_points">TP<span class="number">{{App.talentView.selected.stored}}</span></span>
                        <div class="talent_level">
                            <span>LVL<span class="number">{{App.talentView.selected.tracker.level}}</span></span>
                        </div>
                        <div class="xp-info stat-bar"><div class="level_bar stat-bar-fill"
                            {{bindAttr id="App.talentView.selected.elementId"}}></div></div>
                    </td>
                    </tr>
                    </table>
                </div>
            </script>

            <script data-template-name="category-template" type="text/x-handlebars">
                <div class="skills group">
                    {{#each skill in App.talentView.selected.skills}}
                        <div {{bindAttr class="skill.isSelected:selected skill.isUnavailable:unavailable :skill"}}>
                            <div class="skill-name-container"><span class="skill-name serif"}}>{{skill.name}}</span></div>
                            <div class="content-divisor name-divisor"></div>
                            <div class="skill-slot">
                                {{#view App.SkillView contentBinding="skill"}}
                                <img width="24" height="24" {{bindAttr class="skill.isAvailable::skill-unavailable" src="skill.icon"}}></img>
                                {{/view}}
                            </div>
                            {{#if skill.showLevel}}
                                <span class="skill-level">{{skill.level}}</span>
                            {{/if}}
                            <div>
                                {{#if skill.isLocked}}
                                    <span class="skill-unlock serif">Unlocks at Lv {{skill.unlockLevel}}</span>
                                {{else}}
                                    {{#if skill.isPurchasable}}
                                        {{#view App.SkillButtonView contentBinding="skill"}}
                                        <button class="upgrade-button" {{action "purchase" target="skill"}} {{bindAttr disabled="skill.cannotPurchase"}}>
                                            {{skill.cost}}TP
                                        </button>
                                        {{/view}}
                                    {{else}}
                                        <span class="skill-unlock serif">Max Level!</span>
                                    {{/if}}
                                {{/if}}
                            </div>
                        </div>
                    {{/each}}
                </div>
            </script>

            <div id="talent-area" class="header talent-area serif group"></div>

            <div id="category-area" class="category-area"></div>
        </div>

        <script type="text/javascript" src="../js/model.js"></script>
        <script type="text/javascript">
            $(document).bind('creaWindowLoaded', function() {
                App.Talent = Ember.Object.extend({
                    id: "",
                    name: "",
                    icon: "",
                    stored: 0,
                    tracker: null,
                    skills: null,
                    isSelected: false,
                    init: function() {
                        this._super();
                        this.skills = Ember.ArrayController.create({content: []});
                        this.tracker = App.LevelTracker.create({name: this.id});
                        Ember.run.scheduleOnce('afterRender', this, function() {
                            this.tracker.points.handleChanged();
                        });
                    },
                    elementId: function() {
                        return this.id + '_bar';
                    }.property('id')
                });

                App.Skill = Ember.Object.extend({
                    id: "",
                    name: "",
                    icon: "",
                    level: 0,
                    cost: 0,
                    unlockLevel: 0,
                    isAvailable: false,
                    isLocked: Ember.computed.not('isAvailable'),
                    isSelected: false,
                    showLevel: function() {
                        return this.level > 0;
                    }.property('level'),
                    isPurchasable: function() {
                        return this.cost > 0;
                    }.property('cost'),
                    canPurchase: function() {
                        return App.talentView.selected.stored >= this.cost;
                    }.property('cost', 'App.talentView.selected.stored'),
                    cannotPurchase: Ember.computed.not('canPurchase'),
                    purchase: function () {
                        Crea.invoke("purchase", App.talentView.selected.id, this.id);
                    }
                });

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

                App.TalentSelectView = Ember.View.extend({
                    templateName: 'talents',
                    controller: App.talents,
                    content: null,
                    selected: null,
                });
                App.TalentView = Ember.View.extend({
                    content: null,
                    classNames: ['category-icons'],
                    click: function() {
                        if (App.talentView.get('selected')) {
                            App.talentView.get('selected').set('isSelected', false);
                        }
                        App.talentView.set('selected', this.content);
                        this.content.set('isSelected', true);
                        Ember.run.scheduleOnce('afterRender', function() {
                            App.talentView.selected.tracker.points.handleChanged();
                        });
                        forceRedraw();
                    },
                    mouseEnter: function() {
                        Crea.invoke('showTooltip', 'simple', getArea(this.$()), this.content.get('name'));
                    }
                });
                App.SkillView = Ember.View.extend({
                    content: null,
                    click: function(event) {
                        //We only want this for the left click
                        if (this.content) {
                            Crea.invoke('clickedSkill', App.talentView.selected.id, this.content.id);
                        }
                    },
                    mouseEnter: function() {
                        if (this.content != null && this.content.id) {
                            Crea.invoke('showTooltip', 'skill', getArea(this.$()), App.talentView.selected.id, this.content.id, false);
                        }
                    }
                });
                App.SkillButtonView = Ember.View.extend({
                    content: null,
                    mouseEnter: function() {
                        if (this.content != null && this.content.id) {
                            Crea.invoke('showTooltip', 'skill', getArea(this.$()), App.talentView.selected.id, this.content.id, true);
                        }
                    }
                });

                App.talentView = App.TalentSelectView.create();
                App.talentView.appendTo("#talent-area");

                App.ContentView = Ember.View.extend({
                    templateName: 'category-template',
                    selected: null
                });
                App.contentView = App.ContentView.create();
                App.contentView.appendTo("#category-area");

                populate();
            });
        </script>
    </body>
</html>
