// JavaScript Document

var i = 0; //initialize the counter
var slide; //setup the image array variable

function SlideShow() {
	//fade out the current slide
	$( slide[i] ).fade({ duration:5.5 });
	
	//add 1 to i 
	i++;		
	//check if we've reached the end of our slides, if so, rewind i to 0		
	if (i == slide.length) i = 0; 
	
	//fade in the next slide and after it's finished, loop this function
	$( slide[i] ).appear({ duration:5.5, afterFinish: function () { SlideShow(); } });
} 

//start my functions after the document has loaded
document.observe('dom:loaded', function () {

	//hide all of the slideshow images	
	$$('#slideshow img').each(function(image){
		$(image).setStyle({visibility:'visible'});
		$(image).hide();
	});
		
	//dump the images into an array
	slide =  $('slideshow').childElements();

	//fade in the first slide and after it's finished, start the slideshow
	$( slide[0] ).appear({ duration:1, afterFinish: function () { SlideShow(); } });
	
});


//start my functions after the document has loaded
document.observe('dom:loaded', function () {

	//hide all of the slideshow images	
	$$('#slideshow-sub img').each(function(image){
		$(image).setStyle({visibility:'visible'});
		$(image).hide();
	});
		
	//dump the images into an array
	slide =  $('slideshow-sub').childElements();

	//fade in the first slide and after it's finished, start the slideshow
	$( slide[0] ).appear({ duration:1, afterFinish: function () { SlideShow(); } });
	
});