/*
 * HTML Element Converter 2008.02.01
 * by MGAME jeon jin young
 */


var Selectbox1 = Class({
	__const : function(id) {
		var s = this._source  = $(id);
		this.options = Class.extend({
			height      : s.offsetHeight,
			width       : s.offsetWidth,
			fontSize    : 11,
			listSize    : 8,
			skinActive  : false,
			skinFormat  : '../../images/icon/sbox_%s.gif', // left, right, up, down, bt
			borderActive: true,
			borderColor : '#e38c67',
			optTxtColor : '#e1cec6',
			optBgColor  : '#995b40',
			optTxtHover : 'white',
			optBgHover  : 'gray'
		}, arguments[1]);

		var o = this.options;
		var e = this._element = $c('div');
		var c = e.appendChild($c('div')); // container
		var p = Element.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;
		}

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

		Element.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'));
		Element.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.fontSize+'px';
			style.overflow = 'hidden';
			style.marginTop = Math.max(Math.floor((o.height-offsetHeight)/2),0)+'px';
			style.marginLeft = style.marginTop;
		}
		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'));
		Element.setCSS(this._list_element, {
			position : 'absolute',
			border   : '1px solid '+o.borderColor,
			display  : 'none',
			overflow : 'auto',
			fontSize : o.fontSize+'px'
		});
		this._list_element.onmousedown = this.onscrollbar.bindForEvent(this);
		this.paint();

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

			this.paint();
			Element.show(this._list_element);
			if (this._list_element.offsetWidth < this._element.offsetWidth) {
				this._list_element.style.width = this._element.offsetWidth+'px';
			};
			Element.setCSS(this._list_element, {
				top : p.top+this._element.offsetHeight+'px',
				left : p.left+'px',
				zIndex : 1000
			});
		} else {
			Element.hide(this._list_element);
			Event.unregister(document.body, 'mousedown', this._event_onmousedown);
		}
	},
	onmouseup : function() {
		if (Element.visible(this._list_element)) {
			Event.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;
			Element.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;
		Element.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));

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

		return o;
	}
});




var Selectbox2 = Class({
	__const : function(id) {
		var s = this._source  = $(id);
		this.options = Class.extend({
			height      : s.offsetHeight,
			width       : s.offsetWidth,
			fontSize    : 11,
			listSize    : 8,
			skinActive  : false,
			skinFormat  : 'images/icon/fbox_%s.gif', // left, right, up, down, bt
			borderActive: true,
			borderColor : '#60181f',
			optTxtColor : '#d8cece',
			optBgColor  : '#7d5b5b',
			optTxtHover : 'white',
			optBgHover  : 'gray'
		}, arguments[1]);

		var o = this.options;
		var e = this._element = $c('div');
		var c = e.appendChild($c('div')); // container
		var p = Element.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;
		}

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

		Element.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'));
		Element.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.fontSize+'px';
			style.overflow = 'hidden';
			style.marginTop = Math.max(Math.floor((o.height-offsetHeight)/2),0)+'px';
			style.marginLeft = style.marginTop;
		}
		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'));
		Element.setCSS(this._list_element, {
			position : 'absolute',
			border   : '1px solid '+o.borderColor,
			display  : 'none',
			overflow : 'auto',
			fontSize : o.fontSize+'px'
		});
		this._list_element.onmousedown = this.onscrollbar.bindForEvent(this);
		this.paint();

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

			this.paint();
			Element.show(this._list_element);
			if (this._list_element.offsetWidth < this._element.offsetWidth) {
				this._list_element.style.width = this._element.offsetWidth+'px';
			};
			Element.setCSS(this._list_element, {
				top : p.top+this._element.offsetHeight+'px',
				left : p.left+'px',
				zIndex : 1000
			});
		} else {
			Element.hide(this._list_element);
			Event.unregister(document.body, 'mousedown', this._event_onmousedown);
		}
	},
	onmouseup : function() {
		if (Element.visible(this._list_element)) {
			Event.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;
			Element.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;
		Element.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));

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

		return o;
	}
});