/*
jsImageViewer.js
Zur Ausgabe einer in JavaScript gesteuerten Bildergalerie

Abhängigkeiten:
* class.jsImageViewer.php5

Autor    : Joachim Ruf
Erstellt : 2008.12.30
Letze Änderung: 2009.01.05
Revision: 1.4

Doku:
1.1     2008-12-07  :   Start der Doku
1.2     2008-01-01  :   Ein-/Ausblendevorgang in unterschiedlichem Tempo, um besseren Effekt zu erzielen
                        Anhalten und Neustart des Timers bei Klick auf Button
                        Kritische Bereiche mit Semaphore gesichert
1.3		2009-01-05	:	Unnötigen/Lästigen Fade-Vorgang bei nur 1 Bild unterbunden
1.4		2009-01-05	:   In ivSetForward() und ivSetBackward() clearTimeout(timeout) Problem behoben, wenn Timer ausgeschaltet
                        Doctype Vervollständigung
                        Exceptions in ivBlend() eingefügt, da Probleme mit IE beim Faden vom ersten Element zum letzen
*/





var ivDirectory = "http://www.loresoft.de/grfx/images/"; // Pfad der Bilddateien -> wird beim Start angepasst

var arrImages = new Array(); // Array aller Bilddateien
var fadeInterval = 3000; //Anzahl der Aufrufe in millisekunden
var curImg = -1; // Aktuell angezeigtes Bild (-1, da vor Bildwechsel hochgezählt wird und erstes Bild 0 sein muss)
var maxWidth = 0; // Breite des Außenrahmens
var maxHeight = 0; // Höhe des Außenrahmens
var ivImg;    // Aktuelle Bilddatei, welche mit new erzeugt wird
var timeout; // Index für setTimeout() um dieses durch clearTimeout() unterbrechen zu können
var blendTimeout;
var ivSemaphore = false; // Semaphore zur Sicherung des Kritischen Bereichs -> Klick während Blendvorgangs





/**
* @desc Startet die Wiedergabe der Bildergalerie
* @param int width : Breite der Bildergalerie
* @param int height : Höhe der Bildergalerie
* @param string dir : Verzeichnis, in welchem die anzuzeigenden Bilddateien liegen
* @param int slideDelay : Delay-Zeit für Bildwechsel in Sekunden
* @param array arr : Array mit den Namen+Dateiendung aller anzuzeigenden in "dir" liegenden Bilddateien
* @return void
*/
function showImageViewer( width, height, dir, slideDelay, arr )
{
    maxWidth = width;
    maxHeight = height;
    ivDirectory = dir;
    fadeInterval = slideDelay * 1000;

//alert(navigator.userAgent);
    // Alle Bilder laden und im Image-Array speichern
    for(i=0; i<arr.length; i++)
    {
        arrImages[i] = new Image();
        arrImages[i].src = dir + arr[i]; // Ohne Vorverkleinerung
    }


    // Nur ausführen, wenn Benutzer auf Hauptseite ist
    if( arrImages.length >= 1 )
    {
        ivSetNext(); // Erstes Bild ohne Zeitverzögerung starten
	}
}





/**
* @desc Ändert die Zeitspanne für den automatischen Bildwechsel
* @param Int : time : Zeitspanne in Sekunden
* @return void
*/
function setSlideShowStartTime( time )
{
    fadeInterval = time * 1000; //Anzahl der Aufrufe in millisekunden
    
    window.clearTimeout(timeout);
    if( fadeInterval >= 1000 )
        timeout = window.setTimeout("ivSetNext()", fadeInterval);    
}
	




/**
* @desc Führt den Fade nach links durch
* @return void
*/
function ivSetForward()
{
    if( ivSemaphore != true )
    {
        // Timer deaktivieren
    	if( fadeInterval > 0 && arrImages.length != 1 )
            window.clearTimeout(timeout);

        // Wenn Ende der Galerie erreicht, springe wieder an anfang
        curImg += 1;
        if( curImg > arrImages.length-1 )
            curImg = 0;


        // Bildwechsel + alle Berechnungen durchführen
        ivSetImage( curImg ); 

        // Timer wieder aktivieren
    	if( fadeInterval > 0 && arrImages.length != 1 )
            timeout = window.setTimeout("ivSetNext()", fadeInterval);
    }
}

	



/**
* @desc Führt den Fade nach rechts durch
* @return void
*/
function ivSetBackward()
{
    if( ivSemaphore != true )
    {
        // Timer deaktivieren
    	if( fadeInterval > 0 && arrImages.length != 1 )
           window.clearTimeout(timeout);

        // Wenn Ende der Galerie erreicht, springe wieder an anfang
        curImg -= 1;
        if( curImg < 0 )
            curImg = arrImages.length-1;


        // Bildwechsel + alle Berechnungen durchführen
        ivSetImage( curImg );

        // Timer wieder aktivieren
    	if( fadeInterval > 0 && arrImages.length != 1 )
            timeout = window.setTimeout("ivSetNext()", fadeInterval);
    }
}
	



