$(document).ready(function(){

	$(".run_bb1").click(function(){
		// Shrink down main logos
		$("#bb1").animate({opacity: "1", left: "-=0", height: "126", width: "126"}, 1200)
		$("#bb2").animate({opacity: ".30", left: "-=0", height: "126", width: "126"}, 1200)
		$("#bb3").animate({opacity: ".30", left: "-=0", height: "126", width: "126"}, 1200)
		
		// Bring up the content layer
		$("#bb1_content").animate({opacity: "1", left: "+=0", height: "50%", width: "90%"}, "slow")		
		
		// Close any other open content layers
		$("#bb2_content").animate({opacity: "0", left: "+=0", height: "50%", width: "90%"}, "slow")		
	    $('#bb2_content').hide('slow');
		$("#bb3_content").animate({opacity: "0", left: "+=0", height: "50%", width: "90%"}, "slow")		
	    $('#bb3_content').hide('slow');
		return false;
	});
	
	$(".close_bb1").click(function(){
		$("#bb1").animate({opacity: "1", left: "+=0", height: "237", width: "250"}, 1200)
		$("#bb2").animate({opacity: "1", left: "+=0", height: "237", width: "250"}, 1200)
		$("#bb3").animate({opacity: "1", left: "+=0", height: "237", width: "250"}, 1200)
		$("#bb1_content").animate({opacity: "0", left: "+=0", height: "50%", width: "90%"}, "slow")		
	    $('#bb1_content').hide('slow');
		return false;
	});

	$(".run_bb2").click(function(){
		// Shrink down main logos
		$("#bb1").animate({opacity: ".30", left: "-=0", height: "126", width: "126"}, 1200)
		$("#bb2").animate({opacity: "1", left: "-=0", height: "126", width: "126"}, 1200)
		$("#bb3").animate({opacity: ".30", left: "-=0", height: "126", width: "126"}, 1200)
		
		// Bring up the content layer
		$("#bb2_content").animate({opacity: "1", left: "+=0", height: "50%", width: "90%"}, "slow")		
		
		// Close any other open content layers
		$("#bb1_content").animate({opacity: "0", left: "+=0", height: "50%", width: "90%"}, "slow")		
	    $('#bb1_content').hide('slow');
		$("#bb3_content").animate({opacity: "0", left: "+=0", height: "50%", width: "90%"}, "slow")		
	    $('#bb3_content').hide('slow');
		return false;

	});
	
	$(".close_bb2").click(function(){
		$("#bb1").animate({opacity: "1", left: "+=0", height: "237", width: "250"}, 1200)
		$("#bb2").animate({opacity: "1", left: "+=0", height: "237", width: "250"}, 1200)
		$("#bb3").animate({opacity: "1", left: "+=0", height: "237", width: "250"}, 1200)
		$("#bb2_content").animate({display: "none", opacity: "0", left: "+=0", height: "50%", width: "90%"}, 1200)		
	    $('#bb2_content').hide('slow');
		return false;

	});

	$(".run_bb3").click(function(){
		// Shrink down main logos
		$("#bb1").animate({opacity: ".30", left: "-=0", height: "126", width: "126"}, 1200)
		$("#bb2").animate({opacity: ".30", left: "-=0", height: "126", width: "126"}, 1200)
		$("#bb3").animate({opacity: "1", left: "-=0", height: "126", width: "126"}, 1200)
		
		// Bring up the content layer
		$("#bb3_content").animate({opacity: "1", left: "+=0", height: "50%", width: "90%"}, "slow")		
		
		// Close any other open content layers
		$("#bb1_content").animate({opacity: "0", left: "+=0", height: "50%", width: "90%"}, "slow")		
	    $('#bb1_content').hide('slow');
		$("#bb2_content").animate({opacity: "0", left: "+=0", height: "50%", width: "90%"}, "slow")		
	    $('#bb2_content').hide('slow');
		return false;

	});
	
	$(".close_bb3").click(function(){
		$("#bb1").animate({opacity: "1", left: "+=0", height: "237", width: "250"}, 1200)
		$("#bb2").animate({opacity: "1", left: "+=0", height: "237", width: "250"}, 1200)
		$("#bb3").animate({opacity: "1", left: "+=0", height: "237", width: "250"}, 1200)
		$("#bb3_content").animate({display: "none", opacity: "0", left: "+=0", height: "50%", width: "90%"}, 1200)		
	    $('#bb3_content').hide('slow');
		return false;

	});

});