/*

THINGS TO DO

------------



2. Possibly put everything within the end of the intro animation's final callback.



7. Set the background images to align according to the window-size variables mentioned in (3.)

8. Experiment with attaching divs to the mouse position (if possible), and then animate the background diagonal 'schadenfreude'

   to respond to the mouse position.





*/



$(document).ready(function() {


$('#omgoverlayh').hide();
$('#omgoverlayw').hide();
	//initial variables

	var fadeInTime = 150;

	var fadeOutTime = 300;

	var tempFade = 500;

	

	

	var height = $(window).height();

	var width = $(window).width();

	

	var heightHalf = height/2;

	var widthHalf = width/2;

	

	var schaden = widthHalf;

	var freude = widthHalf;

	

	

	//window resize function(s)

	function content_resize() { 

	

			//general variables

            var w = $( window ); 

            var H = w.height(); 

			var H2 = H/2;

			var width = $(window).width();

			var W2 = width/2;

			var W15 = width/1.5;

			var W8 = W2/16;

			

			

			

			//contentBox Resize

			var Houter = H/2.7;

			var Hinner = Houter-20;

			var Houter2 = H/2;

			var Hinner2 = Houter2-20;

			var contentHeight = $( '#content' ).height();	           

			var contentWidth = $('#content').width();

			var leftmargin = contentWidth/2;

			

			/*

			if(H > 768) {

				$( '#content' ).css( {height: Houter2} ); 

				//$( '#content' ).css( {width: W15} );

				//$( '#content' ).css( {marginLeft: W8} );

				$( '#textarea' ).css( {height: Hinner2} ); 	

			}

			else if(H < 768){

				$( '#content' ).css( {height: Houter} ); 

				//$( '#content' ).css( {width: W15} ); 

				//$( '#content' ).css( {marginLeft: W8} );

				$( '#textarea' ).css( {height: Hinner} ); 

			}

			*/

			

			//initial menu resize

			var menuTop = H2-125;	

			var menuWidth = $('#menuitems').width();

			var menuWidth2 = menuWidth/2;

			var menuLeft = W2-menuWidth2;

						

			$('#menuitems').css( {top: menuTop});	

			$('#menuitems').find("li").css( {float: "left"});

			$('#menuitems').find("ul").css( {display: "inline"});

			$('#menuitems').css( {marginLeft: menuLeft});

			

			

			$('#menuAtTop').css( {left: menuLeft});

			

			//content box center

			/*

			var content1W = $('#contentHolder').width();

			var content1W2 = content1W/2;

			var content1 = W2 - content1W2;

			$('#contentHolder').css( {left: content1});

			*/

			

			//content top resize

			var contentTop = (H2/3.3)-95;

			if($('#menuitems').is(':hidden')) {

				$('#content').css( {marginTop: contentTop});

			}

			

			//bigbg resize

				//var bigbg = H2-750;

				//$('#bigbg').css( {top: bigbg});

						

			//window too small overlay

			if(width < 960) {

				//$('#omgoverlayw').show();

			}

			if(width > 960) {

				//$('#omgoverlayw').hide();

			}

			

			if (H < 600) {

				//$('#omgoverlayh').show();

			}

			if (H > 600) {

				//$('#omgoverlayh').hide();

			}

			

        }

	

        $( window ).resize( content_resize ); 

        content_resize();  

	



	

	//set initial menu opacity

	//$("#menuitems").find("li").animate({opacity: 0}, 0);

	$("#menuitems").animate({opacity: 0}, 0);	

	

	//hide menuAtTop

	$("#menuAtTop").hide();

	

	//hide title tips

	//$("#menuitems").find("li").find("#title").hide();	

	

	//animate schaden and freude, and the menu intro

	$("#schaden").animate({right: widthHalf}, 2000, 'easeOutBounce', function(){});

	$("#freude").animate({left: freude}, 2000, 'easeOutBounce', function(){

		$("#schaden").animate({opacity: 0}, 2000, 'easeInExpo', function(){});

		$("#freude").animate({opacity: 0}, 2000, 'easeInExpo', function(){	

				$("#schaden").remove();

				$("#freude").remove();

		

		//animate menu items - Commented out to allow for IE's shitty handling of JS. See note 1 above.

		$("#menuitems").animate({opacity: 1}, 0, 'easeInExpo');

		

		$(".menu1").animate({opacity: 0}, 0, 'easeInExpo', function(){});

		$(".menu2").animate({opacity: 0}, 0, 'easeInExpo', function(){});

		$(".menu3").animate({opacity: 0}, 0, 'easeInExpo', function(){});

		$(".menu4").animate({opacity: 0}, 0, 'easeInExpo', function(){});

		$(".menu5").animate({opacity: 0}, 0, 'easeInExpo', function(){});

		$(".menu6").animate({opacity: 0}, 0, 'easeInExpo', function(){});

		$(".menu7").animate({opacity: 0}, 0, 'easeInExpo', function(){});

		$(".menu8").animate({opacity: 0}, 0, 'easeInExpo', function(){});

		$(".menu1").animate({opacity: 0.8}, 600, 'easeInExpo', function(){});

		$(".menu2").animate({opacity: 0.8}, 1000, 'easeInExpo', function(){});

		$(".menu3").animate({opacity: 0.8}, 1400, 'easeInExpo', function(){});

		$(".menu4").animate({opacity: 0.8}, 1800, 'easeInExpo', function(){});

		$(".menu5").animate({opacity: 0.8}, 2200, 'easeInExpo', function(){});

		$(".menu6").animate({opacity: 0.8}, 2600, 'easeInExpo', function(){});

		$(".menu7").animate({opacity: 0.8}, 3000, 'easeInExpo', function(){});

		$(".menu8").animate({opacity: 0.8}, 3400, 'easeInExpo', function(){});		

		

		

		

		$("#menuitems").find("li").animate({opacity: 0.8}, 0, 'easeInExpo', function() {

																						

																							//initial hover function

	$("#menuitems").find("li").hover (function() {

				$(this).find("#title").stop().animate({marginTop: "40px"}, 100);

				$(this).stop().animate({ opacity: 1 }, fadeOutTime, 'easeOutSine', function() {});

				},

		function() {

				$(this).find("#title").stop().animate({marginTop: "20px"}, 200);

				$(this).stop().animate({ opacity: 0.8 }, fadeOutTime, 'easeOutSine', function() {});

	});

																						

																						

																						});

		$("#menuitems").find("#pic").animate({opacity: 1}, 2000, 'easeInExpo');

		$("#menuitems").find("#title").animate({opacity: 1}, 2000, 'easeInExpo');

		//animate media player

		//$("#media").animate ({marginBottom: "0px"}, 4000, 'easeInOutExpo', function(){});

		

		});

	});

	

		

	//newsletter slide

	

	$('.arrowdown').hide();

	$('.arrowup').click(function() {

								 $('#newsletter').animate({bottom: "138px"}, 500, 'easeOutExpo');

								 $('.arrowup').animate({marginBottom: "170px"}, 500, 'easeOutExpo', function(){$('.arrowup').hide();

								 $('.arrowdown').show();});	

								 $('.arrowdown').animate({marginBottom: "170px"}, 0);

								 

								 });

	$('.arrowdown').click(function() {

								 $('#newsletter').animate({bottom: "110px"}, 500, 'easeOutExpo');

								 $('.arrowdown').animate({marginBottom: "142px"}, 500, 'easeOutExpo', function(){$('.arrowup').show();

								 $('.arrowdown').hide();});

								 $('.arrowup').animate({marginBottom: "142px"}, 0);

								 

								 

								 });							 

	

	//menuAtTop hover function

	$("#menuAtTop").find("li").hover (function() {

				$(this).find("#title").stop().animate({ marginTop: "80px"}, 500);

				$(this).stop().animate({marginTop: "40px"}, 500, 'easeOutBounce');

				},

		function() {

				$(this).find("#title").stop().animate({ marginTop: "20px"}, 500);

				$(this).stop().animate({marginTop: "0px"}, 500, 'easeInExpo');				

	});



		

		

	//set initial click function, and child hover function that initiates *after* click function

	$("#menuitems").find("li").click (function() {		 

	

		$("#menuitems").animate({ top: "-50px" }, 2000, 'easeOutExpo', function() {

			

			$("#menuitems").hide();

			$("#menuAtTop").show();

			$("#menuAtTop").find("li").animate({opacity: 1}, 500, 'easeInExpo');

		

		});

		

			//contentBox Resize

			var w = $( window ); 

            var H = w.height(); 

			var H2 = H/2;

			var width = $(window).width();

			var Houter = H/2.7;

			var Hinner = Houter-20;

			var Houter2 = H/2;

			var Hinner2 = Houter2-20;

			var contentHeight = $( '#content' ).height();	

			var contentTop ="7%";

			

			

			

		//check what menu item was clicked and load the content accordingly

		if ($(this).hasClass("menu1")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {

				$("#content").removeClass().addClass("content1").load("content/menu1.php", function(){

			

			//slide down the content box					

			$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});});

		} 

		else if ($(this).hasClass("menu2")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {			

				$("#content").removeClass().addClass("content2").load("content/menu2.php", function(){

			

			//slide down the content box					

			$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});});

		} 

		else if ($(this).hasClass("menu3")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {

				$("#content").removeClass().addClass("content3").load("content/menu3.php", function(){

			

			//slide down the content box					

			$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});});

		} 

		else if ($(this).hasClass("menu4")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {		

				$("#content").removeClass().addClass("content4").load("content/menu4.php", function(){

					//slide down the content box			

					$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});

				});

				

			

		} 

		else if ($(this).hasClass("menu5")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {

				$("#content").removeClass().addClass("content5").load("content/menu5.php", function(){

			

			//slide down the content box					

			$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});});

		} 

		else if ($(this).hasClass("menu6")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {			

				$("#content").removeClass().addClass("content6").load("content/menu6.php", function(){

			

			//slide down the content box					

			$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});});

		} 

		else if ($(this).hasClass("menu7")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {

				$("#content").removeClass().addClass("content7").load("content/menu7.php", function(){

			

			//slide down the content box					

			$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});});

		} 

		/*

		else if ($(this).hasClass("menu8")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {	

				$("#content").removeClass().addClass("content8").load("content/menu8.php", function(){

			

			//slide down the content box					

			$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});});

		}  */

		

		

	});	

	

	

	//set TOP click function, and child hover function that initiates *after* click function

	$("#menuAtTop").find("li").click (function() {		 

		//contentBox Resize

		var w = $( window ); 

            var H = w.height(); 

			var H2 = H/2;

			var width = $(window).width();

			var Houter = H/2.7;

			var Hinner = Houter-20;

			var Houter2 = H/2;

			var Hinner2 = Houter2-20;

			var contentHeight = $( '#content' ).height();	

			var contentTop = "7%";

		

		//check what menu item was clicked and load the content accordingly

		if ($(this).hasClass("menu1")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {

				$("#content").removeClass().addClass("content1").load("content/menu1.php", function(){

			

			//slide down the content box					

			$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});});

		} 

		else if ($(this).hasClass("menu2")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {			

				$("#content").removeClass().addClass("content2").load("content/menu2.php", function(){

			

			//slide down the content box					

			$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});});

		} 

		else if ($(this).hasClass("menu3")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {

				$("#content").removeClass().addClass("content3").load("content/menu3.php", function(){

			

			//slide down the content box					

			$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});});

		} 

		else if ($(this).hasClass("menu4")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {		

				$("#content").removeClass().addClass("content4").load("content/menu4.php", function(){

					//slide down the content box			

					$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});

				});

				

			

		} 

		else if ($(this).hasClass("menu5")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {

				$("#content").removeClass().addClass("content5").load("content/menu5.php", function(){

			

			//slide down the content box					

			$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});});

		} 

		else if ($(this).hasClass("menu6")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {			

				$("#content").removeClass().addClass("content6").load("content/menu6.php", function(){

			

			//slide down the content box					

			$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});});

		} 

		else if ($(this).hasClass("menu7")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {

				$("#content").removeClass().addClass("content7").load("content/menu7.php", function(){

			

			//slide down the content box					

			$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});});

		} /*

		else if ($(this).hasClass("menu8")) {		

			

			//slide up the content box

			$("#contentHolder").animate({marginTop: "-500px"}, 1000, 'easeInOutExpo', function() {	

				$("#content").removeClass().addClass("content8").load("content/menu8.php", function(){

			

			//slide down the content box					

			$("#contentHolder").animate({marginTop: contentTop}, 2000, 'easeInOutExpo', function() {});	

																									});});

		} */

		

	});	

	



	

	

});