// Home Page Slider Script
// Author: Innovation Simple [Sam Eddy]

/* 
	USE INSTRUCTIONS:
	Edit the vars to match the properties of your slider images
	All Images MUST be named with a number following [including the first image] >> slider1.png, slider2.png, slider3.png, etc
	the DIV MUST have the same ID as declared in the javascript var and MUST be declared before the script is exectued [slider();]
	
	Slider Control Buttons:
	<img src="" onclick="manualChange(SLIDER_NUMBER_TO_CHANGE_TO);" id="VAR_sliderButtonPrefix + VAR_SLIDER_NUMBER_TO_CHANGE_TO" />
*/

var numOfImgs = 3;
var secondsPerImg = 5;
var sliderHeight = 299;

//slider control vars
var sliderDivId = "slider1";
var topSliderDivId = "slider2";
var sliderButtonPrefix = "sliderButton";




var currImg = 2;
var sliderTimer = setTimeout(slider, secondsPerImg * 1000);

function slider()
{		
	sliderTimer = setTimeout(slider, secondsPerImg * 1000);
	changeImg();
}

function changeImg()
{
	//slider
	jQuery('#' + sliderDivId).css({backgroundPosition: ("left -" + ((currImg - 1) * sliderHeight) + "px")});
	jQuery('#' + topSliderDivId).fadeTo(1000, 0, 
	function() { 
		jQuery('#' + topSliderDivId).css({backgroundPosition: ("left -" + ((currImg - 1) * sliderHeight) + "px")});
		jQuery('#' + topSliderDivId).css('opacity', 1);
		
		//buttons
		jQuery('.' + sliderButtonPrefix).removeClass('active');
		jQuery('#' + sliderButtonPrefix + currImg).addClass('active');
		
		currImg++;
		
		if (currImg > numOfImgs)
			currImg = 1;
		
	});
}

function manualChange(imgNumber)
{
	clearTimeout(sliderTimer);
	
	currImg = imgNumber;
	
	changeImg(); //comment out if you un-comment the 'slider();' command below (since calling 'slider()' also calls 'changeImg()'			
	//slider(); //UN-COMMENT IF YOU WANT THE TIMER TO RESET RATHER THEN STOP ENTIRELY WHEN SLIDER IS MANUALLY CHANGED
}