/**
 * rf.styleSelects v.0.1
 * Simple select tag styling; cosmetic only, very superficial - cannot add rounded corners to the bottom of the drop-down list.
 * ADVANTAGE: Leaves the browser-native select almost totally intact, providing the experience the user expects.
 * Styles all <select class="rfselect"> elements on the page when invoked.
 * 
 * @author: Dennis Hall
 * 
 * @requirements:
 * - jQuery
 * - specify a select width, either in the CSS class or directly to the select tag
 * - use only with single line selects (size=1/default)
 * 
 * @options:
 * 
 **/
var rf = window.rf || {}; //in case rf is not yet defined.
rf.styleSelects = function(ss){
    
    var $ = jQuery, //in case jQuery.noConflict() was called.
        options = {
            paddingLeft : 3
            ,paddingRight : 22
            ,borderLeftWidth : 1
            ,borderRightWidth : 1
        };
    /// var block

    if($.browser.msie && parseInt($.browser.version) < 7){
        return; //ie6 is not supported.
    }
    
    //console.log(ss);
    if(typeof ss == 'string'){
        ss = $(ss);
    }
    ss.each(function(){

        var selectElement = $(this),
            selectDOMElement = this;
        /// end var block
        
        // we assume that if the width is 0, then the select is hidden,
        // and we should not attempt to style it right now, as our attempts will fail.
        if(!selectElement.width() || selectElement.parent().hasClass('rfselect-container')) return;
        
        // was using $('<span class="..." stuff...>'+innerHTML+'</span>')
        // ...produced js error = Node cannot be inserted at this point in the hierarchy.
        var span = document.createElement('span'),
            wrapperSpan = span.cloneNode(true);
        document.body.appendChild(span);
        //document.body.appendChild(wrapperSpan);
        selectDOMElement.parentNode.insertBefore(wrapperSpan,selectDOMElement);
        
        wrapperSpan.appendChild(span);
        wrapperSpan.appendChild(selectDOMElement);
        
        wrapperSpan.className = 'rfselect-container';
        
        span = $(span).css({
                'width': selectElement.width() - options.paddingLeft - options.paddingRight + 1 + ($.browser.safari ? -3 : 0)
                //,'display': 'block'
                //,'float': 'left'
                //,'position': 'relative'
                //,'height': selectElement.height() -2
            })
            .addClass('rfselect-skin');
        //
        
        selectElement
            .attr('size', 1)
            .css({
                //'width': selectElement.width()
              //changed by tschwartz 8-31-09  BUG 2342 from 'opacity': .01
                'opacity': 1.0
                         //,'display': 'inline-block'
                ,'position': 'absolute'
                ,'left':'0'
                //,'margin-left': -(selectElement.width() + options.paddingLeft + options.paddingRight + options.borderLeftWidth + options.borderRightWidth - 2) //minuse 2 because we assume the select has border-left and right of 1px
                //,'margin-left': -(selectElement.width() + options.paddingLeft + 2)
                //,'top': ($.browser.safari ? 0 : -5)
                //,'top': 1
                //,'filter':'alpha(opacity=1)'
            })
            .change(function(){
            	//line below was causing a JS error
            	//   span.html(this.options[this.options.selectedIndex].innerHTML+'<span></span>');
            })
            //.before(wrapperSpan)
            .change()
            .focus( function(){ span.addClass('rfselect-focus'); } )
            .blur( function(){ span.removeClass('rfselect-focus'); } )
            .keyup( function(){$(this).change();} );
        //
        
        //if($.browser.msie && parseInt($.browser.version) == 6){
            //var iframe  = $('<iframe id="menu4iframe" src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0" style="position:absolute; left:0; top:0px; display:block; filter:alpha(opacity=0);" ></iframe>');
            //span.append(iframe);
        //}
    });

};
jQuery(function(){rf.styleSelects('select.rfselect');}); //call the function on domready.