Ext.onReady(function(){
	var domId = 'left-nav-restaurant_latest_reviews';
	var domNode = Ext.get(domId);
	if (domNode) {
		var reloadPeriod = 180000;	//3min
		var domNode = Ext.get('req-param-latest-review-reload-period');
		if (domNode) {
			reloadPeriod = domNode.dom.innerHTML;
			reloadPeriod = reloadPeriod*60*1000;
		}

		var max_photo_size = 42;
		var icon_size = 16;
		
		//get rest_id
		var domNode = Ext.get('req-param-restid');
		var rest_id = '';
		if (domNode) {
			rest_id = domNode.dom.innerHTML;
		}
		
	    var latest_review_store = new Ext.data.JsonStore({
			url: '/RestaurantServlet?action=getRestaurantLatestReviews&src=summary_left_nav&num=5',
	    	root: 'results'
	    	,id: 'index'
	       	,fields: ['index', 'type', 'id', 'rest_id', 'content', 'content_short', 'user', 'review_time', 'rest_name', 'rest_name_identifier', 'photo_name', 'photo_width', 'photo_height',
						'fb_id', 'fb_icon', 'fb_caption', 'fb_description', 'fb_from', 'fb_review_time', 'fb_has_comment', 'fb_likes', 'fb_name', 'fb_picture', 'fb_type', 'fb_msg', 'fb_msg_short', 'fb_msg_app']
	       	
	    });
		var last_store_ids = new Array();
	    latest_review_store.on('load', function(){
			last_store_ids = new Array();
	    	Ext.getCmp('menu-loading').hide();
	    	var resultSet = latest_review_store.getCount();
	    	if (resultSet != 0) {
	    		Ext.getCmp('left-nav-latest_review_panel').show();
		    	setTimeout(
		    		function(){
		    			var el = Ext.get('latest-reviews-'+(latest_review_store.getCount()-1));
		    			if (el) {
		    				latest_review_store.each(
		    					function(r){
		    						var id = r.get('id');
		    						if (!id || id.length==0) {
		    							id = r.get('fb_id');
		    						}
		    						last_store_ids.push(id);

		    						var html = '';
		    						if (r.get('type')=='1') {
			    						html += '<div>'+Url.replaceEscape(r.get('user'))+' commented on <b>'+Url.replaceEscape(r.get('rest_name'))+'</b> at '+Url.replaceEscape(r.get('review_time'))+'</div>';
			    						html += '<div>'+Url.replaceEscape(r.get('content'))+'</div>';
			    						html += '<div>Click to view more details</div>';
		    						} else if (r.get('type')=='2') {
		    							var view_comment_html = '';
		    							var fb_has_comment = Url.replaceEscape(r.get('fb_has_comment'));
		    							if (fb_has_comment=='Y') {
		    								view_comment_html = '<div>Click to view comments</div>';
		    							}
		    							var fb_msg = Url.replaceEscape(r.get('fb_msg'));
		    							fb_msg = fb_msg.replace(/\r\n/gi, "<br/>");
			    						html += '<div>'+fb_msg+'</div>';
			    						if (r.get('fb_type')=='link') {
			    							var fb_picture = Url.replaceEscape(r.get('fb_picture'));
			    							if (fb_picture.length==0) {
			    								fb_picture = "/shared/sir/images/s.gif";
			    							}
			    							var fb_name = Url.replaceEscape(r.get('fb_name'));
			    							var fb_caption = Url.replaceEscape(r.get('fb_caption'));
			    							var fb_description = Url.replaceEscape(r.get('fb_description'));
			    							html += '<div style="padding:10px 0;"><table border="0" cellpadding="0" cellspacing="0">'+
				    									'<tr valign="top">'+
				    										'<td width="0%"><img src="'+fb_picture+'"/></td>'+
				    										'<td width="100%" style="font-size:11px;color:#808080;padding-left:10px;">'+
				    											'<div style="color:#3B5998;"><b>'+fb_name+'</b></div>'+
				    											'<div>'+fb_caption+'</div>'+
				    											'<div>'+fb_description+'</div>'+
				    											view_comment_html+
				    										'</td>'+
				    									'</tr>'+
			    									'</talbe></div>';
			    						} else if (r.get('fb_type')=='photo') {
			    							html += '<div style="padding:10px 0;"><img src="'+fb_picture+'"/></div>'+view_comment_html;
			    						}
		    						}
								    new Ext.ToolTip({
								        target: 'latest-reviews-'+r.get('index'),
								        cls:'white-tip',
								        boxMinWidth:350,
								        anchor: 'top',
								        dismissDelay:0,
								        //autoHide: false,
								        //closable: true,
								        anchorOffset: 50,
								        //trackMouse: true,
								        html: html
								    });
		    					}
		    				);
		    			}
		    		}, 5000);
	    	} else {
	    		Ext.getCmp('left-nav-latest_review_panel').hide();
	    	}
	    });
		
		var is_new = true;
		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='{index:this.getPhoto}' height='{index:this.getPhotoHeight}' width='{index:this.getPhotoWidth}'/></td>",
							    	"<td width='74%'>",
								    	"<table width='100%' cellspacing='0' cellpadding='0' border='0''>",
								    		"<tr>",
								    			"<td width='56%'>{index:this.getName}</td>",
								    			"<td width='44%' align='right'><img src='{index:this.getTimeIcon}' width='{type:this.getTimeIconWidth}'/> <span style='font-size:10px;color:#888888;'>{index:this.getReviewTime}</span></td>",
								    		"</tr>",
								    	"</table>",
								    	"<div><a href='{index:this.getUrl}' target='{type:this.getTarget}' id='latest-reviews-{index}'>{index:this.getContent}</a></div>",
							    	"</td>",
							    '</tr>',
						    '</table>',
						'</div>',
			        '</tpl>',
				"</div>"
		    	,{
		    		getPhotoHeight: function(index) {
		    			var r = latest_review_store.getById(index);
		    			var type = r.get('type');
		    			if (type == '2') {
		    				return max_photo_size;
		    			}
		    			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(index) {
		    			var r = latest_review_store.getById(index);
		    			var type = r.get('type');
		    			if (type == '2') {
		    				return max_photo_size;
		    			}
		    			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;';
			    	}
			    }
			    ,{
			    	getPhoto: function(index) {
			    		var r = latest_review_store.getById(index);
		    			var type = r.get('type');
		    			if (type=='1') {
				    		var photo_name = r.get('photo_name');
			    			return '/shared/sir/images/user-photo-upload/'+photo_name;
		    			} else if (type=='2') {
		    				return '/shared/sir/images/ninelogic-logo.png';
		    			}
			    	}
			    }
			    ,{
			    	getTimeIcon: function(index) {
			    		var r = latest_review_store.getById(index);
			    		var type = r.get('type');
			    		if (type=='1') {
			    			return '/shared/sir/images/comment.png';
			    		} else if (type=='2') {
		    				var fb_icon = r.get('fb_icon');
		    				if (!fb_icon || fb_icon.length==0) {
			    				return '/shared/sir/images/facebook-share.gif';
		    				} else {
		    					return fb_icon;
		    				}
			    		} 
			    	}
			    }
			    ,{
			    	getTimeIconWidth: function(type) {
			    		if (type=='2') {
			    			return '11';
			    		} else {
			    			return '1';
			    		}
			    	}
			    }
		    	,{
		    		getUrl: function(index) {
		    			var r = latest_review_store.getById(index);
		    			var type = r.get('type');
		    			if (type=='1') {
		    				var name_identifier = r.get('rest_name_identifier');
		    				return '/singapore/restaurant/'+name_identifier+'/#reviews';
		    			} else if (type='2') {
		    				var fb_icon = r.get('fb_icon');
		    				if (!fb_icon || fb_icon.length==0) {
			    				return 'http://www.facebook.com/ninelogic';
		    				} else {
			    				return 'http://www.twitter.com/ninelogic';
		    				}
		    			}
		    		}
		    	}
		    	,{
		    		getTarget: function(type) {
		    			if (type == '1') {
		    				return '_self';
		    			} else if (type == '2') {
		    				return "_blank";
		    			}
		    		}
		    	},
		    	{
		    		getName: function(index) {
		    			var r = latest_review_store.getById(index);
		    			var type = r.get('type');
	    				var name = '';
		    			if (type=='1') {
		    				name = r.get('user');
		    			} else if (type=='2') {
		    				name = r.get('fb_from');
		    			}
		    			var id = r.get('id');
		    			if (!id || id.length==0) {
		    				id = r.get('fb_id');
		    			}
		    			is_new = true;
		    			if (last_store_ids.length==0) {
		    				is_new = false;
		    			} else {
		    				for (var i=0; i<last_store_ids.length; i++) {
		    					var last_id = last_store_ids[i];
				    			if (id == last_id) {
					    			is_new = false;
					    			break;
				    			}
		    				}
		    			}
		    			if (is_new) {
		    				name = '<b>'+name+'</b>';
		    			}
		    			return name;
		    		}
		    	},
		    	{
		    		getReviewTime: function(index) {
		    			var r = latest_review_store.getById(index);
		    			var type = r.get('type');
	    				var review_time = '';
		    			if (type=='1') {
		    				review_time = r.get('review_time');
		    			} else if (type=='2') {
		    				review_time = r.get('fb_review_time');
		    			}
		    			if (is_new) {
		    				review_time = '<b>'+review_time+'</b>';
		    			}
		    			return review_time;
		    		}
		    	},
		    	{
		    		getContent: function(index) {
		    			var r = latest_review_store.getById(index);
		    			var type = r.get('type');
	    				var content = '';
		    			if (type=='1') {
		    				content = r.get('content_short');
		    			} else if (type=='2') {
		    				content = r.get('fb_msg_short');
		    			}
		    			if (is_new) {
		    				if (content.lastIndexOf('...')!=-1 && content.length > 15 && content.lastIndexOf('...')==content.length-3) {
		    					content = content.substring(0, content.length-5)+'...';
		    				} else if (content.length > 15) {
		    					content = content.substring(0, content.length-2)+'...';
		    				}
		    				content = '<b>'+content+'</b>';
		    			}
		    			return content;
		    		}
		    	}
		    )
		});
		
		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: latest_review_store
		        })
		        ,{
		        	id:'menu-loading',
		        	html:'<span style="padding:7px;"><img src="/shared/sir/images/loading.gif" /> Loading...</span>'
		        }
			]
		});
		
		Ext.getCmp('menu-loading').on('render', function(){
			latest_review_store.load();
		    setInterval(function(){
		    	latest_review_store.reload();
		    },reloadPeriod);
		});
		panel.render(domId);
	}

});