// layer_select.js by guoo.net
// javascript library
// layer version selectbox
// start page

var LayerSelect_list = [];

function LayerSelectOption(value, text) {
	this.value = value;
	this.text = text;

	this.divObj;
	this.checked = false;
}

function LayerSelect(id) {
	if(!explorer && !gecko) return;
	this.index = LayerSelect_list.length;
	LayerSelect_list[LayerSelect_list.length] = this;

	this.selectObj = document.getElementById(id);
	this.onchange = this.selectObj.onchange;
	this.id = id;

	this.width = this.selectObj.offsetWidth;
	this.height = this.selectObj.offsetHeight;
	this.buttonWidth = this.height - 2;
	this.buttonHeight = this.height - 2;
	this.size = 10;
	this.fit = false;

	this.selectedIndex = -1;
	this.value = null;
	this.options = [];
	this.isActive = false;
	this.hoverBackColor = '#fd6';
	this.hoverColor = '#000';
	this.focusColor = '#fd6';
	this.button = '▼';

	this.toprow = 0;
	this.lastIndex = 0;

	this.inputObj = document.createElement('INPUT');
	this.inputObj.type = 'button';
	this.divObj = document.createElement('DIV');
	this.divWrap = document.createElement('DIV');
	this.divDisplay = document.createElement('DIV');
	this.divButton = document.createElement('DIV');
	this.divOptionList = document.createElement('DIV');
}

LayerSelect.prototype.create = function() {
	this.divObj.id = 'layer_select_'+this.id;
	this.divObj.style.zIndex = 100 - this.index;
	this.divObj.style.width = this.width + 2;
	this.divObj.style.height = this.height + 2;
	this.divObj.style.position = 'relative';
	this.divObj.style.top = this.divObj.offsetHeight / 2 * -1 + 1; 
// absolute??
//	this.divObj.style.position = 'absolute';
//	this.divObj.style.top = recursionTop(this.selectObj);
//	this.divObj.style.left = recursionLeft(this.selectObj);

	this.inputObj.style.position = 'absolute';
	this.inputObj.style.width = this.width;
	this.inputObj.style.height = this.height;
	this.inputObj.style.left = 0;
	this.inputObj.style.top = 0;
	this.inputObj.style.zIndex = this.divObj.style.zIndex + 1;
	eval('this.inputObj.onfocus = function() { LayerSelect_list['+this.index+'].setFocus(); };');
	if(window.Event) this.inputObj.addEventListener('keydown', function(e) { window.event = e; }, false);
	eval('this.inputObj.onkeydown = function() { LayerSelect_list['+this.index+'].onKeydown(); };');
	this.divObj.appendChild(this.inputObj);

	this.divWrap.style.position = 'absolute';
	this.divWrap.style.width = this.width;
	this.divWrap.style.height = this.height;
	this.divWrap.style.left = 0;
	this.divWrap.style.top = 0;
	this.divWrap.style.paddig = 0;
	this.divWrap.style.zIndex = this.divObj.style.zIndex + 2;
	this.divWrap.style.backgroundColor = '#fff';
	this.divWrap.style.border = '1px solid #c8c8c8';
	this.divWrap.style.borderLeft = '1px solid #000';
	this.divWrap.style.borderTop = '1px solid #000';
	this.divWrap.align = 'left';
	this.divObj.appendChild(this.divWrap);

	this.divDisplay.align = 'left';
	this.divDisplay.style.overflow = 'hidden';
	this.divDisplay.noWrap = true;
	this.divDisplay.style.height = this.height - 2;

	this.divDisplay.style.width = this.width - this.buttonWidth - 2;
	this.divDisplay.style.backgroundColor = '#fff';
	this.divDisplay.style.zIndex = this.divObj.style.zIndex;
	this.divDisplay.style.cursor = 'hand';
	if(this.selectObj.style.fontSize) this.divDisplay.style.fontSize = this.selectObj.style.fontSize;
	else this.divDisplay.style.fontSize = '10pt';
	this.divDisplay.style.border = '2px solid #fff';
	if(window.Event) this.divDisplay.addEventListener('mousemove', function(e) { window.event = e; }, false);
	eval('this.divDisplay.onmousemove = function() { tooltip(event, LayerSelect_list['+this.index+'].divDisplay.innerHTML); };');
	eval('this.divDisplay.onmousedown = function() { LayerSelect_list['+this.index+'].toggleOptionList(); };');
	eval('this.divDisplay.onmouseup = function() { LayerSelect_list['+this.index+'].inputObj.focus(); };');
	this.divDisplay.ondragstart = function() { return false; };
	this.divDisplay.onselectstart = function() { return false; };
	this.divWrap.appendChild(this.divDisplay);

	this.divButton.style.position = 'absolute';
	this.divButton.style.left = this.width - this.buttonWidth - 1;
	this.divButton.style.width = this.buttonWidth;
	this.divButton.style.height = this.buttonHeight;
	this.divButton.style.top = 1;
	this.divButton.style.backgroundColor = '#fff';
	this.divButton.style.position = 'absolute';
	this.divButton.style.zIndex = this.divObj.style.zIndex + 3;
	this.divButton.style.cursor = 'hand';
	eval('this.divButton.onmousedown = function() { LayerSelect_list['+this.index+'].toggleOptionList(); };');
	eval('this.divButton.onmouseup = function() { LayerSelect_list['+this.index+'].inputObj.focus(); };');
	this.divButton.ondragstart = function() { return false; };
	this.divButton.onselectstart = function() { return false; };
	this.divButton.innerHTML = this.button;
	this.divObj.appendChild(this.divButton);

	this.divOptionList.style.position = 'absolute';
	if(!this.fit) this.divOptionList.style.width = this.width;
	this.divOptionList.style.height = 0;
	this.divOptionList.style.left = 0;
	this.divOptionList.style.overflowY = 'auto';
	this.divOptionList.style.backgroundColor = '#fff';
	this.divOptionList.style.border = '1px solid #000';
	this.divOptionList.style.borderLeft = '1px solid #c8c8c8';
	this.divOptionList.style.borderTop = '1px solid #c8c8c8';
	this.divOptionList.style.position = 'absolute';
	this.divOptionList.style.visibility = 'hidden';
	this.divOptionList.style.zIndex = this.divObj.style.zIndex + 4;
	eval('this.divOptionList.onmousedown = function() { LayerSelect_list['+this.index+'].optionList(); };');
	this.divOptionList.ondragstart = function() { return false; };
	this.divOptionList.onselectstart = function() { return false; };

	this.divObj.appendChild(this.divOptionList);

	this.relocation();

	this.selectObj.parentNode.insertBefore(this.divObj, this.selectObj);
	this.selectObj.style.display = 'none';
}

