// Path to arrow images.
var arrowImage = 'images/editableSelect/select-arrow.png';
var arrowImageMouseOver = 'images/editableSelect/select-arrow-mouse-over.png';
var arrowImageMouseDown = 'images/editableSelect/select-arrow-mouse-down.png';


var selectBoxIds = 0;
var currentlyOpenedOptionBox = false;
// The select element which is currently active (=opened).
var editableSelect_activeArrow = false;



function selectBox_switchImageUrl()
{
	if (this.src.indexOf(arrowImage) >= 0) { // If the image contains value of arrowImage in src attribute.
		this.src = this.src.replace(arrowImage, arrowImageMouseOver);
    } else {
		this.src = this.src.replace(arrowImageMouseOver, arrowImage);
	}
}

function selectBox_showOptions()
{
	if (editableSelect_activeArrow && editableSelect_activeArrow != this) {
		editableSelect_activeArrow.src = arrowImage;
	}
	editableSelect_activeArrow = this;

	var idNumber = this.id.replace(/[^\d]/g,'');
	var optionDiv = document.getElementById('selectBoxOptions' + idNumber);
	if (optionDiv.style.display == 'block') {
		optionDiv.style.display = 'none';
		if (navigator.userAgent.indexOf('MSIE') >= 0) {
            document.getElementById('selectBoxIframe' + idNumber).style.display = 'none';
        }
		this.src = arrowImageMouseOver;
	} else {
		optionDiv.style.display = 'block';
		if (navigator.userAgent.indexOf('MSIE') >= 0) {
            document.getElementById('selectBoxIframe' + idNumber).style.display = 'block';
        }
		this.src = arrowImageMouseDown;

		if (currentlyOpenedOptionBox && currentlyOpenedOptionBox != optionDiv) {
            currentlyOpenedOptionBox.style.display='none';
        }
		currentlyOpenedOptionBox = optionDiv;
	}
}

function selectOptionValue()
{
	var parentNode = this.parentNode.parentNode; // div (=root) element.
	var textInput = parentNode.getElementsByTagName('input')[0];
	textInput.value = this.innerHTML;
	this.parentNode.style.display = 'none'; // optionDiv element.
	document.getElementById('arrowSelectBox' + parentNode.id.replace(/[^\d]/g,'')).src = arrowImage;

	if (navigator.userAgent.indexOf('MSIE') >= 0) {
        document.getElementById('selectBoxIframe' + parentNode.id.replace(/[^\d]/g,'')).style.display = 'none';
    }
}

function highlightSelectBoxOption()
{
	this.style.backgroundColor = '#316AC5';
	this.style.color = '#FFFFFF';
}

function darkenSelectBoxOption()
{
    this.style.backgroundColor = '';
	this.style.color = '';
}

function createEditableSelect(destinationElement)
{
	destinationElement.className = 'selectBoxInput';
	var div = document.createElement('div');
	div.id = 'selectBox' + selectBoxIds;
	div.className='selectBox';
	div.style.width = destinationElement.offsetWidth + 11 + 'px'; // 11px for an arrow image.
	div.style.zIndex = 10000 - selectBoxIds;
	var parent = destinationElement.parentNode;
	parent.insertBefore(div, destinationElement);
	div.appendChild(destinationElement);

	var img = document.createElement('img');
	img.src = arrowImage;
	img.id = 'arrowSelectBox' + selectBoxIds;
	img.className = 'selectBoxArrow';
	img.onmouseover = selectBox_switchImageUrl;
	img.onmouseout = selectBox_switchImageUrl;
	img.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'; // 2px for a border of optionDiv element.
	div.appendChild(optionDiv);

	if (navigator.userAgent.indexOf('MSIE') >= 0) {
		var iframe = document.createElement('<iframe src="about:blank" frameborder=0>');
		iframe.id = 'selectBoxIframe' + selectBoxIds;
		iframe.style.height = optionDiv.offsetHeight + 'px';
		iframe.style.width = optionDiv.style.width;
		div.appendChild(iframe);
	}

	if (destinationElement.getAttribute('selectBoxOptions')) {
		optionDiv.style.display = 'block'; // Necessary to get a height of anOption element.

		var options = destinationElement.getAttribute('selectBoxOptions').split(';');
		var optionsTotalHeight = 0;
		var optionArray = new Array();
		for (var i = 0; i < options.length; ++i) {
			var anOption = document.createElement('div');
			anOption.className = 'selectBoxAnOption';
			anOption.style.width = optionDiv.style.width.replace('px', '') - 2 + 'px'; // 2px for a margin of anOption element.
			anOption.innerHTML = options[i];
			anOption.onclick = selectOptionValue;
			anOption.onmouseover = highlightSelectBoxOption;
			anOption.onmouseout = darkenSelectBoxOption;
			optionDiv.appendChild(anOption);
			optionsTotalHeight += anOption.offsetHeight;
			optionArray.push(anOption);
		}
		if (optionsTotalHeight > optionDiv.offsetHeight) {
			for (var i = 0; i < optionArray.length; ++i) {
				optionArray[i].style.width = optionDiv.style.width.replace('px', '') - 18 + 'px'; // 18px for a width of the scroll bar.
			}
		}

		optionDiv.style.display = 'none';
	}

	selectBoxIds += 1;
}