$(document).ready(function(){

	// SLIDESHOW SETTINGS --------------------------------------------------------------------------------

	var divToAnimate = "#home_main_banner_slider";	// this is the div that shows the current slide only
	var divWithSlides = "#home_main_banner_slides";					// this is the div that holds all slides, side to side so that it can be scrolled horizontally
	var buttonIdNext = "#home_main_banner_nav_next";				// this is the div that holds all slides, side to side so that it can be scrolled horizontally
	var buttonIdPrevious = "#home_main_banner_nav_prev";		// this is the div that holds all slides, side to side so that it can be scrolled horizontally

	var scrollSpeed = 750;									// this is the number of msec it takes to transition to the next selected slide
	var scrollBackToBeginningSpeed = 300;			// this is the number of msec it takes to transition to the beginning of list when at the end

	var autoTransitionEnabled = true;			// Change slides automatically after a period of time?
	var autoTransitionFrequency = 10000;			// How often to change slides automatically  (msec)

	var slidesEachTimeCount = 3; 					// how many slides to show each time
	// END OF SLIDESHOW SETTINGS  ------------------------------------------------------------------------
	// ---------------------------------------------------------------------------------------------------

	var slideNumber = 0;										// this is the currently active (shown) slide number - start at the first - 0
	
	// CALCUATIONS
	var slideWidth = $(divToAnimate).width(); 		// width of the visible area of the slide(s) (defined in css) 
	
	// determine the total width of all the slides
	
	var numSlides = $(divWithSlides + " > div").size();
	
	var slideCount = (numSlides / slidesEachTimeCount);	// total number of slide divs divided by the number of divs to show each time
		
	var totalSlidesWidth = slideCount * slideWidth;
	// END OF CALCUATIONS
	
	$(divWithSlides).width(totalSlidesWidth);			// set the width of the div that holds all slides (this must be done for this to work!)
	
	
	// setup the auto transitioning if enabled
	if (autoTransitionEnabled) {
		enableAutoTransition();
	}
	
	function enableAutoTransition() {
		$(document).everyTime(autoTransitionFrequency, divToAnimate, function(i) {
  			showNextSlide(); 
		}, 0);	// 0 here means there is no limit to how many times this can happen
	}
	
	function disableAutoTransition() {
		$(document).stopTime(divToAnimate);
	}
	
	$(buttonIdNext).click(function() {
		showNextSlide();
		disableAutoTransition();
		enableAutoTransition();
	});
	
	$(buttonIdPrevious).click(function() {
		showPreviousSlide();
		disableAutoTransition();
		enableAutoTransition();
	});
	
	function showNextSlide() {
		var scrollToPosition;
		var scrollSpeedSetting;
		// note the previous selected slide number
		var previousSlideNumber = slideNumber;
		// are we at the last slide? if so, go to first slide			
		if (slideNumber == (slideCount - 1)) { 		// we're at the last slide so scroll back to 0
			// scroll to left - 0
			scrollToPosition = 0;
			scrollSpeedSetting = scrollBackToBeginningSpeed;
			slideNumber = 0;
		} else {
			slideNumber++;
			scrollToPosition = (slideNumber * slideWidth);
			scrollSpeedSetting = scrollSpeed;
		}
										
		// now do the scroll	
		$(divToAnimate).animate({scrollLeft: scrollToPosition}, scrollSpeedSetting);	
	}
	
	function showPreviousSlide() {
		// are we at the first slide? if so, go to last slide
		if (slideNumber == 0) {
			// scroll to show the last slide
			slideNumber = (slideCount - 1);				// slide number starts at 0 so the last is (total - 1)
			scrollSpeedSetting = scrollBackToBeginningSpeed;
		} else {
			slideNumber--;
			scrollSpeedSetting = scrollSpeed;
		}
		
		// now do the scroll				
		$(divToAnimate).animate({scrollLeft: (slideNumber * slideWidth)}, scrollSpeedSetting);		
	}
});