/*
 * HTML Element Converter 2006.09.06
 * by NHN UII.Gony
 */
var Checkbox = UIIClass({
	__const : function(id) {
		this._source = $(id);
		this.options = UIIClass.extend({
			skinFormat  : 'http://img.seebox.sg/sgp/_www/checkbox_%s.gif' // on, off
		}, arguments[1]);

		// for image cache
		var o = this.options;
		$c('img').src = o.onImg = o.skinFormat.replace('%s', 'on');
		$c('img').src = o.offImg = o.skinFormat.replace('%s', 'off');

		// image element
		var e = this._element = $c('img');
		e.onclick = this.onclick.bind(this);
		this.paint();

		// replace html element
		this._source.parentNode.insertBefore(e, this._source);
		UIIElement.hide(id);
	},
	onclick : function() {
		this._source.checked = !this._source.checked;
		this.paint();
		if (this._source.onclick) this._source.onclick();
	},
	paint : function() {
		this._element.src = this._source.checked?this.options.onImg:this.options.offImg;
	}
});

var Radiobox = UIIClass({
	__const : function(name) {
		var s = this._sources = [].load(document.getElementsByName(name));
		this.options = UIIClass.extend({
			onChange   : function(v,i){},
			skinFormat : 'http://img.seebox.sg/sgp/_www/radio_%s.gif' // on, off
		}, arguments[1]);

		// for image cache
		var o = this.options;
		$c('img').src = o.onImg = o.skinFormat.replace('%s', 'on');
		$c('img').src = o.offImg = o.skinFormat.replace('%s', 'off');

		// image elemnts
		var e = this._elements = [];
		for(var i=0; i < s.length; i++) {
			e.push($c('img'));
			e[i].onclick = this.onclick.bind(this,i);
		}
		this.paint();

		// replace html elements
		s.each(function(v,i) {
			v.parentNode.insertBefore(e[i],v);
			UIIElement.hide(v);
		});
	},
	onclick : function(idx) {
		var s = this._sources[idx];
		var c = s.checked;
		s.checked = true;

		this.paint();
		if (s.onclick) s.onclick();
		if (c != s.checked) this.options.onChange(s.value,idx);
	},
	setIndex : function(i) {
		this._sources[i].checked = true;
		this.paint();
	},
	setValue : function(val) {
		this._sources.each(function(v){ if(v.value == val)v.checked=true });
		this.paint();
	},
	getValue : function() {
		var val;
		this._sources.each(function(v){ if(v.checked)val=v.value });
		return val;
	},
	getIndex : function() {
		var idx;
		this._sources.each(function(v,i){ if(v.checked)idx=i });
		return idx;
	},
	paint : function() {
		var t = this;
		this._elements.each(function(v,i) {
			v.src = t._sources[i].checked?t.options.onImg:t.options.offImg;
		});
	}
});

