/***********************************************************************************
**** Select Box Design Script ******************************************************
**** gyoony@emotion.co.kr     ******************************************************
************************************************************************************
**** Start *************************************************************************
************************************************************************************/
var nowOpenedSelectBox = "";
var mousePosition = "";

function selectThisValue(thisId,thisIndex,thisValue,thisString,classNameHeader) {
	var objId = thisId;
	var nowIndex = thisIndex;
	var valueString = thisString;
	var sourceObj = document.getElementById(objId);
	var nowSelectedValue = document.getElementById(objId+"SelectBoxOptionValue"+nowIndex).value;
	hideOptionLayer(objId);
	if (sourceObj) sourceObj.value = nowSelectedValue;
	settingValue(objId,valueString);
	selectBoxFocus(objId, classNameHeader);
	if (sourceObj.onchange) sourceObj.onchange();
}

function settingValue(thisId,thisString) {
	var objId = thisId;
	var valueString = thisString;
	var selectedArea = document.getElementById(objId+"selectBoxSelectedValue");
	if (selectedArea) selectedArea.innerHTML = valueString.replace("&","&");
}

function viewOptionLayer(thisId) {
	var objId = thisId;
	var optionLayer = document.getElementById(objId+"selectBoxOptionLayer");
	if (optionLayer) optionLayer.style.display = "";
	nowOpenedSelectBox = objId;
	setMousePosition("inBox");
}

function hideOptionLayer(thisId) {
	var objId = thisId;
	var optionLayer = document.getElementById(objId+"selectBoxOptionLayer");
	if (optionLayer) optionLayer.style.display = "none";
}

function setMousePosition(thisValue) {
	var positionValue = thisValue;
	mousePosition = positionValue;
}

function clickMouse() {
	if (mousePosition == "out") hideOptionLayer(nowOpenedSelectBox);
}

function selectBoxFocus(thisId, classNameHeader) {
	var objId = thisId;
	var obj = document.getElementById(objId + "selectBoxSelectedValue");
	obj.className = classNameHeader + "SelectedAreaFocus";
	obj.focus();
}

function selectBoxBlur(thisId, classNameHeader) {
	var objId = thisId;
	var obj = document.getElementById(objId + "selectBoxSelectedValue");
	obj.className = classNameHeader + "SelectedArea";
}

function getOptionParameter(tString,allString) {
	var resultStirng = "";
	var sArray = allString.toLowerCase().replace(/\s/g,"").split(",");
	for (var i_=0; i_<sArray.length; i_++) {
		var pArray = sArray[i_].split("=");
		try { if (pArray[0] == tString.toLowerCase()) resultStirng = pArray[1]; } catch(e) { }
	}
	return resultStirng;
}

function resetSelectBox01(thisId,optionParam) {
	if (optionParam==null) makeSelectBox01(thisId);
	else makeSelectBox01(thisId,optionParam);
}

function resetSelectBox02(thisId,optionParam) {
	if (optionParam==null) makeSelectBox02(thisId);
	else makeSelectBox02(thisId,optionParam);
}

function resetSelectBox03(thisId,optionParam) {
	if (optionParam==null) makeSelectBox03(thisId);
	else makeSelectBox03(thisId,optionParam);
}


function setDisabledMode(thisId,isTrue) {
	if (isTrue==undefined) isTrue = true;
	var obj = document.getElementById(thisId);
	var disabledLayer = document.getElementById(thisId+"selectBoxDisabledLayer");
	var focusArea = document.getElementById(thisId+"selectBoxFocusArea");
	if (obj) {
		obj.disabled = isTrue;
		disabledLayer.style.width = focusArea.offsetWidth + "px";
		disabledLayer.style.height = focusArea.offsetHeight + "px";
		disabledLayer.style.display = (isTrue) ? "" : "none";
	}
}

