/*
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 : '',
        form_id : '',
        left_padding : 3
    },
   
    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','position':'relative','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'));});
    }   
});