// JavaScript Document

function tauschen(bild, menuepunkt, farbe){
	document.getElementById("vollbild").src=bild;
	document.getElementById(menuepunkt).style.color=farbe;
	}
	

function bildwechsel(evt){
	document.getElementById("vollbild").src=this.name;
	for (var i = 0; i < bilder.length; i++) {
		// Ausgangsfarbe der Rahmen
		bilder[i].style.borderColor = "#FFFFFF";
	}
	
	// Auswahlfarbe der Rahmen
	this.style.borderColor = "#993399";
	for (var i = 0; i < bilder.length; i++) {
		// Ausgangsfarbe der Rahmen
		if(alleBilder[i] == this.name){
			aktuellesBild = i;
		}
	}
}

function schieben(richtung){
	if(richtung == "rechts"){
		//alert(aktuellesBild);
		aktuellesBild += 1;
		if(aktuellesBild == bilder.length){
			aktuellesBild = 0;
		}
		document.getElementById("vollbild").src= alleBilder[aktuellesBild];
		for (var i = 0; i < bilder.length; i++) {
			// Ausgangsfarbe der Rahmen
			bilder[i].style.borderColor = "#FFFFFF";
		}
		bilder[aktuellesBild].style.borderColor = "#993399";
	}
	
	if(richtung == "links"){
		aktuellesBild -= 1;
		//alert(aktuellesBild);
		if(aktuellesBild < 0){
			aktuellesBild = bilder.length-1;
		}
		document.getElementById("vollbild").src= alleBilder[aktuellesBild];
		//alert(aktuellesBild);
		for (var i = 0; i < bilder.length; i++) {
			// Ausgangsfarbe der Rahmen
			bilder[i].style.borderColor = "#FFFFFF";
		}
		bilder[aktuellesBild].style.borderColor = "#993399";
	}

}

function tasten(ereignis){
if(window.event.keyCode == 37){
schieben("links");
}
if(window.event.keyCode == 39){
schieben("rechts");
}
}

function ini(){
	var bereich = document.getElementById("icons");
	bilder = bereich.getElementsByTagName("img");
	
	for (var i = 0; i < bilder.length; i++) {
		bilder[i].onclick = bildwechsel;
		alleBilder[i] = bilder[i].name;
	}
	bilder[0].style.borderColor = "#993399";
	if(window.event.keyCode == 37){
		schieben("links");
	}
	if(window.event.keyCode == 39){
		schieben("rechts");
	}
}
var bilder;
var aktuellesBild = 0;
var alleBilder = new Array();
window.onload = ini;