Mys.IndexList = function(config)
{
	Mys.IndexList.superclass.constructor.call(this, config);
	
	this.on("move", function(start, maxRow){
		this.onSorted();
		this.onRanged();
		
		this.startLoading();
		Global.modelItem.getIndexList(this.boardID, this.boardType, this.order, this.dir, this.basis, this.timePoint, this.range, start, maxRow, function(data){
			if(data && data.response.code == 100)
				this.update(data.response.item, data.response.total);
			else
				this.empty();
		}, this)
	}, this);
};

Ext.extend(Mys.IndexList, Mys.TemplateList, {
	dir : "desc",
	range : "month",
	order : "agree_count",
	
	className : "mys-index",
	maxRow : 5,
	headerTemplate : (new Ext.Template('<img class="mys-index-header" src="/images/blank.gif"/>')).compile(),
	sortTemplate : (new Ext.Template([
		'<span id="agree-sort-list">',
			'<a class="agree sort" href="javascript:void(0);" value="agree_count"><img src="/images/blank.gif"/></a>',
		'</span>',
		'<span id="reply-sort-list">',
			'<a href="javascript:void(0);" class="reply sort" value="reply_count"><img src="/images/blank.gif"/></a>',
		'</span>'
	])).compile(),
	
	elTemplate : (new Ext.Template([
		'<div class="{className}">',
			'<div class="{headerClassName}">',
			'</div>',
			'<table width="160" border="0" cellspacing="0" cellpadding="0">',
				'<tr>',
					'<td width="5" bgcolor="#F3F3F3"></td>',
					'<td width="144" bgcolor="#FFFFFF" style="padding:3px">',
						'<table width="100%" border="0" cellspacing="0" cellpadding="0">',
							'<tr>',
								'<td class="mys-index-sort" colspan="2"></td>',
							'</tr>',
							'<tr>',
								'<td id="mys-index-list-menu" height="25" colspan="2" align="right" class="txt1188">',
									'<a href="javascript:void(0);" class="s11 c88 range" onfocus="blur()" value="today"><img src="/images/blank.gif" hspace="3" align="absmiddle" />오늘</a>',
									'<span class="mys-index-partiton"> | </span>',
									'<a href="javascript:void(0);" class="s11 c88 range" onfocus="blur()" value="week"><img src="/images/blank.gif" hspace="3" align="absmiddle" />주간</a>',
									'<span class="mys-index-partiton"> | </span>',
									'<a href="javascript:void(0);" class="s11 c88 range" onfocus="blur()" value="month"><img src="/images/blank.gif" hspace="3" align="absmiddle" />월간</a>',
									'<span class="mys-index-partiton"> | </span>',
									'<a href="javascript:void(0);" class="s11 c88 range" onfocus="blur()" value="year"><img src="/images/blank.gif" hspace="3" align="absmiddle" />연간</a>',
								'</td>',
							'</tr>',
							'<tr>',
								'<td><div class="{bodyClassName}"></div><div style="text-align : center;" class="{emptyClassName}">내용이 없습니다.</div><div class="{loadingClassName}"><img class="mys-loading-img" src="/images/common/loadinbar.gif"/></div><div class="{pagerClassName}"></div></td>',
							'</tr>',
					'</table></td>',
					'<td width="5" bgcolor="#F3F3F3"></td>',
				'</tr>',
			'</table>',
		'</div>'
	])).compile(),
	
	itemClass : Mys.IndexItem,
	
	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], {index : i + 1, list : this});
			this.items.push(item);
			
			item.append(this.bodyEl);
		}
	},
	
	setEvents : function()
	{
		var sortEl = this.el.child(".mys-index-sort");
		
		this.sortTemplate.overwrite(sortEl, this);
		
		this.sortEl = this.el.select(".sort");
		
		this.sortEl.on("click", this.onSortClick, this);
		
		this.rangeEl = this.el.select(".range");
		
		this.rangeEl.on("click", this.onRangeClick, this);
	
		this.onSorted();
		this.onRanged();
	},
	
	onSortClick : function(e, el)
	{
		this.setSort(e.getTarget("a").getAttribute("value"));
	},
	
	onRangeClick : function(e, el)
	{
		this.setRange(e.getTarget("a").getAttribute("value"));
	},
	
	setSort : function(order)
	{
		if(!order)
			return ;
		
		this.order = order;
		
		this.refresh();
	},
	
	setRange : function(range)
	{
		if(!range)
			return;
		
		this.range = range;
		
		this.refresh();
	},
	
	onSorted : function()
	{
		this.sortEl.each(function(el){
			if(el.dom.getAttribute("value") == this.order)
				el.addClass("active");
			else
				el.removeClass("active");
		}, this);
		
		this.sortEl.each.defer(100, this.sortEl, [function(el){
			el.repaint();
		}, this]);
	},
	
	onRanged : function()
	{
		this.rangeEl.each(function(el){
			if(el.dom.getAttribute("value") == this.range)
				el.addClass("active");
			else
				el.removeClass("active");
		}, this);
	}
});