$(document).ready(function() {

	// Slideshow gallery on the home page
	var $listItems = $('.slideshow li');
	var $image = $('.slideshow');
	
	// Find out the width of the ul depending on how many li's there are
	var itemWidth = 947;
	var $itemCount = $('#slideshowContainer ul li').length;
	var $galleryWidth = $itemCount * itemWidth;
	
	// Create next and previous buttons
	$('<div id="slideshowNav"><a id="previous" href="#"></a><a id="next" href="#"></a></div>').insertBefore('#slideshowContainer');
	
	// Override styles from stylesheet
	$('#slideshowContainer').css ({
		'height': '418px',
		'overflow': 'hidden',
	});
	
	$($image).css ({
		'height': '418px',
		'width': $galleryWidth,
		'position': 'relative'
	});
	
	var $nextButton = $('a#next');
	var $prevButton = $('a#previous');
	
	// Set the start position of main image
	var position = 0;
	// Next button
	$($nextButton).bind('click', function() {
		position++;
		animate();
		checkButtons();
	});
	
	// Previous button (set the previous button to inactive to begin with)
	$($prevButton).addClass('inactive');
	$($prevButton).bind('click', function(){
		position--;
		animate();
		checkButtons();
	});
	
	// Animate function to be used in next/previous buttons
	function animate() {
		if (position > $itemCount-1) {
			position = $itemCount-1;
		} else if (position < 0) {
			position = 0;
		} else {
			$image.animate({ 
				marginLeft: -itemWidth * position,
			}, '1800', 'easeOutQuad');
		}
	} //end animate function

	// Function to ad inactive to next/previous buttons
	function checkButtons() {
  		if (position == 0) {
  			$($prevButton).addClass ('inactive');
  			$($nextButton).removeClass ('inactive');
  		} else if (position == $itemCount-1) {
  			$($nextButton).addClass ('inactive');
  			$($prevButton).removeClass ('inactive');
  		} else {
  			$($prevButton).removeClass ('inactive');
  			$($nextButton).removeClass ('inactive');
  		}
	}

}); //end document