jQuery(document).ready(function($) {

	var	animationMultiplier = 2.4,
		context = $('div.anim-ready-to-crank');
	
		greenPeriod = 20000 / animationMultiplier,
		bluePeriod = greenPeriod * 6 / 13,
		gearsStopping = false,
		delayBeforeText = 2000 / animationMultiplier,
		textInSpeed = 7000 / animationMultiplier,  // ms to crank in
		gearsOutSpeed = 10000 / animationMultiplier;  // ms to scoot out

	// pointers to some objects
	var ctaText = $('.cta-text', context),
		ctaButton = $('.cta-button', context),
		banner = $('.banner-project-innovation', context),
		banner_down_outer = $('.banner-down-outer', context),
		banner_down_inner = $('div', banner_down_outer),
		banner_up = $('.banner-up', context),
		skipIntroButton = $('.skip-intro', context);

	var objs_to_remember = 
		  ['.greenGear1', '.greenGear2', '.blueGear', '.text1', '.text2', '.text3', '.text1-small', 
		   '.text2-small', '.text3-small', '.banner-project-innovation', '.banner-down-outer',
		   '.banner-up', '.cta-text', '.cta-button'];
		
	function initialize()
	{
		// PNG fix for IE7/IE8
		if ($.browser.msie && Number($.browser.version.replace( /\..*$/, '')) < 9)
		{
			$(['.cta-button img','.cta-text img']).each(function(key, sel) {
				var j = $(sel,context);
				if (j.attr('src').toLowerCase().indexOf('.png') > 0)
					j[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + j.attr('src') + "')";
			});
		}

		$(objs_to_remember).each(function(key, sel)
		{
			var j = $(sel, context);
			j.data('orig-css', {'top': j.css('top'), 'left': j.css('left'), 
								'display': j.css('display'), 'opacity': 1});
		});
		
		$('.greenGear1', context).data('end-css', {'top': -200, 'left': 800});
		$('.greenGear2', context).data('end-css', {'top': 600, 'left': 800});
		$('.blueGear', context).data('end-css', {'top': 600, 'left': 100});
		
		$('.text1-small', context).data('end-css', {'display':'block', 'opacity': 1});
		$('.text2-small', context).data('end-css', {'display':'block', 'opacity': 1});
		$('.text3-small', context).data('end-css', {'display':'block', 'opacity': 1});
		$('.text1', context).data('end-css', {'display':'none'});
		$('.text2', context).data('end-css', {'display':'none'});
		$('.text3', context).data('end-css', {'display':'none'});
		banner.data('end-css', $.extend({}, banner.data('orig-css'), {'display': 'block'}));
		banner_down_outer.data('end-css', $.extend({}, banner_down_outer.data('orig-css'), {'display': 'block'}));
		banner_up.data('end-css', $.extend({}, banner_down_inner.data('orig-css'), {'display': 'block'}));
		
		skipIntroButton.click(skipToEnd);
	
		setTimeout(getStarted, 250);  // wait 1/4 second ... might make IE happier/more in-sync.
	}
	
	function resetAll()
	{
		$(objs_to_remember).each(function(key, sel)
		{
			var j = $(sel, context);
			j.stop(true).css(j.data('orig-css'));
		});
		
		gearsStopping = true;
	}

	function getStarted()
	{
		resetAll();
		
		$('.text1',context).css({'width': '', 'height': ''});
		$('.text2',context).css({'width': '', 'height': ''});
		$('.text3',context).css({'width': '', 'height': ''});
		banner_up.css('height', 0);
		
		startRotations();
		textIn();
		
		skipIntroButton.show();
	}
	
	function startRotations()
	{
		gearsStopping = false;
		doGearRotation('#greenGear1', greenPeriod);
		doGearRotation('#greenGear2', greenPeriod, true);
		doGearRotation('#blueGear', bluePeriod);
	}

	function linearEasing(x,t,b,c,d) { return c*(t/d)+b; }
	function doGearRotation(jq_string, duration, backward)
	{
		var who = $(jq_string, context);
		who.data('stopped', gearsStopping);
		
		if (gearsStopping)
			return;

		who.rotate({
		   angle:0, 
		   animateTo: 360 * (backward ? -1 : 1), 
		   duration: duration,
		   callback: function() { doGearRotation(jq_string, duration, backward) },
		   easing: linearEasing
		});
	}
	
	function skipToEnd()
	{
		resetAll();
		
		$(objs_to_remember).each(function(key, sel)
		{
			var j = $(sel, context);
			j.css(j.data('end-css') || {});
		});

		var img_up = $('img', banner_up),
			img_up_height = img_up.outerHeight(true);
			
		banner_up.css({'top': '-=' + img_up_height, 'height': img_up_height});

		skipIntroButton.hide();
		
		ctaText.show();
		ctaButton.show();
		setupPulsate();
	}
	
	function textIn() 
	{
		$('.text1', context).delay(delayBeforeText).animate({'left': '65px'}, {easing: 'linear', duration: textInSpeed, complete: function() {
			var target = $('.text1-small', context),
				j = $('.text1', context),
				offsetX = 40,
				offsetY = -10;

			j.animate({'left':parseInt(target.css('left')) - (j.width() - target.width()) / 2 + offsetX, 
					   'top':parseInt(target.css('top')) - (j.height() - target.height()) / 2 + offsetY}, {duration: 7500 / animationMultiplier, 
								specialEasing: {'top': 'easeOutCubic', 'left': 'easeOutQuad'}
							});
		}});
		
		$('.text2', context).delay(delayBeforeText + textInSpeed * 0.75)
			.animate({'left': '45px'}, {easing: 'linear', duration: textInSpeed * 1.1, complete: function() {
			
				var target = $('.text2-small', context),
					j = $('.text2', context),
					offsetX = 40,
					offsetY = 0;
					
				j.animate({'left':parseInt(target.css('left')) - (j.width() - target.width()) / 2 + offsetX, 
						   'top':parseInt(target.css('top')) - (j.height() - target.height()) / 2 + offsetY}, {duration: 5000 / animationMultiplier, 
									specialEasing: {'top': 'easeOutQuint', 'left': 'easeOutQuad'}
								});
			}});

		$('.text3', context).delay(delayBeforeText + textInSpeed * 1.6)
			.animate({'left':'65px'}, {easing: 'linear', duration: textInSpeed * 1.2, complete: function() {

				var target = $('.text3-small', context),
					j = $('.text3', context),
					offsetX = 40,
					offsetY = 10;
					
				j.animate({'left':parseInt(target.css('left')) - (j.width() - target.width()) / 2 + offsetX, 
						   'top':parseInt(target.css('top')) - (j.height() - target.height()) / 2 + offsetY}, {duration: 1500 / animationMultiplier, 
									specialEasing: {'top': 'easeOutQuint', 'left': 'easeOutQuad'}, complete: function() {
	
						$('.text1', context).animate({'width': $('.text1-small').width(), 'top': parseInt($('.text1-small').css('top')), 'left': parseInt($('.text1-small').css('left'))}, {duration: 4000 / animationMultiplier, easing: 'easeInOutQuad', complete:
							function() { $('.text1-small').show(); $('.text1').hide(); }});
						$('.text2', context).animate({'width': $('.text2-small').width(), 'top': parseInt($('.text2-small').css('top')), 'left': parseInt($('.text2-small').css('left'))}, {duration: 4000 / animationMultiplier, easing: 'easeInOutQuad', complete:
							function() { $('.text2-small').show(); $('.text2').hide(); }});
						$('.text3', context).animate({'width': $('.text3-small').width(), 'top': parseInt($('.text3-small').css('top')), 'left': parseInt($('.text3-small').css('left'))}, {duration: 4000 / animationMultiplier, easing: 'easeInOutQuad', complete:
							function() { $('.text3-small').show(); $('.text3').hide(); }});
							
						gearsAway();
						bannerIn();
				}});
			}});
	}
	
	
	function gearsAway() 
	{
		var who = $('.greenGear1', context);
		who.animate(who.data('end-css'), {duration: gearsOutSpeed, easing: 'easeInQuad'});
		who = $('.greenGear2', context);
		who.animate(who.data('end-css'), {duration: gearsOutSpeed, easing: 'easeInQuad'});
		who = $('.blueGear', context);
		who.animate(who.data('end-css'), {duration: gearsOutSpeed, easing: 'easeInQuad', complete: function() { gearsStopping = true; } });
	}
	
	function bannerIn()
	{
		var targetY = banner.css('top');
			
		banner
			.delay(gearsOutSpeed * 0.6)
			.css({'display':'block','top': -150})
			.animate({'top': targetY}, 
					 {duration: 1200 / animationMultiplier, 
					  easing: 'easeOutQuint', 
					  complete: function() 
			{
			
				banner_down_outer.css('display', 'block');
				banner_up.css('display', 'block');
					
				var img_down_height = $('img', banner_down_inner).height(),
					img_down_start_pos = img_down_height + 10,
					img_up = $('img', banner_up),
					img_up_height = img_up.outerHeight(true);
				
				banner_down_inner.delay(500).css('margin-top', -img_down_start_pos).animate({'margin-top': -img_down_height / 2}, {duration: 1500 / animationMultiplier, easing: 'easeOutQuad',
					complete: function() {
						banner_up.animate({'top': '-=' + img_up_height, 'height': img_up_height}, {duration: 2500 / animationMultiplier, easing: 'easeInOutBounce', complete: ctaIn});
						banner_down_inner.animate({'margin-top':0}, {duration: 1500 / animationMultiplier, easing: 'easeInOutQuad'});
					}});
			}});
	}
	
	function ctaIn()
	{
		ctaText.fadeIn(1250);
		ctaButton.delay(750).fadeIn(1250, setupPulsate);
		
		skipIntroButton.fadeOut('fast');
	}
	
	function setupPulsate()
	{
		function pulsateButton() {
			ctaButton.fadeTo(2000, 0.65).fadeTo(2000, 1.0, pulsateButton);
		}
		
		ctaButton.off('mouseover mouseout');
		ctaButton.on('mouseover', function() { $(this).stop(true).fadeTo(300, 1.0); })
			.on('mouseout', pulsateButton);
			
		pulsateButton();
	}
	

	initialize();

});