//Hier das Array mit den Bildern definieren, das kannst du auch in einer
//externen JS-Datei tun, erhöht die Übersichtlichkeit.
//Das Array ist hier zweidimensional. Die zweite dimension enthält Einträge nach folgendem Muster:
//1. Dateiname des kleinen Vorschaubildes
//2.Dateiname des Originalbildes 
//3.Den String der Bildbeschreibung

//Wenn du die Bilder nun unbedingt vorladen willst, dann mußt du das array anders deklarieren:

//Array-Nummer [index]  [0],          [1],                 [2],                        [3],                [4],          [5],        [6]   );

//bilder[0]=new Array(new Image(),new Image(),"text1 der Bildbeschreibung","text2 der Bildbeschreibung","DSM_Variable","B_width","B_height");
//bilder[0][0].src="Bildklein1.jpg"
//bilder[0][1].src="Bildgross1.jpg"

bilder=new Array()
bilder[0]=new Array("images/XMasHearts_S.jpg","images/XMasHearts_L.jpg","XMasHearts","","screen_xmashearts","400","284");
bilder[1]=new Array("images/AlphabetCookies_S.jpg","images/AlphabetCookies_L.jpg","AlphabetCookies","","screen_alphabetcookies","400","284");
bilder[2]=new Array("images/AlphabetSoup_S.jpg","images/AlphabetSoup_L.jpg","AlphabetSoup","","screen_alphabetsoup","400","284");
bilder[3]=new Array("images/Balloons_S.jpg","images/Balloons_L.jpg","Balloons","","screen_balloons","400","284");
bilder[4]=new Array("images/BreakfastBoy_S.jpg","images/BreakfastBoy_L.jpg","BreakfastCereals","","screen_breakfastcereals","400","284");
bilder[5]=new Array("images/ChristmasGirl_S.jpg","images/ChristmasGirl_L.jpg","ChristmasGirl","","screen_christmasbakery","400","284");
bilder[6]=new Array("images/Clouds_S.jpg","images/Clouds_L.jpg","Clouds","","screen_clouds","400","284");
bilder[7]=new Array("images/DaisyMeadow_S.jpg","images/DaisyMeadow_L.jpg","DaisyMeadow","","screen_daisymeadow","400","284");
bilder[8]=new Array("images/Doves_S.jpg","images/Doves_L.jpg","Doves","","screen_pigeons","400","284");
bilder[9]=new Array("images/Eastereggs_S.jpg","images/Eastereggs_L.jpg","EasterEggs","","screen_eastereggs","400","284");
bilder[10]=new Array("images/FallingLeaves_S.jpg","images/FallingLeaves_L.jpg","FallingLeaves","","screen_fallingleaves","400","284");
bilder[11]=new Array("images/LadyBugs_S.jpg","images/LadyBugs_L.jpg","LadyBugs","","screen_ladybugs","400","284");
bilder[12]=new Array("images/SandCastle_S.jpg","images/SandCastle_L.jpg","SandCastle","","screen_sandcastle","400","284");
bilder[13]=new Array("images/SantasBack_S.jpg","images/SantasBack_L.jpg","SantaBackView","","screen_santabackview","400","284");
bilder[14]=new Array("images/SantawithParcel_S.jpg","images/SantawithParcel_L.jpg","SantaWithParcel","","screen_santascaps","400","284");
bilder[15]=new Array("images/SilentGirl_S.jpg","images/SilentGirl_L.jpg","SilentGirl","","screen_snowtraces","400","284");
bilder[16]=new Array("images/SnowCar_S.jpg","images/SnowCar_L.jpg","SnowCarA6","","screen_snowcara6","400","284");
bilder[17]=new Array("images/Snowman_S.jpg","images/Snowman_L.jpg","Snowman","","screen_snowman","400","284");
bilder[18]=new Array("images/StonesinSand_S.jpg","images/StonesinSand_L.jpg","StonesInSand","","screen_stonesinsand","400","284");
bilder[19]=new Array("images/TwoHamsters_S.jpg","images/TwoHamsters_L.jpg","TwoHamsters","","screen_twohamsters","400","284");
bilder[20]=new Array("images/WomanTree_S.jpg","images/WomanTree_L.jpg","WomanTree","","screen_womantree","400","284");
bilder[21]=new Array("images/Lens_S.jpg","images/Lens_L.jpg","Lens","","screen_lens_de","400","284");
bilder[22]=new Array("images/LetterCookiesSugar_S.jpg","images/LetterCookiesSugar_L.jpg","LetterCookiesSugar","","screen_lettercookiessugar","400","284");
bilder[23]=new Array("images/SkiJump_S.jpg","images/SkiJump_L.jpg","SkiJump","","screen_skijump","400","284");
bilder[24]=new Array("images/StrawberryCake_S.jpg","images/StrawberryCake_L.jpg","StrawberryCake","","screen_strawberrycake","400","284");
bilder[25]=new Array("images/Tiles_S.jpg","images/Tiles_L.jpg","Tiles","","screen_tiles","400","284");

