/**
 * @name jquery.lightbox.js
 * 
 * Das Plugin erweitert jQuery um ein lightbox-Objekt. Nachdem das Objekt mit Hilfe der init()-Methode initialisiert wurde,
 * werden alle Links, die auf ein Bild verweisen zu lightbox-Links. 
 * 
 * @example
 * 		$.fn.lightbox.init();
 * 
 * @author Benjamin Kammerl
 * 
 * @vorgang #35560
 */

(function($) {
	$.fn.lightbox = {
		//-----------------------------------------------------------------------------------------------------------------------
		/**
		 * In diesen Attributen werden die jQuery-Element-Objekte aller Lightbox-Elemente gespeichert. Sind bis zum Aufruf der
		 * init()-Methode leer
		 */
		
		div: null,
		overlay: null,
		info: null,
		status: null,
		image: null,
		prevButton: null,
		nextButton: null,
		closeButton: null,
		
		
		//-----------------------------------------------------------------------------------------------------------------------
		/**
		 * In diesen Attributen werden die jQuery-Element-Objekte allter temporären Lightbox-Elemente gespeichert.
		 */
		
		tempOverflow: null,
		tempDiv: null,
		tempImage: null,
		tempInfo: null,
		
		
		//-----------------------------------------------------------------------------------------------------------------------
		/**
 		 * Die Position und Proportionen der Lightbox
 		 */
		
		height: 0,
		width: 0,
		top: 0,
		left: 0,
		
		
		//-----------------------------------------------------------------------------------------------------------------------
		/**
 		 * (int) Das Active-Attribut beinhaltet die ID des Links, dessen Bild aktuell in der Lightbox dargestellt wird dient
 		 * zum identifizieren des ersten und letzten Bildes.
 		 */
		
		active: 0,
		
		
		//-----------------------------------------------------------------------------------------------------------------------
		/**
 		 * (bol) Repräsentiert den Status der Box. true = Box ist gerade aktiv/sichtbar | false = Box ist versteckt
 		 */
		
		visible: false,
		
		
		//-----------------------------------------------------------------------------------------------------------------------
		/**
 		 * (bol) Repräsentiert den Status des Objekts. true = Es wird gerade Code ausgeführt | false = Das Objekt ist befindet
 		 * sich gerade im Leerlauf.
 		 * Diese Unterscheidung ist notwendig um zu verhindern, dass die Lightbox seltsame Ding macht, wenn ein Benutzer zweimal
 		 * auf eine der Blättern-Buttons klickt.
 		 */
		
		running: false,
		
		
		//-----------------------------------------------------------------------------------------------------------------------
		/**
 		 * (int) Dieses Attribut beinhaltet die Anzahl der gefundenen Links auf der Seite. Dies dient zum identifizieren des
 		 * letzten Bildes.
 		 */
		
		max: 0,
		
		
		
		
		
		//-----------------------------------------------------------------------------------------------------------------------
		/**
 		 * @name init
 		 * 
 		 * Initialisiert das Lightbox-Objekt. Es wird nach allen A-Tags gesucht, die ein Bild beinhalten.
		 * Wenn das A-Tag auf ein Bild verweist, wird der Link zum Lightbox-Link abgeändert und das Bild mit einer Lupe
		 * (<span class="lupe">) ausgestattet. 
		 * 
		 * Desweiteren werden die beiden div-Tags erzeugt, die von dem Plugin benögtigt werden.
 		 * 
 		 * @return (void)
 		 */
		
		init: function() {
			//-------------------------------------------------------------------------------------------------------------------
			// Die benötigten DOM-Elemente erzeugen und in den entsprechenden Attributen des Objekts ablegen
		
			var html = '';
			
			html += '<div id="lbOverlay" />';
			html += '<div id="lbDiv">';
			html += '	<div id="lbHoverNavLeft" class="lbHoverNav">&nbsp;</div>';
			html += '	<div id="lbHoverNavRight" class="lbHoverNav">&nbsp;</div>';
			html += '	<img id="lbImage" />';
			html += '	<div id="lbInfo" />';
			html += '	<a id="lbClose" href="#" onClick="$.fn.lightbox.close(); return false;">&nbsp;</a>';
			html += '	<span id="lbStatus">0/0</span>';
			html += '</div>';
			
			$('body').append(html);
			
			this.div     	 = $('#lbDiv');
			this.overlay 	 = $('#lbOverlay');
			this.closeButton = $('#lbClose');
			this.image		 = $('#lbImage');
			this.info		 = $('#lbInfo');
			this.status		 = $('#lbStatus');
			this.prevButton  = $('#lbHoverNavLeft');
			this.nextButton  = $('#lbHoverNavRight');
			
			
			//------------------------------------------------------------------------------------------------------------------
			// Das onClick-Event des Overlays setzen, sodass die Lightbox beim Klick auf das Overlay geschlossen wird
			
			this.overlay.click(function() {
				$.fn.lightbox.close();
			});
	
			
			//-------------------------------------------------------------------------------------------------------------------
			// Für die Blätter-Funktionalität ist es nötig jedes Element mit einer ID zu versehen. Dies wird über den className
			// realisiert. Die Klassen heißen einfach "lbCounter1", "lbCounter2", ...
			
			var counter = 0;
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Alle A-Tags selektieren und über die Ergebnis-Menge iterieren

			$('a:has(img)').each(function() {
				var link = $(this);
				
				
				//---------------------------------------------------------------------------------------------------------------
				// Prüfen ob ein href-Attribut vorhanden ist. Wenn das der Fall ist, prüfen ob der Link auf eine Bilddatei
				// verweist
				
				if (link.attr('href') &&
					link.attr('href').match(/(jpe?g|gif|png)(\?.*)?$/gi)) {
					
					//-----------------------------------------------------------------------------------------------------------
					// Den Counter erhöhen
					
					++counter; 
					
					
					//-----------------------------------------------------------------------------------------------------------
					// Das Bild schonmal in den Cache laden
					
					link.preload();
					
					
					//-----------------------------------------------------------------------------------------------------------
					// Handler für die Lightbox setzen (= Click-Event)
					
					link.click(function() {
						try {
							$.fn.lightbox.open(this);
							return false;
						}
						catch (e) {
							return false;	
						}
					});
					
					
					//-----------------------------------------------------------------------------------------------------------
					// Die Lupe in den Link einfügen, wenn ein Bild existiert
					
					if (link.children("img").length > 0) {
						link.append('<span class="lupe" />');
					}
					
					
					//-----------------------------------------------------------------------------------------------------------
					// lbCounter-Klasse setzen (= ID des Links)
					
					link.addClass('lbCounter' + counter);
					link.addClass('lightbox');
					
					
					//-----------------------------------------------------------------------------------------------------------
					// Klasse mehrabstand vom Bild auf den Link verschieben
					
					if (link.children("img").hasClass("mehrabstand")) {
						link.children("img").removeClass("mehrabstand");
						link.addClass("mehrabstand");
					}
					
					
					//-----------------------------------------------------------------------------------------------------------
					// Link wie Bild floaten 
										
					var temp = link.children("img").attr('class').split(' ');
					var floati = null;

					for (var i in temp) {
						if (temp[i].match(/float_*/)) {
							floati = temp[i];
						}
					}
					if (floati != null) {
						link.addClass(floati);
					}

					
					//-----------------------------------------------------------------------------------------------------------
					// Workaround für IE!
					
					if ($.browser.msie) {
						link.hide();
						link.fadeIn(1);
					}
				}
			});
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Nach dem Iterieren über die A-Tags soll die Anzahl der gefundenen Lightbox-relevanten Bilder in dem Attribut max
			// gespeichert werden.
			
			this.max = counter;
		},
		
		
		//-----------------------------------------------------------------------------------------------------------------------			
		/**
		 * @name open
		 * 
		 * Öffnet die Lightbox nach dem Klick auf einen Lightbox-Link.
		 * 
		 * @param link (obj) Der Link als natives JS-HTML-Element-Objekt 
		 * 
		 * @return (void)
		 */
		
		open: function(link) {
			//-------------------------------------------------------------------------------------------------------------------
			// Dem Rest der Welt klar machen, dass das Objekt beschäftigt ist
			
			this.running = true;
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Um besseren Zugriff auf den Link und das Bild zu haben, wird der Link in ein jQuery-Objekt gepackt
			
			link = $(link);
			
			
			//------------------------------------------------------------------------------------------------------------------
			// Das alt-Attribut des Bildes auslesen, wenn vorhanden
			
			var pic = link.children("img");
			var alt = '';
			
			if (pic.length > 0) {
				alt = pic.attr('alt');
			} else {
				alt = '';
			}
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Ermitteln der Bild-ID und setzen des internen Status-Flags
			
			var temp = link.attr('class').split(' ');
			var active = 0;
			
			for (var i in temp) {
				if (temp[i].match(/lbCounter[0-9]*/)) {
					active = Number(temp[i].replace(/lbCounter/, ''));
				}
			}
			
			this.active = active;
			
			//-------------------------------------------------------------------------------------------------------------------
			// Den Overlay einblenden und das Objekt anweisen, die Konfigurations-Routine für die Box durchzuführen


			this.showOverlay();
			this.configure(link.attr('href'), alt);
		},

		
		//-----------------------------------------------------------------------------------------------------------------------			
		/**
		 * @name change
		 * 
		 * Ändert den Inhalt und die proportionen der Lightbox ohne diese auszublenden.
		 * 
		 * @param active (int) ID des neuen Links, dessen Bild als Lightbox angezeigt werden soll 
		 * 
		 * @return (void)
		 */
		
		change: function(active) {
			//-------------------------------------------------------------------------------------------------------------------
			// Um besseren Zugriff auf den Link und das Bild zu haben, wird der Link in ein jQuery-Objekt gepackt
			
			var link = $('.lbCounter' + active);
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Die Navigations-Pfeile ausblenden und die Events entfernen
			
			if (navigator.userAgent.indexOf('MSIE') == -1) {
				$.fn.lightbox.hideNav($.fn.lightbox.lbPrev);
				$.fn.lightbox.hideNav($.fn.lightbox.lbNext);
				
				this.lbPrev.mousemove(function() {
					return false;
				});
				
				this.lbPrev.mouseout(function() {
					return false;
				});
				
				this.lbNext.mousemove(function() {
					return false;
				});
				
				this.lbNext.mouseout(function() {
					return false;
				});
			}
			
			//------------------------------------------------------------------------------------------------------------------
			// Das alt-Attribut des Bildes auslesen, wenn vorhanden
			
			var pic = link.children("img");
			var alt = '';
			
			if (pic.length > 0) {
				alt = pic.attr('alt');
			} else {
				alt = '';
			}
			
			this.active = active;
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Das Objekt anweisen, die Konfigurations-Routine für die Box durchzuführen
			
			this.configure(link.attr('href'), alt);
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Nach dem der Browser fertig ist, mit dem Rendern der Änderungen ausgelöst durch this.configure(), kann die Box
			// eingeblendet werden
			
			setTimeout(function() {
				$.fn.lightbox.show();
			}, 500);
		},

		
		//-----------------------------------------------------------------------------------------------------------------------			
		/**
		 * @name close 
		 * 
		 * Schließt die lightbox 
		 * 
		 * @return (void)
		 */
		
		close: function() {
			//-------------------------------------------------------------------------------------------------------------------
			// Workaround um this in der anonymen Funktion sichtbar zu machen
			
			that = this;
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Box ausblenden und anschließend das Overlay ausblenden
			
			this.div.fadeOut('fast', function() {
				that.overlay.fadeTo('fast', 0, function() {
					that.overlay.css('display', 'none');
				});
			});
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Die Box ist weg, das heißt visible = false. Und active = 0 da damit keine ID mehr aktiv ist
			
			this.visible = false;
			this.active = 0;
		},
		
		
		
		//-----------------------------------------------------------------------------------------------------------------------
		/**
		 * @name configure
		 * 
		 * Configure erzeugt temporär eine zweite - unsichtbare - Lightbox um die Ziel-Position und -Proportion ermitteln zu
		 * können ohne dass der User zusehen muss wie sich die wunderschöne Lightbox beim Rendern vor ihm verformt und flackert.
		 * Nachdem die Daten ausgewertet und berechnet wurden, werden die aktuellen Inhalte der Original-Lightbox unsichtbar
		 * gemacht und die neuen Inhalte in die Box geschrieben. Die temporäre Box wird anschließend wieder aus dem DOM-Tree
		 * gelöscht. 
		 * 
		 * @param src (str) Pfad zum neuen Bild
		 * @param alt (str) Info-Text des neuen Bildes
		 * 
		 * @return (void)
		 */
		
		configure: function(src, alt) {
			//-------------------------------------------------------------------------------------------------------------------
			// Zuerst wird die temporäre Box erzeugt. Diese hat bereits aus der lightbox.css die CSS-Eigenschaften
			// 		- display: none;
			// 		- opacity: 0;
			// Sodass sie nicht sichtbar sind.
			
			var html = '';
			
			html += '<div id="lbTempOverflow">';
			html += '	<div id="lbTempDiv">';
			html += '		<img id="lbTempImage" src="' + src + '" />';
			html += '		<div id="lbTempInfo">' + alt + '</div>';
			html += '		<a id="lbTempClose" href="#" onClick="return false;">&nbsp;</a>';
			html += '	</div>';
			html += '</div>';
				
			$('body').append(html);
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Um einen einfachen Zugriff auf die Elemente zu ermöglichen, werden die jQuery-Element-Objekte in den
			// entsprechenden Attributen des Objekts gespeichert
			
			this.tempOverflow = $('#lbTempOverflow');
			this.tempDiv = $('#lbTempDiv');
			this.tempImage = $('#lbTempImage');
			this.tempInfo = $('#lbTempInfo');
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Da die Elemente über keine Proportionen verfügen, wenn "display" auf "none" gesetzt ist, müssen sie auf
			// "display: block;" geändert werden. Sichtbar sind sie trotzdem nicht, da die Deckkraft (Opacity) auf 0 steht.
			
			this.tempDiv.css('display', 'block');
			this.tempImage.css('display', 'block');
			this.tempInfo.css('display', 'block');
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Hier wird die neue Breite der Box gesetzt
			
			this.tempDiv.css('width', this.tempImage.width());
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Die Anweisung
			// 		this.tempDiv.css('width', this.tempImage.width());
			// benötigt etwas Zeit, da der Browser das Element erst Rendern muss, daher wird hier 300 ms gewartet
			// Anschließend werden die Daten berechnet und in die Original-Box geschrieben
			
			setTimeout(function() {
				$.fn.lightbox.finishConfig(alt, src);
			}, 500);
		},
		
		
		finishConfig: function(alt, src) {
			if (this.tempImage.height() > 0 && this.tempImage.width() > 0) {
				//-------------------------------------------------------------------------------------------------------------------
				// Workaround um this in der anonymen Funktion sichtbar zu machen 
				
				var that = this;
				
				setTimeout(function() {
					//---------------------------------------------------------------------------------------------------------------
					// Das Element dürfte nun gerendert sein, also kann damit begonnen werden die Position und die Proportionen aus-
					// gelesen und berechnet
					
					that.height = that.tempImage.height() + that.tempInfo.height() + 16;
					that.width = that.tempImage.width();
					that.top = Math.round($(window).scrollTop() + (($(window).height() - that.height) / 2));
					that.left = Math.round((($(window).width() - that.width) / 2));
					
					
					//---------------------------------------------------------------------------------------------------------------
					// Sicherstellen dass das Bild, der Info-Text, der Status-Text und der Schließen-Button der Original-Box
					// versteckt sind
					
					that.image.css('opacity', 0);
					that.info.css('opacity', 0);
					that.status.css('opacity', 0);
					that.closeButton.css('opacity', 0);
					
					
					//---------------------------------------------------------------------------------------------------------------
					// SRC-Attribut des Bildes setzen
					
					that.image.attr('src', src);
					
					
					//---------------------------------------------------------------------------------------------------------------
					// Bevor der Info-Text gesetzt wird wird die aktuelle Höhe der Box noch fixiert, damit die Box nicht anfängt
					// zu springen. Da das im IE leider nicht so gut klappt (die Höhe ist 0), wird das im IE nicht gemacht.
					
					if (that.info.height() == 0) {
						that.info.css('height', 'auto');
					} else {
						that.info.css('height', that.info.height() + 'px');
					}
					
					that.info.html(alt);
					that.status.html(that.active + '/' + that.max);
					
					
					//---------------------------------------------------------------------------------------------------------------
					// Der Info-Text soll immer genauso breit sein, wie das Bild
					
					that.info.css('width', that.tempImage.width());
					
					
					//---------------------------------------------------------------------------------------------------------------
					// Das ist nötig, da der Button per "position: absolute" am unteren Rand der Box positioniert ist. Dieser Bereich
					// muss mit einem Padding befüllt werden. Da die Box sich nicht am Info-Div sondern am Bild orientiert, ist es
					// nötig, das Padding anhand der Größte des Info-Divs zu berechnen.
					
					that.div.css('padding-bottom', (15 + (that.tempInfo.height() || 15)) + 'px');
					
					
					//---------------------------------------------------------------------------------------------------------------
					// Die temporären Elemente löschen
					
					that.tempOverflow.remove();
					that.tempDiv.remove();
					that.tempImage.remove();
					that.tempInfo.remove();
					
					that.show();
				}, 100);
			} else {
				setTimeout(function() {
					$.fn.lightbox.finishConfig(alt, src);
				}, 300);
			}
		},
		
		
		//-----------------------------------------------------------------------------------------------------------------------
		/**
		 * @name showOverlay
		 * 
		 * Die Funktion blendet das Overlay ein und initialisiert den Handler für das onscroll-Event, damit sich das Overlay
		 * immer im Sichtfeld befindet.
		 * 
		 * @return (void)
		 */
		
		showOverlay: function() {
			//-------------------------------------------------------------------------------------------------------------------
			// Höhe und Abstand nach oben festlegen

			this.overlay.css('height', $(window).height() + 'px');
			this.overlay.css('top', $(window).scrollTop() + 'px');
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Die Box anzeigen
			
			this.overlay.css('display', 'block');
			this.overlay.fadeTo('slow', 0.8);
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Das window.onscroll-Event mit einer Funktion belegen, die Overlay sowie lightbox beim Scrollen mitbewegt
			
			window.onscroll = function() {
				if (typeof(window.pageYOffset) == 'number') {
					$.fn.lightbox.overlay.css('top', window.pageYOffset + 'px');
					$.fn.lightbox.div.css('top',
											Math.round(window.pageYOffset +
													   (($(window).height() - $.fn.lightbox.div.height()) / 2)) + 'px');
				} else {
					$.fn.lightbox.overlay.css('top', $(window).scrollTop() + 'px');
					$.fn.lightbox.div.css('top',
											Math.round($(window).scrollTop() +
													   (($(window).height() - $.fn.lightbox.div.height()) / 2)) + 'px');
				}
			}
		},

		
		opacityInheritingBrowser: function() {
			return !(
			($.browser.mozilla && (
			$.browser.version.match(/^1\.[^9]/)
			)) ||
			($.browser.ie)
			);
			},
		
		
		//-----------------------------------------------------------------------------------------------------------------------
		/**
		 * @name show
		 * 
		 * Die Methode blendet die Lightbox ein
		 * 
		 * @return (void)
		 */
		
		show: function() {
			//-------------------------------------------------------------------------------------------------------------------
			// Wenn die Box noch nicht offen ist, wird sie vor dem Einblenden im Sichtfeld zentriert und auf 2 * 2 Pixel resized
			// Damit wird verhindert, dass die Box über den Bildschirm fliegt
			
			if (this.visible == false) {
				this.visible = true;
				
				this.div.css('width', 2 + 'px');
				this.div.css('height', 2 + 'px');
				this.div.css('top', Math.round($(window).scrollTop() + (($(window).height() - 2) / 2)) + 'px');
				this.div.css('left', Math.round((($(window).width() - 2) / 2)) + 'px');

				if (this.opacityInheritingBrowser()) {
					this.div.css('opacity','1');
				}
			}
			
			
			//-------------------------------------------------------------------------------------------------------------------
			// Lightbox einblenden und zeitgleich den Info-Div resizen und ebenfalls einblenden. Anschließend wird die Blätter
			// -Navigation initialisiert (initNav())
			
			var that = this;
			
			this.div.animate({
				width: this.width + 'px',
				left: this.left + 'px'
			}, 500, function() {
				that.div.animate({
					height: that.height + 'px',
					top: that.top + 'px'
				}, 500, function() {
					that.image.animate({
						opacity: 1
					}, 100);
					
					that.info.animate({
						opacity: 1
					}, 100);
					
					that.status.animate({
						opacity: 1
					}, 100);
					
					that.closeButton.animate({
						opacity: 1
					}, 100);
				});
			});
			
			this.div.fadeIn('slow', (function() {
				this.initNav();
			}).call(this));
		},

		
		//-----------------------------------------------------------------------------------------------------------------------			
		/**
		 * @name next 
		 * 
		 * Zum nächsten Bild blättern
		 * 
		 * @return (void)
		 */
		
		next: function() {			
			//-------------------------------------------------------------------------------------------------------------------
			// Es soll nur etwas geschehen, wenn das Objekt nicht beschäftigt ist
			
			if (this.running == false) {
				this.running = true;
				
				this.change(this.active + 1);
			} else {
				return false;
			}
		},

		
		//-----------------------------------------------------------------------------------------------------------------------			
		/**
		 * @name prev 
		 * 
		 * Zum vorherigen Bild blättern
		 * 
		 * @return (void)
		 */
		
		prev: function() {
			//-------------------------------------------------------------------------------------------------------------------
			// Es soll nur etwas geschehen, wenn das Objekt nicht beschäftigt ist
			if (this.running == false) {
				this.running = true;
				this.change(this.active - 1);
			} else {
				return false;
			}
		},
		
		
		//-----------------------------------------------------------------------------------------------------------------------
		/**
		 * @name initNav
		 * 
		 * Initialisiert, positioniert und aktiviert bzw. deaktiviert die Blätter-Navigation.
		 * 
		 * @return (void)
		 */
		
		initNav: function() {
			//-------------------------------------------------------------------------------------------------------------------
			// Der IE bekommt - dank seiner Render-Bugs - eine andere Routine
			
			if (navigator.userAgent.indexOf('MSIE') > -1) {
				if (this.active > 1) {
					this.status.html('<a href="#" onclick="$.fn.lightbox.prev(); return false;">&lt;&lt;</a> ' +
									 this.status.html());
				}
					
				
				if (this.active < this.max) {
					this.status.html(this.status.html() +
					 ' <a href="#" onclick="$.fn.lightbox.next(); return false;">&gt;&gt;</a>');	
				}
			} else {
				//-------------------------------------------------------------------------------------------------------------------
				// CSS-Stile der Blätter-Navi zuweisen
				
				navDivs = $('.lbHoverNav');
				
				this.lbPrev = $('#lbHoverNavLeft');
				this.lbNext = $('#lbHoverNavRight');
				
				navDivs.css('height', this.image.height() + 'px');
				navDivs.css('width', Math.round(this.image.width() / 2) + 'px');
				
				this.lbNext.css('right', '0px');
				
				
				//-------------------------------------------------------------------------------------------------------------------
				// Prüfen welche Elemente angezeigt werden sollen und entsprechend einblenden. Bei dieser Gelegenheit wird auch
				// das Click-Event gesetzt
				
				if (this.active > 1) {
					this.prevButton.css('display', 'block');
					
					this.prevButton.click(function() {
						$.fn.lightbox.prev();
					});
				} else {
					this.prevButton.css('display', 'none');
					
					this.prevButton.click(function() {
						
					});
				}
					
				
				if (this.active < this.max) {
					this.nextButton.css('display', 'block');
	
					this.nextButton.click(function() {
						$.fn.lightbox.next();
					});
				} else {
					this.nextButton.css('display', 'none');
					
					this.nextButton.click(function() {
						
					});
				}
				
				
				//-------------------------------------------------------------------------------------------------------------------
				// Events für die Hover-Effekte setzen
				
				this.lbPrev.mousemove(function() {
					$.fn.lightbox.showNav($.fn.lightbox.lbPrev);
				});
				
				this.lbPrev.mouseout(function() {
					$.fn.lightbox.hideNav($.fn.lightbox.lbPrev);
				});
				
				this.lbNext.mousemove(function() {
					$.fn.lightbox.showNav($.fn.lightbox.lbNext);
				});
				
				this.lbNext.mouseout(function() {
					$.fn.lightbox.hideNav($.fn.lightbox.lbNext);
				});	
			}
			
			//-------------------------------------------------------------------------------------------------------------------
			// Das das Initialisieren der Blätter-Navi der letzte Programmpunkt ist, kann das running-Attribut hier auf false
			// gesetzt werden
			
			this.running = false;
		},
		
		
		//-----------------------------------------------------------------------------------------------------------------------			
		/**
		 * @name showNav 
		 * 
		 * Blendet eine der Navi-Divs ein. Übergeben wird das entsprechende jQuery-Element-Object 
		 * 
		 * @param element (obj) Das jQuery-Element-Object des auszublendenden Divs
		 * 
		 * @return (void)
		 */
		
		showNav: function(element) {
			element.addClass('visible');
		},

		
		//-----------------------------------------------------------------------------------------------------------------------			
		/**
		 * @name hideNav 
		 * 
		 * Blendet eine der Navi-Divs aus. Übergeben wird das entsprechende jQuery-Element-Object 
		 * 
		 * @param element (obj) Das jQuery-Element-Object des einzublendenen Navi-Divs
		 * 
		 * @return (void)
		 */
		
		hideNav: function(element) {
			element.removeClass('visible');
		}
	}	
})(jQuery);