// Banner Animation Script

// Runs when DOM tree is complete
$(document).ready(function() {
	
	// pass in false if you don't want the animation to loop continuously.
	MFD.animateBanner(false);

});

// Animation object
var MFD = {

	animateBanner : function(loop) {
		// Bring left panel down
		$("#panel-a").slideDown(2000, function() {
			
			// Pull left panel's text into view
			$("#panel-a-text").css("display", "block").animate({marginLeft:"0px"}, 2000, function() {
				
				// Bring right panel down
				$("#panel-b").slideDown(2000, function() {
					
					// Pull right panel's text into view
					$("#panel-b-text").css("display", "block").animate({marginLeft:"0px"}, 2000, function() {
						
						// Cycle through the arrows
						var i, n = 0, s = "#a-";
						for (i=1; i <= 6; i += 1) {
							(function fade(i) {
								setTimeout(function() { $(s+i).fadeIn("slow", function() { $(this).fadeOut("slow"); }); }, n);
							})(i);
							n += 200;
						}
						
						// Delay a bit here so people can view the entire message
						setTimeout(function() {
							
							// Pull both text images back out of view and scroll the entire frame up to reveal the background
							$("#panel-a-text").animate({marginLeft:"475px"}, 1000, function() {
								$("#panel-a-text").css("display", "none"); 
							});
							$("#panel-b-text").animate({marginLeft:"-475px"}, 1000,	function() {
								setTimeout(function() {
									$("#panel-b-text").css("display", "none");
									$("#uber").css("background", "url(banner-base.jpg) 0 0 no-repeat");
									$("#phase-1").slideUp(2000, function() {
										
										// Slide plane in and fade tagline in
										$("#plane").css("display", "block").animate({marginLeft:"0px"}, 2000, function() {
										
											$("#tagline").fadeIn(2000, function() {
												
												// If loop was set to true, reset the animation and begin again
												if (typeof loop === 'boolean' && loop === true) {
													$("#uber").fadeOut(2000, function() {
														$("#uber").css("display", "block").css("background", "none");
														$("#tagline").css("display", "none");
														$("#plane").css("display", "none").css("marginLeft", "-475px");
														$("#phase-1").css("display", "block");
														$("#panel-a, #panel-b").css("display", "none");
														setTimeout(function() { MFD.animateBanner(true); }, 1000);
													});
												}
											});
										});	
									});
								}, 500);
							});
						}, 5000);
					});
				});
			});
		});
	}
};