/**
 * Event functions. These are called from, for example,
 * on click events. The keyword this refers to the
 * object that the event was attached to.
 */

function seasonRevealEvent() {
	toggleHidden("episodeList", this.id.substring(13));
}

function topicRevealEvent() {
	if (document.getElementById("navExpand").className!="navDisabled")
		toggleHidden("topicContent", this.id.substring(12));
}

function episodeSelectEvent() {
	if (this.id=="titleDiv") load("0");
	else load(this.id);
	window.scrollTo(0, 0);
}

function previousSectionEvent() {
	if (this.className!="navDisabled") {
		load(this.link); window.scrollTo(0, 0);
	}
}

function nextSectionEvent() {
	if (this.className!="navDisabled") {
		load(this.link); window.scrollTo(0, 0);
	}
}

function disablePreviousSectionLink() {
	document.getElementById("navPrevSection").className="navDisabled";
}

function disableNextSectionLink() {
	document.getElementById("navNextSection").className="navDisabled";
}

function expandTopicsEvent() {
	if (this.className!="navDisabled") expandAllTopics();
}

function collapseTopicsEvent() {
	if (this.className!="navDisabled") collapseAllTopics();
}

function lockExpandedEvent() {
	if (this.className=="navText") {
		this.className="navHighlight";
		expandAllTopics();
		document.getElementById("navCollapse").className="navDisabled";
		document.getElementById("navExpand").className="navDisabled";
		for (var i=0; i<topic.length; i++)
			document.getElementById("topicHeading"+i).className="topicHeadingLocked";

	} else {
		this.className="navText";
		document.getElementById("navCollapse").className="navText";
		document.getElementById("navExpand").className="navText";
		for (var i=0; i<topic.length; i++)
			document.getElementById("topicHeading"+i).className="topicHeading";
	}
}

/**
 * Setup function is called once the HTML skeleton has
 * been loaded
 */

