<!-- Original:  Gregor (legreg@legreg.de) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var ie4 = (document.all) ? true : false;
var ns4 = (document.layers) ? true : false;
var ns6 = (document.getElementById && !document.all) ? true : false;

var imageArray;
var curImage, loadedImage;
var imageWidth, imageHeight;
var divWidth, divHeight;

function hidelayer(lay) {
	if (ie4) {document.all[lay].style.visibility = "hidden";}
	if (ns4) {document.layers[lay].visibility = "hide"; }
	if (ns6) {
		var layer = document.getElementById([lay]);
		layer.style.display = "none";
	}
}
function showlayer(lay) {
	if (ie4) {document.all[lay].style.visibility = "visible";}
	if (ns4) {document.layers[lay].visibility = "show";}
	if (ns6) {
		var layer = document.getElementById([lay]);
		var prev = document.getElementById("prevbutton");
		var next = document.getElementById("nextbutton");
		var close = document.getElementById("closebutton");
		var img = document.getElementById('image');
		layer.style.zIndex = 2;
		layer.style.display = "block";
		divHeight = .9 * window.innerHeight;
		divWidth = 1.33 * divHeight;
		var x = (window.innerWidth - divWidth) / 2;
		var y = (window.innerHeight - divHeight) / 2;;
		imageWidth = .85 * divWidth;
		imageHeight = .85 * divHeight;
		var bx = divWidth / 2;
		var by = 10;
		layer.style.top = document.body.scrollTop + y;
		layer.style.left = x;
		layer.style.width = divWidth;
		layer.style.height = divHeight;
		
		var gap = 50;
		prev.style.left = bx - gap;
		prev.style.top = by;
		next.style.left = bx - next.style.width / 2;
		next.style.top = by;
		close.style.left = bx + gap - close.style.width;
		close.style.top = by;
	}
}

function showImage(image) {
	var img = document.getElementById('image');
/* 	img.style.opacity = 0; */
	img.src = 'http://theonlinephotographer.typepad.com/.a/6a00df351e888f883401538eaee161970b-500wi';
	showlayer('newlayer');
}

function setButtonVisibility() {
		var prev = document.getElementById("prevbutton");
		var next = document.getElementById("nextbutton");
		if (prev != null)
			prev.style.opacity = curImage > 0 ? 1 : 0;
		if (next != null)
			next.style.opacity = curImage < imageArray.length - 1 ? 1 : 0;
}

function nextImage() {
	if (curImage < imageArray.length - 1) {
		curImage++;
		var img = document.getElementById('image');
		if (img != null) {
			img.removeAttribute('width');
			img.removeAttribute('height');
			img.style.opacity = 0;
			img.src = imageArray[curImage];
			if (loadedImage == img.src) {
				onloadImage();
			}
		}
	}
	setButtonVisibility();
}

function prevImage() {
	if (curImage > 0) {
		curImage--;
		var img = document.getElementById('image');
		img.removeAttribute('width');
		img.removeAttribute('height');
		img.style.opacity = 0;
		img.src = imageArray[curImage];
	}
	setButtonVisibility();
}

function onloadImage() {
	var layer = document.getElementById('newlayer');
	var img = document.getElementById('image');
	var w = img.width;
	var h = img.height;
	if (img.width > imageWidth) {
		img.width = imageWidth;
		img.height = imageWidth * h / w;
	}
	if (img.height > imageHeight) {
		img.height = imageHeight;
		img.width = imageHeight * w / h;
	}
	img.style.left = (divWidth - img.width) / 2;
	img.style.top = (divHeight - img.height) / 2;
	img.style.opacity = 1;
	loadedImage = img.src;
}

function writetolayer(lay,txt) {
	if (ie4) {
		document.all[lay].innerHTML = txt;
	}
	if (ns4) {
		document[lay].document.write(txt);
		document[lay].document.close();
	}
	if (ns6) {
		over = document.getElementById([lay]);
		range = document.createRange();
		range.setStartBefore(over);
		domfrag = range.createContextualFragment(txt);
		while (over.hasChildNodes()) {
			over.removeChild(over.lastChild);
		}
		over.appendChild(domfrag);
	}
}

function showImages(a) {
	var isMSIE = /MSIE/.test(navigator.userAgent)
	if (isMSIE) {
		var w = window.open();//null, null, "menubar=no, toolbar=no, status=no, titlebar=no");
		var doc =w.document;
		var h = "<html><head><title>Screenshots</title></head><body>";
		for (var x in a)
			h += "<p><img src='" + a[x] + "' width='800'>";
		h += "</body></html>";
		doc.write(h);
		doc.close();
	}
	else {
		imageArray = a;
		curImage = -1;
		nextImage();
		showlayer('newlayer');
	}
}

