//function arround script for compatibility-reasons with other scripts using $-sign
jQuery(function($) {
	
	var IMAGE_PATH ="http://ht4u.net/diagramm/scripts/lebox/";
	var WAIT_IMAGE_FILENAME = "loading.gif";
	
	var PREVIEW_BOX_SPACE=200;
	
	var MAX_NUMBER_OF_PREVIEWS = 5;
	
	var PADDING = 10;
	var PADDING_WAIT = 50;
	
	var allImageUrls;
	
	var previewNavPos;
	
	var currentImage;
	var currentImagePos=0;
	var currentImageUrl;
	
	
	var prevImages;
	var waitImage;
	
	var windowWidth;
    var windowHeight;
	var pageWidth;
	var pageHeight;
	var availableWindowHeight;
	var availableWindowWidth;
	
	var xScroll;
	var yScroll;
	
	//internal variables
	var xpos;
	var ypos
	var isLeftNavEvent = false;
	var isRightNavEvent =false;
	var numOfPreviews;
	
	$(document).ready(function(){
		//loading all image urls
		fetchImageUrls();
		//initialising array for preview images
		if (allImageUrls.length < MAX_NUMBER_OF_PREVIEWS){
			numOfPreviews = allImageUrls.length;
			prevImages = new Array(numOfPreviews);
		}
		else{
			numOfPreviews = MAX_NUMBER_OF_PREVIEWS;
			prevImages = new Array(MAX_NUMBER_OF_PREVIEWS);
		}
		//appending html-code for the lightbox to the end of the dom
		appendLightboxCode();
		//register click-listeners for user-interaction
		registerListeners();		
		//loading the wait-image 
		waitImage = new Image();	
		waitImage.src = IMAGE_PATH+WAIT_IMAGE_FILENAME;
		
		
	});
	
	function disableKeyBoardNav(){
		$().unbind();
	}
	
	function enableKeyBoardNav(){
		$().bind("keydown", function (e) {
			//Escape key
			if (e.keyCode === 27) {
				e.preventDefault();
				hideLightBox();
			}
			if (e.keyCode === 37) {
				e.preventDefault();
				loadPrevImage();
			}
			if (e.keyCode === 39) {
				e.preventDefault();
				loadNextImage();
			}
		});
		
	}
	
	function fetchImageUrls(){
		var numOfImages = $("a[rel^='lightbox']").size();
		allImageUrls =  new Array(numOfImages);
		for (i=0; i<numOfImages; i++){
			allImageUrls[i] = $("a[rel^='lightbox']").eq(i).attr("href");
		}
		
		if (($("#lightbox_list").find("li").size()) >0){
			numOfImages = $("#lightbox_list").find("li").size();
			allImageUrls = new Array(numOfImages);
			for (i=0; i<numOfImages; i++){
				allImageUrls[i] = $("#lightbox_list").find("li:eq("+i+")").text();
			} 
		};
	}
	
	function appendLightboxCode(){
		var str=			
		'<div id="overlay" />'+
		'<div id="lightbox_background">'+
			'<div>'+
			'<div id="nav_layer">'+				
				'<a href="#" id="image_nav_left" />'+
				'<a href="#" id="image_nav_right" />'+
			'</div>'+
			'<img id="lightbox_image" alt="" src="" />'+
			'</div>'+
			'<div id="lightbox_caption">'+
				'<div id="lightbox_caption_name" style="float: left;" />'+                                
				'<div id="lightbox_close_button" style="float: right;" />'+
			'</div>'+	                                               
		'</div>'+
		'<div id="preview_box">'+
			'<table ><tr align="center" valign="middle"><td><div id="nav_left" /></td>'
				for (i=0;i<numOfPreviews;i++){
					str += '<td class="preview_images" style="width:75px; height:75px;"><img height="50px" width="50px" alt="" src="" /></td>'
				}
		str+=	
			'<td><div id="nav_right" /></td></tr></table>'+
		'</div>'
		
		$("body").append(str);
		 
	}
	
	function loadPrevImage(){
		if (currentImagePos > 0) {
				currentImagePos--;
				
				if (previewNavPos>0){
					previewNavPos--;
					changeMainImage(allImageUrls[currentImagePos]);	
				}
				else{
					isLeftNavEvent=true;
					changeMainImage(allImageUrls[currentImagePos]);
					updatePreviewBox(previewNavPos);
					isLeftNavEvent=false;
				}
				$(".preview_images").css("border","none");
				$(".preview_images:eq("+previewNavPos+")").css("border","2px solid #ccc");
			}
	}
	
	function loadNextImage(){
		if (currentImagePos<allImageUrls.length-1){
				currentImagePos++;
				
				if (previewNavPos < (MAX_NUMBER_OF_PREVIEWS-1) ){
					previewNavPos++;	
					changeMainImage(allImageUrls[currentImagePos]);
				}
				else{
					isRightNavEvent=true;
					changeMainImage(allImageUrls[currentImagePos]);
					updatePreviewBox(previewNavPos);
					isRightNavEvent=false;	
				}
				$(".preview_images").css("border","none");
				$(".preview_images:eq("+previewNavPos+")").css("border","2px solid #ccc");	
			}
	}
	
	function registerListeners(){
		//event handler for clicking in the background
		$("#overlay").click(function(event){hideLightBox()});
		
		$("#nav_right").click(function(event){
			loadNextImage();
		});
		
		$("#image_nav_right").click(function(event){
			event.preventDefault();
			loadNextImage();
		});
		
		$("#nav_left").click(function(event){
			
			loadPrevImage();
		});
		
		$("#image_nav_left").click(function(event){
			event.preventDefault();
			loadPrevImage();
		});
		
		//event handler for clicking lightbox image-links
		$(".preview_images").click(function(event){
			changeMainImage($(this).find('img').attr("src"));
			$(".preview_images").css("border","none");
			$(this).css("border","2px solid #ccc");
			
			$(".preview_images").index(this);
			previewNavPos =($(".preview_images").index(this));
			
		});
		
		//event handler for clicking lightbox image-links
		$("a[rel^='lightbox']").click(function(event){
			event.preventDefault();
			imageUrl = $(this).attr("href");			
			for (i=0; i<allImageUrls.length; i++){
				if (imageUrl==allImageUrls[i]){
					currentImagePos = i;
				}
			}
			var midNavPos= parseInt(numOfPreviews/2);
			
			if ( currentImagePos > (allImageUrls.length-1)-(midNavPos)){
				initialiseLightBox($(this).attr("href"),(numOfPreviews-(allImageUrls.length-currentImagePos)));	
			}
			else if (currentImagePos < midNavPos){
				initialiseLightBox($(this).attr("href"),currentImagePos);
			}
			else{
				initialiseLightBox($(this).attr("href"),midNavPos);
			}
			     
		});     

		//event handler for clicking close button
		$("#lightbox_close_button").click(function(event){
			event.preventDefault();
			hideLightBox();
		});
		
	}
	
	function changeMainImage(imageUrl){
		
		
		//checking image offset 
		for (i=0; i<allImageUrls.length; i++){
			if (imageUrl==allImageUrls[i]){
				currentImagePos = i;
			}
		}
		if(currentImagePos<1){
			$("#image_nav_left").css("display","none");	
		}
		else{
			$("#image_nav_left").css("display","inline");
		}
		if(currentImagePos>=allImageUrls.length-1){
			$("#image_nav_right").css("display","none");	
		}
		else{
			$("#image_nav_right").css("display","inline");
		}
		
				
		//showing main image
		currentImageUrl = imageUrl;
        currentImage = new Image();
        //dont show image until image is loaded     
        currentImage.onload = function(){
				
				var captionHeight = 35;		
				var originalImageHeight = currentImage.height;
				var originalImageWidth = currentImage.width;						
				var maxHeight = currentImage.height;
				var maxWidth = currentImage.width;				
				var ratioPercent = 100;		
				var imageRatio = currentImage.width/currentImage.height;
				var screenRatio = windowWidth/windowHeight;
				
				if ( (availableWindowWidth<maxWidth)||(availableWindowHeight<maxHeight) ){
					//höhe anpassen 
					var widthRatio = availableWindowWidth/maxWidth;
					var heightRatio = availableWindowHeight/maxHeight;
					//alert("wr"+widthRatio+" hr"+heightRatio);
					if (widthRatio>heightRatio){
						
						var heightRatio = availableWindowHeight/maxHeight;
						currentImage.width = currentImage.width*heightRatio;
						currentImage.height = currentImage.height*heightRatio;
						ratioPercent = Math.round(heightRatio*100);
					}
					else{
						
						var widthRatio = availableWindowWidth/maxWidth;
						currentImage.width = currentImage.width*widthRatio;
						currentImage.height = currentImage.height*widthRatio;
						ratioPercent = Math.round(widthRatio*100);
					}
		    	}		
								
				$("#lightbox_caption").css("display","block");
				var imageName = currentImageUrl.substr(currentImageUrl.lastIndexOf("/")+1);
				$("#lightbox_caption_name").html('<div>'+imageName+' - Zoom: '+ratioPercent+'%'+'</div>'+                  
					'<div><a href="'+currentImageUrl+'" target="_blank">Klick f&uuml;r volle Aufl&ouml;sung '+
					'('+originalImageWidth+" x "+originalImageHeight+' px)</div></a>');		
				$("#lightbox_background").css({"display":"block",
					"padding":PADDING
					});
				$("#lightbox_background").css({
					"top":ypos-( (currentImage.height+PADDING)/2),
					"left":xpos-( (currentImage.width+PADDING)/2),
					"width":currentImage.width,
					"height":currentImage.height+40
					});
				$("#lightbox_image").attr("src", currentImageUrl).css({
					"width":currentImage.width,
					"height":currentImage.height   
					});
				$("#nav_layer").css({
					"top":PADDING,
					"left":PADDING,
					"width":currentImage.width+2,
					"height":currentImage.height
					});
				
					
				$("#preview_box").css({"display":"block"});
				$("#preview_box").css({
					"left":xpos-(document.getElementById("preview_box").offsetWidth/2),
					"top":yScroll+windowHeight-(PREVIEW_BOX_SPACE/2)
				});
		};
        currentImage.src = imageUrl;
	} 
	
	function initialiseLightBox(imageUrl, previewPos){
		
    $("iframe").css({"visibility":"hidden"});
    enableKeyBoardNav();		
		//getting window width and height
		updatePageSizeValues();   
		updatePageScrollValues();
		
		//checking image position within the whole list 
		for (i=0; i<allImageUrls.length; i++){
			if (imageUrl==allImageUrls[i]){
				currentImagePos = i;
			}
		}
		
		availableWindowHeight= windowHeight-PREVIEW_BOX_SPACE;
		availableWindowWidth= windowWidth-50;
		
		xpos = (windowWidth/2)+xScroll;
        ypos = ((windowHeight-PREVIEW_BOX_SPACE)/2)+yScroll+30;
	
		$(".preview_images").css("border","none");
		previewNavPos = previewPos;
		$(".preview_images:eq("+previewPos+")").css("border","2px solid #ccc");

		//set overlay background visible
		$("#overlay").css({
			"opacity":"0.80",
			"filter":"alpha(opacity=80)",
			"display":"block",
			"width":"100%",
			"height":pageHeight
		});      
		
        //set lightbox background visible
		$("#lightbox_background").css({"display":"block",
                "top":ypos- (waitImage.height/2+PADDING_WAIT),
                "left":xpos- (waitImage.width/2+PADDING_WAIT),
                "width":waitImage.width,
                "height":waitImage.height,
                "padding":PADDING_WAIT
                });
				
		//set lightbox image to wait Image 
        $("#lightbox_image").attr("src", IMAGE_PATH+WAIT_IMAGE_FILENAME).css({
				"width":waitImage.width,
				"height":waitImage.height   
        	});	
			
		//setting lightbox_caption invisible while loading		
		$("#lightbox_caption").css("display","none");
				
		//showing main image
		changeMainImage(imageUrl);          
		updatePreviewBox(previewPos);
	}
	
	function updatePreviewBox(previewPos){
		if (isLeftNavEvent){
			$(".preview_images:eq(0)").find("img").attr("src", IMAGE_PATH+WAIT_IMAGE_FILENAME);		
		}
		else if (isRightNavEvent){
			$(".preview_images:eq("+(numOfPreviews-1)+")").find("img").attr("src", IMAGE_PATH+WAIT_IMAGE_FILENAME);
		} 
		else{
			$(".preview_images").find("img").attr("src", IMAGE_PATH+WAIT_IMAGE_FILENAME);	
		}
		/*
		 * experimantal code
		for (i=0; i<numOfPreviews;i++){
			prevImages[i]=new Image();

			prevImages[i].onload = (function(o) {
				return function(){
					alert(
						allImageUrls[-previewPos+0+currentImagePos]+"\n"+allImageUrls[-previewPos+1+currentImagePos]
					);
					
					alert(o.src);
					$(".preview_images:eq("+i+")").find("img").attr("src", allImageUrls[-previewPos+i+currentImagePos]);
				}
			})(prevImages[i]);
			
			prevImages[i].src = allImageUrls[-previewPos+i+currentImagePos];	
		}
		*/
		
		prevImages[0]=new Image();
		prevImages[0].onload = function(){
			$(".preview_images:eq(0)").find("img").attr("src", allImageUrls[-previewPos+0+currentImagePos]);
		} 
		prevImages[0].src = allImageUrls[-previewPos+0+currentImagePos];
		
		prevImages[1]=new Image();
		prevImages[1].onload = function(){
			$(".preview_images:eq(1)").find("img").attr("src", allImageUrls[-previewPos+1+currentImagePos]);
		} 
		prevImages[1].src = allImageUrls[-previewPos+1+currentImagePos];
		
		prevImages[2]=new Image();
		prevImages[2].onload = function(){
			$(".preview_images:eq(2)").find("img").attr("src", allImageUrls[-previewPos+2+currentImagePos]);
		} 
		prevImages[2].src = allImageUrls[-previewPos+2+currentImagePos];
		
		prevImages[3]=new Image();
		prevImages[3].onload = function(){
			$(".preview_images:eq(3)").find("img").attr("src", allImageUrls[-previewPos+3+currentImagePos]);
		} 
		prevImages[3].src = allImageUrls[-previewPos+3+currentImagePos];

		prevImages[4]=new Image();
		prevImages[4].onload = function(){
			$(".preview_images:eq(4)").find("img").attr("src", allImageUrls[-previewPos+4+currentImagePos]);
		} 
		prevImages[4].src = allImageUrls[-previewPos+4+currentImagePos];

	}
	
	function hideLightBox(){ 
    $("iframe").css({"visibility":"visible"});	
		$("#overlay").fadeOut("slow");
		/*
		$("#lightbox_background").fadeOut("slow");
		$("#preview_box").fadeOut("slow");
		*/
		$("#lightbox_background").css("display","none");
		$("#preview_box").css("display","none");
		disableKeyBoardNav();
	}
	
	//adapted from the original lightbox2
    function updatePageSizeValues(){	
		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;
		}
    }
	
	function updatePageScrollValues() {
		
		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;	
		}        
		 
	}
	
	
});