function setup() {
	// first remove the piece of advice for non-JS browsers
	var n=document.getElementById("removeme"); n.parentNode.removeChild(n);

	var menuDiv=document.getElementById("menuBorderDiv");

	for (var i=0; i<section.length; i++) {
		var seasonBoxDiv=document.createElement("div");
		seasonBoxDiv.className="seasonBox";

		// First the season heading in the menu:
		var seasonHeading=document.createElement("div");
		seasonHeading.id="seasonHeading"+i;
		seasonHeading.className="seasonHeading";
		seasonHeading.onclick=seasonRevealEvent;

		var arrowImage=document.createElement("img");
		arrowImage.src="images/expand.png";

		arrowImage.className="arrow";

		arrowImage.width="19"; arrowImage.height="19";
		arrowImage.vspace="6"; arrowImage.hspace="2";
		arrowImage.id="seasonArrow"+i;
		seasonHeading.appendChild(arrowImage);

		var seasonImage=document.createElement("img");
		seasonImage.src="images/season"+(i+1)+".png";

		switch (i) {
			case 0:
				seasonImage.alt="Season One";
				seasonImage.width="126"; seasonImage.height="29";
			break;

			case 1:
				seasonImage.alt="Season Two";
				seasonImage.width="133"; seasonImage.height="29";
			break;

			case 2:
				seasonImage.alt="The History of Daniel";
				seasonImage.width="238"; seasonImage.height="29";
			break;
		}

		seasonHeading.appendChild(seasonImage);
		seasonBoxDiv.appendChild(seasonHeading);

		// Next the list of episodes:
		var episodeList=document.createElement("div");
		episodeList.id="episodeList"+i;
		episodeList.className="hide epList";

		for (var j=0; j<section[i].length; j++) {
			var episodeLink=document.createElement("div");
			episodeLink.appendChild(
				document.createTextNode("["+(j+1)+"] "+section[i][j])
			);
			episodeLink.id="s"+(i+1)+"e"+(j+1);
			episodeLink.className="episodeLink";
			episodeLink.onclick=episodeSelectEvent;
			episodeList.appendChild(episodeLink);
		} // end cycling through episodes
		seasonBoxDiv.appendChild(episodeList);
		menuDiv.appendChild(seasonBoxDiv);
	} // end cycling through seasons

	// Now onto the content div. First the episode title:

	var contentDiv=document.getElementById("contentBorderDiv");

	var episodeTitleDiv=document.createElement("div");
	episodeTitleDiv.id="episodeTitleDiv";

	var episodeTitlePara=document.createElement("p");
	episodeTitlePara.id="episodeTitlePara";

	episodeTitleDiv.appendChild(episodeTitlePara);

	var navPara=document.createElement("p");
	navPara.id="navPara";

	var prevSectionSpan=document.createElement("span");
	prevSectionSpan.id="navPrevSection";
	prevSectionSpan.className="navText";
	prevSectionSpan.onclick=previousSectionEvent;
	prevSectionSpan.innerHTML="Previous";
	navPara.appendChild(prevSectionSpan);

	navPara.appendChild(document.createTextNode(" | "));
	
	var expandSpan=document.createElement("span");
	expandSpan.id="navExpand";
	expandSpan.className="navText";
	expandSpan.onclick=expandTopicsEvent;
	expandSpan.innerHTML="Expand all Topics";
	navPara.appendChild(expandSpan);

	navPara.appendChild(document.createTextNode(" | "));

	var lockExSpan=document.createElement("span");
	lockExSpan.id="navLockEx";
	lockExSpan.className="navText";
	lockExSpan.onclick=lockExpandedEvent;
	lockExSpan.innerHTML="Lock Expanded";
	navPara.appendChild(lockExSpan);

	navPara.appendChild(document.createTextNode(" | "));

	var collapseSpan=document.createElement("span");
	collapseSpan.id="navCollapse";
	collapseSpan.className="navText";
	collapseSpan.onclick=collapseTopicsEvent;
	collapseSpan.innerHTML="Collapse all Topics";
	navPara.appendChild(collapseSpan);

	navPara.appendChild(document.createTextNode(" | "));

	var nextSectionSpan=document.createElement("span");
	nextSectionSpan.id="navNextSection";
	nextSectionSpan.className="navText";
	nextSectionSpan.onclick=nextSectionEvent;
	nextSectionSpan.innerHTML="Next";
	navPara.appendChild(nextSectionSpan);

	episodeTitleDiv.appendChild(navPara);
	
	contentDiv.appendChild(episodeTitleDiv);
	
	// The topics:

	for (var i=0; i<topic.length; i++) {
		// create a topic block
		var topicDiv=document.createElement("div");
		topicDiv.className="topicBox";

		var topicHeadingDiv=document.createElement("div");

		var arrowImage=document.createElement("img");
		arrowImage.src="images/expand.png";
		arrowImage.className="arrow";
		arrowImage.width="19"; arrowImage.height="19";
		arrowImage.vspace="3"; arrowImage.hspace="2";
		arrowImage.id="topicArrow"+i;
		topicHeadingDiv.appendChild(arrowImage);
		
		var topicTitleImage=document.createElement("img");
		topicTitleImage.src="images/"+topic[i]+".png";
		topicTitleImage.alt=topicTitle[i];

		// TODO: These implementation details should be in the overview file

		switch (i) {
			case 0:
				topicTitleImage.width="205"; topicTitleImage.height="25";
			break;
			
			case 1:
				topicTitleImage.width="77"; topicTitleImage.height="24";
			break;
			
			case 2:
				topicTitleImage.width="77"; topicTitleImage.height="24";
			break;
			
			case 3:
				topicTitleImage.width="126"; topicTitleImage.height="24";
			break;
			
			case 4:
				topicTitleImage.width="118"; topicTitleImage.height="24";
			break;
			
			case 5:
				topicTitleImage.width="120"; topicTitleImage.height="26";
			break;
			
			case 6:
				topicTitleImage.width="112"; topicTitleImage.height="25";
			break;
			
			case 7:
				topicTitleImage.width="63"; topicTitleImage.height="26";
			break;
			
			case 8:
				topicTitleImage.width="84"; topicTitleImage.height="27";
			break;
			
			case 9:
				topicTitleImage.width="119"; topicTitleImage.height="27";
			break;
		}

		topicHeadingDiv.appendChild(topicTitleImage);
		topicHeadingDiv.onclick=topicRevealEvent;
		topicHeadingDiv.id="topicHeading"+i;
		topicHeadingDiv.className="topicHeading";

		var topicContentDiv=document.createElement("div");
		topicContentDiv.className="hide topic clearfix";
		topicContentDiv.id="topicContent"+i;

		topicDiv.appendChild(topicHeadingDiv);
		topicDiv.appendChild(topicContentDiv);
		topicDiv.id="TopicBox "+topic[i];

		contentDiv.appendChild(topicDiv);
	} // end cycling through each topic

	load('0');

	document.getElementById("titleDiv").onclick=episodeSelectEvent;
	// TO DO: Decide which page to load based on the hash value
	// var h=window.location.hash;
	//if (h=="") load('0'); else load(h.substring(1));
} // end setup function

function gotoEpisode(s, e) {
	load("s"+s+"e"+e);
	window.scrollTo(0, 0);
}

