/**
 * XHTML compatible form style.
 *
 * This plugin was tested for the following browsers:
 * - IE 6 / 7
 * - FF 2 / 3
 * - Opera 9
 * - Safari 3
 *
 * @author Prosumer24
 * @uses   jQuery
 */
jQuery.ProForms = {
    /**
     * Internal variables
     */
    imagePath : '',
	form      : undefined,
	checkbox  : undefined,
	radio     : undefined,
	radioName : '',

	/**
	 * Replace forms with class="proform"
	 *
	 * @param string imagePath
	 */
    replace : function(imagePath)
    {
        // Safari < Version 3 does not allow replacement
        if (jQuery.browser.safari && jQuery.browser.version < 3) {
            return;
        }

        // Now replace all forms
        jQuery('form.proform').each(function() {
            jQuery.ProForms.form = jQuery(this);

            jQuery.ProForms.replaceTexts();
            jQuery.ProForms.replaceTextAreas();
            jQuery.ProForms.replaceCheckboxes();
            jQuery.ProForms.replaceRadios();
            jQuery.ProForms.replaceButtons();
        });
    },

    /**
     * Replace all <input type="text"/> and <input type="password"/>
     */
    replaceTexts : function()
    {
        jQuery('input[@type=text]', jQuery.ProForms.form)
        .add(jQuery('input[@type=password]', jQuery.ProForms.form))
        .each(function() {
            // Default style
            var left  = document.createElement('span');
            var right = document.createElement('span');

            jQuery(this).addClass('proForm_textCenter');
            jQuery(left).attr('class',  'proForm_textLeft');
            jQuery(right).attr('class', 'proForm_textRight');

            // Fix for Firefox 2
            if (jQuery.browser.mozilla && (jQuery(this).hasClass('showUrl') || jQuery(this).hasClass('keywords') || jQuery(this).hasClass('wide') || jQuery(this).hasClass('extraWide'))) {
                var offsetWidth    = this.offsetWidth;
                left.style.width   =  offsetWidth + 'px';
                right.style.width  =  offsetWidth + 'px';

                this.style.display  = '-moz-inline-block;';
                left.style.display  = '-moz-inline-block;';
                right.style.display = '-moz-inline-block;';
            }

            jQuery(this).before(left);
            jQuery(left).append(right);
            jQuery(right).append(this);

            // Focus style
            jQuery(this).focus(function() {
                jQuery(this).addClass('proForm_textCenterFocus')
                            .parent().addClass('proForm_textRightFocus')
                            .parent().addClass('proForm_textLeftFocus');
            });

            jQuery(this).blur(function() {
                jQuery(this).removeClass('proForm_textCenterFocus')
                            .parent().removeClass('proForm_textRightFocus')
                            .parent().removeClass('proForm_textLeftFocus');
            });
		});
    },

    /**
     * Replace all <textarea/>
     */
    replaceTextAreas : function()
    {
        jQuery('textarea', jQuery.ProForms.form).each(function() {
            // Default style
            var topLeft     = document.createElement('span');
            var top         = document.createElement('span');
            var topRight    = document.createElement('span');
            var right       = document.createElement('span');
            var bottomRight = document.createElement('span');
            var bottom      = document.createElement('span');
            var bottomLeft  = document.createElement('span');
            var left        = document.createElement('span');

            jQuery(this).addClass('proForm_textareaCenter');
            jQuery(topLeft).attr('class',     'proForm_textareaTopLeft');
            jQuery(top).attr('class',         'proForm_textareaTop');
            jQuery(topRight).attr('class',    'proForm_textareaTopRight');
            jQuery(right).attr('class',       'proForm_textareaRight');
            jQuery(bottomRight).attr('class', 'proForm_textareaBottomRight');
            jQuery(bottom).attr('class',      'proForm_textareaBottom');
            jQuery(bottomLeft).attr('class',  'proForm_textareaBottomLeft');
            jQuery(left).attr('class',        'proForm_textareaLeft');

            jQuery(this).before(top);
            jQuery(top).append(right);
            jQuery(right).append(bottom);
            jQuery(bottom).append(left);
            jQuery(left).append(topLeft);
            jQuery(topLeft).append(topRight);
            jQuery(topRight).append(bottomRight);
            jQuery(bottomRight).append(bottomLeft);
            jQuery(bottomLeft).append(this);

            // Focus style
            jQuery(this).focus(function() {
                jQuery(this).addClass('proForm_textareaCenterFocus')
                            .parent().addClass('proForm_textareaBottomLeftFocus')
                            .parent().addClass('proForm_textareaBottomRightFocus')
                            .parent().addClass('proForm_textareaTopRightFocus')
                            .parent().addClass('proForm_textareaTopLeftFocus')
                            .parent().addClass('proForm_textareaLeftFocus')
                            .parent().addClass('proForm_textareaBottomFocus')
                            .parent().addClass('proForm_textareaRightFocus')
                            .parent().addClass('proForm_textareaTopFocus')
            });

            jQuery(this).blur(function() {
                jQuery(this).removeClass('proForm_textareaCenterFocus')
                            .parent().removeClass('proForm_textareaBottomLeftFocus')
                            .parent().removeClass('proForm_textareaBottomRightFocus')
                            .parent().removeClass('proForm_textareaTopRightFocus')
                            .parent().removeClass('proForm_textareaTopLeftFocus')
                            .parent().removeClass('proForm_textareaLeftFocus')
                            .parent().removeClass('proForm_textareaBottomFocus')
                            .parent().removeClass('proForm_textareaRightFocus')
                            .parent().removeClass('proForm_textareaTopFocus')
            });
		});
    },

    /**
     * Replace all <input type="checkbox"/>
     */
    replaceCheckboxes: function()
    {
        jQuery('input[@type=checkbox]', jQuery.ProForms.form).each(function() {
            if (jQuery(this).hasClass('proForm-disabled')) {
                return;
            }
            
            // Default style
            var box = document.createElement('span');

            jQuery(this).parent().addClass('proForm_hidden');
            jQuery(box).attr('class',  'proForm_checkbox');

            jQuery(this).before(box);

            // Focus style
            jQuery(this).focus(function() {
                jQuery(this).prev().addClass('proForm_checkboxFocus');
            });

            jQuery(this).blur(function() {
                jQuery(this).prev().removeClass('proForm_checkboxFocus');
            });

            // Active style
            if (this.checked) {
                jQuery(this).prev().addClass('proForm_checkboxActive');
            }

            // Bind span or label click
            if (jQuery(this).parent().get(0).tagName.toLowerCase() == 'label') {
                jQuery(this).parent().click(jQuery.ProForms.labelCheckboxChange);

                // IE needs the span linked, even when within a label
                if (jQuery.browser.msie) {
                    jQuery(this).prev().click(jQuery.ProForms.spanCheckboxChange);
                }
            } else {
                jQuery(this).prev().click(jQuery.ProForms.spanCheckboxChange);
            }

            // For IE 6, we must also bind the keypress event
            if (jQuery.browser.msie && jQuery.browser.version < 7) {
                jQuery(this).keyup(jQuery.ProForms.keyboardCheckboxChange);
            }
		});
    },

    /**
     * Click on checkbox span
     */
    spanCheckboxChange : function()
    {
        jQuery.ProForms.checkbox = jQuery(this).next();

        var checkbox = jQuery.ProForms.checkbox.get(0);

        if (jQuery.ProForms.checkbox.attr('checked') == true) {
            jQuery.ProForms.checkbox.removeAttr('checked');
        } else {
            jQuery.ProForms.checkbox.attr('checked', 'checked');
       }

        jQuery.ProForms.checkbox.focus();
        jQuery.ProForms.visualCheckboxChange();
    },

    /**
     * Click on checkbox label
     */
    labelCheckboxChange : function()
    {
        jQuery.ProForms.checkbox = jQuery('input[@type=checkbox]', jQuery(this));
        jQuery.ProForms.checkbox.focus();

        jQuery.ProForms.visualCheckboxChange();
    },

    /**
     * Keyboard checkbox change, IE 6 only
     */
    keyboardCheckboxChange : function(e)
    {
        /*if (e.keyCode == */
    },

    /**
     * Change the visual style of the checkbox
     */
    visualCheckboxChange : function()
    {
       if (jQuery.ProForms.checkbox.attr('checked') == true) {
            jQuery(jQuery.ProForms.checkbox).prev().addClass('proForm_checkboxActive');
        } else {
            jQuery(jQuery.ProForms.checkbox).prev().removeClass('proForm_checkboxActive');
        }
    },

    /**
     * Replace all <input type="radio"/>
     */
    replaceRadios: function()
    {
        jQuery('input[@type=radio]', jQuery.ProForms.form).each(function() {
            // Default style
            var box = document.createElement('span');

            jQuery(this).parent().addClass('proForm_hidden');
            jQuery(box).attr('class',  'proForm_radio');

            jQuery(this).before(box);

            // Focus style
            jQuery(this).focus(function() {
                jQuery(this).prev().addClass('proForm_radioFocus');
            });

            jQuery(this).blur(function() {
                jQuery(this).prev().removeClass('proForm_radioFocus');
            });

            // Active style
            if (this.checked) {
                jQuery(this).prev().addClass('proForm_radioActive');
            }

            // Bind span click
            jQuery(this).prev().click(jQuery.ProForms.spanRadioChange);

            // Bind label click
            if (jQuery(this).parent().get(0).tagName.toLowerCase() == 'label') {
                jQuery(this).parent().click(jQuery.ProForms.labelRadioChange);
            }

            // Bind key up
            jQuery(this).keyup(jQuery.ProForms.keyboardRadioChange);
		});
    },

    /**
     * Click on a radio span
     */
    spanRadioChange : function()
    {
        jQuery.ProForms.radio = jQuery(this).next();
        jQuery.ProForms.radio.attr('checked', 'checked');
        jQuery.ProForms.radio.focus();
        jQuery.ProForms.visualRadioChange();
    },

    /**
     * Click on a radio label
     */
    labelRadioChange : function()
    {
        jQuery.ProForms.radio = jQuery('input[@type=radio]', jQuery(this));
        jQuery.ProForms.radio.attr('checked', 'checked');
        jQuery.ProForms.radio.focus();
        jQuery.ProForms.visualRadioChange();
    },

    /**
     * Keyboard up on a radio
     */
    keyboardRadioChange : function()
    {
        this.checked = true;
        jQuery.ProForms.radio = jQuery(this);
        jQuery.ProForms.visualRadioChange();
    },

    /**
     * Change the visual style of the radio group
     */
    visualRadioChange : function()
    {
        jQuery.ProForms.radioName = jQuery.ProForms.radio.attr('name');

        jQuery('input[@type=radio]', jQuery(jQuery.ProForms.radio.form)).each(function() {
            if (this.name == jQuery.ProForms.radioName) {
                if (this.checked) {
                    jQuery(this).prev().addClass('proForm_radioActive');
                } else {
                    jQuery(this).prev().removeClass('proForm_radioActive');
                }
            }
        });
    },

    /**
     * Replace all <input type="submit"/> and <input type="reset"/>
     */
    replaceButtons : function()
    {
        jQuery('input[@type=submit]', jQuery.ProForms.form)
        .add(jQuery('input[@type=reset]', jQuery.ProForms.form))
        .add(jQuery('input[@type=button]', jQuery.ProForms.form))
        .each(function() {
            // Default style
            var left  = document.createElement('span');
            var right = document.createElement('span');

            jQuery(this).addClass('proForm_buttonCenter');
            jQuery(left).attr('class',  'proForm_buttonLeft');
            jQuery(right).attr('class', 'proForm_buttonRight');

            jQuery(this).before(left);
            jQuery(left).append(right);
            jQuery(right).append(this);

            // Hover style
            jQuery(this).hover(function() {
                jQuery(this).addClass('proForm_buttonCenterHover')
                            .parent().addClass('proForm_buttonRightHover')
                            .parent().addClass('proForm_buttonLeftHover');
            },
            function() {
                jQuery(this).removeClass('proForm_buttonCenterHover')
                            .parent().removeClass('proForm_buttonRightHover')
                            .parent().removeClass('proForm_buttonLeftHover');
            });
		});
    }
}