var Slideshow = function () {
    
    // Schalter für automatische Slideshow
    this.automaticSlideshow = false;
    
    // Zeit für Bildanzeige bei automatischer Slideshow
    this.automaticSlideshowDisplayTime = 5000;
    
    // ID des Containers, der die Slideshow enthält
    this.containerId   = "slideshow";
    
    // Abstand der Slideshow vom oberen Fensterrand
    this.distanceTop = 115;
    
    // Minimale Höhe der gesamten Slideshow
    this.minHeight = 375;
    
    // Minimale Breite der gesamten Slideshow
    this.minWidth = 500;
    
    // ID des Elements, welches als Ladebalken verwendet werden soll
    this.progressBarId = "slideshowProgressBar";
    
    // ID des Elements, welches den Thumbnail-Scroller enthält
    this.naviContainerId = "slideshowNavi";
    
    // Abstand der Navigation vom unteren Slideshow-Rand
    this.naviDistanceBottom = 0;
    
    // ID des Schalters, welcher die Thumbnail-Navigation ein- oder ausblendet
    this.naviSwitchId = "slideshowNaviSwitch";
    
    // Höhe des Schalters, welcher die Thumbnail-Navigation ein- oder ausblendet
    this.naviSwitchHeight = 25;
    
    // Beschriftung des Schalters, wenn Navi ausgeblendet ist
    this.naviSwitchOffLabel = "Bildleiste Verstecken";
    
    // Beschriftung des Schalters, wenn Navi ausgeblendet ist
    this.naviSwitchOnLabel = "Bildleiste Anzeigen";
    
    // Zeit, die die Navigation zum Ein-/Ausblenden benötigt
    this.naviDisplayTime = 1000;
    
    // ID des Elements, welches alle Thumbnails enthält
    this.thumbnailContainerId = "slideshowThumbnails";
    
    // ID der Thumbnails (wird mit Nummer der Thumbnails erweitert)
    this.thumbnailId = "slideshowThumbnail_";
    
    // Höhe der Thumbnails
    this.thumbnailHeight = 70;
    
    // Transparenz der Thumbnails beim Überfahren mit der Maus
    this.thumbnailHoverOpacity = 0.6;
    
    // Maximale Pixelverschiebung pro Slidestep beim Scrollen der Thumbnailnavigation
    this.maxSlideStep = 40;
    
    // Slidesteps pro Sekunde beim Scrollen der Thumbnailnavigation
    this.slideStepsPerSecond = 25;
    
    // ID des Elements, welches die Hauptansichtsbilder und Untertitel enthält
    this.viewContainerId = "slideshowView";
    
    // ID des Elements, welches die Hauptansichtsbilder und Untertitel enthält
    this.viewImageContainerId = "slideshowViewImageContainer";
    
    // ID des momentan aktuellen Hauptansichtsbildes
    this.viewImageId = "slideshowViewImage";
    
    // ID des inaktuellen Hauptansichtsbildes
    this.viewImageIdOld = "slideshowViewImageOld";
    
    // ID des momentan aktuellen Bilduntertitels
    this.viewDescriptionId = "slideshowViewDescription";
    
    // ID des inaktuellen Bilduntertitels
    this.viewDescriptionIdOld = "slideshowViewDescriptionOld";
    
    // Text für den Link in der Beschreibung des Hauptansichtsbildes
    this.viewDescriptionDownloadText = "Download";
    
    // Übergangsschritte pro Sekunde beim Wechseln der Hauptansichtsbilder
    this.viewTransitionStepsPerSecond = 25;
    
    // Übergangszeit beim Wechseln der Hauptansichtsbilder
    this.viewTransitionTime = 2000;
    
    // Höhe, die der Bilduntertitel einnimmt
    this.viewDescriptionHeight = 25;
    
    // Der Pfad zum Verzeichnis, welches die Bilder enthält
    this.imageDir = "images/";
    
    // Der Pfad und Dateiname des Cursors links (mehrere mit "," trennen)
    this.cursorLeft = "images/cursorLeft.cur,images/cursorLeft.gif";
    
    // Der Pfad und Dateiname des Cursors rechts (mehrere mit "," trennen)
    this.cursorRight = "images/cursorRight.cur,images/cursorRight.gif";
    
    // Der Fallback-Systemcursor links
    this.fallbackCursorLeft = "w-resize";
    
    // Der Fallback-Systemcursor rechts
    this.fallbackCursorRight = "e-resize";
    
    // Der Cursor der im Internet Explorer 6 statt dynamischer Cursor angezeigt wird
    this.ie6Cursor = "move";
    
    // Fehlermeldung, wenn der Browser die Slideshow nicht anzeigen kann
    this.errorMessageInvalidBrowser = "Veraltete oder fehlerhafte Javascript-Version. Um diese Slideshow anzuzeigen, brauchen Sie einen aktuelleren Browser.";
    
    // Das Array mit den Bildinformationen
    this.images = [
        // [ 'Dateiname' , 'Bildunterschrift' , 'Breite' , 'Höhe' ],
        // ...
    ];
    
    ////////////////////////////////////////////////////////////////////////////
    // Ende öffentliche Attribute
    ////////////////////////////////////////////////////////////////////////////
    
    var self = this;    
    var dhtml = new DHTMLLibrary();
    
    // Abmessungen
    var allThumbnailsWidth = 0;
    var viewportWidth = 0;
    var viewportHeight = 0;
    var containerWidth = 0;
    var containerHeight = 0;
    var viewContainerWidth = 0;
    var viewContainerHeight = 0;
    var currentViewImageContainerWidth = 0;
    var currentViewImageContainerHeight = 0;
    var currentImageWidth = 0;
    var currentImageHeight = 0;
    var currentImageLeftSpace = 0;
    var currentImageTopSpace = 0;
    
    // Links oder rechts in der Slideshow 
    var currentSide = '';
    
    // Sliding-Parameter
    var thumbnailContainer = null;
    var slidingActivated = false;
    var slideStep = 0;
    var slideDirection = "";
    var currentSlidingValue = 0;
    var automaticSlidingActivated = false;
    var requiredSlidingValue = 0;
    
    // Bilder-Parameter
    var currentImageNumber = null;
    var currentlyLoading = false;
    
    /**
     * Starte die Slideshow
     */
    this.start = function () {
        if (!checkPreconditions()) {
            return false;
        }
        
        // Zeige Ladebalken
        displayProgressBar();
        // Bereite Container vor
        prepareContainer();
        
        if (this.automaticSlideshow) {
        
            // Passe alle Grössenverhältnisse an
            resize();
            
        
        } else {
        
            // Erzeuge ThumbnailNavigation
            createNavi();
            // Erzeuge Aktuelles Bild
            createView();
            // Passe alle Grössenverhältnisse an
            resize();
            // Start den Slidevorgang
            setInterval(function(){slide();}, Math.ceil(1000/self.slideStepsPerSecond));

            // Navigation einblenden
            displayNavigation();
            
        }
        
        // Erstes Bild laden
        loadImage();
        // Verstecke Ladebalken        
        hideProgressBar();
        
        if (this.automaticSlideshow) {
            autoloadImage();
        }
        
    };
    
    /**
     * Überprüfe, ob alle Vorbedingungen erfüllt sind
     */
    var checkPreconditions = function () {
        if (!dhtml.getElement("id", self.containerId)) {
            return false;
        }    
        if (!dhtml.DOMSupported() && !dhtml.DHTMLSupported()) {
            dhtml.setContent("id", self.containerId, null, self.errorMessageInvalidBrowser);
            return false;
        }
        return true;
    };
    
    /**
     * Ermittle, auf welcher Hälfte der Slideshow sich der Mauszeiger befindet
     */
    var detectViewportSide = function (e) {
        if (!e) {
            e = window.event;
        }
        var xKoord = dhtml.DOMSupported() ? e.clientX : e.pageX;
        if (xKoord <= containerWidth/2) {
            if (currentSide != 'left') {
                currentSide = "left";
                //alert("currentSide: "+currentSide);
            }
        } else {
            if (currentSide != 'right') {
                currentSide = "right";
                //alert("currentSide: "+currentSide);
            }
        }
    };
    
    /**
     * Schalte Element sichtbar
     */
    var appear = function (element) {
        element.style.visibility = "visible";
    };
    
    /**
     * Schalte Element unsichtbar
     */
    var disappear = function (element) {
        element.style.visibility = "hidden";
    };

    /**
     * Lasse Element durch Verringern der Transparenz erscheinen
     */
    var fadeIn = function (element, steps, stepTime) {
        //alert(element+" "+steps+" "+stepTime);
        var opacity;
        var time;
        var stepValue = 1.0/steps;
        var f = [];
        //alert("fade in: "+element+" "+steps+" "+stepTime);
        for (var i=0, n=1; n<=steps; n++, i++) {
            opacity = stepValue*n;
            time = stepTime*i;
            f[i] = function (o, t) {
                return function () {
                    setTimeout(function(){setOpacity(element, o);}, t);
                };
            } (opacity, time);
        }
        
        for (i=0; i<f.length;i++) {
            f[i]();
        }
    };

    /**
     * Lasse Element durch Erhöhen der Transparenz verschwinden
     */
    var fadeOut = function (element, steps, stepTime) {
        //alert(element+" "+steps+" "+stepTime);
        var opacity;
        var time;
        var stepValue = 1.0/steps;
        var f = [];
        for (var i=0, n=steps-1; n>=0; n--, i++) {
            opacity = stepValue*n;
            time = stepTime*i;
            f[i] = function (o, t) {
                return function () {
                    setTimeout(function(){setOpacity(element, o);}, t);
                };
            } (opacity, time);
        }
        for (i=0; i<f.length;i++) {
            f[i]();
        }
    };
    
    /**
     * Vergrössere Höhe des Elements
     */
    var grow = function (element, steps, stepTime, stepHeight, offset) {
        //alert("grow");
        //alert("Element: "+element+"\nSteps: "+steps+"\nStepTime: "+stepTime+"\nstepHeight: "+stepHeight+"\nOffset: "+offset);
        if (!offset) {
            offset = 0;
        }
        var height;
        var time;
        var f = [];
        for (var i=0, n=1; n<=steps; n++, i++) {
            height = Math.ceil(stepHeight*n+offset)+"px";
            time = stepTime*i;
            f[i] = function (h, t) {
                return function () {
                    setTimeout(function(){element.style.height = h;}, t);
                };
            } (height, time);
        }
        for (i=0; i<f.length; i++) {
            f[i]();
        }
    };
    
    /**
     * Verkleinere Höhe des Elements
     */
    var shrink = function (element, steps, stepTime, stepHeight, offset) {
        //alert("shrink");
        if (!offset) {
            offset = 0;
        }        
        var height;
        var time;
        var f = [];
        for (var i=0, n=steps-1; n>=0; n--, i++) {
            height = Math.ceil(stepHeight*n+offset)+"px";
            time = stepTime*i;
            f[i] = function (h, t) {
                return function () {
                    setTimeout(function(){element.style.height = h;}, t);
                };
            } (height, time);
        }
        for (i=0; i<f.length; i++) {
            f[i]();
        }
    };
    
    /**
     * Zeige den Ladebalken an, wenn er existiert
     */
    var displayProgressBar = function () {
        var progressBar = dhtml.getElement("id", self.progressBarId);
        if(progressBar) {
            appear(progressBar);
        }
    };
    
    /**
     * Verstecke den Ladebalken, wenn er existiert
     */
    var hideProgressBar = function () {
        var progressBar = dhtml.getElement("id", self.progressBarId);
        if(progressBar) {
            disappear(progressBar);
        }
    };
    
    /**
     * Zeige die Thumbnail-Navigation an, wenn Sie existiert und aktualisiere
     * die Beschriftung des Navigationsbuttons wenn er existiert
     */
    var displayNavigation = function() {
        var naviContainer = dhtml.getElement("id", self.naviContainerId);
        if (naviContainer) {
            var naviSwitch = dhtml.getElement("id", self.naviSwitchId);
            if (naviSwitch) {
                naviSwitch.setAttribute("value", "");
                naviSwitch.onclick = null;
            } 
        
            var steps = Math.ceil((self.slideStepsPerSecond*self.naviDisplayTime)/1000);
            var stepTime = Math.ceil(1000/self.slideStepsPerSecond);
            var stepHeight = self.thumbnailHeight/steps;
            var offset = self.naviSwitchHeight;
            grow(naviContainer, steps, stepTime, stepHeight, offset);
            
            if (naviSwitch) {
                var f = function() {
                    naviSwitch.setAttribute("value", self.naviSwitchOffLabel);
                    naviSwitch.onclick = hideNavigation;
                };
                setTimeout(f, self.naviDisplayTime);
            }
        }
    };
    
    /**
     * Blende die Thumbnail-Navigation aus, wenn Sie existiert und aktualisiere
     * die Beschriftung des Navigationsbuttons wenn er existiert
     */
    var hideNavigation = function() {
        var naviContainer = dhtml.getElement("id", self.naviContainerId);
        if (naviContainer) {
            var naviSwitch = dhtml.getElement("id", self.naviSwitchId);
            if (naviSwitch) {
                naviSwitch.setAttribute("value", "");
            }
            
            var steps = Math.ceil((self.slideStepsPerSecond*self.naviDisplayTime)/1000);
            var stepTime = Math.ceil(1000/self.slideStepsPerSecond);
            var stepHeight = self.thumbnailHeight/steps;
            var offset = self.naviSwitchHeight;
            shrink(naviContainer, steps, stepTime, stepHeight, offset);
            
            if (naviSwitch) {
                var f = function() {
                    naviSwitch.setAttribute("value", self.naviSwitchOnLabel);
                    naviSwitch.onclick = displayNavigation;
                };
                setTimeout(f, self.naviDisplayTime);
            }
        }
    };
            
    /**
     * Setze Transparenz
     */
    var setOpacity = function (element, opacity) {
        
        if (dhtml.isIE()) {
            opacity = parseInt(opacity*100, 10);
            element.style.filter = "Alpha(opacity="+opacity+")";
        } else {
            element.style.opacity = opacity;
            element.style.MozOpacity = opacity;
        }
    };
    
    /**
     * Führe alle beim Betreten eines Thumbnails notwendigen Schritte durch
     */
    var enterThumbnail = function (e) {
        setOpacity(this, self.thumbnailHoverOpacity);
    };
    
    /**
     * Führe alle beim Verlassen eines Thumbnails notwendigen Schritte durch
     */
    var exitThumbnail = function (e) {
        if (currentImageNumber != this.imageNumber) {
            setOpacity(this, 1.0);
        }
    };
    
    /**
     * Lade automatisch immer das nächste Bild in die Hauptansicht
     * Wenn momentan ein Bild geladen wird, versuche es später nochmal
     */
    var autoloadImage = function () {
       if (currentlyLoading) {
           setTimeout(function(){autoloadImage();}, self.viewTransitionTime);
           return;
       } else {
           loadImage(currentImageNumber+1);
           setTimeout(function(){autoloadImage();}, self.automaticSlideshowDisplayTime);
       }
    };
    
    /**
     * Lade das zum Thumbnail gehörende Bild in die Hauptansicht
     */
    var loadThumbnail = function (e) {
        loadImage(this.imageNumber);
    };
    
    /**
     * Lade das durch die übergebene Nummer festgelegte Bild in die Hauptansicht
     */
    var loadImage = function (number) {
        // Überprüfe, ob bereits geladen wird
        // Wenn ja, später erneut versuchen, sonst Sperre setzen und laden
        if(currentlyLoading) {
            setTimeout(function(){loadImage(number);}, self.viewTransitionTime);
            return;
        } else {
            currentlyLoading = true;
            displayProgressBar();
        }
        if (isNaN(number)) {
            number = 0;
        }       
        if (number >= self.images.length) {
            number = 0;
        }       
        if (number < 0) {
            number = self.images.length - 1;
        }
       
        if (currentImageNumber !== null) {
            if (currentImageNumber == number) {
                currentlyLoading = false;
                return true;
            }
            unloadImage();
        }
        currentImageNumber = number;
        
        var thumbnail = dhtml.getElement("id", self.thumbnailId+number);
        if (thumbnail) {
            setOpacity(thumbnail, self.thumbnailHoverOpacity);
        }
        var steps = Math.ceil((self.viewTransitionStepsPerSecond/1000)*self.viewTransitionTime);
        var stepTime = Math.ceil(self.viewTransitionTime/steps);
        
        createViewImage();        
        resizeViewImage();
        var viewImage = dhtml.getElement("id", self.viewImageId);
        fadeIn(viewImage, steps, stepTime);
        
        if (!self.automaticSlideshow) {
            createViewDescription();
            resizeViewDescription();
            var viewDescription = dhtml.getElement("id", self.viewDescriptionId);
            fadeIn(viewDescription, Math.ceil(steps/2), stepTime);
            
            centerThumbnail(currentImageNumber);
        }
        
        // Hebe Ladesperre wieder auf
        setTimeout(function(){hideProgressBar();currentlyLoading = false;}, self.viewTransitionTime);
    };
    
    /**
     * Zentriere das Thumbnailbild des momentan angezeigten Bildes
     */
    var centerThumbnail = function (imageNumber) {
        var thumbnail = dhtml.getElement("id", self.thumbnailId+imageNumber);
        if (!thumbnail) {
            return;
        }
        var offset = thumbnail.offsetLeft+(thumbnail.offsetWidth/2);
        requiredSlidingValue = Math.ceil((containerWidth/2)-offset);
        automaticSlidingActivated = true;
    };
   
    /**
     * Falls ein Bild in der Hauptansicht angezeigt wird, benenne den Container
     * um, Blende es aus und lösche es dann
     */
    var unloadImage = function () {
        // wenn bereits altes Bild existiert, löschen
        var image = dhtml.getElement("id", self.viewImageIdOld);
        if (image) {
            image.parentNode.removeChild(image);
        }
        // umbenennen
        image = dhtml.getElement("id", self.viewImageId);
        if (image) {
            image.setAttribute("id", self.viewImageIdOld);
        }
        
        var thumbnail = dhtml.getElement("id", self.thumbnailId+currentImageNumber);
        if (thumbnail) {
            setOpacity(thumbnail, 1.0);
        }
        
        // ausblenden
        var steps = Math.ceil((self.viewTransitionStepsPerSecond/1000)*self.viewTransitionTime);
        var stepTime = Math.ceil(self.viewTransitionTime/steps);
        fadeOut(image, steps, stepTime);
        
        if (!self.automaticSlideshow) {
            // umkopieren
            var description = dhtml.getElement("id", self.viewDescriptionIdOld);
            if (description) {
                description.parentNode.removeChild(description);
            }
            description = dhtml.getElement("id", self.viewDescriptionId);
            if (description) {
                description.setAttribute("id", self.viewDescriptionIdOld);
            }
            // ausblenden
            fadeOut(description, Math.ceil(steps/2), stepTime);
        }
    };
    
    /**
     * Erzeuge das Hauptansichtsbild
     * Wenn der Container viewImageContainer nicht existiert, dann erzeuge es
     * direkt im Slideshow-Container (z.B. bei automatischer Slideshow)
     */
    var createViewImage = function () {
        var container = dhtml.getElement("id", self.viewImageContainerId);
        if (!container) {
            container = dhtml.getElement("id", self.containerId);
            if(!container) {
                return false;
            }
        }
        // Erzeuge das Bild
        var viewImage = document.createElement("img");
        viewImage.setAttribute("id", self.viewImageId);
        viewImage.setAttribute("src", self.imageDir+self.images[currentImageNumber][0]);
        viewImage.setAttribute("alt", self.images[currentImageNumber][1]);
        viewImage.setAttribute("title", self.images[currentImageNumber][1]);
        setOpacity(viewImage, 0.0); 
        container.appendChild(viewImage);
    };
    
    /**
     * Erzeuge Bilduntertitel und Download-Link
     * Wenn der Container viewContainer nicht existiert, erzeuge nichts (z.B. bei
     * automatischer Slideshow)
     */
    var createViewDescription = function () {
        var viewContainer = dhtml.getElement("id", self.viewContainerId);
        if (!viewContainer) {
            return;
        }
    
        var viewDescription = document.createElement("table");
        viewDescription.setAttribute("id", self.viewDescriptionId);
        viewDescription.style.height = self.viewDescriptionHeight+"px";
        setOpacity(viewDescription, 0.0); 
        viewContainer.appendChild(viewDescription);

        var tr = viewDescription.insertRow(0);
        
        var td1 = tr.insertCell(0);
        td1.setAttribute("align", "left");
        td1.setAttribute("valign", "top");
        //td1.appendChild(document.createTextNode(s_self.images[imgId][1]));
        td1.innerHTML = self.images[currentImageNumber][1];
        
        var td2 = tr.insertCell(1);
        td2.setAttribute("align", "right");
        td2.setAttribute("valign", "top");
        var imageLink = document.createElement("a");
        imageLink.setAttribute("href", self.imageDir+self.images[currentImageNumber][0]);
        imageLink.setAttribute("target", "_blank");
        imageLink.appendChild(document.createTextNode(self.viewDescriptionDownloadText));
        td2.appendChild(imageLink);
    };
    
    /**
     * Setzt den Cursor abhängig davon auf welcher Container-Seite sich die Maus
     * befindet. Wird im IE6 nicht ausgeführt wegen Fehler im IE6 SP3.
     */
    var setCursor = function(element) {
        
        if (dhtml.isIE6()) {
            return;
        }
        var value;
        var cursorFiles;
        if (currentSide == 'left') {
            value = self.fallbackCursorLeft;
            cursorFiles = self.cursorLeft;
        } else if (currentSide == 'right') {
            value = self.fallbackCursorRight;
            cursorFiles = self.cursorRight;
        } else {
            return;
        }
        
        if (cursorFiles.length > 0) {
            var cursorFilesArray = cursorFiles.split(",");
            for(var i=0; i<cursorFilesArray.length; i++) {
                if (cursorFilesArray[i].length > 0) {
                    value = "url("+cursorFilesArray[i]+"), "+value;
                }
            }
        }
        element.style.cursor = value;
    };
    
    /**
     * Stellt die Cursor-Defaulteinstellungen wieder her
     * Wird im IE6 nicht ausgeführt. Begründung: siehe setCursor();
     */
    var resetCursor = function(element) {
        if (dhtml.isIE6()) {
            return;
        }
        element.style.cursor = null;
    };
    
    /**
     * Liefert für alle Browser die Breite des Viewports
     *
     * Funktioniert nur, nachdem der Body schon geladen wurden
     */
    var getViewportWidth = function() {
        var innerWidth;    
        if (dhtml.isIE) {
            if (document.compatMode && document.compatMode == 'CSS1Compat') {
                innerWidth = document.documentElement.clientWidth;
            } else {
                innerWidth = document.body.clientWidth;
            }
        } else {
            innerWidth = window.innerWidth;
        }       
        viewportWidth = parseInt(innerWidth, 10);
    };

    /**
     * Liefert für alle Browser die Höhe des Viewports
     *
     * Funktioniert nur, nachdem der Body schon geladen wurden
     */
    var getViewportHeight = function() {
        var innerHeight;        
        if (dhtml.isIE) {
            if (document.compatMode && document.compatMode == 'CSS1Compat') {
                innerHeight = document.documentElement.clientHeight;
            } else {
                innerHeight = document.body.clientHeight;
            }
        } else {
            innerHeight = window.innerHeight;
        }       
        viewportHeight = parseInt(innerHeight, 10);
    };

    /**
     * Bereite den Slideshow-Container vor
     */
    var prepareContainer = function () {
        //alert("prepareContainer");
        
        // Hole den Root-Container
        var container = dhtml.getElement("id", self.containerId);
        
        container.style.position = "absolute";
        container.style.top = self.distanceTop+"px";
        container.onmousemove = detectViewportSide;
    };
    
    var createNavi = function () {
        //alert("createNavi");
        
        // Hole den Root-Container
        var container = dhtml.getElement("id", self.containerId);
        
        // Erzeuge Container, der die ganze Thumbnail-Navigation enthält
        var naviContainer = dhtml.getElement("id", self.naviContainerId);
        if (naviContainer) {
            naviContainer.parentNode.removeChild(naviContainer);
        }        
        naviContainer = document.createElement("div");
        naviContainer.setAttribute("id", self.naviContainerId);
        naviContainer.style.bottom = self.naviDistanceBottom + "px";
        naviContainer.style.height = self.naviSwitchHeight+"px";
        container.appendChild(naviContainer);
        
        // Erzeuge Element zum Ein-/Ausblenden der Thumbnail-Navigation
        var naviSwitch = dhtml.getElement("id", self.naviSwitchId);
        if (naviSwitch) {
            naviSwitch.parentNode.removeChild(naviSwitch);
        }        
        naviSwitch = document.createElement("input");
        naviSwitch.setAttribute("id", self.naviSwitchId);
        naviSwitch.setAttribute("type", "button");
        naviSwitch.setAttribute("value", self.naviSwitchOnLabel);
        naviSwitch.onclick = displayNavigation;
        naviSwitch.onfocus = naviSwitch.blur;
        naviContainer.appendChild(naviSwitch);
        
        // Erzeuge Container, der alle Thumbnails enthält
        thumbnailContainer = dhtml.getElement("id", self.thumbnailContainerId);
        if (thumbnailContainer) {
            thumbnailContainer.parentNode.removeChild(thumbnailContainer);
        }        
        thumbnailContainer = document.createElement("div");
        thumbnailContainer.setAttribute("id", self.thumbnailContainerId);
        thumbnailContainer.style.height = self.thumbnailHeight+"px";
        //Breite kann noch nicht ermittelt werden (Imageerzeugung abwarten)
        thumbnailContainer.style.top = self.naviSwitchHeight+"px";
        thumbnailContainer.onmouseover = activateSliding;
        thumbnailContainer.onmouseout = deactivateSliding;
        thumbnailContainer.onmousemove = adjustSliding;
        naviContainer.appendChild(thumbnailContainer);
        
        // Erzeuge alle Thumbnails
        var image, width;
        allThumbnailsWidth = 0;
        for(var i=0; i<self.images.length; i++) {
            // Breite des Thumbnails berechnen und zu Gesamtbreite addieren
            width = Math.ceil((self.images[i][2]*self.thumbnailHeight)/self.images[i][3]);
            allThumbnailsWidth += width;
            image = document.createElement("img");
            image.setAttribute("id", self.thumbnailId+i);
            image.setAttribute("class", self.thumbnailId);
            image.setAttribute("src", self.imageDir+self.images[i][0]);
            image.setAttribute("width", width+"px");
            image.style.width = width+"px";
            image.setAttribute("height", self.thumbnailHeight+"px");
            image.style.height = self.thumbnailHeight+"px";
            image.onmouseover = enterThumbnail;
            image.onmouseout = exitThumbnail;
            image.imageNumber = i;
            image.onmousedown = loadThumbnail;
            thumbnailContainer.appendChild(image);    
        }

        // Jetzt ist bekannt, wie breit alle Thumbnails zusammen sind        
        thumbnailContainer.style.width = allThumbnailsWidth+"px";

        return true;
    };
    
    var createView = function () {
        //alert("createView");
        
        // Hole den Root-Container
        var container = dhtml.getElement("id", self.containerId);
        
        // Erzeuge Container, der die ganze Bildansicht enthält
        var viewContainer = dhtml.getElement("id", self.viewContainerId);
        if (viewContainer) {
            viewContainer.parentNode.removeChild(viewContainer);
        }
        viewContainer = document.createElement("div");
        viewContainer.setAttribute("id", self.viewContainerId);
        container.appendChild(viewContainer);
        
        viewImageContainer = document.createElement("div");
        viewImageContainer.setAttribute("id", self.viewImageContainerId);
        if(dhtml.isIE6()) {
            viewImageContainer.style.cursor = self.ie6Cursor;
        }
        viewImageContainer.onmouseover = enterImageArea;
        viewImageContainer.onmousemove = moveInImageArea;
        viewImageContainer.onmousedown = changeImage;
        viewImageContainer.onmouseout = exitImageArea;
        viewContainer.appendChild(viewImageContainer);
        // Erzeuge den Container, der die Blätter-Logik enthält
        
        return true;
    };
    
    var enterImageArea = function () {
        setCursor(this);
    };
    
    var exitImageArea = function () {
        resetCursor(this);
    };
    
    var moveInImageArea = function () {
        setCursor(this);
    };
    
    var changeImage = function () {
        if (currentSide == 'left') {
            loadImage(currentImageNumber-1);
        } else if (currentSide == 'right') {
            loadImage(currentImageNumber+1);
        } else {
            return;
        }
    };
    
    var resize = function () {
        //alert("resize");
        
        window.onresize = resize;
        
        getViewportHeight();
        getViewportWidth();
        
        resizeContainer();
        
        return true;
    };
    
    var resizeContainer = function() {
        //alert("resizeContainer");
    
        var container = dhtml.getElement("id", self.containerId);
    
        // Höhe einstellen
        if (viewportHeight >= self.distanceTop + self.minHeight) {
            containerHeight = viewportHeight - self.distanceTop;
        } else {
            containerHeight = self.minHeight;
        }    
        container.style.height = containerHeight+"px";
    
        // Breite einstellen
        if (viewportWidth >= self.minWidth) {
            containerWidth = viewportWidth;
        } else {
            containerWidth = self.minWidth;
        }       
        container.style.width = containerWidth+"px";
        
        if (self.automaticSlideshow) {
            viewContainerHeight = containerHeight;
            viewContainerWidth = containerWidth;
            resizeViewImage();
        } else {
           resizeViewContainer();
        }
        return true;
    };
    
    var resizeViewContainer = function() {
        //alert("resizeViewContainer");
        
        var viewContainer = dhtml.getElement("id", self.viewContainerId);
        
        viewContainerHeight = containerHeight - (self.thumbnailHeight+self.naviSwitchHeight+self.naviDistanceBottom);
        viewContainerWidth = containerWidth;
        
        viewContainer.style.height = viewContainerHeight+"px";
        
        resizeViewImage();
        resizeViewDescription();
        
        return true;
    };
    
    var resizeViewImage = function () {
        //alert("resizeViewImage");
        
        var viewImage;
        if (!(viewImage = dhtml.getElement("id", self.viewImageId))) {
            return true;
        }
        
        // Wenn genug Platz, dann Höhe des Bildes, sonst zur Verfügung stehenden Platz
        var height = (viewContainerHeight - self.viewDescriptionHeight < self.images[currentImageNumber][3]) ? viewContainerHeight - self.viewDescriptionHeight : self.images[currentImageNumber][3];
                             
        // Berechne aus der ermittelten Höhe die neue Breite des Bildes                         
        var width = Math.ceil((self.images[currentImageNumber][2]*height)/self.images[currentImageNumber][3]);
    
        // Wenn berechnete Breite zu gross, dan zur Verfügung stehender Platz und Höhe neu berechnen
        if (width > viewContainerWidth) {
            width = viewContainerWidth;
            height = Math.ceil((self.images[currentImageNumber][3]*width)/self.images[currentImageNumber][2]);
        }
        
        currentImageWidth = width;
        currentImageHeight = height;
        currentImageDistanceTop = Math.ceil((viewContainerHeight-(currentImageHeight+self.viewDescriptionHeight))/2);
        currentImageDistanceLeft = Math.ceil((viewContainerWidth-currentImageWidth)/2);
        
        viewImage = dhtml.getElement("id", self.viewImageId);
        viewImage.style.width = currentImageWidth+"px";
        viewImage.style.height = currentImageHeight+"px";
        viewImage.style.top = currentImageDistanceTop+"px";
        viewImage.style.left = currentImageDistanceLeft+"px";
        
        resizeViewImageContainer();

        return true;
    };

    var resizeViewImageContainer = function () {
        //alert("resizeViewImageContainer");
        
        if (self.automaticSlideshow) {
            return true;
        }
        
        var viewImageContainer = dhtml.getElement("id", self.viewImageContainerId);
        
        currentViewImageContainerHeight = currentImageHeight + currentImageDistanceTop;
        currentViewImageContainerWidth = viewContainerWidth;
        
        viewImageContainer.style.height = currentViewImageContainerHeight+"px";
        
        return true;
    };
    
    var resizeViewDescription = function () {
        //alert("resizeViewDescription");
        
        var viewDescription;
        if (!(viewDescription = dhtml.getElement("id", self.viewDescriptionId))) {
            return true;
        }
        
        viewDescription.style.top = currentViewImageContainerHeight+"px";
        viewDescription.style.left = currentImageDistanceLeft+"px";
        viewDescription.style.width = currentImageWidth+"px";
        
        return true;
    };
    
    var slide = function () {
        var auto = false;
        if (automaticSlidingActivated) {
            if (requiredSlidingValue == currentSlidingValue) {
                //alert("Automatisch sliden abschalten");
                automaticSlidingActivated = false;
                requiredSlidingValue = 0;
            } else {
                auto = true;
	            var autoSlideDirection;	            
	            // Berechne die noch nötige Verschiebung
	            var adjustment = requiredSlidingValue-currentSlidingValue;
	            // Berechne die Richtung
	            if (adjustment >= 0) {
	                autoSlideDirection = "left";
	            } else {
	                autoSlideDirection = "right";
	                adjustment = -adjustment;
	            }
	            // Berechne die jetzige Verschiebung
	            var autoSlideStep = (adjustment > self.maxSlideStep) ? self.maxSlideStep : adjustment;
                 
	        }
        } 
        if ((slidingActivated && slideStep !== 0) || auto) {
        
            var left = parseInt(thumbnailContainer.style.left, 10);
            var newLeft = left;
            var step = (auto) ? autoSlideStep : slideStep;
            var direction = (auto) ? autoSlideDirection : slideDirection;
            
            if (direction == "left") {
            
                if (left + step < 0) {
                    newLeft = left + step;
                    currentSlidingValue = newLeft;
                } else {
                    newLeft = 0;
                    if (auto) {
                        requiredSlidingValue = 0;
                    } else {
                        slideStep = 0;
                    }
                    currentSlidingValue = 0;
                }
                    
            } else if (direction == 'right') {
            
                if (left - step > containerWidth - allThumbnailsWidth) {
                    newLeft = left - step;
                    currentSlidingValue = newLeft;
                } else {
                    newLeft = containerWidth - allThumbnailsWidth;
                    if (auto) {
                        requiredSlidingValue = newLeft;
                    } else {
                        slideStep = 0;
                    }
                    currentSlidingValue = newLeft;
                }
            }
            if (newLeft != left) {
                thumbnailContainer.style.left = newLeft+"px";
            }
            //alert("slidestep: "+slideStep+"\nslideDirection: "+currentSide+"\nwidth: "+viewportWidth+"\nheight: "+viewportHeight+"\n\nleft: "+left+"\nnewLeft: "+newLeft);
        }
    };
    
    /**
     * Schaltet den Sliding-Vorgang an
     */
    var activateSliding = function () {
        slidingActivated = true;
    };
    
    /**
     * Schaltet den Sliding-Vorgang aus
     */
    var deactivateSliding = function () {
        slidingActivated = false;
    };
    
    var setSlideStep = function (xKoord) {
        var teiler = (containerWidth/2)/Math.sqrt(self.maxSlideStep);
        var distance = (currentSide == "left") ? (containerWidth/2) - xKoord : xKoord - (containerWidth/2);
        slideStep = Math.ceil(Math.pow(distance/teiler, 2));
    };
    
    var adjustSliding = function (e) {
        if (!e) {
            e = window.event;
        }
        slideDirection = currentSide;
        var xKoord = dhtml.DOMSupported() ? e.clientX : e.pageX;
        setSlideStep(xKoord);
    };
};

