$(document).ready(function() {
	
	var layer  = null;
	var active = null;
	
	$('#contactbutton').click(function() { 
		$('#contact').slideDown('slow');
		$('#contact').css('z-index', '1');
		$('#product').css('z-index', '0');
		$('#contactbutton').css('z-index', '2');
		$('#productbutton').css('z-index', '0'); 
	});

	$('#productbutton').click(function() {
		$('#product').slideDown('slow');				
		$('#contact').css('z-index', '0');
		$('#product').css('z-index', '1');
		$('#contactbutton').css('z-index', '0');
		$('#productbutton').css('z-index', '2');				
	});

	$('div.close').click(function(e) {
		var target = '#' + $(e.target).parent().attr("id");
		$(target).slideUp("slow");
	});
	
	$('#service a').click(function(e) {
		if (layer)  layer.css('visibility', 'hidden');
		if (active) active.css('color', 'black');				
		var target = '#' + $(this).attr('target');
		$(target).css('visibility', 'visible');
		$(target).click(function(e) {
			e.stopPropagation();
			return false;
		});
		$(this).css('color', 'orange');
		layer = $(target);
		active = $(this);		
		return false;		
	});

	$(document.body).click(function() {
		if (layer) layer.css('visibility', 'hidden');
		if (active) active.css('color', 'black');
	});

		
});