/**
 * In most cases the automatically generated episode title is fine, but if
 * you wish to change it or add further information you can update the
 * content of the episode title box by passing a string of inner HTML.
 */

function updateEpisodeTitle(s) {
	document.getElementById("episodeTitlePara").innerHTML=s;
}

function updateNextSectionLink(s) {
	document.getElementById("navNextSection").link=s;
}

/**
 * Updates the content with data stored in an external JS file.
 */

function load(page) {
	var etp=document.getElementById("episodeTitlePara");

	var s=page.indexOf("s"), e=page.indexOf("e");
	var dir="";

	for (var i=0; i<section.length; i++) {
		for (var j=0; j<section[i].length; j++) {
			document.getElementById("s"+(i+1)+"e"+(j+1)).className="episodeLink";
		}
	}

	var link=document.getElementById(page);	
	if (link!=null) link.className="episodeLinkSelected";

	if (s>-1&&e>s) {
		var sNum=page.substring(s+1, e);
		dir="s"+sNum+"/";
		var eNum=page.substring(e+1);
		etp.innerHTML="Season "+sNum+" Episode "+eNum+": &ldquo;"+
			section[sNum-1][eNum-1]+"&rdquo;";

		document.title=
			section[sNum-1][eNum-1]+
			" - Thunder Mountain Files - Jeremiah Episode Guide";

		// Provide default values for the previous and next section links
		var eNumPrev=eNum-1;
		var sNumPrev=sNum;

		if (eNumPrev<1) {
			sNumPrev--;
			if (sNumPrev>0) eNumPrev=section[sNumPrev-1].length;
		}

		var eNumNext=parseInt(eNum)+1;
		var sNumNext=sNum;

		if (eNumNext>section[sNum-1].length) {
			sNumNext++;
			eNumNext=1;
		}

		document.getElementById("navPrevSection").link="s"+sNumPrev+"e"+eNumPrev;
		document.getElementById("navNextSection").link="s"+sNumNext+"e"+eNumNext;

		document.getElementById("navPrevSection").className="navText";
		document.getElementById("navNextSection").className="navText";
	}


	// Remove existing data script and append new one:
	var s=document.getElementById("contentScript");
	if (s!=null) document.getElementById("headnode").removeChild(s);
	
	var s2=document.createElement("script");
	s2.id="contentScript"; s2.type="text/javascript";
	s2.src="data/"+dir+page+".js";

	document.getElementById("headnode").appendChild(s2);

	/* Now at this point let us see if there are any topics that have no
	 * content. If so we can hide them.
	 */

	//TO DO: window.location.hash=page;
} // end load function

function toggleHidden(type, a) {
	var node=document.getElementById(type+a);

	if (type=="topicContent") {
		if (node.className=="hide topic clearfix") {
			node.className="show topic clearfix";
			document.getElementById("topicArrow"+a).src="images/collapse.png";
		} else {
			node.className="hide topic clearfix";
			document.getElementById("topicArrow"+a).src="images/expand.png";
		}
	} else if (type=="episodeList") {
		if (node.className=="hide epList") {
			node.className="show epList";
			document.getElementById("seasonArrow"+a).src="images/collapse.png";
		} else {
			node.className="hide epList";
			document.getElementById("seasonArrow"+a).src="images/expand.png";
		}
	}
} // end toggleHidden function

function clearNode(id) {
	var node=document.getElementById(id);
	while (node.hasChildNodes()) node.removeChild(node.firstChild);
}

function clearAllTopics() {
	for (var i=0; i<topic.length; i++) {
		clearNode("topicContent"+i);
		var hideBox=document.getElementById("TopicBox "+topic[i]);
		if (hideBox!=null) hideBox.className="topicBox hide";
	}
}

function collapseAllTopics() {
	if (document.getElementById("navExpand").className=="navDisabled") return;
	for (var i=0; i<topic.length; i++) {
		document.getElementById("topicContent"+i).className="hide topic clearfix";
		document.getElementById("topicArrow"+i).src="images/expand.png";
	}
}

function expandAllTopics() {
	if (document.getElementById("navExpand").className=="navDisabled") return;
	for (var i=0; i<topic.length; i++) {
		document.getElementById("topicContent"+i).className="show topic clearfix";
		document.getElementById("topicArrow"+i).src="images/collapse.png";
	}
}

function collapseAllSeasons() {
	for (var i=0; i<section.length; i++) {
		document.getElementById("episodeList"+i).className="hide epList";
		document.getElementById("seasonArrow"+i).src="images/expand.png";
	}
}

