Vn.Catalog = new Class
({
	Extends: Vn.Form
	
	,_menuShown: false

	,open: function ()
	{
		if (this.basketChecked)
			this.parent ();
	}
	
	,activate: function ()
	{
		if (!Vn.Url.getQuery ('guest'))
		{		
			Vn.BasketChecker.check (this.conn,
				this.onBasketCheck.bind (this));
		}
		else
		{
			var query = 'CALL basket_configure_for_guest ()';
			this.conn.execQuery (query, this.onBasketForGuest.bind (this));
		}
	}
	
	,close: function ()
	{
		if (this.node)
		{
			this.gui.$('top-bar').style.backgroundColor = '';
			Vn.Node.remove (this.$('right-panel'));
		}

		this.parent ();
	}

	,onBasketForGuest: function ()
	{
		this.onBasketCheck (true);
	}

	,onBasketCheck: function (isOk)
	{
		if (!isOk)
			return;
	
		this.basketChecked = true;
		this.open ();
		
		document.body.appendChild (this.$('right-panel'));

		this.popup = new Htk.Popup ();
		this.popup.setChildNode (this.$('lots-popup'));
	
		this.$('items-model').setInfo ('a', 'Articles', 'vn2008', ['Id_Article']);
		this.setView ('GRID');
	}
	
	,onSwitchViewClick: function ()
	{
		this.setView (this.view == 'LIST' ? 'GRID' : 'LIST');
	}
	
	,setView: function (view)
	{
		if (this.viewNode)
		{
			Vn.Node.remove (this.viewNode);
			this.viewHolder.model = null;
		}
	
		if (view == 'GRID')
		{
			this.view = 'GRID';
			this.viewNode = this.$('grid-view').getNode ();
			this.viewHolder = this.$('grid-view');
		}
		else
		{
			this.view = 'LIST';
			this.viewNode = this.$('list-view');
			this.viewHolder = this.$('items-grid');
		}
		
		this.$('main').appendChild (this.viewNode);
		this.viewHolder.model = this.$('items-model');
	}
	
	,typeRenderer: function (builder, form)
	{
		var link = builder.$('link');
		link.href = this.hash.make ({'type': form.get ('tipo_id')}, true);
	}
	
	,realmRenderer: function (builder, form)
	{
		var link = builder.$('link');
		link.href = this.hash.make ({
			'form': this.hash.get ('form'),
			'realm': form.get ('id')
		});
		
		var img = builder.$('image');
		img.src = 'image/family/'+ form.get ('id') +'.svg';
		img.title = form.get ('reino');
		img.alt = img.title;
	}

	,onTypeChange: function ()
	{
		if (this._menuShown && this.$('type').value)
			this.hideMenu ();

		var realms = this.$('realms-model');
		return;
		
		if (!realms.ready)
			return;
		
		this.refreshTitle ();

		var color = null;
		
		if (this.$('type').value)
		{
			var row = realms.search ('id', this.$('realm').value);

			if (row != -1)
				color = '#'+ realms.get (row, 'color');
		}

		this.gui.$('top-bar').style.backgroundColor = color;
	}
	
	,refreshTitle: function (title)
	{
		var types = this.$('types-model');
		
		if (!types.ready)
			return;
		
		var title = _('Catalog');
		
		if (this.$('type').value)
		{
			var row = types.search ('tipo_id', this.$('type').value);

			if (row != -1)
				title = types.get (row, 'Tipo');
		}
		else if (this.$('search-entry').value)
			title = _('SearchResults');

		Vn.Node.setText (this.$('title-text'), title);
	}

	,onSearch: function (event)
	{
		var searchTags = this.$('search-entry').value;
		searchTags = searchTags != '' ? searchTags : undefined;

		var batch = this.$('filter-batch');
		batch.block ();

		this.$('search').value = searchTags;

		if (searchTags)
		{
			this.$('type').value = undefined;
			this.$('realm').value = undefined;
		}

		batch.unblock ();
		batch.changed ();
	}

	,onRightPanelClick: function (event)
	{
		event.stopPropagation ();
	}

	,onShowMenuClick: function (event)
	{
		this._menuShown = true;
		event.stopPropagation ();
		this.gui.showBackground ();
		Vn.Node.addClass (this.$('right-panel'), 'show');
		this.hideMenuCallback = this.hideMenu.bind (this);
		document.addEventListener ('click', this.hideMenuCallback);
	}

	,hideMenu: function ()
	{
		if (!this._menuShown)
			return;
	
		this.gui.hideBackground ();
		Vn.Node.removeClass (this.$('right-panel'), 'show');
		document.removeEventListener ('click', this.hideMenuCallback);
		this.hideMenuCallback = null;
	}
	
	,onBasketClick: function ()
	{
		if (!Vn.Url.getQuery ('guest'))
			this.hash.set ({'form': 'ecomerce/basket'});
		else
			Htk.Toast.showError (_('YouMustBeLoggedIn'));
	}
	
	,nameRenderer: function (renderer, form)
	{
		renderer.subtitle = form.get ('producer');
	}

	,amountRender: function (renderer, form)
	{
		var amount = form.get ('amount');
		var grouping = form.get ('grouping');

		if (amount && grouping)
			renderer.value = amount / grouping;
		else
			renderer.value = null;
	}

	,amountChanged: function (renderer, row, newValue)
	{
		var model = this.$('items-model');
		model.set (row, 'amount', newValue * model.get (row, 'grouping'));
	}

	,catRenderer: function (column, form)
	{
		switch (form.get ('Categoria'))
		{
			case 'A2':
				column.td.className = 'second-category';
				break;
			case 'B1':
				column.td.className = 'third-category';
				break;
			default:
				column.td.className = '';
		}
	}

	,onGridAddItemClick: function (button, form)
	{
		this.showAmountPopup (button.getNode (), form.row);
	}
	
	,onAddItemClick: function  (column, value, row, button)
	{
		this.showAmountPopup (button, row);
	}
	
	,showAmountPopup: function (button, row)
	{
		if (Vn.Url.getQuery ('guest'))
		{
			Htk.Toast.showError (_('YouMustBeLoggedIn'));
			return;
		}

		var itemId = this.$('items-model').get (row, 'item_id')
		this.$('lots-batch').addValue ('item', itemId);

		this.itemRow = row;
		this.onEraseClick ();
		this.popup.show (button);	
	}
	
	,onAddLotClick: function (column, value, row, button)
	{
		var model = this.$('item-lots');
		var grouping = model.get (row, 'grouping');
		var warehouse = model.get (row, 'warehouse_id');
		var available = model.get (row, 'available');

		var lotAmount = this.items[warehouse];

		if (lotAmount === undefined)
			lotAmount = 0;
		
		if (lotAmount < available)
		{
			var newAmount = lotAmount + grouping;
		
			if (newAmount > available)
				newAmount = available;
		
			this.items[warehouse] = newAmount;
			this.$('amount').value += newAmount - lotAmount;
		}
		else
			Htk.Toast.showError (_('NoMoreAmountAvailable'));
	}
	
	,onEraseClick: function ()
	{
		this.$('amount').value = 0;
		this.items = {};
	}
	
	,onConfirmClick: function ()
	{
		var model = this.$('items-model');
	
		var sql = '';
		var batch = new Sql.Batch ();
		var query = new Sql.String ({query: 'CALL basket_item_add (#warehouse, #item, #amount);'});
		var amountSum = 0;

		for (var warehouse in this.items)
		{
			var amount = this.items[warehouse];
			amountSum += amount;
		
			batch.addValue ('warehouse', warehouse);
			batch.addValue ('item', model.get (this.itemRow, 'item_id'));
			batch.addValue ('amount', amount);
			sql += query.render (batch);
		}
	
		if (amountSum > 0)
		{
			this.conn.execQuery (sql);

			var itemName = model.get (this.itemRow, 'Article');
			Htk.Toast.showMessage (
				sprintf (_('Added%dOf%s'), amountSum, itemName));
		}

		this.popup.hide ();
	}
	
	,onStatusChange: function (model)
	{
		if (this.popup)
			this.popup.reset ();
	}
	
	,onOrderChange: function (e)
	{
		var sortField = e.target.value;
		
		if (sortField)
			this.$('items-model').sortByName (sortField);
	}
	
	,onRemoveFiltersClick: function ()
	{
		var batch = this.$('filter-batch');
		batch.block ();
		
		this.$('search').value = undefined;
		this.$('realm').value = undefined;
		this.$('type').value = undefined;
		this.$('color').value = undefined;
		this.$('origin').value = undefined;
		this.$('category').value = undefined;
		this.$('producer').value = undefined;
		
		batch.unblock ();
		batch.changed ();
	}
});

