// set up a few variables
var myClass = "";
var totalCols = 3;
var fontSize = 14;
var lineHeight = 20;
var columnMode = 2;
var tHeight = 375;
var col1Width = 500;
var col2Width = 330;
var col3Width = 230;
var currentPos = 0;
var myArtHeight = tHeight;
var myRemainder = 0;


if (document.all) {
  myClass = "className"
} else {
  myClass = "class"
}

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}

function nextPage() {
	if(totalCols == 1) return;
	parentHeight = findHeight("storyContainer")
	
	if ((parentHeight*(currentPos+columnMode)) < tHeight) {
		currentPos= currentPos+columnMode;
	}

	storyLayout();
	setBylineSpace();
}

function prevPage() {
	if(totalCols == 1) return;
	currentPos= currentPos-columnMode;
	if (currentPos < 0) currentPos = 0
	storyLayout()
	setBylineSpace();
}


function changeFontSize() {
	lineHeight = fontSize+Math.round(.3*fontSize);
	
	for (i = 0; i < 3; i++) {
		obj = document.getElementById("at"+i);
		obj.style.fontSize = fontSize+"px";
		obj.style.lineHeight = lineHeight+"px"
	}
	setVisibleArea();
}

function setBylineSpace() {
	return true;
}

function doFontLarger()	{
	if(totalCols==1) return;
	fontSize = fontSize+2;
	if (fontSize > 20) {
		fontSize = 20;
		alert("This is the maximum font size");
	}
	if (fontSize == 18) {
		// switch to two cols for readability
		setup2Cols();
	}
	changeFontSize();
	setBylineSpace();
}
	
	
function doFontSmaller()	{
	if(totalCols == 1) return;
	fontSize = fontSize-2
	if (fontSize < 10) {
		fontSize = 10;
		alert("This is the minimum font size");
	}
	if (fontSize == 16) {
		// switch to three cols because we have the space
		setup3Cols();
	}
	changeFontSize();
	setBylineSpace();
}


function findHeight(obj)	{
	if (obj == "window") {
		if (window.innerHeight) return window.innerHeight;
		else return document.getElementById("bodyNode").offsetHeight;
	} else	{
		obj = document.getElementById(obj)
		if (obj.offsetHeight) return obj.offsetHeight;
	}
}

function storyInit() {
	parentDiv = document.getElementById("storyContainer")
	currentPos = 0;
	for (i=0; i < 3; i++) {
		col = document.createElement("div")
		col.setAttribute("id", "ac"+i) 
		col.setAttribute(myClass, "storyColumn") 

		parentDiv.appendChild(col);
		obj = document.getElementById("articleBody")
		
		storyText = obj.cloneNode(true)
		
		storyText.setAttribute("id","at"+i)
		storyText.style.display = "block" 		
		storyText.style.top = "0px"
		
		storyText.style.fontSize = fontSize+"px";
		storyText.style.lineHeight = lineHeight+"px";
				
		col.appendChild(storyText);		
	}
}

function storyLayout() {	
	parentHeight = findHeight("storyContainer")
	for (i = 0; i < columnMode; i++) {
		obj = document.getElementById("at"+i);
		if (parentHeight > 2*lineHeight) {
		obj.style.top = -1*(parentHeight*(i+currentPos));
		}
	}
		
	setPageNumbers();
}

function setPageNumbers() { 
	parentHeight = findHeight("storyContainer")
	
	totalColumns = tHeight/parentHeight;
	totalPages = Math.ceil(totalColumns);
	tPos = (currentPos+columnMode)/columnMode;

	pagesTotal = Math.ceil(totalPages/columnMode)+1;
	pagesCurrent = Math.round(tPos+1);

	document.getElementById("pagez").innerHTML = 'Page <b>' + (pagesCurrent-1) + '</b> of ' + (pagesTotal-1);
}

