////////////////////////////////////////////////////////////////////////////
///
/// Projekt: shop to date 6 Lightbox Plugin
/// Autor: Volker Sauer, (C) 2008
/// etor Softwareentwicklung e.K.
/// Bottroper Str. 19, 45899 Gelsenkirchen, sauer@etor.de
///
/// Datei: Lightbox API
/// Version: 1.05
/// Art: Javascript
/// Inhalt: Klasse Lightbox + Instanz
/// Beschreibung: Zeigt Bilder vergrößert an
/// Benötigt: Nichts
/// Letzte Änderung:
/// 05.03.2009 scrollheight Bug bei absoluten Elementen in Presot, Webkit, Gecko behoben
///
////////////////////////////////////////////////////////////////////////////

// Lightbox Version 1.05
var lightbox_img_title;
function lightbox() {

	// Dateinamen der Bilder
	var img_prev = "w2dlbprev.gif"; // Schaltfläche vorheriges
	var img_next = "w2dlbnext.gif"; // Schaltfläche nächstes
	var img_close = "w2dlbclose.gif"; // Schaltfläche schliessen
	var img_path = document.getElementById('lb_script').img_path;

	// Konfiguration Hintergrundebene
	var div_color = "black"; // Farbe der Hintergrundebene
	var opacity = 0.7; // Undurchsichtigkeit der Hintergrundebene

	// Konfiguration Bilder
	var border = 10; // Rahmenbreite um das Bild in Pixel
	var border_color = "#ffffff"; // Farbe des Rahmens
	var fade_img = 2; // 2 = sehr weiches Einblenden; 1 = weiches Einblenden; 0 = hartes Einblenden

	// Konfiguration Titel
	var font_family = "Tahoma"; // Schriftart des Titels
	var font_color = "#5a5a5a"; // Schriftfarbe des Titels
	var font_size = "12px"; // Schriftgröße des Titels mit Einheit
	var font_weight = "bold"; // Schriftgewicht des Titels

	var button_margin = Math.max(10, border);
	var lb_array = new Array();
	var img_height, img_width;
	var watch_time = false;
	var box_index, img_index;
	var lightning = false;

	// Browserweiche Version 1.3
	function lb_browser() {
		this.ie = false;
		this.gecko = false;
		this.opera = false;
		this.safari = false;
		this.iequirks = false;

		var agent = navigator.userAgent.toLowerCase();
		if (agent.indexOf('opera') != -1) {
			this.opera = true;
		} else if (agent.indexOf('msie') != -1) {
			this.ie = true;
			if (document.compatMode == 'BackCompat')
				this.iequirks = true;
		} else if (agent.indexOf('safari') != -1) {
			this.gecko = true;
		} else if (agent.indexOf('gecko') != -1 && agent.indexOf('khtml') == -1) {
			this.gecko = true;
		}
	}

	// Browser Instanz
	var ua = new lb_browser();

	// Matrixfeld übergeben und initialisieren
	this.init = function(lb_matrix) {
		box_index = lb_array.length;

		// Bilder initialisieren
		for (var i = 0; i < lb_matrix.length; i++) {
			var img = document.getElementById(lb_matrix[i]["id"]);
			img.style.cursor = 'pointer';
			img.name = 'box' + box_index;
			img.onclick = function() {
				lb.light(this.name, this.id)
			}
		}
		lb_array.push(lb_matrix);
	}

	// Lightbox einschalten
	this.light = function(bi, img_id) {
		lightning = true;
		box_index = bi;
		var body_obj = document.getElementsByTagName('body')[0];
		// Benötigtes HTML einfügen, falls nicht vorhanden
		if (!document.getElementById('lb_modal')) {

			// Abdunkelndes Div
			var obj = document.createElement("div");
			obj.id = "lb_modal";
			obj.style.display = "none";
			obj.style.position = "absolute";
			obj.style.top = "0";
			obj.style.left = "0";
			obj.style.width = "1px";
			obj.style.height = "1px";
			obj.style.zIndex = 1000;
			if (ua.ie)
				obj.style.filter = "Alpha(opacity=" + (opacity * 100) + ")";
			else
				obj.style.opacity = opacity;
			obj.style.backgroundColor = div_color;
			body_obj.insertBefore(obj, body_obj.firstChild);

			// Container für alles
			var container = document.createElement("div");
			container.id = "lb_container";
			container.style.display = "none";
			if (ua.ie)
				container.style.position = "absolute";
			else
				container.style.position = "fixed";
			container.style.zIndex = 1001;
			container.style.backgroundColor = border_color;
			container.style.overflow = "visible";
			body_obj.insertBefore(container, body_obj.firstChild);

			// Bild unterer Layer
			var obj = document.createElement("img");
			obj.id = "lb_img";
			obj.alt = "";
			obj.style.position = "absolute";
			if (ua.iequirks)
				obj.style.margin = border + "px";
			else
				obj.style.padding = border + "px";
			obj.style.zIndex = 1003;
			container.appendChild(obj);

			// Bild oberer Layer
			var obj = document.createElement("img");
			obj.id = "lb_imgnew";
			obj.alt = "";
			obj.style.position = "absolute";
			if (ua.iequirks)
				obj.style.margin = border + "px";
			else
				obj.style.padding = border + "px";
			obj.style.zIndex = 1004;
			obj.onload = function() {
				var title_obj = document.getElementById('lb_title');
				title_obj.innerHTML = lightbox_img_title;

				if (fade_img)
					lb.fade_img();
				else {
					if (ua.ie)
						obj.style.filter = "Alpha(opacity=100)";
					else
						obj.style.opacity = 1;
				}
			}
			obj.style.cursor = "pointer";
			obj.onclick = function() {
				lb.dark();
			}
			container.appendChild(obj);

			// Zurück Button
			var obj = document.createElement("img");
			obj.src = img_path + img_prev;
			obj.id = "lb_imgprev";
			obj.alt = "";
			obj.style.position = "absolute";
			obj.style.display = "none";
			obj.style.cursor = "pointer";
			obj.style.zIndex = 1001;
			container.appendChild(obj);

			// Weiter Button
			var obj = document.createElement("img");
			obj.src = img_path + img_next;
			obj.id = "lb_imgnext";
			obj.alt = "";
			obj.style.position = "absolute";
			obj.style.display = "none";
			obj.style.cursor = "pointer";
			obj.style.zIndex = 1001;
			container.appendChild(obj);

			// Schliessen Button
			var obj = document.createElement("img");
			obj.src = img_path + img_close;
			obj.id = "lb_imgclose";
			obj.alt = "";
			obj.style.position = "absolute";
			obj.style.cursor = "pointer";
			obj.onclick = function() {
				lb.dark();
			}
			obj.style.zIndex = 1001;
			container.appendChild(obj);

			// Titel Ebene
			var obj = document.createElement("div");
			obj.id = "lb_title";
			obj.style.position = "absolute";
			obj.style.padding = border + "px";
			obj.style.fontFamily = font_family;
			obj.style.fontWeight = font_weight;
			obj.style.color = font_color;
			obj.style.fontSize = font_size;
			obj.style.zIndex = 1001;
			obj.style.backgroundColor = border_color;
			container.appendChild(obj);

			// Scrollen und Größenänderung abfangen, Tastesteuerung
			if (ua.ie) {
				window.attachEvent("onscroll", lb.watch_start);
				window.attachEvent("onresize", lb.watch_start);
				document.attachEvent("onkeydown", lb.key_pressed);
			} else {
				window.addEventListener("resize", lb.watch_start, false);
				document.addEventListener("keydown", lb.key_pressed, false);
			}
		}

		// Abdunkelnde Ebene an den aktuellen Seiteninhalt anpassen
		resize_modal();

		// Bilddaten auslesen
		var lb_matrix = lb_array[box_index.substr(3)];
		img_index = 0;
		while (lb_matrix[img_index]['id'] != img_id)
			img_index++;
		img_width = lb_matrix[img_index]['width'];
		img_height = lb_matrix[img_index]['height'];
		var container_width = img_width + border * 2;
		var container_height = img_height + border * 2;

		// Titel
		var obj = document.getElementById('lb_title');
		obj.style.width = (ua.iequirks ? container_width : img_width) + 'px';
		obj.style.top = (img_height + button_margin) + 'px';
		obj.style.textAlign = "center";
		obj.style.verticalAlign = "bottom";
		lightbox_img_title = lb_matrix[img_index]['title'];
		if (lightbox_img_title)
			obj.innerHTML = '...';
		else
			obj.innerHTML = '';

		// Obere Bildebene ausblenden
		var obj = document.getElementById('lb_imgnew');
		if (ua.ie)
			obj.style.filter = "Alpha(opacity=0)";
		else
			obj.style.opacity = 0;

		// Container anpassen
		var obj = document.getElementById('lb_container');
		obj.style.display = "block";
		if (parseInt(obj.style.width) != container_width) {
			obj.style.width = container_width + 'px';
			document.getElementById('lb_img').style.visibility = 'hidden';
		}
		if (parseInt(obj.style.height) != container_height) {
			obj.style.height = container_height + 'px';
			document.getElementById('lb_img').style.visibility = 'hidden';
		}
		obj.style.left = img_left() + 'px';
		obj.style.top = img_top() + 'px';

		// Untere Bildebene anpassen
		var obj = document.getElementById('lb_img');
		obj.style.width = img_width + 'px';
		obj.style.height = img_height + 'px';

		// Obere Bildebene anpassen
		var obj = document.getElementById('lb_imgnew');
		obj.style.width = img_width + 'px';
		obj.style.height = img_height + 'px';
		obj.src = img_path + lb_matrix[img_index]['file'];

		if (obj.complete && ua.opera) {
			if (fade_img)
				lb.fade_img();
			else {
				if (ua.ie)
					obj.style.filter = "Alpha(opacity=100)";
				else
					obj.style.opacity = 1;
				}
		}

		// Zurück Button
		var obj = document.getElementById('lb_imgprev');
		if (img_index > 0) {
			obj.style.display = "block";
			if (obj.complete) {
				obj.style.left = (- obj.offsetWidth - button_margin) + 'px';
				obj.style.top = ((img_height / 2 ) - (obj.offsetHeight / 2) + border) + 'px';
			} else {
				obj.onload = function() {
					var obj = document.getElementById('lb_imgprev');
					obj.style.left = (- obj.offsetWidth - button_margin) + 'px';
					obj.style.top = ((img_height / 2 ) - (obj.offsetHeight / 2) + border) + 'px';
				}
			}
			obj.onclick = function() {
				lb.light(box_index, lb_matrix[img_index - 1]['id']);
			}
			// Vorheriges Bild vorladen
			var preload = new Image();
			preload.src = img_path + lb_matrix[img_index - 1]['file'];
		} else
			obj.style.display = "none";

		// Weiter Button
		var obj = document.getElementById('lb_imgnext');
		if (img_index < lb_matrix.length - 1) {
			obj.style.display = "block";
			if (obj.complete) {
				obj.style.left = (img_width + 2 * border + button_margin) + 'px';
				obj.style.top = ((img_height / 2 ) - (obj.offsetHeight / 2) + border) + 'px';
			} else {
				obj.onload = function() {
					var obj = document.getElementById('lb_imgnext');
					obj.style.left = (img_width + 2 * border + button_margin) + 'px';
					obj.style.top = ((img_height / 2 ) - (obj.offsetHeight / 2) + border) + 'px';
				}
			}
			obj.onclick = function() {
				lb.light(box_index, lb_matrix[img_index + 1]['id']);
			}
			// Nächstes Bild vorladen
			var preload = new Image();
			preload.src = img_path + lb_matrix[img_index + 1]['file'];
		} else
			obj.style.display = "none";

		// Schliessen Button
		var obj = document.getElementById('lb_imgclose');
		if (obj.complete)
			obj.style.left = (img_width + 2 * border + button_margin) + 'px';
		else
			obj.onload = function() {
				document.getElementById('lb_imgclose').style.left = (img_width + 2 * border + button_margin) + 'px';
			}
	}

	// Lightbox ausschalten
	this.dark = function() {
		document.getElementById('lb_img').style.visibility = 'hidden';
		document.getElementById('lb_container').style.display = "none";
		document.getElementById('lb_modal').style.display = "none";
		lightning = false;
	}

	// Linke Position des Bildes ermitteln
	function img_left() {
		var width = ua.ie ?
			(document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth)
			: innerWidth;
		var x = (width - img_width - border * 2) / 2 +
			Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
		return x;
	}



	// Obere Position des Bildes ermitteln
	function img_top() {
		var y = ((ua.ie ? document.documentElement.offsetHeight : innerHeight) - img_height - border - document.getElementById('lb_title').offsetHeight) / 2 +
			(ua.ie ? Math.max(document.documentElement.scrollTop, document.body.scrollTop) : 0);
		return y;
	}

	// Scrollen und Größenänderung sanft abfangen
	this.watch_start = function() {
		var date = new Date();
		watch_time = date.getTime();
		setTimeout('lb.watch_stop()', 100);
	};

	// Verzögerung während Fenstergrößenänderung und Scrollen
	this.watch_stop = function() {
		var date = new Date();
		if (date.getTime() - watch_time < 200)
			setTimeout('lb.watch_stop()', 100);
		else {
			var obj = document.getElementById('lb_container');
			obj.style.left = img_left() + 'px';
			obj.style.top = img_top() + 'px';
			resize_modal();
		}
	}

	// Bild weich einblenden
	this.fade_img = function() {
		var obj = document.getElementById('lb_imgnew');
		var opacity_now;
		if (ua.ie) {
			obj.style.filter = "Alpha(opacity=" + (parseInt(obj.style.filter.substr(14)) + (20 / fade_img)) + ")";
			opacity_now = parseInt(obj.style.filter.substr(14)) / 100;
		} else {
			obj.style.opacity = parseFloat(obj.style.opacity) + (0.2 / fade_img);
			opacity_now = parseFloat(obj.style.opacity);
		}
		if (opacity_now >= 1) {
			 document.getElementById('lb_img').src = obj.src;
			 document.getElementById('lb_img').style.visibility = 'visible';
		} else
			setTimeout("lb.fade_img()", 10 * fade_img);
	}

	// Hintergrudneben anpassen
	function resize_modal() {
		if (!lightning)
			return;
		var body_obj = document.getElementsByTagName('body')[0];
		var last = body_obj.lastChild;
		while (last.nodeType != 1)
			last = last.previousSibling;

		var margin = ua.ie ?
			parseInt(grab_style(body_obj.currentStyle.marginTop)) +
			Math.max(
				parseInt(grab_style(body_obj.currentStyle.marginBottom)) +
				parseInt(grab_style(last.currentStyle.marginBottom))
			) :
			parseInt(document.defaultView.getComputedStyle(body_obj, '').getPropertyValue('margin-top')) +
			Math.max(
				parseInt(document.defaultView.getComputedStyle(body_obj, '').getPropertyValue('margin-bottom')) +
				parseInt(document.defaultView.getComputedStyle(last, '').getPropertyValue('margin-bottom'))
			);
		var obj = document.getElementById('lb_modal');
		obj.style.width = (ua.ie ?
			(document.documentElement.clientWidth ?
				Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) :
				document.body.scrollWidth) :
			document.documentElement.scrollWidth) + 'px';

		obj.style.height = (ua.ie ?
			(document.documentElement.clientHeight ?
				Math.max(
					document.documentElement.scrollHeight,
					document.documentElement.clientHeight
				) :
				Math.max(
					document.body.scrollHeight,
					document.body.clientHeight
				)
			) :
			Math.max(
				document.body.scrollHeight, // Webkit
				document.documentElement.scrollHeight // Presto, Gecko
			)
		) + 'px';

		obj.style.display = "inline";
	}

	// Tastatursteuerung
	this.key_pressed = function(event) {
		var event = event || window.event;
		if (ua.ie)
			k = event.keyCode;
		else
			k = event.which;

		// Escape
		if (k == 27) {
			lb.dark();
			return false;
		}

		// Cursor links, oben
		if (k == 37 || k == 38) {
			if (ua.opera && k == 38)
				return;
			var lb_matrix = lb_array[box_index.substr(3)];
			if (img_index > 0)
				lb.light(box_index, lb_matrix[img_index - 1]['id']);
			if (event.preventDefault)
				event.preventDefault();
			event.cancelBubble = true;
			return false;
		}

		// Cursor rechts unten
		if (k == 39 || k == 40) {
			if (ua.opera && k == 40)
				return;
			var lb_matrix = lb_array[box_index.substr(3)];
			if (img_index < lb_matrix.length - 1)
				lb.light(box_index, lb_matrix[img_index + 1]['id']);
			if (event.preventDefault)
				event.preventDefault();
			event.cancelBubble = true;
			return false;
		}
	}
}

// Zahlenwert aus Stylewert extrahieren
function grab_style(style) {
	if (parseFloat(style))
		return parseFloat(style);
	else
		return 0;
}

// Lightbox Instanz erstellen
var lb = new lightbox();