jQuery.extend(jQuery.easing, {
	slowToFast: function (x, t, b, c, d) {
		return Math.pow(x, 6);
	},
	fastToSlow: function (x, t, b, c, d) {
		return Math.sqrt(x);
	}
});

$(document).ready(function(){
	var contentBlock = $(".content");
	
	contentBlock.bind('click', function(){
		var id = $(this).attr('id');
		
		$("#moveableArea").animate({
			marginLeft: "-800px"
		}, 400, "slowToFast", function(){
			window.scrollTo(0,0);
		}, 300);

		$.ajax({
			type: "GET",
			url: "/contentSlides/"+id+".html",
			success: function(data) {
				$('#moveableArea .right').html(data);
		  	}
		});
		$("<a href='#' onclick='back()' id='backButton' class='back'>< zurück</a>").appendTo("#header");
	});
	
	$.each(contentBlock, function() { 
		contentBlock.hover(function() { 
			$(this).find('.overlay').stop(false,true).css({display: 'block', opacity:0, cursor: 'pointer'}).animate({opacity: 0.8}, 350, "fastToSlow");
		}, function() { 
			 $(this).find('.overlay').stop(false,true).css({opacity:0.8}).animate({opacity: 0}, 350, "fastToSlow");  
		});
	});

});


function back(){
	$("#moveableArea").animate({
		top: "0px",
		marginLeft: "0px"
	});
	$("#backButton").remove();
}

function enlarge(element){
	var block = $(element);
	if(!block.hasClass("active")){
		block.animate({
			height: "800px",
			backgroundPosition:"(0 -300px)" 
		});
		block.addClass("active");
	} else if(block.hasClass("active")){
		block.animate({
			height: "300px",
			backgroundPosition:"(0 0px)" 
		});
		block.removeClass("active");
	}
}