Index: /trunk/jabberit_messenger/templates/celepar/css/selectEditStyle.css
===================================================================
--- /trunk/jabberit_messenger/templates/celepar/css/selectEditStyle.css	(revision 460)
+++ /trunk/jabberit_messenger/templates/celepar/css/selectEditStyle.css	(revision 460)
@@ -0,0 +1,49 @@
+	.selectBoxArrow
+	{
+		margin-top:1px;
+		float:left;
+		position:absolute;
+		right:1px;
+
+	}	
+	
+	.selectBoxInput
+	{
+		font-family: Verdana, Helvetica, sans;
+		font-size: 11px !important;
+		border:0px !important;
+		padding-left:1px;
+		height:16px;
+		position:absolute;
+		bottom:0px;
+		left:0px;
+	}
+
+	.selectBox
+	{
+		border:1px solid #cecece !important;
+		height:20px;	
+	}
+	
+	.selectBoxOptionContainer
+	{
+		position:absolute;
+		border:1px solid #cecece !important;
+		font-size:12px;
+		background-color:#FFF;
+		left:-1px;
+		top:20px;
+		visibility:hidden;
+		overflow-y:auto;
+		
+	}
+
+	.selectBoxAnOption
+	{
+		font-family: Verdana, Helvetica, sans;
+		font-size:12px;
+		cursor:default;
+		margin:1px;
+		overflow:hidden;
+		white-space:nowrap;
+	}
Index: /trunk/jabberit_messenger/js/editSelect.js
===================================================================
--- /trunk/jabberit_messenger/js/editSelect.js	(revision 460)
+++ /trunk/jabberit_messenger/js/editSelect.js	(revision 460)
@@ -0,0 +1,202 @@
+(function()
+{
+	// Path to arrow images
+	var arrowImage = path_jabberit + 'templates/celepar/images/select_arrow.gif';				// Regular arrow
+	var arrowImageOver = path_jabberit + 'templates/celepar/images/select_arrow_over.gif';		// Mouse over
+	var arrowImageDown = path_jabberit + 'templates/celepar/images/select_arrow_down.gif';		// Mouse down
+
+	var activeOption;
+	var selectBoxIds = 0;
+	var currentlyOpenedOptionBox = false;
+	var editableSelect_activeArrow = false;
+	
+	function configEvents(pObj, pEvent, pHandler)
+	{
+		if ( typeof pObj == 'object' )
+		{
+			if ( pEvent.substring(0, 2) == 'on' )
+				pEvent = pEvent.substring(2, pEvent.length);
+
+			if ( pObj.addEventListener )
+				pObj.addEventListener(pEvent, pHandler, false);
+			else if ( pObj.attachEvent )
+				pObj.attachEvent('on' + pEvent, pHandler);
+		}
+	}
+	
+	function createEditableSelect()
+	{
+		if( arguments.length > 0 )
+			dest = arguments[0];
+		else
+			return false; 
+			
+		dest.className='selectBoxInput';		
+		
+		var div = document.createElement('DIV');
+			div.style.styleFloat = 'left';
+			div.style.left = '92px';
+			div.style.width = dest.offsetWidth + 16 + 'px';
+			div.style.position = 'absolute';
+			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 = function()
+		{
+			if(this.src.indexOf(arrowImage) >= 0)
+				this.src = this.src.replace(arrowImage,arrowImageOver);	
+			else
+				this.src = this.src.replace(arrowImageOver,arrowImage);
+		};
+
+		img.onmouseout = function()
+		{
+			if(this.src.indexOf(arrowImage) >= 0)
+				this.src = this.src.replace(arrowImage,arrowImageOver);	
+			else
+				this.src = this.src.replace(arrowImageOver,arrowImage);
+		};
+
+		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';
+		}
+
+		configEvents(dest,
+					'onkeydown',
+					function(e)
+					{
+						switch(e.keyCode)
+						{
+							case 13:
+							case 27:							
+								dest.value = dest.value;
+						        dest.focus();
+        						dest.select();
+    							break;
+						}
+					});
+					
+		configEvents(dest,
+					 'onclick',
+					 function(e)
+					 {	
+						dest.value = dest.value;
+						dest.focus();
+        				dest.select();
+						document.getElementById('selectBoxOptions0').style.display='none';
+						document.getElementById('arrowSelectBox0').src = arrowImageOver;														
+					 });		
+
+		//selectBoxIds = selectBoxIds + 1;
+	}
+
+	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 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;
+	}
+
+	function selectBox_showOptions()
+	{
+		if( editableSelect_activeArrow && editableSelect_activeArrow!=this )
+			editableSelect_activeArrow.src = arrowImage;
+
+		editableSelect_activeArrow = this;
+		
+		var numId = this.id.replace(/[^\d]/g,'');
+		var optionDiv = document.getElementById('selectBoxOptions' + numId);
+		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 editableSelect(){}
+	
+	editableSelect.prototype.create = createEditableSelect;
+	window.editS = new editableSelect;
+		
+})();
