/**
 * Allgemeine Funktionalität
 * für www.stadthalle-hockenheim.de
 *
 * @author			René Kubach, www.exedis.de
 * @copyright		exedis, http://www.exedis.de
 *
 * © exedis – Internet Konzeption, Gestaltung, Realisation
 * http://www.exedis.de
 */

$(document).ready(function(){

	// Externe Links
	$("a.extern").each(function(){
		$(this).attr({
			target:	"_blank",
			title:	"Externer Link [neues Fenster]: "+ this.title
		});
	});

	// Navigation
	Navigation.laden();

	// "Kuchen"
	if ( $(Kuchen.dom.selObj).length > 0 ) {
		Kuchen.laden();
	}

	// Galerien
	if ( $(Galerien.galElem).length > 0 ) {
		Galerien.laden();
	}

});

/* ---------------------------------------------------------------------------------- */

function getDimensionen () {
	var xScroll, yScroll;
	if (window.innerHeight && window.scrollMaxY) {
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	var windowWidth, windowHeight;
	if (self.innerHeight) { // all except Explorer
		if(document.documentElement.clientWidth){
			windowWidth = document.documentElement.clientWidth;
		} else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else {
		pageHeight = yScroll;
	}
	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){
		pageWidth = xScroll;
	} else {
		pageWidth = windowWidth;
	}
	return {
		breite: pageWidth,
		hoehe: pageHeight,
		fensterBreite: windowWidth,
		fensterHoehe: windowHeight
	};
}

function getScroll () {
	var xScroll, yScroll;
	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
		xScroll = self.pageXOffset;
	} else if (document.documentElement && document.documentElement.scrollTop) {     // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
		xScroll = document.documentElement.scrollLeft;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
		xScroll = document.body.scrollLeft;
	}
	return {
		links: xScroll,
		oben: yScroll
	};
}

/* ---------------------------------------------------------------------------------- */

/**
 * Klasse fürs Laden und Tauschen von Bildern
 *
 * @param String src Pfad des neuen Bildes
 * @param Function callback Funktion, die nach dem Laden ausgeführt werden soll
 * @param Function warten Funktion, die während der Ladezeit ausgeführt werden soll
 */
function ImagePreloader ( src, callback, warten, fehler ) {
	this.img		= new Image();
	this.src		= src;
	this.callback	= (typeof callback == "function") ? callback : new Function();
	this.warten		= (typeof warten == "function") ? warten : new Function();
	this.fehler		= (typeof fehler == "function") ? fehler : new Function();
}

ImagePreloader.prototype = {
	start: function () {
		this.img.src = this.src;
		if ( this.img.complete && this.img.height ) {	// Bei geladenen Dateien sicherstellen, dass kein Fehler vorliegt
														// Auch nicht vorhandene Dateien gelten als geladen, wenn schon ein Fehler zurückkam
			this.callback();
		} else {
			this.warten();
			this.img.onload = this.callback;
			this.img.onabort = this.fehler;
			this.img.onerror = this.fehler;
		}
	}
};

/* ---------------------------------------------------------------------------------- */

/**
 * Ein Objekt zur Steuerung der Hauptnavigation
 */
Navigation = {

	liste:				new Array(),
	verzoegerung:		200,			// Verzögerung vor dem Schließen eines Layers
	animationDauer:		250,			// Dauer der Animation in Millisekunden

	laden: function () {
		$("#sNav li.ebene-1").each(function(nr){
			var obj 		= $(this);
			var layer 		= obj.find("div.ebene-2");
			Navigation.liste.push({
				obj:		obj,
				nr:			nr,
				layer:		layer,
				hatLayer:	(layer.length > 0),
				offen:		false,
				fokus:		false,
				timer:		false
			});
			obj.find("a").bind("mouseenter",function(){
				Navigation.fokus( nr );
			}).bind("mouseleave",function(){
				Navigation.defokus( nr );
			});
		});
	},

	// Aktion, wenn die Maus über einen Layer-Link kommt
	fokus: function ( nr ) {
		var s = this.liste[nr];
		s.fokus = true;
		window.clearTimeout(s.timer);
		if ( !s.offen && s.hatLayer ) {
			this.oeffne(nr);
		}
	},

	// Aktion, wenn die Maus von den Layer-Links weggeht
	defokus: function ( nr ) {
		var s = this.liste[nr];
		s.fokus = false;
		if ( s.offen ) {
			s.timer = window.setTimeout("Navigation.schliesse("+nr+");", this.verzoegerung );
		}
	},

	// Öffnen eines Layers
	oeffne: function ( nr ) {
		var s = this.liste[nr];
		s.obj.addClass("offen");
		s.layer.slideDown(this.animationDauer);
		s.offen = true;
	},

	// Schließen eines Layers
	schliesse: function ( nr ) {
		var s = this.liste[nr];
		s.obj.removeClass("offen");
		s.layer.slideUp(this.animationDauer);
		s.offen = false;
	}

};

