$(document).ready(function() {

	//Variable for the timeouts
	var sliderTimeout = '';
	
	//Adds click function to the control buttons.
	$('#slidercontrols li').click(function(){
		//Selects the clicked button's index
		var number = $(this).index();
		
		//shows the next slide after hiding the last one
		$('.slide').fadeOut().eq(number).fadeIn();
		
		//Toggles the state of the clicked button, most likely to active
		if( !( $(this).hasClass('activecontrol') ) )
			$(this).toggleClass('activecontrol inactivecontrol');
		
		//Removes the active state from all buttons except the clicked one, and makes sure they say inactive
		$('#slidercontrols li').not(this).removeClass('activecontrol').addClass('inactivecontrol');
		
		//Person clicked it, they want to focus on it - Increse the rotation
		clearTimeout(sliderTimeout);
		sliderTimeout = setTimeout( doIt, 10000 );
	});
	
	//Hides all slides but the first on load
	$('.slide').not(':first').hide();

	var doIt = function() {
		//Select the only active button
		var button = $('#slidercontrols li.activecontrol');
		
		//get the index of this button
		var number = $('#slidercontrols li.activecontrol').index();
		
		//start over if we are at the end
		if( number == $('#slider .slide').size() - 1 )
			number = -1;
		
		//shows the next slide after hiding the last one
		$('.slide').fadeOut().eq(number+1).fadeIn();
		
		//string to select next button
		var nextb = '#slidercontrols li#sliderbutton'+(number+1);
		
		//Toggle the newly selected button
		$(nextb).toggleClass('activecontrol inactivecontrol');
		
		//Update other buttons
		$('#slidercontrols li').not(nextb).removeClass('activecontrol').addClass('inactivecontrol');
		
		//Set the slider to rotate
		clearTimeout(sliderTimeout);
		sliderTimeout = setTimeout( doIt, 5000 );
	};
	
	//Set the slider to rotate on load.
	clearTimeout(sliderTimeout);
	sliderTimeout = setTimeout( doIt, 5000 );
});