/**
 * PicFade - Javascript-Funktion zum Ueberblenden von Bildern ueber einem Seitenobjekt
 *
 * (c) 2009 infoworxx
 * Alenconer Str. 30
 * 49610 Quakenbrueck
 *
 * @author Christian Wellinghorst
 *
 *
 *
 * Quick Start Guide:
 * Anlegen des Faders:
 * PicFade.initop({objekt-DOM-ID}, {bild-url-1});
 * Hinzufuegen des zweiten (und weiterer) Bilder:
 * PicFade.addImg({bild-url});
 * Starten des Faders:
 * PicFade.switchImg();
 * Wichtig fuer Groessenaenderung des Fensters:
 * window.onresize = PicFade.resize;
 **/


function randNum( mn, mx ) {
	if(mn >= mx)
		return mn;
	
	return ( mn + parseInt( Math.random() * ( mx - mn + 1 ) ) );
}


function PicFade() {
}


PicFade.imgurls = new Array(); // URLs der zu verwendenen Bilder
PicFade.waitcycles = 200; // Anzahl der Zyklen, die gewartet werden soll, bis ein Bildwechsel durchgefuehrt wird
PicFade.fadefrom = 150; // Anzahl der Zyklen, die gewartet wird, bis der Bildwechsel gestartet wird
PicFade.currentindex = 0; // interne Variable - nicht aendern
PicFade.currentcycle = 0; // interne Variable - nicht aendern
PicFade.img1 = ''; // interne Variable - nicht aendern
PicFade.img2 = ''; // interne Variable - nicht aendern
PicFade.mainelmname = ''; // interne Variable - nicht aendern
PicFade.resizing = false;


/**
 * Initialisiert den Picture-Fader
 * 
 * @param objname [string]			-	die DOM-ID des Objekts, ueber das der Bildwechsel gelegt werden soll
 * @param firstimg [string]			-	die URL des ersten Bildes, das fuer den Bildwechsel verwendet werden soll
 **/
PicFade.initop = function(objname, firstimg) {
	
	this.imgurls.push(firstimg);
	parentelm = document.getElementById(objname);
	this.mainelmname = objname;
	
	if(parentelm != null) {
		
		// Ermitteln der Position des parentelm-Elements auf der Seite
		var offTop = parentelm.offsetTop;
		var offLeft = parentelm.offsetLeft;
		var curobj = parentelm;
		
		while(curobj.offsetParent != null) {
			curobj = curobj.offsetParent;
			offTop += curobj.offsetTop;
			offLeft += curobj.offsetLeft;
		}
		
		// Erzeugen des Container-DIVs
		var newLayer = document.createElement("div");
		newLayer.style.position = "absolute";
		newLayer.style.border = "none";
		newLayer.style.background = "none";
		newLayer.style.width = parentelm.offsetWidth+"px";
		newLayer.style.height = parentelm.offsetHeight+"px";
		newLayer.style.top = offTop+"px";
		newLayer.style.left = offLeft+"px";
		newLayer.style.zIndex = (parentelm.style.zIndex + 1);
		newLayer.style.overflow = 'hidden';
		newLayer.id = 'PicFade_imageLayer1';
		
		// den Layer dem Dokument Hinzufuegen
		document.getElementsByTagName('body')[0].appendChild(newLayer);

		
		// Erzeugen der Bildelemente
		this.img1 = document.createElement("img");
		this.img1.alt = '';
		this.img1.src = this.imgurls[0];
		this.img1.style.position = 'absolute';
		this.img1.style.top = "0px"
		this.img1.style.left = "0px"
		this.img1.style.zIndex = '80';
		this.img1.style.width = parentelm.offsetWidth+"px";
		this.img1.style.height = parentelm.offsetHeight+"px";
		this.img1.style.border = 'none';
		newLayer.appendChild(this.img1);

		this.img2 = document.createElement("img");
		this.img2.alt = '';
		this.img2.src = this.imgurls[0];
		this.img2.style.position = 'absolute';
		this.img2.style.top = "0px"
		this.img2.style.left = "0px"
		this.img2.style.zIndex = '90';
		this.img2.style.filter = "alpha(opacity=0)";
		this.img2.style.opacity = '0';
		this.img2.style.width = parentelm.offsetWidth+"px";
		this.img2.style.height = parentelm.offsetHeight+"px";
		this.img2.style.border = 'none';
		newLayer.appendChild(this.img2);
		
		//this.switchImg();
	}
}


/**
 * Korrigiert Position der Layer nach resize des Browserfensters
 **/
PicFade.resize = function() {
	
		parentelm = document.getElementById(PicFade.mainelmname);
		if(parentelm != null) {
			
			// Ermitteln der Position des parentelm-Elements auf der Seite
			var offTop = parentelm.offsetTop;
			var offLeft = parentelm.offsetLeft;
			var curobj = parentelm;
			
			while(curobj.offsetParent != null) {
				curobj = curobj.offsetParent;
				offTop += curobj.offsetTop;
				offLeft += curobj.offsetLeft;
			}
			
			// Erzeugen des Container-DIVs
			var newLayer = document.getElementById("PicFade_imageLayer1");
			newLayer.style.top = offTop+"px";
			newLayer.style.left = offLeft+"px";

			window.onresize = PicFade.resize;
		}
}


/**
 * Fuegt ein weiteres Bild fuer den Bildwechsel hinzu
 * @param newimg [string]			-	die URL des hinzuzufuegenden Bildes
 **/
PicFade.addImg = function(newimg) {
	this.imgurls.push(newimg);
	
	this.currentindex = randNum(0, (this.imgurls.length - 1));
	this.img1.src = this.imgurls[this.currentindex];
}


/**
 * Diese Funktion fuehrt den tatsaechlichen Bildwechsel durch und wird durch einen Window-Timeout
 * immer wieder aufgerufen
 **/
PicFade.switchImg = function() {
	if(this.currentcycle == 0) {
		this.img1.src = this.imgurls[this.currentindex];
		var nextindex = this.currentindex + 1;
		if(nextindex >= this.imgurls.length)
			nextindex = 0;
		
		this.currentindex = nextindex;
		if(this.currentindex >= this.imgurls.length)
			this.currentindex = 0;
	}
	
	if(this.currentcycle == (this.waitcycles / 2)) {
		this.img2.filter = 'alpha(opacity=0)';
		this.img2.style.opacity = 0.0;
	}
	
	this.currentcycle++;
	
	if(this.currentcycle > this.fadefrom) {
		var perc = 100 / (this.waitcycles - this.fadefrom) * (this.currentcycle - this.fadefrom);
		// Fix fuer IE - wird das Bild vorher getauscht (auch bei vollstaendiger Transparenz)
		// zeigt IE das Bild im Vordergrund an
		if(perc < 5) {
			this.img2.src = this.imgurls[this.currentindex];
		}

		this.img2.style.filter = 'alpha(opacity='+perc+')';
		this.img2.style.opacity = (perc / 100);
	}
	
	if(this.currentcycle > this.waitcycles)
		this.currentcycle = 0;
	
	window.setTimeout("PicFade.switchImg()", 20);

}