// JavaScript Document
var i = 0;


jQuery(document).ready(function(){	

jQuery('.button1').click(function(){						
jQuery('.backdrop').animate({'opacity':'.80'}, 300, 'linear');
jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
jQuery('.backdrop, .box').css('display', 'block');
jQuery('.show').css('display', 'block');
jQuery('.content2').css('display', 'block');
});

jQuery('.button2').click(function(){						
jQuery('.backdrop').animate({'opacity':'.80'}, 300, 'linear');
jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
jQuery('.backdrop, .box').css('display', 'block');
jQuery('.show').css('display', 'block');
jQuery('.content1').css('display', 'block');
});

jQuery('.button3').click(function(){						
jQuery('.backdrop').animate({'opacity':'.80'}, 300, 'linear');
jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
jQuery('.backdrop, .box').css('display', 'block');
jQuery('.show').css('display', 'block');
jQuery('.content4').css('display', 'block');
});

jQuery('.button4').click(function(){						
jQuery('.backdrop').animate({'opacity':'.80'}, 300, 'linear');
jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
jQuery('.backdrop, .box').css('display', 'block');
jQuery('.show').css('display', 'block');
jQuery('.content3').css('display', 'block');
});

jQuery('.button5').click(function(){						
jQuery('.backdrop').animate({'opacity':'.80'}, 300, 'linear');
jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
jQuery('.backdrop, .box').css('display', 'block');
jQuery('.show').css('display', 'block');
jQuery('.content5').css('display', 'block');
});

jQuery('.button6').click(function(){						
jQuery('.backdrop').animate({'opacity':'.80'}, 300, 'linear');
jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
jQuery('.backdrop, .box').css('display', 'block');
jQuery('.show').css('display', 'block');
jQuery('.content7').css('display', 'block');
});

jQuery('.button7').click(function(){						
jQuery('.backdrop').animate({'opacity':'.80'}, 300, 'linear');
jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
jQuery('.backdrop, .box').css('display', 'block');
jQuery('.show').css('display', 'block');
jQuery('.content6').css('display', 'block');
});


jQuery('.button8').click(function(){						
jQuery('.backdrop').animate({'opacity':'.80'}, 300, 'linear');
jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
jQuery('.backdrop, .box').css('display', 'block');
jQuery('.show').css('display', 'block');
jQuery('.content9').css('display', 'block');
});

jQuery('.button9').click(function(){						
jQuery('.backdrop').animate({'opacity':'.80'}, 300, 'linear');
jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
jQuery('.backdrop, .box').css('display', 'block');
jQuery('.show').css('display', 'block');
jQuery('.content8').css('display', 'block');
});

jQuery('.button10').click(function(){						
jQuery('.backdrop').animate({'opacity':'.80'}, 300, 'linear');
jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
jQuery('.backdrop, .box').css('display', 'block');
jQuery('.show').css('display', 'block');
jQuery('.content10').css('display', 'block');
});


jQuery('.close').click(function()
{
	close_box();
});

jQuery('.backdrop').click(function()
{
close_box();
});

});

 
function close_box()
{
jQuery('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function()
{
jQuery('.backdrop, .box,').css('display', 'none');
jQuery('.content1').css('display', 'none');
jQuery('.content2').css('display', 'none');
jQuery('.content3').css('display', 'none');
jQuery('.content4').css('display', 'none');
jQuery('.content5').css('display', 'none');
jQuery('.content6').css('display', 'none');
jQuery('.content7').css('display', 'none');
jQuery('.content8').css('display', 'none');
jQuery('.content9').css('display', 'none');
jQuery('.content10').css('display', 'none');
});
}


function wechsel()
{
	
	++i;
	
	if(i>=3)
	{
		i=3;
	}
	
	
	
	if(i==0)
	{
	document.getElementById("erster").style.display = "block";
	document.getElementById("dritte").style.display = "none";
	document.getElementById("zweiter").style.display = "none";
	document.getElementById("vierte").style.display = "none";
	}
	
	
	if(i==1)
	{
	document.getElementById("erster").style.display = "none";
	document.getElementById("dritte").style.display = "none";
	document.getElementById("zweiter").style.display = "block";
	document.getElementById("vierte").style.display = "none";
	}
	
	if(i==2)
	{
	document.getElementById("erster").style.display = "none";
	document.getElementById("dritte").style.display = "block";
	document.getElementById("zweiter").style.display = "none";
	document.getElementById("vierte").style.display = "none";
	}

	if(i==3)
	{
	document.getElementById("erster").style.display = "none";
	document.getElementById("dritte").style.display = "none";
	document.getElementById("zweiter").style.display = "none";
	document.getElementById("vierte").style.display = "block";
	}
	
}



function wechsel_two()
{
	
	--i;
	
	
	if(i <= 0)
	{
		i=0;
	}	
	
	
	
	if(i==0)
	{
	document.getElementById("erster").style.display = "block";
	document.getElementById("dritte").style.display = "none";
	document.getElementById("zweiter").style.display = "none";
	document.getElementById("vierte").style.display = "none";
	}
	
	if(i==1)
	{
	document.getElementById("erster").style.display = "none";
	document.getElementById("dritte").style.display = "none";
	document.getElementById("zweiter").style.display = "block";
	document.getElementById("vierte").style.display = "none";
	}
	
	
	if(i==2)
	{
	document.getElementById("erster").style.display = "none";
	document.getElementById("dritte").style.display = "block";
	document.getElementById("zweiter").style.display = "none";
	document.getElementById("vierte").style.display = "none";
	}

	if(i==3)
	{
	document.getElementById("erster").style.display = "none";
	document.getElementById("dritte").style.display = "none";
	document.getElementById("zweiter").style.display = "none";
	document.getElementById("vierte").style.display = "block";
	
	}	
	
}