var i = 0;
	var stopp = false;
	var letzte;
	var interval = 5000;
	var big_width = "167px";
	var big_height = "125px";
	var bild = new Array();	
	bild[4] = "big1.png";
	bild[0] = "big2.png";
	bild[1] = "big3.png";
	bild[2] = "big4.png";
	bild[3] = "big5.png";
	bild[5] = "big6.png";
	bild[6] = "big8.png";
	function sleep(milliseconds) {
	  var start = new Date().getTime();
	  for (var i = 0; i < 1e7; i++) {
		if ((new Date().getTime() - start) > milliseconds){
		  break;
		}
	  }
	}
	
	function ausblenden ()
	{
		for(f = 0 ;  f<= 15 ; f++){
			$("#bildtext" + f).css ("display", "none");
		}	
	}

	function wechsel ()
	{
		jetzt = new Date().getTime();
		if ((jetzt - letzte) < (interval - 100)) {		
		} else {
			if (stopp == true) return 0;			
			$("#text").html(bild.length + " - " + i);
			if (i > bild.length -1){
				i = 0;
			}
			jQuery(document).ready(function(){
				$("#bild").ImageSwitch({Type:"FadeIn", NewImage: bild[i]}); 
				for(f = 0 ;  f<= bild.length -1; f++){
					$("#bildtext" + f).css ("display", "none");
				}
				$("#bildtext" + i).css ("display", "block");
			});
			i++;
			letzte = new Date().getTime();
		}
		if (stopp == true) return 0;
		if (!stopp) window.setTimeout("wechsel()", interval);
				
	}




	jQuery(document).ready(function(){
		stopp = false;
		var breite;
		breite = screen.availWidth;
		links = breite / 2  - 600
		$("#footer").css ("left", links);
		$("#bildtext4").css ("display", "block");
		window.setTimeout("wechsel()", interval);

		$("#btn2").click ( function() {
			stopp = true;
		});
	
		$("#button1").mouseover (function() {
			stopp = true;
			$("#bild").ImageSwitch({Type:"FadeIn", NewImage: "bild1.png"}); 
		});


	$("#button2").mouseover (function() {
		stopp = true;
		$("#bild").ImageSwitch({Type:"FadeIn", NewImage: "big1.png"}); 
		$("#button2").animate ({ top: "120px"}, 100);
		$("#button4").animate ({ top: "130px"}, 100);
		$("#button3").animate ({ top: "130px"}, 100);
		$("#button5").animate ({ top: "130px"}, 100);
		$("#button6").animate ({ top: "130px"}, 100);
		$("#button7").animate ({ top: "130px"}, 100);
		$("#button8").animate ({ top: "130px"}, 100);
		ausblenden();
		$("#bildtext4").css ("display", "block");
	});
	
		$("#button3").mouseover (function() {
			$("#button2").animate ({ top: "130px"}, 100);
			$("#button4").animate ({ top: "130px"}, 100);
			$("#button3").animate ({ top: "120px"}, 100);
			$("#button5").animate ({ top: "130px"}, 100);
			$("#button6").animate ({ top: "130px"}, 100);
			$("#button7").animate ({ top: "130px"}, 100);
			$("#button8").animate ({ top: "130px"}, 100);
			stopp = true;
			ausblenden();
			$("#bildtext0").css ("display", "block");
			$("#bild").ImageSwitch({Type:"FadeIn", NewImage: "big2.png"}); 
		});

		$("#button4").mouseover (function() {
			stopp = true;
			$("#button2").animate ({ top: "130px"}, 100);
			$("#button3").animate ({ top: "130px"}, 100);
			$("#button4").animate ({ top: "120px"}, 100);
			$("#button5").animate ({ top: "130px"}, 100);
			$("#button6").animate ({ top: "130px"}, 100);
			$("#button7").animate ({ top: "130px"}, 100);
			$("#button8").animate ({ top: "130px"}, 100);
			ausblenden();
			$("#bildtext1").css ("display", "block");
			$("#bild").ImageSwitch({Type:"FadeIn", NewImage: "big3.png"}); 
		});

		$("#button5").mouseover (function() {
			stopp = true;
			$("#button2").animate ({ top: "130px"}, 100);
			$("#button3").animate ({ top: "130px"}, 100);
			$("#button4").animate ({ top: "130px"}, 100);
			$("#button5").animate ({ top: "120px"}, 100);
			$("#button6").animate ({ top: "130px"}, 100);
			$("#button7").animate ({ top: "130px"}, 100);
			$("#button8").animate ({ top: "130px"}, 100);
			ausblenden();
			$("#bildtext2").css ("display", "block");
			$("#bild").ImageSwitch({Type:"FadeIn", NewImage: "big4.png"}); 
		});
	
		$("#button6").mouseover (function() {
			stopp = true;
			$("#button2").animate ({ top: "130px"}, 100);
			$("#button3").animate ({ top: "130px"}, 100);
			$("#button4").animate ({ top: "130px"}, 100);
			$("#button5").animate ({ top: "130px"}, 100);
			$("#button6").animate ({ top: "120px"}, 100);
			$("#button7").animate ({ top: "130px"}, 100);
			$("#button8").animate ({ top: "130px"}, 100);
			$("#bild").ImageSwitch({Type:"FadeIn", NewImage: "big5.png"}); 
			ausblenden();
			$("#bildtext3").css ("display", "block");
		});

	
		$("#button7").mouseover (function() {
			stopp = true;
			$("#button2").animate ({ top: "130px"}, 100);
			$("#button3").animate ({ top: "130px"}, 100);
			$("#button4").animate ({ top: "130px"}, 100);
			$("#button5").animate ({ top: "130px"}, 100);
			$("#button6").animate ({ top: "130px"}, 100);
			$("#button7").animate ({ top: "120px"}, 100);
			$("#button8").animate ({ top: "130px"}, 100);
			ausblenden();
			$("#bildtext5").css ("display", "block");
			$("#bild").ImageSwitch({Type:"FadeIn", NewImage: "big6.png"}); 
		});
		
	   $("#button8").mouseover (function() {
			stopp = true;
			$("#button2").animate ({ top: "130px"}, 100);
			$("#button3").animate ({ top: "130px"}, 100);
			$("#button4").animate ({ top: "130px"}, 100);
			$("#button5").animate ({ top: "130px"}, 100);
			$("#button6").animate ({ top: "130px"}, 100);
			$("#button7").animate ({ top: "130px"}, 100);
			$("#button8").animate ({ top: "120px"}, 100);
			ausblenden();
			$("#bildtext8").css ("display", "block");
			$("#bild").ImageSwitch({Type:"FadeIn", NewImage: "big8.png"}); 
		});
		
	$("#unten_box1").mouseover ( function() {
		$(this).animate ({ top: "-50px", height: "190px"}, 200);
		$("#hierklicken1").css ("display", "block");
		$("#infotext1").css ("display", "block");

	});
	
		$("#unten_box1").mouseleave ( function() {
		$(this).animate ({ top: "0px", height: "140px" }, 200);
		$("#hierklicken1").css ("display", "none");
		$("#infotext1").css ("display", "none");
	});
	
	
	$("#unten_box2").mouseover ( function() {
		$(this).animate ({ top: "-50px", height: "190px"}, 200);
		$("#hierklicken2").css ("display", "block");
		$("#infotext2").css ("display", "block");
		
	});
	
	$("#unten_box2").mouseleave ( function() {
		$(this).animate ({ top: "0px", height: "140px" }, 200);
		$("#hierklicken2").css ("display", "none");
		$("#infotext2").css ("display", "none");
	});
	
	
	$("#unten_box3").mouseover ( function() {
		$(this).animate ({ top: "-50px", height: "190px"}, 200);
		$("#hierklicken3").css ("display", "block");
		$("#infotext3").css ("display", "block");

	});
	
	$("#unten_box3").mouseleave ( function() {
		$(this).animate ({ top: "0px", height: "140px" }, 200);
		$("#hierklicken3").css ("display", "none");
		$("#infotext3").css ("display", "none");
	});
	
	
	
	$("#unten_box4").mouseover ( function() {
		$(this).animate ({ top: "-50px", height: "190px"}, 200);
		$("#hierklicken4").css ("display", "block");
		$("#infotext4").css ("display", "block");

	});
	
	$("#unten_box4").mouseleave ( function() {
		$(this).animate ({ top: "0px", height: "140px" }, 200);
		$("#hierklicken4").css ("display", "none");
		$("#infotext4").css ("display", "none");
	});
	
	
	$("#unten_box5").mouseover ( function() {
		$(this).animate ({ top: "-50px", height: "190px"}, 200);
		$("#hierklicken5").css ("display", "block");
		$("#infotext5").css ("display", "block");

	});
	
	$("#unten_box5").mouseleave ( function() {
		$(this).animate ({ top: "0px", height: "140px" }, 200);
		$("#hierklicken5").css ("display", "none");
		$("#infotext5").css ("display", "none");
	});
	
	
	
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		stopp = true;
		//Get the A tag
		var winH = $(window).height();
		var winW = $(window).width();
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
		hoehe = (winH/2-$(id).height()/2) -50;
		hoehe = Math.floor (hoehe);

		$("#secnav").css('top', hoehe);
		$("#secnav").css('left', winW/2-$(id).width()/2);
		
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",1.0);	
	
		//Get the window height and width

              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(2000);
		sender = ($(id).attr('id'));

		if (sender == "dialog") $('#pdflink').attr('href', "dialog.pdf"); 
		if (sender == "dialog1") $('#pdflink').attr('href', "dialog1.pdf"); 	
		if (sender == "dialog2") $('#pdflink').attr('href', "karten.pdf"); 
		if (sender == "dialog7") $('#pdflink').attr('href', "dialog1.pdf#page=12"); 
		if (sender == "dialog8") $('#pdflink').attr('href', "dialog8.pdf#page=16");
		if (sender == "dialog9") $('#pdflink').attr('href', "dialog9.pdf");
	});
	
	//if close button is clicked
	$('#schliessen').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		stopp = false;
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#schliessen').click(function () {
		$("#mask").hide();
		stopp = false;
		$('.window').hide();
	});
	
	
});