// doc: 091218

/*
==================================================
Executing JavaScript on page load 060528 (Simon Willison)
==================================================
-> http://simonwillison.net/2004/May/26/addLoadEvent/

Hiermit können beliebig viele Funktionen beim "window.onload" aufgerufen werden
ohne dass ein vorher definiertes window.onload überschrieben wird.

- addLoadEvent einfach als erste Funktion einbinden
- Funktionen per addLoadEvent(Funktionsname) dem "window.onload" hinzufügen
  anstatt direkt per window.onload=Funktionsname;
*/

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}







// Namespacing
var gRel = {};

// einfache Methode zum "Kopieren" von Objekten
gRel.clone = function (vorlage, argumente) {
	var F = function () {}, obj;
	F.prototype = vorlage;
	obj = new F();
	if (obj.configure && argumente) {
		obj.configure (argumente);
		}
	return obj;
	};

// Allgemeine Methode zum Erstellen von Events
gRel.addEvent = function (el, type, fn){
	if (window.addEventListener) {
		el.addEventListener(type, fn, false);
		}
	else if (window.attachEvent){
		el.attachEvent('on' + type, fn);
		}
	else {
		el['on' + type] = fn;
		}
	};

// Checkt, ob der übergebene Wert ein Array ist
gRel.isArray = function (val) {
	return val && typeof val === 'object' && val.constructor === Array;
	};

// Konvertiert einen Farbstring in einen Array mit drei Dezimalzahlen
gRel.colStringToColorArray = function (str) {
	var colorarray = [];
	if (str.substr(0,3)==="rgb"){
		//Rgb-String = rgb(xxx, xxx, xxx)
		colorarray = str.substring(4,str.length-1).split(",");
		for (var i=0;i<colorarray.length;i++){
			colorarray[i]=Number(colorarray[i]);
			}
		} else {
		//Hex-String = #xxxxxx
		colorarray [0] = parseInt(str.substr(1,2).toUpperCase(),16);
		colorarray [1] = parseInt(str.substr(3,2).toUpperCase(),16);
		colorarray [2] = parseInt(str.substr(5,2).toUpperCase(),16);
		}
	return colorarray;
	};
	
// Konvertiert einen Array mit Dezimalzahlen zurück in einen Rgb-String 
gRel.colorArrayToRgb = function (colorarray) {
	var rgb ="rgb("+colorarray[0]+","+colorarray[1]+","+colorarray[2]+")";
	return rgb;
	};


/*
Animierte hovers
*/

// 
gRel.animator = function (obj) {
	var schritt, start, ziel, speed;
	start = this.colStringToColorArray(obj.html_elem.style.color);	
	if (obj.hover) {
		ziel = gRel.colStringToColorArray(obj.hovercolor);
		} 
	else {
		ziel = gRel.colStringToColorArray(obj.linkcolor);
		}
	speed = 25;
	schritt = gRel.colorIncrement (start, ziel, speed);
	obj.html_elem.style.color = gRel.colorArrayToRgb(schritt);
	if (schritt[0]===ziel[0] && schritt[1]===ziel[1] && schritt[2]===ziel[2]){
		window.clearInterval(obj.interval);
		}
	};

// verändert eine Start-Farbe um einen Schritt zur Zielfarbe
gRel.colorIncrement = function(start, ziel, speed) {
	var schritt=[];
	for (var i=0; i<start.length; i++){
		if (start[i] === ziel[i]) {
			schritt[i]=start[i];
		} else if (start[i] > ziel[i]) {
			schritt[i]= Math.max (start[i] - speed, ziel[i]);
		} else {
			schritt[i]= Math.min (start[i] + speed, ziel[i]);
			}
		}
	return schritt;
	};

// Einfaches Objekt zum Animieren von Menü-Einträgen
gRel.menuelink_obj = {
	html_elem : document.getElementById("M1_Startseite"),
	interval : 0,
	linkcolor : "#7d7d7d",
	hovercolor : "#ffffff",
	hover : false,
	init_anim : function() {
		var that = this;
		window.clearInterval(this.interval);
		if (!this.html_elem.style.color || this.html_elem.style.color==="") {
			this.html_elem.style.color = this.linkcolor;
			}
		this.interval = window.setInterval(function(){gRel.animator(that);}, 40);
		},
	mouseover_anim : function() {
		this.hover= true;		
		if (document.getElementById("thumbs")){
			this.init_anim();
			} else {
			this.html_elem.style.color = this.hovercolor;
			}
		},
	mouseout_anim : function() {
		this.hover= false;
		this.init_anim();
		},
	attachEvents: function() {
		var that = this;
		gRel.addEvent(this.html_elem, 'mouseover', function() { that.mouseover_anim(); });
		gRel.addEvent(this.html_elem, 'mouseout', function() { that.mouseout_anim(); });
		},
	configure : function(thearray) {
		this.html_elem = thearray[0];
		this.attachEvents();
		}
	};

