Ext.onReady(function(){

	//ranking top10*******************************************************
	var leftNavTop10TabDomNode = Ext.get('home-left-nav-top10-ranking');
	if (leftNavTop10TabDomNode) {
		var panel = new Ext.Panel({
            title: '<span class="panel-title ranking-nav-title">Top 10 Restaurants</span>',
            el: 'home-left-nav-top10-ranking',
            frame: true,
            bodyStyle: 'padding-left:5px;padding-right:5px;font-size:12px',
            layout: 'fit',
            height: 'auto',
            id: 'ranking-top10'
		});

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

	//newly join*******************************************************
	var leftNavNewlyJoinedTabDomNode = Ext.get('home-left-nav-newly-joined');
	if (leftNavNewlyJoinedTabDomNode) {
		var panel = new Ext.Panel({
            title: '<span class="panel-title ranking-nav-title">Newly Joined Restaurants</span>',
            el: 'home-left-nav-newly-joined',
            frame: true,
            bodyStyle: 'padding-left:5px;padding-right:5px;font-size:12px',
            layout: 'fit',
            height: 'auto',
            id: 'ranking-newly-joined'
		});

		//load
		var store = new Ext.data.JsonStore({
	    	url: '/RestaurantServlet?action=getRestaurantRanking'
	       ,root: 'results'
	       ,id: 'id'
	       ,fields: ['id', 'name', 'name_identifier']
	    });
		
		panel.on('render', function(){
			store.load({
				params: {
			        type: 'newly_joined'
			    },
			    
			    callback: function(records){
					var html = '';
					html += '<ul class="features box">';
			    	for (var x = 0; x < records.length; x++){
			            var name = records[x].get('name');
			            var id = records[x].get('id');
			            var name_identifier = records[x].get('name_identifier');
			            html += '<li><span class="ranking-nav-body"><a href="/singapore/restaurant/'+name_identifier+'/">'+name+'</a></span></li>';
			        }
					html += '</ul>';
			        var cmp = Ext.getCmp('ranking-newly-joined');
			        cmp.body.dom.innerHTML = html;
			    }
			});
		});
		
		panel.render();
	}


	//home right-nav tabs******************************************************************************************************
	//most popular panel-------------------------------------
	var rightNavMPTabDomNode = Ext.get('home-right-nav-mp-ranking');
	if (rightNavMPTabDomNode) {
		var panel = new Ext.Panel({
            title: '<span class="panel-title ranking-nav-title">Most Popular Restaurants</span>',
            el: 'home-right-nav-mp-ranking',
            frame: true,
            bodyStyle: 'padding-left:5px;padding-right:5px;font-size:12px',
            layout: 'fit',
            height: 'auto',
            id: 'ranking-most-popular'
		});

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

	//business ranking panel-------------------------------------
	var rightNavBusinessTabDomNode = Ext.get('home-right-nav-business-ranking');
	if (rightNavBusinessTabDomNode) {
		var panel = new Ext.Panel({
            title: '<span class="panel-title ranking-nav-title">Top 10 Restaurants For Business Dining</span>',
            el: 'home-right-nav-business-ranking',
            frame: true,
            bodyStyle: 'padding-left:5px;padding-right:5px;font-size:12px',
            layout: 'fit',
            height: 'auto',
            id: 'ranking-business'
		});

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

	//wedding ranking panel-------------------------------------
	var rightNavWeddingTabDomNode = Ext.get('home-right-nav-wedding-ranking');
	if (rightNavWeddingTabDomNode) {
		var panel = new Ext.Panel({
            title: '<span class="panel-title ranking-nav-title">Top 10 Restaurants For Wedding</span>',
            el: 'home-right-nav-wedding-ranking',
            frame: true,
            bodyStyle: 'padding-left:5px;padding-right:5px;font-size:12px',
            layout: 'fit',
            height: 'auto',
            id: 'ranking-wedding'
		});

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

	//lovers ranking panel-------------------------------------
	var rightNavLoversTabDomNode = Ext.get('home-right-nav-lovers-ranking');
	if (rightNavLoversTabDomNode) {
		var panel = new Ext.Panel({
            title: '<span class="panel-title ranking-nav-title">Top 10 Restaurants For Lovers</span>',
            el: 'home-right-nav-lovers-ranking',
            layout: 'fit',
            frame: true,
            bodyStyle: 'padding-left:5px;padding-right:5px;font-size:12px',
            height: 'auto',
            id: 'ranking-lovers'
		});

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

	function getHTML(records) {
		var html = '';
		html += '<div style="padding-top:8px;padding-bottom:5px;">';
		html += '<table width="100%" cellspacing="0" cellpadding="0">';
		for (var x = 0; x < records.length; x++){
	        var name = records[x].get('name');
	        var id = records[x].get('id');
	        var name_identifier = records[x].get('name_identifier');
	        var change_from_last = records[x].get('change_from_last');
	        var index = x+1;
		    var css = '';
		    if (change_from_last > 0) {
		    	css = 'up-green';
		    	title = "Going up";
		    } else if (change_from_last < 0) {
		    	css = 'down-red';
		    	title = "Going down";
		    } else {
		    	css = 'same-blue';
		    	title = "Stay the same";
		    }
		    
		    html += '<tr valign="top">';
		    html += '<td width="5%" align="left" style="padding-top:4px;">';
		    html += '<div style="color:#0464BB;">'+index+'.</div>';
		    html += '</td>';
		    html += '<td width="90%" style="padding:4px 5px 4px 10px;">';
		    html += '<div><span class="ranking-nav-body"><a href="/singapore/restaurant/'+name_identifier+'/">'+name+'</a></span></div>';
		    html += '</td>';
		    html += '<td width="5%" style="padding-top:7px;">';
		    html += '<div><image src="/shared/sir/images/'+css+'-10x10.png" title="'+title+'"/></div>';
		    html += '</td>';
		    html += '</tr>';
	    }
	    html += '</table>';
	    html += '</div>';
	    
		return html;
	}
});