Ext.onReady(function(){
	var domId = 'left-nav-restaurant_booking_records';
	var domNode = Ext.get(domId);
	if (domNode) {
		var max_photo_size = 42;
		
		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 userIdsWithTopBookingRankingStore = new Ext.data.JsonStore({
			url: '/RestaurantBookingServlet?action=getUsersWithTopBookingRankings&num=5&rest_id='+rest_id,
	    	root: 'results'
	    	,id:'username'
	       	,fields: ['username', 'tier', 'photo_name', 'photo_width', 'photo_height']
	    });
	    userIdsWithTopBookingRankingStore.on('load', function(){
	    	Ext.getCmp('menu-loading-left_nav_restaurant_booking_status_who').hide();
	    	var resultSet = userIdsWithTopBookingRankingStore.getCount();
	    	if (resultSet == 0) {
	    		Ext.get('left-nav-restaurant_booking_records').dom.style.display='none';
	    	}
	    });

		WhoBookedThisRestaurantPanel = Ext.extend(Ext.DataView, {
		    autoHeight: true,
		    frame:true,
		    cls:'',
		    itemSelector: 'div',
		    overClass: 'over',
		    
		    tpl : new Ext.XTemplate(
				"<div style='line-height:16px;'>",
			        '<tpl for=".">',
			        	'<div style="padding:2px 0;">',
					    	'<table width="100%" cellspacing="0" cellpadding="0" border="0">',
				    			'<tr>',
							    	"<td width='26%' valign='top' style=''><img style='' src='/shared/sir/images/user-photo-upload/{photo_name}' height='{username:this.getPhotoHeight}' width='{username:this.getPhotoWidth}'/></td>",
							    	"<td width='74%'>",
							    		"<div style='color:#DC51E6;'>{username}</div>",
							    		"<div style='{tier:this.getTierColor}'>{tier} member</div>",
							    	"</td>",
							    '</tr>',
						    '</table>',
						'</div>',
			        '</tpl>',
				"</div>"
		    	,{
		    		getPhotoHeight: function(id) {
		    			var r = userIdsWithTopBookingRankingStore.getById(id);
		    			var height = r.get('photo_height');
		    			var width = r.get('photo_width');
		    			if (height > width) {
		    				if (height > max_photo_size) {
		    					return max_photo_size;
		    				}
		    			} else {
		    				if (width > max_photo_size) {
		    					return height*max_photo_size/width;
		    				}
		    			}
		    			return height;
		    		}
		    	}
		    	,{
		    		getPhotoWidth: function(id) {
		    			var r = userIdsWithTopBookingRankingStore.getById(id);
		    			var height = r.get('photo_height');
		    			var width = r.get('photo_width');
		    			if (width > height) {
		    				if (width > max_photo_size) {
		    					return max_photo_size;
		    				}
		    			} else {
		    				if (height > max_photo_size) {
		    					return width*max_photo_size/height;
		    				}
		    			}
		    			return width;
		    		}
		    	}
				,{
					getTierColor: function(tier) {
						if (tier.toLowerCase()=='silver') {
							return "color:#227A9F;";
						} else if (tier.toLowerCase()=='golden') {
							return "color:#9F8622;";
						} else if (tier.toLowerCase()=='platinum') {
							return "color:#DF3A3A;";
						} else if (tier.toLowerCase()=='diamond') {
							return "color:#2E4FD4;";
						}
						return "";
					}
				}
		    )
		});
		
	    var otherRestaurantsBookedStore = new Ext.data.JsonStore({
			url: '/RestaurantBookingServlet?action=getOtherRestaurantsBooked&num=10&rest_id='+rest_id,
			root: 'results'
		   	,id: 'id'
		   	,totalProperty: 'totalCount'
		   	,fields: ['id', 'name', 'short_name', 'cuisine', 'discount', 'discount_short_desc', 'expense', 'name_identifier', 'is_partner']
	    });
	    otherRestaurantsBookedStore.on('load', function(){
	    	Ext.getCmp('menu-loading-left_nav_restaurant_booking_status_others').hide();
	    	var resultSet = otherRestaurantsBookedStore.getCount();
	    	if (resultSet == 0) {
	    		Ext.getCmp('left-nav-other_restaurants_booked_text').hide();
	    		Ext.getCmp('left-nav-other_restaurants_booked_list').hide();
	    	} else {
	    		Ext.getCmp('left-nav-other_restaurants_booked_text').show();
	    		Ext.getCmp('left-nav-other_restaurants_booked_list').show();
	    	}
	    });

		var bookOthersIndex = 0;
		OtherRestaurantsBookedPanel = Ext.extend(Ext.DataView, {
			id:'left-nav-other_restaurants_booked_list',
		    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="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>",
				{
					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) {
						bookOthersIndex += 1;
						return bookOthersIndex;
					}
				},
				{
					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">Booking <span style="font-weight:normal;">&#39044;&#35746;&#24773;&#20917;</span></span>',
	        iconCls: 'icon-report-eidt',
            id:'left-nav-who_booked_this_restaurant_panel',
            frame: true,
            style:'margin-bottom:10px;',
            bodyStyle: 'padding:0 3px;',
			items: [
				{
					html:'<div style="text-align:center;padding-top:5px;font-size:12px;color:purple;"><b>'+rest_name+'</b></div>'
				}		        
				,{
					id:'left-nav-who_booked_this_text',
					html:'<div style="padding-top:5px;font-size:12px;color:blue;"><b>Who booked this restaurant:</b></div>'
				}		        
				,new WhoBookedThisRestaurantPanel({
		            store: userIdsWithTopBookingRankingStore
		        })
		        ,{
		        	id:'menu-loading-left_nav_restaurant_booking_status_who',
		        	html:'<span style="padding:7px;"><img src="/shared/sir/images/loading.gif" /> Loading...</span>'
		        }
				,{
					id:'left-nav-other_restaurants_booked_text',
					html:'<div style="padding-top:10px;font-size:12px;color:blue;"><b>What these people also booked:</b></div>'
				}		        
				,new OtherRestaurantsBookedPanel({
		            store: otherRestaurantsBookedStore
		        })
		        ,{
		        	id:'menu-loading-left_nav_restaurant_booking_status_others',
		        	html:'<span style="padding:7px;"><img src="/shared/sir/images/loading.gif" /> Loading...</span>'
		        }
		        ,{
		        	height:5,
		        	html:'&nbsp;'
		        }
			]
		});
		
		Ext.getCmp('menu-loading-left_nav_restaurant_booking_status_who').on('render', function(){
			userIdsWithTopBookingRankingStore.load();
		});
		
		Ext.getCmp('menu-loading-left_nav_restaurant_booking_status_others').on('render', function(){
			otherRestaurantsBookedStore.load();
		});
		
		panel.render(domId);
	}
});