/**
 * 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() {
	var movie = document.getElementById("vidPlayer");

	if (!composing) {
		// pause the video
		pause();
		
		document.getElementById("vidPlayer").style.visibility="hidden";
				
		// swap text
		replaceText("toggleNoteHref", "Save Note", "toggleNoteText");
		replaceText("newNoteHref", "Compose New Note", "newNoteText");
		replaceText("cancelNoteHref", "Cancel Edit", "cancelNoteText");
		replaceText("deleteNoteHref", "Delete Note", "deleteNoteText");
		
		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("composeArea").style.display="block";
		document.getElementById("noteArea").style.display="none";
		document.getElementById("composeNote").style.display="block";
	
		//swap the background colors for the page
		document.getElementsByTagName("body").item(0).style.backgroundColor="#666666";
		document.getElementById("anchorContainer").style.background="";
		document.getElementById("transcriptTitle").style.background="";
		document.getElementById("noteTitle").style.background="";
		document.getElementById("transcriptArea").style.background="";
		document.getElementById("playerTable").style.backgroundColor="#666666";
		document.getElementById("appArea").style.backgroundColor="#666666";
		document.getElementById("transcriptArea").style.backgroundColor="#999999";

		clearAnchors();
		addComposingAnchors();

		composing = true;
	} else {
	
		document.getElementById("vidPlayer").style.visibility="visible";
	
		// play the video
		play();
		
		// 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', 'Edit Notes', 'toggleNoteText');

		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("composeArea").style.display="none";
		document.getElementById("noteArea").style.display="block";
		document.getElementById("composeNote").style.display="none";
		
		//swap the background colors for the page
		document.getElementsByTagName("body").item(0).style.backgroundColor='';
		document.getElementById("anchorContainer").style.background=anchorContainerBackground;
		document.getElementById("transcriptTitle").style.background=transcriptTitleBackground;
		document.getElementById("noteTitle").style.background=noteTitleBackground;
		document.getElementById("transcriptArea").style.background=transcriptAreaBackground;
		document.getElementById("playerTable").style.backgroundColor='';
		document.getElementById("appArea").style.backgroundColor='';
		document.getElementById("transcriptArea").style.backgroundColor='';
		document.getElementById("noteArea").style.backgroundColor='';
		
		clearContent(document.getElementById("composeAnchor"));
		clearAnchors();
		addPlayingAnchors();
		
		composing = false;
	}
	
	clearComposeNote();
}

function clearComposeNote() {
		replaceText("noteMode", "Select an item from the TOC", "noteModeText");
		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() {
	for (var i=0; i<anchors.length; i++) {
		anchor = document.createElement("a");
		anchor.setAttribute("id", "anchor" + i);
		anchor.setAttribute("href", "javascript:void(0)");
		
		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);");
		
		// The following is a work around to assign an onclick event to Internet Explorer
		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;
}