/**
 * This function changes the color scheme of the page to indicate you're mode of operation has changed.
 * It also changes some functionality of the page to allow composing new notes.
 */
function toggleComposeNote() {

	if (!composing) {
		// pause the video
		
//		document.getElementById("imgViewer").style.visibility="hidden";
//		document.getElementById("swfHolder").style.visibility="hidden";
		// swap text
		replaceText("toggleNoteHref", "toggleNoteText", "Save Note" );
		replaceText("newNoteHref", "newNoteText", "Compose New Note" );
		replaceText("cancelNoteHref", "cancelNoteText", "Cancel Edit" );
		replaceText("deleteNoteHref", "deleteNoteText", "Delete Note" );
		
		document.getElementById("composeAnchorLabel").style.display="none";
		document.getElementById("composeAnchor").style.display="none";
		document.getElementById("noteMode").style.display="block";
		
//		document.getElementById("toggleNoteHref").setAttribute("onclick", "if(addUpdateNote()){toggleComposeNote();}");
		document.getElementById("toggleNoteHref").onclick = function() {
			if (addUpdateNote()) {
				toggleComposeNote();
			}
		}	

		document.getElementById("noteArea").style.display="none";
		document.getElementById("noteArea").style.visibility="hidden";
		document.getElementById("noteArea").style.height="0px";
		document.getElementById("composeNote").style.display="block";
		document.getElementById("composeNote").style.height="150px";
		document.getElementById("composeNote").style.visibility="visible";

	
		//swap the background colors for the page
		document.getElementsByTagName("body").item(0).style.backgroundColor="#666666";
		document.getElementById("anchorContainer").style.background="";
		document.getElementById("noteTitle").style.background="";
		document.getElementById("appArea").style.backgroundColor="#666666";
		document.getElementById("transcriptArea").style.backgroundColor="#999999";

		document.getElementById("spacerRight").style.width="314px";
		document.getElementById("pageDirection").style.display="none";
		document.getElementById("pageDirection").style.visibility="hidden";
		document.getElementById("pageDirection").style.width="0px";
		
		document.getElementById("spacerMiddleNotesImg").style.visibility="visible";
		document.getElementById("spacerMiddleNotesImg").style.width="1px";
		document.getElementById("spacerMiddleNotesImg").style.height="18px";

		document.getElementById("spacerMiddleNotes").style.visibility="visible";
		document.getElementById("spacerMiddleNotes").style.width="10px";

		document.getElementById("composeHelpImg").style.visibility="visible";
		document.getElementById("composeHelpImg").style.width="150px";
		document.getElementById("composeHelpImg").style.height="18px";


		document.getElementById("tabShowTransNoteBoxHelp").style.visibility="visible";
		document.getElementById("tabShowTransNoteBoxHelp").style.width="150px";
		document.getElementById("tabShowTransNoteBoxHelp").style.height="18px";
		document.getElementById("tabShowTransNoteBoxHelp").style.borderTopWidth="1px";
		document.getElementById("tabShowTransNoteBoxHelp").style.borderRightWidth="1px";
		document.getElementById("tabShowTransNoteBoxHelp").style.borderBottomWidth="1px";
		document.getElementById("tabShowTransNoteBoxHelp").style.borderLeftWidth="1px";


		document.getElementById("tabShowTransNoteBoxHelp").style.background=tabShowHelpNotesOff;
		document.getElementById("tabShowTransNoteBoxHelp").style.borderBottom="1px solid #E32235";		
		
		clearAnchors();
		addComposingAnchors();

		composing = true;
	} else {
//		document.getElementById("swfHolder").style.visibility="visible";
//		document.getElementById("imgViewer").style.visibility="visible";

		// swap text
		clearContent(document.getElementById("toggleNoteHref"));
		img = document.createElement("img");
		img.setAttribute("src", starView);
		img.setAttribute("className", "starImg");
		img.setAttribute("class", "starImg");
		document.getElementById("toggleNoteHref").appendChild(img);
		addText('toggleNoteHref', 'toggleNoteText', 'Edit Notes' );

		replaceText("newNoteHref", "newNoteText", "" );
		replaceText("cancelNoteHref", "cancelNoteText", "" );
		replaceText("deleteNoteHref", "deleteNoteText", "");
		
		document.getElementById("composeAnchorLabel").style.display="block";
		document.getElementById("composeAnchor").style.display="block";
		document.getElementById("noteMode").style.display="none";
		
		document.getElementById("toggleNoteHref").setAttribute("onclick", "toggleComposeNote();");
		document.getElementById("toggleNoteHref").onclick = function() {
			toggleComposeNote();
		}
		
		document.getElementById("composeNote").style.visibility="hidden";
		document.getElementById("composeNote").style.height="0px";
		document.getElementById("composeNote").style.display="none";
		document.getElementById("noteArea").style.display="block";
		document.getElementById("noteArea").style.height="150px";
		document.getElementById("noteArea").style.visibility="visible";
		
		//swap the background colors for the page
		document.getElementsByTagName("body").item(0).style.backgroundColor='';
		document.getElementById("anchorContainer").style.background=anchorContainerBackground;

		document.getElementById("noteTitle").style.background=noteTitleBackground;

		document.getElementById("appArea").style.backgroundColor='';
		document.getElementById("transcriptArea").style.backgroundColor='#F3F0F0';
		document.getElementById("noteArea").style.backgroundColor='#F3F0F0';



		document.getElementById("spacerMiddleNotesImg").style.width="0px";
		document.getElementById("spacerMiddleNotesImg").style.height="0px";
		document.getElementById("spacerMiddleNotesImg").style.visibility="hidden";

		document.getElementById("spacerMiddleNotes").style.width="0px";
		document.getElementById("spacerMiddleNotes").style.visibility="hidden";

		document.getElementById("composeHelpImg").style.width="0px";
		document.getElementById("composeHelpImg").style.height="0px";			
		document.getElementById("composeHelpImg").style.visibility="visible";


		document.getElementById("tabShowTransNoteBoxHelp").style.borderTopWidth="0px";
		document.getElementById("tabShowTransNoteBoxHelp").style.borderRightWidth="0px";
		document.getElementById("tabShowTransNoteBoxHelp").style.borderBottomWidth="0px";
		document.getElementById("tabShowTransNoteBoxHelp").style.borderLeftWidth="0px";	
		document.getElementById("tabShowTransNoteBoxHelp").style.width="0px";
		document.getElementById("tabShowTransNoteBoxHelp").style.visibility="hidden";	

		document.getElementById("spacerRight").style.width="326px";
		document.getElementById("pageDirection").style.display="block";
		document.getElementById("pageDirection").style.visibility="visible";
		document.getElementById("pageDirection").style.width="150px";
				
		clearContent(document.getElementById("composeAnchor"));
		clearAnchors();
		addPlayingAnchors();
		
		composing = false;
	}
	
	clearComposeNote();
}

