/**
 * Input element 'progress bar' script
 * by Stickman (http://the-stickman.com) 
 * You may use/modify this script in any way you like. However, please leave
 * the above credit and website address in place. And don't blame me if it
 * breaks anything.
 */
function addProgressBar( element, color ){
	if( !( element.tagName == 'INPUT' && ( element.type == 'text' || element.type == 'password' ) ) ){
		alert( 'Progress bar can only be used on text and password input elements.' );
		return;
	}
	if( !color ){
		color = '#fee';
	}
	var maxlength = element.getAttribute( 'maxlength' );
	if( maxlength ){
		element.dimensions = getDimensions( element );
		element.position = getPosition( element );		element.style.zIndex = 2;
		element.style.position = 'relative';
		var original_background = element.style.background;
		var original_backgroundColor = element.style.backgroundColor;
		element.style.background = 'none';		var div_progressbar_bg = document.createElement( 'div' );
		document.body.appendChild( div_progressbar_bg );
		div_progressbar_bg.style.zIndex = 0;
		div_progressbar_bg.style.position = 'absolute';
		div_progressbar_bg.style.top = element.position.y + 'px';
		div_progressbar_bg.style.left = element.position.x + 'px';
		div_progressbar_bg.style.width = element.dimensions.width + 'px';
		div_progressbar_bg.style.height = element.dimensions.height + 'px';
		div_progressbar_bg.style.background = original_background;
		div_progressbar_bg.style.backgroundColor = original_backgroundColor;		var div_progressbar = document.createElement( 'div' );
		div_progressbar.style.zIndex = 1;
		div_progressbar.style.position = 'absolute';
		div_progressbar.style.top = element.position.y + 'px';
		div_progressbar.style.left = element.position.x + 'px';
		div_progressbar.style.width = '0px';
		div_progressbar.style.height = element.dimensions.height + 'px';
		div_progressbar.style.background = color;
		document.body.appendChild( div_progressbar );
		element.div_progressbar = div_progressbar;
		element.update = function(){
			this.div_progressbar.style.width = ( ( this.dimensions.width / this.getAttribute( 'maxlength' ) ) * this.value.length ) + 'px' ;
		}
		element.onkeyup = function(){
			this.update();
		}
		element.update();
		
		div_progressbar = null;
		div_progressbar_bg = null;
		maxlength = null;
		element = null;
	}
}
function getDimensions( element )
{
	return { width: parseInt( element.offsetWidth ), height: parseInt( element.offsetHeight ) };
}
function getPosition( element ){
	var x = 0;
	var y = 0;
	if ( element.offsetParent ){
		x = element.offsetLeft;
		y = element.offsetTop;
		while ( element = element.offsetParent ){
			x += element.offsetLeft;
			y += element.offsetTop;
		}
	}
	return { x:x, y:y };
}