/*
	elTemplate : new Ext.Template([
		'<button class="{firstClassName}">맨앞</button>',
		'<button class="{previousClassName}">이전</button>',
		'<span class="{pagingClassName}"></span>',
		'<button class="{nextClassName}">다음</button>',
		'<button class="{lastClassName}">맨끝</button>'
	]),
	pageTemplate : new Ext.Template('<span class="{pageClassName}" value="{page}">{page}</span>'),
	activeTemplate : new Ext.Template('<span class="{activeClassName}">{page}</span>'),
	
*/
Mys.TemplatePager = function(config)
{
	Ext.apply(this, config);
	
	this.addEvents({"move" : true});
};

Ext.extend(Mys.TemplatePager, Ext.util.Observable,
{
	el : null,
	elTemplate : null,
	previousEl : null,
	nextEl : null,
	pagingEl : null,
	
	className : "mys-pager",
	firstClassName : "mys-pager-first",
	previousClassName : "mys-pager-previous",
	pagingClassName : "mys-pager-paging",
	nextClassName : "mys-pager-next",
	lastClassName : "mys-pager-last",
	pageClassName : "mys-pager-page",
	activeClassName : "mys-pager-active",
	disabledClassName : "mys-pager-disabled",
	
	page : 1,
	minPage : 1,
	maxPage : 10,
	perPage : 10, //한번에 나타나는 페이지 갯수
	
	pageTemplate : null,
	activeTemplate : null,
	between : '',
	
	rendered : false,
	
	getEl : function()
	{
		return this.el;
	},
	
	render : function(el)
	{
		if(!el || this.rendered)
			return;
		
		this.el = Ext.get(el);
		
		this.rendered = true;
		
		this.el.addClass(this.className);
		
		this.elTemplate.overwrite(this.el, {
			firstClassName : this.firstClassName,
			previousClassName : this.previousClassName,
			pagingClassName : this.pagingClassName,
			nextClassName : this.nextClassName,
			lastClassName : this.lastClassName
		});
		
		this.firstEl = this.el.child("." + this.firstClassName);
		this.previousEl = this.el.child("." + this.previousClassName);
		this.pagingEl = this.el.child("." + this.pagingClassName);
		this.nextEl = this.el.child("." + this.nextClassName);
		this.lastEl = this.el.child("." + this.lastClassName);
		
		this.firstEl.on("click", this.first, this);
		this.previousEl.on("click", this.previous, this);
		this.pagingEl.on("click", this.onClick, this);
		this.nextEl.on("click", this.next, this);
		this.lastEl.on("click", this.last, this);
		
		this.update();
	},
	
	first : function()
	{
		return this.setPage(this.minPage);
	},
	
	previous : function()
	{
		return this.setPage(this.page - 1);
	},
	
	setPage : function(page)
	{
		if(page < this.minPage || this.maxPage < page)
			return false;
		
		this.page = page;
		
		this.update();
		
		this.fireEvent("move", this.page);
		
		return this.page;
	},
	
	next : function()
	{
		return this.setPage(parseInt(this.page) + 1);
	},
	
	last : function()
	{
		return this.setPage(this.maxPage);
	},
	
	update : function()
	{
		if(!this.rendered)
			return false;
		
		if(this.maxPage <= this.page)
		{
			this.lastEl.addClass(this.disabledClassName);
			this.nextEl.addClass(this.disabledClassName);
		}
		else
		{
			this.lastEl.removeClass(this.disabledClassName);
			this.nextEl.removeClass(this.disabledClassName);
		}
		
		if(this.minPage >= this.page)
		{
			this.firstEl.addClass(this.disabledClassName);
			this.previousEl.addClass(this.disabledClassName);
		}
		else
		{
			this.firstEl.removeClass(this.disabledClassName);
			this.previousEl.removeClass(this.disabledClassName);
		}
		
		for(var i = this.minPage; i <= this.page - this.perPage; i += this.perPage);
		
		for(var j = i, tp = []; j < i + this.perPage && j <= this.maxPage; j++)
		{
			if(this.page == j)
				tp.push(this.activeTemplate.applyTemplate({page : j, activeClassName : this.activeClassName}));
			else
				tp.push(this.pageTemplate.applyTemplate({page : j, pageClassName : this.pageClassName}));
		}
		this.pagingEl.update(tp.join(this.between));
	},
	
	refresh : function()
	{
		this.setPage(this.page);
	},
	
	onClick : function(e, el)
	{
		if(!Ext.fly(el).hasClass(this.pageClassName))
			return false;
		
		this.setPage(el.getAttribute("value"));
	},
	
	setMaxPage : function(maxPage)
	{
		if(maxPage < this.minPage)
			maxPage = this.minPage;
		
		this.maxPage = maxPage;
		
		this.update();
	},
	
	setMinPage : function(minPage)
	{
		this.minPage = minPage;
		
		this.update();
	}
	/*
	disable : function()
	{
		this.firstEl.addClass(this.disabledClassName);
		this.previousEl.addClass(this.disabledClassName);
		this.lastEl.addClass(this.disabledClassName);
		this.nextEl.addClass(this.disabledClassName);
	},
	
	enable : function()
	{
		this.firstEl.removeClass(this.disabledClassName);
		this.previousEl.removeClass(this.disabledClassName);
		this.lastEl.removeClass(this.disabledClassName);
		this.nextEl.removeClass(this.disabledClassName);
	}*/
});