Ext.onReady(function(){
	var domId = 'left-nav-restaurant_latest_reviews';
	var domNode = Ext.get(domId);
	if (domNode) {
		var max_photo_size = 42;
		
		//get rest_id
		var domNode = Ext.get('req-param-restid');
		var rest_id = '';
		if (domNode) {
			rest_id = domNode.dom.innerHTML;
		}
		
	    var latestReviewStore = new Ext.data.JsonStore({
			url: '/RestaurantBookingServlet?action=getRestaurantLatestReviews&src=detail_left_nav&num=5',
	    	root: 'results'
	    	,id: 'id'
	       	,fields: ['id', 'rest_id', 'content', 'user', 'review_time', 'rest_name', 'rest_name_identifier', 'photo_name', 'photo_width', 'photo_height']
	    });
	    latestReviewStore.on('load', function(){
	    	Ext.getCmp('menu-loading-left_nav_restaurant_latest_reviews').hide();
	    	var resultSet = latestReviewStore.getCount();
	    	if (resultSet == 0) {
	    		//Ext.getCmp('left-nav-latest_review_panel').hide();
	    		Ext.get('left-nav-restaurant_latest_reviews').dom.style.display='none';
	    	} else {
	    		//Ext.getCmp('left-nav-latest_review_panel').show();
	    	}
	    });
		
		var index = 0;
		LatestReviewPanel = 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:5px 0;{user:this.getBorderCss}">',
					    	'<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='{id:this.getPhotoHeight}' width='{id:this.getPhotoWidth}'/></td>",
							    	"<td width='74%'>",
								    	"<table width='100%' cellspacing='0' cellpadding='0' border='0''>",
								    		"<tr>",
								    			"<td width='76%'>{user}</td>",
								    			"<td width='24%' align='right'><span style='font-size:10px;'>{review_time}</span></td>",
								    		"</tr>",
								    	"</table>",
								    	"<div><a href='/singapore/restaurant/{rest_name_identifier}*{rest_id}/#reviews' ext:qtip='{user} commented on <b>{rest_name}</b> on {review_time}'>{content}</a></div>",
							    	"</td>",
							    '</tr>',
						    '</table>',
						'</div>',
			        '</tpl>',
				"</div>"
		    	,{
		    		getPhotoHeight: function(id) {
		    			var r = latestReviewStore.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 = latestReviewStore.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;
		    		}
		    	}
			    ,{
			    	getBorderCss: function(str) {
			    		if (index == 0) {
				    		index += 1;
			    			return ''
			    		}
			    		index += 1;
			    		return 'border-top:1px solid #ddd;';
			    	}
			    }
		    )
		});
		
		var panel = new Ext.Panel({
            title: '<span class="home-centerpanel-header">Latest Reviews <span style="font-weight:normal;">&#26368;&#26032;&#35780;&#35770;</span></span>',
	        iconCls: 'icon-comments',
            id:'left-nav-latest_review_panel',
            frame: true,
            style:'',
            bodyStyle: 'font-size:12px',
            layout: 'fit',
            height: 'auto',
			items: [
				new LatestReviewPanel({
		            store: latestReviewStore
		        })
		        ,{
		        	id:'menu-loading-left_nav_restaurant_latest_reviews',
		        	html:'<span style="padding:7px;"><img src="/shared/sir/images/loading.gif" /> Loading...</span>'
		        }
			]
		});
		
	    Ext.getCmp('menu-loading-left_nav_restaurant_latest_reviews').on('render', function(){
		    latestReviewStore.load();
	    });
		panel.render(domId);
	}

});