//combo.js
//Written by Linn White
//Written on April 13, 2006
//Do not remove, modify, or otherwise hide the author information above this line
//This work falls under the creative-commons license.
//See http://creativecommons.org/licenses/by-sa/3.0/ for details.
//Usage:
//Add the following to any onload statement of  your html document
//var myComboBox = new Combo(100, document.getElementById('textbox'));
//100 is the height of your combo selection window, and 'textbox' is the id of the textbox that you want to convert.
//To add options use the following code:
//myComboBox.addOption('Item 1');

function Combo(myHeight, comboText, multi)
{
	var comboObject = this;
	comboObject.version = '0.5';
	var textValues = new Array();
	var newText;
	var comboIDS = 0;
	
	//Create our combo box elements
	var comboDiv = document.createElement('div');
	var comboFrame = document.createElement('iframe');
	var comboButton = document.createElement('input');
	
	//Set our styles, positioning, etc.
	//The text box we are converting
	comboText.style.position = 'relative';
	comboText.setAttribute('autocomplete', 'off');
	//Combo Div.  Container for the options
	comboDiv.style.position = 'absolute';
	comboDiv.style.display = 'none';
	comboDiv.style.zIndex = '101';
//	comboDiv.style.backgroundColor = '#ffffff';
	comboDiv.style.backgroundColor = '#ffffff';
	comboDiv.style.border = '1px solid #000000';
	comboDiv.style.overflow = 'auto';
	comboDiv.style.height = myHeight + 'px';
	comboDiv.style.width = comboText.offsetWidth + 'px';
	comboDiv.style.color = '#696969';

//	comboDiv.style.font-size = '11px';
	
//	comboOption.style.border = '1px solid #93094a';
	//comboOption.style.font-size = '11px';
	//comboOption.style.color = '#696969';




	
	
	//Combo Button.  Displays/hides the combo div
	comboButton.type = 'image';
	comboButton.style.textAlign = 'center';
	comboButton.style.position = 'absolute';
	comboButton.style.height = comboText.offsetHeight + 'px';
//	comboButton.style.background-i.url = "skin/hoamai/images/arrow_combox.gif";
	//comboButton.style.border = '1px groove #000000';
//	comboButton.value = '...';
	comboButton.src = ImgPath +'/images/arrow_combox.gif';
	comboButton.style.width = '21px';
	comboButton.style.zIndex = '100';
	comboButton.style.padding = '0px';
	//Combo Frame.  Used to hide form elements in IE
	
	
	comboFrame.style.position = 'absolute';
	comboFrame.style.display = 'none';
	comboFrame.style.zIndex = '100';
	comboFrame.src = 'javascript:void(0)';
	comboFrame.style.width = comboText.offsetWidth + 'px';
	comboFrame.style.height =  myHeight - 1 + 'px';
	comboFrame.frameBorder = '0';	
			
		
	comboObject.Adjust = function()
	{
		comboDiv.style.left = comboText.offsetLeft + 'px';
		comboDiv.style.top = comboText.offsetTop + comboText.offsetHeight + 'px';
		comboFrame.style.left = comboText.offsetLeft + 'px';
		comboFrame.style.top = comboText.offsetTop + comboText.offsetHeight + 'px';
		comboButton.style.left = comboText.offsetLeft + comboText.offsetWidth - comboButton.offsetWidth +'px';
		comboButton.style.top = comboText.offsetTop + 'px';
	}
	
	//Hide the combobox if we click anywhere except our button.
	function hideCombo(e) 
	{
		e = (e == null) ? window.event : e;
		target = (e.target) ? e.target : e.srcElement;
		if(target == comboButton)
		{
			return;
		}
		else
		{
			comboDiv.style.display = 'none';
			comboFrame.style.display = 'none';
		}
	}
	//Show matching items
	function showMatch() 
	{
		var divOptions = comboDiv.getElementsByTagName('div');
		if(comboText.value != "")
		{
			var noMatch = true;
			comboDiv.style.display = 'block';
			comboFrame.style.display = 'block';
			for(var i = 0; i < divOptions.length; i++)
			{
				if(divOptions[i].innerHTML.replace(/\<.*?\>/ig, '').toLowerCase().indexOf(comboText.value.toLowerCase()) != '-1')
				{
					noMatch = false;
					divOptions[i].style.display = 'block';
				}
				else
				{
					divOptions[i].style.display = 'none';
				}
			}
			if(noMatch)
			{
				comboDiv.style.display = 'none';
				comboFrame.style.display = 'none';
				return;
			}
		}
		else
		{
			for(var i = 0; i < divOptions.length; i++)
			{
					divOptions[i].style.display = 'block';
			}
			comboDiv.style.display = 'none';
			comboFrame.style.display = 'none';
		}
	}
	//Show the combo div and frame
	function showCombo()
	{
		var divOptions = comboDiv.getElementsByTagName('div');
		for(var i = 0; i < divOptions.length; i++)
		{
			divOptions[i].style.display = 'block';
		}
		if(comboDiv.style.display == 'none')
		{
			comboDiv.style.display = 'block';
			comboFrame.style.display = 'block'
		}
		else
		{
			comboDiv.style.display = 'none';
			comboFrame.style.display = 'none'		
		}
	}
	
	//Create divs for our options.
	comboObject.addOption = function(comboOptionText, comboOptionValue)
	{
		var comboOption = document.createElement('div')
		comboOption.innerHTML = comboOptionText;
		comboOption.value = comboOptionValue;
		comboOption.style.backgroundColor = '#ffffff';
		comboOption.style.cursor = 'pointer';
		comboOption.style.paddingLeft = '3px';
		comboOption.style.fontSize = '11px';		
		
//		comboOption.style.border = '1px solid #93094a';
		//comboOption.style.font-size = '11px';
		//comboOption.style.color = '#696969';
		//border: 1px solid #93094a; font-size: 11px; margin-bottom: 2px; color: #696969
		
		comboOption.selected = false;
		comboOption.id = '_combo' + comboIDS;
		comboIDS++;
		comboOption.onmouseover = function()
		{
			if(comboOption.selected)
			{
				return;
			}
//			comboOption.style.backgroundColor = '#6699cc';
			comboOption.style.backgroundColor = '#FFF4FA';
			comboOption.style.color = '#93094a';
		}
		comboOption.onmouseout = function()
		{
			if(comboOption.selected)
			{
				return;
			}
			comboOption.style.backgroundColor = '#ffffff';
			//comboOption.style.color = '#000000';
		}
		
		comboOption.onclick = function()
		{
			if(!multi)
			{
				//comboText.value = comboOption.value;
				comboText.value = comboOption.innerHTML;
				comboDiv.style.display = 'none';
				comboFrame.style.display = 'none';
				window.open(comboOption.value);
				return;
			}
			
			comboOption.selected = (comboOption.selected) ? false : true ;
			comboOption.style.color = (!comboOption.selected) ? '#000000' : '#ffffff';
			comboOption.style.backgroundColor = (!comboOption.selected) ? '#ffffff' : '#333399';
			if(comboOption.selected)
			{
				newText = '';
				textValues[comboOption.id] = comboOption.value;
				for(var i in textValues)
				{
					if(textValues[i])
					{
						newText += textValues[i] + ',';
					}
				}
				comboText.value = newText.substring(0, newText.length - 1);
			}
			else
			{
				delete textValues[comboOption.id];
				newText = '';
				for(var i in textValues)
				{
					if(textValues[i])
					{
						newText += textValues[i] + ',';
					}
				}
				comboText.value = newText.substring(0, newText.length - 1);
			}
		}
		comboDiv.appendChild(comboOption);
	}
	
	comboObject.deleteOptions = function(index)
	{
		if(typeof(index) == 'number')
		{
			if(comboDiv.childNodes[index])
			{
				delete textValues[comboDiv.childNodes[index].id];
				comboDiv.removeChild(comboDiv.childNodes[index]);
			}
		}
		else
		{
			while(comboDiv.firstChild)
			{
				comboDiv.removeChild(comboDiv.firstChild);
			}
			textValues = [];
			comboIDS = 0;
		}
	}
	
		
	//Set our callbacks/functions.
	if(window.addEventListener)
	{
		window.addEventListener('resize', function(){comboObject.Adjust()}, false);
		comboText.addEventListener('keyup', function(){showMatch()}, false);
		comboButton.addEventListener('click', function(){showCombo()}, false);
		if(!multi)
		{
			window.addEventListener('click', function(e){hideCombo(e)}, false);
		}
		
	}
	else
	{
		window.onresize = function(){comboObject.Adjust()};
		comboText.onkeyup = function(){showMatch()};
		comboButton.onclick = function(){showCombo()};
		if(!multi)
		{
			document.onclick = function(e){hideCombo(e)};
		}
	}
	
	//Draw our stuff
	document.body.appendChild(comboDiv);
	document.body.appendChild(comboFrame);
	document.body.appendChild(comboButton);
	
	comboObject.Adjust();
}