var MooSelect = new Class({
		Implements: [Options,Events],
		timers:'',
		options: {
			classname: 'mooSelect',
			timertime: 400,
			useCheckboxes: true,
			msg: {
				laden: 'Bezig met laden...',
				noOption: 'kies een optie',
				singleOption: '1 optie geselecteerd',
				MultiOption: '%i opties geselecteerd',
				ongedaanMaken: 'Filter opheffen'
			}
		},

		initialize: function(el,options){
			this.setOptions(options);
			this.selectBox = $(el);

			if(null !== this.selectBox){
				this.createSelectDivs();
				this.createSelectList();
				this.selectBox.setStyle('display','none');
				this.updateSelectList();
			}
		},

		createSelectDivs: function(){

			this.selectDiv = new Element('div',{
				'class': this.options.classname
				,'events': {
					'mouseover': this.timer.stop.bind(this),
					'mouseout': this.timer.start.bind(this)
				}
			}).setStyles({
				display: 'none'
			}).inject(this.selectBox,'after');

			this.toggleDiv = new Element('div',{
				'class': this.options.classname+'-toggle'
				,'text':this.options.msg.laden
				,'events': {
					'mouseover': this.timer.stop.bind(this),
					'mouseout': this.timer.start.bind(this),
					'click': this.toggleSelectDiv.bind(this)
				}
			}).inject(this.selectBox,'after');
			this.setAmountSelected();
		},

		timer: {
			start: function(){
				this.timer.stop.bind(this);
				this.timers = setTimeout(function(){
					this.selectDiv.setStyle('display','none');
				}.bind(this),this.options.timertime);
			},

			stop: function(){
				clearTimeout(this.timers);
			}
		},

		toggleSelectDiv: function(el){
			this.selectDiv.setStyle('display',( ((this.selectDiv.getStyle('display') =='none')?'block':'none') ));
		},

		createSelectList: function(){
			this.selectList = new Element('ul',{
				'class': this.options.classname +'-list'
			});

			this.selectDiv.appendChild(this.selectList);
		},

		updateSelectList: function(){
			for(i=0; i<this.selectBox.length; i++) {

				var li = new Element('li',{
					'id': this.options.classname+'-opt-'+i
				});

				var chkBox = new Element('input',{
					'id': this.options.classname+'-opt-'+i+'-chk',
					'type': 'checkbox',
					'events': {
						'click': function(){ return false;}
					}
				}).inject(li);

				var label = new Element('label',{
					'for': this.options.classname+'-opt-'+i+'-chk',
					'html': this.selectBox[i].innerHTML
				}).inject(li);

				if(this.selectBox.options[i].selected){
					li.addClass('selected');
					if(this.options.useCheckboxes){ chkBox.checked = true;}
				}

				if((i+1) == this.selectBox.length){ li.addClass('lastchild');}

				this.selectList.appendChild(li);
				this.createLinkEvents(li);
			}

			new Element('p',{
				'html':this.options.msg.ongedaanMaken,
				'class': this.options.classname+'-ongedaanButton',
				'events':{
					'click': this.deselectALL.bind(this),
					'mouseover': function(){
						this.addClass('hover');
					},
					'mouseout': function(){
						this.removeClass('hover');
					}
				}
			}).inject(this.selectList,'before');
		},

		deselectALL: function(){
			this.resetSelected();

			for(i=0; i<this.selectBox.options.length; i++) {
				this.selectBox.options[i].selected = false;
			}
			this.setAmountSelected();
		},

		createLinkEvents: function(el){
			el.addEvents({
				mouseover: function(){
					this.addClass('hover');
				},
				mouseout: function(){
					this.removeClass('hover')
				},
				mousedown: this.listSelect.bind(this, el)
			});
		},

		listSelect: function(el) {

			if(!this.selectBox.multiple){
				this.resetSelected();
			}

			el.toggleClass('selected');
			var i = el.id.substring(el.id.lastIndexOf('-')+1).toInt();
			this.selectBox.options[i].selected = el.hasClass('selected');
			this.setAmountSelected();

			if(this.options.useCheckboxes){
				var chkBox = $(el.id+'-chk');
				if(null !== chkBox){
					chkBox.checked = el.hasClass('selected');
					chkBox.fireEvent('change');
				}
			}

			el.fireEvent('change');
		},

		setAmountSelected: function(){

			var amount = this.getAmountSelected();
			var tekst = '';

			switch(amount){
				case 0:  tekst = this.options.msg.noOption.replace('%t',this.selectBox.get('title')); break;
				case 1:  tekst = this.options.msg.singleOption.replace('%t',this.selectBox.get('title')); break;
				default: tekst = this.options.msg.MultiOption.replace('%i',amount).replace('%t',this.selectBox.get('title')); break;
			}

			this.toggleDiv.set('text',tekst);
		},

		getAmountSelected: function(){
			var c = 0;
			for(i=0; i<this.selectBox.options.length; i++) {
				if(this.selectBox.options[i].selected){
					c = c+1;
				}
			}
			return c;
		},

		resetSelected: function(){
			for(i=0; i<this.selectList.childNodes.length; i++) {
				this.selectList.childNodes[i].removeClass('selected');

				if(this.options.useCheckboxes){
					var box = this.selectList.childNodes[i].getElement('input');
					box.checked = false;
				}
			}
		}
	});