/* Main javascript file that runs the mangareader page.  Contains the following functions:
* pageInit: Starts off by inserting HTML into a div container for the manga title information.
*	Then calls the pageUpdate function with the first page in the manga.
* pageUpdate: Updates the page by insterting HTML code into the already existing div containers
*	for the image and map coordinates only.  Also fills in the panelText array which contains
*	all the text for each panel..
* printText: Updates the text display panel by inserting HTML into the div container for the 
*	text panel.
* grammarWindow: Opens a new window to display a new page with any given grammar content.
*
* This script requires: jtexttoHTML.js
*/

/* Global variables used in the mangareader script */
var panelText = new Array( ); // Array to hold text that will be displayed when a text bubble is clicked.
var transText = new Array( ); // Array to hold all the English translation (for popup)
var kanjiText = new Array( ); // Array to hold the kanji sentence (for popup)
var romajiText = new Array( ); // Array to hold the romaji sentence (for popup)

var currentPage; // The current manga page the user is on.
var newwindow; // The grammar window.
var jtextToggle = 1; // 1 = English, 2 = Kanji, 3 = Romaji
var popupToggle = true; // Turns the popups on and off

function pageInit( ) {
	currentPage = 0;
	titleUpdate();
	pagenumUpdate();
	pageUpdate(currentPage);
}

function pageUpdate(pageNum) {
	
	/* Check to see if the pageNum passed is less than 0 or greater than the 
	 * number of pages in the manga */
	if(pageNum < 0) {
		currentPage = 0;
	} else if(pageNum > (xmlDoc.getElementsByTagName("page").length - 1)) {
		currentPage = xmlDoc.getElementsByTagName("page").length - 1;
	} else {
		currentPage = pageNum;
	}

	/* Get various information for each panel in the XML doc.
	 * panelText for each panel
	 * transText for each panel
	 * kanjiText for each panel
	 * romajiText for each panel */
	var panels = xmlDoc.getElementsByTagName("page")[pageNum].getElementsByTagName("panel");	
	for(var i = 0; i < panels.length; i++) {
		/* Fill in the panelText varible with the text for all the panels on the current page */
		panelText[i] = jtexttoHTML(panels[i]);
		
		/* If there are notes or links associated with the text, add them.*/
		var areNotes = (panels[i].getElementsByTagName("notes")[0] != null && panels[i].getElementsByTagName("notes")[0].firstChild != null);
		var areLinks = (panels[i].getElementsByTagName("links")[0] != null && panels[i].getElementsByTagName("links")[0].firstChild != null);

		if(areNotes || areLinks) {
			panelText[i] += "<div class=\"notesContainer\"><div class=\"notes\">";
			panelText[i] += "<h4>Notes</h4>";

			if(areNotes) {
				for(var j = 0; j < panels[i].getElementsByTagName("notes").length; j++) {
					panelText[i] += "<p>";
					panelText[i] += panels[i].getElementsByTagName("notes")[j].firstChild.nodeValue;
					panelText[i] += "</p>";
				}
			}
			if(areLinks) {
				panelText[i] += "<p class=\"links\"><b>Links: </b>";
				for(var j=0; j < panels[i].getElementsByTagName("links").length; j++) {
					panelText[i] += "<a href=\"javascript:grammarWindow('" + panels[i].getElementsByTagName("links")[j].getAttribute("name") + "')\">" + panels[i].getElementsByTagName("links")[j].firstChild.nodeValue + "</a>&nbsp; &nbsp;";
				}
				panelText[i] += "</p>";
			}
			
			panelText[i] += "</div></div>";
		}
		
		/* Fill in the transText array with the English translation of the text */
		var areCtrans = (panels[i].getElementsByTagName("ctrans")[0] != null && panels[i].getElementsByTagName("ctrans")[0].firstChild != null);
		var areRtrans = (panels[i].getElementsByTagName("rtrans")[0] != null && panels[i].getElementsByTagName("rtrans")[0].firstChild != null);
		
		if(areCtrans) {
			transText[i] = panels[i].getElementsByTagName("ctrans")[0].firstChild.nodeValue;
		} else if(areRtrans) {
			transText[i] = panels[i].getElementsByTagName("rtrans")[0].firstChild.nodeValue;
		}
		
		/* Fill in the kanjiText array with the Japanese kanji for the text */
		/* Fill in the romajiText array with the Japanese kanji for the text */
		var areJtext = (panels[i].getElementsByTagName("jtextset")[0] != null && panels[i].getElementsByTagName("jtextset")[0].firstChild != null);
		if(areJtext) {
			kanjiText[i] = "";
			romajiText[i] = "";
			for (j = 0; j < panels[i].getElementsByTagName("jtextset").length; j++) {
				kanjiText[i] += panels[i].getElementsByTagName("jtextset")[j].getElementsByTagName("kanji")[0].firstChild.nodeValue;
				romajiText[i] += panels[i].getElementsByTagName("jtextset")[j].getElementsByTagName("romaji")[0].firstChild.nodeValue + " ";
			}
		} else {
			kanjiText[i] = "Kanji not yet availible";
			romajiText[i] = "Romaji not yet availible";
		}
	}
	
	/* Find all the map coordinates for the text bubbles for each page */
	var mapHTML = "";	
	for(var i = 0; i < panels.length; i++) {
		var coords = panels[i].getAttribute("dim");
		mapHTML += "<area shape=\"rect\" coords=\""+coords+"\" href=\"javascript:printText("+i+")\" onmouseover=\"showTrans(event, "+i+")\" onmouseout=\"hideTrans()\" />";
	}
	document.getElementById("page").innerHTML=mapHTML;
	
	/* Find and fill in page image */
	var image = "images/" + xmlDoc.getElementsByTagName("page")[pageNum].getAttribute("img");
	var imageLocation = "<img src=\"" + image + "\" width=\"400\" height=\"600\" usemap=\"#page\" />";
	document.getElementById("image").innerHTML=imageLocation;
	
	/* Update the page numbers to highlight the currentPage */
	pagenumUpdate();
}

