var left = "-160px";
var right = "190px";
var bgcolor = "#000";
var fgcolor = "#ffffff";
var width = 500;
var opacity = .75;
var opacity1 = 1;
var border = "2px solid #ccc";
var zindex = 10;
var contDiv;
var viewImg;
var galAnchors;
var arrowDiv;

function key(needle,haystack) {
	for(var i = 0; i < haystack.length; i++) {
		if(needle == haystack[i]) {
			return i;
		}
	}
}
function rewriteAnchorSpan(middle,rLength) {

	if(middle < 4) var start = 0;
	else if(middle > rLength - 5) var start = rLength - 8;
	else var start = middle - 4;
	if(start < 0) start = 0;
	if(rLength < 7) var finish = rLength;
	else var finish = start + 7;
	while(anchorsSpan.hasChildNodes()) {
		anchorsSpan.removeChild(anchorsSpan.childNodes[0]);
	}
	for(var i = start; i < finish; i++) {
		var ar = document.createElement("a");
		ar.href = galAnchors[i].href;
		var n = i + 1;
		arTN = document.createTextNode(" "+n+" |");
		ar.appendChild(arTN);
		ar.onclick = function () {

			rewriteAnchorSpan(key(this.href,galAnchors),galAnchors.length);
			viewImg.src = this.href;
			return false;	
		}
		anchorsSpan.appendChild(ar);
		if(i < galAnchors.length - 1) {
			anchorsSpan.appendChild(document.createTextNode(" "));
		}
	}
}
	

