$(document).ready(function(){


	// Clickable elements
	$(".clickable").click(function(){
		window.location=$(this).find("a").attr("href");return false;
	});
	

	// Product boxes slide on click

	// p1 (skolaar)
	$("#p1").mouseup(function(){
		$("#p2").animate({ opacity: '0' }, 500);
		$("#p3").animate({ opacity: '0' }, 500);
		$("#p1-info")
			.stop(true, true)
			.delay(500)
			.css("visibility", "visible")
			.css("display", "none")
			.fadeIn('300');
		$("#p1close")
			.delay(800)
			.css("visibility", "visible")
			.css("display", "none")
			.fadeIn('300');
	});	
	
	//p1 close
	$("#p1close").mouseup(function(){
		$(this)
			.fadeOut('300');
		$("#p1-info")
			.stop(true, true)
			.fadeOut('300');
		$("#p2").delay(300).animate({ opacity: '1' }, 500);
		$("#p3").delay(300).animate({ opacity: '1' }, 500);
	});	
	
	// p2 open (kapzul)
	$("#p2").mouseup(function(){
		$("#p1").animate({ opacity: '0' }, 500);
		$("#p3").animate({ opacity: '0' }, 500);
		$(this)
			.stop(true, true)
			.delay(400)
			.animate({ left: '-240' }, 800);
		$("#p2-info")
			.stop(true, true)
			.delay(1200)
			.css("visibility", "visible")
			.css("display", "none")
			.fadeIn('300');
		$("#p2close")
			.delay(1200)
			.css("visibility", "visible")
			.css("display", "none")
			.fadeIn('300');
	});
	
	//p2 close
	$("#p2close").mouseup(function(){
		$(this)
			.fadeOut('300');
		$("#p2")
			.stop(true, true)
			.delay(300)
			.animate({ left: '0' }, 800);
		$("#p2-info")
			.stop(true, true)
			.fadeOut('300');
		$("#p1").delay(1100).animate({ opacity: '1' }, 500);
		$("#p3").delay(1100).animate({ opacity: '1' }, 500);
	});	
	
	// p3 open (colleccio)
	$("#p3").mouseup(function(){
		$("#p1").animate({ opacity: '0' }, 500);
		$("#p2").animate({ opacity: '0' }, 500);
		$(this)
			.stop(true, true)
			.delay(400)
			.animate({ left: '-480' }, 800);
		$("#p3-info")
			.stop(true, true)
			.delay(1200)
			.css("visibility", "visible")
			.css("display", "none")
			.fadeIn('300');
		$("#p3close")
			.delay(1200)
			.css("visibility", "visible")
			.css("display", "none")
			.fadeIn('300');
	});
	
	// p3 close
	$("#p3close").mouseup(function(){
		$(this)
			.fadeOut('300');
		$("#p3")
			.stop(true, true)
			.delay(300)
			.animate({ left: '0' }, 800);
		$("#p3-info")
			.stop(true, true)
			.fadeOut('300');
		$("#p1").delay(1100).animate({ opacity: '1' }, 500);
		$("#p2").delay(1100).animate({ opacity: '1' }, 500);
	});
	
	
	
	
	$(".contactbtn").mouseup(function(){
		$("#blackout")
			.stop(true, true)
			.fadeTo(200, 0.8);
		$("#contact")
			.stop(true, true)
			.delay(400)
			.css("visibility", "visible")
			.css("display", "none")
			.fadeIn('200');
	});
	
	$(".c-close").mouseup(function(){
		$("#blackout")
			.stop(true, true)
			.delay(400)
			.fadeOut('200');
		$("#contact")
			.stop(true, true)
			.fadeOut('200');

	});	
	
	$("c-closebtn").mouseup(function(){
		$("#blackout")
			.stop(true, true)
			.delay(400)
			.fadeOut('200');
		$("#contact")
			.stop(true, true)
			.fadeOut('200');

	});
	
});