/**
 * @projectDescription Empas Prototye & UI
 * @copyright Empas Corp. <http://www.empas.com>
 * @author ifsnow ifsnow@empascorp.com
 * @version 1.0
 * 
 * Empas > UI > Form > CheckBox, Radio
 */

if(typeof Prototype == "undefined")
	throw("empas.ui.form.js requires including Prototype library");

if (!$D(Empas)) var Empas = {};
if (!$D(Empas.UI)) Empas.UI = {};

/*============================================================================*
 * CheckBox
 *============================================================================*/
Empas.UI.Checkbox = Class.create();

Object.extend(Empas.UI.Checkbox,{
	_groups: {},		// 그룹
	
	/**
	 * 그룹 데이터 생성
	 * @param {String} group 그룹명
	 */
	create: function(group) {
		if (!$D(this._groups[group])) 
			this._groups[group] = { els : [], checked : false};
	},

	/**
	 * 그룹별 체크박스 엘리먼트 추가
	 * 
	 * @param {Object} instance Empas.UI.Checkbox 클래스
	 * @param {Object} el 체크박스 엘리먼트
	 */	
	add: function(instance, el) {
		this._groups[instance.options.group].els.push(el);
	},
	
	/**
	 * 그룹명으로 데이터 구하기
	 * 
	 * @param {String} group 그룹명
	 * @return {Object} 그룹 데이터
	 */	
	_getGroup: function(group) {
		group = group || "default";		
		if (!$D(this._groups[group])) return null;
		
		return this._groups[group];
	},
	
	/**
	 * 등록된 체크박스중 선택된 값 구하기
	 * 
	 * @param {String} group 그룹명
	 * @return {Object} 선택된 값을 배열 형태로 반환
	 */	
	values: function(group) {
		var groups = this._getGroup(group);
		if (!groups) return [];

		var result = [];
		groups.els.each(function (el) { 
			if (el.checked)
			{
				result.push(el.value);
			}
		});

		return result;
	},

	/**
	 * 그룹별 토글 함수
	 * 
	 * @param {String} group 그룹명
	 * @param {Boolean} val 사용자 지정값.
	 */		
	toggle: function(group, val) {
		 var groups = this._getGroup(group);
		if (!groups) return;

		groups.checked = val || !groups.checked;

		groups.els.each(function (el) { el.checkAll(groups.checked) }); 
	},
	
	/**
	 * 값으로 체크
	 * 
	 * @param {String} val 값
	 * @param {String} group 그룹명
	 */		
	checkByValue: function(val, group) {
		group = group || "default";
		
		if (!$D(this._groups[group])) return;
		
		var groups = this._groups[group];		
				
		groups.els.each(function (el) {
			if (el.value==val) el.checkAll(true);
		}); 
	},
	
	/**
	 * 다시 그리기
	 * 
	 * @param {String} group 그룹명
	 */
	redraw: function(group) {
		group = group || "default";
		
		if (!$D(this._groups[group])) return;
		
		var groups = this._groups[group];		

		groups.els.each(function (el) {
			el.redraw();
		}); 
	}
});

