/*
SimpleSelectStyle v.1.2
Simple select tag styling; cosmetic only.
 
Author: Ben Stilson
 
Required:
- CSS class for styling the alternate "select" span / select tags
- select_class option 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, defaults to 3px
 
*/
var SimpleSelectStyle = new Class(
{
	Implements: Options,
	
	options : 
	{	
		select_class : '',
		form_id : '',
		left_padding : 10
	},
	
	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)
	{		
		var select_el_width = select_el.getSize().x;  	
		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('span',{'class':this.options.select_class}).set('text',text).inject(select_el,'before').setStyles({'width':select_el_width - this.options.left_padding,'display':'inline-block','padding-left':this.options.left_padding});
		
		select_el.addClass(this.options.select_class).setProperty('size',1).setStyles({'width':select_el_width + span.getStyle('border-left-width').toInt() + span.getStyle('border-right-width').toInt(),'opacity':.01,'display':'inline-block','position':'relative','margin-left':-(select_el_width + span.getStyle('border-left-width').toInt() + span.getStyle('border-right-width').toInt())}).addEvent('change',function(){span.set('text',this.options[this.options.selectedIndex].get('text'));});
	}	
});

var SimpleSelectStyle2 = new Class(
{
	Implements: Options,
	
	options : 
	{	
		select_class : '',
		form_id : '',
		left_padding : 10
		
	},
	
	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)
	{		
		var select_el_width = select_el.getSize().x;  	
		var value = select_el.getFirst().get('value');		
		var text = select_el.getFirst().get('text');
		
		//(this.options.left_padding*-1)
		
		select_el_width = 225-10;
	
		select_el.getElements('option').each(function(o){ if(o.selected == true){ value = o.get('value'); text = o.get('text'); } });
		
		var span = new Element('span',{'class':this.options.select_class}).set('text',text).inject(select_el,'before').setStyles({'width':select_el_width,'display':'inline-block','padding-left':this.options.left_padding});
		
		select_el.addClass(this.options.select_class).setProperty('size',1).setStyles({'width':select_el_width + span.getStyle('border-left-width').toInt() + span.getStyle('border-right-width').toInt(),'opacity':.01,'display':'inline-block','position':'relative','margin-left':-(select_el_width + span.getStyle('border-left-width').toInt() + span.getStyle('border-right-width').toInt())}).addEvent('change',function(){span.set('text',this.options[this.options.selectedIndex].get('text'));});
	}	
});