Ext.onReady(function() {
	Ext.select('input[id!=login_area][id!=login_password]').on('focus', addInputHoverClass);
	Ext.select('input[id!=login_area][id!=login_password]').on('blur', removeInputHoverClass);

	function addInputHoverClass(e,t) {
		e.getTarget('',10,true).parent().addClass('highlight');
	}

	function removeInputHoverClass(e, t) {
		e.getTarget('',10,true).parent().removeClass('highlight');
	}
	
	var u = Ext.get('login_area');
	var p = Ext.get('login_password');
	
	if(u) {
		u.on('focus', function() {
			if(u.dom.value == 'username')
				u.dom.value = '';
		});
		
		u.on('blur', function() {
			if(u.dom.value == '')
				u.dom.value = 'username';
		});
	}

	if(p) {
		setupPassword();
	}

	function setupPassword() {
		Ext.get('login_password').on('focus', function(e,t) {
			addInputHoverClass(e,t);
			if(Ext.get('login_password').dom.value == 'password'){
				Ext.get('login_password').parent().update('<input name="password" id="login_password" type="password" value="" />');
				window.setTimeout(function() {
					Ext.get('login_password').focus();
					
					Ext.get('login_password').on('blur', function(e,t) {
						removeInputHoverClass(e, t);
						if(Ext.get('login_password').dom.value == '') {
							Ext.get('login_password').parent().update('<input name="password" id="login_password" type="text" value="password" />');
							
						}
						setupPassword();
						
					});
					
				}, 10);
			}
		});
		
		Ext.get('login_password').on('blur', function() {
			if(Ext.get('login_password').dom.value == '') {
				Ext.get('login_password').parent().update('<input name="password" id="login_password" type="password" value="password" />');
			}
		});
	}
});