$(document).ready(function () {

/* overflow removed so that no scrollbars appear until page is calculated -> overflow:auto added again at the end of this js*/
$("body").css({overflow:"hidden"});
$("body").removeClass("noscript");
	
		
	/* both fade in when image is loaded, see below... otherwise it jumps */
	$(".bgimg").css({ display:"none"}); 
	
	
	/* ----------------------------------- */
	/* --- FIX FOR SCROLLBARS IN OPERA --- */
	/* ----------------------------------- */	
	
	$(function() {
		if ($(document.documentElement).css('overflow-y')) {
			$(document.documentElement).css('margin-bottom', 0);
		}
	});
	
	/* --------------- */
	/* --- MARQUEE --- */
	/* --------------- */
	
	if ($("#marqueecontainer").length > 0) {
	
		var marqueecontainer = $("#marqueecontainer");
		var marqueewidth = $("#marqueeitem").width()*(-1);	// Negative Value of the maximum Marquee Width
		
		/* Since all Marquee Content ist repeated 3 times, #marqueecontainer will be set three times the content width */
		var divwidth = marqueewidth * (-3);
		marqueecontainer.css({width:divwidth});
	
		/* to prevent instable movement, complete fade in first before initializing event functions */
		marqueecontainer.css({display:"none"});
		marqueecontainer.fadeIn(4000,function() {
			marqueeRepeat(marqueewidth);
			setmouseenter();
			setmouseleave(marqueewidth);
		});
		
		function marqueeRepeat(marqueewidth) {
			marqueecontainer.animate({marginLeft:marqueewidth}, 15000, "linear", function() {
				marqueecontainer.css({marginLeft:"0px"});
				marqueeRepeat(marqueewidth);
			});
		}
		
		function setmouseenter() {
			marqueecontainer.mouseenter(function() {
				marqueecontainer.stop();
			});
		}
		
		function setmouseleave(marqueewidth) {
			marqueecontainer.mouseleave(function() {
		
				var marqueeAlreadyMoved = marqueecontainer.css("margin-left");	
		
				/* removing "px" from information */
				var cutoffPX = marqueeAlreadyMoved.length - 2;
				var marqueetemp = marqueeAlreadyMoved.charAt(0);
				for (var i=1; i<cutoffPX; i++) {
					marqueetemp = marqueetemp + marqueeAlreadyMoved.charAt(i);
				}			
				marqueeAlreadyMoved = marqueetemp;
				
				/* Depending on how much already moved, subtract the time it takes less to finish move */
				var restEndurance = ((marqueewidth - marqueeAlreadyMoved) * 15000) / marqueewidth; 
				marqueecontainer.stop().animate({marginLeft:marqueewidth}, restEndurance, "linear", function() {
					marqueecontainer.css({marginLeft:"0px"});
					marqueeRepeat(marqueewidth);
				});
			});	
		}
	}
		
	/* ---------------- */
	/* --- TOOLTIPS --- */
	/* ---------------- */
	
	var aktiv1 = false;
	var aktiv2 = false;

	var tooltip = $('#tooltip'); //var tooltip "#tooltip" is used for the tooltip itself, ".tooltip" is the product with the necessary information, upon which the tooltip is displayed	
	
    tooltip.css({display:"none"}); 	//not displaying tooltip on load

	/* follow mouse */
 	$().mousemove(function(e) {
		mouseX = e.pageX + 8;
		mouseY = e.pageY - tooltip.height() + 25;  		
		tooltip.css({left:mouseX});
		tooltip.css({top:mouseY});
	});
	
	/* init fadeOut */
 	$(".tooltip").mouseleave(function(e) {
		aktiv1 = window.setTimeout(fadeOut, 300);
	});
	
	/* init fadeIn, feeding tooltip */	
	$(".tooltip").mouseenter(function(e) {
  	 	var title = $(this).find(".tooltiptitle").text(); //get class tooltiptitle for text
    	var alt = $(this).find("img").attr("alt"); //get alt-tag of image for text
    	var longtext = $(this).find(".tooltiplongtext").text(); // optional: get long text
    	
    	$("#ttH1").text(title);
    	
    	var text = '';
    	var alt = $(this).find("img").attr("alt"); //get alt-tag of image for text
    	var longtext = $(this).find(".tooltiplongtext").text(); // optional: get long text
      if (alt) text = alt;
      if (longtext) text = longtext;
      $("#ttP").text(text);
      
     	aktiv2 = window.setTimeout(fadeIn, 300); //fadeIn	
	});
	
 	function fadeIn() {
 		tooltip.stop().fadeIn(200, function () {
 			tooltip.css({opacity:"1"}); //In case it doesnt fully fade in, opacity is set to 1 afterwards
 		});
	}
	
	function fadeOut() { 
	 	tooltip.stop().fadeOut(200, function() {
			tooltip.css({opacity:"0"}); //In case it doesnt fully fade in, opacity is set to 0 afterwards
	 	});
	}	
	
	/* ------------------ */
	/* --- NAVIKARTEN --- */
	/* ------------------ */
	
	if ($(".naviCardContent.third").length > 0) {
	
		var naviCardTop = "164px"; //Setting a Standard value and move content down
		$(".naviCardContent.third").css({top:naviCardTop});
		
		$(".naviCard").mouseenter(function() {
			var naviCard = $(this).find(".naviCardFrame");
				var that=naviCard;
				$(naviCard).find(".naviCardContent").stop().animate({top:"0px"}, 1000, "swing", function() {
					$(that).css({overflow:"auto"});
				});
					
		});
				
		$(".naviCard").mouseleave(function() {
			var naviCard = $(this).find(".naviCardFrame");
				$(naviCard).css({overflow:"hidden"});
				$(naviCard).scrollTop(0);
				$(naviCard).find(".naviCardContent").stop().animate({top:naviCardTop}, 1000, "swing");
			
		});
	}
	
	/* ------------------------------------- */
	/* --- SETTING HEIGHT OF DIV CONTENT --- */
	/* ------------------------------------- */
	
	/* TODO: set variable height of contentdetail */
	var contentHeight;
	var contentHeight1;
	var contentHeight2;

	/* --- ContentHeight1: normal floating content --- */
	contentHeight1 = $("#contentwrapper").height(); //gets height of content
	
	/* --- ContentHeight2: absolutely positioned content --- */	
	if ($("#contentfull div:last").length > 0) {				
		var contentfullLast = $("#contentfull div:last");
		var pos = contentfullLast.position();
		contentHeight2 = pos.top + contentfullLast.height();
	}else{
		contentHeight2 = 0;
	}

	/* --- the higher value is the necessary value to work with --- */
	if (contentHeight1 > contentHeight2) {
		contentHeight = contentHeight1;
	}else{
		contentHeight = contentHeight2;
	}
	
	/* Content div is set on load, resize and scroll */
	setContentDiv();
	$(window).resize(setContentDiv);
	$(window).scroll(setContentDiv);
	
	function setContentDiv() {
		var winHeight = $(window).height();
		var bgHeight = winHeight - 119;	// height of content div is browser height minus head height

		if ($('#contentdetail').length == 0) { // if detail page exists, content window is placed below it. no adaptation of height of div because its not possible to read out the height of the above element if images within are hidden
			bgHeight = bgHeight + $(window).scrollTop(); // onscroll, adapt bgHeight			
			if (contentHeight < bgHeight) { //compare if content or window is higher and set height of content div
				$('#contentfull').css({height:bgHeight}); //end of div at window bottom
			}else{
				$('#contentfull').css({height:contentHeight}); //end of div at window bottom
			}
		}
	}

	/* -------------------------------- */
	/* --- SETTING BACKGROUND IMAGE --- */
	/* -------------------------------- */
	
	
	var imgProp;
	var imgWidth;
	var imgHeight;
	
	
	var bgimg = $(".bgimg");
	imgWidth = bgimg.width();	
	imgHeight = bgimg.height();

	/* --- Resizing background image on resizing background --- */
	$(window).resize(resizeBG);
	
	
	/* checks if image has width already */
	var widthcheck = $(".bgimg").css("width");
	
	/* when width is still auto, wait until image is loaded to execute resizing and content fade in */
	if (widthcheck == "auto") {
			$(".bgimg").load(function() {
				$(".bgimg").removeAttr("width").removeAttr("height");
				imgWidth = 1600; // $(".bgimg").width();
				imgHeight = 1200; // $(".bgimg").height();
				imgProp = imgWidth / imgHeight;
				resizeBG();
				/*$("#contentwrapper").fadeIn(350);*/
			});
	}else{ /* Opera workaround: Doesnt execute .load() function above when image is already in cage. So check if image has a width other than "auto" */
		$(".bgimg").removeAttr("width").removeAttr("height");
		imgWidth = 1600; // $(".bgimg").width();
		imgHeight = 1200; // $(".bgimg").height();
		imgProp = imgWidth / imgHeight;
		resizeBG();
		/*$("#contentwrapper").fadeIn(350);*/
	}
	/*DIE FOLGENDE FUNKTION ERSETZT DAS KLEINE BILD DURCH DAS HOCHAUFLÖSENDE*/
	swapImg(imgWidth, imgHeight); // see standard.tpl: swaps the img src to a higher quality image if its fully loaded
	
	function resizeBG() {
		/* reset values */
		var margintop = 0;
		var marginleft = 0;
		
		/* aspect ratio of window */
		var winWidth = $(window).width();
		var winHeight = $(window).height();
		var winProp = winWidth / winHeight;

		/* differences window and image ratio */
		var totalProp = winProp / imgProp;

		/* if browser window too high */
		if (totalProp < 0.8) {
			bgimg.css({ height:winHeight });			
			newWidth = ((winHeight * imgWidth)/imgHeight) * 0.9;
			bgimg.css({ width:newWidth });		
			marginleft = -((newWidth - winWidth) / 2);
			bgimg.css({ marginLeft:marginleft });
			bgimg.css({ marginTop:"0px" });
			$(".bgimg").fadeIn(350);
			$("#background").css({ overflowX: "hidden" });
			$("#background").css({ overflowY: "auto" });
			
		/* if browser window too wide */
		}else if(totalProp > 1.1) {
			bgimg.css({ width:winWidth });			
			newHeight = ((winWidth * imgHeight)/imgWidth) * 0.91;
			bgimg.css({ height:newHeight });			
			margintop = -((newHeight - winHeight) / 2);
			bgimg.css({ marginTop:margintop });
			bgimg.css({ marginLeft:"0px" });
			$(".bgimg").fadeIn(350);
			$("#background").css({ overflowX: "auto" });
			$("#background").css({ overflowY: "hidden" });

		/* win ratio = image ratio */		
		}else{
			bgimg.css({ width:winWidth });
			bgimg.css({ height:winHeight });
			bgimg.css({ marginLeft:marginleft });
			bgimg.css({ marginTop:margintop });
			$(".bgimg").fadeIn(350);
			$("#background").css({ overflowX: "hidden" });
			$("#background").css({ overflowY: "hidden" });
		}
	}
	
	/* ----------------------- */
	/* --- CAMERA FUNCTION --- */
	/* ----------------------- */
	
	/* Mouseover function */
	$("#camera").mouseover(function() {
		$(this).addClass("hover");
	});
	
	$("#camera").mouseout(function() {
		$(this).removeClass("hover");
	});
	
/* --- OVERFLOW ADDED IN THE END AGAIN --- */
	
	$("body").css({overflow:"auto"});
	
});

