$(document).ready( function() {


	// set currently selected portfolio piece to be orange (active state)
	$("#navigation li.work a").addClass("active");	



	// show the details text on mouseover
	$("a#read-button").mouseover( function() {
		$("p.details").fadeIn(0);
	});

	// hide the details on mouseout
	$("a#read-button").mouseout( function() {
		$("p.details").fadeOut(0);
	});
	
	
	// set default currentImage
	// in css, the class is:  "nav" + currentImage
	var currentImage = "1";

	// get all the children of the project nav with the class 'nav'
	// these are the numbered nav items; next and prev will be handled elsewhere
	nav_numbers = $("#project-nav").find("a.nav");
	totalImages = nav_numbers.length;
	
	if(totalImages == 1) {
		$("a.next").addClass("disabled");		
	}
		
	// previous button controls
	$("a.previous").click(function(){
		if(currentImage != 1)
		{
			$("a.next").removeClass("disabled");

			presentImage = currentImage;
			currentImage--;
			nextImage = currentImage;
			
			switchImages(nextImage, presentImage);
		}
		return false;
	});

	// next button controls
	$("a.next").click(function(){
		if(currentImage != totalImages)
		{
			$("a.previous").removeClass("disabled");
			
			presentImage = currentImage;
			currentImage++;
			nextImage = currentImage;
			
			switchImages(nextImage, presentImage);
		}
		return false;
	});

	// attach click events to all of the numbered nav that appear on the page
	// NOTE: currently designed to handle 9 images in the project nav
	//		 will need some additional work to handle 10+ images
	for(var i=0; i<totalImages; i++)
	{
		$(nav_numbers[i]).click(function() {
				
			// get info for image to show
			nextImage = $(this).attr("class");
			nextImage = nextImage.replace("nav nav0", "");
			nextImage = nextImage.replace(" active", "");
		
			if(currentImage != nextImage)
			{
				switchImages(nextImage, currentImage);
			}
			
			return false;  // prevents browser from following href
		});	
	}
	

	// NOTE: currently designed to handle 9 images in the project nav
	//		 will need some additional work to handle 10+ images
	function switchImages(nextImage, presentImage)
	{
		// show 'read about it' link on first nav item only
		// hide on all others
		if(nextImage == 1)
		{
			//$("a#read-button").fadeIn(0);
			$("a.previous").addClass("disabled");		
		
			if(totalImages != 1) {
				$("a.next").removeClass("disabled");		
			}
		
		} else {
			//$("a#read-button").fadeOut(0);
			
			if(nextImage == totalImages)
			{
				$("a.previous").removeClass("disabled");		
				$("a.next").addClass("disabled");		
			} else {
				$("a.previous").removeClass("disabled");		
				$("a.next").removeClass("disabled");						
			}
			
		}





		// only run if the user has clicked on a non-active link
		if(presentImage != nextImage)
		{
			// position image to show above currently displayed image
			$("img.image0"+nextImage).css("z-index", 20);
			$("img.image0"+presentImage).css("z-index", 10);
	
			// fade new image in and fade old one out
			$("img.image0"+nextImage).fadeIn(0);
			$("img.image0"+presentImage).fadeOut(0);

			// remove active class from previous link
			// add the active class to currently selected link
			$("a.nav0"+presentImage).removeClass("active");
			$("a.nav0"+nextImage).addClass("active");

			// update currentImage
			currentImage = nextImage;
		}	
	}

});