/*all <SELECT> tags with CSS class="$classNameSelect" will be replaced */
var classNameSelect = 'replaced';

var classNameNewSelect = 'selectReplacement';
var classNameOpenedList = 'selectOpen';
var classNameFirstItem = 'firstSelected';
var classNameSelectedItem = 'selected';
var classNameHoveredItem = 'hover';
var classLast = ' lastItem';
var classFirst = ' firstItem';

var newSelects = new Array();

function selectReplacement(obj, index) 
{
	var origId = obj.id;
	var origClassName = obj.className;
	
	//create list for styling
	var div = document.createElement('div');
	//add new select to global array for future use
	newSelects[index] = div;
	
	div.className = classNameNewSelect + ' ' + (origClassName ? origClassName : origId);
	
	var opts = obj.options;
	
	for (var i=0; i<opts.length; i++) 
	{
		var selectedOpt;
		if (opts[i].selected) 
		{
			selectedOpt = i;
			break;
		} 
		else 
		{
			selectedOpt = 0;
		}
	}
	//get the selected option as the first item in the new list
	for (var i=0; i<opts.length; i++) 
	{
		if (i == selectedOpt) 
		{
			var span = document.createElement('span');
			var innerSpan = document.createElement('span');
			
			innerSpan.innerHTML = opts[i].text;// + 'aaaaaa aaaaaaaaa aaaaaaaaaaaaaaa';

			span.appendChild(innerSpan);
			span.className = classNameFirstItem;
			span.onmouseover = null;
			span.onmouseout = null;
			span.onclick = function() 
			{
				showList(div.lastChild);
			}
			div.appendChild(span);
			break;
		}	
	}

	//create list of options
	var ul = document.createElement('ul');

	for (var i=0; i<opts.length; i++) 
	{
		var li = document.createElement('li');
		var span2 = document.createElement('span');
		
		span2.innerHTML = opts[i].text;// + 'aaaaaa aaaaaaaaa aaaaaaaaaaaaaaa';
		li.appendChild(span2);
		li.selIndex = opts[i].index;
		li.selectID = obj.id;
		li.onclick = function() 
		{
			selectMe(this);
		}
		
		if (i == selectedOpt) 
		{
			li.className = classNameSelectedItem;
			li.onclick = function() 
			{
				//this.parentNode.className = classNameOpenedList;
				selectMe(this);
			}
		}
		
		if (window.attachEvent) 
		{
			li.onmouseover = function() 
			{
				this.className += ' ' + classNameHoveredItem;
			}
			li.onmouseout = function() 
			{
				this.className = this.className.replace(new RegExp(" " + classNameHoveredItem + "\\b"), '');
			}
		}
		
		if(opts.length >= 20)
		{
			ul.style.height = '325px';
			//li.style.paddingRight = li.style.paddingRight + '20px';
		}
		if(i==opts.length-1)
		{
		    li.className += classLast;
		}
		ul.appendChild(li);
	}
	
	div.appendChild(ul)
	
	//add the list to div
	obj.parentNode.appendChild(div);
}

function selectMe(obj) 
{
	var lis = obj.parentNode.getElementsByTagName('li');
	
	for (var i=0; i<lis.length; i++) 
	{
		// not the selected list item
		if (lis[i] != obj) 
		{
			lis[i].className='';

			triggerActions(obj.selectID,obj.selIndex);
		} 
		else 
		{
			obj.className = classNameSelectedItem;
			obj.parentNode.className = '';

			setOrigSelectVal(obj.selectID, obj.selIndex);
			var objDiv = searchParents(obj);
			if(objDiv != null)
			{
			//debugger;
				setFirstItem(objDiv.firstChild.firstChild, obj.firstChild.innerHTML);
			}
		}
	}
}
function showList(ulist)
{
	if(ulist.className.indexOf(classNameOpenedList) == -1)
	{
		closeLists();
		ulist.parentNode.style.position = 'relative';
		ulist.className = classNameOpenedList;
	}
	else
	{
		ulist.parentNode.style.position = 'static';
		ulist.className = '';
	}
}

function setOrigSelectVal(objID, selIndex) 
{
	var obj = document.getElementById(objID);
	obj.selectedIndex = selIndex;
}
function setFirstItem(obj, selText) 
{
	if(obj.innerText)
	{
		obj.innerText = selText;
	}
	else
	{
		obj.innerHTML = selText;
	}
}
function triggerActions(objID, selIndex) 
{
	var obj = document.getElementById(objID);
	if(selIndex != obj.selectedIndex)
	{
		if(obj.onchange)
		{
			obj.onchange();
		}
		if(obj.onclick)
		{
			obj.onclick();
		}
	}
}
function setForm() 
{
	var s = document.getElementsByTagName('select');
	for (var i=0; i<s.length; i++) 
	{
		var sel = s[i];
		
		if(sel.className.indexOf(classNameSelect) != -1)
		{
			selectReplacement(sel, i);
		}
	}
}

function closeLists() 
{
	for(var i=0; i<newSelects.length; i++)
	{
		newSelects[i].lastChild.className = '';
		newSelects[i].style.position = 'static';
	}
}
function handleClicks(ev)
{
	var elem = getClickedElement(ev);
	var test = searchParents(elem);
	
	if(test == null)
	{
		closeLists();
	}
}
function searchParents(obj)
{
	if(obj != null && obj.className != null)
	{
		if(obj.className.indexOf(classNameNewSelect) != -1)
		{
			return obj;
		}
		else
		{
			return searchParents(obj.parentNode);
		}
	}
	else
	{
		return null;
	}
}

function getClickedElement(ev)
{
	if(!ev) ev = arguments[0] || window.event;
	
	var origEl = ev.target || ev.srcElement;
	return origEl;
}











if (document.attachEvent) 
{
	document.attachEvent('onclick', handleClicks);
}
else if (document.addEventListener) 
{
	document.addEventListener('click', handleClicks, false);
}
else 
{
	document.onclick = handleClicks;
}


window.onload = function() 
{
	(document.all && !window.print) ? null : setForm();
}