/* D3R Cleverlabels
You will need some styling in your css a bit like this:

div.field input.cleverlabel,
div.field textarea.cleverlabel {
	background: #F0F0F0;
	color: #A0A0A0;
	border-color: #E1E1E1;
}
div.password .cleverpassword {
	position: relative;
}
div.password input.cleverlabel {
	position: absolute;
	z-index: 0;
	left: 0;
	bottom: 0;
}
.js div.field .form_note {
	display: none;
}
*/
(function($) {
	$.fn.cleverlabels = function(labeloveride) {
		return $(this).each(function() {
			var $this = $(this);
			var labeltext = labeloveride;
			var emptyval = function(){};
			var fillval = function(){};
			// Would be nice to trim here too. Alas IE will not have it.
			if (undefined == labeltext) { 
				labeltext = $('#'+$this.attr('id')+'_note').text();
			}
			if (labeltext.length < 1) { 
				labeltext = $('label[for='+$this.attr('id')+']').text().replace(/\*/,"");
			}
			if ('password' == $this.attr('type')) {
				var $dummy = $('<input type="text" value="'+labeltext+'" class="input cleverlabel"/>');
				// $dummy.attr('type','text').val(labeltext).addClass('cleverlabel');
				$dummy.css({width: $this.width(), height: $this.height()});
				$dummy.focus(function(e){
					$this.focus();
				});
				$this.wrap('<div class="cleverpassword"></div>')
				$this.before($dummy);
				emptyval = function() {
					$this.css({opacity:1});
				}
				fillval = function() {
					if ($this.val() == '') {
						$this.css({opacity:0});
					};
				}
			}
			else
			{
				// hiding is done in css via the .js class
				emptyval = function() {
					if ($this.val() == labeltext) {
						$this.val('');
						$this.removeClass('cleverlabel');
					}
				}
				fillval = function() {
					if ($this.val() == '' || $this.val() == labeltext) {
						$this.val(labeltext);
						$this.addClass('cleverlabel');
					};
				}
			}
			fillval();
			$this.bind('focus', function() {
				emptyval();
			});
			$this.bind('blur', function() {
				fillval();
			});
			$(this.form).submit(function(){
				emptyval();
			});
		});
	};
})(jQuery);