// Initialisierungen
  // Deklaration allgemeiner Variablen
  var ScrollerObj, 				// das Scroller-Objekt
	  ScrollerPos, 				// linke Koordinate
	  ScrollerVel, 				// Geschwindigkeit
	  DiaCounter,				// Zähler für Diashow
	  InfoText = null,			// InfoText-DIV
	  ImgSubDir;				// Präfix für Bilder-Unterverzeichnisse

  
  
  function init()
  {
	InfoText = document.getElementById("InfoText");
	  	  
	ScrollerObj = document.getElementById("ImgScroller"); 
	ScrollerObj.style.position = "absolute";
	ScrollerObj.style.top = 0 + "px";
	ScrollerObj.style.left = 0 + "px";
	  
	ScrollerPos = 0;
	ScrollerVel = -1;
	  
	TestVar = "nix";
	  
	// Bilder vorladen
	//ImagePreloader();
	
	//alert(document.body.offsetWidth);

	// Scroller initialisieren
	Scroller();	
  }
	
  // -------------------------------------------------------------------------------------
  function Scroller()
  // Bewegung der Bilder
  {
	ScrollerPos = ScrollerPos + ScrollerVel;
	ScrollerObj.style.left = ScrollerPos + "px";
	  
	tmpDIV = document.getElementById("ImgScroller");
	if (ScrollerPos < (0 - (tmpDIV.offsetWidth * 0.9)))
		{
			ScrollerVel = ScrollerVel * -1;
		}
	  
	if (ScrollerPos > 185)
		{
			ScrollerVel = ScrollerVel * -1;
		}
	  //InfoText.innerHTML =  ScrollerPos;
	  window.setTimeout("Scroller()",50);	
  }
	
  // -------------------------------------------------------------------------------------
  function ScrollerStart()
  // Scroller auf die Anfangsposition zurücksetzen
  {
    ScrollerPos = 0;
  }
    
  // -------------------------------------------------------------------------------------
  function ScrollerChangeDir()
  // Bewegungsrichtung ändern
  {
	ScrollerVel = ScrollerVel * -1;
  }
	
  // -------------------------------------------------------------------------------------
  function ScrollerIncVel()
  // Bewegungsgeschwindigkeit erhöhen oder normalisieren
  {
	if (Math.abs(ScrollerVel) == 1) 
	    {
		ScrollerVel = ScrollerVel * 5;
		}
	else
		{
		ScrollerVel = ScrollerVel / 5
		//document.getElementById("bnScrollVelInc").value= "Schneller";
		}
  }	

  // -------------------------------------------------------------------------------------
  function ScrollerStopp()
  // Scroller anhalten
  {
	if (ScrollerVel != 0) 
	    {
		ScrollerVel = 0;
		//document.getElementById("bnScrollStopp").value= "weiter";
		}
	else
		{
		ScrollerVel = -1;
		//document.getElementById("bnScrollStopp").value= "Pause";
		clearTimeout(ds);
		}
  }
  
  // -------------------------------------------------------------------------------------
  function getImgWidth(imgSrc)
  // soll die Breite des angegebenen Bildes zurückgeben 
  {
	var newImg = new Image();
	newImg.src = imgSrc;
	var height = newImg.height;
	var width = newImg.width;
	return width;
  }
	

  // -------------------------------------------------------------------------------------
  function NewImageSource(NewImageFileName, Description)
  // setzt ein neues Bild in 'MainImage' ein
  {
	var newImg = new Image();
	newImg.src =  NewImageFileName;
	document.MainImage.src = newImg.src;
	//alert(NewImageFileName + " // " + Description);

	newImg.onload = function()
	    {
		if (newImg.width > 800)
			{
				document.MainImage.width = 800;
			}
		else
			{
				document.MainImage.width = newImg.width;
				document.MainImage.height = newImg.height;
			}
		}
	InfoText.innerHTML =  Description;
  }

  	
  // -------------------------------------------------------------------------------------	
  function ImagePreloader()
  // lädt jedes Bild aus dem Array 'imgs', damit es beim Klicken auf die Thumbnails da ist
  {
    for (i = 0; i < imgs.length; i=i+2)
		{
		var tmpImg = new Image();
		tmpImg.src = ImgSubDir + "t_" + imgs[i];
		}
  }
	
	
  // -------------------------------------------------------------------------------------
  function InitDiashow()
  // initialisiert die Diashow
  {
	ScrollerVel = 0;
	ScrollerPos = 0;
	  
	InfoText.innerHTML = "DIASHOW wurde gestartet";
	  
	DiaCounter = 0;
	window.setTimeout("Diashow()", 1000);
  }
  
  // -------------------------------------------------------------------------------------
  function Diashow()
  // startet eine Show mit allen Bildern im Array 'imgs'
  {
	DiaCounter = DiaCounter + 2;
	InfoText.innerHTML =  imgs[DiaCounter + 1];
	
	if (DiaCounter < imgs.length) 
  	    {
		NewImageSource(ImgSubDir + imgs[DiaCounter], imgs[DiaCounter+1]);
		}
      
	ds = window.setTimeout("Diashow()", 5000);
  }

  // -------------------------------------------------------------------------------------
  function CreateSkeleton()
  // erzeugt das Grundgerüst: Buttons, Scroller
  {
  // -----------------------------------------------------------------------------------
  // Imagescroller-Buttons erzeugen 
  // -----------------------------------------------------------------------------------
  document.write("<left>" + "<div id='buttons' style='position: absolute; left: 5px; top: 90px; width: 900px; height: 105px; " + 
			     "border: 1px solid #000000; background-color:#282828; overflow:hidden'> ");
  document.write("<form name='FormImgScroller' action=''>");
	
  /* Alt: Textbutton
  document.write("<input type='button' name='bnScrollStart'  		value='Anfang' 	  style='font: 8pt Verdana; width:60; height: 21; background-color: #282828; color: #FFF' onclick='ScrollerStart()' title='Rollbalken auf Startposition setzen'><br>");
  document.write("<input type='button' name='bnScrollDirLeft'  	value='>>>' 	  style='font: 8pt Verdana; width:60; height: 21; background-color: #282828; color: #FFF' onclick='ScrollerChangeDir()' title='Rollrichtung ändern'><br>");
  document.write("<input type='button' name='bnScrollVelInc'   	value='Schneller' style='font: 8pt Verdana; width:60; height: 20; background-color: #282828; color: #FFF' onclick='ScrollerIncVel()' title='Geschwindigkeit ändern'><br>");
  document.write("<input type='button' name='bnScrollStopp'		value='Pause'	  style='font: 8pt Verdana; width:60; height: 20; background-color: #282828; color: #FFF' onclick='ScrollerStopp()' title='Rollen anhalten'><br>");
  document.write("<input type='button' name='bnScrollDiaShow'		value='Diashow'	  style='font: 8pt Verdana; width:60; height: 22; background-color: #282828; color: #FFF' onclick='InitDiashow()' title='autom. Diashow aller Bilder zeigen'>");
  */
	
  document.write("<a href='javascript:ScrollerStart()'> 		<img height=17 src=img_allg/anfang.gif 		alt='Zur&uuml;ck zum Anfang'> </a>");
  document.write("<br>");
  document.write("<a href='javascript:ScrollerChangeDir()'> 	<img height=17 src=img_allg/wechsel.gif 	alt='Richtungswechsel'> </a>");
  document.write("<br>");
  document.write("<a href='javascript:ScrollerIncVel()'> 		<img height=17 src=img_allg/speed.gif 		alt='Geschwindigkeit &auml;ndern'> </a>");
  document.write("<br>");
  document.write("<a href='javascript:ScrollerStopp()'> 		<img height=17 src=img_allg/pause.gif 		alt='Pause/Fortfahren'> </a>");
  document.write("<br>");
  document.write("<a href='javascript:InitDiashow()'> 		<img height=17 src=img_allg/diashow.gif 	alt='Diashow aller Bilder'> </a>");

  document.write("</form>");
  document.write("</div>");
	 
  // -----------------------------------------------------------------------------------------------------
  // Erzeugen eines div-Layers mit innen liegender Tabelle , in der die Bilder angezeigt und bewegt werden
  // -----------------------------------------------------------------------------------------------------	 

  // --- äußeren Rahmen als DIV-Layer erzeugen (hier werden auch die Lage und die Abmessungen des äußeren Rahmens bestimmt):
  document.write("<left>" + "<div id='rahmen' style='position: absolute; left: 27px; top: 90px; width: 95%; height: 105px; " + 
				 "border: 1px solid #000000; background-color:#000000; overflow:hidden'>");
	   
		// --- innere Tabelle, die die Bilder anzeigt, in eigenem DIV darstellen:
		document.write("<div id='ImgScroller' style='position: relative; top: 0px; left: 0px; background-color:#000000'>");
		document.write("<table border='1' cellspacing='2' cellpadding='0'> <tr>");
       
		for (i = 0; i < imgs.length; i = i + 2)
  	      {
			// - hier wird die Höhe der Thumbnails in "height='xx'" festgelegt
			// - jedes zweite Feld des Arrays 'imgs' beinhaltet eine Bildbeschreibung
			tmp = "<td> <a href=\"javascript: NewImageSource('" + ImgSubDir + imgs[i] + "', '" + imgs[i+1] +  "');\"> " +
			      "<img id='imgsrc' src='" + ImgSubDir + "t_" + imgs[i] + "' height='100' border='0'  alt='" + imgs[i+1] + "'></a> </td> " 
			document.write(tmp);
		  }
		
		document.write("</tr></table></div>"); 
		// --- Ende innere Tabelle
		 
  document.write("</div>");	
  // --- Ende äußerer Rahmen 
	
  }
	
  // -------------------------------------------------------------------------------------
  function outline(id, msg)
  // ein- und ausblenden von IDs
  {
	if (document.getElementById(id).style.display == 'none')
		{
		document.getElementById(id).style.display = 'block';
		InfoText.innerHTML =  msg;
		}
	else
		{
		document.getElementById(id).style.display = 'none';
		InfoText.innerHTML =  msg;
		}
  }
	
  // -------------------------------------------------------------------------------------
  function CreateMenu()
  // Navigationsmenü
  {
	var msgBaeder;
	var msgKuechen;
	msgBaeder = "<br>Bitte w&auml;hlen Sie eine Unterkategorie aus: <br> <br> <a href=baeder_modern.htm> MODERNE B&Auml;DER </a> <br> <a href=baeder_landhaus.htm> LANDHAUS B&Auml;DER </a> <br> <br> Oder klicken Sie auf die laufenden Bilder am oberen Bildschirmrand.";
	msgKuechen = "<br>Bitte w&auml;hlen Sie eine Unterkategorie aus: <br> <br> <a href=kuechen_modern.htm> MODERNE K&Uuml;CHEN </a> <br> <a href=kuechen_landhaus.htm> LANDHAUS K&Uuml;CHEN </a>";
	//alert(msgKuechen);
	
	document.write( "<a class='menue' href='index.htm' > 		STARTSEITE &nbsp;&nbsp;</a>" + 
					"<a class='menue' href='#' onclick=\"outline('baeder','" + msgBaeder + "'); return false;\">	B&Auml;DER &nbsp;&nbsp; </a>" + 
					"  <span id='baeder' style='display:none'>" + 
					"    <a class='menue' href='baeder_modern.htm'> 	<font size=1>	MODERNE B&Auml;DER </font> </a>" + 
					"    <a class='menue' href='baeder_landhaus.htm'> 	<font size=1>	LANDHAUS B&Auml;DER </font> </a>" + 
					"  </span>" +
					"<a class='menue' href='#' onclick=\"outline('kuechen','" + msgKuechen + "'); return false;\">	K&Uuml;CHEN &nbsp;&nbsp;</a>" + 
					"  <span id='kuechen' style='display:none'>" + 
					"    <a class='menue' href='kuechen_modern.htm'> 	<font size=1>	MODERNE K&Uuml;CHEN </font> </a>" + 
					"    <a class='menue' href='kuechen_landhaus.htm'> 	<font size=1>	LANDHAUS K&Uuml;CHEN </font> </a>" + 
					"  </span>" +
					"<a class='menue' href='moderntimes.htm'> 	MODERN TIMES &nbsp;&nbsp;</a>" + 
					"<a class='menue' href='wellness.htm'> 		WELLNESS-BEREICH &nbsp;&nbsp;</a>" + 
					"<a class='menue' href='objektdesign.htm'> 	OBJEKT-DESIGN &nbsp;&nbsp;</a>" + 
					"<a class='menue' href='referenzen.htm'> 	REFERENZEN &nbsp;&nbsp;</a>" + 
					"<a class='menue' href='vorhernachher.htm'> VORHER-NACHHER &nbsp;&nbsp;</a>" + 
					"<a class='menue' href='presse.htm'> 		PRESSE UND TV &nbsp;&nbsp;</a>" + 
					"<a class='menue' href='hersteller.htm'> 	HERSTELLER &nbsp;&nbsp;</a>" + 
					"<a class='menue' href='leistungen.htm'> 	LEISTUNGEN &nbsp;&nbsp;</a>" + 
					"<br>" + 
					"<a class='menue' href='kontakt.htm'> 		KONTAKT &nbsp;&nbsp;</a>" + 
					"<a class='menue' href='impressum.htm'> 	IMPRESSUM &nbsp;&nbsp;</a>" + 
					"<a class='menue' href='hilfe.htm'> 		HILFE &nbsp;&nbsp;</a>" + 
					"<a class='menue' href='gbuch/gbuch.php' target='_new'> 		G&Auml;STEBUCH &nbsp;&nbsp;</a>" + 
					"<br> <br>"
				  );
		/* "<a class='menue' href='gbuch/gbuch.php'> G&Auml;STEBUCH </a>" + */
  }