function form2ReplaceElement(element) 
{		
	// hide the element
	element.addClass('outtaHere');
	var niceElement = null;
	
	// if the element is a checkbox
	if (element.match('input[type=checkbox]')) {
		
		// create the nice element
		niceElement = new Element('div', {'class': 'checkboxArea'});

		// append the onclick event to the nice element
		niceElement.addEvent('click', function(element, niceElement){element.click();}.bind(null, [element, niceElement]));

		// append the onclick event to the real element
		element.addEvent('click', function(element, niceElement){
			if (element.checked) niceElement.addClass('checkboxAreaChecked');
			else niceElement.removeClass('checkboxAreaChecked');				
		}.bind(null, [element, niceElement]));
	}
	
	// if the element is a select
	else if(element.match('select')) {

		// create the nice element
		niceElement = new Element('div', {'class': 'selectArea', 'style': 'width: ' + element.offsetWidth + 'px; ' + element.get('style')});		
		
		var selectedText = element.options[element.selectedIndex].text;
		
		// append additional tags
		niceElement.adopt(
			new Element('span', {'class': 'left'}),
			new Element('span', {'class': 'disabled hidden'}),
			new Element('span', {'class': 'center'}).appendText(selectedText),
			new Element('a',    {'class': 'selectButton', 'href': 'javascript:void(0)', 'events': {
				// click on a nice select button
		        "click": function(element, niceElement) {
		        	// the popup is already opened
		        	if (niceElement.getChildren().length > 4) {
		        		niceElement.getChildren()[4].destroy();
		        		return;
		        	}
		        	// creates the popup with options
		            var optionsElement = new Element('div', {'class': 'optionsDivVisible', 'style': 'width: ' + element.offsetWidth + 'px'});
		            var ulElement = new Element('ul');
					for (var i = 0; i < element.options.length; i ++) 
					{
						var option = element.options[i];
		            	ulElement.adopt(new Element('li').adopt(new Element('a', {'href': 'javascript:void(0)', 'events': {
							// click on a nice option
							"click": function(element, niceElement, optionsElement, option){
								// destroy the popup
								optionsElement.destroy();
								// sets the value in the real element
								element.value = option.value;
								// fire onChange event, in a way or another
								if(element.onchange) element.onchange();
								element.fireEvent('change');
								// update the text in the nice element
								if (niceElement.getChildren().length > 2) {
									niceElement.getChildren()[2].empty();
									niceElement.getChildren()[2].appendText(option.text);
								}
							}.bind(null, [element, niceElement, optionsElement, option])
		            	}}).appendText(option.text)));
		            }
		            optionsElement.adopt(ulElement);
		            niceElement.adopt(optionsElement);
		        }.bind(null, [element, niceElement])
    		}})
		);
	}

	// inject the nice element before the real element
	if(niceElement) niceElement.inject(element, 'before');		
}
window.addEvent('domready', function(){$$('.form2').each(form2ReplaceElement)});	

function form2ShowOptions(index) {
	alert(index);
}