/**
 * @fileOverview 탭이동을 구현한 컴포넌트
 * @author hooriza, modified by senxation
 */
nhn.TabControl = jindo.$Class({
	/** @lends nhn.TabControl */

	_welSelectedTab : null,
	_welSelectedPanel : null,
	
	/**
	 * TabControl 컴포넌트를 생성한다.
	 * @constructs
	 * @param {Object} el TabControl을 적용한 기준 엘리먼트.
	 * @param {Object} oOptions 옵션 객체
	 * @example
<!--
	기준 엘리먼트는 반드시 같은 수의 classPrefix+"tab", classPrefix+"panel" 쌍을 가져야하고 각 쌍은 특정 엘리먼트로 감싸져있어야한다.
	아래 예 참고.
-->
<div id="tab">
	<ul>
		<li class="tc-tab">첫번째</li> <!-- tab의 클래스명은 옵션의 classPrefix+"tab"으로 정해야한다. -->
		<li class="tc-tab tc-selected">두번째</li> <!-- default로 선택될 탭을 지정할 경우 tab의 클래스명은 옵션의 classPrefix+"selected"으로 정한다. (탭이 선택되었을 때 해당 탭과 매칭되는 패널은 classPrefix+"selected"의 클래스명을 갖게 된다.) -->
		<li class="tc-tab">세번째</li>
	</ul>
	<div>
		<div class="tc-panel">SUB SUB #1</li> <!-- tab이 선택되었을때 보여지는 panel의 클래스명은 옵션의 classPrefix+"panel"으로 정해야한다. -->
		<div class="tc-panel tc-selected">SUB SUB #2</li> <!-- default로 선택될 탭을 지정할 경우 panel의 클래스명은 옵션의 classPrefix+"selected"으로 정한다. -->
		<div class="tc-panel">SUB SUB #3</li>
	</div>
</div>
	 * @example
var oTab = new nhn.TabControl($('tab'), { 
	classPrefix : "tc-" // (String) 클래스명 앞에 붙게되는 prefix 선언
}).attach({
	select : function(e) {
		//탭이 선택되었을 때 발생
		//전달되는 이벤트 객체 e = {
		// 	index : (Number) 선택된 탭의 인덱스
		// 	tab : (HTMLElement) 선택된 탭
		// 	panel : (HTMLElement) 선택된 패널
		//}
	}
});
	 */
	$init : function(el, oOptions) {
		
		this.option({
			classPrefix : ''
		});
		
		this.option(oOptions || {});
		
		var sPrefix = this.option('classPrefix');
		
		var el = this._el = jindo.$(el);
		var elTabs = this._elTabs = cssquery.getSingle('.' + sPrefix + 'tab !> *', el);
		var elPanels = this._elPanels = cssquery.getSingle('.' + sPrefix + 'panel !> *', el);
		
		var oSelectedTab = cssquery.getSingle('> .' + sPrefix + 'tab.' + sPrefix + 'selected', elTabs);
		if (!oSelectedTab) oSelectedTab = cssquery.getSingle('> .' + sPrefix + 'tab', elTabs);
		
		this._selectTab(oSelectedTab);
		this._attachEvents();
		
	},
	
	_attachEvents : function() {
		
		var sPrefix = this.option('classPrefix');

		var elTabs = this._elTabs;
		var elPanels = this._elPanels;
	
		jindo.$Fn(function(e) {

			var el = e.element;
			var elTab = cssquery.test(el, '.' + sPrefix + 'tab') ? el : cssquery.getSingle('! .' + sPrefix + 'tab', el);
			if (!elTab) return; // 탭을 클릭한게 아니면 작업 중단
			
			this._selectTab(elTab);
			
			e.stop($Event.CANCEL_DEFAULT);
			
		}, this).attach(elTabs, 'click');
		
	},
	
	_selectTab : function(elTab) {
		
		var sPrefix = this.option('classPrefix');
		
		var elPanels = this._elPanels;
		var welTab = jindo.$Element(elTab);
		
		if (this._welSelectedTab) this._welSelectedTab.removeClass(sPrefix + 'selected');
		this._welSelectedTab = welTab;
		welTab.addClass(sPrefix + 'selected');
		
		var nIndex = cssquery('!~ .' + sPrefix + 'tab', elTab).length; // 클릭한게 몇번째 탭인지
		
		// 해당번째 패널 찾기
		var aPanels = cssquery('> .' + sPrefix + 'panel', elPanels);
		var elPanel = aPanels[nIndex];
		var welPanel = jindo.$Element(elPanel);
		
		if (this._welSelectedPanel) this._welSelectedPanel.removeClass(sPrefix + 'selected');
		this._welSelectedPanel = welPanel;
		welPanel.addClass(sPrefix + 'selected');
		
		this.fireEvent("select", {
			index : nIndex,
			tab : elTab,
			panel : elPanel
		})
		
	},
	
	/**
	 * n번째 Tab을 선택한다.
	 * @param {Number} n
	 * @return {Boolean} 선택여부
	 */
	selectTab : function(n) {
		
		var elTab = null;
		var sPrefix = this.option('classPrefix');
		
		if (typeof n == 'number')
			elTab = cssquery('> .' + sPrefix + 'tab', this._elTabs)[n];
		
		if (!elTab) return false;
		
		elTab = cssquery.test(elTab, '.' + sPrefix + 'tab') ? elTab : cssquery.getSingle('! .' + sPrefix + 'tab');
		if (!elTab) return false;
		
		this._selectTab(elTab);
		return true;
		
	}
	
}).extend(nhn.Component);