define([
	'js/system/events',
	'js/system/client',
	'html!ui/templates/trade/template',
	'css!ui/templates/trade/styles',
	'html!ui/templates/inventory/templateItem'
], function(
	events,
	client,
	template,
	styles,
	tplItem
) {
	return {
		tpl: template,

		centered: true,

		modal: true,

		postRender: function() {
			this.onEvent('onGetTradeList', this.onGetTradeList.bind(this));
		},

		onGetTradeList: function(itemList, action) {
			this.find('.heading-text').html(action);

			var uiInventory = $('.uiInventory').data('ui');

			var container = this.el.find('.grid')
				.empty();

			var buyItems = itemList.items;

			buyItems.forEach(function(item) {
				var prefix = -1;
				['quest', 'material', 'ability'].forEach(function(p, i) {
					if (item[p])
						prefix += 1 + i;
				});
				if (prefix == -1)
					prefix = 3 + item.slot + item.type;

				item.sortName = prefix + item.name + item.level + item.id;

				if ((item == this.hoverItem))
					this.onHover(null, item);
			}, this);

			buyItems.sort(function(a, b) {
				if (a.sortName < b.sortName)
					return -1;
				else if (a.sortName > b.sortName)
					return 1;
				else
					return 0;
			});

			var iLen = Math.max(buyItems.length, 50);
			for (var i = 0; i < iLen; i++) {
				if (!buyItems[i]) {
					$(tplItem).appendTo(container);		

					continue;
				}

				var item = $.extend(true, {}, buyItems[i]);
				item.worth = ~~(itemList.markup * item.worth);

				var size = 64;
				var offset = 0;

				var spritesheet = item.spritesheet || 'items';
				if (item.material)
					spritesheet = 'materials';
				else if (item.quest)
					spritesheet = 'questItems';
				else if (item.type == 'skin') {
					offset = 13.5;
					size = 32;
					spritesheet = 'charas';
				}

				var imgX = (-item.sprite[0] * size) + offset;
				var imgY = (-item.sprite[1] * size) + offset;

				var itemEl = $(tplItem)
					.appendTo(container);

				itemEl
					.data('item', item)
					.on('click', this.onClick.bind(this, itemEl, item, action))
					.on('mousemove', this.onHover.bind(this, itemEl, item, action))
					.on('mouseleave', uiInventory.hideTooltip.bind(uiInventory, itemEl, item))
					.find('.icon')
					.css('background', 'url(../../../images/' + spritesheet + '.png) ' + imgX + 'px ' + imgY + 'px');

				if (item.quantity)
					itemEl.find('.quantity').html(item.quantity);
				else if (item.eq)
					itemEl.find('.quantity').html('EQ');

				if (action == 'buy') {
					if (item.worth > window.player.trade.gold)
						$('<div class="no-afford"></div>').appendTo(itemEl);
				}

				if (item.eq)
					itemEl.addClass('eq');
				else if (item.isNew) {
					itemEl.addClass('new');
					itemEl.find('.quantity').html('NEW');
				}
			}

			this.center();
			this.show();
			events.emit('onShowOverlay', this.el);
		},

		onClick: function(el, item, action, e) {
			el.addClass('disabled');

			client.request({
				cpn: 'player',
				method: 'performAction',
				data: {
					cpn: 'trade',
					method: 'buySell',
					data: {
						itemId: item.id,
						action: action
					}
				},
				callback: this.onServerRespond.bind(this, el)
			});

			var uiInventory = $('.uiInventory').data('ui');
			uiInventory.hideTooltip(el, item, e);
		},

		onHover: function(el, item, action, e) {
			var uiInventory = $('.uiInventory').data('ui');
			uiInventory.onHover(el, item, e);

			var canAfford = true;
			if (action == 'buy')
				canAfford = item.worth <= window.player.trade.gold;

			var uiTooltipItem = $('.uiTooltipItem').data('ui');
			uiTooltipItem.showWorth(canAfford);
		},

		onServerRespond: function(el) {
			el.removeClass('disabled');
		}
	};
});