function replaceSelect(obj){
	// hide original select
	$(obj).hide();
	// loop through all options
	var opts = obj.options;
	var selectedOpt = 0;
	for (var i=0; i<opts.length; i++) {
		if (opts[i].selected) {
			selectedOpt = i;
			break;
		}
	}
	Event.observe(document.body, 'click', function(event) {   
		var element = Event.element(event);   
		if (!element.up('div.replacedSelect')) $$('div.customSelect').each(function(s){s.hide()});
	}); 
	// create new replaced elements
	var div = new Element('div',{'class': 'replacedSelect'});
	div.className = 'replacedSelect';
	var span = new Element('span');
	span.onclick = function(){
		$(this).next('div.customSelect').show();
	}
	var dropdown = new Element('div',{'class': 'customSelect','style': 'display:none'});
	dropdown.className = 'customSelect';
	var ul = new Element('ul');
	
	// create dropdown list
	for (var i=0; i<opts.length; i++) {
		//create Li
		var li = new Element('li');
		// write content in li
		li.insert(opts[i].text);
		// save index in var on li object
		li.selIndex = i;
		// create actions
		li.onclick = function() {
			selectItem(this);
		}
		li.onmouseover = function() {
			$(this).addClassName('hover');
		}
		li.onmouseout = function() {
			$(this).removeClassName('hover');
		}
		// make current item selected
		if (i == selectedOpt) {
			li.addClassName('selected');
			span.insert(opts[i].text);
		}
		// append to the ul
		ul.insert(li);
	}
	// create needed html structure
	dropdown.insert(ul);
	div.insert(span);
	div.insert(dropdown);
	// write to page
	obj.up().insert(div);
}
function selectItem(el){
	var li = $(el);
	var allLi = $(el).up('ul').childElements();
	var div = li.up('div.replacedSelect');
	var myselect = div.previous('select');
	// remove selecte highlight
	allLi.each(function(s){s.removeClassName('selected')});
	//set selecte highlight
	li.addClassName('selected');
	//write selected item in fake box
	div.down('span').innerHTML = el.innerHTML;
	// change value of original select
	myselect.selectedIndex = el.selIndex;
	// manualy call the onchange 
	if(myselect.onchange) myselect.onchange();
	// hide dropdown
	li.up('div.customSelect').hide();
}
function setForm() {
	$$('select.customSelect').each(
		function(s){
			replaceSelect(s);
		}
	)
}
/*
document.observe("dom:loaded", function() { 
	  // initially hide all containers for tab content 
	(document.all && !window.print) ? null : setForm();
	
});*/