var SelectReplacement = new Class( {
		
		options: {},
		
		initialize: function ( select, options ) {
			this.setOptions( options );
			var width = select.getSize().size.x;
			select.setStyle( 'visibility', 'hidden' );
			
			this.field = new Element( 'input' ).setProperty( 'type', 'hidden' ).addClass( select.className ).addClass( 'SelectReplacementField' ).setProperty( 'name', select.getProperty( 'name' ) ).setStyle( 'display', 'none' ).injectAfter( select );
			this.element = new Element( 'div' ).addClass( select.className ).addClass( 'SelectReplacement' ).injectAfter( this.field );
			this.text = new Element( 'div' ).addClass( 'SelectReplacementText' ).injectInside( this.element ).addEvent( 'click', this.toggle.bind( this ) );
			this.button = new Element( 'div' ).addClass( 'SelectReplacementButton' ).injectInside( this.element ).addEvent( 'click', this.toggle.bind( this ) );
			this.list = new Element( 'div' ).addClass( 'SelectReplacementList' ).injectInside( this.element );
			this.listContent = new Element( 'div' ).addClass( 'SelectReplacementListContent' ).injectInside( this.list );
			
			this.index = 0;
			this.field.selectIndex = 0;
			
			for( i=0; i<select.options.length; i++ ) {
				var opt = select.options[i];
				new Element( 'a' ).setProperty( 'href', '#' ).addClass( 'SelectReplacementListItem' ).addClass( select.options[i].className ).setHTML( opt.innerHTML ).injectInside( this.listContent ).addEvent( 'click', this.select.bindAsEventListener( this, [opt.innerHTML,opt.value,i] ) );
				if( i==0 || opt.selected == true ) {
					this.index = i;
					this.field.selectedIndex = i;
					this.field.value = opt.value;
					this.text.setHTML( opt.innerHTML );
				}
			};
			
			select.parentNode.removeChild( select );
		},
		
		hide: function () {
			this.list.setStyle( 'display', 'none' );
		},
		
		show: function () {
			this.list.setStyle( 'display', 'block' );
		},
		
		toggle: function () {
			if( this.list.getStyle( 'display' ) == 'block' )
				this.hide();
			else
				this.show();
		},
		
		select: function ( event, text, value, index ) {
			var event = new Event( event );
			event.stop();
			if( !event.target.hasClass( 'nonselectable' ) ) {
				this.list.setStyle( 'display', 'none' );
				this.text.setHTML( text );
				this.field.value = value;
				this.index = index;
				this.field.selectedIndex = index;
				this.fireEvent( 'onChange', event );
			}
		}

} );

SelectReplacement.implement( new Options, new Events );

var SelectReplacementFactory = new Class( {
		
		initialize: function () {
			this.selects = new Array();
			document.body.addEvent( 'click', this.hide.bindAsEventListener( this ) );
			$ES( 'select' ).each( function ( obj ) {
					var options = {};
					if( obj.onchange )
						options['onChange'] = obj.onchange;
					this.selects.push( new SelectReplacement( obj, options ) );
			}.bind( this ) )
		},
		
		hide: function ( event ) {
			var event = new Event( event );
			this.selects.each( function ( obj ) {
					var doHide = true;
					for( var i=0; i<obj.listContent.childNodes.length; i++ ) {
						if( obj.listContent.childNodes[i] == event.target )
							doHide = false;
					}
					if( obj.button == event.target || obj.text == event.target )
							doHide = false;
					if( doHide )
						obj.hide();
			} );
		}
		
} );

window.addEvent( 'domready', function () {
		//new SelectReplacementFactory();
} );