function SelectBoxByAutoComplete(){
	this.list = null;;
	this.selectBox = null;
	this.filterBox = null;
	this.inputElement = null;
	this.buffer = null;
	this.displayBox = null;
	this.displayBoxState = false;
	this.hideDelay = 500;
	this.baseZindex = 10;

	this.setDB = function(){
		selectBoxByAutoComplete.list = new Array();
		for(var i = 0;i < selectBoxByAutoComplete.selectBox.options.length;i++) {
			selectBoxByAutoComplete.list[i] = new Object();
			selectBoxByAutoComplete.list[i]["index"] = i;
			selectBoxByAutoComplete.list[i]["text"] = selectBoxByAutoComplete.selectBox.options[i].text;
			selectBoxByAutoComplete.list[i]["value"] = selectBoxByAutoComplete.selectBox.options[i].value;
		}
	}//

	this.setInputBox = function(){
		selectBoxByAutoComplete.inputBox = document.createElement("div");
		selectBoxByAutoComplete.inputBox.style.position="relative";
		//selectBoxByAutoComplete.inputBox.style.border="1px solid red";
		selectBoxByAutoComplete.inputBox.style.textAlign="left";
		selectBoxByAutoComplete.inputBox.style.whiteSpace="nowrap";
        selectBoxByAutoComplete.inputBox.style.left=selectBoxByAutoComplete.selectBox.offsetLeft+'px';
        selectBoxByAutoComplete.inputBox.style.top=selectBoxByAutoComplete.selectBox.offsetTop+'px';
        selectBoxByAutoComplete.inputBox.style.width=selectBoxByAutoComplete.selectBox.offsetWidth+'px';


		selectBoxByAutoComplete.inputElement = document.createElement("input");
		selectBoxByAutoComplete.inputElement.setAttribute("id","filterText");
		selectBoxByAutoComplete.inputElement.style.width="88%";
		if(selectBoxByAutoComplete.selectBox.selectedIndex)
			selectBoxByAutoComplete.inputElement.value = selectBoxByAutoComplete.selectBox.options[selectBoxByAutoComplete.selectBox.selectedIndex].text;

		selectBoxByAutoComplete.inputBox.appendChild(selectBoxByAutoComplete.inputElement);
		selectBoxByAutoComplete.inputBox.onkeyup = selectBoxByAutoComplete.findIt;

        var dropdownButton = document.createElement('img');
        dropdownButton.setAttribute('src','/images/useful/btnDown.gif');
        dropdownButton.setAttribute('border',0);
        dropdownButton.style.cursor = 'pointer';
		dropdownButton.onclick=selectBoxByAutoComplete.findIt;
		selectBoxByAutoComplete.inputBox.appendChild(dropdownButton);
		selectBoxByAutoComplete.inputBox.appendChild(selectBoxByAutoComplete.getDisplayBox());
	}//

	this.getDisplayBox = function(){
		selectBoxByAutoComplete.displayBox = document.createElement("div");
		selectBoxByAutoComplete.displayBox.style.position="absolute";
		selectBoxByAutoComplete.displayBox.style.left="0px";
		selectBoxByAutoComplete.displayBox.style.height="150px";
		selectBoxByAutoComplete.displayBox.style.display="none";
		selectBoxByAutoComplete.displayBox.style.padding="5px";
		selectBoxByAutoComplete.displayBox.style.background="white";
		selectBoxByAutoComplete.displayBox.style.overflowY="auto";
		selectBoxByAutoComplete.displayBox.style.border="1px dotted silver";
		selectBoxByAutoComplete.displayBox.onmouseout=selectBoxByAutoComplete.displayBoxOut;
		return selectBoxByAutoComplete.displayBox;
	}//
	this.displayBoxOut = function(){
		selectBoxByAutoComplete.displayBoxState = false;
		setTimeout("selectBoxByAutoComplete.displayBoxHide()",selectBoxByAutoComplete.hideDelay);
	}//
	this.displayBoxHide = function(){
		if(selectBoxByAutoComplete.displayBoxState)
			return true;
		selectBoxByAutoComplete.inputBox.style.display="none";
		selectBoxByAutoComplete.selectBox.style.display="block";
	}//

	
	this.findIt = function () {
		selectBoxByAutoComplete.displayBox.innerHTML="";

		for(var i = 0;i < selectBoxByAutoComplete.list.length; i++) {
			if(selectBoxByAutoComplete.isRegExpTest(selectBoxByAutoComplete.inputElement.value,selectBoxByAutoComplete.list[i].text)) {//필터링된 option를 Select의 옵션으로 추가시킨다.
				var tmp = document.createElement("div");
				tmp.setAttribute("index",selectBoxByAutoComplete.list[i].index);
				tmp.setAttribute("value",selectBoxByAutoComplete.list[i].value);
				tmp.innerHTML = selectBoxByAutoComplete.list[i].text;

				tmp.style.cursor = 'pointer';
				tmp.onmouseover = selectBoxByAutoComplete.itemOver;
				tmp.onmouseout = selectBoxByAutoComplete.itemOut;
				tmp.onclick = selectBoxByAutoComplete.itemClick;
				selectBoxByAutoComplete.displayBox.appendChild(tmp);
			}
		} 
		selectBoxByAutoComplete.displayBox.style.width=selectBoxByAutoComplete.displayBox.parentNode.offsetWidth;
		selectBoxByAutoComplete.displayBox.style.top=selectBoxByAutoComplete.displayBox.parentNode.offsetHeight;
		selectBoxByAutoComplete.displayBoxState = true;
		selectBoxByAutoComplete.displayBox.style.display="block";
		selectBoxByAutoComplete.inputElement.focus();
	}//findIt

	/*RegExp 패턴
	pattern0 = "[^가-힣]"  '한글만
	pattern1 = "[^-0-9 ]"  '숫자만
	pattern2 = "[^-a-zA-Z]"  '영어만
	pattern3 = "[^-가-힣a-zA-Z0-9/ ]" '숫자와 영어 한글만
	pattern4 = "<[^>]*>"   '태그만
	pattern5 = "[^-a-zA-Z0-9/ ]"    '영어 숫자만*/
	this.isRegExpTest = function(pattern,value){
		var reg = new RegExp(pattern,"i");
		return reg.test(value);
	}//

	this.itemOver = function(evt){
        var evt = evt ? evt : ((window.event) ? window.event:null);
        var elementByCursor = evt.target ? evt.target:evt.srcElement;
		elementByCursor.style.color="white";
		elementByCursor.style.backgroundColor="blue";
		selectBoxByAutoComplete.displayBoxState = true;
	}//

	this.itemOut = function(evt){
        var evt = evt ? evt : ((window.event) ? window.event:null);
        var elementByCursor = evt.target ? evt.target:evt.srcElement;
		elementByCursor.style.color="";
		elementByCursor.style.backgroundColor="";
		selectBoxByAutoComplete.displayBoxState = false;
		setTimeout("selectBoxByAutoComplete.displayBoxHide()",selectBoxByAutoComplete.hideDelay);
	}//

	this.itemClick = function(evt){
        var evt = evt ? evt : ((window.event) ? window.event:null);
        var elementByCursor = evt.target ? evt.target:evt.srcElement;
		elementByCursor.style.backgroundColor="";
		selectBoxByAutoComplete.displayBoxState = false;
		selectBoxByAutoComplete.displayBoxHide();
		//alert(elementByCursor.getAttribute("value"));
		selectBoxByAutoComplete.selectBox.selectedIndex = elementByCursor.getAttribute("index");
	}//


	this.init = function(sel){
		selectBoxByAutoComplete.selectBox = typeof(sel) == "string" ? document.getElementById(sel):sel;

		selectBoxByAutoComplete.setDB();
		selectBoxByAutoComplete.setInputBox();
		selectBoxByAutoComplete.selectBox.parentNode.appendChild(selectBoxByAutoComplete.inputBox);
		selectBoxByAutoComplete.selectBox.style.display='none';
		selectBoxByAutoComplete.inputBox.display="block";
	}//
}//SelectBoxByAutoComplete
