/*
==================================================
Sonor Teutonicus-Galerie (Wolfgang) 090711
==================================================
Das Script baut Eine Seite mit auf normale Bilder verlinkten Thumbnails in eine einfache Galerie um.
Dafür wird die Struktur der Seite geändert und passende Kontrollelemente eingebaut.

- Voraussetzungen: thumbnails in Container #thumbs
*/

var links;
var aktuellesbild;
var tauschInterval; /*Für den Bildwechsel*/
var schritt; /*zählt die Schritte zum Bildwechseln*/

/*Hilfsfunktion zum Transparenz einstellen*/
function neuesAlpha(id, wert){
	var element = document.getElementById(id);
	element.style.opacity = "."+wert;
	if (wert == 100){
		element.style.opacity = "1";
		}
	element.style.filter = "alpha(opacity="+wert+")";
	}
	
function bildWechselEnd(){
	clearInterval(tauschInterval);	
	var neuesbild = document.getElementById("DasNeueBild");
	var bild = document.getElementById("DasBild");
	bild.src = neuesbild.src;
	bild.className = neuesbild.className;
	bild.style.visibility="visible";
	neuesAlpha("DasBild", 100);
	neuesAlpha("DasNeueBild", 0);
	neuesbild.style.display="none";
	neuesbild.className = "breitbild";
	//var bildparent = neuesbild.parentNode;
	//var wiedereinsetzen = bildparent.removeChild(neuesbild);
	//bildparent.insertBefore(wiedereinsetzen,bild);
  	infoeintragen();
	}

function reinFaden(){
	var wert;
	schritt+=1;
	wert = 10*schritt;
	neuesAlpha("DasNeueBild", wert)
	neuesAlpha("DasBild", 100-wert)
	if (wert==100) {
		bildWechselEnd()
		}
	}
	
function bildGeladen(){
var neuesbild = document.getElementById("DasNeueBild");
neuesbild.style.display="block";
schritt = 0;
clearInterval(tauschInterval);	
tauschInterval = setInterval ("reinFaden()", 40);
}


function showPic(nummer) {
  if (nummer == aktuellesbild) return false;
  aktuellesbild = parseInt(nummer);
  var source = links[aktuellesbild].href;
  var neuesbild = document.getElementById("DasNeueBild");
  var bild = document.getElementById("DasBild");
  if (!bild.src){
	 bild.style.visibility="hidden";
	 bild.src = source;
	  } 
  neuesbild.src = source;  
  neuesbild.className = links[aktuellesbild].className;
  neuesbild.onload = function() {bildGeladen();};
  return false;
}


function prepareGalerieControls() {
	var bilddiv = document.getElementById("GalerieBild");
	var zurueck = document.createElement("a");
	var zuruecktext = document.createTextNode("← Bild zurück ");
	zurueck.id = "previous";
	zurueck.href = "#";
	zurueck.appendChild(zuruecktext);
	zurueck.onclick = function() {
      if (aktuellesbild > 0) showPic(aktuellesbild - 1);
      return false;
    }
    bilddiv.appendChild(zurueck);
    
	var vor = document.createElement("a");
	var vortext = document.createTextNode(" Bild vor →");
	vor.id = "next";
	vor.href = "#";
	vor.appendChild(vortext);
	vor.onclick = function() {
      if (aktuellesbild < links.length-1) showPic(aktuellesbild + 1);
      return false;
    }
    bilddiv.appendChild(vor);
}


function prepareGalerieBild() {
	var bilddiv = document.getElementById("GalerieBild");
	var neuesbild = document.createElement("img");
	neuesbild.id = "DasNeueBild";
	bilddiv.appendChild(neuesbild);
	var bild = document.createElement("img");
	bild.id = "DasBild";
	bilddiv.appendChild(bild);
}


function istHochkant(einlink) {
	var breite = einlink.getElementsByTagName("img")[0].width;
	if (breite < 78) {
	einlink.className = "hochkant";
	document.getElementById("GalerieBild").className = "Quadrat";
	} else einlink.className = "breitbild";
}


function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("thumbs")) return false;
  var gallery = document.getElementById("thumbs");
  links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
  links[i].id = i;
    links[i].onclick = function() {
      return showPic(this.id);
    }
  istHochkant (links[i]);
  }
  prepareGalerieBild();
  prepareGalerieControls();
  showPic(0);
}


window.onload=prepareGallery;