(function ($) {
    $.fn.watermark = function () {
        var defaults = {
            color: '#999'
        };
        function displayWatermarkIfEmpty(obj) {
            if (obj.attr('watermarkText') == obj.val() || obj.val() == "") {
                obj.css('color', options.color);
                obj.val(obj.attr('watermarkText'));
            } 
        };
        var options = $.extend(defaults, options);
        return this.each(function () {
            var obj = $(this);
            if (obj.attr('type') == 'password') {
                // For passwords we have to do some special processing so that our prompt for a password watermark is not 
                // shown as a password field and therefore just looks like *******
                // This should be simple - we should just convert the type of the input to text to display the watermark 
                // and then change it back to password once the user puts focus into the box. However IE will not let you
                // change the type of a text box (and therefore jquery won't either).
                // So we have to do it this way instead.   

                // First we wrap the existing input control in a span and duplicate it with an exactly equivalent control that
                // has a type of text instead of password, and a unique id and name (this is so that other users of this page 
                // e.g. the C# code don't pick up two copies of the control). Afterwards the complete HTML will look like this:
                // <span>
                //      <input id="ctl0_ctl0_blah" name="ctl0$ctl0$blah" type="password" value="" cssclass="foo" /> 
                //      <input id="ctl0_ctl0_Watermark" name="ctl0$ctl0$blah$Watermark" type="text" value="" cssclass="foo" /> 
                // </span>
                obj.wrap('<span></span>');
                var innerHtml = obj.parent().html().replace(/type=["']?password["']?/i, 'type="text"');
                innerHtml = innerHtml.replace(obj.attr('id'), obj.attr('id') + '_Watermark');
                innerHtml = innerHtml.replace(obj.attr('name'), obj.attr('name') + '$Watermark');
                obj.parent().append(innerHtml);

                // Next we get a jquery handle to the newly created plain text control, set it's text to 
                // prompt for a password, and change the colour to look like a watermark
                var objWatermark = $("[id$=_Watermark]");

                if (obj.attr("watermarkText") != undefined) objWatermark.val(obj.attr("watermarkText"));
                else objWatermark.val('Password...');
                objWatermark.css('color', options.color);

                // Now if the password input box does not have anything in it then hide it, otherwise hide the watermark
                if (obj.val() == "") obj.css('display', 'none');
                else objWatermark.css('display', 'none');

                // Now we just bind to the two events we need. 
                objWatermark.bind('focus', function () {
                    // When we focus on the watermark, it disappears and is replaced by the password input box.
                    obj.css('display', 'inherit');
                    objWatermark.css('display', 'none');
                    obj.get(0).focus();
                });

                obj.bind('blur', function () {
                    // When we move away from the password box, then if it is blank we reinstate the watermark, 
                    // otherwise we just leave the password box there.
                    if (obj.val() == "") {
                        obj.css('display', 'none');
                        objWatermark.css('display', 'inherit');
                    }
                });
            }
            else {
                // For non-password controls life is much easier.
                // Check the current value agains the watermark value to determine if this is a watermark or user entry
                obj.attr('baseColor', obj.css('color'));
                displayWatermarkIfEmpty(obj);

                obj.bind('focus', function () {
                    // Check as we focus to see if we need to remove the watermark text
                    var o = $(this);
                    if (o.val() == o.attr('watermarkText') || o.val() == '') {
                        o.val('');
                        o.css('color', o.attr('baseColor'));
                    }
                }).bind('blur', function () {
                    // Check as we leave if we need to put the watermark back in place.
                    var o = $(this);
                    displayWatermarkIfEmpty(o);
                });
            }
        });
    };
})(jQuery);