/* ---------------------------------------------------------------------------------- */

/**
 * Ein Objekt zur Steuerung der Kuchen
 * Die Kuchen-Steuerung erstellt die Kuchen aus dem HTML-Code und teilt ihnen Änderungen der URL mit
 */
Kuchen = {

	dom: {
		selObj:				'.kuchen',
		selStueck:			'.blatt',
		stueckIdPreafix:	'-blatt',
		selLink:			'.kuchenNav .link',
		markClass:			'markiert',
		selTitelbild:		'#titelbild',
		selBlattTitelbild:	'a.blatt-titelbild',
		titelbildClass:		'mitTitelbild'
	},
	kontrollDelay:		250,

	container:			null,
	stuecke:			{},
	aktuell:			'',
	defaultStueck:		'',
	links:				null,
	hatTitelbild:		false,
	bereit:				false,

	laden: function () {
		this.container = $(this.dom.selObj);
		if (this.container.length > 0) {
			// Stücke laden
			this.links = this.container.find(this.dom.selLink);
			this.container.find(this.dom.selStueck).each(function(nr){
				Kuchen.add(this,nr);
			});
			this.aktuell = this.get(this.anker()) ? this.anker() : this.defaultStueck;
			if ( this.get(this.anker()) ) {
				window.scrollTo(0,0);	// Bei Aufruf mit einem Anker zum Seitenanfang zurückspringen
			}
			// Titelbild?
			if ( this.container.hasClass(this.dom.titelbildClass) && $(this.dom.selTitelbild).length > 0 ) {
				var titelbild = true;
				for ( var e in this.stuecke ) {
					if (!this.get(e).titelbild) {
						titelbild = false;
						if ( $(this.dom.selTitelbild+' img').length == 0 && $(this.dom.selBlattTitelbild).length > 0 ) {
							$(this.dom.selTitelbild).append('<img src="'+$(this.dom.selBlattTitelbild).eq(0).attr('href')+'" alt="[Titelbild]" />');
						}
						break;
					}
				}
				this.hatTitelbild = titelbild;
			}
			// Verhalten laden
			this.ladeVerhalten(KuchenVerhalten);
			if ( this.container.attr('id')=='piano' ) {
				this.ladeVerhalten(KuchenVerhaltenPiano);
			} else if ( this.container.hasClass('slideKuchen') ) {
				this.ladeVerhalten(KuchenVerhaltenSlider);
			}
			// Richtiges Stück anzeigen
			this.aniNavigation(this.aktuell);
			this.aniStueckLaden();
			if ( this.hatTitelbild ) {
				this.aniTitelbildLaden();
			}
			// Kontrolle der URL starten
			window.setInterval( 'Kuchen.kontrolle();', this.kontrollDelay );
			this.aktionEnde();
			// Ggf. Titelbilder vorladen
			if ( this.hatTitelbild ) {
				for ( var e in this.stuecke ) {
					this.get(e).img = new Image();
					this.get(e).img.src = this.get(e).titelbild;
				}
			}
		}
	},

	ladeVerhalten: function ( neuesVerhalten ) {
		for ( var e in neuesVerhalten ) {
			this[e] = neuesVerhalten[e];
		}
	},

	add: function ( domObj, nr ) {
		var obj			= $(domObj);
		var id			= domObj.id.substr(this.dom.stueckIdPreafix.length);
		var titel		= this.links.eq(nr).text();
		var titelbild	= obj.find(this.dom.selBlattTitelbild).length ? obj.find(this.dom.selBlattTitelbild).attr('href') : false;
		this.stuecke[id] = {
			id:			id,
			obj:		obj,
			nr:			nr,
			titel:		titel,
			titelbild:	titelbild,
			img:		null
		};
		if ( !this.defaultStueck ) {
			this.defaultStueck = id;
		}
		$('a[name='+id+']').remove();		// Ggf. vorhandene Anker entfernen
	},

	/**
	 * Gibt ein Stück zurück
	 */
	get: function ( id ) {
		return (this.stuecke[id]) ? this.stuecke[id] : false;
	},

	/**
	 * Liest den aktuellen Anker (ohne '#') aus der URL
	 */
	anker: function () {
		return self.location.hash ? self.location.hash.substr(1) : '';
	},

	/**
	 * Funktion zur regelmäßigen Kontrolle der URL auf geänderte Anker
	 */
	kontrolle: function () {
		var anker = this.anker() || this.defaultStueck;
		if (anker != this.aktuell && this.get(anker)) {
			this.tauschen(anker);
		}
	},

	tauschen: function ( id ) {
		if ( this.bereit ) {
			this.aniNavigation( id );
			this.aniStueckeTauschen( this.aktuell, id, this.aktionEnde );
			if (this.hatTitelbild) {
				this.aniTitelbildTauschen(id);
			}
			this.aktuell = id;
		}
	},

	aktionAnfang: function () {
		this.bereit = false;
	},

	aktionEnde: function () {
		this.bereit = true;
	}

};

