jQuery(document).ready(function(){
	
	BindEvents();
	
	function BindEvents() {
		// User clicks box
		jQuery('#uUsername1').bind('focus', function(){
			if(jQuery('#uUsername1').val() == 'USERNAME'){
				jQuery('#uUsername1').val('');
				jQuery('#uUsername1').css('color', '#000000');
			}
		});
		
		jQuery('#uPassword1').bind('focus', function(){
			if(jQuery('#uPassword1').val() == 'PASSWORD'){
				jQuery('#uPassword1').replaceWith('<input name="uPassword" id="uPassword1" type="password" value="" style="color: #000000;" class="LoginElement" />');
				BindEvents();
			}
		});
		
		// User Leaves box
		jQuery('#uUsername1').bind('blur', function(){
			if(jQuery('#uUsername1').val() == ''){
				jQuery('#uUsername1').val('USERNAME');
				jQuery('#uUsername1').css('color', '#CCCCCC');
			}
		});
		
		jQuery('#uPassword1').bind('blur', function(){
			if(jQuery('#uPassword1').val() == ''){
				jQuery('#uPassword1').replaceWith('<input name="uPassword" id="uPassword1" type="text" value="PASSWORD" class="LoginElement" />');
				BindEvents();
			}
		});
	}
});