////////////////////////////////////////////////////////////////////////////////
// DHTML-Klasse
//
// Erleichtert den browserübergreifenden Zugriff auf Elemente
// Klassenversion der unter http://de.selfhtml.org erhältlichen DHTML-Bibliothek
// Dokumentation: http://de.selfhtml.org/dhtml/beispiele/dhtml_bibliothek.htm
////////////////////////////////////////////////////////////////////////////////
var DHTMLLibrary = function () {
    var self = this;
    
    var DOM = false;
    var DHTML = false;
    var IE = false;
    var IE4 = false;
    var IE6 = false;
    var NS4 = false;
    var OP = false;
    
    if (document.getElementById) {
        DHTML = true;
        DOM = true;
    } else {
        if (document.all) {
            DHTML = true;
            IE4 = true;
        } else {
            if (document.layers) {
                DHTML = true;
                NS4 = true;
            }
        }
    }
    
    if (window.opera) {
        OP = true;
    }
    
    this.DOMSupported = function() {
        return DOM;
    };
    
    this.DHTMLSupported = function() {
        return DHTML;
    };
    
    this.isIE4Compatible = function() {
        return IE4;
    };
    
    this.isNS4Compatible = function() {
        return NS4;
    };
    
    this.isOPCompatible = function() {
        return OP;
    };
    
    this.getElement = function(Mode, Identifier, ElementNumber) {
        var Element, ElementList;
        if (DOM) {
            if (Mode.toLowerCase() == "id") {
                Element = document.getElementById(Identifier);
                if (!Element) {
                    Element = false;
                }
                return Element;
            }
            if (Mode.toLowerCase() == "name") {
                ElementList = document.getElementsByName(Identifier);
                Element = ElementList[ElementNumber];
                if (!Element) {
                    Element = false;
                }
                return Element;
            }
            if (Mode.toLowerCase() == "tagname") {
                ElementList = document.getElementsByTagName(Identifier);
                Element = ElementList[ElementNumber];
                if (!Element) {
                    Element = false;
                }
                return Element;
            }
            return false;
        }
        if (IE4) {
            if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
                Element = document.all(Identifier);
                if (!Element) {
                    Element = false;
                }
                return Element;
            }
            if (Mode.toLowerCase() == "tagname") {
                ElementList = document.all.tags(Identifier);
                Element = ElementList[ElementNumber];
                if (!Element) {
                    Element = false;
                }
                return Element;
            }
            return false;
        }
        if (NS4) {
            if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
                Element = document[Identifier];
                if (!Element) {
                    Element = document.anchors[Identifier];
                }
                if (!Element) {
                    Element = false;
                }
                return Element;
            }
            if (Mode.toLowerCase() == "layerindex") {
                Element = document.layers[Identifier];
                if (!Element) {
                    Element = false;
                }
                return Element;
            }
            return false;
        }
        return false;
    };

    this.getAttribute = function (Mode, Identifier, ElementNumber, AttributeName) {
        var Attribute;
        var Element = this.getElement(Mode, Identifier, ElementNumber);
        if (!Element) {
            return false;
        }
        if (DOM || IE4) {
            Attribute = Element.getAttribute(AttributeName);
            return Attribute;
        }
        if (NS4) {
            Attribute = Element[AttributeName];
            if (!Attribute) {
                Attribute = false;
            }
            return Attribute;
        }
        return false;
    };

    this.getContent = function (Mode, Identifier, ElementNumber) {
        var Content;
        var Element = this.getElement(Mode, Identifier, ElementNumber);
        if (!Element) {
            return false;
        }
        if (DOM && Element.firstChild) {
            if (Element.firstChild.nodeType == 3) {
                Content = Element.firstChild.nodeValue;
            } else {
                Content = "";
            }
            return Content;
        }
        if (IE4) {
            Content = Element.innerText;
            return Content;
        }
        return false;
    };

    this.setContent = function (Mode, Identifier, ElementNumber, Text) {
        var Element = this.getElement(Mode, Identifier, ElementNumber);
        if (!Element) {
            return false;
        }
        if (DOM) {
            if (!Element.firstChild && Element.appendChild) {
                Element.appendChild(document.createTextNode(Text));
                return true;
            } else {
                Element.firstChild.nodeValue = Text;
                return true;
            }
        }
        if (IE4) {
            Element.innerText = Text;
            return true;
        }
        if (NS4) {
            Element.document.open();
            Element.document.write(Text);
            Element.document.close();
            return true;
        }
    };
    
    this.isIE = function () {
        if (window.execScript && window.ActiveXObject && document.all) {
            return true;
        }
        return false;
    };
    
    this.isIE6 = function () {
        if (this.isIE && document.compatMode && !window.XMLHttpRequest) {
            return true;
        }
        return false;
    };
};
////////////////////////////////////////////////////////////////////////////////
// Ende DHTML-Klasse
////////////////////////////////////////////////////////////////////////////////

var slideshow = new Slideshow();