/* CREDITS
 * ----------------------------------------------------------
 * Title:        niceSelect.js
 * Author:        David Candreva <david@inventis.be>
 * Date:        13/10/09
 * Last Edit:    13/10/09 David Candreva <david@inventis.be>
 * ----------------------------------------------------------
 * TODO
 * - TAB support
 * - IE6 fix for opacity.. no fix found yet
 * - Code cleaning
 */

var niceSelect = new Class({

    Implements: Options,
   
    options: {  
        select_class : '',
        form_id : ''
    },
   
    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.replace.bind(this));
        }
    },
   
    replace: function(select_el){
       
        var selectWidth = select_el.getSize().x.toInt() + select_el.getStyle('paddingLeft').toInt() + select_el.getStyle('paddingRight').toInt();
        var spanWidth = select_el.getSize().x.toInt();
        var value        = select_el.getFirst().get('value');    
        var text        = select_el.getFirst().get('text');
       
        var height        = (select_el.getStyle('paddingTop').toInt() + select_el.getStyle('paddingBottom').toInt() + select_el.getSize().y);
        var borderTopBottom = (select_el.getStyle('borderTop').toInt() + select_el.getStyle('borderBottom').toInt());
       
        var spanHeight    = ( select_el.getSize().y - borderTopBottom);
       
        select_el.getElements('option').each(function(o){ if(o.selected == true){ value = o.get('value'); text = o.get('text'); } });
       
        // Create The Span
        var span = new Element('span', {'class': this.options.select_class})
            .set('text', text)
            .inject(select_el, 'before')
            .setStyles({
                          'width' :spanWidth,
                        'display': 'inline-block',
                        'position': 'relative',
                        'height': spanHeight
                    });
       
       
        select_el.addClass(this.options.select_class).setProperty('size',1)
        .setStyles({
                       'top': -borderTopBottom - 1,
                       'height' : height,
                    'width':selectWidth,
                    'padding': 0,
                    'display':'inline-block',
                    'position':'relative',
                    'margin-left':-(selectWidth + span.getStyle('border-left-width').toInt() + span.getStyle('border-right-width').toInt())
                    })
        .setOpacity(0.01)
        .addEvents({
           'change': function(){
                span.set('text',this.options[this.options.selectedIndex].get('text'));
            },
            'mouseenter': function(){
                span.addClass('hover');
            },
            'mouseleave': function(){
                span.removeClass('hover');
            }
         });
    }  
});