Ext.onReady( function() {
	Ext.QuickTips.init();

	var lookupArr = new Array();
	var lookupData = function(data) {
		if (data.list != null && data.list.length != null) {
			for ( var i = 0; i < data.list.length; i++) {
				var item = data.list[i];
				lookupArr["" + item.category_id + "_" + item.item_id] = item;
			}
		}
		return data;
	}
	function lookup(id) {
		return lookupArr[id];
	}

	var selItems = new Array();
	function printSelItems() {
		var str = '';
		for (key in selItems) {
			str += " - " + selItems[key].item_name;
		}
		document.getElementById('debug').innerHTML += '<br/>' + str;
	}
	function updatePrice() {
		var total = 0, ticket = 0, lobsterTicket = 0, lobsterPrice =0, unused = 0;
		for (key in selItems) {
			if (typeof(selItems[key])=='object'){
				var item = selItems[key];
				total += parseFloat(item.item_price);
				if (item.item_systags.indexOf("lobster")>=0){
					lobsterTicket++; 
					lobsterPrice += parseFloat(item.item_price);
				}
			}
		}
		ticket = Math.ceil((total - lobsterPrice)/10);
		unused = ticket*10 + lobsterPrice - total;
		
		var str = 	'<b>Total:</b> ' + formatCurrency(total) + '</span><br/>' +  
					'<b>&nbsp;&nbsp;&nbsp; $10 Tickets:</b> ' + ticket + '<br/>' +
					'<b>&nbsp;&nbsp;&nbsp; Lobster Tickets:</b> ' + lobsterTicket + '<br/>';
					//'<b>Unused:</b> ' + formatCurrency(unused);
		
		Ext.getCmp('pricelabel').setText(str, false);
	}
	
	
	var selStack = new Array();
	function printSelStack() {
		var str = '<span onclick="Ext.getCmp(\'parentlabel\').jump(-1)" style="cursor:pointer">Main menu</span>';
		for ( var i = 0; i < selStack.length; i++) {
			var props = '';
			if (i < selStack.length - 1) {
				props = ' style="cursor:pointer" onclick="Ext.getCmp(\'parentlabel\').jump(' + i + ')"';
			}
			str += '<img src="' + BASE_URL + 'images/arrow.png" alt=""/><span' + props + '>' + selStack[i].item_name + '</span>';
		}
		Ext.getCmp('parentlabel').setText(str, false);
	}

	var menuStore = new Ext.data.JsonStore( {
		url :BASE_URL + 'menu/getList/',
		method :'POST',
		fields : [ 'group_id', 'group_name', 'list' ],
		root :'results',
		waitMsg: 'Loading'
	});

	var myTemplate = new Ext.XTemplate(
		'<tpl for=".">',
			'<div class="x-grid-group dataview" style="text-align: left">',
				'<div class="x-grid-group-hd dataview-group-header"><div>{group_name}</div></div>',
					'<div class="x-grid-group-body">',
						'<tpl for="list">',
							'<div class="thumb-wrap" id="{category_id}_{item_id}" title="{item_name}">',
								'<div class="thumb"><img id="item_img_{item_id}" src="' + BASE_URL + 'userfiles/images/{item_image_thumb_name}" title="{item_name}" /></div>',
								'<span>{item_name}</span>${item_price}',
							'</div>', 
						'</tpl>', 
					'</div>',
				'<div style="clear:both"></div>', 
			'</div>', 
		'</tpl>',
		'<div class="dataview-border"></div>');
	myTemplate.compile();

	//'	<input type="button" value="I\'d like to add another side to this dinner (limit 2)" onclick="Ext.getCmp(\'parentlabel\').jumpUp()"/><br/><br/>' + 
	var itemList = new Ext.DataView({
		id :'itempanel',
		itemSelector :'div.thumb-wrap',
		overClass :'dataview-item-over',
		store :menuStore,// storeStack[curLevel],
		tpl :myTemplate,
		singleSelect :true,
		emptyText :	'<div style="padding:10px;">' +
					'	<input type="button" style="width: 280px;" value="I want to order more food!" onclick="Ext.getCmp(\'parentlabel\').jump(-1)"/><br/><div style="width: 280px; padding-left: 125px; padding-top: 10px;">or:</div><br/>' +
					'	<input type="button" style="width: 280px; height: 40px;" value="I want to Check Out - it\'s money well spent\;\nall profits support Houghton Rotary Charities" onclick="checkOut()"/></div>',
		autoHeight :true,
		listeners :( {
			'selectionchange' : function(dataview, evt) {
				if (this.disabled) return;
				
				var selNodes = this.getSelectedNodes();
				if (selNodes && selNodes.length > 0) {
					var selNode = selNodes[0];
					var item = lookup(selNode.id);
					if (item != null) {
						// parent is the last item of the stack
						var parent_id = (selStack.length > 0 ? selStack[selStack.length - 1].tree_node_id : 0);

						// add the currently selected item to tree
						item.tree_node_id = item.item_id + "_" + Math.ceil(Math.random() * 10000);
						Ext.getCmp('tree-panel').addItem(item, parent_id);
	
						var message = 'Item was added to your order!';
						if (item.child_number>0){
							message += '<br/>Please add any options to this from this list.';
						}
						Ext.common.msg({title:'',msg: message, duration: 4});
						
						// show the items of the subcategory
						if ((item.child_number > 0) || (item.child_number==0 && selStack.length > 0)){
							// add currently selected item to stack for displaying on the top bar
							var cat = new Object();
							cat.category_id = item.category_id,
							cat.item_id = item.item_id,
							cat.item_name = item.item_name,
							cat.tree_node_id = item.tree_node_id;
							selStack.push(cat);
							printSelStack();
							
							this.showCategories(item.category_id);
						}
					}
				}
			},
			'dblclick': function (){
//				var selNodes = this.getSelectedNodes();
//				if (selNodes && selNodes.length > 0) {
//					var selNode = selNodes[0];
//					var item = lookup(selNode.id);
//					
//					// show the items of the subcategory
//					this.showCategories(item.category_id);
//				}
			},
			'containerclick' : function(dataview, evt) { // expand/collapse group
				var group = evt.getTarget('div.dataview-group-header', 2, true);
				if (group) group.up('div').toggleClass('x-grid-group-collapsed');
			}
		}),
		prepareData :lookupData.createDelegate(this),
		showCategories : function(category_id) {
			this.disable();
			if (category_id == null || category_id ==-1 || category_id==0) {
				category_id = "";
			}
			
			menuStore = new Ext.data.JsonStore( {
				url :BASE_URL + 'menu/getList/' + category_id,
				method :'POST',
				fields : [ 'group_id', 'group_name', 'list' ],
				root :'results',
				waitMsg: 'Loading'
			});
			itemList.setStore(menuStore);
			menuStore.reload();
			
			itemList.enable();
		}
	})

	MyNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
		// Overwrite this function to hide the plus/minus icon of the parent nodes
		// @todo: update this function when upgrading to new version of extjs
		updateExpandIcon: function(){
	        if(this.rendered){
	            var n = this.node, c1, c2;
	            var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
	            var hasChild = n.hasChildNodes();
	            if(hasChild || n.attributes.expandable){
	                if(n.expanded){
//	                    cls += "-minus";
	                    c1 = "x-tree-node-collapsed";
	                    c2 = "x-tree-node-expanded";
	                }else{
//	                    cls += "-plus";
	                    c1 = "x-tree-node-expanded";
	                    c2 = "x-tree-node-collapsed";
	                }
	                if(this.wasLeaf){
	                    this.removeClass("x-tree-node-leaf");
	                    this.wasLeaf = false;
	                }
	                if(this.c1 != c1 || this.c2 != c2){
	                    Ext.fly(this.elNode).replaceClass(c1, c2);
	                    this.c1 = c1; this.c2 = c2;
	                }
	            }else{
	                if(!this.wasLeaf){
	                    Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
	                    delete this.c1;
	                    delete this.c2;
	                    this.wasLeaf = true;
	                }
	            }
	            var ecc = "x-tree-ec-icon "+cls;
	            if(this.ecc != ecc){
	                this.ecNode.className = ecc;
	                this.ecc = ecc;
	            }
	        }
	    }
	});
	
	var mainPanel = new Ext.Panel( {
		renderTo :'menuPanel',
		width :830,
		height :620,
		frame :true,
		title :'Menu',
		bodyStyle :'padding: 5px;',
		labelWidth :50,
		layout :'border',
		defaults : {
			anchor :'95%',
			allowBlank :false,
			msgTarget :'side'
		},
		items : [ {
			region :'center',
			xtype :'panel',
			id :'img-chooser-view',
			split :true,
			bodyBorder :true,
			border :true,
			bodyStyle :'border: 1px solid #99BBE8',
			autoScroll :true,
			tbar :new Ext.Toolbar( {
				height :28,
				style :'padding: 8px 5px 0 10px',
				items : [ {
					xtype :'label',
					id :'parentlabel',
					removeStack : function(index) {
						if (index==-1){
							selStack = new Array();
						} else {
							selStack.splice(index+1,selStack.length);
						}
					},
					jump: function(index){
						this.removeStack(index);
						printSelStack();
						if (index==-1){
							Ext.getCmp('itempanel').showCategories(0);
						} else {
							Ext.getCmp('itempanel').showCategories(selStack[index].category_id);
						}
					},
					jumpUp: function(){
						var index = selStack.length-2;
						this.jump(index);
					}
				} ]
			}),
			items :itemList
		}, {
			xtype :'treepanel',
			id :'tree-panel',
			region :'east',
			split :true,
			margins :'2 2 0 2',
			bodyStyle :'border:1px solid #99BBE8;text-align:left',
			autoScroll :true,
			rootVisible : false,
			width :180,
			minWidth :150,
			maxWidth :250,
			animCollapse: false,
			root :new Ext.tree.TreeNode( {
				collapsible :false,
				expandable :false,
				expanded :true,
				text: 'Order'
			}),
			tbar : [{
				icon :BASE_URL + 'images/delete.gif',
				tooltip :'Delete selected item',
				cls: 'x-btn-text-icon',
				text: 'Remove',
				handler : function() {
					Ext.getCmp('tree-panel').removeItem();
				}
			}, {
				icon: BASE_URL + 'images/checkout.gif',
				tooltip: 'Save your order and proceed to checkout',
				cls: 'x-btn-text-icon',
				text: 'Checkout',
				handler: function (){
					checkOut();
				}
			} ],
			
			bbar: new Ext.Toolbar({
				height: 70,
				items: {
					xtype: 'label',
		            id: 'pricelabel'
				}
			}),
			
			listeners: {
				'append' : updatePrice,
				'remove' : updatePrice
			},
			
			addItem : function(item, parent_id) {
				var child = new Ext.tree.TreeNode( {
					id :item.tree_node_id,
					icon :BASE_URL + 'userfiles/images/' + item.item_image_thumb_name,
					uiProvider: MyNodeUI,
					collapsible :false,
					expandable :false,
					expanded :true
				});
				child.getUI().updateExpandIcon();
				child.setText((parent_id==0)?('<b>' + item.item_name + '</b>'):(item.item_name))
				
				// add currently selected item to array selItems for calculating prices
				selItems["" + item.tree_node_id] = item;
				
				// add selected item to tree
				if (parent_id == 0) {
					this.root.appendChild(child);
				} else {
					var parent = Ext.getCmp('tree-panel').getNodeById( parent_id);
					parent.appendChild(child);
				}
			},
			removeItem : function() {
				var node = this.getSelectionModel().getSelectedNode();
				if (node==null) return;
				
				var children = node.childNodes;
				var parent = node.parentNode;
				
				// remove the selected node and all of its children from the selItems array
				for ( var i = 0; i < children.length; i++) {
					delete selItems[children[i].id];
				}
				delete selItems[node.id];
	
				// remove the node and all children from tree
				node.remove();

				var index = -1;
				for (var i=0;i<selStack.length;i++){
					var item = selStack[i];
					if (item.tree_node_id == parent.id){
						index = i;
						break;
					}
				}
				Ext.getCmp('parentlabel').jump(index);
			},
			editItem : function(){
				var node = this.getSelectionModel().getSelectedNode();
				var children = node.childNodes;
				var parent = node.parentNode;
			},
			clearItem : function(){
				selItems = new Array();
				while (this.root.childNodes.length>0){
					this.root.childNodes[0].remove();
				}
			}
		} ]
	});

	menuStore.load();
	printSelStack();
});

