$(document).ready(function() {
	
	// highlight the play button
	$('#play').addClass('selected');
	
	// callback function that is initiated when the carousel loads
	function carousel_callback(carousel) {
		
		// clicking on the numbers will move slide to correct location
	    $('#slideshow_numbers a').bind('click', function() {
	        carousel.scroll($.jcarousel.intval($(this).text()));
			carousel.startAuto(0);
			$('#play').removeClass('selected');
			$('#stop').addClass('selected');
	        return false;
	    });

		// pressing the right arrow will move to the next slide
	    $('#right-arrow').bind('click', function() {
			carousel.next();
			carousel.startAuto(0);
			$('#play').removeClass('selected');
			$('#stop').addClass('selected');
	        return false;
	    });

		// pressing the left arrow will move to the previous slide
	    $('#left-arrow').bind('click', function() {
	        carousel.prev();
			carousel.startAuto(0);
			$('#play').removeClass('selected');
			$('#stop').addClass('selected');
	        return false;
	    });	
	
		// pressing the stop button stops the auto rotation
		$('#stop').bind('click', function() {
			carousel.stopAuto();
			$('#play').removeClass('selected');
			$('#stop').addClass('selected');
	        return false;
	    });
	
		// pressing the play button starts the auto rotation
		$('#play').bind('click', function() {
			carousel.startAuto(3);
			$('#play').addClass('selected');
			$('#stop').removeClass('selected');
	        return false;
	    });
	};
	
	// callback function that activates whenever a slide animates into view - used to highlight the slide number
	function carousel_visible_slide(carousel, item, idx, state) {
		$('#slideshow_numbers a').removeClass('selected');
		$('.slide_'+idx).addClass('selected');
	};
	
	// initiate the slideshow
    $('#carousel').jcarousel({
		scroll: 1, // scroll 1 slide at a time
		initCallback: carousel_callback, // initiate the callback functions
		itemVisibleInCallback: { // initiate callback when a slide animates into view
			onAfterAnimation:  carousel_visible_slide
		},
        buttonNextHTML: null, // disable auto generation of next button
        buttonPrevHTML: null, // disable auto generation of previous button
		auto: 3, // set auto play to change slides every 3 seconds
		wrap: 'both' // wrap the carousel so that when you get to the end, it starts at the beginning again
    });
});