images = new Array();
            
function addImageToArray(image)
{
  images.push(image);
}            
            
function imageLine()
{
    var checkInterval = null,
        imageLineInterval = null,
        currentImage = -1;
    /*
        Variablen die man in
        verschiedenen Funktionen benötigt
    */       
  
    // Alle Bilder die angezeigt werden sollen
    
    loadingImages = new Array();
    // Dieses Array enthält später alle Objekte
    
    this.run = function()
    {
        checkInterval = window.setInterval('this.checkIfLoaded();', 100);
        // Alle 100 Millisekunden prüfen ob alle Bilder geladen sind
        for(i = 0;i < images.length;i++)
        {
            image = images[i];
            loadingImages.push(new Image);
            loadingImages[i].src = image;
        }
        /*
            Alle Images in dem Array einzeln Durchgehen.
            Das Array für die Objekte mit den Objekten füllen.
            Dem neuen Objekt die Url des momentanen Bildes geben.
        */
    }
    
    this.checkIfLoaded = function()
    {
        allLoaded = true;
        for(i = 0;i < loadingImages.length;i++)
        {
            loadingImage = loadingImages[i];
            if(!loadingImage.complete)
                allLoaded = false;
        }
        /*
            Alle Objekte durchgehen.
            Prüfen ob das aktuelle Objekt / Bild geladen ist.
            Falls nicht dann die Variable zur Prüfung auf false setzen
        */
        if(allLoaded)
        {
            // Wenn alle Objekte / Bilder geladen sind

            // Die Interval für das Prüfen löschen
            window.clearInterval(checkInterval);
            // Das erste Bild anzeigen
            this.startImageLine();
            // Die Funktion für das Bilder wechseln alle 10 Sekunden ausführen
            window.setInterval('this.startImageLine();', 10000);
        }
    }
    
    this.startImageLine = function()
    {
        this.showImage();
        // Bild anzeigen
        if(currentImage == (loadingImages.length - 1))
            currentImage = 0;
        else
            currentImage += 1;
        /*
            Aktuelles Bild um eins hochzählen.
            Sollte das momentane Bild genau so groß sein,
            wie das Array dann wieder beim ersten anfangen.
        */
        
        element = document.getElementById('box3');
        // Element für die Bilderanzeige
        element.style.height = loadingImages[currentImage].height + 'px';
        element.style.width = loadingImages[currentImage].width + 'px';
        // Dem Element die Breite und Höhe des momentanen Bildes geben
        element.style.backgroundImage = 'url(' + loadingImages[currentImage].src + ')';
        // Dem Element das aktuelle Bild als Hintergrundbild setzen
        
        window.setTimeout('this.hideImage();', 9500);
        // Das Bild in 9,5 Sekunden ausblenden
    }
    
    this.hideImage = function()
    {
        element = document.getElementById('box3');
        for(i = 0;i <= 100;i++)
            window.setTimeout('element.style.filter = "Alpha(opacity=' + (100 - i) + ')"; element.style.MozOpacity = ' + (1 - i / 100) + '; element.style.opacity = ' + (1 - i / 100) + ';', i * 5);
        // Von 0 bis 100 (Prozent)
        // Das i * 5 dient dazu, dass das Ausblenden nicht zu schnell geht
    }
    
    this.showImage = function()
    {
        element = document.getElementById('box3');
        for(i = 0;i <= 100;i++)
            window.setTimeout('element.style.filter = "Alpha(opacity=' + i + ')"; element.style.MozOpacity = ' + i / 100 + '; element.style.opacity = ' +  i / 100 + ';', i * 5);
        // Hier das selbe wie bei hideImage
    }
    
    this.run();
}

window.onload = function()
{
    imageLine();
}