function show1(){
		$("#hide_button").show();
		$("#show_button").hide();
}

function hide1(){
		$("#hide_button").hide();
		$("#show_button").show();
}
function show2(){
		$("#hide_button2").show();
		$("#show_button2").hide();
}

function hide2(){
		$("#hide_button2").hide();
		$("#show_button2").show();
}


$(document).ready(function() {
//LEFT
	$("#show_button").click(function(){
		$("#panel").animate({
			width: "320px"
		}, { "duration": "slow", "easing": "easeOutBack" });
		
		show1();
		
		$(".panel_button").animate({
			left: "320px"
		}, { "duration": "slow", "easing": "easeOutBack" });
	
	});
	
	
	
   $("#hide_button").click(function(){
		$("#panel").animate({
			width: "0px"
		}, { "duration": "slow", "easing": "easeInBack" });
		
		$(".panel_button").animate({
			left: "0px"
		}, { "duration": "slow", "easing": "easeInBack" });
		
		$(".panel_button").animate({
			left:0
		}, "slow", "easeInBack", function(){hide1();});
		

	
   });	

   //Right
	$(".panel_button2#show_button2").click(function(){
		$("#panel2").animate({
			width: "320px"
		}, { "duration": "slow", "easing": "easeOutBack" });
		
		show2();
		
		$(".panel_button2").animate({
			right: "320px"
		}, { "duration": "slow", "easing": "easeOutBack" });
	
	});
	
	
	
   $(".panel_button2#hide_button2").click(function(){
		$("#panel2").animate({
			width: "0px"
		}, { "duration": "slow", "easing": "easeInBack" });
		
		$(".panel_button2").animate({
			right:0
		}, "slow", "easeInBack", function(){hide2();});
		
   });	
   
   
   
   
   
   
   
   
   
   
   
   
   	$("#show_button3").click(function(){
		$("#panel").animate({
			width: "320px"
		}, { "duration": "slow", "easing": "easeOutBack" });
		
		show1();
		
		$(".panel_button").animate({
			left: "320px"
		}, { "duration": "slow", "easing": "easeOutBack" });
	
	});
	
	
	
   $("#hide_button3").click(function(){
		$("#panel").animate({
			width: "0px"
		}, { "duration": "slow", "easing": "easeInBack" });
		
		$(".panel_button").animate({
			left: "0px"
		}, { "duration": "slow", "easing": "easeInBack" });
		
		$(".panel_button").animate({
			left:0
		}, "slow", "easeInBack", function(){hide1();});
		

	
   });	

   //Right
	$("#show_button4").click(function(){
		$("#panel2").animate({
			width: "320px"
		}, { "duration": "slow", "easing": "easeOutBack" });
		
		show2();
		
		$(".panel_button2").animate({
			right: "320px"
		}, { "duration": "slow", "easing": "easeOutBack" });
	
	});
	
	
	
   $("#hide_button4").click(function(){
		$("#panel2").animate({
			width: "0px"
		}, { "duration": "slow", "easing": "easeInBack" });
		
		$(".panel_button2").animate({
			right:0
		}, "slow", "easeInBack", function(){hide2();});
		
   });	
   
   
   
   

  
   
});