function makeSelectBox01(thisId,optionParam,skc_bgWidth,skc_bgHeight,skc_bgImg) {
	/***********************************************************************************************
	*** 사용예 ) makeSelectBox01("셀렉트박스Name","putup=yes,option=3,classHeader=클래스헤더")  ****
	***          optionParam 부분은 특수상황일 경우만 사용합니다.                               ****
	***          - putup=yes : 옵션레이어가 위로 보여지게 됩니다.                               ****
	***          - option=3 : 옵션레이어가 정해진 수치만큼만 보여집니다.                        ****
	***          - classHeader=클래스헤더 : 특수한경우 해당 셀렉트박스만 임의로 다른 스킨을     ****
	***                                     적용 할 수 있음. 단, CSS만 변경된 스킨일 경우       ****
	***********************************************************************************************/
	var downArrowSrc = "../images/common/select_x.gif";	//오른쪽 화살표이미지
	var classNameHeader = "selectBoxTypeA_"; // CSS 파일에서 Class명 Header 값 (한 사이트에서 셀렉트박스 디자인이 여러개일 경우 Class를 따로 지정하기위해 변수로 분리해놉니다.
	var downArrowSrcWidth = 0;	//오른쪽 화살표이미지 width
	var optionHeight = 19; // option 하나의 높이
	var optionMaxNum = 10; // 한번에 보여지는 option의 갯수
	var hideNullValue = false; // value가 없거나 빈값이면 인덱스로 취급하고 뿌려주지 않게하려면 true, 상관없이 모두 보여주려면 false.
	var isPutup = false;
	
	if (optionParam != null && optionParam != "") { // optionParam 를 설정했으면 그에 맞게 셋팅해준다.
		if (getOptionParameter("putup",optionParam) == "yes") isPutup = true; // 옵션항목 레이어를 위로 보여기로 선택한경우
		var userMaxNum = parseInt(getOptionParameter("option",optionParam));
		if (userMaxNum > 0) optionMaxNum = userMaxNum;	// 옵션항목 갯수를 임의로 지정한 경우
		var userClassHeader = getOptionParameter("classHeader",optionParam);
		if (userClassHeader != "") classNameHeader = userClassHeader; // 별도의 스킨을 지정한 경우
	}
	
	var optionInnerLayerHeight = 0;
	var objId = thisId;
	var obj = document.getElementById(objId);
	var selectBoxWidth = parseInt(obj.style.width);
	var selectBoxHeight = parseInt(obj.style.height);
	if (obj.options.length > optionMaxNum) {
			optionInnerLayerHeight = optionHeight * optionMaxNum;
	} else {
			optionInnerLayerHeight = optionHeight * obj.options.length + 8;
	}
	
	var selectBoxArea = document.getElementById(objId + "selectBoxArea");
	
	var newSelect = "";
	if (!selectBoxArea) 
	newSelect += "<span id='" + objId + "selectBoxArea' class='ml5'>";
	newSelect += "<div id='" + objId + "selectBoxDisabledLayer' style='position:absolute;z-index:99;width:"+selectBoxWidth+"px;height:"+selectBoxHeight+"px;background-color:#F9F9F9;filter:alpha(opacity=40);display:none;'></div>";
    newSelect += "<div style='position:absolute;z-index:50;'>";
	newSelect += "<table class='blank' id='" + objId + "selectBoxOptionLayer' cellpadding='0' cellspacing='0' border='0' style='position:relative;z-index:100;display:none;' onMouseOver=\"viewOptionLayer('"+ objId + "')\" onMouseOut=\"setMousePosition('out')\">";
	
	var coverHTML = ""; // selectbox 위에 얹혀지는 투명레이어 (수정할 필요 없음.)
	coverHTML += "	<tr>";
	coverHTML += "		<td class='blank' height='" + (selectBoxHeight - 1) + "px' style='cursor:hand;' onClick=\"hideOptionLayer('"+ objId + "')\"></td>";
	coverHTML += "	</tr>";
	if (!isPutup) newSelect += coverHTML; // 옵션항목 레이어가 아래로 보여질경우.
	
	newSelect += "	<tr>";
	newSelect += "		<td class='blank' >";
	newSelect += "		<table cellpadding='0' cellspacing='0' border='0' width='100%'  class='blank'>";
	newSelect += "			<tr>";
	newSelect += "				<td class='blank' height='3'></td>";
	newSelect += "			</tr>";
	newSelect += "		</table>";
	newSelect += "		<div class='"+ classNameHeader +"OptionInnerLayer' style='width:" + (selectBoxWidth) + "px;height:" + optionInnerLayerHeight + "px;'>";
	newSelect += "		<table cellpadding='0' cellspacing='0' border='0' width='100%' style='table-layout:fixed;word-break:break-all;' class='blank'>";
	var defaultShowedOptionsNum = 0;
	for (var i=0 ; i < obj.options.length ; i++) {
		var nowValue = obj.options[i].value.replace(/'/g,"&rsquo;");
		var nowText = obj.options[i].text.replace(/'/g,"&rsquo;");;
		if (((!hideNullValue)||nowValue != null)&&((!hideNullValue)||nowValue != "")) {
			newSelect += "			<tr>";
//			newSelect += "				<td width='10'></td>";
			newSelect += "				<td style='padding-left:5px;font-size:11px;border:0px;text-align:left;' height='" + optionHeight + "px' class='"+ classNameHeader +"Option' onMouseOver=\"this.className='"+ classNameHeader +"OptionOver'\" onMouseOut=\"this.className='"+ classNameHeader +"Option'\" onClick=\"selectThisValue('"+ objId + "'," + i + ",'" + nowValue + "','" + nowText + "','" + classNameHeader + "')\" style='cursor:hand;'>" + nowText + "</td>";
			newSelect += "				<input type='hidden' id='"+ objId + "SelectBoxOptionValue" + i + "' value='" + nowValue + "'>";
			newSelect += "			</tr>";
			if (defaultShowedOptionsNum < optionMaxNum) defaultShowedOptionsNum++;
		}
	}
	newSelect += "		</table>";
	newSelect += "		</div>";
	newSelect += "		<table cellpadding='0' cellspacing='0' border='0' width='100%' class='blank'>";
	newSelect += "			<tr>";
	newSelect += "				<td class='blank' height='3' ></td>";
	newSelect += "			</tr>";
	newSelect += "		</table>";
	newSelect += "		</td>";
	newSelect += "	</tr>";
	
	if (isPutup) newSelect += coverHTML; // 옵션항목 레이어가 위로 보여질경우.
	newSelect += "</table>";
	newSelect += "</div>";

	// 이곳에서 이미지를 BG로 넣어서 출력하게 햇습니다. 체크해주세요.
	newSelect += "<table class='blank' id='" + objId + "selectBoxFocusArea' cellpadding='0' cellspacing='1' width='" +skc_bgWidth+ "' height='" +skc_bgHeight+ "' border='0' background='" + skc_bgImg + "' onClick=\"viewOptionLayer('"+ objId + "')\" style='cursor:hand;' onMouseOut=\"setMousePosition('out')\">";
	newSelect += "	<tr>";
	newSelect += "		<td class='blank'>";
	newSelect += "		<table cellpadding='0' cellspacing='0' border='0' class='blank'>";
	newSelect += "			<tr>";
	newSelect += "				<td width='20'>";
	newSelect += "				<td class='blank'><div id='" + objId + "selectBoxSelectedValue' class='"+ classNameHeader +"SelectedArea' style='width:" + (selectBoxWidth - downArrowSrcWidth - 2) + "px;height:" + (selectBoxHeight - 2) + "px;overflow:hidden;' onBlur=\"selectBoxBlur('" + objId + "','" + classNameHeader + "')\"></div></td>";
	newSelect += "				<td style='vertical-align:middle;' class='blank'><img src='" + downArrowSrc + "' width='" + downArrowSrcWidth + "' style='margin-right:15px;'></td>";
	newSelect += "				<td width='10'>";
	newSelect += "			</tr>";
	newSelect += "		</table>";
	newSelect += "		</td>";
	newSelect += "	</tr>";
	newSelect += "</table>";
	if (!selectBoxArea) newSelect += "</span>";
	
	if (!selectBoxArea) document.write(newSelect);
	else selectBoxArea.innerHTML = newSelect;
	
	if (isPutup) { // 옵션항목 레이어가 위로 보여질경우.
		var optionLayerTopMargin = 7; // 옵션항목 레이어가 뜨는 위치 조절시 수치를 변경해줍니다.
		var innerDivTop = (-1)*((optionHeight * defaultShowedOptionsNum) + optionLayerTopMargin);	// 옵션항목레이어의 높이 + 옵션항목 위아래 margin 및 추가 여백
		document.getElementById(objId+"selectBoxOptionLayer").style.top = innerDivTop;
	}
	
	var haveSelectedValue = false;
	for (var i=0 ; i < obj.options.length ; i++) {
		if (obj.options[i].selected == true) {
			haveSelectedValue = true;
			settingValue(objId,obj.options[i].text);
		}
	}
	if (!haveSelectedValue) settingValue(objId,obj.options[0].text);
}

document.onmousedown = clickMouse;

/***********************************************************************************
**** Select Box Design Script ******************************************************
**** End ***************************************************************************
************************************************************************************/