// Vorbereitung der Objekte
gRel.prepareHovers = function() {
	var i, atags, containerid="MenueSpalte";
	if (document.getElementById(containerid)) {
		atags = document.getElementById(containerid).getElementsByTagName("a");
		for (i=0; i < atags.length; i++){
			gRel[containerid+"_"+i] = gRel.clone(gRel.menuelink_obj,[atags[i]]);
			} 
		}
	};

//Initialisierung
//addLoadEvent(gRel.prepareHovers);
//window.onload = gRel.prepareHovers;




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

- Voraussetzungen: thumbnails in Container #thumbs
*/


var pos=0; /*aktuelle bzw. neue Scrollpositon (ohne px)*/
var max=0; /*Scrollgrenze: wird durch Breite der Scrollebene bestimmt*/
var min=0; /*feste Scrollgrenze*/
var scrollinterval=0; 
var diashowinterval=0;
var diashowspeed=3000;
var scroller; /*der zuletzt gehoverte Scroll-btn (zur Richtungsbestimmung)*/
var links; /*Array der Thumbnail-Links*/
var aktuellesbild; /*Nummer des aktuellen Bildes = id des passenden Thumbnail-Links*/
var tauschInterval; /*Für den Bildwechsel*/
var schritt; /*zählt die Schritte zum Bildwechseln*/




//Springt vom letzten wieder zum ersten Bild
function naechstesDia(){
var naechstes = aktuellesbild+1;
if (naechstes > links.length-1) naechstes = 0;
showPic(naechstes);
}


//Startet die Diashow
function startDiashow(){
	clearInterval(diashowinterval);
	document.getElementById("diashow").className = "on";
	diashowinterval = window.setInterval('naechstesDia()',diashowspeed);
}


//Stoppt die Diashow
function stopDiashow() {
	clearInterval(diashowinterval);
	document.getElementById("diashow").className = "off";
}


//Schaltet die Diashow abwechselnd an/aus
function toggleDiashow(){
	if (document.getElementById("diashow").className != "on") {
	startDiashow();
	} else {
	stopDiashow();
	}
}


//Schaltet den Infotext-Kasten an und aus
function infoswitch(){
var info=document.getElementById("info");
var infotext=document.getElementById("infotext");
if (infotext.className == "bereit") { 
	info.className = "off";
	infotext.className = "ausgeblendet";
} else {
	info.className = "on";
	infotext.className = "bereit";
}
}


//Schreibt den aktuellen Link- oder Thumbnail-title oder -alt in den Infotext-Kasten
function infoeintragen(){
	var infocontainer=document.getElementById("infotexttext");
	var link = links[aktuellesbild];
	var bild = link.getElementsByTagName("img")[0];
	var infotxt = link.title;
	if (infotxt == undefined || infotxt == "" ) infotxt = bild.title;
	if (infotxt == undefined || infotxt == "" ) infotxt = bild.alt;
	infocontainer.innerHTML=infotxt;
}


//Verschiebt den Slider. Wird im scrollinterval aufgerufen
function schieben() {
	var slider = document.getElementById("thumbs");
	if (scroller=="scrolllinks") pos-=6;
	else if (scroller=="scrollrechts") pos+=6;
	grenzen();
	slider.style.left = -pos+"px";
}


//Startet den Scroll-Vorgang
function startScrollen(richtung){
	scroller=richtung;
	clearInterval(scrollinterval);
	scrollinterval = window.setInterval('schieben()',25);
}


//Schreibt die Bild-Anzahl in den span "Bild-Nr. von x Bildern"
function bildanzahlbestimmen(){
	var zahl = links.length;
	if (zahl<10) zahl = "0"+zahl.toString();
	document.getElementById("bildanzahl").innerHTML=zahl;
}


//Schreibt die aktuelle Bild-Nr in den span "Bild-Nr. von x Bildern"
function bildnummer(){
var zahl = aktuellesbild+1;
if (zahl<10) zahl = "0"+zahl.toString();
document.getElementById("bildnummer").innerHTML=zahl;
}


//Begrenzt das Scrollen + blendet die Buttons an den Grenzen aus
function grenzen() {
	if (pos>max) {
		pos = max;
		document.getElementById("scrollrechts").className = "ausgeblendet";
	} else if (pos<min) {
		pos = min;
		document.getElementById("scrolllinks").className = "ausgeblendet";
	} else {
		document.getElementById("scrolllinks").className= "bereit";
		document.getElementById("scrollrechts").className = "bereit";
	}
}


