var fadeTiming = 300;
$(document).ready(function(){
	$('#test_field').val($('#test_field').attr('title'));
	$('#test_field').css('color','#888');
	
	$('input').bind('focus',function(){
		if($(this).val()==$(this).attr('title')){
			// Has default value
			// Fade out default value
			$(this).animate({
				color: "#FFF"
			},fadeTiming);
			// Clear default value
			$(this).val('');
		} else {
			// Has user value
		}
		// Write helper node			
		$(this).after('<p id="helper_text">TIP: '+$(this).attr('title')+'</p>');
		// Fade in helper node
		$('#helper_text').animate({
			color: "#888"
		},fadeTiming);
		// Fade input back in
		$(this).animate({
			color: "#000"
		},fadeTiming);
	});

	$('input').bind('blur',function(){
		// Fade out helper node
		$('#helper_text').animate({
			color: "#FFF"
		},fadeTiming);
		// Remove helper node
		$('#helper_text').remove();
		if($(this).val()==''){
			// Has empty input
			// Cut straight to white
			$(this).css('color','#FFF');
			// Restore default value
			$(this).val($(this).attr('title'));
			// Fade in default value
			$(this).animate({
				color: "#888"
			},fadeTiming);
		}
	});
});