window.addEvent('domready',function() {

	function reset() {
		$$('div.col').each(function(e) {
			e.setStyle('opacity', 0);
		});
	}
	
	function animate() {
		reset();
		var i = 0;
		var li = $$('div.col');
		li.each(function(e) { 
			i += 300;
			setTimeout( function() {
				e.set('tween', {duration: 500, transition: 'back:in'}).tween('opacity', 0, 1);
			}, i);
		});
	}
	
	window.addEvent('load', animate);

	var mySlides = $$('.col');
	var myCaptions = $$('.caption');
	myCaptions.setStyle('opacity', 0);
	
	mySlides.each(function(el, i) {
		myCaptions.set('morph', {'duration': '300', 'transition' : 'quart:out', link : 'cancel'});
		el.addEvents({
			'mouseenter': function() {
				myCaptions[i].morph({
					'opacity' : 1,
					'height' : [0, 40]
				});
			},
			'mouseleave' : function() {
				myCaptions[i].morph({
					'opacity' : 0,
					'height' : [40, 0]
				});
			}
		});
	});
	
	$each($$('.fade'), function(el) {
		var original = el.getStyle('color');
		var morph = new Fx.Morph(el,{ 'duration':'300', link:'cancel' });
		el.addEvents({
			'mouseenter' : function() { morph.start({ 'color':'#333' }) },
			'mouseleave' : function() { morph.start({ 'color': original }) }
		});
	});
});