$(document).ready(function() {
	// delay plugin by James Pedolse
	// http://james.padolsey.com/javascript/jquery-delay-plugin/
	$.fn.delay = function(time, callback){
		jQuery.fx.step.delay = function(){};
		return this.animate({delay:1}, time, callback);
	}
	
	// global variables
	var $elements = '.headSlide, .headSlideInfo';
	var $bubbles = '<div class="bubble1 bubbles"></div><div class="bubble2 bubbles"></div><div class="bubble3 bubbles"></div>';
	var $bubbleClass ='.bubbles';
	var $easingSelector = 'easeInOutCirc';
	$($elements).hide();
	
	// animate in the full head panel
	$('.headSlide').delay(300).fadeIn('slow');
	
	// animate in the cycle diagram
	$('.headSlide .diagram').css('opacity','0');
	$('.headSlide .diagram').animate({
		left: "15px",
		opacity: '1'
	}, 1200, $easingSelector);
	
	// animate in the bubble overlays
	$('.headSlide .diagram').append($bubbles);
	$($bubbleClass).css('opacity','0.7');
	$($bubbleClass)
	.delay(2000)
	.animate({
		opacity: '0'
	}, 1500, $easingSelector);
	
	// -----------------------
	// bubble animation loops
	// -----------------------
	
	// the variables
	var $bubbleStartOpacity = 0.7;
	var $bubbleEndOpacity = 0;
	var $loopStartSpeed = 550;
	var $loopEndSpeed = 500
	
	// start animation loop based on current page
	// this loops 3 times (dirty but works)
	if ($('body').is('#ama')) {
		$('.headSlide .bubble2')
		.animate({ opacity: $bubbleStartOpacity }, $loopStartSpeed )
		.animate({ opacity: $bubbleEndOpacity }, $loopEndSpeed )
		.animate({ opacity: $bubbleStartOpacity }, $loopStartSpeed )
		.animate({ opacity: $bubbleEndOpacity }, $loopEndSpeed )
		.animate({ opacity: $bubbleStartOpacity }, $loopStartSpeed )
		.animate({ opacity: $bubbleEndOpacity }, $loopEndSpeed )
	} else if($('body').is('#sse')) {
		$('.headSlide .bubble1')
		.animate({ opacity: $bubbleStartOpacity }, $loopStartSpeed )
		.animate({ opacity: $bubbleEndOpacity }, $loopEndSpeed )
		.animate({ opacity: $bubbleStartOpacity }, $loopStartSpeed )
		.animate({ opacity: $bubbleEndOpacity }, $loopEndSpeed )
		.animate({ opacity: $bubbleStartOpacity }, $loopStartSpeed )
		.animate({ opacity: $bubbleEndOpacity }, $loopEndSpeed )
	} else if ($('body').is('#ics')) {
		$('.headSlide .bubble3')
		.animate({ opacity: $bubbleStartOpacity }, $loopStartSpeed )
		.animate({ opacity: $bubbleEndOpacity }, $loopEndSpeed )
		.animate({ opacity: $bubbleStartOpacity }, $loopStartSpeed )
		.animate({ opacity: $bubbleEndOpacity }, $loopEndSpeed )
		.animate({ opacity: $bubbleStartOpacity }, $loopStartSpeed )
		.animate({ opacity: $bubbleEndOpacity }, $loopEndSpeed )
	}
	
	// start animation loop based on current page
	// this loops infinitely
	//	if ($('body').is('#ama')) {
	//		$('.headSlide .bubble2').everyTime(1, function(){
	//			$('.headSlide .bubble2').animate({
	//				opacity: $bubbleStartOpacity
	//			}, $loopStartSpeed ).animate({
	//				opacity: $bubbleEndOpacity
	//			}, $loopEndSpeed );
	//		});
	//	} else if($('body').is('#sse')) {
	//		$('.headSlide .bubble1').everyTime(1, function(){
	//			$('.headSlide .bubble1').animate({
	//				opacity: $bubbleStartOpacity
	//			}, $loopStartSpeed ).animate({
	//				opacity: $bubbleEndOpacity
	//			}, $loopEndSpeed );
	//		});
	//	} else if ($('body').is('#ics')) {
	//		$('.headSlide .bubble3').everyTime(1, function(){
	//			$('.headSlide .bubble3').animate({
	//				opacity: $bubbleStartOpacity
	//			}, $loopStartSpeed ).animate({
	//				opacity: $bubbleEndOpacity
	//			}, $loopEndSpeed );
	//		});
	//	}
	
	// stop the bubble animation after a set duration
	//$('.headSlide .bubbles').delay(20000).fadeOut();
	
	// animate in the panel text
	$('.headSlideInfo').delay(1500).fadeIn(1000);
	
	// animate in the panel page navigation buttons
	$('#headSliderNav')
	.delay(1600)
	.animate({
		bottom: '10px',
	}, 800, $easingSelector);
});