function clearComposeNote() {
		replaceText("noteMode", "noteModeText", "Select an item from the TOC" );
		clearAnchorHighlights();
		document.getElementById("composeNoteTitle").value='Type your new note title here.';
		
		document.getElementById("composeNoteTitle").setAttribute("onfocus", "clearValue(this);");
		document.getElementById("composeNoteTitle").onfocus= function() {
			clearValue(this);
		}
		
		document.getElementById("composeNoteInput").value='Type your new annotation here.';
		document.getElementById("composeNoteInput").setAttribute("onfocus", "clearValue(this);");
		document.getElementById("composeNoteInput").onfocus= function() {
			clearValue(this);
		}
		
		document.getElementById("composeNoteType").value='';
		document.getElementById("composeNoteXmlId").value='';
		document.getElementById("composeNoteId").value='';
}

function addComposingAnchors() {

	// create the segment header div (expanded)

	anchor = document.createElement("div");
	anchor.setAttribute("id", "anchor" + curIndex);
	anchor.setAttribute("xmlid", transcriptIndex[curIndex].key);
	anchor.setAttribute("tag", "page");
	anchor.setAttribute("title", "Page " + leaveDigits(transcriptIndex[curIndex].key));
	anchor.setAttribute("className", "segmentAnchor"); // IE specific
	anchor.setAttribute("class", "segmentAnchor"); // everything else
	anchor.appendChild(document.createTextNode("- Page " + leaveDigits(transcriptIndex[curIndex].key)));
	anchor.setAttribute("noteid", "");
	anchor.setAttribute("text", "");		

	anchor.setAttribute("onclick", "javascript:highlightAnchorComposing(this);");
	anchor.onclick = function() {
		highlightAnchorComposing(this);
	}	
	div = document.createElement("div");
		
	div.setAttribute("className", "anchorComposeDiv");
	div.setAttribute("class", "anchorComposeDiv");
	div.style.background=segmentBackground;
	
	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("noteid", anchors[i].noteid);
		
		if (anchors[i].noteid == null) {
			anchor.setAttribute("className", "anchorCompose"); // IE specific
			anchor.setAttribute("class", "anchorCompose"); // everything else
		} else {
			anchor.setAttribute("className", "anchorNoteCompose"); // IE specific
			anchor.setAttribute("class", "anchorNoteCompose"); // everything else
		}
		
		anchor.setAttribute("tag", anchors[i].tag);
		anchor.setAttribute("title", anchors[i].title);
		anchor.setAttribute("text", anchors[i].text);
		
		anchor.setAttribute("xmlid", anchors[i].xmlid);
		
		// The following seems to work in all but Internet Explorer
		anchor.setAttribute("onclick", "javascript:highlightAnchorComposing(this);");
		anchor.onclick = function() {
			highlightAnchorComposing(this);
		}		
		anchor.appendChild(document.createTextNode(anchors[i].title));
		
		div = document.createElement("div");
		
		if (anchors[i].noteid == null) {
			div.setAttribute("className", "anchorComposeDiv");
			div.setAttribute("class", "anchorComposeDiv");
		} else {
			div.setAttribute("className", "anchorNoteComposeDiv");
			div.setAttribute("class", "anchorNoteComposeDiv");
		}
		
		document.getElementById("anchors").appendChild(div);

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

function ajaxAddNote(params) {
	http_request = getRequestObject();
	http_request.open('POST', 'addNote.metaInfo', true);
	http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	http_request.setRequestHeader("Content-length", params.length);
	http_request.setRequestHeader("Connection", "close");
	
	http_request.onreadystatechange = function() {
		if (http_request.readyState == 4 && http_request.status == 200) {
			alert("Annotation successfully added.");
		}
	};
	http_request.send(params);
}

function ajaxUpdateNote(params) {
	http_request = getRequestObject();
	http_request.open('POST', 'updateNote.metaInfo', true);
	http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	http_request.setRequestHeader("Content-length", params.length);
	http_request.setRequestHeader("Connection", "close");
	
	http_request.onreadystatechange = function() {
		if (http_request.readyState == 4 && http_request.status == 200) {
			alert("Annotation successfully updated.");
		}
	};
	http_request.send(params);
}

function ajaxDeleteNote(params) {
	http_request = getRequestObject();
	http_request.open('POST', 'deleteNote.metaInfo', true);
	http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	http_request.setRequestHeader("Content-length", params.length);
	http_request.setRequestHeader("Connection", "close");
	
	http_request.onreadystatechange = function() {
		if (http_request.readyState == 4 && http_request.status == 200) {
			alert("Annotation successfully deleted.");
		}
	};
	http_request.send(params);
}

function addUpdateNote() {
	if (document.getElementById("composeNoteTitle").value == '') {
		alert("Enter a title for your note");
		return false;
	}
	if (document.getElementById("composeNoteInput").value == '') {
		alert("Enter a note body");
		return false;
	}
	if (document.getElementById("composeNoteXmlId").value == '') {
		alert("Select an item from the table of contents to associate the note with.");
		return false;
	}

	var title = "title:"+document.getElementById("composeNoteTitle").value;
	var note  = "note:"+document.getElementById("composeNoteInput").value;
	var type  = "type:"+document.getElementById("composeNoteType").value;
	var xmlid = "xmlId:"+document.getElementById("composeNoteXmlId").value;
	var id    = "id:"+document.getElementById("composeNoteId").value;
	// coid on end of params line
	
	var params = title + "\n" + note + "\n" + type + "\n" + xmlid + "\n" + id + "\n" + "coid:" + coid + "\n";
	
	
	if ("new" == document.getElementById("newOrEdit").value) {
		ajaxAddNote(params);
	} else { // else == "edit"
		ajaxUpdateNote(params);
	}
	
	return true;
}

function deleteNote() {
	if (document.getElementById("composeNoteId").value == '') {
		alert("Select a valid note for deletion.");
	} else {
		var id    = "id:"+document.getElementById("composeNoteId").value;
		var params = id + "\n" + "coid:" + coid + "\n";
		ajaxDeleteNote(params);
	}
	
	return true;
}