$(document).ready(function() {

	// add a new attribute to our div-elements to control the position
	$("#contact").attr("open", 0);
	$("#work").attr("open", 0);
	$("#about").attr("open", 0);
	
	// contact element
	$("#contact").click(function() {
		
		if ($("#contact").attr("open") != 1) {

			$("#contact").animate({"left": "-=262px"}, "slow");
			$("#contact").attr("open", 1);

		}
		
		if ($("#contact").attr("open") == 1 && $("#work").attr("open") == 1 && $("#about").attr("open") != 1) {

			$("#work").animate({"left": "+=262px"}, "slow");
			$("#work").attr("open", 0);

		}
		
		if ($("#contact").attr("open") == 1 && $("#work").attr("open") == 1 && $("#about").attr("open") == 1) {

			$("#work").animate({"left": "+=262px"}, "slow");
			$("#work").attr("open", 0);
			
			$("#about").animate({"left": "+=262px"}, "slow");
			$("#about").attr("open", 0);

		}

	});
	
	// work element
	$("#work").click(function() {
		
		if ($("#work").attr("open") != 1 && $("#contact").attr("open") != 1) {

			$("#contact").animate({"left": "-=262px"}, "slow");
			$("#contact").attr("open", 1);
			
			$("#work").animate({"left": "-=262px"}, "slow");
			$("#work").attr("open", 1);

		}
		
		if ($("#work").attr("open") != 1 && $("#contact").attr("open") == 1) {
			
			$("#work").animate({"left": "-=262px"}, "slow");
			$("#work").attr("open", 1);

		}
		
		if ($("#work").attr("open") == 1 && $("#about").attr("open") == 1) {
			
			$("#about").animate({"left": "+=262px"}, "slow");
			$("#about").attr("open", 0);

		}

	});
	
	// about element
	$("#about").click(function() {
		
		if ($("#about").attr("open") != 1 && $("#work").attr("open") != 1 && $("#contact").attr("open") != 1) {

			$("#contact").animate({"left": "-=262px"}, "slow");
			$("#contact").attr("open", 1);
			
			$("#work").animate({"left": "-=262px"}, "slow");
			$("#work").attr("open", 1);
			
			$("#about").animate({"left": "-=262px"}, "slow");
			$("#about").attr("open", 1);

		}
		
		if ($("#about").attr("open") != 1 && $("#work").attr("open") != 1 && $("#contact").attr("open") == 1) {

			$("#work").animate({"left": "-=262px"}, "slow");
			$("#work").attr("open", 1);
			
			$("#about").animate({"left": "-=262px"}, "slow");
			$("#about").attr("open", 1);

		}
		
		if ($("#about").attr("open") != 1 && $("#work").attr("open") == 1 && $("#contact").attr("open") == 1) {
			
			$("#about").animate({"left": "-=262px"}, "slow");
			$("#about").attr("open", 1);

		}

	});
	
	// logo element
	$("#logo").click(function() {
		
		if ($("#contact").attr("open") == 1) {

			$("#contact").animate({"left": "+=262px"}, "slow");
			$("#contact").attr("open", 0);
	
		}
	
		if ($("#work").attr("open") == 1) {
	
			$("#work").animate({"left": "+=262px"}, "slow");
			$("#work").attr("open", 0);
	
		}
	
		if ($("#about").attr("open") == 1) {
	
			$("#about").animate({"left": "+=262px"}, "slow");
			$("#about").attr("open", 0);
	
		}

	});

});