// -----------------------------------------------------------------------------------
//
//	Based on Lightbox v2.03.3
//	by Lokesh Dhakar - http://www.huddletogether.com
//	5/21/06
//
//	For more information on the original script, visit:
//	http://huddletogether.com/projects/lightbox2/
//
//	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//	
//	Credit also due to those who have helped, inspired, and made their code available to the public.
//	Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), Thomas Fuchs(mir.aculo.us), and others.
//  -----------------------------------------------------------------------------------
//	! This version is a customization of project: puder+consortio.de by M.Gruschetzki !
//  -----------------------------------------------------------------------------------
//
// var fileLoadingImage = "/images/loading.gif";		
// var fileBottomNavCloseImage = "/images/close_small.gif";

var overlayOpacity = 0.8;	// controls transparency of shadow overlay

var animate = true;			// toggles resizing animations
var resizeSpeed = 7;		// controls the speed of the image resizing animations (1=slowest and 10=fastest)

var borderSize = 10;		//if you adjust the padding in the CSS, you will need to update this variable

// -----------------------------------------------------------------------------------

//
//	Global Variables
//
var imageArray = new Array;
var activeImage;

if(animate == true){
	overlayDuration = 0.2;	// shadow fade in/out duration
	if(resizeSpeed > 10){ resizeSpeed = 10;}
	if(resizeSpeed < 1){ resizeSpeed = 1;}
	resizeDuration = (11 - resizeSpeed) * 0.15;
} else { 
	overlayDuration = 0;
	resizeDuration = 0;
}

// -----------------------------------------------------------------------------------

