/**
 * Adds colorful highlighting to an anchor when clicked.
 * Also removes highlighting to other anchors when clicked.
 */
function highlightAnchorPlaying(anchorId) {
	if (document.getElementById(anchorId)) {
		var anchors = getElementsByClassName(document, "div", "tocAnchor");
		for (var i=0; i<anchors.length; i++) {
			anchors[i].style.color = ''; // Assigning null doesn't work in IE
		}
		
		document.getElementById(anchorId).style.color = '#FFE491';
		replaceText("transcriptTitle", document.getElementById(anchorId).getAttribute("title"), "transcriptTitleText");
		curAnchor = anchorId;
	}
}

function highlightIndexPlaying(anchorId) {
	if (document.getElementById(anchorId)) {
		var anchors = getElementsByClassName(document, "div", "segmentAnchor");
		for (var i=0; i<anchors.length; i++) {
			anchors[i].style.color = ''; // Assigning null doesn't work in IE
		}
		
		document.getElementById(anchorId).style.color = '#FFE491';

	}
}


function highlightAnchorComposing(anchor) {
	if (anchor != null) {
		if ("note" == anchor.getAttribute("tag")) {
			// set visual indicator that we're editing a note
			replaceText("noteMode", "noteModeText", "Editing..." );
			
			document.getElementById("composeNoteTitle").value=anchor.getAttribute("title");
			document.getElementById("composeNoteInput").value=anchor.getAttribute("text");
			
			// we know we're editing a note
			document.getElementById("newOrEdit").value='edit';
			
			document.getElementById("composeNoteId").value=anchor.getAttribute("noteid");
		} else {
			// set visual indicator that we're creating a new note attached to an index anchor
			replaceText("noteMode", "noteModeText", "Composing new..." );
			
			// we know we're creating a new note
			document.getElementById("newOrEdit").value='new';
			
			document.getElementById("composeNoteId").value='';
		}
		
		var anchors = getElementsByClassName(document, "div", "anchorCompose");
		for (var i=0; i<anchors.length; i++) {
			anchors[i].style.color = ''; // Assigning null doesn't work in IE
		}
		
		var anchors = getElementsByClassName(document, "div", "anchorNoteCompose");
		for (var i=0; i<anchors.length; i++) {
			anchors[i].style.color = ''; // Assigning null doesn't work in IE
		}
		
		anchor.style.color = '#FFE491';
		
		document.getElementById("composeNoteType").value='toc';
		document.getElementById("composeNoteXmlId").value=anchor.getAttribute("xmlid");

	}
}

function clearAnchorHighlights() {
		var anchors = getElementsByClassName(document, "div", "tocAnchor");
		for (var i=0; i<anchors.length; i++) {
			anchors[i].style.backgroundColor = ''; // Assigning null doesn't work in IE
		}
}

/**
 * AJAX calls or table of contents anchors
 */
function ajaxRequestToc(pid, segId, contentModel, coid) {
	var xhri = xhrRequest();
	xhr[xhri].open('GET', addRandomSeed("toc.metaInfo?pid="+pid+"&id="+segId+"&contentModel="+contentModel+"&coid="+coid), true);
	xhr[xhri].onreadystatechange = function() {
		if (xhr[xhri].readyState == 4 && xhr[xhri].status == 200) {
			ajaxProcessToc(xhr[xhri].responseXML);
			xi[xhri] = 1;
			xhr[xhri] = null;
		}
	};
	xhr[xhri].send(null);
}

function clearAnchors() {
	el = document.getElementById("anchors");
	nEl = el.cloneNode(false);
	el.parentNode.insertBefore(nEl, el);
	el.parentNode.removeChild(el);
}

/**
 * Create the anchors as a JavaScript array
 */
