// Skript modifiziert by O.Schneider
// Skript benoetigt in HTML-Seite bzw. CSS-Style:
// 1) ein DIV (id="box") Container für Diashow
// 2) ein Image-Tag (class="cache" id="diashow") Platz fuer Start-Bild und Diashow
// 3) ein unsichtbares DIV-Tag (id="cache"): Cache in Seite fuer alle Bilder (bis auf Start-Bild)
// 4) Skript-Tag: mit DiaShow(milisekunden);
// 5) Css-Styles fuer: #box, #cache, #diashow, img.idupe

// Original-Skript von:
// IXF1.11 :: Image cross-fade 
// *****************************************************
// DOM scripting by brothercake -- http://www.brothercake.com/
//******************************************************

// globale objekte

// Der Behaelter der Diashow
var containerID = 'box';

// Das Bild der DiaShow (wird im Interval geaendert)
var imgID = 'diashow';

// Css-Klasse des Puffers fuer das naechste Bild
var imgCss = 'idupe';

// Der Behaelter fuer alle anderen Bilder (ausser Bild1 = lokaler Cache in Html-Seite)
// und gleichzeitig die css-Klasse aller Bilder der DiaShow
var imgsCssDivHiddenID = 'cache';

// Alt-Tag der Bilder der DiaShow
var imgAlt = 'Impressionen';

// Index des aktuellen Bildes der Diashow
var counter = 0;

// Index / Bilder-Anzahl
var quot = 0;

// Position des 1. Bildes
var imgLeft = 0;
var imgTop = 0;

// Speichert den Speicher-Ort der Bilder
var pictures = new Array();

// Zusaetzlicher Bilder-Cache
var ixf = { 'clock': null, 'count': 1 }

// Array fuer Elemente einer CSS-Klasse
var aryClassElements = new Array();




// startet die Diashow
function DiaShow(seconds) {

    // Ueberblendungs-Geschwindigkeit
    if (seconds < 1 || seconds > 20)
        seconds = 8;

    // in Millisekunden
    seconds *= 1000;

    // Ereignis-Handler, falls Fenstergroesse veraendert wird
    window.onresize = SetImageLeftTop;

    // alle Bilder-Speicherorte in Array einlesen 
    // (alle Bilder die die css-Klasse "cache" besitzen)
    // var imgs = document.getElementsByClassName('cache'); // IE-Probleme
    getElementsByClassName(imgsCssDivHiddenID, document.body);

    var imgs = aryClassElements;

    for (var i = 0; i < imgs.length; i++) {
        pictures[i] = imgs[i].src;
    }

    // Bilder anlegen (und so cachen)
    cacheImages();

    //Einmalig Position vorbesetzen
    SetImageLeftTop();

    // Start der DiaShow im festgelegten Rhythmus (Funktions-Aufruf(), Intervall)
    window.setInterval("crossfade(document.getElementById(imgID), pictures[quot], 2, imgAlt)", seconds);
}



// ermittelt rekursiv die Position des 1. Bildes
function SetImageLeftTop() {

    // 1. Bild gibt Position der Diashow vor
    var img0 = document.getElementById(imgID);

    // Eltern-Element
    var parent = img0.offsetParent;

    // Position des 1. Bildes
    imgLeft = img0.offsetLeft;
    imgTop = img0.offsetTop;

    // rekursiv alle weiteren Eltern durchlaufen
//    while (parent != null) {
//        imgLeft += parent.offsetLeft;
//        imgTop += parent.offsetTop;
//        parent = parent.offsetParent;

//        alert(parent);
//    }

    // abrunden
    imgLeft = Math.floor(imgLeft);
    imgTop = Math.floor(imgTop);

    // alert(imgLeft + ' ' + imgTop);
}


// ermittelt alle Elemente einer Css-Klasse
function getElementsByClassName(strClassName, obj) {

    if (obj.className == strClassName) {
        aryClassElements[aryClassElements.length] = obj;
    }
    for (var i = 0; i < obj.childNodes.length; i++)
        getElementsByClassName(strClassName, obj.childNodes[i]);
}




// List the images that need to be cached
function cacheImages() {

    //cache the images
	ixf.imgs = pictures;
	ixf.imgsLen = ixf.imgs.length;
	ixf.cache = [];

	for(var i=0; i<ixf.imgsLen; i++)
	{
		ixf.cache[i] = new Image;
		ixf.cache[i].src = ixf.imgs[i];
	}
}