function setup1Cols() {
	// sets up the one column display
	currentPos = 0;
	columnMode = 1
	
	colWidth = col1Width;

	obj = document.getElementById("at0");
	obj.style.width = colWidth;
	obj.style.left = 0;
	obj.style.top = 0;
	obj.style.cursor = "pointer";

	obj = document.getElementById("storyContainer");
	obj.style.height = findHeight("at0");

	obj = document.getElementById("at1")
	obj.style.display = "none"
	obj = document.getElementById("at2")
	obj.style.display = "none"

	obj = document.getElementById("col3Item1");
	obj.style.display = "none";
	obj = document.getElementById("col3Item2");
	obj.style.display = "none";
	obj = document.getElementById("col3Item3");
	obj.style.display = "none";
	obj = document.getElementById("pagez");
	obj.style.display = "none";
}

function setup2Cols() {
	// sets up the two column display
	currentPos = 0;
	columnMode = 2
	
	colWidth = col2Width;
	
	obj = document.getElementById("at0")
	obj.style.width = colWidth;
	obj.style.left = 0;
	// next line is a test
	obj.style.display = "block"
	if (document.all) obj.style.cursor = "hand";
	else  obj.style.cursor = "pointer";
	obj.onmousedown = prevPage;	
	
	obj = document.getElementById("at1")
	obj.style.left = colWidth+20;
	obj.style.width = colWidth;
	obj.style.display = "block"
	if (document.all) obj.style.cursor = "hand";
	else  obj.style.cursor = "pointer";
	obj.onclick = nextPage;
	
	obj = document.getElementById("at2")
	obj.style.display = "none"
}


function setup3Cols() {
	// sets up the three column display
	currentPos = 0;
	columnMode = 3
	
	colWidth = col3Width;

	obj = document.getElementById("storyContainer")
	obj.style.height = myArtHeight;
	
	obj = document.getElementById("at0")
	obj.style.width = colWidth;
	obj.style.left = 0;
	// next line is a test
	obj.style.display = "block"
	if (document.all) obj.style.cursor = "hand";
	else  obj.style.cursor = "pointer";
	obj.onmousedown = prevPage;	
	
	obj = document.getElementById("at1")
	obj.style.left = colWidth+15;
	obj.style.width = colWidth;
	obj.style.display = "block"
	obj.style.cursor = "default";
	obj.onclick = null;
	
	obj = document.getElementById("at2")
	obj.style.left = 2*(colWidth+15);
	obj.style.width = colWidth;
	obj.style.display = "block"
	if (document.all) obj.style.cursor = "hand";
	else  obj.style.cursor = "pointer";
	obj.onclick = nextPage;

	obj = document.getElementById("col3Item1");
	obj.style.display = "inline";
	obj = document.getElementById("col3Item2");
	obj.style.display = "inline";
	obj = document.getElementById("col3Item3");
	obj.style.display = "inline";
	obj = document.getElementById("pagez");
	obj.style.display = "inline";
}


function setVisibleArea() {
	if (columnMode > 1) {
		if (document.getElementById("articleBody") != null) {
			document.getElementById("storyContainer").style.height = setStorytoLineHeight()
			tHeight = findHeight("at1")
			parentHeight = findHeight("storyContainer")
			while ((parentHeight*(currentPos+columnMode-1)) > tHeight && currentPos > 0) {
				currentPos= currentPos-1;
			}
			storyLayout()
		}
	}
}

function setStorytoLineHeight() {
	// sets height of story display to a multiple of article line height
	theHeight = lineHeight*Math.floor(myArtHeight/lineHeight)
	return theHeight;
}

function toggleCols(colCount){
	if(colCount==3){
		totalCols = 3;
		colWidth = col3Width;
		setup3Cols() ;
		fontSize = fontSize-2;
		doFontLarger();
	}else{
		setup1Cols() ;
		totalCols = 1;
	}
}

//////////////////

function initColumns(){
	storyInit();
	setup3Cols();
	setVisibleArea();
	storyLayout();

	if(totalCols==1){
		setup1Cols();
		obj = document.getElementById("col3");
		obj.style.display = "none";
		obj = document.getElementById("col1");
		obj.style.display = "none";
	}

}