$(document).ready(function(){ 
	
/////////////////////////////////////////////////////////////////////////////////////////////////	
	//Define the animation speed for the Carousel 
	var speed = 2000; 
	//delay between transitions
	var delay = 6000;
	//how many images there are total
	var imagestotal= $('#fader img').size();
	//used to count through the images
	var opaqueimage = 1;
	//allow custom styling or using variables here

	$('#fader').css( "position", "relative" );
	$('#fader img').css( "position", "absolute" );
	$('#fader img').css( "opacity", 0 );
	$('#fader a:nth-child(1) img').css( "opacity", 1 );
	$('#fader a:nth-child(1) img').addClass( "active" );
	
/////////wait() runs the banner animation and then waits before running it again/////////////////		
	function wait()
	{
		setTimeout(fader, delay)

	}
/////////////////////////////////////////////////////////////////////////////////////////////////		
	function fader()
	{
		
		if (opaqueimage == imagestotal)
		{
			$('#fader a:nth-child('+opaqueimage+') img').animate({ opacity: 0}, speed); 
			$('#fader a:nth-child('+opaqueimage+') img').removeClass( "active" ); 
			opaqueimage = 1;
			$('#fader a:nth-child('+(opaqueimage)+') img').animate({ opacity: 1}, speed);
			$('#fader a:nth-child('+(opaqueimage)+') img').addClass( "active" );

		}
		else
		{
		$('#fader a:nth-child('+opaqueimage+') img').animate({ opacity: 0}, speed); 
		$('#fader a:nth-child('+( opaqueimage+1)+') img').animate({ opacity: 1}, speed);
		
		$('#fader a:nth-child('+opaqueimage+') img').removeClass( "active" ); 
		$('#fader a:nth-child('+(opaqueimage+1)+') img').addClass( "active" ); 
		
		opaqueimage=opaqueimage+1;
		
		}
		
		//run the banner again
		 wait();
	}
/////////////////////////////////////////////////////////////////////////////////////////////////		

	//once finished initializing everything, run the banner
	 wait()
	
	});