var fade = null;
var unfade = null;
var iframes = 20;
var fadeFrame = unfadeFrame = 0;

var color1 = [ "#EBEDE0", 0, 0, 0 ];
var color2 = [ "#FFFFFF", 0, 0, 0 ];

function getColorDecCode( colorArray )
{
	strCode = colorArray[0].substr(1).toUpperCase();
	colorArray[1] = parseInt( Hex2Dec( strCode.substr(0, 1) ) )*16 + parseInt( Hex2Dec( strCode.substr(1, 1) ) );
	colorArray[2] = parseInt( Hex2Dec( strCode.substr(2, 1) ) )*16 + parseInt( Hex2Dec( strCode.substr(3, 1) ) );
	colorArray[3] = parseInt( Hex2Dec( strCode.substr(4, 1) ) )*16 + parseInt( Hex2Dec( strCode.substr(5, 1) ) );
}

function Hex2Dec(str)
{
	if((str >= 0) && (str <= 9))
		return str;

	switch ( str )
	{
		case "A": return 10;
		case "B": return 11;
		case "C": return 12;
		case "D": return 13;
		case "E": return 14;
		case "F": return 15;
		default:
			alert('You must choose a number between 0 and 9 or a letter between A and F!');
			return 'X';
	}
}

function start_fade()
{
	fadeFrame = 0;
	icolorfade();
}

function start_unfade()
{
	unfadeFrame = 0;
	icolorunfade();
}

function icolorfade()
{
	if ( fadeFrame<=iframes )
	{
		cRatio = fadeFrame / iframes;
		fade.style.backgroundColor = getColor( cRatio, 1 );
		fadeFrame++;
		setTimeout( "icolorfade()", 10 );
	}
}

function icolorunfade()
{
	if ( unfadeFrame<=iframes )
	{
		cRatio = unfadeFrame / iframes;
		unfade.style.backgroundColor = getColor( cRatio, -1 );
		unfadeFrame++;
		setTimeout( "icolorunfade()", 10 );
	}
}

function getColor( cRatio, cMethod )
{
	allColor = "rgb(";
	for ( i=1; i<4; i++ )
	{
		if ( cMethod>0 )
			allColor += ( color2[i] - color1[i] )*cRatio + color1[i];
		else
			allColor += ( color1[i] - color2[i] )*cRatio + color2[i];
		// allColor += Math.abs( color1[i] - color2[i] )*cRatio*( cMethod>0 ? -1 : 1 ) + ( cMethod>0 ? color1[i] : color2[i] );
		if ( i<3 ) allColor += ",";
	}
	allColor += ")";
	return allColor;
}

function WebInput( el )
{
	if ( !isReady() || el == null )
		return;

	this.element = el;
	var oThis = this;
	this.element.onfocus = function () { WebInput.Over( oThis ); };
	this.element.onblur = function () { WebInput.Out( oThis ); };
	this.element.style.backgroundColor = color1[0];
}

WebInput.Over = function ( tabpage )
{
	fade = tabpage.element;
	start_fade();
};

WebInput.Out = function ( tabpage )
{
	unfade=tabpage.element;
	start_unfade();
}

// Initiation

function isReady()
{
	var ie55 = /msie 5\.[56789]/i.test( navigator.userAgent );
	return ( typeof document.implementation != "undefined" && document.implementation.hasFeature( "html", "1.0" ) || ie55 );
}

function init_inputs()
{
	if ( !isReady() )
		return;

	var all = document.getElementsByTagName( "*" );
	var l = all.length;

	getColorDecCode( color1 );
	getColorDecCode( color2 );

	for ( var i = 0; i < l; i++ )
	{
		var el = all[i]
;
		if ( el.type=="text" || el.type=="password" )
		{
			new WebInput(el);
		} 
	}
}