/*

CUSTOM FORM ELEMENTS

Originally Created by Ryan Fait
www.ryanfait.com

Re-written for jQuery by Brian Litzinger
www.brianlitzinger.com

Usage:

if($.browser.msie && $.browser.version < 7) {
} else {
    // We have a decent browser, so do this stuff
    $('ul.fields :radio, ul.fields :checkbox, select').customFormElements({
        checkboxHeight: "14",
        radioHeight: "14",
        radioWrapClass: 'radio_wrap',
        checkboxWrapClass: 'checkbox_wrap',
        selectWrapClass: 'select_wrap'
    });
}

*/

jQuery.fn.customFormElements = function(options) 
{
    var settings = {
        checkboxHeight: 20,
        radioHeight: 20,
        radioClass: 'radio',
        checkboxClass: 'checkbox',
        selectClass: 'select',
        radioWrapClass: false,
        checkboxWrapClass: false,
        selectWrapClass: false
    }
    
    if(options) {
        jQuery.extend(settings, options);
    };

    var actions = {
        
        pushed: function(span, type) 
        {    
            input = span.next('input');
            if( input.is(':checked') && type == 'checkbox' ) 
            {
                span.css('background-position', "0 -" + (settings.checkboxHeight*3) + "px");
            } 
            else if( input.is(':checked') && type == 'radio' ) 
            {
                span.css('background-position', "0 -" + (settings.radioHeight*3) + "px");
            }
            else if( ! input.is(':checked') && type == 'checkbox' )
            {
                span.css('background-position', "0 -" + (settings.checkboxHeight) + "px");
            } 
            else
            {
                span.css('background-position', "0 -" + (settings.radioHeight) + "px");
            }
        },
        
        check: function(span, type) 
        {
            input = span.next('input');
            if( input.is(':checked') && type == 'checkbox' ) 
            {
                span.css('background-position', "0 0");
                input.attr('checked', false);
            }
            else
            {
                if(type == 'checkbox')
                {
                    span.css('background-position', "0 -" + (settings.checkboxHeight*2) + "px");
                } 
                else
                {
                    span.css('background-position', "0 -" + (settings.radioHeight*2) + "px");
                    var group = input.attr('name');
                    $('input[name="'+group+'"]').css('background-position', "0 0");
                }
            
                input.attr('checked', 'checked');
            }
        },
        
        clear: function() 
        {
            $('input').each(function(){
                var type = this.type;
                if(type == 'checkbox' && $(this).is(':checked'))
                {
                    $(this).prev('span').css('background-position', "0 -" + (settings.checkboxHeight*2) + "px");
                }
                else if(type == 'checkbox')
                {
                    $(this).prev('span').css('background-position', "0 0");
                }
                else if(type == 'radio' && $(this).is(':checked'))
                {
                    $(this).prev('span').css('background-position', "0 -" + (settings.radioHeight*2) + "px");
                }
                else if(type == 'radio')
                {
                    $(this).prev('span').css('background-position', "0 0");
                }
            });
        }
    }
    
    this.each(function(i){
        
        var ele = $(this);
        var type = this.type;
 
        if(type == 'radio' || type == 'checkbox')
        {
            cssClass = (type == 'checkbox') ? settings.checkboxClass : settings.radioClass;
            span = $('<span class="'+ cssClass +'"></span>').insertBefore(ele);
            ele.hide();
            
            if(ele.is(':checked'))
            {
                if(type == 'checkbox')
                {
                    span.css('background-position', "0 -" + (settings.checkboxHeight*2) + "px");
                } 
                else
                {
                    span.css('background-position', "0 -" + (settings.radioHeight*2) + "px");
                }
            }

            ele.change(function(){ actions.clear() });
            span.mousedown(function(){ actions.pushed($(this), type) });
            span.mouseup(function(){ actions.check($(this), type) });
            $(document).mouseup(function(){ actions.clear() });
        } 
        else
        {
            var ele = $(this);
            var text = '';
            var span = '';

            ele.css({
                position: 'relative',
                opacity: 0,
                filter: 'alpha(opacity=0)',
                zIndex: 5
            });
            
            if(settings.selectWrapClass){
                ele.wrap('<span class="'+ settings.selectWrapClass +'"></span>');
                
            }
            
            ele.children('option:selected').each(function(){
                text = $(this).text();
            });

            span = $('<span id="select'+ i +'" class="'+ settings.selectClass +'">'+ text +'</span>').insertBefore(ele);
            ele.width( span.outerWidth() );
            
            ele.change(function(){
                $(this).prev('span').text( $(this).children('option:selected').text() );
            });
        }
    });
}