function slideshow() {
	// HT http://web.enavu.com/tutorials/making-a-jquery-infinite-carousel-with-nice-features/comment-page-1/#comment-206
	//var speed = 20;
	playAuto();
	setActive();

	//move the last list item before the first item and shift left. The purpose of this is if the user clicks previous he will be able to see the last item.
	var lastItemWidth = $('#client-slideshow ul li:last').outerWidth(true); // get last item width including margins
	$('#client-slideshow li:first').before($('#client-slideshow li:last')); // move last item to front
	$('#client-slideshow ul').css({'left' : -lastItemWidth}); // hide last item by shifting left
	
	function autoSlideshow() {
		// get current offset, strip negative value and 'px' and add 2px increment
		var currentOffset = $('#client-slideshow ul').css("left");
		var newOffset = Math.abs(parseInt(currentOffset)) + 2; 
		// get width of first item (hidden)
		var hiddenFirstItem = $('#client-slideshow ul li:first-child').outerWidth(true);
		
		// if the offset is greater than the hidden image
		if (hiddenFirstItem < newOffset) { 
			// move hidden image to end of list
			$('#client-slideshow ul li:last-child').after($('#client-slideshow ul li:first-child'));
			// reset offset to 0
			$('#client-slideshow ul').css({'left' : 0});
		} else {
			// nudge to new offset (should be 2px left)
			$('#client-slideshow ul').css({'left' : -newOffset});
		}
	}
	
	function playAuto() {
		//var timer = setInterval(autoSlideshow, 50);
		timer = setInterval(showNext, 2500);
	}
	
	
	// next button
	$('#client-slideshow').after('\n<a id="showNext">Next</a> ');
	$('#showNext').bind('click keypress', function() {
		clearInterval(timer);
		showNext();
	});
	
	//prev button
	$('#client-slideshow').after('\n<a id="showPrev">Previous</a> ');
	$('#showPrev').bind('click keypress', function() {
		clearInterval(timer);
		showPrev();
	});
	
	function setActive() {
		$('#client-slideshow li').click(function(e) {
			// test if the item is opened, and if so enable links
			if ($(this).hasClass("active")) {
				//$(this).click(function() {window.location=$(this).find("a").attr("href"); return false;});
			} else {
				$('#showPrev').hide();
				$('#showNext').hide();

				e.preventDefault(); // disable href
				$('#client-slideshow li').removeClass('active')
				//$(this).animate({width:'340px'}, 200);
				var firstItemWidth = $('#client-slideshow ul li:first-child').outerWidth(true);
				$('#client-slideshow li').css({'left' : firstItemWidth});
				$(this).addClass('active');
				$(this).find('.description').hide().fadeIn();
				$('#client-slideshow .close').show();
				clearInterval(timer); // stop slideshow
			}
		});
		$('#client-slideshow ul').after('\n<a class="close">Close</a>');
		$('#client-slideshow .close').click(function() {
			$('#showPrev').show();
			$('#showNext').show();
			$('#client-slideshow li').removeClass('active');
			$('#client-slideshow li').css({'left' : 0});
			$('#client-slideshow .close').hide();
			$('#client-slideshow .description').hide();
			playAuto();
		});
	}

	
	function showNext(){
		//get the first list item (hidden) and move it to end of list
		$('#client-slideshow ul li:last-child').after($('#client-slideshow ul li:first-child'));
 		$('#client-slideshow ul').css({'left' : 0});
        
		//get the width of new first item (current) including margin and calculate new ul offset (to hide current item)
		var firstItemWidth = $('#client-slideshow ul li:first-child').outerWidth(true);
		var ulOffset = parseInt($('#client-slideshow ul').css('left')) - firstItemWidth;

		// animate
		$('#client-slideshow ul').animate({'left' : ulOffset},600,function(){

			// move ul left to hide the current item
			$('#client-slideshow ul').css({'left' : -firstItemWidth});
		});
	}

	//when user clicks the image for sliding left
	function showPrev() {

		// get width for first (new) and last (new-hidden) items, and ul offset
		var lastItemWidth = $('#client-slideshow ul li:last-child').outerWidth(true);
		var newItemWidth = $('#client-slideshow ul li:first-child').outerWidth(true); 
		var ulOffset = parseInt($('#client-slideshow ul').css('left')) + newItemWidth;

		$('#client-slideshow ul:not(:animated)').animate({'left' : ulOffset},400,function(){

			// move current hidden item to end of list
			$('#client-slideshow ul li:first-child').before($('#client-slideshow ul li:last-child'));

			// set left offset to the width of the new first item (hidden)
			$('#client-slideshow ul').css({'left' : -lastItemWidth});
		});
	}
}


// adds class="js" to body tag for javascript styling

function setJs() {
	if (document.getElementsByTagName("body")) {
		var addClass = document.getElementsByTagName("body");
		for (var i=0; i<addClass.length; i++) {
			addClass[i].className = "js";
		}
	}
}

