// JavaScript Document
$(document).ready(function(){
	$(".story, .solution").hide();
	$("#story-button").text(' Show story ');
	$("#solution-button").text(' Show solution ');
	$("#story-button, #solution-button").css({
											 "padding-left":5,
											 "padding-right":5,
											 "padding-top":2,
											 "padding-bottom":3,
											 "opacity":1
											 });
 	$("#story-button, #solution-button").hover(function(){
		$(this).stop().animate({paddingLeft:40}, "swing");
	}, function(){
		$(this).stop().animate({paddingLeft:4}, "swing");
	});
	$("#story-button, #solution-button").click(function(){
		if($(this).is("#story-button")){
			if($('.story').is(':visible')){
				$(".story").slideUp(800);
				$(this).text(' Show story ');
				fadeButtonIn($(this));
			} else {
				$(".story").slideDown(4000);
				$(this).text(' Hide story ');
				fadeButtonOut($(this));
			}
		}else if($(this).is("#solution-button")){
			if($('.solution').is(':visible')){
				$(".solution").hide('slow');
				$(this).text(' Show solution ');
				fadeButtonIn($(this));
			}else{
				$(".solution").show('slow');
				$(this).text(' Hide solution ');
				fadeButtonOut($(this));
			}
		}
	});
	
	function fadeButtonOut(button) {
		$(button).stop().animate({'opacity':.6}, "swing");
	}
	
	function fadeButtonIn(button) {
		$(button).stop().animate({'opacity':1}, "swing");
	}
});