// For the animation on the kids overview page
$(function() {
	// Store some node references and hide them
	var $anim = $('#bgFiveKidsAnim');
	$anim.hide();
	
	$bg = $('#animBg');
	
	var $swoosh = $('#animSwoosh');
	$swoosh.css({
		bottom: '-50px',
		right: '-60px'
	});
	
	var $logo = $('#animLogo');
	$logo.hide();

	var $kid1 = $('#animKid1');
	var $kid2 = $('#animKid2');
	var $kid3 = $('#animKid3');
	var $kid4 = $('#animKid4');
	var $kid5 = $('#animKid5');

	var $kids = $('#bgFiveKidsAnim > .kid');
	var $blinks = $('#bgFiveKidsAnim > .blink');

	$kids.hide();
	$blinks.hide();
	
	// Return a random item from an array
	var randomFrom = function(arr) {
		return arr[Math.floor(Math.random() * arr.length)];
	};
	
	// Show and hide the blinking images randomly
	var startBlinking = function(timeBetweenBlinks, blinkLength, randomness) {
		var $blinker = $blinks[0];
		var blinkTimer = setInterval(function() {
			$blinker = $(randomFrom($blinks.not($blinker))); // The same kid can't blink twice in a row
			$blinker.show();
			
			var timer = setTimeout(function() {
				$blinker.hide();
			}, blinkLength);
		}, timeBetweenBlinks);
	};
					
	// Fade in the kids one by one
	var fadeInKids = function(dur) {
		$kid1.fadeIn(dur, function() {
			$kid2.fadeIn(dur, function() {
				$kid3.fadeIn(dur, function() {
					$kid4.fadeIn(dur, function() {
						$kid5.fadeIn(dur, function() {
							startBlinking(2000, 250);
						});
					});
				});
			});
		});
	};
	
	// Wait a second, then start the animation
	setTimeout(function() {
		$anim.fadeIn('slow', function() {
			$swoosh.animate({
				bottom: '-1px',
				right: 0
			}, 'slow', function() {
				$logo.fadeIn(2500); // This happens while the kids are fading in
				fadeInKids(500);
			});
		});
	}, 1000);
});