/** -----=== websimplex ===-----
	 * JS Panorama - dreht und zoomt ein Panoramafoto
	 * @author: Wido Widlewski <wido@websimplex.de>
	 * Dateien: jspan.js, jspan.css, jspan.html
	 * Copyright 2007 websimplex
	 * 
	 * Bei Verwendungwunsch wenden sie sich bitte an websimplex (www.websimplex.de).
	 *
	 */
	
	
	// globale Variablen definieren
	
	// startzeit initialisieren
	var startzeit = 0;
	
	//breite des browserfensters
	var fensterbreite = 0;
	
	var hoehe_buehne = 300;
	
	// rand_links initialisieren
	var rand_links = 0;
	var rand_links_ori = 0;
	
	// rand_links initialisieren
	var rand_oben = 0;
	var rand_oben_ori = 0;
		
	// offset, der zu dem linken rand dazugerechnet wird	
	var offset_rand_links = 0;	
	
	// offset, der zu dem oberen rand dazugerechnet(abgezogen) wird	
	var offset_rand_oben = 0;	
		
	//der titel des panoramas
	var panorama_titel = '';
	
	//die beschreibung des panoramas
	var panorama_beschreibung = '';
		
	// das panoramafoto	
	var panorama_foto = '';	
	
	// handelt es sich um ein 360 Grad panorama oder um weniger
	var panorama_360 = '';
		
	// breite des panoramafotos	
	var fotoweite = 0;
	var fotoweite_ori = 0;
	//var fotoweite = 4500;
	//var fotoweite_ori = 4500;
		
	// breite des panoramafotos	
	var fotohoehe = 0;
	var fotohoehe_ori = 0;	
	//var fotohoehe = 467;
	//var fotohoehe_ori = 467;	
	
	// faktor fuer das vergroessern/verkleinern
	var zoomfaktor = 1.2;
	
	// max. anzahl der zoomstufen
	var zoomstufen = 10;
	
	// automatisches Abspielen des Schwenks
	var panorama_autoplay = 0;
	
	// das logo, welches ueber dem panorama liegt
	var panorama_logo = '';
	var panorama_logo_breite = 0;
	var panorama_logo_hoehe = 0;
		
	// drehrichtung	
	var richtung = '';
		
	// drehgeschwindigkeit initialisieren	
	var speed = 0;	
	
	// viele fotos
	var fotos = new Array;
	
	
	// designangaben aus xml Datei laden
	var design = new Array;
	
	// zu nutzendes design (falls mehr als 1 definiert wurden)
	var design_auswahl = 0;
	
	// einstellung, ob die auflistung der panoramen gezeigt werden soll
	var zeige_auflistung = 0;
	
	
	var breite_linker_rand = 100;
	var breite_rechter_rand = 100;
	
	
	var mweb3 = '';
	
	// XMLHttpRequest
	var XMLHTTP = null;
		
	//XMLHttpRequest Objekt instanzieren, je nach Browser	
	if (window.XMLHttpRequest) {
		XMLHTTP = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) { 
		try {
			XMLHTTP = new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (ex) 
		{
			try {
				XMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (ex) 
			{
				
			}
		}
	}
	
	
	
	// die Fensterbreite herausfinden (nur fuer IE 6.0 wichtig)
	function getWindowWidth()
	{
    	if (window.innerWidth) {
        
			return window.innerWidth;
			
    	} else {
		
        	if (window.document.documentElement && window.document.documentElement.clientWidth) 
        	{
            	return window.document.documentElement.clientWidth;
        	}
        
			return window.document.body.offsetWidth;
    	}
	}
	
	
	
	// XML Daten auslesen
	function daten_auslesen () {
	
		//debug-info
		//document.getElementById("rechter_rand").innerHTML += "<br> rS: " + XMLHTTP.readyState;
	
		if (XMLHTTP.readyState == 4)
		{
			var xml = XMLHTTP.responseXML;
			
			//var d = document.getElementById("daten");
			//var s = document.getElementById("status");
			
			//d.innerHTML += XMLHTTP.responseText;
			//d.innerHTML += xml.documentElement.getAttribute("anzahl");
			
			//s.innerHTML += "Status: " + XMLHTTP.status + " (" + XMLHTTP.statusText + ")";
			
			// alle Panorama-Tags 
			var ergebnisse = xml.getElementsByTagName("Panorama");
			
			//d.innerHTML += " Ergebnisse: " + ergebnisse.length;
			//document.getElementById("rechter_rand").innerHTML += " Ergebnisse: " + ergebnisse.length;
			
			for (var i = 0; i < ergebnisse.length; i++)
			{
				fotos[i] = new Object();
				
				for (var j = 0; j < ergebnisse[i].childNodes.length; j++)
				{
					var knoten = ergebnisse[i].childNodes[j];
					
					//d.innerHTML += "<br>TagName: " + knoten.nodeName;
					
					if (knoten.nodeType != 3)
					{
						//alert (knoten.nodeName + ": " + knoten.firstChild.nodeValue);
						fotos[i][knoten.nodeName] = knoten.firstChild.nodeValue;
						
					} 
					
				} // for j
								
			} // for i
			
			
			// die Designangaben aus der xml-Datei lesen und in das globale Array design schreiben
			var design_ergebnis = xml.getElementsByTagName("Design");
			
			//document.getElementById("rechter_rand").innerHTML += " Design: " + design_ergebnis.length;
			
			for (var i = 0; i < design_ergebnis.length; i++)
			{
				design[i] = new Object();
				
				for (var j = 0; j < design_ergebnis[i].childNodes.length; j++)
				{
					var knoten = design_ergebnis[i].childNodes[j];
					
					if (knoten.nodeType != 3)
					{
						//alert (knoten.nodeName + ": " + knoten.firstChild.nodeValue);
						design[i][knoten.nodeName] = knoten.firstChild.nodeValue;
					}
				}	
			}
			
			
			// die Designangaben aus der xml-Datei lesen und in das globale Array design schreiben
			var einstellungen = xml.getElementsByTagName("Einstellungen");
			
			//document.getElementById("rechter_rand").innerHTML += " Einst.: " + einstellungen.length;
			
			for (var i = 0; i < einstellungen.length; i++)
			{
				for (var j = 0; j < einstellungen[i].childNodes.length; j++)
				{
					var knoten = einstellungen[i].childNodes[j];
					
					if ((knoten.nodeType != 3) && (knoten.nodeName == "DesignAuswahl"))
					{
						design_auswahl = knoten.firstChild.nodeValue;
					}
					
					if ((knoten.nodeType != 3) && (knoten.nodeName == "ZeigeAuflistung"))
					{
						zeige_auflistung = knoten.firstChild.nodeValue;
					}
				}	
			}
			
			
			
			// das erste Foto aus dem foto-Array benutzen und die globalen Vars initialisieren
			foto_initialisieren(0);
		
			// wenn die global var panorama_foto gesetzt wurde
			if (panorama_foto != '')
			{
				// das panoramafoto laden
				load_image();				
			}
			
			// die anderen panorama-fotos auflisten
			if (zeige_auflistung == 1)
			{
				document.getElementById("auflistung").innerHTML = alle_panoramen();
			}
			
			// die designeinstellungen aus der xml-datei setzen
			set_design();
			
		} // readystate ==4
		
	} //daten_auslesen
	
	
	
	// funktion zum Initialisieren der globalen Variablen mit den Daten aus dem foto-Array
	function foto_initialisieren (panorama) {
	
		panorama_titel = fotos[panorama]["Titel"];

		panorama_foto = fotos[panorama]["Foto"];			
		
		panorama_360 = fotos[panorama]["Panorama360"];
							
		fotoweite = fotos[panorama]["Breite"];
		fotoweite_ori = fotos[panorama]["Breite"];
		
		fotohoehe = fotos[panorama]["Hoehe"];
		fotohoehe_ori = fotos[panorama]["Hoehe"];
								
		panorama_beschreibung = fotos[panorama]["Beschreibung"];
							
		panorama_logo = fotos[panorama]["Logo"];
		panorama_logo_breite = fotos[panorama]["LogoBreite"];
		panorama_logo_hoehe = fotos[panorama]["LogoHoehe"];
		
		offset_rand_links = fotos[panorama]["PanoramaOffset"];
		offset_rand_oben = fotos[panorama]["PanoramaOffsetOben"];
		
		panorama_autoplay = parseInt(fotos[panorama]["autoplay"]);
		
		// den div fuer das foto 3x breiter als das foto aufziehen
		var fotodivbreite = fotoweite * 3;
		document.getElementById("foto").style.width = fotodivbreite + "px";
			
		// die hoehe des divs fuer das foto setzten
		document.getElementById("foto").style.height = fotohoehe + "px";
		
		//debug-info
		//document.getElementById("rechter_rand").innerHTML += "<br><br>foto: " + panorama_foto;
		
		//browserfensterbreite initialisieren
		fensterbreite = getWindowWidth();
	
		breite_linker_rand = parseInt(design[design_auswahl]["LinkerRand"]);
		breite_rechter_rand = parseInt(design[design_auswahl]["RechterRand"]);
		
	
		//alert(panorama_foto + " " + fensterbreite);
		
	} //foto_initialisieren
	
	
	
	// Funktion laedt das Foto (3x) in den Div foto
	function load_image () {
		
		a00 = new Image ();
		//a00.src = "nopper_klein.jpg";
		//a00.src = "kleiner_hafen_klein.jpg";
		
		// globale var panorama_foto, wird durch xml-daten initialisiert
		a00.src = panorama_foto;
	
		document.getElementById("foto").innerHTML = '';
		//document.getElementById("foto").style.width = "10px";
	
		//var fototag = '<img src="' + a00.src + '" border="0" width="' + fotoweite + '" height="' + fotohoehe + '" alt="Panoramafoto" />';
		//var trippeltag = fototag + fototag + fototag;
		
		if (panorama_360 == 'ja')
		{
			// einzelne tags, um eine id vergeben zu koennen und die images spaeter direkt ansprechen zu koennen, wegen des zooms
			var fototag1 = '<img src="' + a00.src + '" border="0" width="' + fotoweite + '" height="' + fotohoehe + '" id="foto1" alt="" />';
			var fototag2 = '<img src="' + a00.src + '" border="0" width="' + fotoweite + '" height="' + fotohoehe + '" id="foto2" alt="" />';
			var fototag3 = '<img src="' + a00.src + '" border="0" width="' + fotoweite + '" height="' + fotohoehe + '" id="foto3" alt="" />';
			
			var fototag_komplett = fototag1 + fototag2 + fototag3;
			
			document.getElementById("foto").style.width = (fotoweite * 3) + "px";
			
			// linker Rand
			ausgangsrand = (fotoweite * -1);
		}
		
		if (panorama_360 == 'nein')
		{
			var fototag1 = '<img src="' + a00.src + '" border="0" width="' + fotoweite + '" height="' + fotohoehe + '" id="foto1" alt="" />';
			
			var fototag_komplett = fototag1;
			
			document.getElementById("foto").style.width = fotoweite + "px";
			
			// linker Rand
			ausgangsrand = 0;
		}
			
		// die drei img-tags in den foto-div laden
		document.getElementById("foto").innerHTML = fototag_komplett;	
		
		
		// zu dem linken rand einen evtl. offset dazuaddieren
		if (offset_rand_links > 0) ausgangsrand += parseInt(offset_rand_links);
		
		document.getElementById("foto").style.marginLeft = ausgangsrand + "px";
		
		
		// oberer Rand
		//var toprand = parseInt(-1 * ( (fotohoehe - hoehe_buehne) / 2)) - 50;
		//var toprand = 0;
		//document.getElementById("foto").style.marginTop = toprand + "px";
		
		if (offset_rand_oben != 0)
		{
			document.getElementById("foto").style.marginTop = parseInt(-1 * offset_rand_oben) + "px";
		}
		else
		{
			document.getElementById("foto").style.marginTop = "0px";
		}
		
		//debug-info
		//document.getElementById("rechter_rand").innerHTML += "name: " + panorama_titel + "<br>links: " + document.getElementById("foto").style.marginLeft  + "<br>oben: " + document.getElementById("foto").style.marginTop;
		
		
		// den titel des panoramas anzeigen	
		if (panorama_titel != '')
		{
			document.getElementById("panorama_titel").innerHTML = "<h1>" + panorama_titel +"</h1>";	
		}
	
		if (panorama_logo != '')
		{
			logo00 = new Image ();
			//logo00.src = "sms_logo_transparent.gif";
		
			// logo aus der xml datei
			logo00.src = panorama_logo;
		
			// PNG-IE HACK von http://homepage.ntlworld.com/bobosola/
			var browser_version = navigator.appVersion.split("MSIE")
			var version = parseFloat(browser_version[1])
			
			if ((version >= 5.5) && (document.body.filters))
			{
				var logotag = '<span style="width: ' + panorama_logo_breite + 'px; height: ' + panorama_logo_hoehe + 'px; display:inline-block; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + logo00.src + '\', sizingMethod=\'scale\');"></span>';
				
				// den unteren und oberen Balken zum Bewegen des Fotos fuer den IE mit festen Pixelbreiten angeben
				
				//var randbreite = breite_rand_links + breite_rand_rechts;
				var randbreite = breite_linker_rand + breite_rechter_rand;
				
				var balken_breite_oben = parseInt(fensterbreite - parseInt(300 + randbreite));
				var balken_breite_unten = parseInt(balken_breite_oben - 100);
				
				document.getElementById("obere_flaeche_1").style.width = balken_breite_oben + "px";
				document.getElementById("untere_flaeche_1").style.width = balken_breite_oben + "px";
				
				document.getElementById("obere_flaeche_2").style.width = balken_breite_unten + "px";
				document.getElementById("untere_flaeche_2").style.width = balken_breite_unten + "px";
				
			}
			else
			{
				var logotag = '<img src="' + logo00.src  + '" border="0" width="' + panorama_logo_breite + '" height="' + panorama_logo_hoehe + '" alt="Logo" />';
			}
		
		 	// das Logo hinzufuegen
			document.getElementById("logo").innerHTML = logotag;
			
			var logo_top = (parseInt(panorama_logo_hoehe)/2) + 10;
			if (logo_top < 60) logo_top = 60;
			
			var logo_right = parseInt((parseInt(panorama_logo_breite)/2) + 10);
			if (logo_right < parseInt(breite_rechter_rand + 10))
			{
				logo_right = parseInt(breite_rechter_rand + 10);
			} 
			
			document.getElementById("logo").style.top = logo_top + "px";
			document.getElementById("logo").style.right = logo_right + "px";
		}
		
		// die Beschreibung fuer das Panorama hinzufuegen
		if (panorama_beschreibung != '')
		{
			document.getElementById("beschreibung").innerHTML = "<p>" + panorama_beschreibung + "</p>";
		}
		
		
		// raender initialisieren
		rand_links = document.getElementById("foto").style.marginLeft;
		rand_links_ori = rand_links;
		
		rand_oben = document.getElementById("foto").style.marginTop;
		rand_oben_ori = rand_oben;
		
		//document.getElementById("rechter_rand").innerHTML += "links: " + rand_links + "<br>oben: " + rand_oben;
		
		// wenn autoplay fuer das panorama aktiviert wurde, das foto rechts herum drehen ...
		if (panorama_autoplay != 0)
		{
			drehen(15, 'rechts');
		}
		
		
	} // load_foto
		
		
		
	// auflistung aller	panorama-fotos, die aus der config.xml gelesen wurden
	function alle_panoramen () {
	
		var inhalt = '';
		
		inhalt += '<ul class="auswahl">';
		
		for (var i = 0; i < fotos.length; i++)
		{
			inhalt += '<li class="auswahl"><a href="javascript:neues_foto('+ i + ');" onmouseover="set_design_hover(this);" onmouseout="set_design_normal(this);">' + fotos[i]['Titel'] + '</a></li>';
		}
		
		inhalt += '</ul>';
		
		return inhalt;
	}
		
	
	// hilfsfunktion, zum wechseln des panoramafotos
	function neues_foto(panorama) {
		
		anhalten(); 
		foto_initialisieren(panorama); 
		load_image(); 
		//zoomen(20, 'standard'); 
		
		// wenn autoplay fuer das panorama aktiviert wurde, das foto rechts herum drehen ...
		if (panorama_autoplay != 0)
		{
			drehen(15, 'rechts')
		}
		
	} // neues_panorama
	
	// Funktion zum Setzen der Designdefinitionen
	function set_design () {
	
		//document.getElementById("linker_rand").style.width = breite_linker_rand + "px";
		//document.getElementById("rechter_rand").style.width = breite_rechter_rand + "px";
		
	
		// hintergrundfarben setzten
		document.getElementById("bodytag").style.background = design[design_auswahl]["Hintergrund"];
		document.getElementById("oberer_rand").style.background = design[design_auswahl]["Hintergrund"];
		document.getElementById("linker_rand").style.background = design[design_auswahl]["Hintergrund"];
		document.getElementById("rechter_rand").style.background = design[design_auswahl]["Hintergrund"];
		document.getElementById("unterer_rand").style.background = design[design_auswahl]["Hintergrund"];
	
		// runde ecken ueber dem panoramafoto
		// PNG-IE HACK von http://homepage.ntlworld.com/bobosola/
		
		var browser_version = navigator.appVersion.split("MSIE")
		var version = parseFloat(browser_version[1])
		
		// fuer IE 
		if ((version >= 5.5) && (document.body.filters))
		{
			// runde ecken ueber dem panoramafoto
			document.getElementById("ecke_ol").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + design[design_auswahl]["Ecke_ol"] + ", sizingMethod=scale)";
			document.getElementById("ecke_or").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + design[design_auswahl]["Ecke_or"] + ", sizingMethod=scale)";
			document.getElementById("ecke_ur").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + design[design_auswahl]["Ecke_ur"] + ", sizingMethod=scale)";
			document.getElementById("ecke_ul").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + design[design_auswahl]["Ecke_ul"] + ", sizingMethod=scale)";
			
			// knoepfe
			document.getElementById("zoom_in").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + design[design_auswahl]["ZoomInKnopf"] + ", sizingMethod=scale)";
			document.getElementById("zoom_out").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + design[design_auswahl]["ZoomOutKnopf"] + ", sizingMethod=scale)";
			document.getElementById("reset").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + design[design_auswahl]["ResetKnopf"] + ", sizingMethod=scale)";
			document.getElementById("play").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + design[design_auswahl]["PlayKnopf"] + ", sizingMethod=scale)";
			
		}
		else
		{
			// runde ecken ueber dem panoramafoto
			document.getElementById("ecke_ol").style.background = "url(" + design[design_auswahl]["Ecke_ol"] + ") no-repeat top left";
			document.getElementById("ecke_or").style.background = "url(" + design[design_auswahl]["Ecke_or"] + ") no-repeat top left";
			document.getElementById("ecke_ur").style.background = "url(" + design[design_auswahl]["Ecke_ur"] + ") no-repeat top left";
			document.getElementById("ecke_ul").style.background = "url(" + design[design_auswahl]["Ecke_ul"] + ") no-repeat top left";
			
			// knoepfe
			document.getElementById("zoom_in").style.background = "url(" + design[design_auswahl]["ZoomInKnopf"] + ") no-repeat top left";
			document.getElementById("zoom_out").style.background = "url(" + design[design_auswahl]["ZoomOutKnopf"] + ") no-repeat top left";
			document.getElementById("reset").style.background = "url(" + design[design_auswahl]["ResetKnopf"] + ") no-repeat top left";
			document.getElementById("play").style.background = "url(" + design[design_auswahl]["PlayKnopf"] + ") no-repeat top left";
		}
		
		// Textfarbe
		
		document.getElementById("panorama_titel").firstChild.style.color = design[design_auswahl]["Textfarbe"];
		document.getElementById("beschreibung").firstChild.style.color = design[design_auswahl]["Textfarbe"];
		
		// Auswahlliste
		set_design_auswahl();
				
	} // set_design
	
	
	// funktion zur festlegung des designs fuer die auswahlliste
	function set_design_auswahl () {
		
		var auswahlelemente = document.getElementsByTagName("li");
		
		//alert(auswahlelemente.length);
		
		for (var a = 0; a < auswahlelemente.length; a++)
		{
			var parent = auswahlelemente[a].parentNode;
		
			//alert(parent.getAttribute('class'));
			
			//if (auswahlelemente[a].parentNode.getAttribute("class") == 'auswahl')
			if (auswahlelemente[a].getAttribute('class') == 'auswahl')
			{
				// Auswahlhintergrund
				var auswahlhintergrund = design[design_auswahl]["AuflistungHintergrundFarbe"];
				
				// normal
				if (design[design_auswahl]["AuflistungHintergrundBild"] != 'kein_Hintergrundbild')
				{
					auswahlhintergrund += " url(" + design[design_auswahl]["AuflistungHintergrundBild"] + ") repeat-x top";
				}
				auswahlelemente[a].firstChild.style.background = auswahlhintergrund;
								
				// Auswahltextfarbe
				auswahlelemente[a].firstChild.style.color = design[design_auswahl]["AuflistungTextFarbe"];	
			}
		}
	}
	
	// funktion fuer den onmouseoutzustand der auswahlliste
	function set_design_normal (element) {
	
		var auswahlhintergrund = design[design_auswahl]["AuflistungHintergrundFarbe"];
				
		// normal
		if (design[design_auswahl]["AuflistungHintergrundBild"] != 'kein_Hintergrundbild')
		{
			auswahlhintergrund += " url(" + design[design_auswahl]["AuflistungHintergrundBild"] + ") repeat-x top";
		}
		element.style.background = auswahlhintergrund;
	
		element.style.color = design[design_auswahl]["AuflistungTextFarbe"];
	}
	
	
	// funktion fuer den onmouseoverzustand der auswahlliste
	function set_design_hover (element) {
	
		var auswahlhintergrund_hover = design[design_auswahl]["AuflistungHintergrundFarbeHover"];
				
		// hover
		if (design[design_auswahl]["AuflistungHintergrundBildHover"] != 'kein_Hintergrundbild')
		{
			auswahlhintergrund_hover += " url(" + design[design_auswahl]["AuflistungHintergrundBildHover"] + ") repeat-x top";
		}
		element.style.background = auswahlhintergrund_hover;
	
		element.style.color = design[design_auswahl]["AuflistungTextFarbeHover"];
	}
	
	
	
	
	// funktion zum Bewegen des Fotos, je nach var richtung nach links, rechts, oben, unten
	// anhand der var speed die pixel pro sekunde (pro interval) berechnen
	
	function move_foto () {
	
		// aktuelle Sekunde herausfinden
		var a = new Date();
		var jetzt = a.getTime();
		var schrittweite;

		// zeitraum ist der Startzeitstempel (wird beim Begin der Bewegung initialisiert) minus der aktuelle Zeitstempel	
		var zeitraum = jetzt - startzeit;
		
		// speed wird uebergeben und in globaler var gespeichert
		schrittweite = zeitraum / speed;

		// eine runde Pixelanzahl aus der schrittweite berechnen
		var pixelanzahl = Math.round(schrittweite); 
		
		
		if (panorama_360 == 'ja')
		{
			// nach rechts drehen
			if (richtung == "rechts")
			{
			
				//rand_links = document.getElementById("foto").style.marginLeft;
				rand_links_zahl = rand_links.replace('px', '');
				neuer_rand = parseInt(rand_links_zahl - pixelanzahl);
			
				//debug-info
				//document.getElementById("linker_rand").innerHTML = "ri: rechts <br>pixel: " + pixelanzahl + "<br>rand: " + rand_links_zahl + "<br>neuer_rand: " + neuer_rand;
			
				var doppelweite = (-2 * fotoweite);
			
				if (neuer_rand <= doppelweite)
				{
					//document.getElementById("linker_rand").innerHTML = "zur&uuml;cksetzen";
				
					reset_rand = (fotoweite * -1);
					document.getElementById("foto").style.marginLeft = reset_rand + "px";
				
					neuer_rand = 0;
					window.clearInterval(test);
					rand_links = document.getElementById("foto").style.marginLeft;
					
					drehen(speed, richtung);
				
				}
				else
				{
					document.getElementById("foto").style.marginLeft = neuer_rand + "px";
				}
			}// richtung == rechts
		
		
			// nach links drehen
			if (richtung == "links")
			{
				//rand_links = document.getElementById("foto").style.marginLeft;
		
				rand_links_zahl = rand_links.replace('px', '');
				neuer_rand = parseInt(rand_links_zahl - (pixelanzahl * -1));
				
				//debug-info		
				//document.getElementById("linker_rand").innerHTML = "ri: links <br>pixel: " + pixelanzahl + "<br>rand: " + rand_links_zahl + "<br>neuer_rand: " + neuer_rand;

				if (neuer_rand >= 0)
				{
					//document.getElementById("linker_rand").innerHTML = "zzur&uuml;cksetzen";
				
					reset_rand = (fotoweite * -1);
					document.getElementById("foto").style.marginLeft = reset_rand + "px";
				
					neuer_rand = 0;
					window.clearInterval(test);
				
					rand_links = document.getElementById("foto").style.marginLeft;
					drehen(speed, richtung);
				}
				else
				{
					document.getElementById("foto").style.marginLeft = neuer_rand + "px";
				}
			
			} // richtung == links
		
		}// panorame_360 == ja
		
		
		
		if (panorama_360 == "nein")
		{
			// nach rechts drehen
			if (richtung == "rechts")
			{
				//rand_links = document.getElementById("foto").style.marginLeft;
				rand_links_zahl = rand_links.replace('px', '');
				neuer_rand = parseInt(rand_links_zahl - pixelanzahl);
			
				// da kein 360grad panorama ist der groesste (kleinste) wert fuer den linen rand:
				// breite des fotos - (breite des fensters minus 200 pixel fuer die balken) 
				var randbreiten = parseInt(breite_linker_rand + breite_rechter_rand);
				
				rechts = ((fotoweite - (fensterbreite - randbreiten)) * -1);
			
				//debug-info
				//document.getElementById("linker_rand").innerHTML = "ri: rechts <br>pixel: " + pixelanzahl + "<br>rand: " + rand_links_zahl + "<br>neuer_rand: " + neuer_rand + "<br>var rechts: " + rechts;
			
				if (neuer_rand > rechts)
				{
					document.getElementById("foto").style.marginLeft = neuer_rand + "px";
				}
				else
				{
					anhalten();
				}
				
				
				
			}// richtung == rechts
		
		
			// nach links drehen
			if (richtung == "links")
			{
				//rand_links = document.getElementById("foto").style.marginLeft;
		
				rand_links_zahl = rand_links.replace('px', '');
				neuer_rand = parseInt(rand_links_zahl - (pixelanzahl * -1));
				
				//debug-info		
				//document.getElementById("linker_rand").innerHTML = "ri: links <br>pixel: " + pixelanzahl + "<br>rand: " + rand_links_zahl + "<br>neuer_rand: " + neuer_rand;

				// weil es kein 360grad panorama ist, ist der kleinste wert fuer den linken rand 0
				if (neuer_rand < 0)
				{
					document.getElementById("foto").style.marginLeft = neuer_rand + "px";
				}
				else
				{
					anhalten();
				}
			
			} // richtung == links
			
		} // 360 nein
		
		
		// nach oben bewegen
		if (richtung == "oben")
		{
		
			rand_oben_zahl = rand_oben.replace('px', '');

			neuer_rand_oben = parseInt(rand_oben_zahl - (pixelanzahl * -1));
					
			//debug-info
			//document.getElementById("linker_rand").innerHTML = "ri: oben <br>pixel: " + pixelanzahl + "<br>rand oben: " + rand_oben_zahl + "<br>neuer_rand_oben: " + neuer_rand_oben;

			if (neuer_rand_oben < 50)
			{
				document.getElementById("foto").style.marginTop = neuer_rand_oben + "px";
			}
			else
			{
				anhalten();
			}
			
		
		} // Richtung == oben
		
		
		// nach unten bewegen
		if (richtung == "unten")
		{
		
			rand_oben_zahl = rand_oben.replace('px', '');

			neuer_rand_oben = parseInt(rand_oben_zahl - (pixelanzahl));
			
			//debug-info		
			//document.getElementById("linker_rand").innerHTML = "ri: oben <br>pixel: " + pixelanzahl + "<br>rand oben: " + rand_oben_zahl + "<br>neuer_rand_oben: " + neuer_rand_oben;

			// max rand = hoehe der buehne plus hoehe des obereren randes minus fotohoehe
			max_neg_rand = hoehe_buehne + document.getElementById("oberer_rand").offsetHeight - fotohoehe;
			
			if (neuer_rand_oben > max_neg_rand)
			{
				document.getElementById("foto").style.marginTop = neuer_rand_oben + "px";
			}
			else
			{
				anhalten ();
			}
			
		
		} // Richtung == unten
		
	}
	
	
	
	// kleine funktion zur Errechnung der Potenz x^y	
	function potenzieren (x,y)
	{
  		var z = 1.0;
		
  		for (i = 1; i <= y; i++)
		{
			parseFloat(z*=x);
		}
	    
	  	return z;
	}	
	
	
	// Funktion zum Herausfinden der aktuellen Zeit, Sekunden seit 1.1.1970 == startzeit
	function get_time () {
	
		var jetzt = new Date();
		startzeit = jetzt.getTime();
	
	}
	
	
	// Funktion zum drehen des Fotos
	// uebergabespeed: Pixel pro Sekunde (wird noch in move_foto genau berechnet)
	// uebergaberichtung: Richtung, in welche das Foto gedreht/geschoben werden soll
	
	function drehen (uebergabespeed, uebergaberichtung) {
		
		get_time();
		
		richtung = uebergaberichtung;
		
		speed = uebergabespeed;
		
		test = window.setInterval(move_foto, 20);
		
	}
	
	// Funktion zum Zoomen des Fotos
	
	function zoomen (uebergabespeed, uebergaberichtung) {
	
		// erst einmal eine evtl. bewegung stoppen und die raender herausfinden
		anhalten();
		
		// raender des foto-divs herausfinden
		rand_links_zahl = rand_links.replace('px', '');
		rand_oben_zahl = rand_oben.replace('px', '');
	
		// vergroessern
		if (uebergaberichtung == "zoom_in")
		{
			fotobreite_neu = Math.round(fotoweite * zoomfaktor);
			fotohoehe_neu = Math.round(fotohoehe * zoomfaktor);
			
			// maximalen zoomfaktor berechnen (10 Schritte)
			var max_faktor = potenzieren(zoomfaktor,zoomstufen); 
						
			max_fotobreite = Math.round(max_faktor * fotoweite_ori);
			max_fotohoehe = Math.round(max_faktor * fotohoehe_ori);
					
			//debug-info
			//document.getElementById("linker_rand").innerHTML = max_fotobreite;
						
			// wenn die max. zoomstufe erreicht ist			
			if ((fotobreite_neu >= max_fotobreite) || (fotohoehe_neu >= max_fotohoehe))
			{
				// fotobreite und -hoehe auf die max werte setzen
				fotobreite_neu = max_fotobreite;
				fotohoehe_neu = max_fotohoehe;
				
				// raender nicht mehr anpassen
			}
			else
			{
				// raender entsprechend der zoomstufe anpassen
				neuer_rand_links = Math.round(rand_links_zahl * zoomfaktor);
				neuer_rand_oben = Math.round(rand_oben_zahl * zoomfaktor);
			}
			
			// wenn der obere rand > 50 px ist, wuerde das bild unter dem oberen rand geschoben werden
			if (neuer_rand_oben > 50)
			{
				neuer_rand_oben = 50;
			}
			
			
		}
		
		// verkleinern
		if (uebergaberichtung == "zoom_out")
		{
			fotobreite_neu = Math.round(fotoweite / zoomfaktor);
			fotohoehe_neu = Math.round(fotohoehe / zoomfaktor);
			
			// raender entsprechend der zoomstufe anpassen
			neuer_rand_links = Math.round(rand_links_zahl / zoomfaktor);
			neuer_rand_oben = Math.round(rand_oben_zahl / zoomfaktor);
			
			// foto darf nicht kleiner sein als ausgangsgroesse
			//if ((fotobreite_neu < fotoweite_ori) || (fotohoehe_neu < fotohoehe_ori))
			if (fotohoehe_neu <= hoehe_buehne)
			{
				/*
				fotobreite_neu = fotoweite_ori;
				fotohoehe_neu = fotohoehe_ori;
				neuer_rand_links = rand_links_zahl;
				neuer_rand_oben = rand_oben_zahl;
				*/
				
				fotohoehe_neu = hoehe_buehne;
				fotobreite_neu = Math.round((hoehe_buehne / fotohoehe_ori) * fotoweite_ori);
				
			}
			
			// Problem: bild rutscht nach links raus, wenn kein 360 grad Panorama und man am rechten rand herauszoomt
			if (panorama_360 == 'nein')
			{
				if ((neuer_rand_links + fotobreite_neu) <= fensterbreite)
				{
					//alert ((neuer_rand_links + fotobreite_neu));
					neuer_rand_links = (-1 * (fotobreite_neu - fensterbreite));			
				}
				else
				{
					neuer_rand_links = rand_links_zahl;
				}
			}
			
			if (panorama_360 == 'ja')
			{
				if (fotohoehe_neu <= hoehe_buehne)
				{
					neuer_rand_links = rand_links_zahl;
				}
			}
			
			
			if (neuer_rand_oben < 50)
			{
				neuer_rand_oben = 0;
			}	
			else
			{
				neuer_rand_oben = rand_oben_zahl;
			}
			
			if ((neuer_rand_oben + fotohoehe_neu) < 350)
			{
				neuer_rand_oben = 350 - fotohoehe_neu;
			}
			
		}
		
		if (uebergaberichtung == "standard")
		{
			fotobreite_neu = fotoweite_ori;
			fotohoehe_neu = fotohoehe_ori;
			
			//linker rand auf ausgangswert
			// linker rand = -fotobreite, weil linkes bild neben dem mittleren sein muss 
			if (panorama_360 == 'ja')
			{
				// zu dem linken rand einen evtl. offset dazuaddieren
				if (offset_rand_links > 0)
				{
					neuer_rand_links = ((fotobreite_neu * -1) + parseInt(offset_rand_links));
				}
				else
				{
					neuer_rand_links = (fotobreite_neu * -1);
				}
			}
			
			//linker rand auf 0
			if (panorama_360 == 'nein')
			{
				// zu dem linken rand einen evtl. offset dazuaddieren
				if (offset_rand_links > 0)
				{
					neuer_rand_links = (0 + parseInt(offset_rand_links));
				}
				else
				{
					neuer_rand_links = 0;
				}
			}
			
			
			//neuer_rand_oben = 0;
			
			// rand_oben
			if (offset_rand_oben != 0)
			{
				neuer_rand_oben = parseInt(-1 * offset_rand_oben);
			}
			else
			{
				neuer_rand_oben = 0;
			}
			
			
		} // auf standard zurueck
		
		
		
		//foto1 ist immmer vorhanden
		document.getElementById("foto1").style.width = fotobreite_neu + "px";
		document.getElementById("foto1").style.height = fotohoehe_neu + "px";
		
		if (panorama_360 == 'ja')
		{
			// bei 360 grad gibt's noch foto2 und foto3
			document.getElementById("foto2").style.width = fotobreite_neu + "px";
			document.getElementById("foto2").style.height = fotohoehe_neu + "px";
			
			document.getElementById("foto3").style.width = fotobreite_neu + "px";
			document.getElementById("foto3").style.height = fotohoehe_neu + "px";
			
			var fotodivbreite_neu = (3 * fotobreite_neu);
		}
			
		if (panorama_360 == 'nein')
		{
			var fotodivbreite_neu = fotobreite_neu;
		}
			
		document.getElementById("foto").style.width = fotodivbreite_neu + "px";
		document.getElementById("foto").style.height = fotohoehe_neu + "px";
		
		document.getElementById("foto").style.marginLeft = neuer_rand_links + "px";
		document.getElementById("foto").style.marginTop = neuer_rand_oben + "px";
		
		//debug-info
		//document.getElementById("linker_rand").innerHTML = uebergaberichtung + "<br />breite: " + fotobreite_neu + "<br>h&ouml;he: " + fotohoehe_neu + "<br>fotodivbreite: " + fotodivbreite_neu + "<br>fotodivhoehe: " + fotohoehe_neu + "<br>rand links: " + neuer_rand_links + "<br>rand_oben: " + neuer_rand_oben;
		
		fotoweite = fotobreite_neu;
		fotohoehe = fotohoehe_neu;
			
	}
	
	// Funktion zu anhalten der Bewegung und Speichern der aktuellen Werte
	function anhalten() {
	
		window.clearInterval(test);
		
		panorama_autoplay = 0;
		
		richtung = '';
		speed = 0;
		
		rand_links = document.getElementById("foto").style.marginLeft;
		rand_oben = document.getElementById("foto").style.marginTop;
		
		//debug-info
		//document.getElementById("rechter_rand").innerHTML = "links: " + rand_links + "<br>oben: " + rand_oben;
		
	}
	
	
	// Funktion zum nichtstun
	function keine_funktion() {
	
	}
		
	// beim Laden des Fensters	
	window.onload = function(){
		
		// config.xml Datei einlesen und entsprechend alle weiteren funktionen ausfuehren
		XMLHTTP.open("GET", "config.xml");
		XMLHTTP.onreadystatechange = daten_auslesen;
		XMLHTTP.send(null);
		
	} // window.onload