//bilder für die schaltflächen
bildlaufback=new Image()
bildlaufback.src="images/upOut.png"
bildlaufbackOver=new Image()
bildlaufbackOver.src="images/upOver.png"

bildlaufvor=new Image()
bildlaufvor.src="images/downOut.png"
bildlaufvorOver=new Image()
bildlaufvorOver.src="images/downOver.png"

genButtonOut=new Image()
genButtonOut.src="images/genButtonOut.png"
genButtonOver=new Image()
genButtonOver.src="images/genButtonOver.png"

fragezeichenBild=new Image()
fragezeichenBild.src="images/bgAnsicht.jpg"

//Breite der Scrollleiste(also der Thumbs)
var vorschaubreite=110;

//Variable für die Startposition der Scrolleiste 
var posy=0;

//timervariable
var timer=null;

//Gewschindigkeit des scrollens in Millisekunden
var tempo=20;

//schrittweite pro Scrollaufruf
var schrittweite=10;

//Abmessungen der Schaltflächen
var schalterbreite=94;
var schalterhoehe=90;

//Startpositionen der DIVS von Oben und Links 
var posTop  = 10;
var posLeft = 10;

//gewähltes Motiv und Defaultwerte
var dsmMotiv = 'DSM_Clouds';
var nameImBild = 'Test';

// ThickBOX Grösse
var iframe_height = 310;
var iframe_width  = 400;
var boxTitel      = 'Test';

function getWindowSize() {
	if(window.innerWidth) //NS-Browser
	{
	//ermitteln der Browserinnenfläche
	//für den IE muß das nach dem Body-Tag passieren, sonst ergibt das den Wert 0 
	fensterbreite=parseInt(self.innerWidth)-posLeft
	fensterhoehe=parseInt(self.innerHeight)-posTop
	}
	if(document.all)
	{
	fensterbreite=parseInt(document.body.clientWidth)-posLeft
	fensterhoehe=parseInt(document.body.clientHeight)-posTop
	}
}

// Function zur Rückgabe des Styles des Scrollerobjectes zum setzen
// der Position, spart schreibarbeit
function getobj() {
	if(document.layers)
		return eval("document.vorschaudiv.document.inhalt")
	else if(document.all)
		return eval("document.all.inhalt.style")
	else if (document.getElementById)
		return eval("document.getElementById('inhalt').style")
}

// Function zur Rückgabe des  Scrollerobjectes zum Lesen der 
// Scrollerabmessungen, spart schreibarbeit
function getobj1() {
	if(document.layers)
		return eval("document.vorschaudiv.document.inhalt.document.height")
	else if(document.all)
		return eval("document.all.inhalt.offsetHeight")
	else if (document.getElementById)
		return eval("document.getElementById('inhalt').offsetHeight")
}

// Function zur Rückgabe des  Scrollerobjectes selber

function getobj2() {
	if(document.layers)
		return eval("document.anzeige.document")
	else if(document.all)
		return eval("document.all.anzeige")
	else if (document.getElementById)
		return eval("document.getElementById('anzeige')")
}

//Function zum Aufwärtsscrollen

function vor() {
	document.images.down.src=bildlaufvorOver.src;
	if(document.layers) {
		posy=parseInt(getobj().top)
		if(parseInt(getobj().top)>(parseInt(getobj1())-(fensterhoehe-(schalterhoehe*2)))*-1) {
			posy=posy-schrittweite  
			getobj().top=posy
			timer=window.setTimeout('vor()',tempo)
		}
	}
	else if(document.all) {
		posy=parseInt(getobj().pixelTop)
		if(parseInt(getobj().pixelTop)>(parseInt(getobj1())-(fensterhoehe-(schalterhoehe*2)))*-1) {
			posy=posy-schrittweite  
			getobj().pixelTop=posy
			timer=window.setTimeout('vor()',tempo)
		}
	}
	else if(document.getElementById) {
		posy=parseInt(getobj().top)
		if(parseInt(getobj().top)>(parseInt(getobj1())-(fensterhoehe-(schalterhoehe*2)))*-1) {
			posy=posy-schrittweite  
			getobj().top=posy
			timer=window.setTimeout('vor()',tempo)
		}
	}
}

//Function zum Abwärtsscrollen

function zurueck() {
	document.images.up.src=bildlaufbackOver.src;
	if(document.layers) {
		posy=parseInt(getobj().top)
		if(parseInt(getobj().top)<0) {
			posy=posy+schrittweite  
			getobj().top=posy
			timer=window.setTimeout('zurueck()',tempo)
		}
	}
	else if(document.all) {
		posy=parseInt(getobj().pixelTop)
		if(parseInt(getobj().pixelTop)<0) {
			posy=posy+schrittweite
			getobj().top=posy
			timer=window.setTimeout('zurueck()',tempo)
		}
	}
	else if(document.getElementById) {
		posy=parseInt(getobj().top)
		if(parseInt(getobj().top)<0) {
			posy=posy+schrittweite  
			getobj().top=posy
			timer=window.setTimeout('zurueck()',tempo)
		}
	}
}

