Ext.onReady(function(){
	
	var domNode = Ext.get('blog');
	if (domNode) {
		//configs
		var default_link_color = '#0464BB';

		function getHTML(records) {
			var html = '';
			html += '<div style="line-height:18px;">';
			html += '<table width="100%" cellspacing="0" cellpadding="0">';
			for (var x = 0; x < records.length; x++){
		        var id = records[x].get('id');
		        var name = records[x].get('name');
		        var short_name = records[x].get('short_name');
		        var name_identifier = records[x].get('name_identifier');
		        var discount = records[x].get('discount_desc');
		        var discount_short = records[x].get('discount_short_desc');
		        var link_color = records[x].get('link_color');
		        if (!link_color || link_color.length==0) {
		        	link_color = default_link_color;
		        }
		        var index = x+1;
	
			    html += '<tr valign="top">';
			    html += '<td width="5%" align="left">';
			    html += '<div style="padding-top:8px;padding-right:2px;"><img src="/shared/sir/images/text-ranking-'+index+'.gif"/></div>';
			    html += '</td>';
			    html += '<td width="58%">';
			    html += '<div style="padding:5px 5px 0px;"><a style="color:'+link_color+';" href="/singapore/restaurant/'+name_identifier+'/" ext:qtip="<div><b>'+name+'</b></div><div>Discount: '+discount+'</div><div>Click to view details.</div>">'+short_name+'</a></div>';
			    html += '</td>';
			    html += '<td width="28%" style="padding-top:4px;text-align:center;">';
			    html += '<div style="color:red;">'+discount_short+'</span></div>';
			    html += '</td>';
			    html += '<td width="9%" style="padding-top:4px;padding-left:5px;">';
			    html += "<div style='font-size:12px;'><span style='color:#888888;'>[</span><a href='javascript:void(0)' onclick='showRestaurantBookingForm(\""+id+"\");' ext:qtip='Click to make a booking.'>book</a><span style='color:#888888;'>]</span></div>";
			    html += '</td>';
			    html += '</tr>';
		    }
		    html += '</table>';
		    html += '</div>';
		    
			return html;
		}
	
		var panel_title_icon_el = Ext.get("req-param-restaurant-panel-title-restaurant_blog-icon");
		var panel_title_icon = '';
		if (panel_title_icon_el) {
			panel_title_icon = Url.replaceEscape(panel_title_icon_el.dom.innerHTML);
		}
		
		var panel_title_text_el = Ext.get("req-param-restaurant-panel-title-restaurant_blog-text");
		var panel_title_text = undefined;
		if (panel_title_text_el) {
			panel_title_text = Url.replaceEscape(panel_title_text_el.dom.innerHTML);
		}
		
		var panel = new Ext.Panel({
	        height: 290,
	        //width: 230,
	        autoWidth: true,
            bodyStyle: 'padding:0 3px;',
            frame: true,
            //iconCls: 'icon-heart-add',
	        //title: '<span class="home-centerpanel-header">Newly Joined <span style="font-weight:normal;">&#26032;&#21152;&#30431;&#39184;&#21381;</span></span>',
            iconCls: panel_title_icon,
	        title: panel_title_text,
	        html:'<span style="padding:7px;"><img src="/shared/sir/images/loading.gif" /> Loading...</span>',
            id: 'ranking-newly-joined'
		});

		panel.on('render', function(){
			var store = new Ext.data.JsonStore({
		    	url: '/RestaurantServlet?action=getRestaurantRanking'
		       ,root: 'results'
		       ,id: 'id'
		       ,fields: ['id', 'name', 'change_from_last', 'short_name', 'discount_desc', 'discount_short_desc', 'ranking', 'link_color', 'name_identifier']
		    });
			
			store.load({
				params: {
			        type: 'newly_joined'
			    },
			    
			    callback: function(records){
					var html = getHTML(records);
			        var cmp = Ext.getCmp('ranking-newly-joined');
			        cmp.body.dom.innerHTML = html;
			    }
			});
		});
		
		panel.render(domNode);
	}

});