window.onload = setup;

var FADE_SPEED = 20;	//lower == faster

var MOVE_SPEED = 25;	//for these values

function setup()

{

	var d = document.getElementById('url');



	var s1 = document.createElement('span'); s1.className = 'url'; 	s1.innerHTML = 'http://';

	var s2 = document.createElement('span'); s2.id = 'url1'; 		s2.innerHTML = 'eric';

	var s3 = document.createElement('span'); s3.id = 'url2'; 		s3.innerHTML = 'w';

	var s4 = document.createElement('span'); s4.className = 'url'; 	s4.innerHTML = '.';

	var s5 = document.createElement('span'); s5.id = 'url3';		s5.innerHTML = 'us';

	var s6 = document.createElement('span'); s6.className = 'url';	s6.innerHTML = '/';

	var s7 = document.createElement('span'); s7.id = 'url4';		s7.innerHTML = 'trow';

	

	d.innerHTML = '';

	d.appendChild(s1);

	d.appendChild(s2);

	d.appendChild(s3);

	d.appendChild(s4);

	d.appendChild(s5);

	d.appendChild(s6);

	d.appendChild(s7);

	

	s3.style.left = '7px';

	s5.style.left = '7px';

	s7.style.left = '7px';

	

	d.style.backgroundColor = 'rgb(238,238,238)';	//to 153

	d.style.paddingLeft = '0px';

	d.style.width = '100%';				//for IE

	

	//attach event to mouseover

	d.onmouseover = urlify;

	d.onmouseout = nameify;

}





var fadeTimer;

var moveTimer;



function urlify()

{

	clearTimeout(fadeTimer);

	clearTimeout(moveTimer);

	fadeBackground(1);

	url_move(1);

}



function nameify()

{

	clearTimeout(moveTimer);

	clearTimeout(fadeTimer);

	fadeBackground(0);

	

	var sx = document.getElementById('url').childNodes;

	

	sx[0].style.display = 'none';		//make url chars invisible

	sx[1].style.paddingLeft = '82px';	//Eric must be offset to makeup for the missing http://

	sx[3].style.display = 'none';

	sx[5].style.display = 'none';

	

	sx[4].style.left = '7px';		//reset offsets for W and trow, now that the url chars are gone

	sx[6].style.left = '21px';

	

	url_move(0);



}



function fadeBackground(dir)	//dir = 1 for mouseover, 0 for mouseout

{

	var d = document.getElementById('url');

	var rgb = d.style.backgroundColor.substr(4).split(',');

	var r = parseInt(rgb[0]);

	

	r += (dir==1)?-5:5;

	

	d.style.backgroundColor = 'rgb('+r+','+r+','+r+')';

	if ((dir==1&&r>153) || (dir==0&&r<238))

		fadeTimer = setTimeout("fadeBackground("+dir+")", FADE_SPEED);

	else

	{

		r = (dir==1)?153:238;

		d.style.backgroundColor = 'rgb('+r+','+r+','+r+')';

	}



}



function url_move(dir)			//dir = 1 for mouseover, 0 for mouseout

{

	var sx = document.getElementById('url').childNodes;

	var padLeft2 = parseInt(sx[2].style.left);

	padLeft2 += (dir==1)?-2:2;

	

	var padLeft6 = parseInt(sx[6].style.left);

	padLeft6 += (dir==1)?4:-4;

	

	sx[2].style.left = padLeft2+'px';

	sx[6].style.left = padLeft6+'px';

	if ((dir==1&&padLeft2>0) ||  (dir==0&&padLeft2<7))

		moveTimer = setTimeout("url_move("+dir+")", MOVE_SPEED);

	else

		fadeUrl(dir);

}



//final state of animation (called after the W and trow have moved to their proper places, in parallel to the fading)

function fadeUrl(dir)			//dir = 1 for mouseover, 0 for mouseout

{

	var sx = document.getElementById('url').childNodes;

	

	sx[2].style.left = (dir==1)?'0px':'7px';

	sx[4].style.left = (dir==1)?'0px':'7px';

	sx[6].style.left = (dir==1)?'0px':'7px';

	

	sx[0].style.display = (dir==1)?'inline':'none';

	sx[1].style.paddingLeft = (dir==1)?'0px':'82px';

	

	sx[3].style.display = (dir==1)?'inline':'none';

	sx[5].style.display = (dir==1)?'inline':'none';	

}