(function($){
	//faux select class
	this.FauxSelect = new Class({

		Implements: [Options,Events],

		options: {
			cssPrefix: 'FS-',
			triggerText: 'Vorwahl'
		},

		initialize: function(elements,options) {
			//set options
			this.setOptions(options);
			//set elements
			this.elements = $$(elements);
			//apply to default elements
			this.elements.each(function(el){
				this.apply(el);
			},this);
		},

		//applies the Faux look to every desired element
		apply: function(element) {
			//settings and shortcut vars
			var c = this.options.cssPrefix;
			
			//create the replacement DIV container
			var container = new Element('div',{
				id: c + 'Container'
			}).replaces(element);
			
			//create a hidden input with the same name to store the value
			var input = new Element('input',{
				value: '',
				type: 'hidden',
				name: element.get('name')
			}).inject(container);
			
			//provide the "trigger"
			var trigger = new Element('span',{
				text: this.options.triggerText,
				id: c + 'Trigger'
			}).inject(container);
			
			//provide the list
			var list = new Element('ul',{
				id: c + 'Selector'
			}).inject(container);
			
			//inject the options into the list
			element.getElements('option').each(function(option){
				if (option.get('value')!='') {
					var li = new Element('li',{
						text: option.get('text'),
						'class': (option.selected ? 'Selected' : '')
					}).inject(list);
					li.store('value',option.get('value'));
					if(option.selected) { 
						input.value = option.value; 
						trigger.set('text',option.get('text'));
					}
				}
			});
			
			//create the replacement elements
			var FSHideLayer = new Element('div', {
			    'id': c + 'HideLayer',
			    'html': ' ',
				'events': {
			        'click': function(){
						$$(this,list).removeClass('Visible');
			        }
			    }
			});
			var nwShadow = new Element('div', {'id': c + 'NW', 'class': 'Shadow', 'html': ' '});
			var nShadow = new Element('div', {'id': c + 'N', 'class': 'Shadow', 'html': ' '});
			var neShadow = new Element('div', {'id': c + 'NE', 'class': 'Shadow', 'html': ' '});
			var eShadow = new Element('div', {'id': c + 'E', 'class': 'Shadow', 'html': ' '});
			var seShadow = new Element('div', {'id': c + 'SE', 'class': 'Shadow', 'html': ' '});
			var sShadow = new Element('div', {'id': c + 'S', 'class': 'Shadow', 'html': ' '});
			var swShadow = new Element('div', {'id': c + 'SW', 'class': 'Shadow', 'html': ' '});
			var wShadow = new Element('div', {'id': c + 'W', 'class': 'Shadow', 'html': ' '});
			var ShadowParts = new Array(nwShadow, nShadow, neShadow, eShadow, seShadow, sShadow, swShadow, wShadow);
			
			//Inject the created elements
			FSHideLayer.inject(container, 'after');
			ShadowParts.each(function(el){
				el.inject(list, 'top');
			});

			//The "trigger" and "hide" events
			trigger.addEvent('click', function(){
				$$(FSHideLayer,list).addClass('Visible');
			});

			//What to do when each link is clicked
			var listItems = list.getElements('li');
			listItems.each(function(FSLink){
				FSLink.addEvent('click', function(event){
				    event.stop(); //Prevents the browser from following the link.
					listItems.removeClass('Selected');
					this.addClass('Selected');
					var FSLinkId = this.getProperty('id');
					$$(FSHideLayer,list).removeClass('Visible');
					//This is where you do something with the returned ID for the selected item...
					input.value = FSLink.retrieve('value');
					trigger.set('text',this.getProperty('text'));
				});
			});
		}
		
	});
	
	//usage
	window.addEvent('domready',function(){
		var FS = new FauxSelect('.faux');
	});
})(document.id);