$(document).ready(function(){

$(".zekubox").click(function(){
	overlaylink = $(this).attr("href");
	startOverlay(overlaylink);
	return false;
});

		
		
		
function startOverlay(overlaylink) {
   
// counter
	var i = 0;
	var curimg = 0;
	// create object
	imageObj = new Image();
	// set image list 
	images = new Array(); 
		images[0]="bilder/galerie/Bild_1.jpg";
		images[1]="bilder/galerie/Bild_2.jpg";
		images[2]="bilder/galerie/Bild_3.jpg";
		images[3]="bilder/galerie/Bild_4.jpg";
		images[4]="bilder/galerie/Bild_5.jpg";
		images[5]="bilder/galerie/Bild_6.jpg";
		images[6]="bilder/galerie/Bild_7.jpg";
		images[7]="bilder/galerie/Bild_8.jpg";
		images[8]="bilder/galerie/Bild_9.jpg";
		images[9]="bilder/galerie/Bild_10.jpg";
		images[10]="bilder/galerie/Bild_11.jpg";
		images[11]="bilder/galerie/Bild_12.jpg";
		images[12]="bilder/galerie/Bild_13.jpg";
		images[13]="bilder/galerie/Bild_14.jpg";
		images[14]="bilder/galerie/Bild_15.jpg";
		images[15]="bilder/galerie/Bild_16.jpg";
		images[16]="bilder/galerie/Bild_17.jpg";
		images[17]="bilder/galerie/Bild_18.jpg";
		images[18]="bilder/galerie/Bild_19.jpg";
		images[19]="bilder/galerie/Bild_20.jpg";
	


	
	$("body").prepend('<div class="overlay"></div><div class="container"></div>');
	/*$("body").css({"overflow":"hidden"});
*/
	$(".overlay").animate({"opacity":"0.75"},  200, "linear");
	$(".container").prepend('<img id="img0" src="' + overlaylink + '" alt="" />'); 
	
	for(i=0; i<=19; i++) 
	{  
		if (overlaylink == images[i])
		{
			curimg = i;
			}
	};

	
	$(".container")
			.css({
				"top":        "50%",
				"left":        "50%",
			
				"margin-top": -($(".container").height()/2),
				"margin-left":-($(".container").width()/2) 
			});
	
	$(".container").append('<div id="Legende" ></div>');
	$("#Legende").append('<div style="display:inline;" id="number" >Bild ' + (curimg + 1) + ' von ' + images.length + '</div>');
	$("#Legende").append('<a href="#" class="btn"><div id="btn_last" ></div></a>');
    $("#Legende").append('<a href="#" class="btn"><div id="btn_next" ></div></a>');
	$("#Legende").append('<div id="btn_deko"></div>');
	$("#Legende").append('<a href="#" class="btn"><div id="btn_close" ></div></a>');
	
	$(".container").animate({"opacity":"1"}, 200, "linear");
	
	$(".overlay").click(function(){
		$(".overlay, .container").animate({"opacity":"0"}, 200, "linear");
		$(".container, .overlay").remove();
	
	});

	$("#btn_close").click(function(){
		$(".overlay, .container").animate({"opacity":"0"}, 200, "linear");
		$(".container, .overlay").remove();
	
	});
	
	$("#btn_next").click(function(){
	
		curimg = curimg + 1;
		
		if (curimg > 19)
		{
			curimg = 0;
		};
		document.getElementById("number").textContent = 'Bild ' + (curimg + 1) + ' von ' + images.length ;
		document.getElementById("number").innerText= 'Bild ' + (curimg + 1) + ' von ' + images.length ;
		document.getElementById("img0").setAttribute("src", images[curimg]);
	});

	
	$("#btn_last").click(function(){
	
		curimg -= 1;
		
		if (curimg < 0)
		{
			curimg = 19;
		};
		document.getElementById("number").innerText= 'Bild ' + (curimg + 1) + ' von ' + images.length ;
		document.getElementById("number").textContent = 'Bild ' + (curimg + 1) + ' von ' + images.length ;
		document.getElementById("img0").setAttribute("src", images[curimg]);
	});

	

	// start preloading 
	for(i=0; i<=19; i++) 
	{  
		imageObj.src=images[i];
	};
};



});