﻿(function($){
    function createDummyInput(self, settings) {
        var watermarkText = (settings.watermarkText) ? settings.watermarkText : self.attr('title');
        var dummyInput = $('<input type="text">')
            .attr('id', self.attr('id') + '_watermark')
            .addClass(settings.cssClass)
            .css({
                height : self.height(),
                width  : self.width()
            })
            .val(watermarkText)
            .attr('title', self.attr('title'))
            .hide();

        self.after(dummyInput);
        return dummyInput;
    }

    $.fn.watermark = function(settings) {
        settings = $.extend({
            cssClass : "watermark"
        }, settings);

        return this.each(function() {
            var self = this;
            var dummyInput = createDummyInput($(self), settings);

            dummyInput.click(function() {
                $(this).hide();
                $(self).show().focus();
            });

            dummyInput.focus(function() {
                $(this).hide();
                $(self).show().focus();
            });

            $(self).blur(function() {
                if ($(this).val() == '') {
                    $(this).hide();
                    dummyInput.show();
                }
            });

            if ($(self).val() == '') {
                $(self).hide();
                dummyInput.show();
            }
        });
    }
})(jQuery);