<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/jquery-ui.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>Research</title>

        <style>

            body { margin: 0; }

            #inventory.window {
                width: 180px;
                height: 116px;
                -webkit-transition: height 1s;
            }

            .categories {
                margin: 10px 0px 0px 4px;
            }

            .category-icon {
                opacity: 0.6;
            }

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

            .category-icon.unavailable:hover {
                opacity: 0.5;
            }

            .category-selected {
                opacity: 1.0;
                background-color: rgba(255, 255, 255, 0.4);
                box-shadow: 0px 0px 4px rgba(255, 255, 255, 1.0);
            }

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

            .research-slot { left: 72px; }

            .research {
                margin-top: 8px;
                padding: 1px 8px;
                -webkit-transition: all 0.5s;
            }
            .clear { clear: both; }

            .research-bar { margin-top: 12px; height: 8px; }

            .research-bar-fill {
                width: 0%;
                -webkit-transition: width 3s 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))
                );
            }

        </style>
    </head>
    <body>

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

            <script data-template-name="inventory" type="text/x-handlebars">
                {{#view App.MaterialView contentBinding="App.research.item"}}
                    <div id="research-slot" class="itemslot research-slot">
                        {{#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}}
                <div class="clear"></div>

                <div class="categories group">
                    {{#each category in App.categories}}
                        {{#view App.CategoryView contentBinding="category"}}
                            <img width="24" height="24" {{bindAttr class="category.isSelected:category-selected category.isSelectable::unavailable :category-icon" src="category.icon"}}></img>
                        {{/view}}
                    {{/each}}
                </div>
                <div class="content-divisor"></div>

                {{#if App.research.isResearching}}
                    <div class="stat-bar research-bar"><div id="progress" class="stat-bar-fill research-bar-fill"></div></div>
                {{else}}
                    <div style="text-align: center;">
                        <button class="standard-button research" {{bindAttr disabled="App.research.disabled"}} {{action "research" target="App.inventoryView"}}>Research</button>
                        <button class="standard-button research" {{action "materials" target="App.inventoryView"}}>Materials</button>
                    </div>
                {{/if}}
            </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.Category = Ember.Object.extend({
                    key: "",
                    name: "",
                    icon: "",
                    isSelected: false,
                    isSelectable: false,
                });

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

                App.CategoryView = Ember.View.extend({
                    content: null,
                    classNames: ['category-icons'],
                    click: function() {
                        if (!this.content.get('isSelectable')) {
                            return;
                        }
                        if (App.research.get('category')) {
                            App.research.get('category').set('isSelected', false);
                        }
                        App.research.set('category', this.content);
                        this.content.set('isSelected', true);
                        forceRedraw();
                    },
                    mouseEnter: function() {
                        Crea.invoke('showTooltip', 'simple', getArea(this.$()), this.content.get('name'));
                    }
                });

                App.InventoryItem = App.Item.extend({
                    quantity: 0,
                    showIcon: function() {
                        return this.quantity && this.icon;
                    }.property('icon', 'quantity')
                });

                App.Research = Ember.Object.extend({
                    item: App.InventoryItem.create(),
                    category: null,
                    isResearching: false,
                    disabled: function() {
                        return this.item.content == 0 || this.category == null;
                    }.property('item.content', 'category'),
                    reset: function() {
                        this.beginPropertyChanges();
                        this.item.reset();
                        for (var i = 0; i < App.categories.content.length; ++i) {
                            var category = App.categories.content[i];
                            category.set('isSelected', false);
                            category.set('isSelectable', false);
                        }
                        this.set('category', null);
                        App.inventoryView.cancelResearch();
                        this.endPropertyChanges();
                    }
                });

                App.research = App.Research.create();

                App.InventoryView = App.ItemView.extend({
                    templateName: 'inventory',
                    research: function(event) {
                        App.research.set("isResearching", true);
                        Ember.run.later(this, function() {
                            Crea.invoke('playSound', 'mods/core/audio/sfx/ui/research[1-3].ogg');
                            document.getElementById('progress').addEventListener('webkitTransitionEnd', this.completeResearching);
                            $(".research-bar-fill").width("100%");
                        }, 100);
                    },
                    completeResearching: function(event) {
                        App.inventoryView.finishResearching();
                        Crea.invoke('researched', App.research.category.key);
                    },
                    cancelResearch: function() {
                        if (App.research.get("isResearching")) {
                            App.inventoryView.finishResearching();
                        }
                    },
                    finishResearching: function() {
                        App.research.set("isResearching", false);
                        document.getElementById('progress').removeEventListener('webkitTransitionEnd', this.completeResearching);
                        $(".research-bar-fill").addClass('notransition');
                        $(".research-bar-fill").width("0%");
                        $(".research-bar-fill").removeClass('notransition');
                    },
                    materials: function(event) {
                        Crea.invoke("clickedMaterials");
                    }
                });

                App.MaterialView = App.ItemView.extend({
                    mouseUp: function(event) {
                        if (this.content && this.content == App.clicked && !App.research.get("isResearching")) {
                            if (event.which == 1) {
                                Crea.invoke('clickedItem');
                            } else if (event.which == 3) {
                                Crea.invoke('splitItem');
                            }
                        }
                    },
                    mouseDown: function(event) {
                        App.clicked = this.content;
                    }
                });

                App.inventoryView = App.InventoryView.create();
                App.inventoryView.appendTo("#inv_items");
                populate();
            });
        </script>
    </body>
</html>