var	img,
	bar;

window.onload = initGIF;

function initGIF() {

	var	mainDiv;

	// Load the progress bar

	mainDiv = document.getElementById("container"); 
	bar = new Image();
	bar.src = "/images/progressbar.gif";
	bar.setAttribute("id", "progressBar"); 
	bar.style.visibility = "visible";
	bar.style.display = "block"; 
	mainDiv.appendChild(bar);
	bar.style.visibility = "hidden";
	bar.style.display = "none"; 

}

function changeTab(liSelected) {

	var	ul = liSelected.parentNode;
	var	a,
		li;

	li = fChild(ul);

	while(li) {
		a = fChild(li);
		a.className = "pageText";
		li = nSibling(li);
	}

	fChild(liSelected).className += " selected";

}

function fChild(n) {

	n = n.firstChild;

	if(n && n.nodeType == 3)
		n = nSibling(n);

	return n;

}

function nSibling(n) {

	do n = n.nextSibling;
	while(n && n.nodeType == 3);

	return n;

}

function getViewportWindowDimensions() {

	var	width,
		height;

	if(typeof window.innerWidth != "undefined" && typeof window.innerHeight != "undefined") {
		width = window.innerWidth;
		height = window.innerHeight;
	}
	else if(typeof document.documentElement != "undefined" && typeof document.documentElement.clientHeight != "undefined" && typeof document.documentElement.clientWidth != "undefined") {
		width = document.documentElement.clientWidth;
		height = document.documentElement.clientHeight;
	}
	else {
		width = document.body.clientWidth;
		height = document.body.clientHeight;
	}

	return [width, height];

}

function overlayImage(imgUrl) {

	var	imgDiv,
		mainDiv,
		ovlDiv,
		imgWidth,
		imgHeight,
		topLeft,
		dimensions = getViewportWindowDimensions(),
		containerPos;

	/* Show the overlay, load the image and display
	the 'progress' bar while loading. */

	mainDiv = document.getElementById("container");
	ovlDiv = document.getElementById("overlay");
	topLeft = centerImgDiv(bar.height, bar.width);

	containerPos = getPosition(document.getElementById("copyContent"));
	ovlDiv.style.height = (dimensions[1] + yOffset()) + "px";
	ovlDiv.style.width = (dimensions[0] + xOffset()) + "px";
	ovlDiv.style.marginLeft = -containerPos[0] + "px";
	ovlDiv.style.marginTop = -containerPos[1] + "px";
	ovlDiv.style.display = "block";
	ovlDiv.style.visibility = "visible";

	bar.style.top = topLeft[1] + "px";
	bar.style.left = topLeft[0] + "px";
	bar.style.marginLeft = -containerPos[0] + "px";
//	bar.style.marginTop = -containerPos[1] + "px";
	bar.style.visibility = "visible";
	bar.style.display = "block";
	setTimeout('document.getElementById("progressBar").src = "/images/progressbar.gif"', 200); 

	img = new Image();
	imgDiv = document.getElementById("imgLarge");

	img.src = imgUrl;
	if(img.complete)
		overlayImage2();
	else
		img.onload=function(evt) { overlayImage2();};

}

function overlayImage2() {

	var	imgDiv,
		mainDiv,
		imgWidth,
		imgHeight,
		topLeft,
		containerPos;


	mainDiv = document.getElementById("container");

	if(img.height == undefined || img.width == undefined)
		return;
	if(img.height == 0 || img.width == 0)
		return;

	/* Hide the progress bar */

	bar.style.visibility = "hidden";
	bar.style.display = "none";
	containerPos = getPosition(document.getElementById("copyContent"));
	topLeft = centerImgDiv(img.height, img.width);
	img.style.top = topLeft[1] + "px";
	img.style.left = topLeft[0] + "px";
	img.style.margin = "5px";
	img.style.border = "1px solid #000";
	resetOverlayImages();
	img.style.visibility = "visible";
	img.style.display = "block";

	imgDiv = document.getElementById("imgLarge");
	imgDiv.style.visibility = "visible";
	imgHeight = parseInt(img.height);
	imgWidth = parseInt(img.width);
	imgDiv.style.top = topLeft[1] + "px";
	imgDiv.style.left = topLeft[0] + "px";
	imgDiv.style.marginLeft = -containerPos[0] + "px";
	imgDiv.style.marginTop = -containerPos[1] + "px";
	imgDiv.style.display = "block";

	imgDiv.appendChild(img);

	window.onresize = function() {
		resetOverlayImages();
	}
	
	return false;
}

function centerImgDiv(h, w) {

	var	dimensions = getViewportWindowDimensions(),
		yOff,
		xOff,
		x,
		y;

	xOff = xOffset();
	yOff = yOffset(); 

	x = xOff + (dimensions[0] - w) / 2;
	y = yOff + (dimensions[1] - h) / 2;

	return [x, y];

}

function hideOverlay() {

	var	overlayDiv,
		imgDiv;

	overlayDiv = document.getElementById("overlay");
	imgDiv = document.getElementById("imgLarge");

	if(img)
		imgDiv.removeChild(img);

	imgDiv.style.visibility = "hidden";
	imgDiv.style.display = "none";
	overlayDiv.style.visibility = "hidden";
	overlayDiv.style.display = "none";

	window.onresize = "";

}

function resetOverlayImages() {

	var	overlayDiv,
		imgDiv,
		dimensions = getViewportWindowDimensions(),
		topLeft;

	overlayDiv = document.getElementById("overlay");
	imgDiv = document.getElementById("imgLarge");

	topLeft = centerImgDiv(img.height, img.width);
	imgDiv.style.top = topLeft[1] + "px";
	imgDiv.style.left = topLeft[0] + "px";

	if(topLeft[1] + img.height > document.documentElement.scrollHeight)
		overlayDiv.style.height = (topLeft[1] + img.height) + "px";
	else	
		overlayDiv.style.height = (document.documentElement.scrollHeight) + "px";

	if(topLeft[0] + img.width > document.documentElement.scrollWidth)
		overlayDiv.style.width = (topLeft[0] + img.width) + "px";
	else	
		overlayDiv.style.width = (document.documentElement.scrollWidth) + "px";

}

function yOffset() {

	var retVal;

	if(typeof(window.pageYOffset) == 'undefined')
		retVal = document.documentElement.scrollTop;
	else
		retVal = window.pageYOffset;

	return retVal; 
}

function xOffset() {

	var retVal;

	if(typeof(window.pageXOffset) == 'undefined')
		retVal = document.documentElement.scrollLeft;
	else
		retVal = window.pageXOffset;

	return retVal;

}

function getPosition(obj){

	var	yPos= 0,
		xPos= 0;

	while(obj){
		xPos += obj.offsetLeft;
		yPos += obj.offsetTop;
		obj = obj.offsetParent;
	}

	return [xPos, yPos];

}