var runThatScript = function(){
	$(".thumbnailAnchor").click(function(event){
		//Grab the URL that we want to put in the big image holder
		var bigURL = (event.currentTarget.href);
		
		//Grab the big image so we can update it's source
		var image = $("#bigImage")[0];
		
		//Set the image source to the big url from the anchor
		image.src = bigURL;
		
		//Fade the big image in while we fade out the arrows so you can't mess with what's in back
		$(image).fadeIn("slow");
		$(".scrollButtons").fadeOut("slow");
	})
	
	$("#bigImage").click(function(){
		$(this).fadeOut();
		$(".scrollButtons").fadeIn("slow");
		
		var image = $("#bigImage")[0];
		image.src = "http://hownottolive.com/byeline/images/blankmock.jpg";
		
	})
}


/*
1
var runThatScript = function(){
console.log("Running script");
	$(".pic-thumbnail").click(function(pic){
		console.log("pic is" + pic)
	})
}




2

var runThatScript = function(){
	$(".pic-thumbnail").click(function(event){
		console.log(event.currentTarget.src);
		var image = $("#bigImage")[0];
		console.log(image);
		console.log("^ is the image");
		image.src = event.currentTarget.src;
	})
}


//Now lets move the click action to the <a> tag, because that has the url for the big image we want, we don't want a copy of hte small image
var runThatScript = function(){
	$(".thumbnailAnchor").click(function(event){
		var bigURL = (event.currentTarget.href);
		var image = $("#bigImage")[0];
		
		image.src = bigURL;
	})
}





//lets add some fades
var runThatScript = function(){
	$(".thumbnailAnchor").click(function(event){
		var bigURL = (event.currentTarget.href);
		var image = $("#bigImage")[0];
		
		image.src = bigURL;
		$(image).fadeIn("slow");
	})
	
	$("#bigImage").click(function(){
		$(this).fadeOut();
	})
}









*/