App = Ember.Application.create();

App.Item = Ember.Object.extend({
    id: 0,
    content: 0,
    name: '',
    icon: '',
    reset: function() {
        this.set('id', 0);
        this.set('content', 0);
        this.set('name', '');
        this.set('icon', '');
    },
});

App.ItemPlus = App.Item.extend({
    bagIndex: -1,
    index: 0,
    flashId: function() {
        return "flash_" + this.get('bagIndex') + "_" + this.get('index');
    }.property('index'),
    flash: function() {
        element = document.getElementById(this.get('flashId'));
        element.classList.remove("flash-item");
        element.offsetWidth = element.offsetWidth;
        element.classList.add("flash-item");
    }
});

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

App.ItemView = Ember.View.extend({
    content: null,
    didInsertElement: function() {
        this.$('div').tracking();
    },
    mouseEnter: function() {
        if (this.content != null && (this.content.get('id') != 0 || this.content.get('content') != 0)) {
            var area = getArea(this.$('div'));
            Crea.invoke('showTooltip', 'item', area, this.content.get('id'), this.content.get('content'));
        }
    },
    watchContent: function() {
        if (this.$('div').hovering()) {
            var area = getArea(this.$('div'));
            Crea.invoke('showTooltip', 'item', area, this.content.get('id'), this.content.get('content'));
        }
    }.observes('content.id', 'content.content')
});

App.InventoryItemView = App.ItemView.extend({
    mouseUp: function(event) {
        if (this.content && this.content == App.clicked) {
            if (event.which == 1) {
                Crea.invoke('clickedItem', this.content.index);
            } else if (event.which == 3) {
                Crea.invoke('splitItem', this.content.index);
            }
        }
    },
    mouseDown: function(event) {
        App.clicked = this.content;
    }
});

App.InventoryBag = App.ItemPlus.extend({
    items: null,
    isSelected: false,
    init: function() {
        this._super();
        this.items = Ember.ArrayController.create({ content: []});
    },
    number: function() {
        return this.index + 1;
    }.property('index'),
    finalIcon: function() {
        if (this.icon != "") {
            return this.icon;
        } else {
            return "../images/bag.png";
        }
    }.property('icon'),
    exists: function() {
        return this.icon;
    }.property('icon'),
    isEmpty: function() {
        for (var i = 0; i < bag.items.content.length; ++i) {
            if (bag.items.content[i].get('quantity') > 0) {
                return true;
            }
        }
        return false;
    }.property('items.@each.quantity')
});

App.Inventory = Ember.Object.extend({
    bags: null,
    activeBag: 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.set('activeBag', 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('isEmpty')) {
                        this.set('activeBag', this.bags.content[i]);
                        break;
                    }
                }
            } else {
                this.set('activeBag', 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);
    }
});

App.StatBar = Ember.Object.extend({
    name: "",
    element: "",
    value: 0,
    max: 0,
    id: function() {
        return this.get("name").toLowerCase() + "_bar";
    }.property('name'),
    init: function() {
        this._super();
        this.element = "#" + this.get("id");
        Ember.run.scheduleOnce('afterRender', this, function() {
            this.handleChanged();
        });
    },
    handleChanged: function() {
        if (this.get("max") > 0 && $(this.element).exists()) {
            var percentage = Math.round((this.get("value") / this.get("max")) * 100);
            jQuery(this.element).css('width', percentage + '%');
        }
    }.observes('value', 'max'),
});

App.LevelTracker = Ember.Object.extend({
    name: "",
    level: 0,
    points: null,
    init: function() {
        this._super();
        this.points = App.StatBar.create({name: this.name});
    }
});

function getArea(element) {
    var offset = element.offset();
    return { x: offset.left, y: offset.top, width: element.width(), height: element.height() };
}

App.ToggleButton = Ember.Button.extend({
    classNames: ['toggle-button'],
    checked: false,
    click: function() {
        this.set('checked', !this.get('checked'));
    },
    observeChecked: function() {
        this.$().toggleClass('checked', this.get('checked'));
    }.observes('checked')
});

App.FocusedTextField = Ember.TextField.extend({
    attributeBindings: ['autofocus'],
    autofocus: 'autofocus'
});
