<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>

        <title>Tooltip</title>

        <style>

            body { margin: 0; }

            x.tiny-text { font-size: 10px; font-family: sans-serif; font-weight: bold; -webkit-user-select: none;
                text-shadow: 0 1px 1px rgba( 0, 0, 0, 0.7 ); }

            .details { margin-top: 5px; font-size: 14px; }
            .attributes { list-style: none; padding: 0px; margin: 0px 0px 0px 10px; font-size: 12px; }
            .features { position: absolute; right: 10; top: -6px; }
            .feature { }

            .under-level { color: #E88888; }

            /*.window-framework { box-shadow: none; }
            .window-framework .top-left { width: 6px; height: 6px; background-image: url(../images/tooltip-top-left.png); }
            .window-framework .top { height: 6px; background-image: url(../images/tooltip-top.png); background-size: 100% 6px; }
            .window-framework .top-right { width: 6px; height: 6px; background-image: url(../images/tooltip-top-right.png); }

            .window-framework .middle-left { width: 6px; background-image: url(../images/tooltip-middle-left.png); background-size: 6px 100%; }
            .window-framework .middle { background-image: url(../images/tooltip-middle.png); background-size: 150% 100%; min-width: 120px; }
            .window-framework .middle-right { width: 6px; background-image: url(../images/tooltip-middle-right.png); background-size: 6px 100%; }

            .window-framework .bottom-left { width: 6px; height: 6px; background-image: url(../images/tooltip-bottom-left.png); }
            .window-framework .bottom { height: 6px; background-image: url(../images/tooltip-bottom.png); background-size: 100% 6px; }
            .window-framework .bottom-right { width: 6px; height: 6px; background-image: url(../images/tooltip-bottom-right.png); }*/

            .window-framework { position: relative; }

            .header-middle .middle.content { height: 30px; }

            .content { font-family: Bitter; }
            #item-header { margin: -2px 0 4px; }
            #item-header img { vertical-align: middle; margin-right: 5px; }
            .item-name { line-height: 24px; position: relative; top: 2px; margin-right: 5px; font-family: BitterBold; }

            .item-color-white { color: #fff; }
            .item-color-green { color: #baf294; }
            .item-color-blue { color: #94e9f2; }
            .item-color-purple { color: #cc94f2; }
            .item-color-orange { color: #f2cc94; }

            #main * { text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.6 ); }

            .attributes { font-size: 14px; color: #CCEAFF; margin: 10px 0 0 12px; }
            .description { font-size: 14px; color: #fff; font-family: Bitter; }
            .description-margin { margin-top: 10px; }
            .flavor { font-size: 12px; font-family: BitterItalic; color: #FFF4D2; font-weight: normal; margin-top: 10px; }

        </style>
    </head>
    <body>

        <script data-template-name="main_template" type="text/x-handlebars">
            <div id="main">
                <div class="window-container">
                    <table cellspacing="0" cellpadding="0" class="window-framework">
                        {{#if App.tooltip.name}}
                            <tr class="header-top">
                                <td class="top-left"></td>
                                <td class="top"></td>
                                <td class="top-right"></td>
                            </tr>
                            <tr class="header-middle">
                                <td class="middle-left"></td>
                                <td class="middle content">
                                    <div id="item-header" class="serif group">
                                        {{#if App.tooltip.showImage}}
                                            <img width="24" height="24" class="icon" {{bindAttr src="App.tooltip.image"}}></img>
                                        {{/if}}
                                        <span {{bindAttr class="App.tooltip.nameColor :item-name"}}>{{App.tooltip.name}}</span>
                                    </div>
                                </td>
                                <td class="middle-right"></td>
                            </tr>
                            <tr class="header-bottom">
                                <td class="bottom-left"></td>
                                <td class="bottom"></td>
                                <td class="bottom-right"></td>
                            </tr>
                        {{else}}
                            <tr class="top-row">
                                <td class="top-left"></td>
                                <td class="top"></td>
                                <td class="top-right"></td>
                            </tr>
                        {{/if}}
                        <tr class="window-content">
                            <td class="middle-left"></td>
                            <td class="middle content">
                                <div class="features">
                                    {{#each feature in App.tooltip.features}}
                                        <img width="16" height="16" class="feature" {{bindAttr src="feature.icon"}}></img>
                                    {{/each}}
                                </div>
                                {{#if App.tooltip.showDetails}}
                                    <div class="serif details">
                                        {{#if App.tooltip.isEquipment}}
                                            <div>
                                                <span class="details">{{App.tooltip.equipment}}</span>
                                            </div>
                                        {{/if}}
                                        {{#if App.tooltip.showLevel}}
                                            <div>
                                                <span {{bindAttr class="App.tooltip.underLevel:under-level :details"}}>{{App.tooltip.level}}</span>
                                            </div>
                                        {{/if}}
                                        {{#if App.tooltip.showPower}}
                                            <div>
                                                <span class="details">{{App.tooltip.power}} Power</span>
                                            </div>
                                        {{/if}}
                                    </div>
                                {{/if}}
                                {{#if App.tooltip.hasAttributes}}
                                    <ul class="attributes">
                                        {{#each attribute in App.tooltip.attributes}}
                                            <li><span>{{attribute.text}}</span></li>
                                        {{/each}}
                                    </ul>
                                {{/if}}
                                {{#if App.tooltip.description}}
                                    <div {{bindAttr class="App.tooltip.descriptionNeedMargin:description-margin :description"}}>
                                        <span>{{App.tooltip.description}}</span>
                                    </div>
                                {{/if}}
                                {{#if App.tooltip.flavor}}
                                    <div class="flavor">
                                        <span>{{App.tooltip.flavor}}</span>
                                    </div>
                                {{/if}}
                            </td>
                            <td class="middle-right"></td>
                        </tr>
                        <tr>
                            <td class="bottom-left"></td>
                            <td class="bottom"></td>
                            <td class="bottom-right"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </script>


        <script type="text/javascript">
            App = Ember.Application.create();
            jQuery(document).ready(function($) {
                App.Attribute = Ember.Object.extend({
                    text: '',
                });

                App.Feature = Ember.Object.extend({
                    icon: '',
                });

                App.Tooltip = Ember.Object.extend({
                    image: '',
                    name: '',
                    description: '',
                    slot: '',
                    weapon: '',
                    isTool: false,
                    power: 0,
                    level: '',
                    underLevel: true,
                    quality: 0,
                    attributes: null,
                    features: null,
                    init: function() {
                        this.attributes = Ember.ArrayController.create({content: []});
                        this.features = Ember.ArrayController.create({content: []});
                    },
                    equipment: function() {
                        if ((this.get('slot') == '' && this.get('weapon') == '') || this.get('isTool')) {
                            return '';
                        } else if (this.get('weapon') == '') {
                            return this.get('slot');
                        } else {
                            return 'Weapon - ' + this.get('weapon');
                        }
                    }.property('slot', 'weapon'),
                    descriptionNeedMargin: function() {
                        return this.name;
                    }.property('name'),
                    isEquipment: function() {
                        return this.get('equipment') != '';
                    }.property('equipment'),
                    showPower: function() {
                        return this.power != 0;
                    }.property('power'),
                    showLevel: function() {
                        return this.level;
                    }.property('level'),
                    showDetails: function() {
                        return this.get('isEquipment') || this.get('showPower') || this.get('showLevel');
                    }.property('isEquipment', 'showPower', 'showLevel'),
                    hasAttributes: function() {
                        return this.attributes.content.length > 0;
                    }.property('attributes.@each'),
                    hasLevelOrAttributes: function() {
                        return this.get('showLevel') || this.get('hasAttributes');
                    }.property('showLevel', 'hasAttributes'),
                    showImage: function() {
                        return this.image !== "";
                    }.property('image'),
                    nameColor: function() {
                        if (this.quality == 255) {
                            return "item-color-orange";
                        } else if (this.quality >= 192) {
                            return "item-color-purple";
                        } else if (this.quality >= 128) {
                            return "item-color-blue";
                        } else if (this.quality >= 64) {
                            return "item-color-green";
                        } else {
                            return "item-color-white";
                        }
                    }.property('quality'),
                    show: function() {
                        $('.window-container').show();
                        Ember.run.scheduleOnce('afterRender', this, function() {
                            Crea.invoke("onResize", $(".window-framework").width(), $(".window-framework").height());
                        });
                    }
                });

                App.tooltip = App.Tooltip.create();

                // App.tooltip.set('image', 'asset://crea/mods/core/item/material/wood.png');
                // App.tooltip.set('name', 'Wood');
                // App.tooltip.set('description', 'This is a standard description with words in it.');
                // App.tooltip.attributes.pushObject(App.Attribute.create({text: "+5 Attack"}));
                // App.tooltip.attributes.pushObject(App.Attribute.create({text: "+8 Defense"}));
                // App.tooltip.features.pushObject(App.Feature.create({icon: "../images/item-block.png"}));
                // App.tooltip.features.pushObject(App.Feature.create({icon: "../images/item-consumable.png"}));

                var mainView = Ember.View.create({
                    templateName: 'main_template'
                });
                mainView.append();

                var tooltipArea = { x: 0, y: 0, width: 1, height: 1 };
                Crea.invoke("showTooltip", "item", 0, 0, tooltipArea);
            });

        </script>

    </body>
</html>
