var titleA, titleB, authorName;

function main(){
	_init();
	
	animateHeader();
}

function _init(){
	titleA = $$('img.title-the');
	titleB = $$('img.title-firestone');
	authorName = $('authorname');
	
	setInitialStyles();
}

function setInitialStyles(){
	titleA.invoke('hide');
	titleB.invoke('hide');
	
	titleA[0].setStyle('width: 311px; height: 500px; left: -196px; top: 0');
	titleA[1].setStyle('width: 300px; height: 500px; left: 108px; top: 0');
	titleA[2].setStyle('width: 300px; height: 500px; left: 406px; top: 0');
	
	titleB[0].setStyle('width: 162px; height: 500px; left: -250px; top: 0');
	titleB[1].setStyle('width: 47px; height: 500px; left: -150px; top: 0');
	titleB[2].setStyle('width: 179px; height: 500px; left: -100px; top: 0');
	titleB[3].setStyle('width: 167px; height: 500px; left: 0px; top: 0');
	titleB[4].setStyle('width: 162px; height: 500px; left: 200px; top: 0');
	titleB[5].setStyle('width: 162px; height: 500px; left: 300px; top: 0');
	titleB[6].setStyle('width: 162px; height: 500px; left: 400px; top: 0');
	titleB[7].setStyle('width: 167px; height: 500px; left: 500px; top: 0');
	titleB[8].setStyle('width: 162px; height: 500px; left: 600px; top: 0');
	
	authorName.setStyle('width: 0');
}

function animateHeader(){
	titleA[0].setStyle('opacity: 0;').show().morph(
		'opacity: 1; top: 90px; left: 194px; width: 28px; height: 45px;',
		{
			delay: 0.3,
			duration: 0.1,
			after: titleA1_animate
		});
}

function titleA1_animate(){
	titleA[1].setStyle('opacity: 0;').show().morph(
		'opacity: 1; top: 90px; left: 258px; width: 27px; height: 45px;',
		{
			duration: 0.1,
			after: titleA2_animate
		});
}
function titleA2_animate(){
	titleA[2].setStyle('opacity: 0;').show().morph(
		'opacity: 1; top: 90px; left: 326px; width: 27px; height: 45px;',
		{
			duration: 0.1,
			after: titleB0_animate
		});
}
function titleB0_animate(){
	titleB[0].setStyle('opacity: 0;').show().morph(
		'opacity: 1; top: 180px; left: 9px; width: 38px; height: 117px;',
		{
			duration: 0.1,
			after: titleB1_animate
		});
}
function titleB1_animate(){
	titleB[1].setStyle('opacity: 0;').show().morph(
		'opacity: 1; top: 180px; left: 65px; width: 11px; height: 117px;',
		{
			duration: 0.1,
			after: titleB2_animate
		});
}
function titleB2_animate(){
	titleB[2].setStyle('opacity: 0;').show().morph(
		'opacity: 1; top: 180px; left: 98px; width: 42px; height: 117px;',
		{
			duration: 0.1,
			after: titleB3_animate
		});
}
function titleB3_animate(){
	titleB[3].setStyle('opacity: 0;').show().morph(
		'opacity: 1; top: 180px; left: 157px; width: 39px; height: 117px;',
		{
			duration: 0.1,
			after: titleB4_animate
		});
}
function titleB4_animate(){
	titleB[4].setStyle('opacity: 0;').show().morph(
		'opacity: 1; top: 180px; left: 257px; width: 38px; height: 117px;',
		{
			duration: 0.1,
			after: titleB5_animate
		});
}
function titleB5_animate(){
	titleB[5].setStyle('opacity: 0;').show().morph(
		'opacity: 1; top: 180px; left: 315px; width: 38px; height: 117px;',
		{
			duration: 0.1,
			after: titleB6_animate
		});
}
function titleB6_animate(){
	titleB[6].setStyle('opacity: 0;').show().morph(
		'opacity: 1; top: 180px; left: 373px; width: 38px; height: 117px;',
		{
			duration: 0.1,
			after: titleB7_animate
		});
}
function titleB7_animate(){
	titleB[7].setStyle('opacity: 0;').show().morph(
		'opacity: 1; top: 180px; left: 434px; width: 39px; height: 117px;',
		{
			duration: 0.1,
			after: titleB8_animate
		});
}
function titleB8_animate(){
	titleB[8].setStyle('opacity: 0;').show().morph(
		'opacity: 1; top: 180px; left: 499px; width: 38px; height: 117px;',
		{
			duration: 0.1,
			after: authorname_animate
		});
}
function authorname_animate(){
	authorName.morph('width: 294px;', {
		delay: 1,
		duration: 3				 
	});
}

document.on('dom:loaded', main);