MenuSelectionControl = Class.create();
MenuSelectionControl.prototype = {
	
	initialize: function(orderElement, priceElement, hiddenValueElement) {
		this.orderElement = $(orderElement);
		Element.extend(this.orderElement);	
		this.priceElement = $(priceElement);
		this.hiddenValue = $(hiddenValueElement);
		this.menuItems = [];
		this.hiddenValue.value = "";
	},
	
	add: function(id, description, cost, type) {
		var newMenuItem = 
		{
			id: id,
			description: description, 
			cost: cost,
			type: type
		};
		
		this.menuItems.push(newMenuItem);
		this.populate(this.menuItems.length - 1, newMenuItem);
	},
	
	remove: function(index) {
		this.menuItems.splice(index, 1);
	},
	
	update: function() {
		var price = 0;
		this.hiddenValue.value = "";

		this.menuItems.each((function(arrayItem) {
			price += arrayItem.cost;
			if (this.hiddenValue.value != "") {
				this.hiddenValue.value += ",";
			}
			this.hiddenValue.value += arrayItem.id + ":" + arrayItem.type;
		}).bind(this));

		this.priceElement.innerHTML = "£" + price.toFixed(2);
	},

	populate: function(index, newMenuItem) {
		var orderItem = document.createElement("li");	
		orderItem.innerHTML = newMenuItem.description;
		Element.extend(orderItem);
	
		var orderItemDelete = document.createElement("span");	
		
		orderItemDelete.innerHTML = "x";
		orderItemDelete.className = "micro-button";
		
		orderItem.appendChild(orderItemDelete);	
		this.orderElement.appendChild(orderItem);

		orderItemDelete.onclick = (function() {
			this.remove(this.menuItems.indexOf(newMenuItem));
			this.update();
			orderItem.remove();
		}).bind(this);
		this.update();
	}
}