/*
SimpleSelectStyle v.1.2
Simple select tag styling; cosmetic only.
 
Author: Ben Stilson
 
Required:
- CSS class for styling the alternate "select" span / select tags
- option select_class must be defined with CSS class name
- specify a select width, either in the CSS class or directly to the select tag
- use only with single line selects (size=1/default)
 
Optional:
- to use with all selects in an entire form, provide the form id for the option form_id
- left_padding is used to add left padding (indent) before the text in the span element, defaults to 3px
 
*/
var SimpleSelectStyle = new Class(
{
		Implements: Options,
	 
		options :
		{   
				select_class : '',
				select_class_left : '',
				form_id : '',
				left_padding : 3,
				right_padding : 20
		},
	 
		initialize: function(options)
		{
				this.setOptions(options);
				if ($chk(this.options.select_class))
				{          
						this.selects = $chk($(this.options.form_id)) ? $(this.options.form_id).getElements('select') : $$('select.'+this.options.select_class) ;
						this.selects.each(this.style_selects.bind(this));
				}
		},
	 
		style_selects : function(select_el)
		{      
				//select_el.setAttribute('width', select_el.getSize().x + 20); //+ this.options.left_padding + this.options.right_padding);
				var select_el_width = select_el.getSize().x;
				var select_el_height = select_el.getSize().y;   
				var value = select_el.getFirst().get('value');     
				var text = select_el.getFirst().get('text');
	 
				select_el.getElements('option').each(function(o){ if(o.selected == true){ value = o.get('value'); text = o.get('text'); } });

				var span = new Element('ul',{'class':this.options.select_class}).inject(select_el,'before').setStyles({'width':select_el_width - this.options.left_padding + this.options.right_padding,'position':'relative','display':'inline-block', 'z-index' : 0});
				var liLeft = new Element('li',{'class':this.options.select_class_left}).set('text','').inject(span, 'top');
				var liRight = new Element('li',{'class':this.options.select_class}).set('text',text).inject(span).setStyles({'width': span.getSize().x - liLeft.getSize().x - this.options.left_padding,'padding-left':this.options.left_padding});
			 
				select_el.addClass(
					this.options.select_class).setProperty('size',1).setStyles({	
							'top': -10,
							'margin-bottom':-10,
							'width':select_el_width + span.getStyle('border-left-width').toInt() + span.getStyle('border-right-width').toInt(),
							'height':span.getSize().y,
							'opacity':.01,
							'display':'inline-block',
							'position':'relative',
							'margin-left':-(select_el_width - this.options.left_padding + this.options.right_padding)
						}).addEvent('change',function(){
								liRight.set('text',this.options[this.options.selectedIndex].get('text'));
							}); 
				
				select_el.addEvent('mouseover',function(){
					span.addClass('over');
				});
				
				select_el.addEvent('mouseleave',function(){
					span.removeClass('over');
				});	
				
				select_el.setStyles({
					'width':select_el_width - this.options.left_padding + this.options.right_padding
					
				});
							
		}
				
				
});