$(document).ready(function(){
		
	// Hides every Project Set then shows the first project set and sets its class to "active_project"
	$(".project_set").css({ display: "none" });
	$(".project_set").eq(0).css({ display: "block" });
	$(".project_set").eq(0).attr("class","project_set active_project");
	$(".project_set:eq(0) .project_image_toggle a").eq(0).attr("class","active_toggle");
	
	//Set the large image to be the first image of the first project set
	getInitialLargeImage();
	
	// Add a click event to every thumbnail
	$("#portfolio_thumbs a").each(function(int){
		$(this).click( function(){ 
			// Is the clicked on thumb project already active? If so, return false;
			if ($(".project_set").eq(int).attr("class") == "project_set active_project") {
				return false;
			};
			// Hides the currently active project set, then removes its "active_project" class
			$(".active_project").css({ display: "none" });
			$(".active_project").attr("class","project_set");
			
			// View the project set corresponding to the thumb clicked on, and give that project_set the active_project class
			$("#large_port_img_holder").css({ display: "none" });
			$("#large_port_img_holder").fadeIn("medium");
			$(".project_set").eq(int).fadeIn("medium");
			$(".project_set").eq(int).attr("class","project_set active_project");
			
			// run the function to see which image should occupy the large image placeholder
			getInitialLargeImage();
			
			// set the "active_toggle" class to the first toggle for the current project
			if ($(".active_toggle")) {
				$(".active_toggle").toggleClass("active_toggle");
			};
			$(".active_project .project_image_toggle a").eq(0).attr("class","active_toggle");
			
			resizeCaption();
			
			return false;
		});
	});
	
	// Add a click event to every image toggle button
	$(".project_image_toggle a").each(function(int){
		$(this).click( function(){
		// Check to see if another image has already been toggled, and if it does, turn the class off	
		if ($(".active_toggle")) {
			$(".active_toggle").toggleClass("active_toggle");
		};
		// Do the same with current_project_image class
		if ($(".current_project_image")) {
			$(".current_project_image").toggleClass("current_project_image");
		};
		$(this).toggleClass("current_project_image");
		// Set the clicked link to have the active_toggle class
		$(this).toggleClass("active_toggle");
		// Create a variable that holds the toggle buttons linked image and alt
		var linkedImage = $(this).attr("href");
		$("#large_port_img_holder img").attr("src",linkedImage);
		var linkedImageAlt = $(this).attr("alt");
		$("#large_port_img_holder img").attr("alt",linkedImageAlt);
		var linkedImageCaption = $(".active_project .project_image_toggle .current_project_image").attr("title");
		$("#large_port_img_holder p").html(linkedImageCaption);
		
		resizeCaption();
		
		return false;
		});
	});
	
});

function getInitialLargeImage() {
	// If a link already has the class "current_project_image", turn it off
	if ($(".current_project_image")) {
		$(".current_project_image").toggleClass("current_project_image");
	};
	// Give the class "current_project_image" to the first link in the active project's ul.project_image_toggle. 
	$(".active_project .project_image_toggle a").eq(0).toggleClass("current_project_image");
	var largeImage = $(".active_project .project_image_toggle .current_project_image").attr("href");
	$("#large_port_img_holder img").attr("src",largeImage);
	var largeImageAlt = $(".active_project .project_image_toggle .current_project_image").attr("alt");
	$("#large_port_img_holder img").attr("alt",largeImageAlt);
	var largeImageCaption = $(".active_project .project_image_toggle .current_project_image").attr("title");
	$("#large_port_img_holder p").html(largeImageCaption);
	
	resizeCaption();
};

function resizeCaption()
{
	// Get the size of the active image
	var currImageSize = ($("div#large_port_img_holder img").width()) - 10;
	// Set the size of the large port image caption to the width of the image
	$("p.large_port_img_caption").width(currImageSize);
};