addLoadEvent(prepareReply);
addLoadEvent(prepareCancel);

function prepareReply() {
	//checkpoints
	if (!document.getElementsByTagName) return false;
	if (!document.getElementsByTagName("a")) return false;

	//create array with all "a" (links) elements
	var replies = document.getElementsByTagName("a");
	//loop through replies
	for (var i=0; i < replies.length; i++) {		
		//if current "a" in iteration has class name "reply"
		if (replies[i].className == "reply") {
			//show link since javascript is enabled
			show(replies[i].getAttribute("id"));
		
			//when link is clicked
			replies[i].onclick = function() {
				//get the comment id number, which is stored in the "id" attribute
				var str = this.getAttribute("id");

				/* remove the first 3 characters since the comment id will be 
					stored like "id-000" where 000 is the comment id number */
				var id  = str.substring(3);			

				//to make sure there's no other comment divs highlighted, set to default
				setDefault();

				//now, highlight the current comment div we're going to reply to
				highlightComment(id);

				//show link to cancel reply
				toggleCancel(true);

				//set hidden field with id value
				setReplyID(id);

				//change form title to Leave a reply to "author"
				setFormTitle("Leave a reply to " + getAuthor(id));
			}
		}
	}
}

function prepareCancel() {
	//checkpoints
	if (!document.getElementById) return false;
	if (!document.getElementById("reply_id")) return false;

	var link = document.getElementById("cancel_reply");
	link.onclick = function() {
		//to make sure there's no other comment divs highlighted, set to default
		setDefault();
	
		//set hidden field with id value
		setReplyID(null);
	
		//change form title to Leave a reply to "author"
		setFormTitle("Leave a Comment");
		
		toggleCancel(false);
		
		return false;
	}
}

function toggleCancel(bool) {
	obj = document.getElementById("cancel_reply");

	if (bool == true) {
		//if currently set to hide
		if (obj.style.display != "inline") {
			//show the element
			obj.style.display = "inline";
		}
	}
	else if (bool == false) {
		if (obj.style.display == "inline") {
			obj.style.display = "none";
		}
	}
}

//add another class to the element with "id" so that it inherits the "highlighted" class properties
function highlightComment(id) {
	var comment = document.getElementById("comment-"+id);
	comment.className = "comment highlighted";
}

//set the id number value to the hidden field with the id "reply_id"
function setReplyID(id) {
	var field = document.getElementById("reply_id");
	field.value = id;
}

/* set the div which has "comment highlighted" classes to only 
	"comment" class  to remove inherited properties from "highlighted" class */
function setDefault() {
	//checkpoints
	if (!document.getElementsByTagName) return false;
	if (!document.getElementsByTagName("div")) return false;

	var comments = document.getElementsByTagName("div");
	for (var i=0; i < comments.length; i++) {
		if (comments[i].className == "comment highlighted") {
			comments[i].className = "comment";
		}
	}
}

function getAuthor(comment_id) {
	//create object
	var div = document.getElementById("comment-"+comment_id);
	//create array with all img tags (only one img is supposed to be in the markup though)
	var imgs = div.getElementsByTagName("img");

	//if first element of array (i.e. img tag) has a class name "usr_img"
	if(imgs[0].className == "gravatar") {
		return imgs[0].getAttribute("alt");
	}
}

function setFormTitle(str) {
	var title = document.getElementById("leave_comment");
	title.firstChild.nodeValue = str;
}