MostPopular.MostPopularGrid = function()
{
	var grid = null;
	var store = null;

	function sort_grid(sender, state)
	{
		set_grid_tooltip(grid, store, 2);
	}

	function changeRenderer(val)
	{
		var color = (val>0 ? ' change-pos' : (val<0 ? ' change-neg' : ''));

		var res = '<div class="change">&nbsp;';
		res += '<div class="change-sign' + color + '">' + (val>0 ? '+' : (val<0 ? '-' : '&nbsp;')) + '</div>';
		res += '<div class="change-val' + color + '">' + (val<0 ? (-val) : val) + '</div>'
		res += '</div>'

		return res;
	}

	return {
		init: function()
		{
			store = new Ext.data.SimpleStore({
				fields: [
					{name: 'rank', type: 'float'},
					{name: 'change', type: 'float'},
					{name: 'term'}
				]
			});

			store.loadData(most_popular_data);
			var columnCss = 'font-family:Verdana,Tahoma,Arial;font-size:12px;line-height:17px;';

			grid = new Ext.grid.GridPanel({
				store: store,
				columns: [
					{ header:'Rank', width:37, sortable:true, dataIndex:'rank', align:'center', css:columnCss },
					{ header:'Change', width:50, sortable:true, dataIndex:'change', renderer:changeRenderer, align:'center', css:columnCss },
					{ id:'term', header:'Term', width:257, sortable:false, dataIndex:'term', css:columnCss }
				],
				stripeRows: true,
				// autoExpandColumn: 'term',
				height: 2548,
				width: 348,
				header: false,
				border: false
			});

			grid.render('grid_container');
			grid.addListener('sortchange', sort_grid);
			sort_grid();
		}
	};
}();