Vn.Filter = new Class
({
	Extends: Htk.Field
	,Tag: 'vn-filter'
	,Child: 'model'
	,Properties:
	{
		model:
		{
			type: Db.Model
			,set: function (x)
			{
				x.batch = this._batch;
				this._select.model = x;
				this._model = x;
			}
			,get: function ()
			{
				return this._model;
			}
		},
		placeholder:
		{
			type: String
			,set: function (x)
			{
				this._select.placeholder = x;
				this._placeholder = x;
			}
			,get: function ()
			{
				return this._placeholder;
			}
		},
		column:
		{
			type: String
			,set: function (x)
			{
				this._column = x;
			}
			,get: function ()
			{
				return this._column;
			}
		},
		filter:
		{
			type: Sql.Filter
			,set: function (x)
			{
				this._filter = x;
				this._batch.addObject ('filter', x);
			}
			,get: function ()
			{
				return this._filter;
			}
		},
		disableOperation:
		{
			type: Sql.FilterItem
			,set: function (x)
			{
				this._disableFilter = x;
			}
			,get: function ()
			{
				return this._disableFilter;
			}
		}
	}
	
	,_columnIndex: 1
	
	,initialize: function (props)
	{
		this.createElement ('div');
		this.node.className = 'vn-filter';
		
		this._select = new Htk.Select ();
		this._select.on ('mousedown', this._onClick, this);
		this._select.on ('changed', this._onChange, this);
		this.node.appendChild (this._select.getNode ());
		
		this._ul = document.createElement ('ul');
		this.node.appendChild (this._ul);
		
		this._batch = new Sql.Batch ();
		this.parent (props);
	}
	
	,_onClick: function ()
	{
		if (this._model && this._model.status === Db.Model.Status.CLEAN)
		{
			this._filter.alwaysReady = true;
			this._disableFilter.disabled = true;

			this._model.refresh ();

			this._disableFilter.disabled = false;
			this._filter.alwaysReady = false;
		}
	}
	
	,_onCloseClick: function (li)
	{
		Vn.Node.remove (li);
		this._changeValue (undefined);
	}
	
	,_onChange: function ()
	{	
		if (this._select.value === null
		|| this._select.value === undefined)
			return;

		if (this._lastLi)
			Vn.Node.remove (this._lastLi);

		var li = this._lastLi = document.createElement ('li');
		this._ul.appendChild (li);
			
		var button = document.createElement ('button');
		button.addEventListener ('click',
			this._onCloseClick.bind (this, li));
		li.appendChild (button);
		
		var img = document.createElement ('img');
		img.src = 'image/close.svg';
		button.appendChild (img);		
	
		var label = this._select.getByIndex (this._columnIndex);
		var text = document.createTextNode (label);
		li.appendChild (text);
		
		setTimeout (this._onTimeout.bind (this));

		this._changeValue (this._select.value);
	}
	
	,_changeValue: function (newValue)
	{
		this._batch.block ();
		this.value = newValue;
		this._batch.unblock ();
	}
	
	,_onTimeout: function ()
	{
		this._select.value = null;
	}
});

Vn.ColumnItem = new Class
({
	Extends: Htk.Column
	,Tag: 'vn-column-item'

	,render: function (tr)
	{
		var td = this.parent (tr);
		td.style.textAlign = 'left';

		if (this.value)
		{
			var node = document.createTextNode (
				Vn.Value.format (this.value, this._format));
			td.appendChild (node);
		}

		if (this.subtitle)
		{
			td.appendChild (document.createElement ('br'));
			td.appendChild (document.createTextNode (this.subtitle));
		}

		return td;
	}
});