function popToggle() {
	if(popupToggle == false) {
		popupToggle = true;
	} else {
		popupToggle = false;
	}
	buttonUpdate();
}

function textToggle() {
	if(jtextToggle == 1) {
		jtextToggle = 2;
	} else if (jtextToggle == 2) {
		jtextToggle = 3;
	} else {
		jtextToggle = 1;
	}
	buttonUpdate();
	titleUpdate();
	pageUpdate(currentPage);
}

function titleUpdate() {
	if(jtextToggle != 1) {
		seriesTitle = xmlDoc.getElementsByTagName("series")[0].getAttribute("jtitle");
		storyTitle = xmlDoc.getElementsByTagName("story")[0].getAttribute("jtitle");
	} else {
		seriesTitle = xmlDoc.getElementsByTagName("series")[0].getAttribute("title")	
		storyTitle = xmlDoc.getElementsByTagName("story")[0].getAttribute("title");
	}
	volumeNum =  xmlDoc.getElementsByTagName("volume")[0].getAttribute("id");
	storyNum = xmlDoc.getElementsByTagName("story")[0].getAttribute("id");
	
	var titleInfo = "<h1>Manga Reader</h1>";
	titleInfo += "<h2>" + seriesTitle + "</h2>";
	titleInfo += "<h3>Vol. " + volumeNum + "-" + storyNum + ": " + storyTitle + "</h3>";
	
	document.getElementById("title").innerHTML=titleInfo;
}
	

function buttonUpdate() {
	if(popupToggle) {
		var newButton = "<p><a href=\"javascript:popToggle();\"><img src=\"images/Popups.gif\" /></a>  ";
	} else {
		var newButton = "<p><a href=\"javascript:popToggle();\"><img src=\"images/NoPopups.gif\" /></a>  ";
	}
	if(jtextToggle == 1) {
		newButton += "<a href=\"javascript:textToggle();\"><img src=\"images/English.gif\" /></a></p>";
	} else if(jtextToggle == 2) {
		newButton += "<a href=\"javascript:textToggle();\"><img src=\"images/Kanji.gif\" /></a></p>";
	} else {
		newButton += "<a href=\"javascript:textToggle();\"><img src=\"images/Romaji.gif\" /></a></p>";
	}
	document.getElementById("buttons").innerHTML = newButton;
}

function pagenumUpdate () {
	var numPages = xmlDoc.getElementsByTagName("page").length;
	var pages = "<p>";
	for (i=1; i < numPages+1; i++) {
		pages += "<a ";
		if(i-1 == currentPage) {
			pages += "class=\"current\" "; // Current page has a different color
		}
		pages += "href=\"javascript:pageUpdate(" + (i-1) + ")\">" + i + "</a>  ";
	}
	pages += "</p>";
	
	document.getElementById("pages").innerHTML = pages;
}

function printText(panel) {
	displayText = panelText[panel];
	document.getElementById("text").innerHTML=displayText;
}

function grammarWindow(concept) {
	var file = "grammar.html?concept="+concept;
	newwindow=window.open(file,'name','height=500,width=600,left=50,top=50');
	if (window.focus) {
		newwindow.focus();
	}
}

function showTrans(e, panelNum) {
	if (popupToggle) {
		if(jtextToggle == 1) {
			tText = "<div class=\"popMain\">" + transText[panelNum] + "</div>";
		} else if(jtextToggle == 2) {
			tText = "<div class=\"popMain\">" + kanjiText[panelNum] + "</div>";
		} else {
			tText = "<div class=\"popMain\">" + romajiText[panelNum] + "</div>";
		}
		document.getElementById("popTrans").style.top = (e.pageY + 25) + "px";
		document.getElementById("popTrans").style.left = (e.pageX + 25) + "px";
		document.getElementById("popTrans").innerHTML = tText;
		document.getElementById("popTrans").style.visibility = "visible";
	}
}

function hideTrans() {
	if (popupToggle) {
		document.getElementById("popTrans").style.visibility = "hidden";
	}
}