﻿ /**********************************
Initialisierung und Start
**********************************/
xAddEventListener (window, "load", winOnLoad, false);
function winOnLoad ()
{
	//log ('', true);
	//um nicht waehrend des fade-ablaufs die smallimages nach anzeige eines panoramas erstellen zu muessen (skripthaenger verhindern)
	setSmallImagesReleaseArray = new Array ();
	smallImage = new Array ();
	bigImage = new Array ();
	newImage = new Array ();
	oldImage = new Array ();
	smallImgWidth = 159;
	bigImgWidth = 478;
	bigImagePosition = "left";
	lastPanorama = false;
	actImageLeft = "";
	actImageRight = "";
	actImagePan = "";
	steps = 5;
	lastPosition = 0;
	//Zeit zwischen den Bildwechseln (s)
	replaceDelay = 4;
	//Abbruchbedingung fuer while-Schleifen
	whileCycles = 20;
	//es muessen ebenso viele kleine wie große Bilder vorhanden sein / mind. 2 kleine (fuer den Fall von zwei kleinen Panoramen)
	// nur dann wird das Skript gestartet
	if(imagesSmall.length > 2 && imagesSmall.length == imagesBig.length) {
		imgArrayBig = newImgBig (imagesBig);
		xImgAsyncWait (imgLoadStatus, preloadNext, appImgError, '', '', imgArrayBig);
	}
	else {
		alert('Es sind weniger als drei normale Thumbnails (kleine Panoramen nicht mitgezaehlt) vorhanden, oder es sind nicht ebenso viele Thumbnails wie große Bilder vorhanden.');
	}
}
function appImgError (n, c, e, a)
{
	var s = '\nFinal Image Status:' +
	'\n total=' + n +
	'\n loaded=' + c +
	'\n errors=' + e +
	'\n aborts=' + a;
	//	log (s);
}
function imgLoadStatus (n, c, e, a)
{
	var s = '\nImage Status:' +
	'\n total=' + n +
	'\n loaded=' + c +
	'\n errors=' + e +
	'\n aborts=' + a;
	//	log (s);
}
function log (s, bOverwrite)
{
	var log = document.getElementById ('debugLog');
	if (log)
	{
		if (bOverwrite) log.value = s;
		else log.value += s + '\n';
	}
}
//Browserabhaengige Fader-Funktionalitaet
function fader (obj, opacity)
{
	if (obj.style.MozOpacity != null)
	{
		obj.style.MozOpacity = (opacity / 100) -.001;
	} else if (obj.style.opacity != null)
	{
		obj.style.opacity = (opacity / 100) -.001;
	} else if (obj.style.filter != null)
	{
		obj.style.filter = "alpha(opacity=" + opacity + ")";
	}
}
//Bild-Array mit grossen Bildern erzeugen
function newImgBig (imagesBig)
{
	imgArrayBig = new Array ();
	for (i = 0; i < imagesBig.length; i ++)
	{
		imgArrayBig [i] = new Image ();
		imgArrayBig [i].src = imagesBig [i];
	}
	return imgArrayBig;
}
//Bild-Array mit kleinen Bildern erzeugen
function newImgSmall (imagesSmall)
{
	imgArraySmall = new Array ();
	for (i = 0; i < imagesSmall.length; i ++)
	{
		imgArraySmall [i] = new Image ();
		imgArraySmall [i].src = imagesSmall [i];
	}
	return imgArraySmall;
}
//Bild-Array der kleinen Bilder vorladen
function preloadNext ()
{
	imgArraySmall = newImgSmall (imagesSmall);
	xImgAsyncWait (imgLoadStatus, appStart, appImgError, '', '', imgArraySmall);
}
//Anwendung starten
function appStart ()
{
	//Array (smallImage) mit kleinen Bildversionen erzeugen (keine kleinen Panoramen)
	temp = 0;
	for (i = 0; i < imgArraySmall.length; i ++)
	{
		if (imgArraySmall [i].width <= smallImgWidth)
		{
			smallImage [temp] = new Object ();
			smallImage [temp]["src"] = imgArraySmall [i].src;
			smallImage [temp]["reference"] = i;
			temp += 1;
		}
	}
	//log ('smallImage.length: ' + smallImage.length)
	//Array (bigImage) mit kleinen Bildversionen der grossen Bilder erzeugen (keine grossen Panoramen)
	temp = 0;
	for (i = 0; i < imgArrayBig.length; i ++)
	{
		if (imgArrayBig [i].width <= bigImgWidth)
		{
			bigImage [temp] = new Object ();
			bigImage [temp]["src"] = imgArrayBig [i].src;
			bigImage [temp]["reference"] = i;
			temp += 1;
		}
	}
	//einfache Anzeige, wenn mind. 3 normale Thumbnails vorhanden sind
	if (smallImage.length == 3 && smallImage.length == imgArraySmall.length) {
		//vor dem Start zufaellig grosse und kleine Bilder festlegen und anzeigen
		randomBigImage ();
		randomSmallImage ('setStartImages');
	}
	//automatischen Bildwechsel starten, denn ein odere mehrere Panoramen sind fuer den Wechsel vorhanden
	else if (smallImage.length == 3 && smallImage.length < imgArraySmall.length) {
		randomBigImage ();
		randomSmallImage ('setStartImages');
		window.setInterval ("imageReplace ()", replaceDelay * 1000);
	}
	//genuegend Alternativen vorhanden, Wechsel starten
	else if (smallImage.length > 3) {
		randomBigImage ();
		randomSmallImage ('setStartImages');
		window.setInterval ("imageReplace ()", replaceDelay * 1000);
	}
	else {
		alert('Es sind weniger als drei normale Thumbnails (kleine Panoramen nicht mitgezaehlt) vorhanden (' + smallImage.length + '). Das Skript wird nicht ausgefuehrt.')
	}
}
/**********************************
Funktionen fuer den Wechsel
**********************************/
function imageReplace ()
{
	var whileCounter = 0;
	var whileBreak = false;
	//derzeit angezeigtes Bild und seine Eigenschaften definieren
	oldImage ["src"] = xGetElementById ("img" + lastPosition).src;
	if (xGetElementById ("img" + lastPosition).width > smallImgWidth)
	{
		oldImage ["panorama"] = true;
	}
	else
	{
		oldImage ["panorama"] = false;
	}
	//zufaellig neues Bild auswaehlen
	newImageNumber = Math.round (Math.random () * (imgArraySmall.length - 1));
	//neues Bild soll nicht mit den derzeit angezeigten uebereinstimmen
	//nur begrenzte Anzahl von Durchlaeufen erlauben, sonst unsicher
	while ( ! checkImage (newImageNumber, false))
	{
		if(whileCounter > whileCycles) {
			//alert('Abbruch imageReplace');
			whileBreak = true;
			break;
		}
		else {
			whileCounter ++;
			newImageNumber = Math.round (Math.random () * (imgArraySmall.length - 1));
		}
	}
	//Wechsel wird nur ausgefuehrt, wenn auch eine Alternative gefunden wurde
	if(!whileBreak) {
		//zufaellige Position fuer Bild ermitteln
		newPosition = Math.round (Math.random () * 2);
		while (lastPosition == newPosition)
		{
			newPosition = Math.round (Math.random () * 2);
		}
		if (newImage ["panorama"])
		{
			lastPosition = 0;
		}
		else
		{
			lastPosition = newPosition;
		}
		fadeout = false;
		//wenn neues Bild und neue Position feststeht > Wechsel starten
		imgFadeOutIn (100);
	}
}
/**********************************
Aus- und Einblenden
**********************************/
function imgFadeOutIn (opacity)
{
	//Ausblenden
	if (opacity >= 0 && ! fadeout)
	{
		if (oldImage ["panorama"])
		{
			fader (xGetElementById ('img0') , opacity);
		}
		else
		{
			if (newImage ["panorama"])
			{
				fader (xGetElementById ('img0') , opacity);
				fader (xGetElementById ('img1') , opacity);
				fader (xGetElementById ('img2') , opacity);
			}
			else
			{
				fader (xGetElementById ("img" + newPosition) , opacity);
			}
		}
		//Wechsel von kleinem Bild zu Panoramabild > gesamte Bildleiste ausblenden
		opacity -= steps;
		window.setTimeout ("imgFadeOutIn(" + opacity + ")", 30);
	}
	//nach Ausblenden Bild tauschen
	else
	{
		if ( ! fadeout)
		{
			//Panoramabild setzen
			if (newImage ["panorama"])
			{
				replacePanoramaImage ();
				fadeout = true;
			}
			//kleines Bild setzen
			else if ( ! newImage ["panorama"])
			{
				replaceSmallImage ();
				fadeout = true;
			}
		}
		//Einblenden, wenn Bild getauscht wurde
		if (opacity <= 100 && fadeout)
		{
			if (newImage ["panorama"])
			{
				fader (xGetElementById ('img0') , opacity);
			}
			//wenn neues Bild kein Panorama
			else
			{
				if (oldImage ["panorama"])
				{
					fader (xGetElementById ('img0') , opacity);
					fader (xGetElementById ('img1') , opacity);
					fader (xGetElementById ('img2') , opacity);
				}
				else
				{
					fader (xGetElementById ("img" + newPosition) , opacity);
				}
			}
			opacity += steps;
			window.setTimeout ("imgFadeOutIn(" + opacity + ")", 30);
		}
		else
		{
			fadeout = false;
		}
	}
}
/**********************************
Zufallsauswahl und Bildersetzung
**********************************/
function checkImage (imgNum, completeCheck)
{
	//ueberpruefung beim start, sicherer zugriff auf die src's anscheinend noch nicht moeglich > deshalb arrays
	//wird nur in Funktion checkDuplicateImage verwendet (zeitaufwaendig bei wenigen Bildern!)
	if (completeCheck)
	{
		if (imgNum == actImagePan || bigImage [imgNum]["reference"] == actImageLeft || bigImage [imgNum]["reference"] == actImageRight || imgArraySmall [imgNum].src == oldImage ["src"] || imgArraySmall [imgNum].src == xGetElementById ("img0").src || imgArraySmall [imgNum].src == xGetElementById ("img1").src || imgArraySmall [imgNum].src == xGetElementById ("img2").src)
		{
			return false;
		}
		else
		{
			return true;
		}
	}
	//ueberpruefung fuer wechsel der einzelbilder
	else
	{
		//bei mehr als 5 normalen Thumbnails
		if (smallImage.length > 5 && (imgArrayBig [imgNum].src == xGetElementById ("left").src || imgArrayBig [imgNum].src == xGetElementById ("right").src || imgArraySmall [imgNum].src == oldImage ["src"] || imgArraySmall [imgNum].src == xGetElementById ("img0").src || imgArraySmall [imgNum].src == xGetElementById ("img1").src || imgArraySmall [imgNum].src == xGetElementById ("img2").src))
		{
			return false;
		}
		//bei weniger als 6 normalen Thumbnails
		else if (smallImage.length <= 5 && (imgArraySmall [imgNum].src == oldImage ["src"] || imgArraySmall [imgNum].src == xGetElementById ("img0").src || imgArraySmall [imgNum].src == xGetElementById ("img1").src || imgArraySmall [imgNum].src == xGetElementById ("img2").src))
		{
			return false;
		}
		//neues Bild und seine Eigenschaften definieren
		else
		{
			newImage ["id"] = imgNum;
			newImage ["src"] = imgArraySmall [imgNum].src;
			//nach Panorama nicht wieder ein Panorama anzeigen
			if (oldImage ["panorama"] && imgArraySmall [imgNum].width > smallImgWidth)
			{
				return false;
			}
			else if (imgArraySmall [imgNum].width > smallImgWidth)
			{
				newImage ["panorama"] = true;
			}
			else
			{
				newImage ["panorama"] = false;
			}
			//log ('imgNum: ' + imgNum + ' == ' + 'actImageLeft: ' + actImageLeft)
			//log ('imgNum: ' + imgNum + ' == ' + 'actImageRight: ' + actImageRight)
			return true;
		}
	}
}
function randomSmallImage (action)
{
	var whileCounter = 0;
	var whileBreak = false;
	switch (action)
	{
		case "setStartImages" :
		newSmallImage1 = Math.round (Math.random () * (smallImage.length - 1));
		newSmallImage2 = Math.round (Math.random () * (smallImage.length - 1));
		newSmallImage3 = Math.round (Math.random () * (smallImage.length - 1));
		//zu Beginn auf jeden Fall keine Duplikate zulassen, deshalb kein Abbruch der while-Schleife
		while ( ! checkDuplicateImage ())
		{
			newSmallImage1 = Math.round (Math.random () * (smallImage.length - 1));
			newSmallImage2 = Math.round (Math.random () * (smallImage.length - 1));
			newSmallImage3 = Math.round (Math.random () * (smallImage.length - 1));
		}
		//smallimages bezuegl. derzeit angezeigter grossbilder merken
		setSmallImagesReleaseArray [0] = smallImage [newSmallImage1];
		setSmallImagesReleaseArray [1] = smallImage [newSmallImage2];
		setSmallImagesReleaseArray [2] = smallImage [newSmallImage3];
		xGetElementById ("img0").src = smallImage [newSmallImage1]["src"];
		xGetElementById ("href0").href = "javascript:replaceBigImage(" + smallImage [newSmallImage1]["reference"] + ")";
		xGetElementById ("img1").src = smallImage [newSmallImage2]["src"];
		xGetElementById ("href1").href = "javascript:replaceBigImage(" + smallImage [newSmallImage2]["reference"] + ")";
		xGetElementById ("img2").src = smallImage [newSmallImage3]["src"];
		xGetElementById ("href2").href = "javascript:replaceBigImage(" + smallImage [newSmallImage3]["reference"] + ")";
		xGetElementById ("img0").style.display = "block";
		xGetElementById ("img1").style.display = "block";
		xGetElementById ("img2").style.display = "block";
		break;
		case "setSmallImages" :
		//nach angezeigtem kleinem panorama die gemerkten smallimages zeigen (kein neuer vergleich > groessere Sicherheit)
		xGetElementById ("img0").src = setSmallImagesReleaseArray [0]["src"];
		xGetElementById ("href0").href = "javascript:replaceBigImage(" + setSmallImagesReleaseArray [0]["reference"] + ")";
		xGetElementById ("img1").src = setSmallImagesReleaseArray [1]["src"];
		xGetElementById ("href1").href = "javascript:replaceBigImage(" + setSmallImagesReleaseArray [1]["reference"] + ")";
		xGetElementById ("img2").src = setSmallImagesReleaseArray [2]["src"];
		xGetElementById ("href2").href = "javascript:replaceBigImage(" + setSmallImagesReleaseArray [2]["reference"] + ")";
		xGetElementById ("img1").style.display = "block";
		xGetElementById ("img2").style.display = "block";
		break;
		case "setSmallImagesRelease" :
		//wird immer aufgerufen, wenn sich die oberen grossbilder aendern > neues array erzeugen
		newSmallImage1 = Math.round (Math.random () * (smallImage.length - 1));
		newSmallImage2 = Math.round (Math.random () * (smallImage.length - 1));
		newSmallImage3 = Math.round (Math.random () * (smallImage.length - 1));
		while ( ! checkDuplicateImage ())
		{
			//die alten Bilder verwenden, wenn nicht waehrend der Durchlaeufe Alternativen gefunden wurden
			if(whileCounter > whileCycles) {
				whileBreak = true;
				//Abbruch der while-Schleife
				//alert('Abbruch setSmallImagesRelease');
				break;
			}
			else {
				whileCounter ++;
				newSmallImage1 = Math.round (Math.random () * (smallImage.length - 1));
				newSmallImage2 = Math.round (Math.random () * (smallImage.length - 1));
				newSmallImage3 = Math.round (Math.random () * (smallImage.length - 1));
			}
		}
		//die neuen Alternativen merken, ansonsten haben die alten weiterhin Gueltigkeit
		if (!whileBreak) {
			setSmallImagesReleaseArray [0] = smallImage [newSmallImage1];
			setSmallImagesReleaseArray [1] = smallImage [newSmallImage2];
			setSmallImagesReleaseArray [2] = smallImage [newSmallImage3];
		}
		break;
	}
}
function checkDuplicateImage ()
{
	if (newSmallImage1 == newSmallImage2 || newSmallImage1 == newSmallImage3 || newSmallImage2 == newSmallImage3)
	{
		return false;
	}
	//mit dieser Abfrage muessen deutlich mehr kleine Bildversionen vorhanden sein
	/*
	if ( ! checkImage (newSmallImage1, true))
	{
		return false;
	}
	if ( ! checkImage (newSmallImage2, true))
	{
		return false;
	}
	if ( ! checkImage (newSmallImage3, true))
	{
		return false;
	}*/
	else
	{
		return true;
	}
}
function randomBigImage ()
{
	newBigImage1 = Math.round (Math.random () * (bigImage.length - 1));
	newBigImage2 = newBigImage1 + 1;
	if (newBigImage2 >= bigImage.length)
	{
		newBigImage2 = 0;
	}
	xGetElementById ("left").src = bigImage [newBigImage1]["src"];
	actImageLeft = bigImage [newBigImage1]["reference"];
	xGetElementById ("right").src = bigImage [newBigImage2]["src"];
	actImageRight = bigImage [newBigImage2]["reference"];
	xGetElementById ("left").style.display = "block";
	xGetElementById ("right").style.display = "block";
}
//Funktionen fuer automatischen Wechsel
function replacePanoramaImage ()
{
	xGetElementById ("img1").style.display = "none";
	xGetElementById ("img2").style.display = "none";
	xGetElementById ("img0").src = newImage ["src"];
	xGetElementById ("href0").href = "javascript:replaceBigImage(" + newImage ["id"] + ")";
}
function replaceSmallImage ()
{
	xGetElementById ("img1").style.display = "block";
	xGetElementById ("img2").style.display = "block";
	//neue Bildzusammenstellung fuer Einblenden der Bildleiste nach Panorama
	if (oldImage ["panorama"])
	{
		randomSmallImage ('setSmallImages');
	}
	else
	{
		xGetElementById ("img" + newPosition).src = newImage ["src"];
		xGetElementById ("href" + newPosition).href = "javascript:replaceBigImage(" + newImage ["id"] + ")";
	}
}
function replaceBigImage (newImageBig)
{
	//wenn grosses Panoramabild angezeigt werden soll
	if (imgArrayBig [newImageBig].width > bigImgWidth)
	{
		bigImagePosition = "left";
		//Panorama anzeigen, rechtes ausblenden
		xGetElementById ("left").src = imgArrayBig [newImageBig].src;
		actImagePan = newImageBig;
		xGetElementById ("right").style.display = "none";
		lastPanorama = true;
	}
	//wenn kleines Bild angezeigt werden soll
	else
	{
		randomSmallImage ('setSmallImagesRelease');
		if (lastPanorama)
		{
			if (actImageRight != newImageBig)
			{
				xGetElementById ("left").src = imgArrayBig [newImageBig].src;
				actImageLeft = newImageBig;
				xGetElementById ("right").src = imgArrayBig [actImageRight].src;
				bigImagePosition = "right";
			}
			else
			{
				xGetElementById ("left").src = imgArrayBig [actImageLeft].src;
				xGetElementById ("right").src = imgArrayBig [actImageRight].src;
			}
			lastPanorama = false;
		}
		else
		{
			if (bigImagePosition == "left")
			{
				//Bild nur wechseln, wenn es noch nicht angezeigt wird
				if (actImageLeft != newImageBig && actImageRight != newImageBig)
				{
					xGetElementById ("left").src = imgArrayBig [newImageBig].src;
					bigImagePosition = "right";
					actImageLeft = newImageBig;
				}
			}
			else
			{
				if (actImageLeft != newImageBig && actImageRight != newImageBig)
				{
					xGetElementById ("right").src = imgArrayBig [newImageBig].src;
					bigImagePosition = "left";
					actImageRight = newImageBig;
				}
			}
		}
		xGetElementById ("right").style.display = "block";
	}
}
