/*
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)  {
//      if ( ! options.element.getFirst() )
//        return;
      this.options.select_class = options.select_class;
      this.options.form_id      = options.form_id;
      this.element              = options.element;
      this.style_selects(this.element);
      //this.element.bind(this);
    },
   
    style_selects : function(select_el) {      
        select_el.addClass(this.options.select_class);
        var select_el_width = select_el.getSize().size.x;   
        var value = select_el.getFirst() ? select_el.getFirst().getProperty('value') : 0;     
        var text  = select_el.getFirst() ? select_el.getFirst().getText()            : '';
   
        select_el.getElements('option').each( function(o) { 
          if(o.selected == true) { 
            value = o.getProperty('value'); 
            text = o.getText(); 
          } 
        });
      
        var w385Class = select_el.hasClass('w385') ? 'w385 ' : ' '; 
        var w333Class = select_el.hasClass('w333') ? 'w333 ' : ' '; 
        var span = new Element('span', {
          'class': this.options.select_class + ' forSelect ' + w385Class + w333Class
        })
        .setStyles({
          'width':        select_el_width + 1 // - this.options.left_padding + 5
          //'display':      'inline-block',
          //'position':     'relative',
          //'padding-left': this.options.left_padding
        });

        var spanLeft = new Element('span', {
          'class': 'selectLeft'
        });
        spanLeft.setText(text);
        spanLeft.setStyles({
          'width': select_el_width ? (select_el_width - 23) : 0, // 3 padding i 20 szerokosc guzika
          'padding-left': this.options.left_padding
        });


        span.inject(select_el, 'before');
        spanLeft.inject(span);
        select_el.inject(span);
       
        select_el.setProperty('size',1)
        .setStyles({
          //'width':        select_el_width + span.getStyle('border-left-width').toInt() + span.getStyle('border-right-width').toInt(),
          //'margin-left':  -(select_el_width + span.getStyle('border-left-width').toInt() + span.getStyle('border-right-width').toInt()),
          //'position':     'relative',
          'position':     'absolute',
          'opacity':      .01,
          'display':      'inline-block',
          'margin-left':  '0',
          'left':         '0',
          'top':          '-1px'
        })
        .addEvent('change',function() {
          spanLeft.setText(this.options[this.options.selectedIndex].getText());
        });
    }   
});