$(document).ready(function() { 
	// get the width of the images to be rotated, including any right margin you have
	var picWidth = $(".siteImageRotator li:first").width() + parseInt($(".siteImageRotator li:first").css("marginRight"));	
	
	// get the total number of images and total scrolling size
	var numPics = $(".siteImageRotator li").size();			
	var totalWidth = picWidth * numPics;
	var currentPic = 0;		// used for scrolling
	
	//add arrows
	$(".recent_projects_example1").prepend("<a href='#' class='recent_projects_left_arrow'></a>").append("<a href='#' class='recent_projects_right_arrow'></a>");
	
	
	//set actions on left and right arrows
	$(".recent_projects_left_arrow").click(function() {
		if (currentPic > 0)  {
			currentPic--;
			updateElements();
		}
		return false;
	});

	$(".recent_projects_right_arrow").click(function() {
		if (currentPic < numPics-1) {
			currentPic++; 
			updateElements();
		}
		return false;
	});
	
	//this function updates the height and position of the rotator
	function updateElements() {
		//resize box to account for varying caption length
		var currentHeight = $(".siteImageRotator li:nth-child("+(currentPic+1)+")").height();
		$(".siteImageRotatorShell").height(currentHeight);
		
		//scroll rotator box
		$(".siteImageRotator").animate( {marginLeft: -(picWidth * currentPic)} );
	};
	
	
});