/*
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.10
Revision: 1.5

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 bei IE beim Faden vom ersten Element zum letzen, Wenn Bilder nich nicht ganz geladen. Fehler wurde verursacht bei --> ...parseInt(maxHeight / aspectRatio);
1.5		2009-01-10	:   ivPreloader() erstellt

*/





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

var arrImages = new Array(); // Array aller Bilddateien
var anzImagesLoaded = 0; // Anzahl der geladenen Bilder
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].onLoad = ivPreloader(i, arr.length); // Startet ovPreloader, wenn Bild vollständig geladen wurde
		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 Image-Preloader. Wartet bis eine bestimmte Anzahl an Bilder geladen wurde und startet dann den Fade-Vorgang
* @param Int : imgId : Aktuelles Bild, welches geladen wurde
* @param Int : arrLength : Anzahl aller Bilder die vorhanden sind
* @return void
*/
function ivPreloader( imgId, arrLength )
{
	anzImagesLoaded = anzImagesLoaded+1;
	//document.getElementById("ivInfo").value = imgId + ' wurde geladen';
	if(
		arrImages.length >= 1 && // Wenn mindestens ein Bild verfügbar ist
		arrImages.length == arrLength && // Wenn alle Bilder im Array initialisiert wurden
		anzImagesLoaded >= 1 // Wenn auch BildNr 1 geladen wurde, dann starte Fade
	)
	{
		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;
}