﻿/**
 * Parts
 * --------------------
 * Part 1: getPageSize
 * Part 2: Helper (jq, $BI, $S)
 * Part 3: Cookie Plugin
 * Part 4: Lightbox
 */

/* Part1: getPageSize ----------------------------------------------------------------------------------- */
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; }
	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;}

function adjustLightboxBackground()
	{
	if ($BI('lightboxBackground'))
		{
		if ($BI('lightboxPhoto'))
			{ 
			newWidth = $S('lightboxContent').width
			newWidth = parseFloat(newWidth);
			newLeft  = Math.round((XYwin(1)-newWidth)/2)+'px';
			$S('lightboxContent').left = newLeft;
			}
		var arrayPageSize = getPageSize();
		$S('lightboxBackground').width = arrayPageSize[0]+"px";
		$S('lightboxBackground').height = arrayPageSize[1]+"px";
		}
	}
window.onresize = new Function("adjustLightboxBackground()");

/* Part2: Helper ----------------------------------------------------------------------------------- */
function $BI(v)      { return(document.getElementById(v)); }
function $S(v)       { return($BI(v).style); } 
function noBubble(e) { e.cancelBubble = true; }

/* Part 3: Cookie Plugin ----------------------------------------------------------------------------------- */
function writeCookie(key,value)
	{
		now = new Date();
		timeOut = new Date(now.getTime()+1*86400000);
		document.cookie = key+"="+value+";expires="+timeOut.toGMTString()+";";
	}
// writeCookie('Testeintrag','es hat geklappt');
	
/*****
 logging:
 Unique-Visit     =  uniqueVisits.gif
 Lightbox Aufruf  =  lightboxCalls.gif
 
 alreadyCountedAsUnique
 alreadyCountedAsLightboxUser

 
 	/*
		if (!$.cookie('alreadyCountedAsUnique'))
			{
				$.cookie('alreadyCountedAsUnique', '1');
				$("body").append('<img src="http://62.80.29.8:8020/media/uniqueVisits.gif" />');
			}
	
 ******/



/* Part 4: Lightbox ----------------------------------------------------------------------------------- */
$(document).ready(function()
	{
	//writeCookie('test2','es hat geklappt');
	//setTimeout("lightboxObj.init(0);",500);
	});