function ajaxProcessToc(responseXML) {
    // first add expanding divs for navigating, if there are any segments before the current one
	for (var i = 0; i<curIndex; i++) {
		div = document.createElement("div");
		div.setAttribute("className", "segmentDivClosed");
		div.setAttribute("class", "segmentDivClosed");
		div.style.background=segmentBackground;
		
		anchor = document.createElement("div");
		anchor.setAttribute("id", "anchor" + i);
		anchor.setAttribute("href", "javascript:void(0);");
		anchor.setAttribute("className", "segmentAnchor"); // IE specific
		anchor.setAttribute("class", "segmentAnchor"); // everything else
		
		// The following seems to work in all but Internet Explorer
		anchor.setAttribute("onclick", "javascript:switchToSegment(" + i + ")");
		anchor.onclick = function() {
			anchorId = this.id;//grab anchorId
			index = leaveDigits(this.id); // remove all characters except anchor index
			switchToSegment(index);
		}
		anchor.appendChild(document.createTextNode("+ Page " + leaveDigits(transcriptIndex[i].key)));
		
		div.appendChild(anchor);
        document.getElementById("anchors").appendChild(div);

    }

    var xmldoc = responseXML;
	
	// add your anchors if any to add...
	anchors = new Array();
		
	var toc = xmldoc.getElementsByTagName("toc")[0].childNodes;
	
	for (var i=0; i<toc.length; i++) {
		if (toc[i].tagName == "index") { // it's an index item, like chapter
			anchors[i] = {
			tag  : toc[i].tagName,
			type : toc[i].getAttribute("type"),
			xmlid: toc[i].getAttribute("xmlid"),
			title : toc[i].firstChild.data
			};
		} else { // it's a note
		anchors[i] = {
			tag    : toc[i].tagName,
			noteid : toc[i].getAttribute("id"),
			type   : toc[i].getAttribute("type"),
			xmlid  : toc[i].getAttribute("xmlid"),
			title  : toc[i].getElementsByTagName("title").item(0).firstChild.data,
			text   : toc[i].getElementsByTagName("body")[0].firstChild.data
			};
		}
	}
	// same data take care of notes here...
	notes = new Array();
	
	var noteEls = xmldoc.getElementsByTagName("note");
	for (var i = 0; i<noteEls.length; i++) {
		notes[i] = {
			type  : "NOTE",
			title : noteEls[i].getElementsByTagName("title").item(0).firstChild.data,
			text  : noteEls[i].getElementsByTagName("body").item(0).firstChild.data
		};
	}
	notesDone = true;
	
	// create the segment header div (expanded)
	div = document.createElement("div");
	div.setAttribute("className", "segmentDivOpen");
	div.setAttribute("class", "segmentDivOpen");
	div.style.background=segmentBackground;
	
	anchor = document.createElement("div");
	anchor.setAttribute("id", "anchor" + curIndex);
	anchor.setAttribute("href", "javascript:void(0);");
	anchor.setAttribute("className", "segmentAnchor"); // IE specific
	anchor.setAttribute("class", "segmentAnchor"); // everything else
	anchor.appendChild(document.createTextNode("- Page " + leaveDigits(transcriptIndex[curIndex].key)));
	
	document.getElementById("anchors").appendChild(div);
	document.getElementById("anchors").lastChild.appendChild(anchor);
	
	for (var i=0; i<anchors.length; i++) {
		anchor = document.createElement("div");
		anchor.setAttribute("id", anchors[i].xmlid);
		anchor.setAttribute("href", "javascript:void(0);");

		anchor.setAttribute("noteid", anchors[i].noteid);
		
		if (anchors[i].noteid == null) {
			anchor.setAttribute("className", "tocAnchor"); // IE specific
			anchor.setAttribute("class", "tocAnchor"); // everything else
		} else {
			anchor.setAttribute("className", "anchorNote"); // IE specific
			anchor.setAttribute("class", "anchorNote"); // everything else
			
			// only apply onclick command to notes for now...

			anchor.setAttribute("onclick", "javascript:showNote(" + i + ")");
			anchor.onclick = function() {
			showNote(this.getAttribute("index"));
			};

		}

		anchor.setAttribute("tag", anchors[i].tag);
		anchor.setAttribute("title", anchors[i].title);
		anchor.setAttribute("text", anchors[i].text);
		
		anchor.setAttribute("xmlid", anchors[i].xmlid);
		anchor.setAttribute("index", i);
		
		anchor.appendChild(document.createTextNode(anchors[i].title));
		
		div = document.createElement("div");
		
		if (anchors[i].noteid == null) {
			div.setAttribute("className", "anchorDiv");
			div.setAttribute("class", "anchorDiv");
		} else {
			div.setAttribute("className", "anchorNoteDiv");
			div.setAttribute("class", "anchorNoteDiv");
		}
		
		document.getElementById("anchors").appendChild(div);

		if (anchors[i].noteid != null) {		
			img = document.createElement("img");
			img.setAttribute("src", starView);
			img.setAttribute("className", "starImg");
			img.setAttribute("class", "starImg");
			document.getElementById("anchors").lastChild.appendChild(img);
		}
		
		document.getElementById("anchors").lastChild.appendChild(anchor);
    }
	
	div = document.createElement("div");
	div.setAttribute("className", "segmentDivSpacer");
	div.setAttribute("class", "segmentDivSpacer");
	document.getElementById("anchors").appendChild(div);

	// last add expanding divs for navigating, if there are any segments after the current one
	for (var i = curIndex+1; i<transcriptIndex.length; i++) { // +1 to skip the current one
		div = document.createElement("div");
		div.setAttribute("className", "segmentDivClosed");
		div.setAttribute("class", "segmentDivClosed");
		div.style.background=segmentBackground;
		
		anchor = document.createElement("div");
		anchor.setAttribute("id", "anchor" + i);
		anchor.setAttribute("href", "javascript:void(0);");
		anchor.setAttribute("className", "segmentAnchor"); // IE specific
		anchor.setAttribute("class", "segmentAnchor"); // everything else
		
		// The following seems to work in all but Internet Explorer
		anchor.setAttribute("onclick", "javascript:switchToSegment(" + i + ")");
		anchor.onclick = function() {
			anchorId = this.id;//grab anchorId
			index = leaveDigits(this.id); // remove all characters except anchor index
			switchToSegment(index);
			}
		anchor.appendChild(document.createTextNode("+ Page " + leaveDigits(transcriptIndex[i].key)));
		
		document.getElementById("anchors").appendChild(div);
		document.getElementById("anchors").lastChild.appendChild(anchor);
    }


    tocDone = true;
	highlightIndexPlaying("anchor" + curIndex);

}

function addPlayingAnchors() {
	ajaxRequestToc(pid, segId, contentModel, coid);
}