LayerSelect.prototype.onchange = function() {
}
LayerSelect.prototype.dummyFunc = function() {
}

LayerSelect.prototype.setFocus = function() {
	for(var i=0; i<LayerSelect_list.length; i++) {
		if(this.index!=i) {
			LayerSelect_list[i].isActive = false;
			LayerSelect_list[i].divOptionList.style.visibility = 'hidden';
			LayerSelect_list[i].setBlur();
		}
	}//for
	this.divDisplay.style.border = '2px solid '+this.focusColor;
}

LayerSelect.prototype.setBlur = function() {
	this.divDisplay.style.border = '2px solid #fff';
}

LayerSelect.prototype.relocation = function() {
	try {
		this.options = [];
		this.options.length = 0;
	}catch(e) {}

	for(var i=this.divOptionList.childNodes.length-1; i>=0; i--) {
		this.divOptionList.removeChild(this.divOptionList.childNodes[i]);
	}

	var option;
	var height;
	var selectedIndex = this.selectObj.selectedIndex;
	for(var i=0; i<this.selectObj.options.length; i++) {
		option = this.selectObj.options[i];
		height = option.getAttribute('height');
		this.addOption(option.value, option.text, selectedIndex==i, height);
	}
}

LayerSelect.prototype.addOption = function(value, text, selected, height) {
	var index = this.options.length;

	text = text.replace(/\[/g, '<');
	text = text.replace(/\]/g, '>');
	var optionObj = new LayerSelectOption(value, text);

	var divOption = document.createElement('DIV');
	divOption.style.zIndex = this.divOptionList.style.zIndex;
	if(height) divOption.style.height = height;
	divOption.style.cursor = 'hand';
	if(!this.fit) {
		divOption.style.width = '100%';
		divOption.style.overflow = 'hidden';
		divOption.style.textOverflow = 'ellipsis';
	}
	divOption.style.textAlign = 'left';
	if(this.selectObj.style.fontSize) divOption.style.fontSize = this.selectObj.style.fontSize;
	else divOption.style.fontSize = '10pt';
	divOption.style.backgroundColor = '#fff';
	divOption.style.color = '#000';
	divOption.noWrap = true;
	if(window.Event) divOption.addEventListener('mousedown', function(e) { window.event = e; }, false);
	eval('divOption.onmouseup = function() { LayerSelect_list['+this.index+'].selectOption('+index+'); };');
	eval('divOption.onmouseover = function() { LayerSelect_list['+this.index+'].hoverOption('+index+') };');
	divOption.innerHTML = optionObj.text;

	optionObj.divObj = divOption;

	this.divOptionList.appendChild(divOption);

	this.options[index] = optionObj;

	if(index==0 || selected) {
		this.setDisplay(this.options[index].text);
		this.value = this.options[index].value;
		this.selectedIndex = index;

		if(this.selectObj.onchange) this.dummyFunc = this.selectObj.onchange;
		this.selectObj.onchange = '';
		this.selectObj.value = this.options[index].value;
		this.selectObj.onchange = this.dummyFunc;

		this.lastIndex = this.selectedIndex;
	}
}

