(function ($) {
    $.fn.fillForm = function (options) {

        var settings = {
            'fillForm': 'fillForm',
            'fillFormHover': 'fillFormHover',
            'fillFormOff': 'fillFormOff'
        }
        $.extend(settings, options);


        return $(this.selector).each(function () {

            // Create elements and position so that everything is matching
            var input = $(this);

            input.wrap('<span>');
            var wrapper = $(input.parent('span'));
            wrapper.prepend('&nbsp;'); // Needed to fix peculiar vertical alignment issue with labels
            wrapper.css({
                position: 'relative',
                height: input.height(),
                width: input.width(),
                display: 'inline-block',
                'margin-top': input.css('margin-top'),
                'margin-right': input.css('margin-right'),
                'margin-bottom': input.css('margin-bottom'),
                'margin-left': input.css('margin-left'),
                'padding-top': input.css('padding-top'),
                'padding-right': input.css('padding-right'),
                'padding-bottom': input.css('padding-bottom'),
                'padding-left': input.css('padding-left'),
                'font-family': input.css('font-family'),
                'font-size': input.css('font-size')
            });

            input.before(input.clone());
            var bg = input.prev('input');
            bg.attr('id', '');
            input.css({
                position: 'absolute',
                top: 0,
                left: 0,
                margin: 0,
                background: 'transparent',
                'z-index': 10
            });

            bg.css({
                position: 'absolute',
                top: 0,
                left: 0,
                margin: 0,
                'z-index': 1
            });


            if (input.val() === "") { // If the textbox is blank (ie. it hasn't been filled by ASP or similar when the page is loaded)
                bg.val(input.attr('title')); // Set the background span to equal title attr
                bg.addClass(settings.fillFormOff); // Add the off colour. If text has been entered then it will keep the fillForm colour (darker)
            }

            input.hover(function () {
                bg.addClass(settings.fillFormHover); // Add the class on hover
            }, function () {
                if (!input.is(':focus')) {
                    bg.removeClass(settings.fillFormHover); // Only remove if the form is not selected
                }
            });

            input.focus(function () {
                if (input.val() !== "") { // if there is default text or been added to previously
                    // Highlight all text
                    setTimeout(function () { input.select(); }, 10);
                }
            });

            input.keyup(function () {
                if (input.val() !== "") {
                    // something entered, remove bg text
                    bg.val('');
                } else {
                    // must be blank, add title in
                    bg.val(input.attr('title'));
                }
            });

            input.blur(function () {
                if (input.val() !== "") {
                    // something entered, remove bg text
                    bg.val('');
                } else {
                    // must be blank, add title in
                    bg.val(input.attr('title'));
                    bg.addClass(settings.fillFormOff); // Add the off colour. If text has been entered then it will keep the fillForm colour (darker)
                }
                bg.removeClass(settings.fillFormHover); // remove this regardless of text changes
            });

            bg.focus(function () {
                input.select();
            });

            input.val().replace(",", ""); // Replace weird comma problem
        });
    };
})(jQuery);