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

function SlideShow() {
	setTimeout("SlideShow2()",5000);
}

function SlideShow2() {
	
	//fade out the current slide
	$( slide[i] ).fade({ duration:1 });
	
	//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:1, afterFinish: function () { SlideShow(); } });
} 


function random_order()
{
	return (Math.round(Math.random())-0.5);
} 

//start my functions after the document has loaded
document.observe('dom:loaded', function () {
	var arr = [];
	
	$$('#myslideshow img').each(function(image) {
		if (image.title != "undefined" && image.title.length > 0) {
			arr[arr.length] = '<img src="'+ image.src  +'" alt="'+ image.alt +'" onclick="window.open(\''+ image.title +'\',\'_self\');" />';
		} else {
			arr[arr.length] = '<img src="'+ image.src  +'" alt="'+ image.alt +'" />';
		}
	});
	
	arr.sort( random_order );
	
	document.getElementById('myslideshow').innerHTML = arr.join('');
	
	//hide all of the slideshow images	
	$$('#myslideshow img').each(function(image){
		$(image).hide();
	});
		
	//dump the images into an array
	slide =  $('myslideshow').childElements();

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