var passMaskd = true;
var userMaskd = true;
			
$(document).ready(function(){	
	
	$('#username').focus(function(e) {
		userMaskd = false;
		$(this).css({backgroundImage: ''});
		$(this).animate({
			backgroundColor: '#CCFFFF',
			color: '#000000'
		},200);
	}).blur(function(e) {
		if ($(this).val() == '') {
			userMaskd = true;
		}	
		$(this).animate({
			backgroundColor: '#FFFFFF',
			color: '#888888'
		}, 200);			
		$(document).trigger('mask');
	});	
	

	$('#passwd').focus(function() {
		passMaskd = false;
		$(this).css({backgroundImage: ''});
		$(this).animate({
			backgroundColor: '#CCFFFF',
			color: '#000000'
		},200);
	}).blur(function() {
		if ($(this).val() == '') {
			passMaskd = true;
		}
		$(this).animate({
			backgroundColor: '#FFFFFF',
			color: '#888888'
		}, 200);		
		$(document).trigger('mask');
	});	
	
	$.timer(500, function (timer) {
	    $(document).trigger('mask');
	    timer.stop();
	});
	
});	

$(document).bind('mask',function(e){
	if ($('#username').val() != '') {
		userMaskd = false;
	}
	if ($('#passwd').val() != '') {
		passMaskd = false;
	}
	if (userMaskd) {
		if ($('#username').val() == '') {
			$('#username').css('background', '#FFF url(/images/usr_bg.png) no-repeat');
		} else {
			$('#username').css('background', '#FFF'); 
		}
	}
	if (passMaskd) {
		if ($('#passwd').val() == '') {
			$('#passwd').css('background', '#FFF url(/images/pw_bg.png) no-repeat');
		} else {
			$('#passwd').css('background', '#FFF'); 
		} 
	}		
});