Empas.UI.Checkbox.prototype = {
	/**
	 * 생성자
	 * 
	 * @param {Object} options 옵션
	 * @constructor
	 */
	initialize: function(options) {
		this.savedImg = {};	// 생성된 이미지 객체 저장 (키 : 체크박스 아이디)
	
		this.options = Object.extend({
			group: "default",								// 그룹명
			checkbox: null,									// 개별 체크박스 아이디로 적용시 (,로 복수 구분)			
			imgOn: 'http://img.nate.com/kwshop/renewal/eprototypeui/check_on.gif',				// 체크상태 이미지
			imgOff: 'http://img.nate.com/kwshop/renewal/eprototypeui/check_off.gif',				// 일반상태 이미지
			imgOnOver: 'http://img.nate.com/kwshop/renewal/eprototypeui/check_on_over.gif',		// 체크상태 마우스오버 이미지
			imgOffOver: 'http://img.nate.com/kwshop/renewal/eprototypeui/check_off_over.gif',	// 일반상태 마우스오버 이미지			
			overMode: true,									// 마우스오버 모드
			useHand: true,									// 마우스 오버시 손모양 커서 유무
			classApply: true								// 클래스(EUICheckbox) 일괄 적용 유무
		}, options || {});
		
		options = this.options;
		
		// 그룹 데이터 생성
		Empas.UI.Checkbox.create(options.group);
		
		// 클래스 일괄 적용
		if (options.checkbox==null && options.classApply) {
			document.getElementsByClassName("EUICheckbox").each(this._bindCheckbox.bind(this));
		} else {
			options.checkbox.split(",").each(function (elm) {
				this._bindCheckbox($(elm));
			}.bind(this));
		}

		// 라벨 바인딩 
		document.getElementsByClassName("EUICheckLabel").each(this._bindLabel.bind(this));

		// clear memory leak
		Event.observe(window, 'unload', this._cleanup.bind(this));
	},

	/**
	 * 체크박스 객체 바인딩
	 * 
	 * @param {Object} element 바인딩할 객체
	 */	
	_bindCheckbox: function(element) {
		// 중복 바인딩 체크
		if ($D(element._created)) return;
		element._created = true;
		
		// 이미지 생성
		var img = $C("img").setStyle( { "vertical-align":"top" });
		if (this.options.useHand) {
			img.setStyle({ "cursor": "pointer" });
		}

		// 체크함수 연결
		element.parent = this;
		Object.extend(element, {
			check: function(val) {
				this.checked = val;
				this.parent._clickImg(img, true);
			},
			checkAll: function(val) {
				this.checked = val;
				this.parent._clickImg(img, true, false);
			},
			setDisable: function(val) {
				this.parent._setDisable(img, val);
			},
			redraw: function() {
				this.parent._draw(img);
			}
		});
		
		// 이미지 onclick 이벤트 설정
		img.observe('click', this._clickImg.bind(this, img));

		// 이미지 mouseover, mouseout 이벤트 설정
		if (this.options.overMode) {
			img.observe('mouseover', this._mouseImg.bind(this, img, 'over'));
			img.observe('mouseout', this._mouseImg.bind(this, img, 'out'));
		}
		
		// 체크박스 객체 연결
		img.checkbox = element;
		
		// on,off 상태에 따라 그리기 
		this._draw(img);

		if ($ATTR(element, "disabled")) {
			this._setDisable(img, true);
		}
			
		// 라벨과 연결을 위해 저장 					
		if (element.id)
			this.savedImg[element.id] = img;

		// 이미지 삽입하고 기존 체크박스 숨기기
		element.parentNode.insertBefore(img, element);
		element.hide();
		
		// 그룹별 체크박스 엘리먼트 추가
		Empas.UI.Checkbox.add(this, element);
	},

	/**
	 * 비활설화 여부 설정
	 * 
	 * @param {Object} img 이미지 객체
	 * @param {Boolean} disable 설정값
	 */
	_setDisable: function(img, disable) {
		img.setOpacity(disable ? 0.5:1.0);
		img.checkbox.disabled = disable;
	},
	
	/**
	 * 라벨 바인딩
	 * 
	 * @param {Object} element 바인딩할 라벨 객체
	 */
	_bindLabel: function(element)
	{
		element = $(element);
		
		// 체크박스 바인딩이 된 라벨만 바인딩
		var img = this.savedImg[element.readAttribute("for")];
		if (!img) return;
		
		// 중복 바인딩 체크
		if ($D(element._created)) return;
		element._created = true;
		
		if (this.options.useHand) 
			element.setStyle({ "cursor": "pointer" });
		
		element.observe('click', this._clickLabel.bindAsEventListener(this));
		
		// 라벨 mouseover, mouseout 이벤트 설정
		if (this.options.overMode) {
			element.observe('mouseover', this._mouseImg.bind(this, img, 'over'));
			element.observe('mouseout', this._mouseImg.bind(this, img, 'out'));
		}
		
	},

	/**
	 * 이미지 click 이벤트 처리
	 * 
	 * @param {Object} img 이벤트 발생한 이미지 객체 
	 * @param {Object} notupdate 체크값 변경하지 않을지 유무. 기본값 false
	 */
	_clickImg: function(img, notupdate) {
		if (img.checkbox.disabled) return;
		
		notupdate = $T(notupdate)=='boolean' ? notupdate:false;
		
		if (!$ATTR(img.checkbox, "disabled")) {
			if (!notupdate) img.checkbox.checked = !img.checkbox.checked;
			this._draw(img);

			// toggle일 경우 onclick 이벤트 사용 안함
			if (!$D(arguments[2]) && img.checkbox.onclick) img.checkbox.onclick();
		}
	},
	
	/**
	 * 이미지 mouseover, mouseout 이벤트 처리
	 * 
	 * @param {Object} img 이벤트 발생한 이미지 객체 
	 * @param {String} kind 이벤트 종류. (over|out)
	 */
	_mouseImg: function(img, kind) {
		if (img.checkbox.disabled) return;
		
		if (kind=="over")
			img.src = img.checkbox.checked ? this.options.imgOnOver:this.options.imgOffOver;
		else
			this._draw(img);
	},
	
	/**
	 * 라벨 click 이벤트 처리
	 * 
	 * @param {Object} e 이벤트 발생 객체
	 */
	_clickLabel: function(e) {
		Event.stop(e);
		this._clickImg(this.savedImg[Event.element(e).readAttribute("for")]);
	},	
	
	_draw: function(img) {
		img.src = img.checkbox.checked ? this.options.imgOn:this.options.imgOff;
	},

	/**
	 * 메모리릭 제거를 위한 처리 
	 */
	_cleanup: function() {
		for (var elm_id in this.savedImg) {
			this.savedImg[elm_id].checkbox = null;
			this.savedImg[elm_id].options = null;
			this.savedImg[elm_id] = null;
		}
		this.savedImg = null;		
	}
};