LayerSelect.prototype.setDisplay = function(html) {
	this.divDisplay.innerHTML = html;
}

LayerSelect.prototype.setSelectedIndex = function(index) {
	this.options[this.selectedIndex].divObj.style.backgroundColor = '#fff';
	this.options[this.selectedIndex].divObj.style.color = '#000';
	this.divDisplay.innerHTML = this.options[index].text;
	this.value = this.options[index].value;
	this.selectedIndex = index;
	this.selectObj.selectedIndex = index;
	if(this.selectObj.onchange) this.selectObj.onchange();
}

LayerSelect.prototype.hoverOption = function(index) {
	this.options[this.selectedIndex].divObj.style.backgroundColor = '#fff';
	this.options[this.selectedIndex].divObj.style.color = '#000';
	this.options[this.lastIndex].divObj.style.backgroundColor = '#fff';
	this.options[this.lastIndex].divObj.style.color = '#000';
	this.options[index].divObj.style.backgroundColor = this.hoverBackColor;
	this.options[index].divObj.style.color = this.hoverColor;

	this.lastIndex = index;
}

LayerSelect.prototype.hoveroutOption = function(index) {
	if(this.selectedIndex==index) {
		this.options[index].divObj.style.backgroundColor = this.hoverBackColor;
		this.options[index].divObj.style.color = this.hoverColor;
	}else {
		this.options[index].divObj.style.backgroundColor = '#fff';
		this.options[index].divObj.style.color = '#000';
	}
}

LayerSelect.prototype.selectOption = function(index) {
	this.setSelectedIndex(index);
	this.isActive = false;
	this.toggleOptionList();
	this.inputObj.focus();

	try {
		event.cancelBubble = true;
		event.returnValue = false;
	}catch(e) {}
}

LayerSelect.prototype.optionList = function() {
	this.isActive = true;
}

LayerSelect.prototype.viewOptionList = function() {
	if(this.options.length > 1 && !this.options[this.options.length-1].divObj.offsetTop) {
		setTimeout('LayerSelect_list['+this.index+'].viewOptionList();', 30);
		return;
	}
	
	var totalHeight = 2;
	for(var i=0; i<this.options.length; i++) {
		if(i < this.size) {
			totalHeight += this.options[i].divObj.offsetHeight;
		}
	}
	if(this.fit) {
		var width;
		if(this.size < this.options.length) {
			width = this.divOptionList.scrollWidth + 25 + 2;
		}else {
			width = this.divOptionList.scrollWidth + 2;
		}
		if(width < this.width) width = this.width;
		this.divOptionList.style.width = width;
	}
	this.divOptionList.style.height = totalHeight;

	this.options[this.lastIndex].divObj.style.backgroundColor = '#fff';
	this.options[this.lastIndex].divObj.style.color = '#000';
	this.options[this.selectedIndex].divObj.style.backgroundColor = this.hoverBackColor;
	this.options[this.selectedIndex].divObj.style.color = this.hoverColor;
	this.divOptionList.scrollTop = this.options[this.selectedIndex].divObj.offsetTop;
	this.toprow = this.selectedIndex - 1;

}

