// Globale Variablen definieren
var scrollableChangeTime=5000;
var activeSlide=1;
var oldSlide;
var maxSlides=$('#slides .slide').length;
var timerindicatorUpdateTime=scrollableChangeTime/100;
var timerindicatorUpdateCounter=0;
var timerindicator_interval;

$(window).load(function() {
	
	// Scrollable initialisieren
	var scrollable=$('div#scrollable').scrollable({
		size: 1,
		items: 'div#slides',
		clickable: false,
		keyboard: false
	}).circular().navigator({
		navi: 'div#scrollable_navigation ul'
	});
	
	// Slide-Inhalte einblenden
	$('div#slides div.slide *').fadeIn('slow');

	// Timer-Indikator Animation und Slideshow starten
	timerindicator_interval=setInterval('timerindicatorUpdate()', timerindicatorUpdateTime);
	
	// Scrollable-Navigation Klick-Events einrichten
	$('#scrollable_navigation a').click(function() {
		
		// Interval und Zähler zurücksetzen
		clearInterval(timerindicator_interval);
		timerindicatorUpdateCounter=0;
		
		// Breite für aktiven zurücksetzen
		$('#timerindicator_'+activeSlide+' span').width(0);
		
		// Neuen aktiven und alten Slide setzen
		oldSlide=activeSlide;
		activeSlide=$(this).attr('href').replace('/#slide_', '');
		
		// Neuen Interval starten
		timerindicator_interval=setInterval('timerindicatorUpdate()', timerindicatorUpdateTime);
		
	});
});

function timerindicatorUpdate()
{
	timerindicatorUpdateCounter++;
	
	// Breite berechnen
	var timerindicatorWidth=timerindicatorUpdateCounter*timerindicatorUpdateTime/scrollableChangeTime*100;
	
	// Breiten für aktiven und vorherigen Indikator setzen
	$('#timerindicator_'+activeSlide+' span').width(timerindicatorWidth+'%');
	if(oldSlide!=activeSlide) $('#timerindicator_'+oldSlide+' span').width(0);
	
	// Timer-Indikator-Reset
	if(timerindicatorUpdateCounter*timerindicatorUpdateTime>=scrollableChangeTime)
	{
		// Interval und Zähler zurücksetzen
		clearInterval(timerindicator_interval);
		timerindicatorUpdateCounter=0;
		
		// jQuery TOOLS API initialisieren
		var scrollable_api=$('div#scrollable').data('scrollable');
		
		// Nächstes Slide zeigen
		scrollable_api.next();
		
		// Aktives Slide bestimmen
		oldSlide=activeSlide;
		activeSlide=scrollable_api.getIndex()+1;
		if(activeSlide>maxSlides) activeSlide=1;
		
		// Neuen Interval starten
		timerindicator_interval=setInterval('timerindicatorUpdate()', timerindicatorUpdateTime);
	}
}
