var dSelects = []; //Àüü dSelect°´Ã¼ÀÇ UID¸¦ key·Î, Çش簴ü¸¦ value·Î ´ã°í ÀÖ´Â º¯¼ö
var curSelectID = null; //ÇöÀç option box°¡ ¿­·ÁÀÖ´Â select id

/*******************************************************
# dSelect : ·¹À̾î·Î µÇ¾îÁø select box
# parameter : 
	1. id - ¹Ì¸® »ý¼ºµÈ div id
	2. styles - ¹Ì¸® »ý¼ºµÈ div style ¹®ÀÚ¿­ (¾øÀ¸¸é default·Î "width:100px;height:18px;font:normal 13px ±¼¸²,gulim;border:1px solid #DEDEDE;cursor:default" )
	3. options - JSON¹æ½ÄÀÇ option¹è¿­ (value, text·Î ÀÌ·ç¾îÁü. ¾øÀ¸¸é option list´Â »ý¼º¾ÈµÊ)
	4. selectedIndex - select ¼Ó¼ºÀ» ÁÙ option index (¾øÀ¸¸é 0)
	5. arrstyles - È­»ìÇ¥ style¹®ÀÚ¿­. °øÅëÀûÀ¸·Î float:right; display:inlineÀÓ. ¹é±×¶ó¿îµå À̹ÌÁö¸¦ ÁÙ¼ö ÀÖÀ½ (¾øÀ¸¸é text '¡å'¿Í ±âº» ½ºÅ¸ÀÏ·Î Á¤ÀÇµÊ "font:normal 9px ±¼¸²,gulim;border:1px solid #DEDEDE;margin:1px;text-align:center;float:right")
	6. optstyles - ¿É¼Ç ¼±Åà boxÀÇ style¹®ÀÚ¿­.

********************************************************/
function dSelect(id,styles,optionArr,selectedIndex,arrstyles,optstyles)
{
	dSelects[id] = this;
	this.uid = id;
	this.selectBox = document.getElementById(id);
	setStyle(this.selectBox,"width:100px;height:18px;font:normal 13px ±¼¸²,gulim;border:1px solid #DEDEDE;cursor:default"); //default styles
	if(styles) setStyle(this.selectBox,styles);
	//line-height°¡ ¾øÀ¸¸é height¿¡ ¸ÂÃá´Ù.
	if(getStyle(this.selectBox,"line-height") == "normal") setStyle(this.selectBox,"line-height:"+getStyle(this.selectBox,"height"));
	setStyle(this.selectBox,"cursor:pointer;text-indent:3px;overflow:hidden"); //ÅëÀÏµÈ style	
	
	//µå·¡±×ÇÒ ÇÊ¿ä¾øÀ½
	this.selectBox.ondragstart = function() {return false;};
	this.selectBox.onselectstart = function() {return false;};
	
	//¼±ÅÃµÈ option text
	this.defText = document.createElement('span');
	setStyle(this.defText,"float:left");
	this.selectBox.appendChild(this.defText);
	
	//È­»ìÇ¥ ¸¸µé±â
	var arr = document.createElement('div')
	arr.id = this.uid + "_arr";
	if(arrstyles) {
		setStyle(arr,"float:right;display:inline");
		setStyle(arr,arrstyles);
	}
	else {
		arr.innerHTML = "¡å";	
		setStyle(arr,"font:normal 9px ±¼¸²,gulim;border:1px solid #DEDEDE;margin:1px;text-align:center;float:right;display:inline");		
		setStyle(arr,"height:".concat(parseInt(getStyle(this.selectBox,"height"))-6+"px"));
		setStyle(arr,"width:".concat(parseInt(getStyle(arr,"height"))+4+"px"));
		setStyle(arr,"line-height:"+getStyle(arr,"height"));					
	}
	this.selectBox.appendChild(arr);
	
	//¿É¼ÇListBox ¸¸µé±â
	var optBox = document.createElement('ul');
	optBox.id = this.uid + "_optBox";
	this.optBox = optBox;	
	this.selectedIndex = (selectedIndex) ? selectedIndex : 0;
	
	//styleÁ¶Á¤ ¸ÕÀúÇÒ°Í (optionsÀÌ ¾øÀ» °æ¿ìµµ ÀÖÀ¸´Ï±î)	
	setStyle(this.optBox,"height:200px;overflow-x:hidden;overflow-y:auto;background-color:#fff;text-indent:3px;text-align:left;border:1px solid #000;list-style-type:none;display:none;position:absolute;zindex:1000;margin:0;padding:0");
	setStyle(this.optBox,"width:"+getStyle(this.selectBox,"width"));
	if(optstyles) setStyle(this.optBox,optstyles);
	
	for(var i=0;i<optionArr.length;++i) {
		var li = this.add(optionArr[i].value, optionArr[i].text);
		setStyle(li,"cursor:pointer");
		setStyle(li,"height:".concat(parseInt(getStyle(this.selectBox,"height")) + "px"));
		setStyle(li,"line-height:".concat(parseInt(getStyle(this.selectBox,"line-height")) + "px"));
		if(i==this.selectedIndex) {
			this.value = optionArr[i].value;
			this.defText.innerHTML = optionArr[i].text;
			OptionSetBG(li);
		}
	}
	this.selectBox.parentNode.appendChild(this.optBox);
		

	this.selectBox.onclick = function() {
		var CurSelect = GetCurSelect(this.id);
		if(getStyle(CurSelect.optBox,'display') == 'none') {
			var offsetValue = CurSelect.getOffset();
			OptionSetBG(CurSelect.optBox.childNodes[CurSelect.selectedIndex]);
			setStyle(CurSelect.optBox,"top:".concat(offsetValue[0]+parseInt(getStyle(CurSelect.selectBox,'height')) + 1 +"px"));	
			setStyle(CurSelect.optBox,"left:".concat(offsetValue[1])+"px");	
			Show(CurSelect.optBox);
			curSelectID = this.id; //ÇöÀç »ç¿ëÁßÀÎ select id¸¦ Àü¿ªº¯¼ö¿¡ ´ã´Â´Ù.
		}
		else {
			Hide(CurSelect.optBox);
			curSelectID = null;
		}
	};
	
}