function expandAllSeasons() {
	for (var i=0; i<section.length; i++) {
		document.getElementById("episodeList"+i).className="show epList";
		document.getElementById("seasonArrow"+i).src="images/collapse.png";
	}
}

/** API for adding data to the topic content in a DOM-friendly manner */

function addPara(id, tex) {
	var topicNum=-1;
	for (var i=0; i<topic.length; i++) if (id==topic[i]) topicNum=i;

	if (topicNum==-1) return;
	var node=document.getElementById("topicContent"+topicNum);
	var p=document.createElement("p");
	p.innerHTML=tex;
	node.appendChild(p);

	var topicBox=document.getElementById("TopicBox "+topic[topicNum]);
	if (topicBox!=null) topicBox.className="topicBox";
}

function addQuoteBox(id, qb) {
	var topicNum=-1;
	for (var i=0; i<topic.length; i++) if (id==topic[i]) topicNum=i;

	if (topicNum==-1) return;
	var node=document.getElementById("topicContent"+topicNum);

	node.appendChild(qb);

	var topicBox=document.getElementById("TopicBox "+topic[topicNum]);
	if (topicBox!=null) topicBox.className="topicBox";
}

function addBlockQuote(id, tex) {
	var topicNum=-1;
	for (var i=0; i<topic.length; i++) if (id==topic[i]) topicNum=i;

	if (topicNum==-1) return;
	var node=document.getElementById("topicContent"+topicNum);
	var bq=document.createElement("blockquote");
	bq.innerHTML=tex;
	node.appendChild(bq);

	var topicBox=document.getElementById("TopicBox "+topic[topicNum]);
	if (topicBox!=null) topicBox.className="topicBox";
}

function createQuoteBox() {
	var qb=document.createElement("div");
	qb.className="quoteBox";
	return qb;
}

function addQuote(qb, str) {
	var p=document.createElement("p");
	p.innerHTML=str;
	p.className="quotation";
	qb.appendChild(p);
}

function addCite(qb, str) {
	var p=document.createElement("p");
	p.innerHTML=str;
	p.className="citation";
	qb.appendChild(p);
}


function createTable(x, y) {
	var tab=document.createElement("table");
	for (var i=0; i<x; i++) {
		var row=tab.insertRow(i);
		for (var j=0; j<y; j++) {
			row.insertCell(j);
		}
	}
	return tab;
}

function setValue(tab, x, y, tex, head) {
	tab.rows[x].cells[y].innerHTML=tex;
	if (head) tab.rows[x].cells[y].className="tableHeading";
}

function addTable(id, tab) {
	var topicNum=-1;
	for (var i=0; i<topic.length; i++) if (id==topic[i]) topicNum=i;

	if (topicNum==-1) return;
	var node=document.getElementById("topicContent"+topicNum);

	var tableDiv=document.createElement("div");
	tableDiv.className="tableBox";
	tableDiv.appendChild(tab);
	node.appendChild(tableDiv);

	var topicBox=document.getElementById("TopicBox "+topic[topicNum]);
	if (topicBox!=null) topicBox.className="topicBox";
}

/** TO DO: make these more DOM-esque */

function makeLink(url, text, newWindow) {
	var s="<a href=\""+url;
	if (newWindow) s=s+"\" target=\"_blank";
	s=s+"\">"+text+"</a>";
	return s;
}

function makeFigure(file, text) {
	return "<img class=\"figure\" src=\"figures/"+file+"\" alt=\""+text+"\"/>";
}

function makeRating(stars) {
	var s="";
	for (var i=0; i<stars; i++)
		s+="<img class=\"rating\" src=\"images/onestar.png\" alt=\"*\"/>";

	return s;
}

/**
 * A workaround for differing clearing behaviour in user agents. Creates an
 * invisible right-cleared div that should be appended last in a topic content
 * box to force the box to expand low enough to hold all elements, e.g.
 * floated images.
 */

function clearBox(id) {
	var d=document.createElement("div");
	var topicNum=-1;
	for (var i=0; i<topic.length; i++) if (id==topic[i]) topicNum=i;

	if (topicNum==-1) return;
	var node=document.getElementById("topicContent"+topicNum);
	d.className="clear";
	node.appendChild(d);
}

/**
 * Scrolls the page such that the named topic box's top left coordinate will be
 * just inside the top left corner of the viewport.
 */

function gotoTopic(topic) {
	var target=document.getElementById("TopicBox "+topic);
	if (target!=null) {
		var x=0; var y=0;

		while (target!=null) {
			x+=target.offsetLeft; y+=target.offsetTop;
			target=target.offsetParent;
		}
		window.scrollTo(x, y);
	}
}