/*

by:      Gabriel Trisca 

email:   tog000@gmail.com

license: GNU/GPL v3





//This function starts the magic:

window.addEvent('domready', function() {

	$$('.selmoo').each(function(it,i){

		new Selmoo(it);

	});

	var visible=false;

});





//This is an example of how to add an item to the Select:

new Element('option').setHTML('THE BEAST').injectInside($('aaa'));

//Afterwards, we *must* refresh the select by calling the class again:

new Selmoo($('aaa'));



//This is the HTML code needed to trigger the script... the DIV wrapper is important

<div>

<select id="aaa" class="selmoo">

<option>AAAAA</option>

<option>BBBBB</option>

<option>CCCCC</option>

<option>DDDDD</option>

<option>EEEEE</option>

<option>FFFFF</option>

</select>

</div>





*/



var Selmoo = new Class({



	initialize: function(el){

		this.parent = el.getParent('div');

		this.old = $(el);

		visible=false;

		protected=false;

		agent = navigator.userAgent;



		//Hidding the old select

		el.setStyle('display','none');



		//So we can do more things, have to make it relative

		this.parent.setStyle('position','relative');



		if(this.parent.getChildren().length>1){

			this.parent.getChildren().each(function(it,i){

				if(it.className.indexOf("selmoo")==-1){

					//Deleting the Elements doesnt work.... why?

					it.setStyle('display','none');

				}

				

			});

		}



		this.text = new Element('div').addClass('select').setHTML(el.options[el.options.selectedIndex].text);



		this.text.addEvent('click',this.click.bind(this,[this.text]))

		

		this.uls = new Element('ul').addClass('select-list');

		for(j = 0; j < el.options.length; j++) {

			var item = new Element('li').setHTML(el.options[j].text);

			item.injectInside(this.uls);



			if(agent.indexOf("MSIE")>0){

				item.addEvent('mouseover',this.optionOver.bind(this,[item,j]))

				item.addEvent('mouseout',this.optionOut.bind(this,[item,j]))

			}





			item.addEvent('click',this.clickOption.bind(this, [item,j]))

		}

		this.text.injectInside(this.parent);

		this.uls.injectInside(this.parent);



		document.addEvent('click',this.documentClick);



		if(el.className.indexOf("up")!=-1){

			this.uls.setStyle('top','-'+((el.options.length*25)+0)+'px');

		}

	},



	click: function(el) {

			//Hide all others, just in case...

			$$('.select-list').each(function(it,i){it.setStyle('display','none')});

		if(visible){

			this.uls.setStyle('display','none');

			visible=false;

		}else{

			this.uls.setStyle('display','block');

			visible=true;

			protected=true;

		}

	},

	clickOption: function(el,j){

		this.text.setHTML(el.getText());

		this.uls.setStyle('display','none');

		this.old.selectedIndex=j

		if(visible && !protected){

			this.uls.setStyle('display','none');

			visible=false;

		}

	},

	



	optionOver: function (el,j){

		el.setStyle('backgroundColor','#666666')

	},



	optionOut: function (el,j){

		el.setStyle('backgroundColor','#555555')

	},



	documentClick: function(el){

		if(visible && !protected){

			$$('.select-list').each(function(it,i){it.setStyle('display','none')});

			//this.uls.setStyle('display','none');

			visible=false;

		}

		protected=false;

	}

});