$(document).ready(function() {
    $('#slideshow').cycle({
        fx:      'fade',
        timeout:  6000,
		  speed: 400,
		  startingSlide: 0,
		  after: changeNav,
		  slideExpr: 'div.slide'
    });

	$('#goto1').click(function() {  
		 $('#slideshow').cycle(0); 
		 return false; 
	}); 
	 
	$('#goto2').click(function() { 
		 $('#slideshow').cycle(1);  
		 return false;  
	}); 
	
	$('#goto3').click(function() {
		 $('#slideshow').cycle(2); 
		 return false; 
	}); 
	
	$('#goto4').click(function() {
		 $('#slideshow').cycle(3); 
		 return false; 
	}); 

	function changeNav(curr, next, opts, fwd) {
		var c = opts.currSlide;
		if (c == 0) {
			activeOne();
		}
		if (c == 1) {
			activeTwo();
		}
		if (c == 2) {
			activeThree();
		}
		if (c == 3) {
			activeFour();
		}
	}

	function clearClass() {
		document.getElementById("goto1").src = "images/slideshow/button-inactive.png";
		document.getElementById("goto2").src = "images/slideshow/button-inactive.png";
		document.getElementById("goto3").src = "images/slideshow/button-inactive.png";
		document.getElementById("goto4").src = "images/slideshow/button-inactive.png";
	}

	function activeOne() {
		clearClass();
		document.getElementById("goto1").src = "images/slideshow/button-active.png";
	}
	function activeTwo() {
		clearClass();
		document.getElementById("goto2").src = "images/slideshow/button-active.png";
	}
	function activeThree() {
		clearClass();
		document.getElementById("goto3").src = "images/slideshow/button-active.png";
	}
	function activeFour() {
		clearClass();
		document.getElementById("goto4").src = "images/slideshow/button-active.png";
	}
	
});