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

        <style>

            body { margin: 0; }

            #treasure.window { width: 184px; }

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

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

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

            .loot_button {
                width: 60px;
                display: block;
                text-align: center;
                margin: 0 auto;
                margin-top: 10px;
            }

        </style>
    </head>
    <body>
        <div id="treasure" class="window" data-handle="Treasure">
            <script data-template-name="treasure" type="text/x-handlebars">
                {{#each App.inventory.activeBag.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}}

                <div style="clear: both;"></div>
                <div class="content-divisor"></div>

                <button class="loot_button" {{action loot target="view"}} {{bindAttr disabled="App.inventory.cannotLoot"}}>Loot All</button>
            </script>

            <div id="treasure_items"></div>

        </div>

        <script type="text/javascript" src="../js/model.js"></script>
        <script type="text/javascript">
            $(document).bind('creaWindowLoaded', function() {
                App.TreasureInventory = App.Inventory.extend({
                    canLoot: function() {
                        if (this.bags.content.length > 0) {
                            return this.bags.content[0].get('isEmpty');
                        }
                        return false;
                    }.property('bags.@each.isEmpty'),
                    cannotLoot: Ember.computed.not('canLoot')
                });

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

                App.TreasureView = App.ItemView.extend({
                    templateName: 'treasure',
                    loot: function() {
                        Crea.invoke('loot');
                    }
                });

                var view = App.TreasureView.create();

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