//Funktion zum Anzeigen des gewählten Bildes und des Begleittextes
//Dazu wird das Div/Layer "Anzeige" neu beschrieben mit den jeweiligen
//Browsermethoden

function anzeigen(nr) {
	
	// das Motiv wird aus der Array-Variablen [in Position 3] gelesen und in die Variable dsmMotiv geschrieben
	dsmMotiv = bilder[nr][4];
	boxTitel = bilder[nr][2];
	kontrolle();

	atext="<table width='100%' ><tr><td align='center' ><img src='"+bilder[nr][1]+"'></td></tr>";
	atext=atext+"<tr><td align='center' ><font size='2' face='Helvetica, Geneva, Arial, SunSans-Regular, sans-serif'>"+(bilder[nr][2]+'&nbsp;'+bilder[nr][3])+"</font></td></tr></table>"

	if(document.layers) {
		getobj2().open()
		getobj2().write(atext)
		getobj2().close()
	}
	else {
		getobj2().innerHTML=atext
	}
}

function ausblenden() {
	document.images.up.src=bildlaufback.src;
	document.images.down.src=bildlaufvor.src;
}


function kontrolle() {

	f_dsmMotiv = escape(dsmMotiv);  // like PHP URLencode
	f_nameImBild = escape(nameImBild);  // like PHP URLencode
	
	testText="<font size='1' face='Helvetica, Geneva, Arial, SunSans-Regular, sans-serif'>";
	testText=testText + "Kontrolle: </font> <br />";
	testText=testText + "<font size='1' face='Helvetica, Geneva, Arial, SunSans-Regular, sans-serif'>Fensterhöhe: " +fensterhoehe+ "</font> <br />";
	testText=testText + "<font size='1' face='Helvetica, Geneva, Arial, SunSans-Regular, sans-serif'>Fensterbeite: " +fensterbreite+ "</font> <br />";
	testText=testText + "<font size='1' face='Helvetica, Geneva, Arial, SunSans-Regular, sans-serif'>DSM Motiv: " +dsmMotiv+ "</font> <br />";
	testText=testText + "<font size='1' face='Helvetica, Geneva, Arial, SunSans-Regular, sans-serif'>Name im Bild: " +nameImBild+ "</font> <br />";
	
	testText=testText + "<font size='1' face='Helvetica, Geneva, Arial, SunSans-Regular, sans-serif'>URL DSM Motiv: " +f_dsmMotiv+ "</font> <br />";
	testText=testText + "<font size='1' face='Helvetica, Geneva, Arial, SunSans-Regular, sans-serif'>URL Name im Bild: " +f_nameImBild+ "</font> <br />";
	
	testText=testText + "<a href='gen.php?dsmMotiv="+dsmMotiv+"&dsmText="+nameImBild+"' title='Test'>Das Korb umrechnen</a>";
	testText=testText + "<br />";
	document.getElementById('kontrolle').innerHTML=testText;
}

function los() {
	nameImBild = document.getElementById("textFeld").value;
	/* genButtonHTML = "<p> <a href='javascript:void(0)' ";
	/ genButtonHTML = genButtonHTML + "onmouseover='" + (document.images.genButtonIMG.src=genButtonOver.src) + " ' ";
	genButtonHTML = genButtonHTML + "onmouseout='" + (document.images.genButtonIMG.src=genButtonOut.src) + " '> ";
	genButtonHTML = genButtonHTML + "<img name='genButtonIMG' src='images/genButtonOut.png' alt='' height='32' width='265' border='0'> </a> </p> "; */
	kontrolle();
	document.getElementById('genButtonDIV').innerHTML=genButtonHTML;
}

function swapIMG (elementID, swapImgSrc) {

	// Erzeuge objekt
	var objekt = null;

	// Setzt objekt auf das übergebene Element (Browser sensitiv)
  if (document.getElementById) {objekt = document.getElementById(elementID);}
  else if (document.all) {objekt = document.all[elementID];}
  else if (document.layers) {objekt = document.layers[elementID];}

	objekt.src = swapImgSrc.src;
}

function goURL (f_dsmMotiv, f_nameImBild) {
  
  // generiert die URL für die BOX, übergibt die Werte "motiv" und "text" an gen.php iframe_height
	f_genURL = "gen.php?dsmMotiv=" + f_dsmMotiv + "&dsmText=" + f_nameImBild + "&keepThis=true&TB_iframe=true&height=" + iframe_height + "&width=" + iframe_width;
	
  // startet die ThickBOX
  TB_show(boxTitel, f_genURL);
}

function anzeigenStart (bildXL) {
	
	bildsrc = bildXL.src;
		
	atext="<table width='100%' > <tr> <td align='center' > <img src='"+bildsrc+"'> </td> </tr>";
	atext=atext+"<tr> <td class='td' align='center' > <font size='2' face='Helvetica, Geneva, Arial, SunSans-Regular, sans-serif'> Bitte wählen Sie ein Motiv </font> </td> </tr> </table>"

	if(document.layers) {
		getobj2().open()
		getobj2().write(atext)
		getobj2().close()
	}
	else {
		getobj2().innerHTML=atext
	}
}