/**
 * @fileOverview input[type=checkbox], input[type=radio] 의 디자인을 이미지등으로 대체하기 위한 HTML Component 
 * @author hooriza
 */

nhn.CheckBox = $Class({
	/** @lends nhn.CheckBox */
	tagName : 'input[type=checkbox]',
	
	/**
	 * CheckBox 컴포넌트를 생성한다.
	 * @constructs
	 * @param {String | HTMLElement} el input[type=checkbox]를 감싸고 있는 엘리먼트 혹은 그 id
	 * @param {Object} oOptions 옵션 객체
	 * @example
<xmp>
<span id="ajax_checkbox">
	<span class="ajax_checkbox_mark"></span><input type="checkbox" name="c" id="c1" />
</span> 
<label for="c1">첫번째</label>

<script type="text/javascript" language="javascript">
	nhn.CheckBox($('ajax_checkbox'), { classPrefix : 'checkbox-' });
</script>
</xmp>
	 */
	$init : function(el, oOptions) {
		
		this.option({
			classPrefix : 'checkbox-'
		});
		
		this.option(oOptions || {});
		
		var elWrapper = this._elWrapper = $(el);
		var welWrapper = this._welWrapper = $Element(el);
		
		/**
		 * 해당 input[type=checkbox] / input[type=radio] 엘리먼트
		 */
		this.elInput = cssquery.getSingle('input', elWrapper);
		if (this.elInput.type == "radio") {
			this.option("classPrefix", "radio-");
			this.tagName = "input[type=radio]";
		}

		var sPrefix = this.option('classPrefix');
		
		/**
		 * 해당 input[type=checkbox] 엘리먼트를 대체할 엘리먼트
		 */
		this.elSubstitute = cssquery.getSingle(sPrefix + 'mark', elWrapper) || cssquery.getSingle('span', elWrapper) || elWrapper; //class명 혹은 span 
		
		if (welWrapper.hasClass(sPrefix + 'applied')) return;
		welWrapper.addClass(sPrefix + 'applied');

		this._attachEvent();		
		this.paint();
		
	},
	
	_attachEvent : function() {
		
		var sPrefix = this.option('classPrefix');
		
		var elWrapper = this._elWrapper;
		var elInput = this.elInput;
		var bIE = $Agent().navigator().ie;
		
		$Fn(function(e) {
			
			if (elInput.disabled) return;
					 
			if (e.element !== elInput)
				elInput.checked = elInput.type == 'checkbox' ? !elInput.checked : true;
			
			if (bIE) return;
			
			elInput.type == 'checkbox' ? this.paint() : this.constructor.paint();
			
		}, this).attach(elWrapper, 'click');
		
		$Fn(function(e) {
			setTimeout(function() { try { elWrapper.focus(); } catch(e) {} }, 1);
		}, this).attach(elWrapper, 'mousedown');
		
		$Fn(function(e) {
			this._welWrapper.addClass(sPrefix + 'focused'); 
		}, this).attach(elInput, 'focus');
		
		$Fn(function(e) {
			this._welWrapper.removeClass(sPrefix + 'focused');
		}, this).attach(elInput, 'blur');
		
		if (bIE) $Fn(function(e) { this.paint(); }, this).attach(elInput, 'propertychange');
		
	},
	
	/**
	 * 컴포넌트를 새로 그려준다. (HTMLComponent 공통메소드)
	 */
	paint : function() {
		var sPrefix = this.option('classPrefix');
		
		$Element(this.elSubstitute).removeClass(sPrefix + 'checked');
		this._welWrapper.removeClass(sPrefix + 'disabled');
		
		if (this.elInput.checked){
			$Element(this.elSubstitute).addClass(sPrefix + 'checked');	
		}
		if (this.elInput.disabled){
			this._welWrapper.addClass(sPrefix + 'disabled');	
		}
	}
	
}).extend(nhn.HTMLComponent);