/**
* @desc Führt einen automatischen Fade (vorwärts) durch
* @return void
*/
function ivSetNext()
{
    // Wenn Ende der Galerie erreicht, springe wieder an anfang
    curImg += 1;
    if( curImg > arrImages.length-1 )
        curImg = 0;

    // Bildwechsel + alle Berechnungen durchführen
    ivSetImage( curImg );
	
	// Funktion erneut aufrufen, wenn mehr als EIN Bild verfügbar
	if( fadeInterval > 0 && arrImages.length != 1 )
        timeout = window.setTimeout("ivSetNext()", fadeInterval);
}






/**
* @desc Setzt ein neues Bild.
* @param int imgId : Id des Bildes, welches angezeigt werden soll
* @return void
*/
function ivSetImage( imgId )
{
    try
    {
        // Neues Bild in ivImg-Tag setzen

	    // Für Firefox
        ivBlend(imgId, 0, 1.00);
        
        // Für IE, Opera und Safari
        //ivChangeImage(imgId);
    }
    catch(exception)
    {
	    alert("Bild " + arrImages[imgId].src + " konnte nicht geladen werden -> Fehler: " + exception);
    }
}
	




/**
* @desc Führt den Blendvorgang beim Bilderwechsel durch.
* @param Int imgId : Id des neuen einzublendenden Bildes
* @param Int status : Status des Blend-Vorgangs 0=initialisierung; 1=ausblenden 2=Bild ändern 3=einblenden
* @param Double opacity : Aktuelle Durchsichtigkeit
* @return void
*/
function ivBlend( imgId, status, opacity )
{
    switch(status)
    {
        case 0: // Initialisierung
            ivSemaphore = true; // Start des kritischen Bereichs
            opacity = 100;
            ivBlend(imgId, 1, opacity);
            document.getElementById("ivLoading").style.visibility = "visible";
            break;

        case 1: //Bild ausblenden
            if(opacity >= 10) // Bild durch Intervall ausblenden
            {
                opacity = opacity - 20;
                document.getElementById("ivImage").style.MozOpacity = opacity/100;
                document.getElementById("ivImage").style.filter = "alpha(opacity=" + parseInt(opacity) + ")";
                blendTimeout = window.setTimeout("ivBlend("+imgId+", 1, "+opacity+")", 50);
                //alert(opacity);
            }
            else // Bildwechseln
            {
                // Statusanzeige refreshen
                document.getElementById("ivInfo").value = imgId + 1 + " von " +arrImages.length ;

                window.clearTimeout(blendTimeout);
                ivBlend(imgId, 2, opacity);
            }
            break;

        case 2: // Bild wechseln
            // Top/Left resetten
            document.getElementById("ivImage").style.top = 0;
            document.getElementById("ivImage").style.left = 0;

             // === Beginn des kritischen Bereichs ===
            document.getElementById("ivImage").style.visibility = 'hidden';
                // Verhältnis berechnen und Bildgröße ändern + zentrieren
                if( arrImages[imgId].height >= arrImages[imgId].width ) // Bild ist höher als breit
	            {
	                try
                    {
    	                aspectRatio = arrImages[imgId].height / arrImages[imgId].width;
	                    document.getElementById("ivImage").style.height = maxHeight;	    
	                    document.getElementById("ivImage").style.width = parseInt(maxHeight / aspectRatio);
	                    document.getElementById("ivImage").style.left = (maxWidth - (maxHeight / aspectRatio)) / 2; // Vertikal zentrieren
	                }
	                catch(exception)
	                {
                        // Do nothing
	                }
	            }
                else // Bild ist breiter als hoch
   	            {
	                try
                    {
    	                aspectRatio = arrImages[imgId].width / arrImages[imgId].height;
	                    document.getElementById("ivImage").style.height = maxWidth / aspectRatio;
	                    document.getElementById("ivImage").style.width = maxWidth;
	                    document.getElementById("ivImage").style.top = (maxHeight - (maxWidth / aspectRatio)) / 2; // Horizintal Zentrieren
	                }
	                catch(exception)
	                {
                        // Do nothing
	                }

	            }
	            
                // Bild tauschen
                document.getElementById("ivImage").src = arrImages[imgId].src;
                //alert(arrImages[imgId].src);

             // === Ende des kritischen Bereichs ===
            document.getElementById("ivImage").style.visibility = 'visible';

            ivBlend(imgId, 3, opacity);
            break;

        case 3: // Bild einblenden
            if(opacity <= 90) // Bild durch Intervall ausblenden
            {
                opacity = opacity+10;
                document.getElementById("ivImage").style.MozOpacity = opacity/100;
                document.getElementById("ivImage").style.filter = "alpha(opacity=" + parseInt(opacity) + ")";
                blendTimeout = window.setTimeout("ivBlend("+imgId+", 3, "+opacity+")", 50);
            }
            else
            {
                ivSemaphore = false; // Ende des kritischen Bereichs
                document.getElementById("ivLoading").style.visibility = "hidden";
                window.clearTimeout(blendTimeout);
            }
            break;        
    }    
}

	



/**
* @desc Blendet ein Bild aus.
* @param int imgId : Id des Bildes, welches angezeigt werden soll
* @return void
*/
function ivChangeImage( imgId )
{
    // Neues Bild in ivImg-Tag setzen
    document.getElementById("ivImage").src = arrImages[imgId].src;
}