LayerSelect.prototype.toggleOptionList = function() {
	if(this.divOptionList.style.visibility=='hidden') {
		this.isActive = true;
		this.divOptionList.style.top = this.divWrap.offsetHeight;
		this.divOptionList.style.visibility = 'visible';
		
		this.inputObj.focus();

		if(this.size < this.options.length) {
			this.divOptionList.style.height = this.size * 20;
		}
		if(this.fit) this.divOptionList.style.width = 20;

		this.viewOptionList();
	}else {
		this.isActive = false;
		this.divOptionList.style.visibility = 'hidden';
	}
}

LayerSelect.prototype.onKeydown = function() {
	if(event.keyCode==keyboard.VK_ENTER) {
		this.toggleOptionList();
		event.returnValue = false;
		event.cancelBubble = true;
	}
	if(event.keyCode==keyboard.VK_UP) {
		if(this.selectedIndex > 0) {
			if(this.divOptionList.style.visibility!='hidden') {
				var divObj1 = this.options[this.selectedIndex].divObj;
				var divObj2 = this.options[this.selectedIndex-1].divObj;
				divObj1.style.color = '#000';
				divObj1.style.backgroundColor = '#fff';
				divObj2.style.color = this.hoverColor;
				divObj2.style.backgroundColor = this.hoverBackColor;
				this.setSelectedIndex(this.selectedIndex-1);
				if(this.toprow==this.selectedIndex) {
					this.divOptionList.scrollTop = this.options[this.selectedIndex].divObj.offsetTop;
					this.toprow--;
				}
			}else {
				var divObj1 = this.options[this.selectedIndex].divObj;
				var divObj2 = this.options[this.selectedIndex-1].divObj;
				divObj1.style.color = '#000';
				divObj1.style.backgroundColor = '#fff';
				divObj2.style.color = this.hoverColor;
				divObj2.style.backgroundColor = this.hoverBackColor;
				this.setSelectedIndex(this.selectedIndex-1);
				if(this.toprow==this.selectedIndex) {
					this.toprow--;
				}
			}
		}
		event.returnValue = false;
		event.cancelBubble = true;
	}
	if(event.keyCode==keyboard.VK_DOWN) {
		if(this.selectedIndex < this.options.length - 1) {
			if(this.divOptionList.style.visibility!='hidden') {
				var divObj1 = this.options[this.selectedIndex].divObj;
				var divObj2 = this.options[this.selectedIndex+1].divObj;
				divObj1.style.color = '#000';
				divObj1.style.backgroundColor = '#fff';
				divObj2.style.color = this.hoverColor;
				divObj2.style.backgroundColor = this.hoverBackColor;
				this.setSelectedIndex(this.selectedIndex+1);
				if(this.toprow+this.size==this.selectedIndex) {
					if(this.options.length - 1 == this.selectedIndex) {
						this.divOptionList.scrollTop = this.divOptionList.scrollHeight;
					}else {
						this.divOptionList.scrollTop = this.options[this.selectedIndex].divObj.offsetTop - this.options[this.size-1].divObj.offsetTop;
					}
					this.toprow++;
				}
			}else {
				var divObj1 = this.options[this.selectedIndex].divObj;
				var divObj2 = this.options[this.selectedIndex+1].divObj;
				divObj1.style.color = '#000';
				divObj1.style.backgroundColor = '#fff';
				divObj2.style.color = this.hoverColor;
				divObj2.style.backgroundColor = this.hoverBackColor;
				this.setSelectedIndex(this.selectedIndex+1);
				if(this.toprow+this.size==this.selectedIndex) {
					this.toprow++;
				}
			}
		}
		event.returnValue = false;
		event.cancelBubble = true;
	}
}

function LayerSelect_hideOptionListAll() {
	for(var i=0; i<LayerSelect_list.length; i++) {
		if(LayerSelect_list[i].isActive) {
			LayerSelect_list[i].isActive = false;
		}else {
			LayerSelect_list[i].divOptionList.style.visibility = 'hidden';
			LayerSelect_list[i].setBlur();
		}
	}//for
}

function LayerSelect_call(id, method) {
	for(var i=0; i<LayerSelect_list.length; i++) {
		if(LayerSelect_list[i].id == id) {
			eval('LayerSelect_list[i].'+method);
			break;
		}
	}
}

function LayerSelect_mousedown() {
	if(event.button==1) { // 왼쪽 클릭
		LayerSelect_hideOptionListAll();
	}else if(event.button==2) { //오른쪽 클릭
		LayerSelect_hideOptionListAll();
	}else if(event.button==4) { //휠 클릭
	}
	return true;
}

addMousedownEvent(new CustomEvent('layer_select', LayerSelect_mousedown, 2));