function createViewer (x) {
	var maskImg = document.createElement("img");
	maskImg.src = "images/mask.png";
	maskDiv = document.createElement("div");
	maskDiv.appendChild(maskImg);
	maskDiv.style.height = "375px";
	maskDiv.style.width = "500px";
	maskDiv.style.zIndex = zindex + 5;
	maskDiv.style.position = "fixed";
	maskDiv.style.top = "92px";
	maskDiv.style.left = "50%";
	maskDiv.style.marginLeft = -width/2 + 12 + "px";
	maskDiv.onmouseover = function () {
		this.style.cursor='pointer';
		document.getElementsByTagName("body")[0].appendChild(arrowDiv);
	}
	maskDiv.onmouseout = function () {
			document.getElementsByTagName("body")[0].removeChild(document.getElementById("arrowDiv"));
	}
	maskDiv.onclick = function () {
		var k = key(viewImg.src,galAnchors);
		if(k < galAnchors.length - 1) {
			viewImg.src = galAnchors[k+1];
			k++;
		}
		else {
			viewImg.src = galAnchors[0];
			k = 0;
		}
		rewriteAnchorSpan(k,galAnchors.length);
		return false;
	}
	

	var nextArrow = document.createElement("img");
	nextArrow.src = "images/arrow.png";
	nextArrow.style.border = "none";

	arrowDiv = document.createElement("div");
	arrowDiv.appendChild(nextArrow);
	arrowDiv.style.zIndex = zindex + 2;
	arrowDiv.style.position = "fixed";
	arrowDiv.style.top = "200px";
	arrowDiv.style.left = "50%";
	arrowDiv.style.marginLeft = width/3 + 47 + "px";
	arrowDiv.id = "arrowDiv";

	
	contDiv = document.createElement("div");
	contDiv.id = "contDiv";
	contDiv.style.position = "fixed";
	contDiv.style.top = "0px";
	contDiv.style.left = "0px";
	contDiv.style.height = "100%";
	contDiv.style.width = "100%";
	contDiv.style.backgroundColor = bgcolor;
	contDiv.style.opacity = opacity;
	contDiv.style.filter = "alpha(opacity="+opacity*100+")";
	contDiv.style.zIndex = zindex - 1;
	contDiv.appendChild(document.createTextNode(" "));

	
	viewDiv = document.createElement("div");
	viewDiv.id = "viewDiv";
	viewDiv.style.width = "500px";
	viewDiv.style.position = "fixed";
	viewDiv.style.top = "50px";
	viewDiv.style.padding = "10px";
	viewDiv.style.left = "50%";
	viewDiv.style.marginLeft = -width/2 + "px";
	viewDiv.style.backgroundColor = fgcolor;
	viewDiv.style.border = border;
	viewDiv.style.zIndex = zindex;
	viewDiv.style.opacity = opacity1;
	viewDiv.style.filter = "alpha(opacity="+opacity1*100+")";
	viewDiv.style.overflow = "visible";

	var divLeft = document.createElement("div");
	viewDiv.appendChild(divLeft);
	divLeft.style.position = "relative";
	divLeft.style.left = left;
	var divRight = document.createElement("div");
	divRight.style.position = "relative";
	divRight.style.left = right;
	divRight.style.top = "-16px";
	
	viewDiv.appendChild(divRight);
	var prev = document.createElement("a");
	prev.href = "#";
	prev.onclick = function () {
		var k = key(viewImg.src,galAnchors);
		if(k > 0) {
			viewImg.src = galAnchors[k-1];
			k--;
		}
		else {
			viewImg.src = galAnchors[galAnchors.length-1];
			k = galAnchors.length-1;
		}
		rewriteAnchorSpan(k,galAnchors.length);
		return false;
	}
	prev.appendChild(document.createTextNode("Prev"));
	divLeft.appendChild(prev);
	divLeft.appendChild(document.createTextNode(" | "));
	anchorsSpan = document.createElement("span");
	divLeft.appendChild(anchorsSpan);

	rewriteAnchorSpan(key(x,galAnchors),galAnchors.length);

	divLeft.appendChild(document.createTextNode(" "));
	var next = document.createElement("a");
	next.href = "#";
	next.onclick = function () {
		var k = key(viewImg.src,galAnchors);
		if(k < galAnchors.length - 1) {
			viewImg.src = galAnchors[k+1];
			k++;
		}
		else {
			viewImg.src = galAnchors[0];
			k = 0;
		}
		rewriteAnchorSpan(k,galAnchors.length);
		return false;
	}
	next.appendChild(document.createTextNode("Next "));
	divLeft.appendChild(next);
	
	var closeAnchor = document.createElement("a");
	closeAnchor.href = "#";
	closeAnchor.onclick = function () {
		closeViewer();
		return false;
	}
	closeAnchor.appendChild(document.createTextNode("X Close"));
	divRight.appendChild(closeAnchor);
	divRight.appendChild(document.createTextNode(" or press Esc"));
	viewImg = document.createElement("img");
	viewImg.src = "x.jpg";
	viewImg.className = "viewImg";
	viewDiv.appendChild(viewImg);
	return true;
}

function appendViewer() {
	document.getElementsByTagName("body")[0].appendChild(contDiv);
	document.getElementsByTagName("body")[0].appendChild(viewDiv);
	document.getElementsByTagName("body")[0].appendChild(maskDiv);
}

function loadEvents () {
	var divGal = document.getElementById("gallery");
	galAnchors = divGal.getElementsByTagName("a");
	loadPics = new Array();
	for(var i = 0; i < galAnchors.length; i++) {
		galAnchors[i].onclick = function () {
			if(undefined===contDiv) {
				createViewer(this.href);
			}
			viewImg.src = this.href;
			appendViewer();
			return false;
		}
		loadPics[i] = new Image();
		loadPics[i].src = galAnchors[i].href;
	}
}
function closeViewer () {
	document.getElementsByTagName("body")[0].removeChild(contDiv);
	document.getElementsByTagName("body")[0].removeChild(viewDiv);
	document.getElementsByTagName("body")[0].removeChild(maskDiv);	
	document.getElementsByTagName("body")[0].removeChild(arrowDiv);
}
document.onkeypress = function (e) {
		var kC  = (window.event) ? event.keyCode : e.keyCode;
		if(kC == 27) closeViewer();
	}

addLoadEvent(loadEvents);