var reset=0;
var tablevels = new Array(0);
var tabtops = new Array(0);
var pagescroll = null;

function setPageScroll(func) {
	pagescroll = func;
}

function pageSet() {
	pageResize();
	setTabs();
	AlignTabs();
	reset=1;
}

function contentResize() {
	if (reset == 1) {
		pageResize();
		AlignTabs();
	}
	if (pagescroll != null) {
		var x = pagescroll();
		//alert('set page scroll: ' + x);
		pagescroll = null;
	}
}

// fix the vertical spacing of elements on the page
// -- frustrating, because CSS spaces stuff perfectly in the horizontal direction
// -- but I guess that is because I am not allowing horizontal scrolling
// -- now, if CSS could space stuff by the working document size and not by the window size
function pageResize() {
	var viewportwidth;
	var viewportheight;
	var top;
	var tophgt;
	var topratio;
	var toppos;
	var leftimage;
	var page;
	var botSection;
	var bg;
	var bgHeight;
	var sectionTop;

	fixContent();
	if (typeof window.innerWidth != 'undefined') {
		// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
		viewportwidth = window.innerWidth;
		viewportheight = window.innerHeight;
	}	else if (typeof document.documentElement != 'undefined'
					&& typeof document.documentElement.clientWidth !=
					'undefined' && document.documentElement.clientWidth != 0) {
		// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
		viewportwidth = document.documentElement.clientWidth;
		viewportheight = document.documentElement.clientHeight;
	} else {
		// older versions of IE
		viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
		viewportheight = document.getElementsByTagName('body')[0].clientHeight;
	}
	// discover the current picture scaling ratio
	top  = document.getElementById("top");
	tophgt = top.clientHeight;
	topratio = tophgt/226;  //266 is a magic number derived from the actual image height
	// set the vertical position of the current page label div
	leftimage = document.getElementById("curpage");
	toppos = 73 * topratio;
	leftimage.style.top = toppos + "px";
	// set the vertical alignment of the top images
	leftimage = document.getElementById("topPics");
	toppos = 73 * topratio;
	leftimage.style.top = toppos + 'px';
	toppos = 108 * topratio;
	leftimage.style.height = toppos + "px";
	// set the vertical position of the left picture element
	leftimage = document.getElementById("leftimage");
	toppos = 83 * topratio;
	leftimage.style.top = toppos + "px";
	// set the vertical position of the content
	leftimage = document.getElementById("content");
	toppos = 200 * topratio;
	leftimage.style.top = toppos + "px";
	// set the vertical position of the left picture end marker
	leftimage = document.getElementById("leftcolsep");
	toppos = 313 * topratio;
	leftimage.style.top = toppos + "px";
	// set the height of the top middle section -- the one with the blue vertical lines
	sectionTop = (314-266) * topratio; // top of middle2
	leftimage = document.getElementById("middle");
	toppos = (314-226)*topratio;
	leftimage.style.height = toppos + "px";
	// fix the background height (booktop) to make room for the inserted page(content)
	bg = document.getElementById("booktop");
	page = document.getElementById("content");
	botSection = page.clientHeight;
	bgHeight = (121 * topratio) + botSection;
	bg.style.height = bgHeight + "px";
	// set the height && top of the middle2 section
	// FIXME !! -- if the page does not fill the window, then it ought to be streached
	leftimage = document.getElementById("middle2");
	//toppos = toppos - (toppos * 0.88);
	leftimage.style.top = sectionTop  +"px";
	toppos = botSection - toppos; //returns section height
	leftimage.style.height = toppos + "px";
}

// make the content window never have a right scroll bar
function fixContent () {
	var content = document.getElementById("content");
	var doctgt;
	var contentHeight;
	var contentWth;
	if (content.contentDocument) {
	    contentHeight = content.contentDocument.body.offsetHeight;
	} else {
	  contentHeight = 600;
		//doctgt = window.frames[0].document.getElementById(scrollto);
	}
	contentHeight += 50; // ad 50 pixels to the height  1.15; // add 10% to the height
	content.style.height = contentHeight + "px";
}