dSelect.prototype.getOffset = function()
{
	var offsetValue = [this.selectBox.offsetTop,this.selectBox.offsetLeft];
	var parent = this.selectBox.offsetParent;
	while(parent != document.body) {
		if(getStyle(parent,"position") != "relative" && getStyle(parent,"position") != "absolute") {
			offsetValue[0] += parent.offsetTop;
			offsetValue[1] += parent.offsetLeft;
		}
		parent = parent.offsetParent;
	}
	return offsetValue;
}
		
dSelect.prototype.add = function(val, text)
{
	var idx = this.optBox.childNodes.length;
	var li = document.createElement('li');
	li.id = this.uid + "_li" + idx;
	li.idx = idx;
	li.innerHTML = li.text = text;
	li.lvalue = val;
	li.onmouseover = OptionMouseOver;	
	li.onclick = OptionClick;
	setStyle(li,"width:100%;list-style-type:none;margin:0;padding:0");
	this.optBox.appendChild(li);
	return li;
}

dSelect.prototype.remove = function(idx)
{
	var optBox = this.optBox;
	//idx¿¡ ÇØ´çÇÏ´Â li¸¦ »èÁ¦
	optBox.removeChild(optBox.childNodes[idx]);
	if(idx == this.selectedIndex) {
		optBox.childNodes[0].onclick();
	}
	//Àüü liÀÇ idx¸¦ ´Ù½Ã ¸Å±ä´Ù.
	var cnt = optBox.childNodes.length;
	for(var i=0; i<cnt; ++i) {
		optBox.childNodes[i].idx = i;
	}	
}

