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

        <style>

            body { margin: 0; overflow: hidden; }

            #materials.window { width: 230px; min-height: 160px; max-height: 300px; }

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

            #material_items { min-height: 160px; max-height: 300px; overflow: auto; padding: 0 2px 2px; }

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

            .material-slot { background-image: none; box-shadow: none; height: 36px; margin: 4px 4px; }

            .bar { position: absolute; bottom: 0px; }

            .bar-fill {
                width: 0%;
                -webkit-transition: width 0.5s linear;
                background-image: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0, rgba(80, 176, 111, 1.0)),
                    color-stop(1, rgba(110, 210, 140, 1.0))
                );
            }

            .bar-complete {
                width: 0%;
                -webkit-transition: width 0.5s linear;
                background-image: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0, rgba(185, 185, 52, 1.0)),
                    color-stop(1, rgba(255, 255, 139, 1.0))
                );
            }

            .clear { clear: both; }

        </style>
    </head>
    <body>

        <div id="materials" class="window" data-handle="Materials">

            <script data-template-name="materials" type="text/x-handlebars">
                {{#each App.materialController}}
                    {{#view App.MaterialView contentBinding="this"}}
                        <div class="itemslot material-slot">
                            <img width="24" height="24" {{bindAttr src="view.content.icon"}}></img>
                            <div class="stat-bar bar"><div {{bindAttr class="view.content.isComplete:bar-complete:bar-fill :stat-bar-fill" style="view.content.percentage"}}></div></div>
                        </div>
                    {{/view}}
                {{/each}}
            </script>

            <div id="material_items"></div>

        </div>

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

                App.MaterialItem = App.Item.extend({
                    researched: 0,
                    total: 0,
                    percentage: function() {
                        var p = this.researched / this.total * 100;
                        return "width: " + p + "%;"
                    }.property('researched', 'total'),
                    isComplete: function() {
                        return this.researched == this.total;
                    }.property('researched', 'total')
                });

                App.materialController = Ember.ArrayController.create({
                    content: [],
                    sortProperties: ['name'],
                    sortAscending: true
                });

                App.MaterialsView = App.ItemView.extend({
                    templateName: 'materials',
                    controller: App.materialController,
                });

                App.MaterialView = App.ItemView.extend({
                    click: function(event) {
                        //We only want this for the left click
                        if (this.content) {
                            Crea.invoke('clickedItem', this.content.index);
                        }
                    }
                });

                var view = App.MaterialsView.create();

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