Event.observe(window,'load',function(){
	$$('select.styledSelect').each(function(e){initStyledSelect(e);});
});
function initStyledSelect(e){
	var cont = new Element('div',{'class':'styledSelect'});
	var txt = new Element('input',{'type':'text','value':'Please Select'});
	var opts = new Element('div',{'class':'options'});
	var btn = new Element('img',{'class':'btn','src':e.readAttribute('btn')});
	e.wrap(cont);
	e.hide();
	cont.insert({top:btn});
	cont.setStyle({'position':'relative'});
	txt.setStyle({'cursor':'pointer'});
	txt.writeAttribute('readonly','readonly');
	btn.setStyle({'cursor':'pointer'});
	opts.setStyle({'position':'absolute'});
	var sel = e.options[e.selectedIndex];
	txt.value = sel.text;
	sel.selected = true;
						
						
	$A(e.options).each(function(o,i){
		var s = new Element('a',{'href':'#','value':i,'class':'option'}).update(o.text);
		if (o.selected) s.addClassName('selected');
		s.observe('click',function(ev){
			txt.value = s.innerHTML;
			e.options[s.readAttribute('value')].selected = true;
			window.location="/getinvolved/"+txt.value+"/";
			opts.select('.selected').invoke('removeClassName','selected');
			s.addClassName('selected');
			opts.hide();
			txt.focus();
			ev.stop();
		});
		s.observe('focus',function(){
			txt.focus();
		});
		s.observe('blur',function(){
			txt.focus();
		});
		s.observe('mouseover',function(){
			s.addClassName('hover');
		});
		s.observe('mouseout',function(){
			s.removeClassName('hover');
		});
		opts.insert({bottom:s});
	});
	cont.observe('keyup',function(ev){
		var keycode;
		var stopEvent = false;
		if (window.event) keycode = window.event.keyCode;
		else if (ev) keycode = ev.which;
		switch (keycode) {
			case 9:
				//tab
				opts.setStyle({'display':'none'});
				break;
			case 27:
				//esc
				opts.setStyle({'display':'none'});
				txt.focus();
				stopEvent = true;
				break;
			case 13:
			case 32:
				//enter, space
				if ( 'none' == opts.getStyle('display') ){
					opts.show();
					opts.select('a').first().focus();
				} else {
					opts.hide();
					txt.focus();
				}
				stopEvent = true;
				break;
			case 38:
				//up arrow
				if ( (slctd = opts.select('a.selected')).length > 0 ){
					if (nxt = ( slctd.first().previous('a.option') 
									|| opts.select('a.option').last() ) ){
						txt.value = nxt.innerHTML;
						e.options[nxt.readAttribute('value')].selected = true;
						opts.select('.selected').invoke('removeClassName','selected');
						nxt.addClassName('selected');
					}
				} else {	
					o = opts.select('a').last();
					txt.value = o.innerHTML;
					e.options[o.readAttribute('value')].selected = true;
					o.addClassName('selected');
				}
				txt.focus();
				stopEvent = true;
				break;
			case 40:
				//down arrow
				if ( (slctd = opts.select('a.selected')).length > 0 ){
					if (nxt = ( slctd.first().next('a.option') 
									|| opts.select('a.option').first() ) ){
						txt.value = nxt.innerHTML;
						e.options[nxt.readAttribute('value')].selected = true;
						opts.select('.selected').invoke('removeClassName','selected');
						nxt.addClassName('selected');
					}
				} else {	
					o = opts.select('a').first();
					txt.value = o.innerHTML;
					e.options[o.readAttribute('value')].selected = true;
					o.addClassName('selected');
				}
				txt.focus();
				stopEvent = true;
				break;
		}
		if(stopEvent) ev.stop();
	});
	cont.observe('keydown',function(ev){ 
		var keycode;
		var stopEvent = false;
		if (window.event) keycode = window.event.keyCode;
		else if (e) keycode = e.which;
		switch(keycode) { 
			case 9:
				//tab
				opts.hide();
				break;
			case 13:
			case 32:
			case 38:
			case 40:
				//enter, space, up, down
				stopEvent = true;
		}
		if(stopEvent) ev.stop();
	});
	btn.observe('click',function(){('block' == opts.getStyle('display'))?opts.setStyle({'display':'none'}):opts.setStyle({'display':'block'});});
	txt.observe('click',function(){('block' == opts.getStyle('display'))?opts.setStyle({'display':'none'}):opts.setStyle({'display':'block'});});
	document.observe('click',function(ev){
		if($(Event.element(ev)).up('div.styledSelect') != cont) opts.setStyle({'display':'none'});
	});
	cont.insert({bottom:txt}).insert({top:opts});
	opts.hide();
	
}