<html>
    <head>
            <title>Toolbar</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; margin: 0; text-align: center; }

            #toolbar {
                background-image: url(../images/hud-dark-bg.png);
                height: 44px;
                padding: 3px;
                border-radius: 5px;
                display: inline-block;
            }

            .actions {
                background-image: url(../images/hud-dark-bg.png);
                height: 44px;
                width: 114px;
                position: relative;
                margin-left: 370px;
                top: 3px;
                border-top: 3px solid #333;
                border-radius: 20px 20px 0 0;
            }

            .actions-panel {
                height: 40px;
                position: relative;
                margin: 0px 3px 4px;
                padding-top: 4px;
                border-radius: 20px 20px 0 0;
                background-image: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0.5, rgba(150,150,150,0.7)),
                    color-stop(1, rgba(175,175,175,0.7))
                );
            }

            .actions-content {
                margin: 0px 15px;
            }

            #actions .tool { float: left; margin-left: 1px; }

            .left-text {
                position: absolute;
                top: 15px;
                left: 6px;
            }

            .right-text {
                position: absolute;
                top: 15px;
                left: 94px;
            }

            .systems {
                height: 36px;
                width: 172px;
            }

            .systems-panel {
                margin: 3px 3px 4px;
                border-radius: 0 0 5px 5px;
                box-shadow: 0 0 3px 0 rgba(0,0,0,0.7);
                background-image: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0.5, rgba(100,100,100,0.7)),
                    color-stop(1, rgba(150,150,150,0.7))
                );
            }

            .systems-content {
                margin: 0px 6px;
            }

            .systems-button {
                float: left;
                display: inline-block;
                width: 24px;
                height: 24px;
                background-repeat: no-repeat;
                margin: 5px 4px 0px;
                opacity: 0.65;
            }

            .systems-button:hover { opacity: 1.0; }

            .systems-button.unavailable {
                opacity: 0.25;
                -webkit-filter: grayscale(75%);
            }

            .systems-button.unavailable:hover {
                opacity: 0.5;
            }

            .tool-panel { border-radius: 5px; padding: 3px 3px 4px; float: left;
                box-shadow: 0 0 3px 0 rgba(0,0,0,0.7);
                background-image: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0.5, rgba(100,100,100,0.7)),
                    color-stop(1, rgba(150,150,150,0.7))
                ); }

            #vitals { width: 172px; padding: 6px 0 4px; margin-right: 5px; padding-right: 5px;}

                #vitals .info_div { overflow: hidden; margin: 0 0 5px; padding-left: 5px; }
                #vitals .info_div:last-child { overflow: hidden; margin: 0 0 5px; }

                #vitals .stat-label { float: left; line-height: 1; font-size: 11px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9); }
                #vitals .stat-container { margin-left: 22px; font-size: 10px; font-family: sans-serif; font-weight: bold; }
                #vitals .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; }

                .stat-bar { height: 6px; }

                #vitals .stats-container {
                    width: 100%;
                    -webkit-transition: width 500ms;
                }

                @-webkit-keyframes cooldown-frames {
                    to { height: 0%; }
                }

                .breath-container {
                    float: right;
                    margin-left: 5px;
                    width: 32px;
                    height: 32px;
                    overflow: hidden;
                    position: relative;
                    background-image: url(../images/breath-empty.png);
                }

                .breath {
                    height: 50%;
                    width: 100%;
                    -webkit-transform: rotate(180deg);
                    position: absolute;
                    bottom: 0px;
                    background-image: url(../images/breath-full.png);
                    -webkit-transition: height 1s;
                }

            #tools { width: 370px; margin-right: 5px; }

                #tools .tool { float: left; margin-left: 1px; }
            #tools .tool .number { position: absolute; top: -1px; left: 1px; font-size: 9px; line-height: 1; color: #aaa;
                    text-shadow: 1px 1px 1px #333; }
                #tools .tool.selected { box-shadow: inset 0 0 2px 1px rgba(0,0,0,0.5), 0 0 5px 1px rgba(255,255,255,0.6);
                    background-image: -webkit-gradient(
                        linear,
                        left bottom,
                        left top,
                        color-stop(0.5, rgba(255,255,255,0.2)),
                        color-stop(1, rgba(255,255,255,0.0))
                    );
                }

            #currency { text-align: center; }

                .currency-slot { width: 36px; height: 36px; overflow: hidden; }
                #currency-icon { width: 24px; height: 24px; background-image: url(../images/goldleaf.png); margin: 0 auto; }
                #currency-text { color: #fff; letter-spacing: -0.1em; font-size: 11px;
                    font-weight: bold; text-shadow: -1px 0 #222, 0 1px #222, 1px 0 #222, 0 -1px #222;  }

            #effects { position: absolute; bottom: 88px; background: transparent none; padding: 0; }
                .effect .itemslot { width: 24px; height: 24px; margin: 0 2px 0 0;
                    background-color: rgba(255,255,255,0.3); }
                .effect .itemslot .icon { margin: 0; }

            .unavailable { opacity: .5; }
            .unavailable-slot { background: rgba(0, 0, 0, 0.9); }

            @-webkit-keyframes cooldown-frames {
                to { height: 0%; }
            }

            .unavailable-slot {
                background: rgba(0,0,0,0.2);
                width: 100%;
                height: 100%;
                left: 0;
                bottom: 0;
                position: absolute;
            }

            .cooldown {
                background: rgba(0,0,0,0.3);
                width: 100%;
                height: 50%;
                left: 0;
                bottom: 0;
                position: absolute;
                -webkit-animation-name: cooldown-frames;
                -webkit-animation-iteration-count: 1;
                -webkit-animation-timing-function: linear;
                -webkit-animation-fill-mode: forwards;
            }

        </style>
    </head>
    <body>

        <div id="actions"></div>
        <div id="toolbar">

            <div id="vitals" class="character_vitals tool-panel"></div>

            <div id="effects"></div>

            <div id="tools" class="tool-panel"></div>

            <div id="systems" class="tool-panel"></div>

            <!-- div id="currency" class="tool-panel"></div//-->

        </div>

        <script data-template-name="tool_template" type="text/x-handlebars">
            <div {{bindAttr class="view.isSelected:selected :tool :itemslot"}}>
                {{#if view.isSelected}}
                    <span class="selected-indicator"></span>
                {{/if}}
                {{#if view.item.hasIcon}}
                    <img width="24" height="24" {{bindAttr src="view.item.icon" class="view.item.isUnavailable:unavailable"}}></img>
                {{/if}}

                {{#if view.item.hasCooldown}}
                    <div class="cooldown" {{bindAttr style="view.item.duration"}}>
                    </div>
                {{/if}}

                <div {{bindAttr class="view.item.isUnavailable:unavailable-slot"}}>
                </div>

                {{#if view.showNumber}}
                    <span id="number" class="number sans-serif">{{view.tool.number}}</span>
                {{/if}}
                {{#if view.item.quantity}}
                    <span id="quantity" class="quantity sans-serif">{{view.item.quantity}}</span>
                {{/if}}
            </div>
        </script>

        <script data-template-name="actions" type="text/x-handlebars">
            <div class="actions-panel">
                <div class="actions-content">
                    <span class="small serif left-text">L</span>
                    {{#if App.toolbar.selected}}
                        {{view App.ToolView toolBinding="App.toolbar.selected" itemBinding="App.toolbar.selected.left" showNumberBinding="false"}}
                        {{view App.ToolView toolBinding="App.toolbar.selected" itemBinding="App.toolbar.selected.right" showNumberBinding="false"}}
                    {{/if}}
                    <span class="small serif right-text">R</span>
                </div>
            </div>
        </script>

        <script data-template-name="systems" type="text/x-handlebars">
                <div class="systems-content">
                    {{#each App.systems}}
                        {{#view App.SystemButtonView contentBinding="this"}}
                            <img width="24" height="24" {{bindAttr class="this.isAvailable::unavailable :systems-button" src="this.icon"}}></img>
                        {{/view}}
                    {{/each}}
                </div>
        </script>

        <script data-template-name="vitals" type="text/x-handlebars">
            <div class="breath-container">
                <div class="breath"></div>
            </div>
            <div class="stats-container">
                <div class="hp_div info_div sans-serif">
                    <span id="hp_label" class="stat-label">HP</span>
                    <div class="stat-container">
                        <div class="stat-text">
                            <span id="hp_amount" class="number">{{App.vitals.hp.value}}</span>
                            <span class="divider">/</span>
                            <span id="hp_max_amount" class="number">{{App.vitals.hp.max}}</span>
                        </div>
                        <div class="stat-bar"><div id="hp_bar" class="stat-bar-fill"></div></div>
                    </div>
                </div>
                <div class="sp_div info_div sans-serif">
                    <span id="sp_label" class="stat-label">SP</span>
                    <div class="stat-container">
                        <div class="stat-text">
                            <span id="sp_amount" class="number">{{App.vitals.sp.value}}</span>
                            <span class="divider">/</span>
                           <span id="sp_max_amount" class="number">{{App.vitals.sp.max}}</span>
                        </div>
                        <div class="stat-bar"><div id="sp_bar" class="stat-bar-fill"></div></div>
                    </div>
                </div>
            </div>
        </script>

        <script data-template-name="toolbar" type="text/x-handlebars">
            {{#each tool in App.toolbarController}}
                {{view App.ToolView toolBinding="tool" itemBinding="tool.current"}}
            {{/each}}
        </script>

        <script data-template-name="currency_template" type="text/x-handlebars">
            <div id="currency-icon"></div>
            <span id="currency-text" class="sans-serif small">{{App.vitals.currency}}</span>
        </script>

        <script data-template-name="effects_template" type="text/x-handlebars">
        {{#each App.effectsController}}
            <div class="effect itemslot">
                <img class="effect icon" {{bindAttr src="icon"}}></img>
                <div class="spinner-container item-spinner">
                    <div class="spinner">
                        <span><em {{bindAttr style="duration"}}></em></span>
                        <span><em {{bindAttr style="duration"}}></em></span>
                    </div>
                </div>
                <span class="sans-serif small">{{timer}}</span>
            </div>
        {{/each}}
        </script>

        <script type="text/javascript" src="../js/model.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                App.BreathMeter = Ember.Object.extend({
                    value: 0,
                    max: 0,
                    showAction: '',
                    didInsertElement: function() {
                        handleChanged();
                    },
                    handleChanged: function() {
                        if (this.get("max") > 0) {
                            var percentage = Math.round(((this.get("max") - this.get("value")) / this.get("max")) * 100);
                            jQuery('.breath').css('height', percentage + '%');
                        }
                        if (this.get('value') == this.get('max')) {
                            jQuery('.breath-container').hide();
                            jQuery('.stats-container').css('width', '100%');
                            if (this.showAction) {
                                Ember.run.cancel(this.showAction);
                                this.showAction = '';
                            }
                        } else if (!$(".breath-container").is(":visible")) {
                            this.showAction = Ember.run.later(this, function() {
                                jQuery('.breath-container').show();
                            }, 400);
                            jQuery('.stats-container').css('width', '80%');
                        }
                    }.observes('value', 'max'),
                });

                App.Vital = Ember.Object.extend({
                    hp: null,
                    sp: null,
                    breath: null,
                    currency: 0,
                    init: function() {
                        this.hp = App.StatBar.create({name: "hp"});
                        this.sp = App.StatBar.create({name: "sp"});
                        this.breath = App.BreathMeter.create();
                    }
                });

                App.vitals = App.Vital.create();

                App.ToolItem = App.Item.extend({
                    talentName: '',
                    skillName: '',
                    quantity: 0,
                    cooldown: 0,
                    cooldownTotal: 0,
                    isSkillAvailable: false,
                    slot: '',
                    isItem: function() {
                        return this.content != 0 && this.talentName == "" && this.skillName == "";
                    }.property('content', 'talentName', 'skillName'),
                    isEmpty: function() {
                        return this.id == 0 && this.content == 0 && this.talentName == "" && this.skillName == "";
                    }.property('id', 'content', 'talentName', 'skillName'),
                    isAvailable: function() {
                        return this.quantity > 0 || this.isSkillAvailable;
                    }.property('quantity', 'isSkillAvailable'),
                    isUnavailable: function() {
                        return Boolean(this.icon) && this.quantity == 0 && !this.isSkillAvailable;
                    }.property('icon', 'quantity', 'isSkillAvailable'),
                    hasCooldown: function() {
                        return this.cooldown > 0 && this.cooldownTotal > 0;
                    }.property('cooldown'),
                    duration: function() {
                        var percentage = this.cooldown / this.cooldownTotal * 100;
                        return "height: " + percentage + "%;\
                            -webkit-animation-duration:" + this.cooldown.toString() + "ms;";
                    }.property('cooldown'),
                    setCooldown: function(current, total) {
                        Ember.run(this, function() {
                            this.set('cooldown', 0);
                        });
                        this.set('cooldown', current);
                        this.set('cooldownTotal', total);
                    },
                    hasIcon: function() {
                        return this.icon != "";
                    }.property('icon')
                });

                App.Tool = Ember.Object.extend({
                    left: null,
                    right: null,
                    current: null,
                    index: 0,
                    isSelected: false,
                    init: function() {
                        this.left = App.ToolItem.create({slot: 'left'});
                        this.right = App.ToolItem.create({slot: 'right'});
                        this.current = this.left;
                    },
                    number: function() {
                        return this.index + 1;
                    }.property('index')
                });

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

                App.ToolbarView = Ember.View.extend({
                    templateName: 'toolbar',
                    controller: App.toolbarController,
                    selected: null,
                    select: function(index) {
                        if (this.selected != null) {
                            this.selected.set('isSelected', false);
                        }
                        var selected = App.toolbarController.content[index];
                        selected.set('isSelected', true);
                        this.set('selected', selected);
                    }
                });

                App.ToolView = Ember.View.extend({
                    templateName: 'tool_template',
                    tool: null,
                    item: null,
                    showNumber: true,
                    isSelected: function() {
                        return this.showNumber && this.tool.get('isSelected');
                    }.property('tool.isSelected', 'showNumber'),
                    click: function(event) {
                        if (this.tool) {
                            Crea.invoke('clickedSlot', this.tool.index, this.item.slot, false);
                        }
                    },
                    contextMenu: function(event) {
                        if (this.tool) {
                            Crea.invoke('clickedSlot', this.tool.index, this.item.slot, true);
                        }
                    },
                    didInsertElement: function() {
                        this.$('div').tracking();
                    },
                    showTooltip: function() {
                        if (this.item != null && !this.item.get('isEmpty')) {
                            var area = getArea(this.$('div'));
                            if (this.item.get('isItem')) {
                                Crea.invoke('showTooltip', 'item', area, this.item.get('id'), this.item.get('content'));
                            } else {
                                Crea.invoke('showTooltip', 'skill', area, this.item.talentName, this.item.skillName, false);
                            }
                        } else {
                            Crea.invoke('showTooltip', 'hide');
                        }
                    },
                    mouseEnter: function() {
                        this.showTooltip();
                    },
                    watchContent: function() {
                        if (this.$('div').hovering()) {
                            this.showTooltip();
                        }
                    }.observes('item', 'item.id', 'item.content', 'item.skillName')
                });

                App.CurrencyView = Ember.View.extend({
                    templateName: 'currency_template',
                    classNames: ["currency-slot"],
                });

                App.effectsController = Ember.ArrayController.create({ content: [] });
                App.Effect = Ember.Object.extend({
                    init: function() {
                        this.updateTimer(0);
                    },
                    name: "",
                    icon: "",
                    cooldown: 0,
                    remaining: 0,
                    timer: function() {
                        if (this.remaining >= 60000) {
                            return (Math.round(this.remaining / 60000)).toString() + "m";
                        } else if (this.remaining >= 10000) {
                            return (Math.round(this.remaining / 1000)).toString() + "s";
                        } else {
                            return (Math.round(this.remaining / 100) / 10).toFixed(1) + "s";
                        }
                    }.property('remaining'),
                    updateTimer: function(time) {
                        if (time > 0) {
                            this.set('remaining', this.get('remaining') - time);
                        }
                        var remaining = this.get('remaining');
                        if (remaining > 0) {
                            var time = 100;
                            if (remaining > 60000) {
                                time = remaining % 60000;
                                if (time == 0) {
                                    time = 60000;
                                }
                            } else if (remaining > 10000) {
                                time = remaining % 1000;
                                if (time == 0) {
                                    time = 1000;
                                }
                            }
                            Ember.run.later(this, 'updateTimer', time, time);
                        }
                    },
                    duration: function() {
                        return "-webkit-animation-duration:" + this.cooldown.toString() + "ms;"
                    }.property('cooldown')
                });
                App.EffectsView = Ember.View.extend({
                    templateName: 'effects_template',
                });

                App.SystemButton = Ember.Object.extend({
                    key: '',
                    tooltip: '',
                    icon: '',
                    isAvailable: true,
                    isUnavailable: Ember.computed.not('isAvailable')
                });

                App.SystemButtonView = Ember.View.extend({
                    content: null,
                    click: function() {
                        if (this.content != null && this.content.get('isAvailable')) {
                            Crea.invoke('toggleSystem', this.content.key);
                        }
                    },
                    mouseEnter: function() {
                        Crea.invoke('showTooltip', 'simple', getArea(this.$('img')), this.content.get('tooltip'));
                    },
                });


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

                var actionsView = Ember.View.create({templateName: 'actions', classNames: ['actions']});
                var systemsView = Ember.View.create({templateName: 'systems', classNames: ['systems']});
                var vitalView = Ember.View.create({templateName: 'vitals'});
                App.toolbar = App.ToolbarView.create();
                var currencyView = App.CurrencyView.create();
                var effectsView = App.EffectsView.create();

                actionsView.appendTo("#actions");
                systemsView.appendTo("#systems");
                vitalView.appendTo("#vitals");
                App.toolbar.appendTo("#tools");
                currencyView.appendTo("#currency");
                effectsView.appendTo("#effects");
                populate();
            });

            function loadUrl(url) {
                location.href = url;
                return false;
            }

            /* copy-pasted from model.js; might be redundant */
            function getArea(element) {
                var offset = element.offset();
                return { x: offset.left, y: offset.top, width: element.width(), height: element.height() };
            }
        </script>

    </body>
</html>
