/* hintergrundbilder ueberblenden
 *		© by moontools
 *		written by jan gloeckner
 * 		in anlehnung an: http://brainerror.net/scripts/javascript/blendtrans/demo.html
 *
 * 		setzt in html-seite "div id=background_front" und "div id=background_back" voraus
 *
 *		javascript-code in html-seite:
 *		----------------------------------------------
 *		var backImage = new Array();
 *		backImage[0] = "images/bg_01.jpg";
 *		backImage[1] = "images/bg_02.jpg";
 *		backImage[2] = "images/bg_03.jpg";
 *		preloadImages();
 *		
 *		function init() {
 *			startBlending(60, 8000);
 *		}
 *		window.onload = init;
 *		----------------------------------------------
 *
 */
 


// ueberlenden starten mit geschwindigkeit (speed) und anzeigezeit (pause) in milisekunden
function startBlending(speed, pause) {
	// default werte setzen
	if(speed == null) {speed = 60;}
    if(pause == null) {pause = 8000;}
	
	// erstes bild einblenden
	$('background_front').style.backgroundImage = 'url('+ backImage[Math.floor(Math.random() * (backImage.length - 0.01))] +')';
	window.setTimeout(function() {fadeIn(0, speed);}, pause/5);
	
	// erster wechsel nach anzeigezeit starten
	window.setTimeout(function() {change(speed, pause)}, pause*1.2);

}

// einblenden
function fadeIn(opacity, speed) {
	if (opacity < 100) {
		opacity = opacity + 3;
		setOpacity($('background_front'), opacity);
		window.setTimeout(function() {fadeIn(opacity, speed)}, speed);
	} else {
		setOpacity($('background_front'), 100);
	}
}

// bild wechseln
function change(speed, pause) {
	// neues (per zufall ermittelt) bild in unteren div laden
	$('background_back').style.backgroundImage = 'url('+ backImage[Math.floor(Math.random() * (backImage.length - 0.01))] +')';
	
	// ueberblenden starten
	fade(100, speed, pause);
	

}

// ueberblenden
function fade(opacity, speed, pause) {
	if (opacity > 0) {
		opacity = opacity - 3;
		setOpacity($('background_front'), opacity);
		window.setTimeout(function() {fade(opacity, speed, pause)}, speed);
	} else {
		switch_layer(speed, pause);
	}
}

// nach ueberblendung neues bild in vorderen div und unteren div leeren
function switch_layer(speed, pause) {
	setOpacity($('background_front'), 0);
	$('background_front').style.backgroundImage = $('background_back').style.backgroundImage;
	setOpacity($('background_front'), 100);
	$('background_back').style.backgroundImage = "";

	// nach anzeigezeit erneutes wechseln starten
	window.setTimeout(function() {change(speed, pause)}, pause);
}

// transparenz setzen
function setOpacity(obj, o) {
    obj.style.opacity = (o / 100);
    obj.style.MozOpacity = (o / 100);
    obj.style.KhtmlOpacity = (o / 100);
    obj.style.filter = 'alpha(opacity=' + o + ')';
}