// welches der beiden Bilder im Hintergrund ist somit ausgetauscht werden kann
var vorne = "bgimg0";
var hinten = "bgimg1";

var interval;

var nextpic = 0;

jQuery.fn.fadeToggle = function(speed, easing, callback) {
	return this.animate({opacity: 'toggle'}, speed, easing, callback);  
};

$(document).ready(function(){
	if(document.getElementById(hinten) != null){
		$("#but_left").fadeTo(0, 0.75);
		$("#but_right").fadeTo(0, 0.75);
		setTimeout("startAnimation()",3000);
	} else {
		// wenn 1 oder kein Bild vorhanden
		$("#but_left").hide();
		$("#but_right").hide();
	}
});

function startAnimation(){
	fadeAuto();
	interval = setInterval("fadeAuto()",6000);
}

//ein Bild vor
function showImg(imgid){
	if(nextpic != imgid){
		clearInterval(interval);
		$("#visualbg0").queue(function() {
			nextpic = imgid;
			fade(1500);
			$(this).dequeue();
		});
	}
}

// ein Bild vor
function next(){
	clearInterval(interval);
	$("#visualbg0").queue(function() {
		nextpic++;
		fade(1500);
		$(this).dequeue();
	});
}

// ein Bild zurueck
function back(){
	clearInterval(interval);
	$("#visualbg0").queue(function() {
		if(nextpic == 0){
			nextpic = bgpics.length - 1;
		} else {
			nextpic--;
		}
		fade(1500);
		$(this).dequeue();
	});
}

function fadeAuto(){
	$("#visualbg0").queue(function() {
		nextpic++;
		fade(2500);
		$(this).dequeue();
	});
}

// Vorderes Bild ein- und ausblenden
function fade(speed){
	// Hinteres Bild austauschen
	changeImg();
	var bg1 = $("#visualbg0");
	bg1.fadeToggle(speed, "linear", function(){
	});	
}

// Hinteres Bild austauschen
function changeImg(){
	document.getElementById(hinten).src = bgpics[nextpic%bgpics.length];
	
	var temp = vorne;
	vorne = hinten
	hinten = temp;
}