(function ($) {
    // Create a plugin with the name 'watermark'
    $.fn.watermark = function (settings) {
        // Defaults
        var config = {
            watermarkClass: 'watermarkOn',
            defaultText: 'type here...'
        };

        // merge the passed in settings with our default config
        if (settings) $.extend(config, settings);

        // Loop through the elements in the selector that we call the plug-in on
        this.each(function () {
            // Apply defaults to the box
            $(this).addClass(config.watermarkClass).val(config.defaultText);

            // Apply our focus and blur events
            // When we click on the field, we expect it to clear the field and remove the watermark
            $(this).focus(function () {
                $(this).filter(function () {
                    // Check to see if we have a blank field or the default text
                    return $(this).val() === "" || $(this).val() === config.defaultText;
                }).val("").removeClass(config.watermarkClass);
            });

            // When we click off of the field, we expect it to replace the watermark,
            // unless we have entered text
            $(this).blur(function () {
                $(this).filter(function () {
                    // Check to see if the field is blank
                    return $(this).val() === "";
                }).addClass(config.watermarkClass).val(config.defaultText);
            });
        });
    };
})(jQuery);