// JavaScript Document
// created by John Spiger on Dec. 30, 2008
// description:
//		contains a bunch of functions for working with footnotes on the
//		kanjipress.com website.
//
//		The KP namespace must already be defined for these to work properly.
//		(The KP namespace is an object called "KP".)
//
//		dojo.behavior must be provided for this bundle.
//		dojo.require("dojo.behavior");


//AnimatedFootnote class creates a footnote with two methods. One method shows the
//footnote and the other hides it.
//The constructor function expects for a parameter the original paragraph
//node used for the footnote.
KP.AnimatedFootnote = function(note){
	this.box = dojo.doc.createElement("div");
	dojo.addClass(this.box, "animated_footnote");
	this.box.appendChild( dojo.clone(note) );
	dojo.style(this.box,{
		"opacity": "0",
		"display": "none"
	});
	dojo.body().appendChild(this.box);
	//create the dojo animation for showing the footnote
	this.showAnimation = dojo.fadeIn({ node: this.box});
	//create the dojo animation for hiding the footnote
	this.hideAnimation = dojo.fadeOut({ node: this.box});
	dojo.connect(this.hideAnimation, "play", this, "remove");
	dojo.connect(this.hideAnimation, "stop", this, "remove");
}
//show() method expects that event triggering the action to be passed in.
//the event is used to determine where the animation will appear by adjusting 
//the "top" and "left" CSS properties for the animated_footnote class.
KP.AnimatedFootnote.prototype.show = function(e){
	if (this.hideAnimation.status() == "playing"){
		this.hideAnimation.stop(true);
	}
	dojo.style(this.box,{
		"display": "block"
	});
	this.setLocation(e);
	this.showAnimation.play();
};
//the hide() method plays the fadeOut animation.
KP.AnimatedFootnote.prototype.hide = function(){
	if (this.showAnimation.status() == "playing"){
		this.showAnimation.stop();
	}
	this.hideAnimation.play();
};
//remove() sets the display property of the footnote to none, so it won't remain
//as an invisible element on top of the page, which would interfere with mouse activity.
KP.AnimatedFootnote.prototype.remove = function(){
	dojo.style(this.box,{
		"display": "none"
	});
};
//setLocation() positions the footnote with respect to the cursor,
//	which is on the footnote tag.
//Parameter: the triggering event (fixed by dojo.fixEvent()).
KP.AnimatedFootnote.prototype.setLocation = function(e){
	console.log("in set location...");
	var offset = 20; //the distance from the event location
	//assume a top position below the event
	var topLocation = e.clientY + offset;
	//but check to see if it's possible to put it above the event location
	var coordinates = dojo.coords(this.box);
	var topSpaceReq = coordinates.h + (offset * 2);
	if (topSpaceReq < e.clientY){
		topLocation -= topSpaceReq;
	}
	//assume a left position the the right of the event
	var leftLocation = e.clientX + offset;
	//check to see if it's possible to put the footnote to the left of the event
	var leftSpaceReq = coordinates.w + (offset * 2);
	if (leftSpaceReq < e.clientX){
		leftLocation -= leftSpaceReq;
	}
	//format the locations
	topLocation += "px";
	leftLocation += "px";
	//set the top and bottom locations
	dojo.style(this.box, {
		"top": topLocation,
		"left": leftLocation
	});
	console.log("finished location... topLocation is:", topLocation);
	console.log(dojo.coords(this.box));
};

//KP.setupFootnotes is called when the page loads.
KP.setupFootnotes = function (){
	//set up an object with the footnote numbers as properties and text as values.
	var footnote_sups = dojo.query("div.footnotes sup");  //NodeList 
	var footnotes = {};
	for (var i = 0; i < footnote_sups.length; i++){
		var note = new KP.AnimatedFootnote(footnote_sups[i].parentNode);
		footnotes[footnote_sups[i].innerHTML] = note
	}
	//KP.hideFootnote is the event handler triggered by onmouseout when a
	//sup.footnote_tag loses the mouse hover.
	var hideFootnote = function(e){
		var goodEvent = dojo.fixEvent(e, e.target);
		footnotes[goodEvent.target.innerHTML].hide();
	};
	//KP.showFootnote is the event handler triggered by onmouseover when a
	//sup.footnote_tag is hovered over.
	var showFootnote = function(e){
		var goodEvent = dojo.fixEvent(e, e.target);
		footnotes[goodEvent.target.innerHTML].show(goodEvent);
	}
	//not to attach the event handlers
	dojo.behavior.add({
		"sup.footnote_tag" : {
			"onmouseover" : showFootnote,
			"onmouseout" : hideFootnote
		}
	});
	dojo.query("sup.footnote_tag").addClass("goRed");
	dojo.behavior.apply();
};