Ext.onReady(function(){
	var domId = 'left-nav-nearby_restaurants';
	var domNode = Ext.get(domId);
	if (domNode) {
		//get rest_id
		var domNode = Ext.get('req-param-restid');
		var rest_id = '';
		if (domNode) {
			rest_id = domNode.dom.innerHTML;
		}
		
		domNode = Ext.get('req-param-rest_name');
		var rest_name = '';
		if (domNode) {
			rest_name = domNode.dom.innerHTML;
		}
		
		var cuisinesDomNode = Ext.get("req-param-cuisines");
		var cuisines = '';
		if (cuisinesDomNode) {
			cuisines = cuisinesDomNode.dom.innerHTML;
		}
		var cuisineArray = cuisines.split(' ');
		
		var expensesDomNode = Ext.get("req-param-expenses");
		var expenses = '';
		if (expensesDomNode) {
			expenses = expensesDomNode.dom.innerHTML;
		}
		var expenseArray = expenses.split(' ');
		
		var cuisineAllStore = new Ext.data.SimpleStore({
		    fields: ['cuisine', 'id', 'lvl'],
		    data: [ 
		    	['Buffet (%E8%87%AA%E5%8A%A9%E9%A4%90)', 'cuisine-13-008', '1'], 
		    	['Crab/Seafood (%E8%9E%83%E8%9F%B9/%E6%B5%B7%E9%B2%9C)', 'cuisine-13-004', '1'], 
		    	['Chinese (%E4%B8%AD%E9%A4%90)', 'cuisine-01', '1'], ['Anhui (%E5%BE%BD%E8%8F%9C)', 'cuisine-01-019', '2'], ['Beijing (%E4%BA%AC%E8%8F%9C)', 'cuisine-01-001', '2'], ['Cantonese (%E7%B2%A4%E8%8F%9C)', 'cuisine-01-002', '2'], ['Dong Bei (%E4%B8%9C%E5%8C%97%E8%8F%9C)', 'cuisine-01-003', '2'], ['Hainanese (%E6%B5%B7%E5%8D%97%E8%8F%9C)', 'cuisine-01-020', '2'], ['Hakka (%E5%AE%A2%E5%AE%B6%E8%8F%9C)', 'cuisine-01-004', '2'], ['Hokkien (%E7%A6%8F%E5%BB%BA%E8%8F%9C)', 'cuisine-01-005', '2'], ['Huaiyang (%E6%B7%AE%E6%89%AC%E8%8F%9C)', 'cuisine-01-006', '2'], ['Hubei (%E6%B9%96%E5%8C%97%E8%8F%9C)', 'cuisine-01-007', '2'], ['Hunanese (%E6%B9%96%E5%8D%97%E8%8F%9C)', 'cuisine-01-008', '2'], ['Mongolian (%E8%92%99%E5%8F%A4%E8%8F%9C)', 'cuisine-01-021', '2'], ['Shandong (%E9%B2%81%E8%8F%9C)', 'cuisine-01-009', '2'], ['Shanghai (%E4%B8%8A%E6%B5%B7%E6%9C%AC%E5%B8%AE%E8%8F%9C)', 'cuisine-01-010', '2'], ['Suzhou/Hangzhou (%E8%8B%8F%E6%9D%AD%E8%8F%9C)', 'cuisine-01-011', '2'], ['Szechuan (%E5%B7%9D%E8%8F%9C)', 'cuisine-01-012', '2'], ['Taiwanese (%E5%8F%B0%E6%B9%BE%E8%8F%9C)', 'cuisine-01-013', '2'], ['Teochew (%E6%BD%AE%E5%B7%9E%E8%8F%9C)', 'cuisine-01-014', '2'], ['Xinjiang (%E6%96%B0%E7%96%86%E8%8F%9C)', 'cuisine-01-015', '2'], ["Xi'an (%E8%A5%BF%E5%AE%89%E8%8F%9C)", 'cuisine-01-016', '2'], ['Yunnan/Guizhou (%E4%BA%91%E8%B4%B5%E8%8F%9C)', 'cuisine-01-017', '2'], ['Others (%E5%85%B6%E4%BB%96%E8%8F%9C%E7%B3%BB)', 'cuisine-01-018', '2'], 
				['Brazilian', 'cuisine-02', '1'],
		    	['Fusion', 'cuisine-03', '1'],
		    	['Indian', 'cuisine-04', '1'],
		    	['International', 'cuisine-14', '1'], 
		    	['Japanese', 'cuisine-05', '1'],
		    	['Korean', 'cuisine-06', '1'], 
		    	['Mediterranean', 'cuisine-07', '1'], 
		    	['Mexican', 'cuisine-08', '1'], 
		    	['Middle Eastern', 'cuisine-09', '1'], 
		    	['Russian', 'cuisine-10', '1'], 
		    	['South-East Asia', 'cuisine-11', '1'], ['Burmese', 'cuisine-11-006', '2'], ['Indonesian', 'cuisine-11-001', '2'], ['Malay', 'cuisine-11-002', '2'], ['Nepalese', 'cuisine-11-007', '2'], ['Philippine', 'cuisine-11-008', '2'], ['Singaporean', 'cuisine-11-009', '2'], ['Thai', 'cuisine-11-003', '2'], ['Vietnamese', 'cuisine-11-004', '2'], ['Others', 'cuisine-11-005', '2'],  
		    	['Western', 'cuisine-12', '1'],	['American', 'cuisine-12-001', '2'], ['Australian', 'cuisine-12-008', '2'], ['European ', 'cuisine-12-002', '2'], ['French', 'cuisine-12-003', '2'], ['German', 'cuisine-12-004', '2'], ['Italian', 'cuisine-12-005', '2'], ['Spanish', 'cuisine-12-006', '2'], ['Others', 'cuisine-12-007', '2'], 
		    	['More', 'cuisine-13', '1'], ['Halal', 'cuisine-13-001', '2'], ['Herbal', 'cuisine-13-002', '2'], ['Local Delights', 'cuisine-13-003', '2'], ['Peranakan/Nonya', 'cuisine-13-005', '2'], ['Steamboat', 'cuisine-13-006', '2'], ['Vegetarian', 'cuisine-13-007', '2']
		    ]//end data
		});

		var cuisineStore = new Ext.data.SimpleStore({
		    fields: ['cuisine', 'id', 'lvl'],
		    data: []
		});

		var expenseAllStore = new Ext.data.SimpleStore({
		    fields: ['expense', 'id'],
		    data: [ 
		    	['About S$10', 'expense-01'], 
		    	['About S$15', 'expense-02'], 
		    	['About S$20', 'expense-03'], 
		    	['About S$25', 'expense-04'],
		    	['About S$30', 'expense-05'],
		    	['About S$35', 'expense-06'],
		    	['About S$40', 'expense-07'],
		    	['About S$45', 'expense-08'],
		    	['Above S$50', 'expense-09']]
		});
		var expenseStore = new Ext.data.SimpleStore({
		    fields: ['expense', 'id'],
		    data: [] 
		});

		//form cuisine store
		var defaultCuisineValue = '';
		cuisineStore.removeAll();
		for (i=0; i<cuisineArray.length; i++) {
			var cuisne = cuisineArray[i];
			var index = cuisineAllStore.find('id', cuisne);
			if (index != -1) {
				var recordFromAll = cuisineAllStore.getAt(index);
				if (recordFromAll.get('id')==cuisne) {
					cuisineStore.add(recordFromAll);
					if (defaultCuisineValue=='') {
						defaultCuisineValue = cuisne;
					}
				}
			}
		}
		//decode cuisineSearchStore
		cuisineStore.each(function(cuisineRec){
			var cuisine = cuisineRec.get('cuisine');
			var decodedCuisine = Url.decode(cuisine);
			cuisineRec.set('cuisine', decodedCuisine);
		});

		//form expense store
		var defaultExpenseValue = '';
		expenseStore.removeAll();
		for (i=0; i<expenseArray.length; i++) {
			var expense = expenseArray[i];
			var index = expenseAllStore.find('id', expense);
			if (index != -1) {
				var recordFromAll = expenseAllStore.getAt(index);
				if (recordFromAll.get('id')==expense) {
					var prevRecordFromAll = expenseAllStore.getAt(index-1);
					if (prevRecordFromAll) {
						var exist = false;
						expenseStore.each(function(rec){
							if (rec.get('id')==prevRecordFromAll.get('id')) {
								exist = true;
							}
						});
						if (!exist) {
							expenseStore.add(prevRecordFromAll);
						}
					}

					expenseStore.add(recordFromAll);
					var exist = false;
					expenseStore.each(function(rec){
						if (rec.get('id')==recordFromAll.get('id')) {
							exist = true;
						}
					});
					if (!exist) {
						expenseStore.add(recordFromAll);
					}
					if (defaultExpenseValue=='') {
						defaultExpenseValue = expense;
					}
					
					var nextRecordFromAll = expenseAllStore.getAt(index+1);
					if (nextRecordFromAll) {
						var exist = false;
						expenseStore.each(function(rec){
							if (rec.get('id')==nextRecordFromAll.get('id')) {
								exist = true;
							}
						});
						if (!exist) {
							expenseStore.add(nextRecordFromAll);
						}
					}
				}
			}
		}

	    var nearbyRestaurantsByCuisineStore = new Ext.data.JsonStore({
			url: '/RestaurantBookingServlet?action=getNearbyRestaurantsForLeftNav&num=5&type=cuisine&rest-id='+rest_id+'&distance=0.4',
			root: 'results'
		   	,id: 'id'
		   	,totalProperty: 'totalCount'
		   	,fields: ['id', 'name', 'short_name', 'cuisine', 'discount', 'discount_short_desc', 'expense', 'name_identifier', 'is_partner']
	    });
	    nearbyRestaurantsByCuisineStore.on('load', function(){
	    	Ext.getCmp('menu-loading-left_nav_nearby_restaurants').hide();
	    });

	    var nearbyRestaurantsByExpenseStore = new Ext.data.JsonStore({
			url: '/RestaurantBookingServlet?action=getNearbyRestaurantsForLeftNav&num=5&type=expense&rest-id='+rest_id+'&distance=0.4',
			root: 'results'
		   	,id: 'id'
		   	,totalProperty: 'totalCount'
		   	,fields: ['id', 'name', 'short_name', 'cuisine', 'discount', 'discount_short_desc', 'expense', 'name_identifier', 'is_partner']
	    });
	    nearbyRestaurantsByExpenseStore.on('load', function(){
	    	Ext.getCmp('menu-loading-left_nav_nearby_restaurants').hide();
	    });
		
		var nearbyIndex = 0;
		NearbyRestaurantPanel = Ext.extend(Ext.DataView, {
		    autoHeight: true,
		    frame:true,
		    cls:'',
		    itemSelector: 'div',
		    overClass: 'over',
		    
		    tpl : new Ext.XTemplate(
				"<div style='line-height:18px;{id:this.initializeIndex}'>",
					'<table width="100%" cellspacing="0" cellpadding="0">',
			        '<tpl for=".">',
			    		'<tr valign="top">',
			    			'<td width="5%" align="left">',
			    				'<div style="padding-top:8px;padding-right:2px;"><img src="/shared/sir/images/text-ranking-{id:this.getIndex}.gif"/></div>',
			    			'</td>',
			    			'<td width="61%">',
			    				'<div style="padding:5px 5px 0px;"><a style="" href="/singapore/restaurant/{name_identifier}*{id}/" ext:qtip="',
			    					'<div><b>{name}</b></div></div>',
			    					'<div>Discount: {discount}</div>',
			    					'<div>Cuisine:&nbsp;&nbsp;{cuisine}</div>',
			    					'<div>Expense:&nbsp;&nbsp;{expense}</div>',
			    				'"><img style="{is_partner:this.getDisplayPartnerCss}" src="/shared/sir/images/goldaward.gif" width="12" height="12" ext:qtip="Business Partner"/>{short_name}</a></div>',
			    			'</td>',
			    			'<td width="25%" style="padding-top:4px;text-align:center;">',
			    				'<div>{discount_short_desc:this.getShortShortDiscountDisplay}</div>',
			    			'</td>',
			    			'<td width="9%" style="padding-top:4px;padding-left:5px;">',
			    				"<div style='font-size:12px;'>[<a href='javascript:void(0)' onclick='showRestaurantBookingForm(\"{id}\");' ext:qtip='Click to make a booking.'>book</a>]</div>",
			    			'</td>',
			    		'</tr>',
			        '</tpl>',
					'</table>',
					'<div><span style="font-size:11px;padding-top:3px;"><a href="javascript:void(0);" onclick="view_more_nearby_restaurants();">View more in Google Map &#187;</a></span></div>',
				"</div>",
				{
					getDisplayCss: function(str) {
						if (!str || str.length==0) {
							return 'display:none;';
						}
						return '';
					}
				},
				{
					getDisplayPartnerCss: function(str) {
						if (!str || str!='y') {
							return 'display:none;';
						}
						return '';
					}
				},
				{
					initializeIndex: function(str) {
						nearbyIndex = 0;
					}
				},
				{
					getIndex: function(str) {
						nearbyIndex += 1;
						return nearbyIndex;
					}
				},
				{
					getShortShortDiscountDisplay: function(str) {
						if (!str || str.length==0) {
							//return "0% off";
							return "";
						}
						return '<span style="color:red;">'+str+'</span>';
					}
				}
		    )
		});
		
		var panel = new Ext.Panel({
            title: '<span class="home-centerpanel-header">Nearby Restaurants <span style="font-weight:normal;">&#38468;&#36817;&#39184;&#21381;</span></span>',
	        iconCls: 'icon-map',
            id:'left-nav-nearby_restaurants_panel',
            frame: true,
            bodyStyle: 'padding:0 3px;',
			items: [
				{
					html:'<div style="text-align:center;padding-top:5px;color:purple;font-size:12px;"><b>'+rest_name+'</b></div>'
				}
				,{
					html:'<div style="padding-top:5px;font-size:12px;">Distance:&nbsp;&nbsp;&nbsp;within 400 meters</div>'
				}
	            ,{
	            	layout:'form',
	            	bodyStyle:'padding-top:15px;',
			        labelWidth:55,
				    border:false,
	                items: [{
	                    xtype:'combo',
	                    id:'left-nav-nearby_restaurants_by_cuisine_combo',
				        fieldLabel:'Cuisine', 
	                    store: cuisineStore,
					    displayField: 'cuisine',
	                    valueField: 'id',
					    mode: 'local',
					    editable: false,
					    triggerAction: 'all',
	                    width:150,
					    tpl: new Ext.XTemplate(
					    	'<tpl for="."><div class="x-combo-list-item combo-list-item-lvl{lvl}" ext:qtip="{cuisine}">{cuisine}</div></tpl>'
					    ),
	                    name: 'cuisine',
	                    value: defaultCuisineValue,
	                    listeners:{
	                    	'select': function(combo, rec, index){
                				var id = combo.getValue();
								nearbyRestaurantsByCuisineStore.load({
									waitMsg:'loading...',
									params: {
										id:id 
								    }
								});
	                    	}
	                    }
	                }]
	            }
				,new NearbyRestaurantPanel({
		            store: nearbyRestaurantsByCuisineStore
		        })
	            ,{
	            	layout:'form',
	            	bodyStyle:'padding-top:15px;',
			        labelWidth:55,
				    border:false,
	                items: [{
	                    xtype:'combo',
	                    id:'left-nav-nearby_restaurants_by_expense_combo',
				        fieldLabel:'Expense', 
	                    store: expenseStore,
					    displayField: 'expense',
	                    valueField: 'id',
					    mode: 'local',
					    editable: false,
					    triggerAction: 'all',
	                    width:150,
					    tpl: new Ext.XTemplate(
					    	'<tpl for="."><div class="x-combo-list-item combo-list-item-lvl{lvl}">{expense}</div></tpl>'
					    ),
	                    name: 'expense',
	                    value: defaultExpenseValue,
	                    listeners:{
	                    	'select': function(combo, rec, index){
                				var id = combo.getValue();
								nearbyRestaurantsByExpenseStore.load({
									waitMsg:'loading...',
									params: {
										id:id 
								    }
								});
	                    	}
	                    }
	                }]
	            }
				,new NearbyRestaurantPanel({
		            store: nearbyRestaurantsByExpenseStore
		        })
		        ,{
		        	id:'menu-loading-left_nav_nearby_restaurants',
		        	html:'<span style="padding:7px;"><img src="/shared/sir/images/loading.gif" /> Loading...</span>'
		        }
		        ,{
		        	height:5,
		        	html:'&nbsp;'
		        }
			]
		});
		
		Ext.getCmp('menu-loading-left_nav_nearby_restaurants').on('render', function(){
			nearbyRestaurantsByCuisineStore.load({
				params: {
					id:defaultCuisineValue 
			    }
			});
			nearbyRestaurantsByExpenseStore.load({
				params: {
					id:defaultExpenseValue 
			    }
			});
		});
		panel.render(domId);
	}

});

function view_more_nearby_restaurants() {
	Ext.getCmp('map-tabpanel').activate('map-nearby-panel');
	window.location = '#rst_map';
}