
function Paginator(config)
{
	this.url = null;
	this.page = 1;
	this.totalRecords = 0;
	this.recordsPerPage = 3;
	this.pageRange = 3;
	this.template = {
		renderMask: null,
		render: null,
		navigator: null,
		schema: null
	};
	Ext.apply(this, config);

	this.page = this.page - 1;
	this.totalPages = Math.ceil(this.totalRecords / this.recordsPerPage) - 1;
	this.componentID = Ext.id();

	this.pageTemplate = new Ext.XTemplate(
		'<a id="{componentID}_previous" class="button-prev" title="Página anterior">Página anterior</a>',
		'<div class="co">',
			'<tpl for="ranges">',
				'<a id="{parent.componentID}_page_{page}" class="itens" title="Página {showpage}">{showpage}</a>',
			'</tpl>',
		'</div>',
		'<a id="{componentID}_next" class="button-next" title="Próxima Página">Próxima Página</a>'
	);

	this.previousPage = previousPage;
	this.nextPage = nextPage;
	this.loadPage = loadPage;
	this.gotoPage = gotoPage;

	//carrega a página inicial
	if (this.totalRecords > 0) {
		this.loadPage();
	}

	function loadPage()
	{
		//ranges
		var ranges = [];
		for (var i = this.page - this.pageRange; i < this.page; i++) {
			var showpage = i + 1;
			if (i >= 0) {
				ranges.push({page: i, showpage: showpage, selected: false});
			}
		}
		for (i = this.page; (i <= this.totalPages && i <= (this.page + this.pageRange)); i++)
		{
			var showpage = i + 1;
			if (i == this.page) {
				ranges.push({page: i, showpage: showpage, selected: true});
			} else {
				ranges.push({page: i, showpage: showpage, selected: false});
			}
		}

		//requisição dos comentários
		
		Ext.get(this.template.renderMask).setStyle('display', 'block');
		Ext.get(this.template.renderMask).mask('Carregando comentários...', 'x-mask-loading');
		Ext.Ajax.request({
			url: this.url,
			params: {
				start: this.page * this.recordsPerPage,
				limit: this.recordsPerPage
			},
			callback: function(options, success, response) {
				Ext.get(this.template.renderMask).unmask();
				Ext.get(this.template.renderMask).setStyle('display', 'none');
				
				var resp = Ext.util.JSON.decode(response.responseText);
				this.template.schema.overwrite(this.template.render, resp);

				//controle de paginação
				if (this.totalPages >= 1) {
					this.pageTemplate.overwrite(this.template.navigator, {
						componentID: this.componentID,
						page: this.page,
						ranges: ranges
					});
	
					//página anterior
					var btnPrevious = Ext.get(String.format('{0}_previous', this.componentID));
					if (this.page > 0) {
						btnPrevious.addListener('click', previousPage, this);
						btnPrevious.addClass('cursor');
					} else {
						btnPrevious.removeClass('cursor');
					}
	
					//número das páginas
					for (var i = 0, t = ranges.length; i < t; i++) {
						var btnPage = Ext.get(String.format('{0}_page_{1}', this.componentID, ranges[i].page));
						if (ranges[i].selected) {
							btnPage.addClass('active');
						} else {
							btnPage.addListener('click', gotoPage.createDelegate(this, [ranges[i].page]), this);
							btnPage.addClass('cursor');
						}
					}
	
					//próxima página
					var btnNext = Ext.get(String.format('{0}_next', this.componentID));
					if (this.page < this.totalPages) {
						btnNext.addListener('click', nextPage, this);
						btnNext.addClass('cursor');
					} else {
						btnNext.removeClass('cursor');
					}
				}
			},
			scope: this
		});
	}

	function previousPage()
	{
		if (this.page > 0) {
			this.page--;
			this.loadPage();
		}
	}

	function nextPage()
	{
		if (this.page < this.totalRecords) {
			this.page++;
			this.loadPage();
		}
	}

	function gotoPage(page)
	{
		if (page >= 0 && page <= this.totalPages)
		{
			this.page = page;
			this.loadPage();
		}
	}
};