function lightboxClass()
	{
	this.init             = init;
	this.initImagePreload = initImagePreload;
	this.imagePreload     = imagePreload;
	this.galerieOn        = galerieOn;
	this.lightboxOff      = lightboxOff;
	if (typeof plugin_images == 'function')
		{
			var images = plugin_images();
		}
	
	
	// config
	var config = new Array();
	if (images) { config["lastImageNr"] = images.length-1; }
	//config["galerieHeight"]     = 150; // überflüssig, wird auto. errechnet
	config["galerieWidth"]      = 585;
	config["resizeSpeedWidth"]  = 1200;
	config["resizeSpeedHeight"] = 1000;
	
	// ZTE 
	config["naviImgFolder"]     = "http://www.zukunft-technik-entdecken.de/lib/images/lightbox/";
	config["imgFolder"]         = "http://www.zukunft-technik-entdecken.de";
	
	//config["naviImgFolder"]     = "http://zte.share.publicform.ln/lib/images/lightbox/";
	//config["imgFolder"]         = "http://zte.share.publicform.ln";
	
	// Lightbox Fade-In
	function init(startNr)
		{
		/*
		if (!$.cookie('alreadyCountedAsLightboxUser'))
			{
				$.cookie('alreadyCountedAsLightboxUser', '1');
				$("body").append('<img src="http://62.80.29.8:8020/media/lightboxCalls.gif" />');
			}
		*/
		$("object").css("visibility","hidden");
		$("embed").css("visibility","hidden");
		if (!startNr) { startNr = 0; }
		var initHtml = ''
		+ '<div id="lightboxBackground" onclick="lightboxObj.lightboxOff();"></div>'
		+ '<div id="lightboxContainer" onclick="lightboxObj.lightboxOff();">'
			+ '<div id="lightbox" onclick="noBubble(event);">'
				+ '<div id="lightboxImage">'
				+ '<div id="lightboxLoading"><img src="'+config["naviImgFolder"]+'loading.gif" /><div>Bild wird geladen...</div></div>'
				+ '</div>'
				+ '<div id="lightboxNavi"></div>'
				+ '<div id="lightboxGalerie"></div>'
			+ '</div>'
		+ '</div>'
		;
		$("body").prepend(initHtml);
		$("#lightboxBackground").css("display","block");
		adjustLightboxBackground();
		initImagePreload(startNr);
		}
	// Bild ändern (inkl. vorladen) */
	function initImagePreload(imageNr,loadFromGalerie)
		{
			$('#arrowNavi').hide();
			$("#lightboxImage").css("background-image",'');
			$("#lightboxGalerie").fadeOut(500, function() 
				{
					$("#lightboxLoading").fadeIn(200);
					//$("#lightboxImage").append('<div id="lightboxLoading"><img src="lib/images/loading.gif" /><div>Bild wird geladen...</div></div>');
					if (loadFromGalerie == "yes")
						{
							$S('lightboxImage').height = $("#lightboxGalerie").height()+"px";
						}
						timerid = setInterval("lightboxObj.imagePreload("+imageNr+")", 100);
				});
		}
	// imagePreload - Läd ein bestimmtes Bild vor und führt dann die Änderungen an der Lightbox aus
	function imagePreload(imageNr)
		{
		loadImage = "";
		loadImage = new Image();
		loadImage.src = config["imgFolder"]+images[imageNr]["filename"];
		if (loadImage.complete)
			{
			clearInterval(timerid);
			$("#lightboxLoading").fadeOut(200, function() 
				{  
				$("#lightbox").animate({ width: loadImage.width }, 800);
				$("#lightboxImage").animate({ width: loadImage.width, height: loadImage.height }, 800, function()
					{
					$("#lightboxImage").css("background-image",'url(\''+config["imgFolder"]+images[imageNr]["filename"]+'\')');
					if (!$BI('lightboxTitle'))
						{
						// initial
						leftTitelWidth = loadImage.width - 180;
						publicNextNumber = parseFloat(imageNr)+1;
						var naviHtml = ''
						+ '<div id="leftTitle" style="float:left; width:'+leftTitelWidth+'px;">'
							+ '<span id="currLightboxImageNr">'+imageNr+'</span>'
							+ '<span id="lightboxTitle">'+images[imageNr]["title"]+'</span>'
							+ '<br />Bild <span id="currLightboxImageNrPublic">'+publicNextNumber+'</span> von '+parseFloat(config["lastImageNr"]+1)
						+ '</div>'
						+ '<div style="float:right;">'
							+ '<div style="border:0px solid red; padding-top:2px;">'
									+ '<div style="float:left; margin-left:16px; background-color:#777; width:1px; height:12px; margin-top:2px"></div>'
									+ '<div style="float:left; padding-left:16px; padding-right:16px;" onmouseover="$(\'#galLink\').css(\'display\',\'block\');" onmouseout="$(\'#bothLinks div\').css(\'display\',\'none\');" onclick="lightboxObj.galerieOn();" class="clickable"><img src="'+config["naviImgFolder"]+'galerielabel.gif" style="height:16px; width:16px;" /></div>'
									+ '<div style="float:left; background-color:#777; width:1px; height:12px; margin-top:2px"></div>'
									+ '<div style="float:left; padding-left:16px; padding-right:16px;" onmouseover="$(\'#closeLink\').css(\'display\',\'block\');" onmouseout="$(\'#bothLinks div\').css(\'display\',\'none\');" onclick="lightboxObj.lightboxOff();" class="clickable"><img src="'+config["naviImgFolder"]+'closelabel.gif"  style="height:16px; width:16px;" /></div>'
									+ '<div style="float:left; background-color:#777; width:1px; height:12px; margin-top:2px"></div>'
								+ '</div>'
								+ '<div id="bothLinks" style="clear:both; text-align:right;">'
									+ '<div id="galLink" style="display:none; padding-right:55px;">Galerie</div>'
									+ '<div id="closeLink" style="display:none;">schließen</div>'
								+ '</div>'
						+ '</div>'
						;
						
						
						$("#lightboxNavi").append(naviHtml);
						//if (imageNr == 0) { imageNr = 1; }
						var htmlImageNumber = imageNr+1;
						$BI('currLightboxImageNrPublic').innerHTML = htmlImageNumber;
						var prevImageNr = imageNr-1;
						var nextImageNr = imageNr+1;
						if (prevImageNr == -1) { prevImageNr = config["lastImageNr"]; }
						if (nextImageNr == config["lastImageNr"]+1) { nextImageNr = 0; }
						var arrowNaviHtml = ''
						+ '<div id="arrowNavi" style="width:100%;">'
							+ '<div id="arrowLeft"><a href="#" onclick="lightboxObj.initImagePreload(\''+prevImageNr+'\'); return false;"><img src="'+config["naviImgFolder"]+'arrow_left.gif" /></a></div>'
							+ '<div id="arrowRight"><a href="#" onclick="lightboxObj.initImagePreload(\''+nextImageNr+'\'); return false;"><img src="'+config["naviImgFolder"]+'arrow_right.gif" /></a></div>'
						+ '</div>'
						;
						$("#lightboxImage").append(arrowNaviHtml);
						}
					else
						{
						// change
						leftTitelWidth = loadImage.width - 180;
						$('div#leftTitle').css('width', leftTitelWidth);
						
						$('#arrowNavi').show();
						$("#lightboxLoading").hide();
						$("#lightboxGalerie").fadeOut("slow", function() { $("#lightboxNavi").slideDown("slow"); } );
						$BI('lightboxTitle').innerHTML = images[imageNr]["title"];
						$BI('currLightboxImageNr').innerHTML = imageNr;
						var htmlImageNumber = imageNr+1;
						$BI('currLightboxImageNrPublic').innerHTML = htmlImageNumber;
						var prevImageNr = imageNr-1;
						//if (prevImageNr == -1) { prevImageNr = config["lastImageNr"]; }
						var nextImageNr = imageNr+1;
						if (imageNr != 0)
							{
							$("#lightboxPrevlink").html('<a href="#" onclick="lightboxObj.initImagePreload(\''+prevImageNr+'\'); return false;">[zurück]</a>');
							$("#arrowLeft").html('<a href="#" onclick="lightboxObj.initImagePreload(\''+prevImageNr+'\'); return false;"><img src="'+config["naviImgFolder"]+'arrow_left.gif" /></a>');
							}
						else
							{
							$("#arrowLeft").html('<a href="#" onclick="lightboxObj.initImagePreload('+config["lastImageNr"]+'); return false;"><img src="'+config["naviImgFolder"]+'arrow_left.gif" /></a>');
							}
						if (images[nextImageNr])
							{
							$("#arrowRight").html('<a href="#" onclick="lightboxObj.initImagePreload(\''+nextImageNr+'\'); return false;"><img src="'+config["naviImgFolder"]+'arrow_right.gif" /></a>');
							}
						else
							{
							$("#arrowRight").html('<a href="#" onclick="lightboxObj.initImagePreload(0); return false;"><img src="'+config["naviImgFolder"]+'arrow_right.gif" /></a>');
							}
						}
					});
				});
			}
		}
	// Galerie Ein
	function galerieOn()
		{
		$('#bothLinks div').css('display','none');
		$("#lightboxImage").css("background-image",'');
		$('#arrowNavi').hide();
		$('#lightboxNavi').hide();
		if ($("#lightboxGalerie").html() == "")
			{
			// Galerie wird erzeugt (erster Aufruf), 72 ist hier höhe des Thumbnails
			$("#lightboxNavi").slideUp("slow");
			$("#lightboxImage").animate({ height: 0, width: config["galerieWidth"] }, 800, function() { $("#lightboxImage").css("background-image",''); });
			$("#lightboxGalerie").animate({ height: ((Math.ceil(images.length/7))*70)-12 }, 800, function() { $("#lightboxGalerie").css("height","auto"); } );
			$("#lightbox").animate({ width: config["galerieWidth"] }, 800, function()
				{
					$.each(images, function(i, n)
						{
							$("#lightboxGalerie").append('<img class="clickable" onclick="lightboxObj.initImagePreload(\''+i+'\',\'yes\');" src="'+config["imgFolder"]+n["thum"]+'" />');
						});
					$("#lightboxGalerie").fadeIn();
					$("#lightboxGalerie").append('<div style="clear:both;"></div>');
				});
			}
		else
			{
			if ($("#lightboxGalerie").css("display") == "block")
				{
					lightboxObj.galerieOff();
				}
			else
				{
				// Galerie wird wieder angezeigt (nicht erster Aufruf)
				$("#lightboxNavi").slideUp("slow");
				$("#lightboxImage").animate({ height: 0, width: config["galerieWidth"] }, 800, function() { $("#lightboxImage").css("background-image",''); });
				
				$("#lightbox").animate({ width: config["galerieWidth"], height: ((Math.ceil(images.length/7))*70)-12 }, 800, function()
					{ 
					$("#lightboxGalerie").fadeIn(500);
					$("#lightbox").css("height","");
					});
				}
			}
		}
	function lightboxOff()
		{
			$("#lightbox").slideUp(800, function()
				{
					$("object").css("visibility","visible");
					$("embed").css("visibility","visible");
					$("#lightboxBackground").hide();
					$("#lightboxContainer").remove();
				});
		}
	}

var lightboxObj = new lightboxClass();