/* 
adapted from:
http://alan.edward.es/posts/cascaded-fade-effect-with-jquery-delay/ 
*/
function doCascade (delay) {
	var items = ["#pillar1", "#pillar2", "#pillar3"]; // Initiate an array
	$(items).each(function(i, text) {
		var item = items[i];
		$(item).delay(i * delay).fadeIn(); // Tell jQuery to delay the fadeIn by i * delay,
	});
}

/* 
adapted from:
http://stackoverflow.com/questions/476679/preloading-images-with-jquery
*/
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

$(document).ready(function() {
	
	$(['/gene/img/3pillars/pillar1_bg.jpg',
	   '/gene/img/3pillars/pillar2_bg.jpg',
	   '/gene/img/3pillars/pillar3_bg.jpg']).preload();
	
	doCascade(350); /* cascade the pillars in */
	
	/* enable fancybox clicks */
	$(".pillar a").fancybox({
		overlayShow: true,
		overlayOpacity: .7,
		overlayColor: '#000',
		transitionIn: 'fade',
		transitionOut: 'fade',
		padding: 0,
		width: 640
	});
	
});