MultiSelect = new Class({
	Implements: [Options,Events],
	options: {
		hideDelay: 500,
		empty: '« Select »'
	},
	initialize: function(element, options){
		element = $(element);
		this.setOptions(options);
		this.attach(element);
	},
	attach: function(element){
		var options = new Element('div',{
			'style':'display:none;',
			'class':'options',
			'events':{
				'mouseenter':function(){
					this.timer = $clear(this.timer);
				}.bind(this),
				'mouseleave':function(){
					this.timer = function(){options.setStyle('display','none')}.delay(this.options.hideDelay);
				}.bind(this)
			}
		});

		element.getChildren('option').each(function(option){
			var label = new Element('label',{
				'style':'display:block',
				'for':element.get('id')+'-'+option.get('value'),
				'html':option.get('html'),
				events:{
					'mouseenter':function(){
						label.addClass('hover');
					},
					'mouseleave':function(){
						label.removeClass('hover');
					}
				}
			}).inject(options);

			var input = new Element('input',{
				type:'checkbox',
				'id':label.get('for'),
				'name':element.get('name'),
				'value':option.get('value'),
				'events':{
					'change':function(event){
						label.toggleClass('selected');
						this.fireEvent('change',event);
					}.bind(this)
				}
			});
			input.checked = option.selected;
			input.inject(label,'top');
		}.bind(this));

		var div = new Element('div',{
			html:this.options.empty,
			'class':'multiselect',
			events:{
				'mouseenter':function(){
					this.timer = $clear(this.timer);
				}.bind(this),
				'mouseleave':function(){
					this.timer = function(){options.setStyle('display','none')}.delay(this.options.hideDelay);
				}.bind(this),
				'click':function(){
					if (options.getStyle('display') == 'block'){
						options.setStyle('display','none');
					}
					else{
						options.setStyle('display','block');
					}
				}.bind(this)
			}
		});

		div.inject(element,'after');
		options.inject(div,'after');
		element.destroy();
	},
	change: function(event){

	}
});