/*
 * NOTE: if you use this to style radio buttons and/or checkboxes and then you switch the original
 * radios and/or checkboxes (the ones that are hidden) on/off with javascript,
 * make sure to call $().change() on the newly selected radio and/or checkbox.
 * Otherwise, the styled radios and/or checkboxes will not update together with the original (hidden) radios.
 *
 * USAGE:
 *      $(function()
 *      {
 *          $.styledRadios();
 *          $.styledCheckboxes();
 *      });
 */

(function($)
{
    $.extend(
    {
        styledRadios : function()
        {
            $("input[type='radio']").each(function()
            {
                if ($(" + img", this).length == 0)
                {
                    var img_off                 = 'images/radio_off.gif';
                    var img_on                  = 'images/radio_on.gif';
                    
                    function radio_set_on(radio, img)
                    {
                        img.attr('src', img_on);
                    }
                    function radio_set_off(radio, img)
                    {
                        img.attr('src', img_off);
                    }
                    
                    var radio = this;
                    $(this).hide();
                    
                    
                    var img = $("<img />");
                    var radio_name = $(this).attr('name');
                    img.css('cursor', 'pointer'); 
                    img.css('margin-right', '3px');
                    
                    if ($(this).is(":checked"))
                        radio_set_on(this, img);
                    else
                        radio_set_off(this, img);
                    
                    function reset_all_radios()
                    {
                        $("input[type='radio'][name='"+radio_name+"']").each(function()
                        {
                            this.checked = false;
                            var img = $(this).data('styled_img');
                            radio_set_off(this, img);
                        });
                    }
                    
                    function update_radio()
                    {
                        if (radio.checked)
                            radio_set_on(radio, img);
                        else
                            radio_set_on(radio, img);
                    }
                    
                    img.click(function()
                    {
                        if ($(radio).attr('disabled') == false) {
                            radio.checked = true;
                            $(radio).change();
                        }
                        return false;
                    });
                    
                    $(radio).change(function()
                    {
                        var checked = this.checked;
                        reset_all_radios();
                        this.checked = checked;
                        update_radio();
                        return this.checked;
                    });
                    
                    $(this).after(img);
                    $(this).data('styled_img', img);
                }
            });
        },
        
        styledCheckboxes : function()
        {
            $("input[type='checkbox']").each(function()
            {
                if ($(" + img", this).length == 0)
                {
                    var img_off                 = 'images/checkbox_off.gif';
                    var img_on                  = 'images/checkbox_on.gif';
                    
                    function radio_set_on(radio, img)
                    {
                        img.attr('src', img_on);
                    }
                    function radio_set_off(radio, img)
                    {
                        img.attr('src', img_off);
                    }
                    
                    var radio = this;
                    $(this).hide();
                    
                    
                    var img = $("<img />");
                    var radio_name = $(this).attr('name');
                    img.css('cursor', 'pointer'); 
                    img.css('margin-right', '3px');
                    
                    if ($(this).is(":checked"))
                        radio_set_on(this, img);
                    else
                        radio_set_off(this, img);
                    
                    function update_radio()
                    {
                        if (radio.checked)
                            radio_set_on(radio, img);
                        else
                            radio_set_off(radio, img);
                        return false;
                    }
                    
                    img.click(function()
                    {
                        if ($(radio).attr('disabled') == false) {
                            if (radio.checked)
                                radio.checked = false;
                            else
                                radio.checked = true;
                            update_radio();
                        }
                        return false;
                    });
                    
                    $(radio).change(function()
                    {
                        update_radio();
                        return this.checked;
                    });
                    
                    $(this).after(img);
                    $(this).data('styled_img', img);
                }
            });
        }
    });
})(jQuery);