dSelect.prototype.onselect = function(func)
{
	var lists = this.optBox.childNodes;
	var cnt = lists.length;
	for(var i=0; i<cnt; ++i) {
		AddEvent(lists[i],"click",func);
	}	
}

function CloseOptBoxChk(event)
{
	if(curSelectID != null) {
		var target = (window.event) ? window.event.srcElement : event.target ;
		if(target.id && GetCurSelect(target.id) && curSelectID == GetCurSelect(target.id).uid) return false;
		CloseOptBox();
	}
}

function CloseOptBox(event)
{
	if(curSelectID != null) {
		Hide(GetCurSelect(curSelectID).optBox);
	}
}


function GetCurSelect(id)
{
	var uid = id.split("_")[0];
	return dSelects[uid];
}
	
function OptionSetBG(obj)
{
	var ul = obj.parentNode;
	var cnt = ul.childNodes.length;
	for(var i=0;i<cnt;++i) {
		BGColor(ul.childNodes[i],'transparent');
	}
	BGColor(obj,'#D8D8D8');
}

function OptionMouseOver()
{
	OptionSetBG(this);
}

function OptionClick()
{
	var CurSelect = GetCurSelect(this.id);
	CurSelect.defText.innerHTML = this.innerHTML;
	CurSelect.selectedIndex = this.idx;
	CurSelect.value = this.lvalue;
	Hide(CurSelect.optBox);
}

function getStyle(obj,styleText)
{
	var temp = styleText.split("-");
	var templen = temp.length;
	if(templen > 1) {
		styleText = 	temp[0];
		for(var n=1; n<templen; ++n) {
			styleText += temp[n].substr(0,1).toUpperCase() + temp[n].substr(1);
		}
	}

	if(obj.currentStyle)
		var css = obj.currentStyle;
	else
		var css = document.defaultView.getComputedStyle(obj, null);
	value = css ? css[styleText] : null;
	return (value == null || value == undefined) ? "" : value;
}

function setStyle(obj,styles)
{
	var styleArr = styles.split(";");
	var styleCnt = styleArr.length;
	for(var i=0; i<styleCnt; ++i) {
		var styleItem = styleArr[i].split(":");
		styleItem[1] = styleArr[i].substr(styleItem[0].length+1);
		styleItem[0] = styleItem[0].trim();
		switch(styleItem[0]) {
			case 'float' :
				if(obj.style.styleFloat != undefined) 
					obj.style.styleFloat = styleItem[1];
				else 
					obj.style.cssFloat = styleItem[1];
				break;
			default :
				if(styleItem[0].length>0 && styleItem[1].length>0) {
					var temp = styleItem[0].split("-");
					var templen = temp.length;
					if(templen > 1) {
						styleItem[0] = 	temp[0];
						for(var n=1; n<templen; ++n) {
							styleItem[0] += temp[n].substr(0,1).toUpperCase() + temp[n].substr(1);
						}
					}
					obj.style[styleItem[0]] = styleItem[1];	
				}
				break;
		}
	}
}

function Show(obj)
{
	obj.style.display = 'block';
}

function Hide(obj)
{
	obj.style.display = 'none';
}
		
function BGColor(obj, color)
{
	obj.style.backgroundColor = color;
}

String.prototype.trim = function() 
{ 
	return this.replace(/(^\s*)|(\s*$)/gi, ""); 
} 

function AddEvent(element, name, func)
{
	if (element.addEventListener) {
		element.addEventListener(name, func, false);
	}
	else if (element.attachEvent) {
		element.attachEvent('on' + name, func);
	}
}

AddEvent(document,"mousedown",CloseOptBoxChk); //À©µµ¿ì ´Ù¸¥ ¿µ¿ª¿¡¼­ mousedownÇÒ¶§ option box ´ÝÈû
AddEvent(window,"resize",CloseOptBox); //È­¸é Å©±â°¡ ´Þ¶óÁ®¼­ À§Ä¡°¡ ¾î±ß³¯¶§ option box ´ÝÈû