/* essay.js
Creates dynamically appearing Div's linked from Span tags in DOM.

Span tags format: <span id="comment-ref-3"> (where 3 is the
corresponding number in the div id)

Div tag format: <div id="comment-3">	(note: number matches span
above, therefore these two elements will be associated on the page)

This JS file dynamically adds the appropriate CSS file link to the DOM (essay.css)
*/

insertStyleSheet("assets/styles/essay2.css");
var curEvt = new universalEvent();

function showComment(e) {
	curEvt.refresh(e);
	
	closeAll();
	var n,p,d;
	while (curEvt.evtSrc.nodeName.toLowerCase() != "span") {
		if (curEvt.evtSrc.parentNode.nodeName.toLowerCase() == "body") return false;
		curEvt.evtSrc = curEvt.evtSrc.parentNode;
		curEvt.evtSrcId = curEvt.evtSrc.id;
	}
	var isImageCmt = (curEvt.evtSrcId.indexOf("image") > -1)?true:false;
	
	n=parseInt(curEvt.evtSrcId.substr(curEvt.evtSrcId.lastIndexOf("-")+1))
	if (!isImageCmt) highlightRef(n,true);
	//else showHideImage(n);

	p=findTopInlineNode(curEvt.evtSrc);
	d=(isImageCmt) ?document.getElementById("comment-img-" + n):document.getElementById("comment-" + n);
	
	p.parentNode.insertBefore(d,p);
	d.style.display="block";
	//d.style.position="absolute";
	d.style.right="10px";
	//d.style.clear="right";
	d.style.zIndex="1";
	if (d.scrollIntoView) d.scrollIntoView(true);
}

function closeDiv(e) {
	curEvt.refresh(e);
	var p;
	(p=curEvt.evtSrc.parentNode).style.display="";
	highlightRef(parseInt(p.id.substr(p.id.lastIndexOf("-")+1)),false);
	
	var t=0;
	while ((d=document.getElementById("comment-image-" + ++t)) != null) {
		d.style.visibility="visible";
	}
}

function highlightRef (num, on) {
	var r = document.getElementById("comment-ref-" + num);
	if (r) {
		if (on)	r.className = "essay-comment-ref-img-on";
		else r.className = "essay-comment-ref";
	}
}

function newCloseGraphic() {
	var im = document.createElement("img");
	im.setAttribute("src","assets/images/close.gif");
	im.setAttribute("width","14");
	im.setAttribute("height","14");
	im.setAttribute("alt","Close box");
	im.onclick=closeDiv;
	im.className = "close-but";
	return im;
}

function newPencilGraphic() {
	var im = document.createElement("img");
	im.setAttribute("src","assets/images/pencil.gif");
	im.setAttribute("width","15");
	im.setAttribute("height","15");
	im.style.verticalAlign = "middle";
	return im;
}

function closeAll() {
	var i=0;
	while ((d=document.getElementById("comment-" + ++i)) != null) {
		d.style.display="";
		highlightRef(i,false);
	}
	i=0;
	while ((d=document.getElementById("comment-img-" + ++i)) != null) {
		d.style.display="";
	}
}

function showHideImage(i) {
	var t=0;
	while ((d=document.getElementById("comment-image-" + ++t)) != null) {
		d.style.visibility="visible";
	}	
	d=document.getElementById("comment-image-" + i);
	var o = (d.style.visibility=="hidden") ? d.style.visibility="visible" : d.style.visibility="hidden";	
}

var i=0,d,o,sp;
while (d=document.getElementById("comment-" + ++i)) {
	if (sp=document.getElementById("comment-ref-" + i)) {
		d.className="essay-img-comment";
		d.insertBefore(newCloseGraphic(),d.firstChild);
		sp=document.getElementById("comment-ref-" + i);
		p=findTopInlineNode(sp);
		p.parentNode.insertBefore(d,p);
	}
}

i=0;
while (d=document.getElementById("comment-img-" + ++i)) {
	if (sp=document.getElementById("comment-image-" + i)) {
		d.className="essay-comment";
		if ((o=document.getElementById("comment-img-" + i).getElementsByTagName("h4")).length > 0) o[0].style.color="#339";
		d.insertBefore(newCloseGraphic(),d.firstChild);
	}
}

i=0;
while (d=document.getElementById("comment-ref-" + ++i)) {
	d.className="essay-comment-ref";
	d.title=(o=document.getElementById("comment-" + i).getElementsByTagName("h4")).length > 0 ? o[0].innerHTML + " - click to display": "Click to display comment";
	
	d.onclick=showComment;
}

i=0;
while (d=document.getElementById("comment-image-" + ++i)) {
	d.onclick=showComment;
	d.title=(o=document.getElementById("comment-img-" + i).getElementsByTagName("h4")).length > 0 ? o[0].innerHTML + " - click to display": "Click to display comment";
	d.firstChild.alt=d.title;
}

function getTotalOffset(htmlElement) {
	if (!htmlElement) return false;
	var tot=0;//htmlElement.offsetTop;
	while (htmlElement.offsetParent) {
		tot += htmlElement.offsetTop;
		htmlElement = htmlElement.offsetParent;
	}
	return tot;
}

function checkImgs () {
	var cOffset,lastTop=0,i=0;
	while (d=document.getElementById("comment-image-" + (++i))) {
		cOffset = getTotalOffset(d);
		if (i>1 && lastTop > (cOffset-55)) {
			d.style.top = (lastTop+55).toString() + "px";
		}
		lastTop = getTotalOffset(d);
	}
}

runOnLoad("checkImgs();");