// crossfade setup function
function crossfade()
{
	counter++;
	quot = (counter%(pictures.length));
	
	//if the timer is not already going
	if(ixf.clock == null)
	{
		//copy the image object 
		ixf.obj = arguments[0];
		
		//copy the image src argument 
		ixf.src = arguments[1];
		
		//store the supported form of opacity
		if(typeof ixf.obj.style.opacity != 'undefined')
		{
			ixf.type = 'w3c';
		}
		else if(typeof ixf.obj.style.MozOpacity != 'undefined')
		{
			ixf.type = 'moz';
		}
		else if(typeof ixf.obj.style.KhtmlOpacity != 'undefined')
		{
			ixf.type = 'khtml';
		}
		else if(typeof ixf.obj.filters == 'object')
		{
			//weed out win/ie5.0 by testing the length of the filters collection (where filters is an object with no data)
			//then weed out mac/ie5 by testing first the existence of the alpha object (to prevent errors in win/ie5.0)
			//then the returned value type, which should be a number, but in mac/ie5 is an empty string
			ixf.type = (ixf.obj.filters.length > 0 && typeof ixf.obj.filters.alpha == 'object' && typeof ixf.obj.filters.alpha.opacity == 'number') ? 'ie' : 'none';
		}
		else
		{
			ixf.type = 'none';
		}
		
		//change the image alt text if defined
		if(typeof arguments[3] != 'undefined' && arguments[3] != '')
		{
			ixf.obj.alt = arguments[3];
		}
		
		//if any kind of opacity is supported
		if(ixf.type != 'none')
		{
			//create a new image object and append it to body
			//detecting support for namespaced element creation, in case we're in the XML DOM
			// ixf.newimg = document.getElementsByTagName('body')[0].appendChild((typeof document.createElementNS != 'undefined') ? document.createElementNS('http://www.w3.org/1999/xhtml', 'img') : document.createElement('img'));

            // neues Bild im Container anlegen
            ixf.newimg = document.getElementById(containerID).appendChild((typeof document.createElementNS != 'undefined') ? document.createElementNS('http://www.w3.org/1999/xhtml', 'img') : document.createElement('img'));

			//set positioning classname
			ixf.newimg.className = imgCss;
			
			//set src to new image src
			ixf.newimg.src = ixf.src

			//move it to superimpose original image
			// ixf.newimg.style.left = ixf.getRealPosition(ixf.obj, 'x') + 'px';
			// ixf.newimg.style.top = ixf.getRealPosition(ixf.obj, 'y') + 'px';
			ixf.newimg.style.left = imgLeft + 'px';
			ixf.newimg.style.top = imgTop + 'px';
			
			//copy and convert fade duration argument 
			ixf.length = parseInt(arguments[2], 10) * 1000;
			
			//create fade resolution argument as 20 steps per transition
			ixf.resolution = parseInt(arguments[2], 10) * 20;
			
			//start the timer
			ixf.clock = setInterval('ixf.crossfade()', ixf.length/ixf.resolution);
		}
		
		//otherwise if opacity is not supported
		else
		{
			//just do the image swap
			ixf.obj.src = ixf.src;
		}
		
	}
};


// crossfade timer function
ixf.crossfade = function () {
    //decrease the counter on a linear scale
    ixf.count -= (1 / ixf.resolution);

    //if the counter has reached the bottom
    if (ixf.count < (1 / ixf.resolution)) {
        //clear the timer
        clearInterval(ixf.clock);
        ixf.clock = null;

        //reset the counter
        ixf.count = 1;

        //set the original image to the src of the new image
        ixf.obj.src = ixf.src;
    }

    //set new opacity value on both elements
    //using whatever method is supported
    switch (ixf.type) {
        case 'ie':
            ixf.obj.filters.alpha.opacity = ixf.count * 100;
            ixf.newimg.filters.alpha.opacity = (1 - ixf.count) * 100;
            break;

        case 'khtml':
            ixf.obj.style.KhtmlOpacity = ixf.count;
            ixf.newimg.style.KhtmlOpacity = (1 - ixf.count);
            break;

        case 'moz':
            //restrict max opacity to prevent a visual popping effect in firefox
            ixf.obj.style.MozOpacity = (ixf.count == 1 ? 0.9999999 : ixf.count);
            ixf.newimg.style.MozOpacity = (1 - ixf.count);
            break;

        default:
            //restrict max opacity to prevent a visual popping effect in firefox
            ixf.obj.style.opacity = (ixf.count == 1 ? 0.9999999 : ixf.count);
            ixf.newimg.style.opacity = (1 - ixf.count);
    }

    //if the counter is at the top, which is just after the timer has finished
    if (ixf.count == 1) {
        //remove the duplicate image
        ixf.newimg.parentNode.removeChild(ixf.newimg);
    }

    //keep new image in position with original image
    //in case text size changes mid transition or something
    // ixf.newimg.style.left = ixf.getRealPosition(ixf.obj, 'x') + 'px';
    // ixf.newimg.style.top = ixf.getRealPosition(ixf.obj, 'y') + 'px';
    ixf.newimg.style.left = imgLeft + 'px';
    ixf.newimg.style.top = imgTop + 'px';

    //now that we've gone through one fade iteration 
    //we can show the image that's fading in
    ixf.newimg.style.visibility = 'visible';
};



// get real position method
ixf.getRealPosition = function () {

    this.tmp = arguments[0].offsetParent;

    if (arguments[1] == 'x') {
        this.pos = arguments[0].offsetLeft;

        while (this.tmp != null) {
            this.pos += this.tmp.offsetLeft;
            this.tmp = this.tmp.offsetParent;
        }
    }
    else {
        this.pos = arguments[0].offsetTop;

        while (this.tmp != null) {
            this.pos += this.tmp.offsetTop;
            this.tmp = this.tmp.offsetParent;
        }
    }

    return this.pos;
};