KuchenVerhalten = {

	aniNavigation: function ( id ) {
		this.links.removeClass(this.dom.markClass).eq(this.get(id).nr).addClass(this.dom.markClass);
	},

	aniStueckLaden: function () {
		for ( var e in this.stuecke ) {
			if ( e != this.aktuell ) {
				this.get(e).obj.hide(0);
			}
		}
	},

	aniTitelbildLaden: function () {
		$(this.dom.selTitelbild)
			.find('img').remove().end()
			.append('<img src="'+ this.get(this.aktuell).titelbild +'" alt="'+this.get(this.aktuell).titel+'" />');
	},

	aniStueckeTauschen: function ( alt, neu, callback ) {
		this.get(alt).obj.hide(0);
		this.get(neu).obj.show(0);
		callback();
	},

	aniTitelbildTauschen: function ( neu ) {
		$(this.dom.selTitelbild+' img').attr('src',this.get(neu).img.src );
	}

};

KuchenVerhaltenPiano = {

	aniStueckeTauschen: function ( alt, neu, callback ) {
		var thisObj		= this;
		var altObj 		= this.get(alt).obj;
		var neuObj		= this.get(neu).obj;
		altObj.fadeOut(200,function(){
			neuObj.fadeIn(200,function(){
				if ( neuObj.get(0).style.removeAttribute ) { // Rendering-Fehler im IE entfernen
					neuObj.get(0).style.removeAttribute("filter",false);
				}
				callback();
			});
		});
	},

	aniTitelbildTauschen: function ( neu ) {
		var thisObj 	= this;
		$('#titelbild img').addClass('loeschmich').fadeOut(500,function(){
			$('#titelbild img.loeschmich').remove();
		}).parent().prepend('<img src="'+thisObj.get(neu).img.src+'" alt="'+this.get(neu).titel+'" />');
	}

};

KuchenVerhaltenSlider = {

	aniStueckeTauschen: function ( alt, neu, callback ) {
		var thisObj 	= this;
		this.get(alt).obj.find('.nichtAnimiert').hide(0).end().slideUp(450);
		this.get(neu).obj.find('.nichtAnimiert').hide(0).end().slideDown(550,function(){
			thisObj.get(alt).obj.find('.nichtAnimiert').show(0);
			thisObj.get(neu).obj.find('.nichtAnimiert').show(0);
			$('iframe').each(function(){
				this.src = this.src+'&amp;jetzt='+Date.parse();
			});
			callback();
		});
	}

};

