$(function(){
	var
		oTransformer = {
			steps: [$(".transformer_step-1"), $(".transformer_step-2"), $(".transformer_step-3")],
			container: $(".transformer"),
			animated: false
		},
		jSwitcher = $("#content-switcher"),
		jSmallPeople = $(".small-people");
	
	initHide();
	
	$.eventBus.bind("sitemap.tab-switch", adjustContentHeight);
	$.eventBus.bind("tooltip.global-open", adjustContentHeight);
	$.eventBus.bind("tooltip.global-close", function(){
		$("#content").removeAttr("style");
	});
	
	function adjustContentHeight() {
		$("#content").css("min-height", $("#sitemap-popup").height());
	}
	
	
	var jActivationAreas = $("#content-switcher, .about-link .area, .transformer_step-3_click-area"); 
	
	
	if ($.browser.msie) {
		jActivationAreas.click(animateSteps_jQuery);
	} else {
		jActivationAreas.click(animateSteps_jTweener);
	}
	
	
	function initHide() {
		var sState;  
		
		if (window.location.hash == "#full" || window.location.hash == "#short") {
			sState = window.location.hash;
		}
		
		if (sState == "#full") {
			oTransformer.steps[0].css("opacity", 0).hide();
			oTransformer.steps[2].show();
			
			jSwitcher.addClass("full");
			
			jSmallPeople.css("margin-top", -10);
			oTransformer.container.css({ top: 0, marginBottom: 90 });
		} else {
			oTransformer.steps[0].show();
			oTransformer.steps[2].css("opacity", 0).hide();
		}
		
		$(document.documentElement).removeClass("content-state_short content-state_full");
		
		oTransformer.steps[1].css("opacity", 0).hide();
		
		if (sState && window.location.hash != sState) {
			window.location.hash = sState;
		}
	}
	
	function switchState(wtf){
		jSwitcher.toggleClass("full");
		
		if (window.location.hash != "#full") {
			window.location.hash = "#full";
			
			//oTransformer.steps[0].hide();
		} else {
			window.location.hash = "#short";
			
			//oTransformer.steps[2].hide();
		}
	}
	
	function animateSteps_jTweener(){

		if (oTransformer.animated) {
			return;
		}
		
		oTransformer.animated = true;
		
		var
			step1, step2, step3,
			easing1 = "easeOutCirc",
			easing2 = "easeInCirc",
			oAnimOptions = {
				time: ($.browser.msie && $.browser.version < 9) ? 5 : 0.5,
				transition: easing1
			},
			oStep2AnimOptions = { time: oAnimOptions.time * 2/3 },
			oMarginAnimOptions = { time: oAnimOptions.time * 1.75 };
		
		step1 = oTransformer.steps[0];
		step2 = oTransformer.steps[1];
		step3 = oTransformer.steps[2];
		
		oTransformer.animated = true;
		
		if (window.location.hash != "#full"){
			oTransformer.steps[1].show();
			oTransformer.steps[2].show();
			
			$t(step1, oAnimOptions)
				.tween({ opacity: 0, transition: easing2 });

			$t(step2, oAnimOptions, oStep2AnimOptions)
				.tween({ delay: oAnimOptions.time / 3,	opacity: 0.75, transition: easing1 })
				.tween({ delay: oAnimOptions.time, 		opacity: 0, transition: easing2 });

			$t(step3, oAnimOptions)
				.tween({ delay: oAnimOptions.time, opacity: 1, transition: easing1, onComplete: function(){ oTransformer.animated = false; } });
			
			$t(jSmallPeople, oAnimOptions, oMarginAnimOptions)
				.tween({ marginTop: -parseInt(jSmallPeople.css("margin-top")) });
			$t(oTransformer.container, oAnimOptions, oMarginAnimOptions)
				//.tween({ marginTop: -parseInt(oTransformer.container.css("margin-top")), onComplete: function(){ oTransformer.steps[0].hide() }	});
				//.tween({ top: Math.abs(parseInt(oTransformer.container.css("top"))) - 260, onComplete: function(){ oTransformer.steps[0].hide() }	});
				.tween({ top: 0, marginBottom: 90, onComplete: function(){ oTransformer.steps[0].hide() } });

		} else {
			oTransformer.steps[0].show();
			oTransformer.steps[1].show();
			
			//oAnimOptions.transition = easing2;
			
			$t(step3, oAnimOptions)
				.tween({ opacity: 0, transition: easing2, time: oAnimOptions.time/3 });
			
/*			$t(step2, oAnimOptions, oStep2AnimOptions)
				.tween({ delay: 0 * oAnimOptions.time / 3, time: oAnimOptions.time / 2,	opacity: 0.75, transition: easing1, onComplete: function(){ console && console.log('end 1') } })
				.tween({ delay: oAnimOptions.time * 2/3, 		opacity: 0, transition: easing2, onComplete: function(){ console && console.log('end 2') } });
*//**/			
			$t(step2, oAnimOptions, oStep2AnimOptions)
				.tween({ opacity: 0.75, transition: easing1, time: oAnimOptions.time * 0.5,
					onComplete: function(){
						$t(step2, oAnimOptions, oStep2AnimOptions).tween({ opacity: 0, transition: easing2, time: oAnimOptions.time * 0.5 });
					}
				})
/**/			
			$t(step1, oAnimOptions)
				.tween({ delay: oAnimOptions.time * 0.5, opacity: 1, transition: easing1, onComplete: function(){ oTransformer.animated = false; } });
			
			oMarginAnimOptions.delay = oAnimOptions.time * 0.25;
			oMarginAnimOptions.time = oAnimOptions.time;
			//oMarginAnimOptions.transition = easing2;
			oMarginAnimOptions.transition = "linear";
			
			$t(jSmallPeople, oAnimOptions, oMarginAnimOptions)
				.tween({ marginTop: -parseInt(jSmallPeople.css("margin-top")) });
			$t(oTransformer.container, oAnimOptions, oMarginAnimOptions)
				//.tween({ marginTop: -parseInt(oTransformer.container.css("margin-top")), onComplete: function(){ oTransformer.steps[2].hide() }	});
				//.tween({ top: Math.abs(parseInt(oTransformer.container.css("top"))) - 260, onComplete: function(){ oTransformer.steps[2].hide() }	});
				.tween({ top: -260, marginBottom: -130, onComplete: function(){ oTransformer.steps[2].hide() } });
		}

		setTimeout(switchState, oAnimOptions.time * 3);
		
		return false;
	}
	
	function animateSteps_jQuery(){

		if (oTransformer.animated) {
			return;
		}
		
		oTransformer.animated = true;
		
		var
			step1, step2, step3,
			oAnimOptions = {
				time: 500
			},
			oStep2AnimOptions = { time: oAnimOptions.time * 2/3 },
			oMarginAnimOptions = { time: oAnimOptions.time * 1.75 };
		
		step1 = oTransformer.steps[0];
		step2 = oTransformer.steps[1];
		step3 = oTransformer.steps[2];
		
		oTransformer.animated = true;
		
		if (window.location.hash != "#full"){
			oTransformer.steps[1].show();
			oTransformer.steps[2].show();
			
			step1.fadeOut(oAnimOptions.time);
			
			step2
				.animate({ opacity: 0.75 }, oStep2AnimOptions.time)
				.fadeOut(oStep2AnimOptions.time);
			
			step3.show().delay(oAnimOptions.time).animate({ opacity: 1 }, oAnimOptions.time).eq(0).show(0, function(){ switchState(); oTransformer.animated = false; });
			
			jSmallPeople.animate({ marginTop: -parseInt(jSmallPeople.css("margin-top")) }, oMarginAnimOptions.time)
			
			oTransformer.container.animate({
				top: 0,
				marginBottom: 90
			}, oMarginAnimOptions.time, function(){ oTransformer.steps[0].hide() })

		} else {
			oTransformer.steps[0].show();
			oTransformer.steps[1].show();
			
			step3.fadeOut(oAnimOptions.time);
			
			step2
				.animate({ opacity: 0.75 }, oStep2AnimOptions.time)
				.fadeOut(oStep2AnimOptions.time);
			
			step1.show().delay(oAnimOptions.time).animate({ opacity: 1 }, oAnimOptions.time).eq(0).show(0, function(){ switchState(); oTransformer.animated = false; });
			
			jSmallPeople.animate({ marginTop: -parseInt(jSmallPeople.css("margin-top")) }, oMarginAnimOptions.time)
			
			oTransformer.container.animate({
				top: -260,
				marginBottom: -130
			}, oMarginAnimOptions.time, function(){ oTransformer.steps[2].hide() });

		}
		
		return false;
	}
	
	function animateSteps_jQuery_(){

		if (oTransformer.animated) {
			return;
		}
		
		var
			step1, step2, step3,
			iStepDuration = 150;
		
		step1 = oTransformer.steps[(window.location.hash == "#full") ? 2 : 0];
		step2 = oTransformer.steps[1]
		step3 = oTransformer.steps[(window.location.hash == "#full") ? 0 : 2];
		
		step1.show().fadeOut(iStepDuration, "linear").hide(0);
		step2.show().delay(iStepDuration / 2).fadeIn(iStepDuration * 2/3, "linear");
		step2.fadeOut(iStepDuration * 2/3, "linear");
		step3.delay(iStepDuration * 4/3).fadeIn(iStepDuration, "linear").eq(0).show(0, swtichState);
		
		jSmallPeople.animate({ marginTop: -parseInt(jSmallPeople.css("margin-top")) }, iStepDuration * 4/3, "linear");
		oTransformer.container.animate({ marginTop: -parseInt(oTransformer.container.css("margin-top")) }, iStepDuration * 4/3, "linear");
	}

});