<?
/*
This very simple class is not my work but the translation in php of this very useful javascript
www.dhtmlgoodies.com

please report any other bug or problem at hide@address.com

Ciao

Andrea Bersi
AOSTA (ITALY)
http://www.andreabersi.com

*/
Class EditSelect
{
	
	function init()
	{
		echo "<style type=\"text/css\">
		.selectBoxArrow{
			margin-top:1px;
			float:left;
			position:absolute;
			right:1px;
			
	
		}	
		.selectBoxInput{
			border:0px;
			padding-left:1px;
			height:16px;
			position:absolute;
			top:0px;
			left:0px;
		}
	
		.selectBox{
			border:1px solid #7f9db9;
			height:20px;	
		
		}
		.selectBoxOptionContainer{
			position:absolute;
			border:1px solid #7f9db9;
			height:100px;
			background-color:#FFF;
			left:-1px;
			top:20px;
			visibility:hidden;
			overflow:auto;
		}
		.selectBoxAnOption{
			font-family:arial;
			font-size:12px;
			cursor:default;
			margin:1px;
			overflow:hidden;
			white-space:nowrap;
		}
		</style>
		<script type=\"text/javascript\">
		/************************************************************************************************************
		(C) www.dhtmlgoodies.com, September 2005
		
		This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
		
		Terms of use:
		You are free to use this script as long as the copyright message is kept intact. However, you may not
		redistribute, sell or repost it without our permission.
		
		Thank you!
		
		www.dhtmlgoodies.com
		Alf Magne Kalleland
		
		************************************************************************************************************/	
		
		// 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 selectBoxIds = 0;
		var currentlyOpenedOptionBox = false;
		var editableSelect_activeArrow = false;
		
	
		
		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()
		{
			if(editableSelect_activeArrow && editableSelect_activeArrow!=this){
				editableSelect_activeArrow.src = arrowImage;
				
			}
			editableSelect_activeArrow = this;
			var optionDiv = document.getElementById('selectBoxOptions' + this.id.replace(/[^\d]/g,''));
			if(optionDiv.style.display=='block'){
				optionDiv.style.display='none';
				this.src = arrowImageOver;	
			}else{			
				optionDiv.style.display='block';
				this.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 = 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;
	
			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;
		}	
		
		</script>";
	}
	function print_select($name, $key, $init_value="")
	{
		echo "<input type=\"text\" name=\"$name\" value=\"$init_value\" selectBoxOptions=\"$key\">
		<script type=\"text/javascript\">
		createEditableSelect(document.forms[0].$name);
		</script>";
	}
}
?>