//create a simplified node hierarchy that can be JSONified
function simplifyNodes(node) {
    var resultNode = {};
    var kids = node.childNodes;
    var len = kids.length;
    for (var i = 0; i < len; i++) {
        resultNode[kids[i].id] = simplifyNodes(kids[i]);
    }
    return resultNode;
}

function checkOut()
{
	var tree = Ext.getCmp('tree-panel');
	if (tree.root.childNodes.length==0){
		Ext.common.msg({title: 'Notification', msg: 'Please select at least one item', duration: 4});
		return;
	}
	
	// JSON-encode our tree
	var encNodes = Ext.encode(simplifyNodes(tree.root));

	new Ext.data.Connection().request({
		method: 'POST',
		url: BASE_URL + 'menu/saveOrder',
		jsonData: encNodes,
		success: function (resp, opt){
			var result = Ext.util.JSON.decode(resp.responseText);
			if (!result.success){
				Ext.common.msg({title: 'Error', msg: ['Cannot save your order:<br/><br/>{0}', result.msg], duration: 4});
				return;
			}
			
			//Ext.common.msg({title: 'Done', msg: 'Your order has been placed successfully!'});
			
			//Ext.getCmp('tree-panel').clearItem();
			//Ext.getCmp('parentlabel').jump(-1);
			
			window.location = BASE_URL + "checkout/confirm/" + result.order_id;
		},
		failure: function (resp, opt){
			Ext.common.msg({title: 'Error', msg: 'Cannot save your order:<br/><br/>Unknown', duration: 4});
		}
	});
}