// js functions
// this self-calling anonymous function is to keep the vars out of the global space ( window. ) 
(function() {
	function $id(el)
	{
		return document.getElementById(el);
	}
	
	$(document).ready( function ()
	{
	
		//////////////////////////////////////////////////////////////////////
		// slide show dom ready initialization 
			
		 elIn = $id('image_holder1'); // initialize these element holders
		 elOut = $id('image_holder2');	

		// add forward/back buttons
		var button_html = "<div id='img_next' class='slide_show_num' ><a href='#'><img class='link_like' src='/images/fwrd.gif'></a></div><div id='img_prev' class='slide_show_num' ><a href='#'><img class='link_like' src='/images/rev.gif'></a></div>";
		$('#slide_show_num_container').append(button_html);
		$('#img_next').click( function() 
		{
			manuallyChangeImage('next');
		});
		$('#img_prev').click( function() 
		{
			manuallyChangeImage('prev');
		});
	
	}); // end dom load
	
	$(window).load( function () 
	{ 
	
		waiting = setTimeout( function() {
			slideShow();
		}, 3000); // wait 3 seconds before initiating slid show
	} );
	
	var imgArray = banners;
	var block = false;
	var count = 1; // init to one because we are already showing 1,2 and we increment before assigning vals
	var fadedOut = fadedIn = false;
	function slideShow() 
	{
		if ( block ) { // if we are currently fading don't allow this function from continuing
			return false;
		}
		block = true; // set true while fading - doen for the manual changing of images
		
		$(elOut).fadeOut(700, function() { fadedOut = true  });
		$(elIn).fadeIn(700, function() { fadedIn = true; });
		testImgSwap();
		
	}
	function testImgSwap()
	{
		if ( fadedOut == true && fadedIn == true ) {
			swapImages();
			fadedOut = fadedIn = block = false;
		} else {
			setTimeout( function () 
			{
				testImgSwap();
			}, 10);
				
		}// end if faded in  and fadedout ar true
	}
	function swapImages()
	{
		count++; // increment from one to 2 so we can get the 3rd image (zero offset)
		var array_num = ( count % imgArray.length );

		elOut.getElementsByTagName('img')[0].src = imgArray[array_num];
		// swap fade elements
		elHolder = elOut;
		elOut = elIn;
		elIn = elHolder;
		waiting = setTimeout( function () { slideShow() }, 7000 );
	}
	function manuallyChangeImage(dir)
	{
		if ( block ) { // if we are currently fading don't allow this function from continuing
			return false;
		}
		clearTimeout( waiting );
		if ( dir == 'next') {
			slideShow();
		}  else {
			count += (imgArray.length -2); // instead of subtracting - add the equivalent distance
			var array_num = ( count % imgArray.length );
			elIn.getElementsByTagName('img')[0].src = imgArray[array_num];

			slideShow();
		} // end if else dir
	}

})();