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

        <style>

            body { margin: 0; }

            #inventory.window { width: 184px; min-height: 236px; }

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

            body#toolbar { padding: 0px; margin: 0px; width: 100%; height: 36px; z-index: -1; border: 1px solid #fcf; }

            #inv_items { overflow: hidden; padding: 0 2px 2px; }

            .qty_div { position: absolute; bottom: -1px; right: 1px; }
            .quantity { color: #fff; }

            .empty-bag-slot { -webkit-filter: grayscale(100%); }
            .bag.selected { box-shadow: inset 0 0 2px 1px rgba(0,0,0,0.2), 0 0 5px 1px rgba(255,255,255,0.3);
                background-image: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0.5, rgba(255,255,255,0.3)),
                    color-stop(1, rgba(255,255,255,0.0))
                );
            }
        </style>
    </head>
    <body>

        <div id="inventory" class="window" data-handle="Inventory">

            <script data-template-name="inventory" type="text/x-handlebars">
                <div class="bags">
                    {{#each bag in App.inventory.bags}}
                        {{#view App.BagView contentBinding="bag"}}
                            <div class="bagslot itemslot">
                                <div {{bindAttr id="view.content.flashId"}}></div>
                                <div {{bindAttr class="view.content.isSelected:selected :bag"}}>
                                    {{#if view.content.isSelected}}
                                        <span class="selected-indicator"></span>
                                    {{/if}}
                                    <img width="24" height="24" {{bindAttr src="view.content.finalIcon" class="view.content.exists::empty-bag-slot"}}></img>
                                </div>
                            </div>
                        {{/view}}
                    {{/each}}
                </div>
                <div style="clear: both;"></div>
                <div class="content-divisor"></div>

                {{#each App.inventory.selectedBag.items}}
                    {{#view App.InventoryItemView contentBinding="this"}}
                        <div class="itemslot">
                            <div {{bindAttr id="view.content.flashId"}}></div>
                            {{#if view.content.showIcon}}
                                <img width="24" height="24" {{bindAttr src="view.content.icon"}}></img>
                            {{/if}}
                            <div class="qty_div">
                                {{#if view.content.quantity}}
                                    <span class="quantity tiny-text">{{view.content.quantity}}<span>
                                {{/if}}
                            </div>
                        </div>
                    {{/view}}
                {{/each}}
            </script>

            <div id="inv_items"></div>

        </div>

        <script type="text/javascript" src="../js/model.js"></script>
        <script type="text/javascript">
            $(document).bind('creaWindowLoaded', function() {

                App.Inventory = Ember.Object.extend({
                    bags: null,
                    selectedBag: null,
                    init: function() {
                        this._super();
                        this.bags = Ember.ArrayController.create({ content: []});
                    },
                    addBag: function(index, size, icon) {
                        var bag = App.InventoryBag.create();
                        bag.set('index', index);
                        if (this.bags.content.length == 0) {
                            this.selectBag(bag);
                        }
                        this.bags.pushObject(bag);
                        this.updateBag(index, size, icon, false);
                        return bag;
                    },
                    updateBag: function(index, size, icon, updateActive) {
                        var bag = this.bags.content[index];
                        if (updateActive) {
                            if (size == 0) {
                                for (var i = 0; i < this.bags.content.length; ++i) {
                                    if (this.bags.content[i].get('exists')) {
                                        this.selectBag(this.bags.content[i]);
                                        Crea.invoke('changeBag', i);
                                        break;
                                    }
                                }
                            } else {
                                this.selectBag(bag);
                            }
                        }
                        bag.beginPropertyChanges();
                        bag.items.clear();
                        for (var i = 0; i < size; ++i) {
                            bag.items.pushObject(App.InventoryItem.create({bagIndex: index}));
                        }
                        bag.set('icon', icon);
                        bag.endPropertyChanges();
                    },
                    removeBag: function() {
                        this.bags.removeAt(this.bags.content.length - 1);
                    },
                    selectBag: function(bag) {
                        if (this.get('selectedBag') != null) {
                            this.get('selectedBag').set('isSelected', false);
                        }
                        this.set('selectedBag', bag);
                        bag.set('isSelected', true);
                    }
                });

                App.inventory = App.Inventory.create();

                App.InventoryView = App.ItemView.extend({
                    templateName: 'inventory'
                });

                App.BagView = Ember.View.extend({
                    content: null,
                    click: function(event) {
                        if (this.content && this.content.get('exists')) {
                            App.inventory.selectBag(this.content);
                            Crea.invoke('changeBag', this.content.index);
                        }
                    },
                    contextMenu: function(event) {
                        if (this.content) {
                            Crea.invoke('clickedBag', this.content.index);
                        }
                    },
                    didInsertElement: function() {
                        this.$('div').tracking();
                    },
                    showTooltip: function() {
                        if (this.content.get('exists')) {
                            Crea.invoke('showTooltip', 'simple', getArea(this.$()), 'Inventory (ctrl+' + this.content.get('number') + ')');
                        } else {
                            Crea.invoke('showTooltip', 'simple', getArea(this.$()), 'Empty Inventory');
                        }
                    },
                    mouseEnter: function() {
                        this.showTooltip();
                    },
                    watchContent: function() {
                        if (this.$('div').hovering()) {
                            this.showTooltip();
                        }
                    }.observes('content.exists')
                });

                var view = App.InventoryView.create();

                view.appendTo("#inv_items");
                populate();
            });
        </script>
    </body>
</html>