//
//	Additional methods for Element added by SU, Couloir
//	- further additions by Lokesh Dhakar (huddletogether.com)
//
Object.extend(Element, {
	getWidth: function(element) {
	   	element = $(element);
	   	return element.offsetWidth; 
	},
	setWidth: function(element,w) {
	   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   		element = $(element);
    	element.style.height = h +"px";
	},
	setTop: function(element,t) {
	   	element = $(element);
    	element.style.top = t +"px";
	},
	setLeft: function(element,l) {
	   	element = $(element);
    	element.style.left = l +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src; 
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href; 
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});

// -----------------------------------------------------------------------------------

//
//	Extending built-in Array object
//	- array.removeDuplicates()
//	- array.empty()
//
Array.prototype.removeDuplicates = function () {
    for(i = 0; i < this.length; i++){
        for(j = this.length-1; j>i; j--){        
            if(this[i][0] == this[j][0]){
                this.splice(j,1);
            }
        }
    }
}

// -----------------------------------------------------------------------------------

Array.prototype.empty = function () {
	for(i = 0; i <= this.length; i++){
		this.shift();
	}
}

// -----------------------------------------------------------------------------------

var Lightbox = Class.create({
	
		initialize: function(start) {	
			this.start_image = start;
			this.updateImageList();
			var instance = this;
		
			var objBody = document.getElementsByTagName("body").item(0);

			var objOverlay = new Element('div', { 'id': 'overlay'}).setStyle('display:none');
			//	Event.observe(objOverlay,'click',instance.end.bind(this));
			objBody.appendChild(objOverlay);

			var objLightbox = new Element('div', { 'id': 'lightbox'}).setStyle('display:none');
			// objLightbox.onclick = function() { instance.end();}
			objBody.appendChild(objLightbox);

			var objOuterImageContainer = new Element('div', { 'id': 'outerImageContainer'});
			objLightbox.appendChild(objOuterImageContainer);

			if(animate){
				Element.setWidth('outerImageContainer', 250);
				Element.setHeight('outerImageContainer', 250);			
			} else {
				Element.setWidth('outerImageContainer', 1);
				Element.setHeight('outerImageContainer', 1);			
			}

			var objImageContainer = new Element('div', { 'id': 'imageContainer'});
			objImageContainer.setAttribute('id','imageContainer');
			objOuterImageContainer.appendChild(objImageContainer);

			var objLightboxImage = new Element('img', { 'id': 'lightboxImage'});
			objImageContainer.appendChild(objLightboxImage);

			var objHoverNav = new Element('div', { 'id': 'hoverNav'});
			objImageContainer.appendChild(objHoverNav);

			var objLoading = new Element('div', { 'id': 'loading'});
			objImageContainer.appendChild(objLoading);

			var objLoadingLink = new Element('a', { 'id': 'loadingLink','href': '#' });
			objLoadingLink.onclick = function() { instance.end(); return false; }
			objLoading.appendChild(objLoadingLink);

			// var objLoadingImage = new Element('img', { 'src': fileLoadingImage});
			// objLoadingLink.appendChild(objLoadingImage);

			var objImageDataContainer = new Element('div', { 'id': 'imageDataContainer'});
			objLightbox.appendChild(objImageDataContainer);

			var objImageData = new Element('div', { 'id': 'imageData'});
			objImageDataContainer.appendChild(objImageData);

			var objImageDetails =	new Element('div', { 'id': 'imageDetails'});
			objImageData.appendChild(objImageDetails);

			var objCaption = new Element('span', { 'id': 'caption'});
			objImageDetails.appendChild(objCaption);

			var objNumberDisplay = new Element('span', { 'id': 'numberDisplay'});
			objImageDetails.appendChild(objNumberDisplay);

			var objBottomNav = new Element('div', { 'id': 'bottomNav'});
			objImageData.appendChild(objBottomNav);
			//=>

			var objPrevLink = new Element('a', { 'id': 'prevLink','href': '#','title': 'zurück' });
			objBottomNav.appendChild(objPrevLink);
			
			var objNextLink = new Element('a', { 'id': 'nextLink','href': '#','title': 'weiter'  });
			objBottomNav.appendChild(objNextLink);

			//<=
			var objBottomNavCloseLink = new Element('a', { 'id': 'bottomNavClose','href': '#','title': 'schließen' });
			objBottomNavCloseLink.onclick = function() { instance.end(); return false; }
			objBottomNav.appendChild(objBottomNavCloseLink);

			// var objBottomNavCloseImage = new Element('img', { 'src': fileBottomNavCloseImage});
			// objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
		},
		updateImageList: function() {	
			var instance = this;
			if (!document.getElementsByTagName){ return; }
			var anchors = document.getElementsByTagName('a');
			var areas = document.getElementsByTagName('area');

			// loop through all anchor tags
			for (var i=0; i<anchors.length; i++){
				var anchor = anchors[i];
				var relAttribute = String(anchor.getAttribute('rel'));
			}
			var links=this.start_image;
			for (var i=0; i< areas.length; i++){
				var area = areas[i];

				var relAttribute = String(area.getAttribute('rel'));
				if (area.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
					area.onclick = function () {instance.start(this); return false;}
				}
			}
		},
		start: function(imageLink) {	
			var instance = this;
			hideSelectBoxes();
			hideFlash();

			// stretch overlay to fill page and fade in
			var arrayPageSize = getPageSize();
			Element.setWidth('overlay', arrayPageSize[0]);
			Element.setHeight('overlay', arrayPageSize[1]);

			new Effect.Appear('overlay', { duration: overlayDuration, from: 0.0, to: overlayOpacity });

			imageArray = [];
			imageNum = 0;		

			if (!document.getElementsByTagName){ return; }
			var anchors = document.getElementsByTagName( imageLink.tagName);

			// if image is NOT part of a set..
			if((imageLink.getAttribute('rel') == 'lightbox')){
				// add single image to imageArray
				imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));			
			} else {
			// if image is part of a set..

				// loop through anchors, find other images in set, and add them to imageArray
				for (var i=0; i<anchors.length; i++){
					var anchor = anchors[i];
					if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
						imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
					}
				}
				imageArray.removeDuplicates();
				while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
			}

			// calculate top and left offset for the lightbox 
			var arrayPageScroll = getPageScroll();
			var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
			var lightboxLeft = arrayPageScroll[0];
			Element.setTop('lightbox', lightboxTop);
			Element.setLeft('lightbox', lightboxLeft);
			
			Element.show('lightbox');

			this.changeImage(imageNum);
		},

		//
		//	changeImage()
		//	Hide most elements and preload image in preparation for resizing image container.
		//
		changeImage: function(imageNum) {	
			var instance = this;
			activeImage = imageNum;	// update global var

			// hide elements during transition
			if(animate){ Element.show('loading');}
			$w('lightboxImage hoverNav prevLink nextLink imageDataContainer numberDisplay').each(Element.hide);

			imgPreloader = new Image();

			// once image is preloaded, resize image container
			imgPreloader.onload=function(){
				Element.setSrc('lightboxImage', imageArray[activeImage][0]);
				instance.resizeImageContainer(imgPreloader.width, imgPreloader.height);

				imgPreloader.onload=function(){};	//	clear onLoad, IE behaves irratically with animated gifs otherwise 
			}
			imgPreloader.src = imageArray[activeImage][0];
		},

		//
		//	resizeImageContainer()
		//
		resizeImageContainer: function( imgWidth, imgHeight) {
			var instance = this;
			// get curren width and height
			this.widthCurrent = Element.getWidth('outerImageContainer');
			this.heightCurrent = Element.getHeight('outerImageContainer');

			// get new width and height
			var widthNew = (imgWidth  + (borderSize * 2));
			var heightNew = (imgHeight  + (borderSize * 2));

			// scalars based on change from old to new
			this.xScale = ( widthNew / this.widthCurrent) * 100;
			this.yScale = ( heightNew / this.heightCurrent) * 100;

			// calculate size difference between new and old image, and resize if necessary
			wDiff = this.widthCurrent - widthNew;
			hDiff = this.heightCurrent - heightNew;

			if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
			if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }

			// if new and old image are same size and no scaling transition is necessary, 
			// do a quick pause to prevent image flicker.
			if((hDiff == 0) && (wDiff == 0)){
				if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 
			}
			Element.setWidth( 'imageDataContainer', widthNew);

			this.showImage();
		},

		//
		//	showImage()
		//	Display image and begin preloading neighbors.
		//
		showImage: function(){
			var instance = this;
			Element.hide('loading');
			new Effect.Appear('lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: function(){	instance.updateDetails(); } });
			this.preloadNeighborImages();
		},

		//
		//	updateDetails()
		//	Display caption, image number, and bottom nav.
		//
		updateDetails: function() {
			var instance = this;
			// if caption is not null
			if(imageArray[activeImage][1]){
				Element.show('caption');
				Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
			}

			// if image is part of set display 'Image x of x' 
			if(imageArray.length > 1){
				$('numberDisplay').show().update("Bild " + eval(activeImage + 1) + " von " + imageArray.length);
			}

			new Effect.Parallel(
				[ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }), 
				  new Effect.Appear('imageDataContainer', { sync: true, duration: resizeDuration }) ], 
				{ duration: resizeDuration, afterFinish: function() {
					// update overlay size and update nav
					var arrayPageSize = getPageSize();
					Element.setHeight('overlay', arrayPageSize[1]);
						instance.updateNav();
					}
				} 
			);
		},

		//
		//	updateNav()
		//	Display appropriate previous and next hover navigation.
		//
		updateNav: function() {
		var instance = this;
			Element.show('hoverNav');				
			$w('prevLink nextLink').each(Element.show);

			// if not first image in set, display prev image button
			if(activeImage != 0){
				$('prevLink').removeClassName('hidden').addClassName('active');

				$('prevLink').onclick = function() {
					instance.changeImage(activeImage - 1); return false;
				}
			}else{
				$('prevLink').removeClassName('active').addClassName('hidden');
				
				$('prevLink').onclick = function() {
					$('numberDisplay').update('Dies ist das erste Bild');
				}
			}

			// if not last image in set, display next image button
			if(activeImage != (imageArray.length - 1)){
				$('nextLink').removeClassName('hidden').addClassName('active');

				$('nextLink').onclick = function() {
					instance.changeImage(activeImage + 1); return false;
				}
			}	else{
					$('nextLink').removeClassName('active').addClassName('hidden');

					$('nextLink').onclick = function() {
						$('numberDisplay').update('Keine weiteren Bilder vorhanden');
					}
				}
		},

		//
		//	enableKeyboardNav()
		//
		enableKeyboardNav: function() {
			document.onkeydown = this.keyboardAction; 
		},

		//
		//	disableKeyboardNav()
		//
		disableKeyboardNav: function() {
			document.onkeydown = '';
		},

		//
		//	keyboardAction()
		//
		keyboardAction: function(e) {
			var instance = this;
			if (e == null) { // ie
				keycode = event.keyCode;
				escapeKey = 27;
			} else { // mozilla
				keycode = e.keyCode;
				escapeKey = e.DOM_VK_ESCAPE;
			}

			key = String.fromCharCode(keycode).toLowerCase();

			if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){	// close lightbox
				instance.end();
			} else if((key == 'p') || (keycode == 37)){	// display previous image
				if(activeImage != 0){
					instance.changeImage(activeImage - 1);
				}
			} else if((key == 'n') || (keycode == 39)){	// display next image
				if(activeImage != (imageArray.length - 1)){
					instance.changeImage(activeImage + 1);
				}
			}

		},

		//
		//	preloadNeighborImages()
		//	Preload previous and next images.
		//
		preloadNeighborImages: function(){

			if((imageArray.length - 1) > activeImage){
				preloadNextImage = new Image();
				preloadNextImage.src = imageArray[activeImage + 1][0];
			}
			if(activeImage > 0){
				preloadPrevImage = new Image();
				preloadPrevImage.src = imageArray[activeImage - 1][0];
			}

		},

		//
		//	end()
		//
		end: function() {
			$('lightbox').remove();
			new Effect.Fade('overlay', { duration: overlayDuration,afterFinish: function(){$('overlay').remove();}});
			showSelectBoxes();
			showFlash();
		}
	}


);
// -----------------------------------------------------------------------------------

