(function($) {
	// Create a plug-in with the name 'watermark'
	$.fn.watermark = function(settings) {
		// Defaults
		var config = {
			watermarkClass: 'watermark',
			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).keydown(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);
//            });
                
            //"keydown" was the wrong event to look for.  "click" is more intuitive for the user.
            $(this).click(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);