var CapsLock = {
	init: function() {
		var id = Ext.id();
		this.alertBox = Ext.DomHelper.append(document.body,{
			tag: 'div',
			style: 'width: 8em',
			children: [{
				tag: 'div',
				style: 'text-align: center; color: red;',
				html: 'Caps Lock is on.',
				id: id
			}]
		}, true);
		Ext.fly(id).boxWrap();
		this.alertBox.hide();

		var pwds = Ext.query("INPUT[type='password']");
		for(var i = 0; i < pwds.length; i++) {
			Ext.get(pwds[i].id).on('keypress', this.keypress.createDelegate(this,pwds[i],true), this);
		}
	},
	keypress: function(e, el) {
		var charCode = e.getCharCode();
		if((e.shiftKey && charCode >= 97 && charCode <= 122) || (!e.shiftKey && charCode >= 65 && charCode <= 90)){
			this.showWarning(el);
		} else {
			this.hideWarning();
		}
	},
	showWarning: function(el) {
		var x = Ext.fly(el).getX();
		var width = Ext.fly(el).getWidth();
		var y = Ext.fly(el).getY();

		this.alertBox.setXY([x + width + 6,y]);
		this.alertBox.show();
	},
	hideWarning: function() {
		this.alertBox.hide();
	}
}
Ext.onReady(CapsLock.init, CapsLock, true);