Ext.onReady(function(){
	var domId = 'left-nav-recently_viewed_restaurants';
	var domNode = Ext.get(domId);
	if (domNode) {
		//get ids of visited restaurants
		var id_str = "";
		for (var i = 0; ; i++) {
			var domNode = Ext.get('req-param-recently_viewed_restaurants_id_'+i);
			var visited_id = '';
			if (domNode) {
				visited_id = domNode.dom.innerHTML;
				id_str += visited_id + ' ';
			} else {
				break;
			}
		}
	    var viewedRestaurantsStore = new Ext.data.JsonStore({
			url: '/RestaurantServlet?action=getRestaurantInfoForLefNavByIDs&ids='+id_str,
	    	root: 'results'
	    	,id: 'id'
	       	,fields: ['id', 'name', 'short_name', 'cuisine', 'discount', 'discount_short_desc', 'expense', 'name_identifier', 'is_partner']
	    });
	    viewedRestaurantsStore.on('load', function(){
	    	Ext.getCmp('menu-loading-left_nav_recently_viewed_restaurants').hide();
	    });

		var index = 0;
		ViewedRestaurantPanel = Ext.extend(Ext.DataView, {
		    autoHeight: true,
		    frame:true,
		    cls:'',
		    itemSelector: 'div',
		    overClass: 'over',
		    
		    tpl : new Ext.XTemplate(
				"<div style='line-height:18px;'>",
					'<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="59%">',
			    				'<div style="padding:5px 5px 0px;"><a style="" href="/singapore/restaurant/{name_identifier}/" 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="27%" style="padding-top:4px;text-align:center;">',
			    				'<div>{id: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>",
				{
					getDisplayCss: function(str) {
						if (!str || str.length==0) {
							return 'display:none;';
						}
						return '';
					}
				},
/*				{
					getDisplayPartnerCss: function(str) {
						if (!str || str!='y') {
							return 'display:none;';
						}
						return '';
					}
				},
*/				{
					getIndex: function(str) {
						index += 1;
						return index;
					}
				},
				{
					getShortShortDiscountDisplay: function(id) {
						var r = viewedRestaurantsStore.getById(id);
						var discount_short_desc = r.get('discount_short_desc');
						var discount = r.get('discount');
						if (!discount_short_desc || discount_short_desc.length==0) {
							return "";
						}
						return '<span style="color:red;" ext:qtip="'+discount+'">'+discount_short_desc+'</span>';
					}
				}
		    )
		});
		
		var panel = new Ext.Panel({
            title: '<span class="home-centerpanel-header">Restaurants Viewed <span style="font-weight:normal;">&#27983;&#35272;&#35760;&#24405;</span></span>',
	        iconCls: 'icon-history',
            id:'left-nav-recently_viewed_restaurants_panel',
            frame: true,
            style:'',
            bodyStyle: 'padding:0 3px;',
			items: [
				new ViewedRestaurantPanel({
		            store: viewedRestaurantsStore
		        })
		        ,{
		        	id:'menu-loading-left_nav_recently_viewed_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_recently_viewed_restaurants').on('render', function(){
			viewedRestaurantsStore.load();
		});
		
		if (id_str.length > 0) {
			panel.render(domId);
		} else {
			Ext.get('left-nav-recently_viewed_restaurants').dom.style.display = 'none';
		}
	}
});