//Errechnet die maximale Scrollweite per Breite mal Anzahl der Thumbnails
function maxbestimmen() {
	max = (links.length*121)-701;
	document.getElementById("thumbs").style.width = max+701+"px";
}


//Richtet die js-Funktionen der Buttons vor, zurück, scroller und Info-Toggle ein
function prepareGalerieControls() {
	document.getElementById("previous").onclick = function() { showPic(aktuellesbild - 1); stopDiashow();};
	document.getElementById("next").onclick = function() { showPic(aktuellesbild + 1); stopDiashow();};
    document.getElementById("info").onclick = function() { infoswitch(); };
    document.getElementById("scrolllinks").onmouseover = function() { startScrollen("scrolllinks"); };
    document.getElementById("scrolllinks").onmouseout = function() { clearInterval(scrollinterval); };
    document.getElementById("scrollrechts").onmouseover = function() { startScrollen("scrollrechts"); };
    document.getElementById("scrollrechts").onmouseout = function() { clearInterval(scrollinterval); };
    document.getElementById("diashow").onclick = function() { toggleDiashow();};
}


//läd das neue Bild und leitet alle notwendigen Änderungen ein
function showPic(nummer) {
  nummer = parseInt(nummer);
  if (nummer == aktuellesbild || nummer < 0 || nummer > links.length-1 ) return false;
  aktuellesbild = nummer;
  var source = links[aktuellesbild].href;
  var neuesbild = document.getElementById("dasneuebild");
  neuesbild.src = source; 
  neuesbild.onload = function() {bildGeladen();};
  bildnummer(); 
  return false;
}

function bildAusblenden() {
var bild = document.getElementById("dasbild");
bild.className = "ausgeblendet";
}

//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;
	neuesAlpha("dasneuebild", 0);
	neuesbild.style.display="none";
  	infoeintragen();
	}

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


//setzten den Html-Code der JavaScript-Galerie zusammen	
function createDasBildHtml(){
	var bilddiv=document.createElement("div");
	bilddiv.innerHTML='<img id="dasneuebild" src=""><img id="dasbild" src=""><div id="infotext" class="ausgeblendet" ><div id="infotextback"><\/div><div id="infotexttext"><\/div><\/div>';
	document.getElementById("MainContent").appendChild(bilddiv);
	}
	
function createGalerieControlsHtml(){
	var galeriecontrols=document.createElement("div");
	var nr = '<span id="bildnummer">01<\/span>\/<span id="bildanzahl">32<\/span> ';
	var dia = '<span id="diashow">DIASHOW <span id="diashowan">AN<\/span>\/<span id="diashowaus">AUS<\/span><\/span> '
	var info = '<span id="info">INFO<\/span> '
	var vor = '<a id="previous" href="#">ZURÜCK<\/a>\/<a id="next" href="#">VOR<\/a> '
	galeriecontrols.id = "galeriecontrols";
	if (!document.getElementById('footer')){
		galeriecontrols.innerHTML =  nr + dia + '<br>' + info + vor;
		document.getElementById("MenueSpalte").appendChild(galeriecontrols);
	} else {
		galeriecontrols.innerHTML =  info + dia + nr + vor;
		document.getElementById("footer").appendChild(galeriecontrols);
	}
}
	
function createSliderHtml(){
	var slidemenue = document.getElementById("thumbs").parentNode.parentNode.removeChild(document.getElementById("thumbs").parentNode);
	slidemenue.id = "slidemenue";
	var div1 = document.createElement("div");
	var div2 = div1.cloneNode(true);
	div1.id = "scrolllinks";
	div2.id = "scrollrechts";
	slidemenue.appendChild(div1);
	slidemenue.appendChild(div2);
	document.getElementById("ContentSpalte").appendChild(slidemenue);
	}

function removeUnwanted(){
	document.getElementsByTagName("h1")[0].className = "ausgeblendet";
	}

function createHtml(){
  createDasBildHtml();
  createGalerieControlsHtml();
  createSliderHtml();
  removeUnwanted();
	}


// ordnet den Thumbnails per ihrem href eine Onclick-Bildanzeigefunktion zu
// und setzt die anderen Vorbereitungen in Gang
function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("thumbs")) return false;
  createHtml();
  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() {
      stopDiashow();
      return showPic(this.id);
    };
  }
  bildanzahlbestimmen();
  maxbestimmen();
  prepareGalerieControls();
  showPic(0);
  startDiashow();
}

//window.onload =prepareGallery;
addLoadEvent(prepareGallery);
//addLoadEvent(gRel.prepareHovers);