/*
 * jquery.titleWatermark.js
 *
 * Uses the title attribute as a watermark.
 *
 * HTML:
 * <input type="text" class="Watermark" title="9999" />
 *
 * CSS:
 * span.Watermark { color: #ddd; }
 *
 * JavaScript:
 * $('input.Watermark').titleWatermark();
 *
 * JavaScript with Options:
 * $("input.Watermark").titleWatermark( { watermark_class : 'GrayWatermark' } );
 *
 * I made this. (SmallSharpTools.com - 2008)
 *
 * License: Creative Commons
 *
 */
(function($) {

    $.fn.titleWatermark = function(options) {

        var opts = $.extend({}, $.fn.titleWatermark.defaults, options);

        return this.each(function() {

            var elem = $(this);
            var title = $(this).attr('title');

            if (title !== '') {
                $(this).attr('title', '');

                var elemWidth = $(this).width();
                var html = '<span class="' + opts.watermark_class + '"><span>' + title + '</span></span>';
                $(this).after(html);

                var spanWidth = $(this).next('span.' + opts.watermark_class).width();
                $(this).next('span.' + opts.watermark_class).
                    css('display', 'inline-block').
                    css('width', elemWidth + 'px').
                    css('margin-left', (elemWidth * -1) + 'px').
                    find('span').hide();

                $(this).next('span.' + opts.watermark_class).click(function() {
                    $(elem).focus();
                });

                var hideWatermark = function() {
                    $(this).next('span.' + opts.watermark_class).find('span').hide();
                };

                var showWatermark = function() {
                    if ($(this).val() === '') {
                        $(this).next('span.' + opts.watermark_class).find('span').show();
                    }
                };

                $(this).focus(hideWatermark).blur(showWatermark);
                showWatermark.apply(this, [], []);
            }

        });

    };

    // publicly accessible defaults
    $.fn.titleWatermark.defaults = {
        watermark_class: 'Watermark'
    };

})(jQuery);