x = $(window).width();
y = $(window).height();

leftAlign = -(2445-x)/2;
topAlign = -(1821-y)/2;
maskSideWidth = (x-816)/2;
maskTopHeight = (y-604)/2;

textfieldX = 0;
textfieldY = 0;

Left = 0;
Top = 0;

iXmerker = 1;
iYmerker = 1;

window.onload = (function(){
	scalePage();
	

			$(window).resize(function(){
			 x = $(window).width();
			 y = $(window).height();
				 
				leftAlign = parseInt(-(2445-x)/2);
				topAlign = parseInt(-(1821-y)/2);
				maskSideWidth = parseInt((x-816)/2);
				maskTopHeight = parseInt((y-604)/2);
		
				scalePage();

			});


		
function scalePage() {

	$("#maske_top").css('height', maskTopHeight);
	$("#maske_bottom").css('height', maskTopHeight+10);

	$("#corner-top").css('margin-top', maskTopHeight);

	$("#maske_right").css({width: maskSideWidth , top:  maskTopHeight});
	$("#maske_left").css({width: maskSideWidth +1 , top:  maskTopHeight});
	$("#corner-top, #corner-bottom").css('margin-left', maskSideWidth+1);

	
	$("#aligner").css('margin-left', leftAlign);
	$("#aligner").css('margin-top', topAlign);
}


scrollWidth = 815;
scrollHeight = 607;
zoomed = false;



var XposOuter = new Array(3);
														
		XposOuter[0] = 815;
		XposOuter[1] = 0;
		XposOuter[2] = -815;
		XposOuter[3] = -1630;
		
var YposOuter = new Array(3);
														
		YposOuter[0] = 607;
		YposOuter[1] = 0;
		YposOuter[2] = -607;
		YposOuter[3] = -1214;
		
		
var XposInner = new Array(3);
														
		XposInner[0] = 0;
		XposInner[1] = -815;
		XposInner[2] = -1630;
		
var YposInner = new Array(3);
														
		YposInner[0] = 0;
		YposInner[1] = -607;
		YposInner[2] = -1214;


// Text Field Steuerung

		
var iX = 0;
var iY = 0;


		
var myPosX = XposOuter;
var myPosY = YposOuter;
		
var myObj = $(".block");

var innerNav = null;


function outward(myiX, myiY){
	if (zoomed == true) {
			zoomed = false;
			$(".selected").animate({"height": "607px", "width": "815px", "left": "0px", "top": "0px"}, "slow",
			scroller(myiX, myiY)).removeClass("selected");
			txthider();
			$(".txt").removeClass("selected_txt");
			//switcher();
	  		innerNav = 0;
	} else {
			scroller(myiX, myiY)
	}
}
		

	function scroller(myiX, myiY) {
		
			if (zoomed == true) {
						myObj = $(".selected, .selected_txt");
					
						myPosX = XposInner;
						myPosY = YposInner;	
						
						iX = myiX;
						iY = myiY;

								}
			else {
						myObj = $(".block");
						myPosX = XposOuter;
						myPosY = YposOuter;	
						
						iX = myiX;
						iY = myiY;
						
						iXmerker = myiX;
						iYmerker = myiY;
						
					   
				}
	
		txthider();

		myObj.animate({"left": + myPosX[iX] + "px","top": + myPosY[iY] + "px"}, 1200, 
		function(){
			if (zoomed == true) {
				txtshowr();
			};
		});

	}

  	$(".x_0_y_0").click(function(){
	  scroller(0, 0);
    });

    $(".x_1_y_0").click(function(){
      scroller(1, 0);
    });
	
    $(".x_2_y_0").click(function(){
      scroller(2, 0);
    });

    $(".x_0_y_1").click(function(){
      scroller(0, 1);
    });
	
	$(".x_1_y_1").click(function(){
      scroller(1, 1);      
    });
	
	$(".x_2_y_1").click(function(){
      scroller(2, 1);      
    });
	
	$(".x_0_y_2").click(function(){
      scroller(0, 2);      
    });
	
	$(".x_1_y_2").click(function(){
      scroller(1, 2);      
    });
	
	$(".x_2_y_2").click(function(){
      scroller(2, 2);      
    });
	
	$("#home").click(function(){
	  outward(0, 3);
	  //naviClear();
    });

	$("#kontakt").click(function(){
	  outward(1, 3);
      //naviClear();
    });
	
	$("#partner").click(function(){
	  outward(2, 3);
      //naviClear();
    });
		

// selected wird definiert	
			$(".img_outer").click(function(e){
				if(zoomed == false)  {
			 $(this).children("img").addClass("selected");
			 $(this).children(".txt").addClass("selected_txt");
			  zoom(e);
			  scale();
			  naviSelecter('.x_' + iX + '_y_' + iY, innerNav = 1);
			} else {
				scale();
			}
			 });
		
//zoom

function zoom(e) {
			 mouseX = (e.pageX-((x-815)/2))/272;
			 mouseY = (e.pageY-((y-607)/2))/202;
				
		//$('#result').html(mouseX +', '+ mouseY);
		if (mouseX<1) {Left = 0; iX = 0;}
		if (mouseX>1) {Left = -815; iX = 1;}
		if (mouseX>2) {Left = -1630; iX = 2;}
		if (mouseY<1) {Top = 0; iY = 0;}
		if (mouseY>1) {Top = -607; iY = 1;}
		if (mouseY>2) {Top = -1214; iY = 2;}
		
		
}

	function scale(){
						
		 			
		
		if (zoomed == false) {
			$(".selected_txt").css({"left": + Left + "px", "top": + Top + "px"});
			$(".selected").animate({"height": "1821px", "width": "2445px", "left": + Left + "px", "top": + Top + "px"}, 800);
			
		 	txtshowr(); 
			
			zoomed = true;
			//naviCount();
			//switcher();
			return;
		}
		if (zoomed == true) {
			$(".selected").animate({"height": "607px", "width": "815px", "left": "0px", "top": "0px"}, 800).removeClass("selected");
			txthider();
			$(".txt").removeClass("selected_txt");
			zoomed = false;
			//naviCount();
			naviSelecter('.x_' + iXmerker + '_y_' + iYmerker, innerNav = 0);
			//alert('.x_' + iXmerker + '_y_' + iYmerker);
			//switcher();
		}

	}
	
	
	function txtshowr() {
		
	 	textfield = ".txt_" + iX + iY;
		$(".selected_txt").children(".txt_inner").children(textfield).fadeIn("slow");
	}
	
	function txthider() {
			
			$(".txt_inner").children("div").fadeOut("slow");
			
	}

	
	function naviCount() {
			navElem = $('#navi-control > .control:first');
			$('#navi-control .control').hide();
			navElem.show(25, function () {
				$(this).next().show(25, arguments.callee); 
	  		});
	}


	function naviClear() {
			$('#navi-inner a').removeClass('active');
			$('#navi-control').removeClass('innerNav');
	}

	function naviSelecter(selector) {
		naviClear();
		//alert(selector);
		if(innerNav == 1) $('#navi-control').addClass('innerNav');
		$(selector).addClass('active');
	}

	$('#navi-inner a').click(function(){
		naviSelecter(this);
		//alert('gfg');
	});		

	$('#navi-inner a').html(' ');
	


	});