/* ---------------------------------------------------------------------------------- */

/**
 * Steuerung für Galerien
 */
Galerien = {

	geladen:			false,				// Gibt an, ob die Funktionalität für Galerien geladen wurde
	geoeffnet:			false,				// Gibt an, ob eine Galerie geöffnet ist
	aktionLaeuft:		false,				// Gibt an, ob gerade irgendeine Aktion läuft
	galerieNr:			-1,					// Bezeichner der aktuell geöffneten Galerie
	bildNr:				-1,					// Bezeichner des aktuell angezeigten Bildes
	liste:				new Array(),
	naechstesImg:		null,

	// Konfiguration
	galerieElem:		'.galerie',
	bildElem:			'a.bild',
	bildElemVersteckt:	'a.bild.versteckt',

	/**
	 * Initialisierung
	 */
	laden: function () {
		$(this.galerieElem).each(function(galNr){
			var bilder =	new Array();
			$(this).find(Galerien.bildElem).each(function(bildNr){
				var img = $(this).find('img').get(0);
				bilder.push({
					nr: 			bildNr,
					titel:			img.alt,
					vorschau:		img.src,
					src:			this.href,
					alt:			img.alt,
					linkTitle:		this.title
				});
				$(this).click(function(){
					Galerien.oeffnen( galNr, bildNr );
					return false;
				});
			});
			var naechstes = bilder.length - ($(this).find(Galerien.bildElemVersteckt).length || 1);
			$(this).find('.titel').append('<div class="link" onclick="Galerien.oeffnen('+galNr+','+naechstes+');">weitere Bilder</div>');
			Galerien.liste.push({
				nr:			galNr,
				bilder:		bilder
			});
		});
		this.geladen = true;
	},

	/* ===== "Public" Funktionen ===== */

	oeffnen: function ( galNr, bildNr ) {
		if ( !this.aktionLaeuft && this.geladen && this.vorhanden(galNr,bildNr) && !this.geoeffnet ) {
			this.aktionLaeuft	= true;
			this.geoeffnet  	= true;
			this.galerieNr 		= galNr;
			this.bildNr 		= bildNr;
			this.abblenden( function () {
				if ( Galerien.geoeffnet ) {
					Galerien.tastaturNavigationAktivieren();
					Galerien.popup();
				}
			});
		}
	},

	schliessen: function () {
		this.geoeffnet 		= false;
		this.galerieNr 		= -1;
		this.bildNr  		= -1;
		this.aktionLaeuft	= true;
		Galerien.tastaturNavigationDeaktivieren();
		$('#popup').slideUp(200,function(){
			$('#popup').remove();
		});
		$('#abblende').fadeOut(500,function(){
			$('#abblende').remove();
			Galerien.aktionLaeuft = false;
		});
	},

	tauscheBild: function ( bildNr ) {
		if ( !this.aktionLaeuft && this.geladen && this.vorhanden(this.galerieNr,bildNr) && this.bildNr!=bildNr ) {
			this.aktionLaeuft	= true;
			this.bildNr 		= bildNr;
			this.zeigeBild();
		}
	},

	/**
	 * Zeigt das nächste Bild an
	 */
	weiter: function () {
		var nr = (this.bildNr==this.galerie().bilder.length-1) ? 0 : this.bildNr+1;
		this.tauscheBild( nr );
	},

	/**
	 * Zeigt das vorhergehende Bild an
	 */
	zurueck: function () {
		var nr = (this.bildNr==0) ? this.galerie().bilder.length-1 : this.bildNr-1;
		this.tauscheBild( nr );
	},

	/*  ===== "Private" Funktionen ===== */

	/**
	 * Gibt die aktuelle Galerie zurück
	 */
	galerie: function () {
		return this.liste[this.galerieNr];
	},

	/**
	 * Gibt das aktuelle Bild zurück
	 */
	bild: function () {
		return this.galerie().bilder[this.bildNr];
	},

	/**
	 * Prüft, ob eine Galerie und ein Bild existieren
	 */
	vorhanden: function ( galNr, bildNr ) {
		if ( this.liste[galNr] ) {
			if ( this.liste[galNr].bilder[bildNr] ) {
				return true;
			}
		}
		return false;
	},

	abblenden: function ( callback ) {
		callback = callback || function(){};
		var dimensionen = getDimensionen();
		$('body').append('<div id="abblende"></div>');
		$('#abblende').css({
			opacity:	0,
			width:		dimensionen.breite,
			height:		dimensionen.hoehe,
			position:	'fixed'
		}).fadeTo( 500, 0.5, callback ).click( function () {
			Galerien.schliessen();
		});
	},

	popup: function ( callback ) {
		callback = callback || function(){};
		var dimensionen = getDimensionen();
		var scroll = getScroll();
		// Leeres Popup erstellen
		var popupHtml = '<div id="popup" class="versteckt">\n'
			+	'<div class="titel"><div class="inhalt"></div></div>\n'
			+	'<div class="anzeige"><div class="bild"></div></div>\n'
			+	'<div class="navigation nurBild">'
			+	'<span class="blaettern zurueck" onclick="Galerien.zurueck();" title="ein Bild zurück"></span><span class="blaettern vor" onclick="Galerien.weiter();" title="ein Bild weiter"></span>'
			+	'<div class="galerie w'+this.galerie().bilder.length+'">\n';
		for ( var i=0; i<this.galerie().bilder.length; i++ ) {
			var bild = this.galerie().bilder[i];
			popupHtml += '<span class="link" title="'+bild.linkTitle+'" onclick="Galerien.tauscheBild('+bild.nr+')"><img src="'+bild.vorschau+'" alt="'+bild.alt+'" /></span>\n';
		}
		popupHtml += '<span class="ende"></span>\n</div></div>\n'
			+	'<span class="link schliessen" onclick="Galerien.schliessen();" title="schließen"><span class="no-css">[×]</span></span>'
			+	'</div>';
		$('body').append( popupHtml );
		$('#popup').css({ top: scroll.oben + 0.5*dimensionen.fensterHoehe }).slideDown(500);
		// Bild zeigen
		this.zeigeBild();
	},

	/**
	 * Lädt das aktuelle Bild und zeigt es an, sobald es geladen ist
	 */
	zeigeBild: function () {
		// Ggf. aktuelles Bild entfernen
		$('#popup .anzeige .bild img').remove();
		// Markierung neu setzen
		$('#popup .navigation .aktiv').removeClass('aktiv');
		$('#popup .navigation .link').eq(this.bildNr).addClass('aktiv');
		// Bild vorladen
		this.naechstesImg		= new Image();
		this.naechstesImg.src	= this.bild().src;
		if ( this.naechstesImg.complete ) {
			this.blendeBildEin();
		} else {
			$('#popup .titel .inhalt').text('Bitte warten …');
			$('#popup .anzeige .bild').append('<div id="popupWarten"></div>');
			this.naechstesImg.onload = function () {
				Galerien.blendeBildEin();
			}
		}
	},

	blendeBildEin: function () {
		$('#popup .titel .inhalt').text(this.bild().titel);
		$('#popupWarten').remove(0);
		$('#popup .anzeige .bild').append('<img src="'+this.naechstesImg.src+'" alt="'+this.bild().alt+'" class="versteckt" />')
			.find('img').fadeIn(500).click(function(){
				Galerien.weiter();
			});
		this.aktionLaeuft = false;
	},

	/*  ===== Tastaturnavigation ===== */

	tastaturNavigationAktivieren: function  () {
		$(document).bind('keydown', {}, Galerien.tastaturEingabe);
	},

	tastaturNavigationDeaktivieren: function  () {
		$(document).unbind('keydown');
	},

	tastaturEingabe: function ( e ) {
		var o = e.data.opts;
		var keycode = e.keyCode;
		var escapeKey = 27;
		var key = String.fromCharCode(keycode).toLowerCase();
		if ( keycode==escapeKey ) {
			Galerien.schliessen();
		} else if ( keycode==37 ) {
			Galerien.zurueck();
		} else if ( keycode==39 ) {
			Galerien.weiter();
		}
	}

};

/* ---------------------------------------------------------------------------------- */



/* ---------------------------------------------------------------------------------- */