SelectBox = new Class({

	Implements:[Options, Events],
	options:{
	
		'class':'selectBox'
		
	},
	
	initialize: function(options) {
		this.setOptions(options);
		this.selects = document.getElements('select.'+this.options["class"]);
		
		this.selects.each((function(s) {
			
			var width = s.getSize().x.toInt();
			
			var box = new Element('div', {
				'class':'selectBox '+(s.get('class')),
				'styles': {
					'width':width
				}
			});
			
			
			var label = new Element('a', {'href':'#','text':s.getSelected()[0].text}).inject(box);
			
			var arr = new Element('a',{'href':'#','class':'arrow'}).inject(label,'after');

			
			var optionsBox = new Element('ul',{'class':'select_option_box'}).inject(box);
			
			s.getElements('option').each(function(opt,index) {
				
				var li = new Element ('li', {});
				li.inject(optionsBox);
				
				new Element('a', {
					'href':'#',
					'name':opt.get('value'),
					'text':opt.get('text'),
					'class':((opt.get('value') == s.getSelected()[0].value) ? 'selected' : '')+((index==s.length-1) ? ' last' : '')
				}).inject(li);
				
				
			});
			
			box.store('select_input',s);
			
			s.set('styles',{'position':'absolute','top':-100000,'left':-100000})
			box.inject(s,'after');
			
			this.attachEvents.bind(box).run();
			
			this.close.bind(box).run();
			
		}).bind(this));

		
	},
	
	close:function() {
		this.getFirst('ul').addClass('close');
	},
	open:function() {
		this.getFirst('ul').removeClass('close');
	},
	attachEvents:function() {
		
		var box = this;
		var select_input = box.retrieve('select_input');
		var boxLabel = this.getFirst('a');
		var boxArrow = this.getFirst('a.arrow');
		
		var optionsBox = this.getFirst('ul');
		var opts = this.getElements('li>a');
		
		
		
		$$(boxLabel, boxArrow).set('events', {
			'click':function(e) {
				optionsBox.toggleClass('close');
				e.preventDefault();
				return false;
			}
		})
		
		//boxArrow.
		
		optionsBox.addEvent('outerClick', function() {
			if (!optionsBox.hasClass('close')) optionsBox.addClass('close');
		});
		
		opts.set('events', {
				 
			'click': function() {
				opts.removeClass('selected');
				this.addClass('selected')
				select_input.set('value', this.get('name'))
				boxLabel.set('text', this.get('text'));
				optionsBox.addClass('close');
				
				
				return false;
			}
		
		});
	}
		
	
	

});