// initialize the tab spacing and size
function setTabs() {
	var knt = 1;
	var lastElem = 20;
	var elem = document.getElementById("tab" + knt);
	var elemA;
	while (elem != null) {
		elemA = elem.lastElementChild;
		elem.style.top = lastElem + "px";
		tablevels.push(knt);
		tabtops.push(lastElem);
		lastElem += (elem.clientHeight + 10);
		knt += 1;
		elem = document.getElementById("tab" + knt);
	}
}

// set the tab indenting
function AlignTabs() {
	var x;
	var topFound = -1;
	var topAdj;
	var tabname;
	var tabLvl;
	var tab;
	var wth;
	for (x=0; x < tablevels.length; x++) {
		tabLvl = (tablevels[x]-1)*2;
		//if (x==0 && tabLvl != 0) {
		//	tabLvl = 15;
		//}
		tabLvl += "%";
		tabname = x+1;
		tabname = "tab" + tabname;
		tab = document.getElementById(tabname);
		tab.style.left = tabLvl;
		if (tabLvl == "0%") {
			tab.style.width = "50%";
		} else {
			tab.style.width = "46%";
		}
		if (topFound != 1) {
			topFound = tablevels[x];
		}
		if (topFound != 1) {
			topAdj = tabtops[x] + (8*(topFound-1));
			tab.style.top = topAdj + "px";
		} else {
			tab.style.top = tabtops[x]+"px";
		}
	}
}

// what to do when a new page was selected by clicking on a tab
function setPage(tgtpage) {
	var tabkey;
	var tabrun;
	var srcpage = document.getElementById(tgtpage).lastElementChild;
	var img = document.getElementById("pic" + tgtpage);
	document.getElementById("leftimage").src = img.src;
	var page = document.getElementById("curpage");
	var labelval = new String(srcpage.text);
	var ofs = 0;
	while (ofs < labelval.length) {
		if (labelval[ofs] == ' ') {
			labelval = labelval.substring(0, ofs) + labelval.substring(ofs+1);
		} else {
			ofs += 1;
		}
	}
	page.innerHTML = labelval;
	// now fix tab indentation
	tabkey = tgtpage.substring(3);
	tabkey -= 1;
	tablevels[tabkey] = 1;
	for (tabrun=tabkey-1; tabrun >= 0; tabrun -=1) {
		tablevels[tabrun] = (tabkey - tabrun) + 1;
	}
	for (tabrun = tabkey+1; tabrun < tablevels.length; tabrun++) {
		tablevels[tabrun] = (tabrun - tabkey) +1;
	}
	AlignTabs();
}

// mouse over behavior for tabs
function over(tab) {
	var tabnum = tab.substring(3);
	tabnum -= 1;
	if (tablevels[tabnum] > 1) {
		var doc = document.getElementById(tab);
		doc = doc.getElementsByClassName("tabback")[0];
		doc.src = "Images/Mouseover TAB Long.png";
	}
}

function down(tab) {
	var tabnum = tab.substring(3);
	tabnum -= 1;
	if (tablevels[tabnum] > 1) {
		var doc = document.getElementById(tab);
		doc = doc.getElementsByClassName("tabback")[0];
		doc.src = "Images/MouseDown TAB Long.png";
	}
}

function up(tab) {
	var tabnum = tab.substring(3);
	tabnum -= 1;
	if (tablevels[tabnum] > 1) {
		var doc = document.getElementById(tab);
		doc = doc.getElementsByClassName("tabback")[0];
		doc.src = "Images/Mouseover TAB Long.png";
	}
}

function out(tab) {
	var doc = document.getElementById(tab);
	doc = doc.getElementsByClassName("tabback")[0];
	doc.src = "Images/Normal GOLD TAB Long.png";
}

function addEvent(obj, evType, fn){ 
 if (obj.addEventListener){ 
   obj.addEventListener(evType, fn, false); 
   return true; 
 } else if (obj.attachEvent){ 
   var r = obj.attachEvent("on"+evType, fn); 
   return r; 
 } else { 
   return false; 
 } 
}
//addEvent(window, 'load', foo);
//addEvent(window, 'load', bar);