$(document).ready(function() {
	
	var twitterOpen = false;
	var facebookOpen = false;
	
	$('#twitterFeed').click(function() {
		if(twitterOpen) {
			$('#twitterPanel').animate({'top' : 0}, 
				{ duration:500, complete:function() { 
					$('#twitterPanel').css("z-index", 4);
					$('#facebookPanel').css("z-index", 5);
					twitterOpen = false;
			}});
			$("#twitterArrow").removeClass('arrowDown');
			$("#twitterArrow").addClass('arrowUp');
			$('#twitterMasker').animate({'height' : 50}, 500);
		} else {
			$('#twitterPanel').css("z-index", 5);
			$('#facebookPanel').css("z-index", 4);
			$('#twitterPanel').animate({'top' : -400}, 500);
			twitterOpen = true;
			if(facebookOpen) {
				$('#facebookPanel').animate({'top' : 0}, 
					{ duration:500, complete:function() { 
						$('#twitterPanel').css("z-index", 5);
						$('#facebookPanel').css("z-index", 4);
						facebookOpen = false;
				}});
				$("#facebookArrow").removeClass('arrowDown');
				$("#facebookArrow").addClass('arrowUp');
				$('#facebookMasker').animate({'height' : 50}, 500);
			}
			$("#twitterArrow").removeClass('arrowUp');
			$("#twitterArrow").addClass('arrowDown');
			$('#twitterMasker').animate({'height' : 400}, 500);
		}
	});

	$('#facebookFeed').click(function() {
		if(facebookOpen) {
			$('#facebookPanel').animate({'top' : 0}, 
				{ duration:500, complete:function() { 
					//$('#twitterPanel').css("z-index", 5);
					//$('#facebookPanel').css("z-index", 4);
					facebookOpen = false;
			}});
			$("#facebookArrow").removeClass('arrowDown');
			$("#facebookArrow").addClass('arrowUp');
			$('#facebookMasker').animate({'height' : 50}, 500);
		} else {
			$('#twitterPanel').css("z-index", 4);
			$('#facebookPanel').css("z-index", 5);
			$('#facebookPanel').animate({'top' : -400}, 500);
			facebookOpen = true;
			if(twitterOpen) {
				$('#twitterPanel').animate({'top' : 0}, 
					{ duration:500, complete:function() { 
						$('#twitterPanel').css("z-index", 4);
						$('#facebookPanel').css("z-index", 5);
						twitterOpen = false;
				}});
				$("#twitterArrow").removeClass('arrowDown');
				$("#twitterArrow").addClass('arrowUp');
				$('#twitterMasker').animate({'height' : 50}, 500);
			}
			$("#facebookArrow").removeClass('arrowUp');
			$("#facebookArrow").addClass('arrowDown');
			$('#facebookMasker').animate({'height' : 400}, 500);
		}
	});

});