Ext.onReady(function(){
	
	var domNode = Ext.get('most-booked');
	if (domNode) {
		//configs
		var default_link_color = '#046BCA';
		
		function getHTML(records) {
			var html = '';
			html += '<div style="">';
			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:5px;padding-right:2px;"><img src="/shared/sir/images/text-ranking-'+index+'.gif"/></div>';
			    html += '</td>';
			    html += '<td width="61%">';
			    //html += '<div style="padding:5px 5px 0px;"><a style="color:'+link_color+';"  href="showDetails.jsp?rest-id='+id+'" ext:qtip="<b>'+name+'</b><br/>Click to view details.">'+short_name+'</a></div>';
			    html += '<div style="padding:5px 5px 0px;"><a style="color:'+link_color+';"  href="/singapore/restaurant/'+name_identifier+'*'+id+'/" 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="25%" style="padding-top:3px;text-align:center;">';
			    html += '<div style="color:red;">'+discount_short+'</span></div>';
			    html += '</td>';
			    html += '<td width="9%" style="padding-top:3px;padding-left:5px;">';
			    html += "<div style='font-size:12px;'>[<a href='javascript:void(0)' onclick='showRestaurantBookingForm(\""+id+"\");' ext:qtip='Click to make a booking.'>book</a>]</div>";
			    //html += '<div style="font-size:12px;">[<a href="RestaurantBooking.jsp?rest-id='+id+'" ext:qtip="Click to make a booking.">book</a>]</div>';
			    html += '</td>';
			    html += '</tr>';
		    }
		    html += '</table>';
		    html += '</div>';
		    
			return html;
		}
	
		var panel_title_icon_el = Ext.get("req-param-restaurant-panel-title-restaurant_most_booked-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_most_booked-text");
		var panel_title_text = undefined;
		if (panel_title_text_el) {
			panel_title_text = Url.replaceEscape(panel_title_text_el.dom.innerHTML);
		}
		
		var current_src_el = Ext.get("req-param-current-src");
		var current_src = '';
		if (current_src_el) {
			current_src = Url.replaceEscape(current_src_el.dom.innerHTML);
		}
		
	    var panel = new Ext.Panel({
	        height: 245,
	        //width: 265,
	        autoWidth: true,
	        frame: true,
            bodyStyle: 'padding:0 3px;',
	        //iconCls: 'icon-ranking',
	        //title: '<span class="home-centerpanel-header">Most Booked <span style="font-weight:normal;">&#35746;&#39184;&#25490;&#34892;&#27036;</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:'most-booked-panel'
	    });

		panel.on('render', function(){
			//Create a store******************************************************************
			//load
			var store = new Ext.data.JsonStore({
		    	url: '/RestaurantBookingServlet?action=getRestaurantRanking&from='+current_src
		       ,root: 'results'
		       ,id: 'id'
		       ,fields: ['id', 'name', 'change_from_last', 'short_name', 'discount_desc', 'discount_short_desc', 'ranking', 'link_color', 'name_identifier']
		    });
			
			store.load({
				waitMsg:'loading...',
				params: {
			        type: 'most_booked'
			    },
			    
			    callback: function(records){
					var html = getHTML(records);
			        var cmp = Ext.getCmp('most-booked-panel');
			        cmp.body.dom.innerHTML = html;
			    }
			});
		});   
        
        panel.render('most-booked');
	}

});