/* --- COLORSWITCHES --- */

function toggleContent(id, picsmax) { /* Funktion tauscht Bilder und aktiven Button aus. picsmax: Anzahl der Bilder */

	var e;
	for (var i = 0; i <= picsmax; i++) {
		e = document.getElementById('content'+i);
		if (e) e.style.display = (id == 'content'+i) ? 'block' : 'none';
	}
	var contentmax = picsmax++; /* Alle Bilder + 1 Textfeld */
	for (var i = 0; i <= contentmax; i++) {
		e = document.getElementById('content'+i+'_lnk');
		if (e) e.className = (id == 'content'+i) ? 'active' : '';
	}
	return false;
}

/* Only necessary if picture stays on click, TODO: remove */

var activeButton = "content1"; /* In dieser Variable wird bei Click der aktive (angeklickte) Punkt gespeichert */

function toggleContentClick(id, picsmax) { /* Funktion tauscht Bilder und aktiven Button aus. picsmax: Anzahl der Bilder */
	activeButton = id; /* Wenn auf einen Button geklickt wird, soll zukünftig beim Mouseout auf diesen zurückspringen */
	toggleContent(id, picsmax);
	return false;
}

function mouseOut(picsmax) {
	toggleContent(activeButton, picsmax); /* springt zurück auf den gerade aktiven Punkt */
	return false;
}

var contentHidden = false;

function cameraSwitch() {
	if (contentHidden==false) {
		$("#contentwrapper").css({display:"none"});	
	/*	$("#contentfull").css({display:"none"});
		$("#contentdetail").css({display:"none"});		*/
		$("#breadcrumb").css({display:"none"});
		$("#marqueecontainer").css({display:"none"});		
		$("#backgroundtitle").css({display:"block"});
		contentHidden = true;
	}else if (contentHidden==true) {
		$("#contentwrapper").css({display:"block"});
	/*	$("#contentfull").css({display:"block"});
		$("#contentdetail").css({display:"block"});			*/
		$("#breadcrumb").css({display:"block"});
		$("#marqueecontainer").css({display:"block"});	
		$("#backgroundtitle").css({display:"none"});		
		contentHidden = false;
	}
	return;
}