// Path to arrow images
var arrowImage = './images/select_arrow.gif';	// Regular arrow
var arrowImageOver = './images/select_arrow_over.gif';	// Mouse over
var arrowImageDown = './images/select_arrow_down.gif';	// Mouse down

var listDroped = false;
var selectBoxIds = 0;
var currentlyOpenedOptionBox = false;
var editableSelect_activeArrow = false;

var agent = navigator.userAgent.toLowerCase();
var isIE = (agent.indexOf("msie") != -1);
var IEversion = null;
if (isIE) {
	var ind = agent.indexOf("msie");
	IEversion = agent.substr(ind, 6).replace(/[^0-9]/g, "");
}

function selectBox_switchImageUrl()
{
	if(this.src.indexOf(arrowImage)>=0){
		this.src = this.src.replace(arrowImage,arrowImageOver);	
	}else{
		this.src = this.src.replace(arrowImageOver,arrowImage);
	}	
}

function selectBox_showOptions()
{
	listDroped = true;
	var img = null;
	
	var parent = this.offsetParent;	
	if (parent && parent.hasChildNodes())
	{
		for(var i = 0; i < parent.childNodes.length; i++) {		
			var curChild = parent.childNodes[i];
			if (curChild.id.match(/arrowSelectBox[0-9]+/)) img = parent.childNodes[i];
		}
	}
	else img = this;
	
	if(editableSelect_activeArrow && editableSelect_activeArrow!=img){
		editableSelect_activeArrow.src = arrowImage;		
	}
	editableSelect_activeArrow = img;
	
	var numId = img.id.replace(/[^\d]/g,'');
	var optionDiv = document.getElementById('selectBoxOptions' + numId);
	if(optionDiv.style.display=='block'){
		optionDiv.style.display='none';
		img.src = arrowImageOver;	
	}else{			
		optionDiv.style.display='block';
		img.src = arrowImageDown;	
		if(currentlyOpenedOptionBox && currentlyOpenedOptionBox!=optionDiv)currentlyOpenedOptionBox.style.display='none';	
		currentlyOpenedOptionBox= optionDiv;
	}
}

function selectOptionValue()
{
	var parentNode = this.parentNode.parentNode;
	var textInput = parentNode.getElementsByTagName('INPUT')[0];
	textInput.value = unescapeHTML(this.innerHTML);
	this.parentNode.style.display='none';	
	document.getElementById('arrowSelectBox' + parentNode.id.replace(/[^\d]/g,'')).src = arrowImageOver;
}
var activeOption;
function highlightSelectBoxOption()
{
	if(this.style.backgroundColor=='#316AC5'){
		this.style.backgroundColor='';
		this.style.color='';
	}else{
		this.style.backgroundColor='#316AC5';
		this.style.color='#FFF';			
	}	
	
	if(activeOption){
		activeOption.style.backgroundColor='';
		activeOption.style.color='';			
	}
	activeOption = this;		
}

function createEditableSelect(dest)
{
	dest.className='selectBoxInput';		
	var div = document.createElement('DIV');
	div.style.styleFloat = 'left';
	div.style.width = dest.offsetWidth + 16 + 'px';
	div.style.position = 'relative';
	div.id = 'selectBox' + selectBoxIds;
	var parent = dest.parentNode;
	parent.insertBefore(div,dest);
	div.appendChild(dest);	
	div.className='selectBox';
	div.style.zIndex = 10000 - selectBoxIds;

	var img = document.createElement('IMG');
	img.src = arrowImage;
	img.className = 'selectBoxArrow';
	
	img.onmouseover = selectBox_switchImageUrl;
	img.onmouseout = selectBox_switchImageUrl;
	img.onclick = selectBox_showOptions;
	img.id = 'arrowSelectBox' + selectBoxIds;
	
	if (isIE && IEversion <= 6 && ((selectBoxIds / 2) == Math.round(selectBoxIds / 2))) img.style.right = "0";
	if ( (isIE && dest.getAttribute('readonly')) || (!isIE && dest.hasAttribute('readonly')) ) dest.onclick = selectBox_showOptions;
	
	div.appendChild(img);
	
	var optionDiv = document.createElement('DIV');
	optionDiv.id = 'selectBoxOptions' + selectBoxIds;
	optionDiv.className='selectBoxOptionContainer';
	optionDiv.style.width = div.offsetWidth-2 + 'px';
	div.appendChild(optionDiv);
	
	if(dest.getAttribute('selectBoxOptions')){
		var options = dest.getAttribute('selectBoxOptions').split(';');
		var optionsTotalHeight = 0;
		var optionArray = new Array();
		for(var no=0;no<options.length;no++){
			var anOption = document.createElement('DIV');
			anOption.innerHTML = options[no];
			anOption.className='selectBoxAnOption';
			anOption.onclick = selectOptionValue;
			anOption.style.width = optionDiv.style.width.replace('px','') - 2 + 'px';
			anOption.onmouseover = highlightSelectBoxOption;
			optionDiv.appendChild(anOption);
			optionsTotalHeight = optionsTotalHeight + anOption.offsetHeight;
			optionArray.push(anOption);
		}
		if(optionsTotalHeight > optionDiv.offsetHeight){
			for(var no=0;no<optionArray.length;no++){
				optionArray[no].style.width = optionDiv.style.width.replace('px','') - 22 + 'px';
			}
		}
		optionDiv.style.display='none';
		optionDiv.style.visibility='visible';
	}
	selectBoxIds = selectBoxIds + 1;
}

function unescapeHTML(str) {	
    var div = document.createElement('div');
    div.innerHTML = stripTags(str);
    return (div.childNodes[0] ? div.childNodes[0].nodeValue : '');
}

function stripTags(str) {
    return str.replace(/<\/?[^>]+>/gi, '');
}

function hideDropedList() {
	if(!listDroped && currentlyOpenedOptionBox && currentlyOpenedOptionBox.style.display=='block'){
		currentlyOpenedOptionBox.style.display='none';
		var img = document.getElementById("arrowSelectBox" + currentlyOpenedOptionBox.id.replace(/[^0-9]/g, ""));
		img.src = arrowImageOver;
	}
	listDroped = false;
}

document.onclick = hideDropedList;