//elTemplate : new Ext.Template('<div class="{bodyClassName}"></div><div class="{emptyClassName}">내용이 없습니다.</div><div class="{loadingClassName}">읽는 중입니다.</div><div class="{pagerClassName}"></div>')
Mys.TemplateList = function(config)
{
	Ext.apply(this, config);
	
	this.addEvents({"move" : true, "render" : true, "update" : true, "beforeupdate" : true});
};

Ext.extend(Mys.TemplateList, Ext.util.Observable,{
	el : null,
	elTemplate : null,
	headerTemplate : null,
	
	className : "mys-list",
	headerClassName : "mys-list-header",
	bodyClassName : "mys-list-body",
	footerClassName : "mys-list-footer",
	pagerClassName : "mys-list-pager",
	emptyClassName : "mys-list-empty",
	loadingClassName : "mys-list-loading",
	
	rendered : false,
	maxRow : 10,
	totalRow : 10,
	itemClass : Mys.TemplateItem,
	itemConfig : {},
	
	render : function(el)
	{
		if(!el || this.rendered)
			return false;
		
		this.el = Ext.get(el);
		
		if(!this.el)
			return false;
		
		this.rendered = true;
		
		this.el.addClass(this.className);
		
		this.elTemplate.overwrite(this.el, this);
		
		this.headerEl = this.el.child("." + this.headerClassName);
		this.bodyEl = this.el.child("." + this.bodyClassName);
		this.emptyEl = this.el.child("." + this.emptyClassName);
		this.loadingEl = this.el.child("." + this.loadingClassName);
		this.footerEl = this.el.child("." + this.footerClassName);
		this.pagerEl = this.el.child("." + this.pagerClassName);
		
		if(this.headerEl && this.headerTemplate)
			this.headerTemplate.overwrite(this.headerEl, this);
		if(this.footerEl && this.footerTemplate)
			this.footerTemplate.overwrite(this.footerEl, this);
		if(this.pagerEl && this.pager)
		{
			this.pager.render(this.pagerEl);
			this.pager.on("move", function(page){this.startLoading();this.fireEvent("move", (page - 1) * this.maxRow, this.maxRow);}, this);
		}
		
		this.setEvents();
		this.startLoading();
		
		this.fireEvent("render", this);
	},
	
	setEvents : function()
	{
		
	},
	
	update : function(data, total)
	{
		if(!this.rendered || this.fireEvent("beforeupdate", this, data) === false)
			return false;
		
		this.endLoading();
		
		this.totalRow = parseInt(total) || 0;
		
		if(this.pager)
			this.pager.setMaxPage(Math.ceil(this.totalRow / this.maxRow));
		
		if(!data || ((data instanceof Array) && !data.length))
			this.empty();
		else if(!(data instanceof Array))
			data = [data];
		
		if(data && data.length)
			this.updateData(data);
		
		this.fireEvent("update", this, this.data, this.totalRow);
	},
	
	updateData : function(data)
	{
		this.data = data;
		
		this.items = [];
		
		this.bodyEl.update('');
		
		for(var i = 0, inner = ''; i < data.length && i < this.maxRow; i++)
		{
			var item = new this.itemClass(data[i], Ext.apply(this.itemConfig, {list : this}));
			this.items.push(item);
			
			item.append(this.bodyEl);
		}
	},
	
	refresh : function()
	{
		if(this.pager)
			this.pager.refresh();
		else
			this.fireEvent("move", 0, this.maxRow);
	},
	
	startLoading : function()
	{
		if(!this.rendered)
			return false;
		if(this.loadingEl)
			this.loadingEl.dom.style.display = "";
		if(this.emptyEl)
			this.emptyEl.dom.style.display = "none";
		if(this.bodyEl)
			this.bodyEl.dom.style.display = "none";
		if(this.pagerEl)
			this.pagerEl.dom.style.display = "none";
		
//		if(this.pager)
//			this.pager.disable();
	},
	
	endLoading : function()
	{
		if(!this.rendered)
			return false;
		
		if(this.loadingEl)
			this.loadingEl.dom.style.display = "none";
		if(this.emptyEl)
			this.emptyEl.dom.style.display = "none";
		if(this.bodyEl)
			this.bodyEl.dom.style.display = "";
		if(this.pagerEl)
			this.pagerEl.dom.style.display = "";
		
//		if(this.pager)
//			this.pager.update();
	},
	
	empty : function()
	{
		if(!this.rendered)
			return false;
		
		if(this.loadingEl)
			this.loadingEl.dom.style.display = "none";
		if(this.emptyEl)
			this.emptyEl.dom.style.display = "";
		if(this.bodyEl)
			this.bodyEl.dom.style.display = "none";
		if(this.pagerEl)
			this.pagerEl.dom.style.display = "none";
		
//		if(this.pager)
//			this.pager.update();
	}
});