/*============================================================================*
 * Radio
 *============================================================================*/
Empas.UI.Radio = Class.create();

Empas.UI.Radio.prototype = {
	/**
	 * 생성자
	 * 
	 * @param {String} group 적용할 radio 객체의 name값
	 * @param {Object} options 설정값
	 * @constructor
	 */
	initialize: function(group, options) {
		// 내부변수 초기화
		this._init();
		
		// 옵션
		this._options = Object.extend({
			imgOn: 'http://img.nate.com/kwshop/renewal/eprototypeui/radio_on.gif',
			imgOff: 'http://img.nate.com/kwshop/renewal/eprototypeui/radio_off.gif',
			imgOnOver: 'http://img.nate.com/kwshop/renewal/eprototypeui/radio_on_over.gif',
			imgOffOver: 'http://img.nate.com/kwshop/renewal/eprototypeui/radio_off_over.gif',
			overMode: true,
			useHand: true
		}, options || {});
		
		// 지정된 그룹 이름으로 바인딩
		$A(document.getElementsByName(group)).each(this._bindRadio.bind(this));
		
		// 라벨 바인딩
		document.getElementsByClassName("EUIRadioLabel").each(this._bindLabel.bind(this));

		// for memory leak
		Event.observe(window, 'unload', this._cleanup.bind(this), false);
	},

	/**
	 * 비활설화 여부 설정
	 * 
	 * @param {Object} img 이미지 객체
	 * @param {Boolean} disable 설정값
	 */
	_setDisable: function(img, disable) {
		img.setOpacity(disable ? 0.5:1.0);
		img.radio.disabled = disable;
	},
	
	/**
	 * 내부 변수 초기화
	 */
	_init: function() {
		this.savedImg =  {};
		this.savedElement = [];
		this.selectedImg = null;
		this._disabled = false;
	},
	
	/**
	 * 라디오 객체 바인딩
	 * 
	 * @param {Object} element 바인딩할 객체
	 */
	_bindRadio: function(element) {
		// 중복 체크
		if ($D(element._created)) {
			return;
		} else {
			element._created = true;
		}
		
		// 라디오 객체 저장
		this.savedElement.push(element);

		// 이미지 생성	
		var img = $C("img").setStyle({ "vertical-align":"top" });
		if (this._options.useHand) {
			img.setStyle({ "cursor": "pointer" });
		}
		
		// 체크 함수 연결		
		element.parent = this;
		Object.extend(element, {
			check: function() {
				this.parent._clickImg(img);
			},			
			setDisable: function(val) {
				this.parent._setDisable(img, val);
			}
		});
		
		// 선택된 이미지 객체
		if (element.checked) {
			this.selectedImg = img;
		}
		
		img.radio = element;
		
		if ($ATTR(element, "disabled")) {
			this._setDisable(img, true);
		}
		
		// 이미지 onclick 이벤트 
		Event.observe(element, 'click', this._clickImg.bind(this, img));
		
		// 이미지 onclick 이벤트 
		img.observe('click', this._clickImg.bind(this, img));

		// 이미지 mouseover, mouseout 이벤트 설정
		if (this._options.overMode) {
			img.observe('mouseover', this._mouseImg.bind(this, img, 'over'));
			img.observe('mouseout', this._mouseImg.bind(this, img, 'out'));
		}

		// 이미지에 라디오 객체 연결
	
		this._draw(img);

		// 라벨과 연결을 위해 이미지 저장 					
		if (element.id) {
			this.savedImg[element.id] = img;			
		}

		// 이미지 삽입
		element.parentNode.insertBefore(img, element);
		element.hide();
	},

	/**
	 * 라벨 바인딩
	 * 
	 * @param {Object} element 바인딩할 객체
	 */
	_bindLabel: function(element)
	{
		// 중복 체크
		if ($D(element._created)) {
			return;
		} 
				
		var img = this.savedImg[element.readAttribute("for")];		
		if ($D(img)) {
			if (this._options.useHand) 
				$(element).setStyle({ "cursor": "pointer"});	
			
			// 라디오에 이미지 저장하고 click 이벤트 연결
			element._created = true;
			element.img = img;
			
			Event.observe(element, 'click', this._clickLabel.bindAsEventListener(this));
			
			if (this._options.overMode) {
				Event.observe(element, 'mouseover', this._mouseImg.bind(this, img, 'over'));
				Event.observe(element, 'mouseout', this._mouseImg.bind(this, img, 'out'));
			}
		}
	},
	
	/**
	 * 이미지 click 이벤트 처리
	 * 
	 * @param {Object} img 발생한 이미지
	 */
	_clickImg: function(img) {
		if (img.radio.disabled) return;
		
		img.radio.checked = true;
		this._draw(img);

		// 이전 선택된 라디오 해제
		if (this.selectedImg!=null && this.selectedImg!=img) {
			this._draw(this.selectedImg);
		}
		
		this.selectedImg = img;
		if (img.radio.onclick) img.radio.onclick();
	},
	
	/**
	 * 이미지 mouseover, mouseout 이벤트 처리
	 * 
	 * @param {Object} img 이벤트 발생한 이미지 객체 
	 * @param {String} kind 이벤트 종류. (over|out)
	 */
	_mouseImg: function(img, kind) {
		if (this._disabled) return;
		
		if (kind=="over")
			img.src = img.radio.checked ? this._options.imgOnOver:this._options.imgOffOver;
		else
			this._draw(img);
	},	
	
	/**
	 * 라벨 click 이벤트 처리
	 * 
	 * @param {Object} e 이벤트 발생 객체
	 */
	_clickLabel: function(e) {
		Event.stop(e);
		this._clickImg(Event.element(e).img);
	},	
	
	_draw: function(img) {		
		img.src = img.radio.checked ? this._options.imgOn:this._options.imgOff;		
	},
	
	/**
	 * 값으로 체크
	 * 
	 * @param {String} val 값
	 * @param {String} group 그룹명
	 */		
	checkByValue: function(val) {
		this.savedElement.each(function(el) {
			if (el.value==val) el.check();
		}); 
	},
	
	/**
	 * 메모리릭 제거를 위한 처리
	 */
	_cleanup: function() {
		this.selectedImg = null;
		
		for (var elm_id in this.savedImg) {
			this.savedImg[elm_id].radio = null;
			this.savedImg[elm_id].options = null;
			this.savedImg[elm_id] = null;
		}
		this.savedImg = null;
				
		this.savedElement.each(function(obj) {
			obj.parent = null;			
			obj.img = null;			
			obj.check = null;
		});
		
		this.savedElement = null;
	}
};