//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.com
//
function getPageScroll(){

	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;	
	}

	arrayPageScroll = new Array(xScroll,yScroll) 
	return arrayPageScroll;
}
// -----------------------------------------------------------------------------------

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.com
// Edit for Firefox by pHaez
//
function getPageSize(){
	
	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;
	}
//	console.log("pageWidth " + pageWidth)

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}

// -----------------------------------------------------------------------------------

//
// getKey(key)
// Gets keycode. If 'x' is pressed then it hides the lightbox.
//
function getKey(e){
	if (e == null) { // ie
		keycode = event.keyCode;
	} else { // mozilla
		keycode = e.which;
	}
	key = String.fromCharCode(keycode).toLowerCase();
	
	if(key == 'x'){
	}
}

// -----------------------------------------------------------------------------------

//
// listenKey()
//
function listenKey () {	document.onkeypress = getKey; }
	
// ---------------------------------------------------

function showSelectBoxes(){
	var selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "visible";
	}
}

// ---------------------------------------------------

function hideSelectBoxes(){
	var selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "hidden";
	}
}

// ---------------------------------------------------

function showFlash(){
	var flashObjects = document.getElementsByTagName("object");
	for (i = 0; i < flashObjects.length; i++) {
		flashObjects[i].style.visibility = "visible";
	}

	var flashEmbeds = document.getElementsByTagName("embed");
	for (i = 0; i < flashEmbeds.length; i++) {
		flashEmbeds[i].style.visibility = "visible";
	}
}
// ---------------------------------------------------

function hideFlash(){
	var flashObjects = document.getElementsByTagName("object");
	for (i = 0; i < flashObjects.length; i++) {
		flashObjects[i].style.visibility = "hidden";
	}

	var flashEmbeds = document.getElementsByTagName("embed");
	for (i = 0; i < flashEmbeds.length; i++) {
		flashEmbeds[i].style.visibility = "hidden";
	}

}
// ---------------------------------------------------

//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Help from Ran Bar-On [ran2103@gmail.com]
//

function pause(ms){
	var date = new Date();
	curDate = null;
	do{var curDate = new Date();}
	while( curDate - date < ms);
}
/*
function pause(numberMillis) {
	var curently = new Date().getTime() + sender;
	while (new Date().getTime();	
}
*/