window.addEvent('domready', function() {
    fadeBox(1,10);
});

var config = {
	duration : 3000,
	transition : Fx.Transitions.Pow.easeOut
};

function fadeBox(start, end)
{
	fadeElement("box_1");
	fadeElement2("boxc_1");
}

function setBlock(id)
{
	$(id).setStyles(
	{
		display: 'block',
		opacity: 0
	});
}

function unsetBlock(id)
{
	$(id).setStyles(
	{
		display: 'none'
	});
}

function fadeElement(id)
{
	if(document.getElementById(id))
	{
		setBlock(id);
		var next_box = "box_" + (parseInt(id.substr(4)) + 1);
	
		var elementFade = new Fx.Morph(id, {duration: config.duration, transition: config.transition, onComplete: function()
		{
			if($(id).getStyle('opacity').toInt() == 1)
			{
				elementFade.start({'opacity': [1, 0]});
			}
			if($(id).getStyle('opacity').toInt() == 0)
			{
				unsetBlock(id);
				fadeElement(next_box);
			}
		}
		});
		
		elementFade.start({
			opacity: [0, 1]
		});
	}
	else
	{
		fadeElement("box_1")
	}
}

function fadeElement2(id)
{
	if(document.getElementById(id))
	{
		setBlock(id);
		var next_box = "boxc_" + (parseInt(id.substr(4)) + 1);
	
		var elementFade = new Fx.Morph(id, {duration: config.duration, transition: config.transition, onComplete: function()
		{
			if($(id).getStyle('opacity').toInt() == 1)
			{
				elementFade.start({'opacity': [1, 0]});
			}
			if($(id).getStyle('opacity').toInt() == 0)
			{
				unsetBlock(id);
				fadeElement2(next_box);
			}
		}
		});
		
		elementFade.start({
			opacity: [0, 1]
		});
	}
	else
	{
		fadeElement2("boxc_1")
	}
}