var Selectbox = UIIClass({
	__const : function(id) {
		var s = this._source  = $(id);
		this.options = UIIClass.extend({
			height      : 19,
			width       : s.offsetWidth,
			fontSize    : 12,
			listSize    : 8,
			skinActive  : false,
			skinFormat  : 'http://img.seebox.sg/sgp/_www/select_arrow.gif', // left, right, up, down, bt
			borderActive: true,
			borderColor : '#525252',
			optTxtColor : '#666',
			optBgColor  : '#000',
			optTxtHover : '#000',
			optBgHover  : '#666'
		}, arguments[1]);

		var o = this.options;
		var e = this._element = $c('div');
		var c = e.appendChild($c('div')); // container
		var p = UIIElement.realPos(this._source);

		// replace html element
		this._source.parentNode.insertBefore(e, s);
		this._source.style.display = 'none';

		// border
		if (o.borderActive) {
			e.style.border = '1px solid '+o.borderColor;
		}

		UIIElement.setCSS(e, {
			top : p.top+'px',
			left : p.left+'px',
			width : o.width+'px',
			height : (o.height-2)+'px',
			background : o.optBgColor
		});

		UIIElement.setCSS(c, {
			width  : o.width+'px',
			height : (o.height-2)+'px',
			fontSize : o.fontSize+'px',
			overflow : 'hidden',
			cursor   : 'default'
		});
		c.onmousedown = this.onmousedown.bindForEvent(this);
		c.onmouseup   = this.onmouseup.bind(this);

		// button layer
		var b = c.appendChild($c('div'));
		UIIElement.setCSS(b, {
			height     : '100%',
			background : 'no-repeat url('+o.skinFormat.replace('%s', 'bt')+') 50% 50%',
			cssFloat   : 'right',
			styleFloat : 'right'
		});

		// text box
		this._txt_element = c.appendChild($c('div'));
		with(this._txt_element) {
			appendChild(document.createTextNode(s.options[s.selectedIndex].text));
			style.height = o.height+'px';
			style.overflow = 'hidden';
			style.marginTop = '2px';
			style.marginLeft = '2px';
		}
		c.appendChild($c('div')).style.clear = 'both';

		// re-margin
		var im = $c('img');
		im.onload = function(){b.style.width=im.width+'px'}
		im.src = o.skinFormat.replace('%s', 'bt');

		// options
		this._list_element = document.body.appendChild($c('div'));
		UIIElement.setCSS(this._list_element, {
			position : 'absolute',
			border   : '1px solid '+o.borderColor,
			display  : 'none',
			overflowX : 'hidden',
			overflowY : 'auto',
			fontSize : o.fontSize+'px',
			
			scrollbarFaceColor : '#646464',
			scrollbarShadowColor : '#4A4A4A',
			scrollbarHighlightColor : '#4A4A4A',
			scrollbar3dLightColor : '#323232',
			scrollbarDarkShadowColor : '#323232',
			scrollbarTrackColor : '#323232',
			scrollbarArrowColor : '#323232'
		});
		this._list_element.onmousedown = this.onscrollbar.bindForEvent(this);
		this.paint();

		// event binding
		this._event_onmousedown = this.onmousedown.bindForEvent(this);
	},
	onmousedown : function(e) {
		if (!UIIElement.visible(this._list_element)) {
			var p = UIIElement.realPos(this._element);

			this.paint();
			UIIElement.show(this._list_element);
			if (this._list_element.offsetWidth < this._element.offsetWidth) {
				this._list_element.style.width = (this._element.offsetWidth-2)+'px';
			};
			UIIElement.setCSS(this._list_element, {
				top : p.top+this._element.offsetHeight+'px',
				left : p.left+'px',
				zIndex : 1000
			});
		} else {
			UIIElement.hide(this._list_element);
			UIIEvent.unregister(document.body, 'mousedown', this._event_onmousedown);
		}
	},
	onmouseup : function() {
		if (UIIElement.visible(this._list_element)) {
			UIIEvent.register(document.body, 'mousedown', this._event_onmousedown);
		} 
	},
	onselect : function(e) {
		var el=e.element, o=this.options, s=this._source;
		
		s.selectedIndex = el._index;
		this._txt_element.firstChild.nodeValue = s.options[s.selectedIndex].text;

		this.onmousedown();
		if (this._source.onchange) this._source.onchange();
	},
	onover : function(e) {
		var el=e.element, c=[].load(el.parentNode.childNodes), i=el._index, o=this.options;

		c.map(function(v) {
			v.style.color = o.optTxtColor;
			v.style.background = o.optBgColor;
			return v;
		});
		el.style.color = o.optTxtHover;
		el.style.background = o.optBgHover;
	},
	onscrollbar : function(e) {
		e.stop();
	},
	paint : function() {
		var o=this.options,s=this._source,op;
		this._list_element.innerHTML = '';
		this._list_element.style.width = '';
		this._list_element.style.height = '';
		for(var i=0; i < s.options.length; i++) {
			op = this._makeOption(s.options[i].value, s.options[i].text);
			op._index  = i;
			UIIElement.setCSS(op, {
				padding : '2px 5px',
				cursor  : 'default',
				color : (i==this._source.selectedIndex)?o.optTxtHover:o.optTxtColor,
				background : (i==this._source.selectedIndex)?o.optBgHover:o.optBgColor
			});
			this._list_element.appendChild(op);
		}

		var old_display = this._list_element.style.display;
		UIIElement.show(this._list_element);
		if ((this._list_element.offsetHeight-2) > op.offsetHeight * o.listSize) {
			this._list_element.style.height = op.offsetHeight*o.listSize;
		}
		this._list_element.style.display = old_display;
	},
	_makeOption : function(value, text) {
		var o = $c('div'), t = this;
		o._value = value;
		o.appendChild(document.createTextNode(text));

		UIIEvent.register(o, 'mouseover', this.onover.bindForEvent(this));
		UIIEvent.register(o, 'mousedown', this.onselect.bindForEvent(this));

		return o;
	}
});