window.onload = startSlideshow;

function startSlideshow() {
	window.slideShowSteadyCounter = 0;  // never gets reset
	window.slideShowCounter = 1;		// resets after all slides have shown
	window.stackCounter = 5; // z-index for slide divs.
	window.number_of_slides = $$(".slideshow_image_container").length;
	continueSlideshow();
}

function continueSlideshow() {
	// console.log(window.slideShowCounter);

	var counter = window.slideShowCounter;
	
	var delay_in_s = 3;
	var stop_slideshow_after = 90; // stop slideshow after so many seconds to save cpu time on client
	var old_number = counter;

	
	$('slideshow_' + counter).style.zIndex = window.stackCounter++;
	
	// show new slide:
	//console.log('showing nr' + counter);
	$('slideshow_' + counter).appear({ duration: delay_in_s /3 - 0.1 });
	
	window.slideShowCounter = counter;
	if (window.slideShowSteadyCounter < stop_slideshow_after / delay_in_s) {
		window.setTimeout(continueSlideshow, delay_in_s * 1000);
		// hide old slide:
		window.setTimeout(function(){$('slideshow_' + old_number).style.display='none';}, 2 * delay_in_s * 1000);
		window.slideShowSteadyCounter++;
	}

	// increase counter or reset to 0 if number of slides has been reached
	if (counter < window.number_of_slides) {
		window.slideShowCounter++;
	} else {
		window.slideShowCounter = 1; 
	}
	// reset stackcounter after 100, so z-index doesnt grow too much
	if (window.stackCounter > 100) {window.stackCounter = 5;}
	
}