$(document).ready(function() {
	$('.numberButton').click(function() {
		//Height of your story panes
		var paneHeight = 283;
		var paneWidth = 230;
		
		//Get the story number from the button ID
		var id = $(this).attr("id").replace("portfolio", "");
		
		//Calcuate the top by multiplying it by the story ID
		var top = paneHeight*id;
		
		//top needs to be a negative number
		top = top - top - top;
		
		//Animate this shiznit
		$("div#screenShots").animate({top:top}, 1000, "expoinout");
		
		//Hide All Information Content
		$('.info').each(function() {
			$(this).hide();
		});
		
		//Show Active Information
		$('div#info'+id).show();
		
		//Remove all active buttons
		$('.numberButton').each(function() {
			$(this).attr("src", $(this).attr("src").replace("_active", ""));
		});
		
		//Set the active button
		var img = parseInt(id)+1;
		if (img < 10) {
			$('img#portfolio'+id).attr("src", "images/numberButtons/0"+img+"_active.gif");
		} else {
			$('img#portfolio'+id).attr("src", "images/numberButtons/"+img+"_active.gif");
		}
	});
});