/*
DATE: 10/31/2007
TITLE: FloatBox
DESCRIPTION:
	This code handles the display and content management of floatboxes (and hover-tips). 

	To activate this module, set the following Velocity variable in your template file:
	#set( $JS_Floatbox = true )

	There are two types of widgets that use the floatbox code...

		1) Floatbox:
				These widgets function similarly to lightboxes. The developer must create a DIV (hereon refered to as a 
				"source DIV"). The source DIV must have a unique ID, and its class name must be "floatbox_source". The content
				of that source DIV will be exactly what's displayed within its corresponding floatbox. That source DIV is 
				automatically hidden on the page (since its class name is "floatbox_source"), so it doesn't matter where 
				the source DIV is initially created on the page by the developer.

				A Velocity macro is then placed inline by the developer to create an anchor tag. Upon onmouseover, the anchor 
				tag spawns a floatbox containing the source DIV created by the developer.

				#FloatBox( "a" "b" "c" "d" "e" "f" "g" )

					a = the unique ID of the floatbox_source DIV created by the developer
					b = headline text to be displayed within the floatbox, just above the content
					c = text of the anchor link that spawns the floatbox
					d = custom width (in pixels) of floatbox (default is 400px wide)
					e = type of event that spawns the floatbox, e.g. supplying "mouseover" will make the floatbox appear if the spawner object fires a mouseover event (default event is "click")
					f = javascript to be executed whenever the link is clicked (will execute before the floatbox spawns)
					g = HTML for a custom spawner object, if you don't want the spawner object to be an anchor tag

		2) Hover-Tips:
				The spawner object for hover-tips is a question mark image, defined in the "/include/macros.inc" file. Doing an
				onmouseover of the image displays a simple floatbox (no headline or exit icon). The content for these hover tips
				is contained in a Velocity map ($FloatTips), defined in the "/include/floatbox.inc" file. A Velocity macro is 
				placed inline by the developer to create the hover-tip spawner image and associate it with an entry 
				(e.g. content) from the Velocity map.

				#FloatTip( "a" )

					a = unique key in the Velocity map ($FloatTips), used to retrieve content to be displayed in the hover-tip

*/
var fboxContainer = null, FloatBoxList = new Array(), fboxImgPath = "/images/floatbox";
var tipWidth = 250, fboxWidth = 400, fbox_fadeInterval = null, fbox_fadeCount = 100;
addLoadEvent(function () {
	
	// Get all objects (aka "spawner objects") on the page that will spawn floatboxes. Salvage unique information from each spawner object and assign them event handlers for the showing/hiding of their respective floatboxes.
	var objList = getElementsByClassName("floatbox");
	if (objList.length < 1 ) return;
	for (var i=0; i < objList.length; i++) {		
		var key = fbox_getParams(objList[i]);
		if (key == null) continue;
		objList[i].setAttribute("key", key);
		if (fbox_getSpawnerType(objList[i])) {
			addEventHandler(objList[i], "mouseover", fbox_show);
			addEventHandler(objList[i], "mouseout", fbox_hide);
		} else {
			addEventHandler(objList[i], FloatBoxList[FloatBoxList.length - 1].evt, fbox_show);
			addEventHandler(objList[i], "onresize", fbox_hide);
		}
	}
	
	// Pre-load images to eliminate initial load delays.
	if (document.images) {
		if (!isPreIE7) {
			var pic0 = new Image(807,33); pic0.src = fboxImgPath + "/box.png";
			var pic1 = new Image(9,1);    pic1.src = fboxImgPath + "/borders.png";
			var pic2 = new Image(21,29);  pic2.src = fboxImgPath + "/arrow_left.png";
			var pic3 = new Image(29,21);  pic3.src = fboxImgPath + "/arrow_top.png";
		} else {
			var pic1 = new Image(807,33); pic1.src = fboxImgPath + "/box.gif";
			var pic2 = new Image(9,1);    pic2.src = fboxImgPath + "/borders.gif";
			var pic3 = new Image(21,29);  pic3.src = fboxImgPath + "/arrow_left.gif";
			var pic4 = new Image(29,21);  pic4.src = fboxImgPath + "/arrow_top.gif";
		}
	}
	// Create the tip container.
	fboxContainer = createNewElement("div", "fbox");
	fboxContainer.appendChild(createNewElement("div", "fbox_wrapper left"));
	fboxContainer.lastChild.appendChild(createNewElement("div", "fbox_tb"));
	fboxContainer.lastChild.lastChild.appendChild(document.createElement("div"));
	fboxContainer.lastChild.appendChild(createNewElement("div", "fbox_lb"));
	fboxContainer.lastChild.lastChild.appendChild(createNewElement("div", "fbox_rb"));
	fboxContainer.lastChild.lastChild.lastChild.appendChild(createNewElement("div", "fbox_content"));
	fboxContainer.lastChild.appendChild(createNewElement("div", "fbox_bb"));
	fboxContainer.lastChild.lastChild.appendChild(document.createElement("div"));
	fboxContainer.appendChild(createNewElement("span", "fbox_arrow left"));
	if (isPreIE7 && !isPreIE55) {
		if( document.URL.indexOf("Branding.tmpl") == -1 ) {
			antiburnIframe = createNewElement("iframe", null, "fbox_antiburn");
			antiburnIframe.src = "javascript:false";
			fboxContainer.insertBefore(antiburnIframe, fboxContainer.firstChild);
		}
	}
	document.body.insertBefore(fboxContainer, document.body.firstChild);
});
/*
	FUNCTION fbox_getParams
	Salvage information from the spawner object, which determines a tip's
	content, width and potentially other aspects.
*/
function fbox_getParams(obj) {
	if (!obj) return null;
	if (fbox_getSpawnerType(obj)) {
		var tmp = obj.alt;
		obj.alt = "";
		return tmp;
	} else {
		var tmp = obj.title.split(";;");
		// Create parameters object and store in global array (FloatBoxList).
		var params = new Object();
		params.source = tmp[0];
		params.headline = tmp[1] ? tmp[1] : "";
		params.width = (tmp[2] && tmp[2] != "") ? parseInt(tmp[2]) : fboxWidth;
		params.evt = (tmp[3] && tmp[3] != "") ? tmp[3] : "click"; 
		FloatBoxList[FloatBoxList.length] = params;

		obj.title = "";
		return (FloatBoxList.length - 1);
	}
}
/*
	FUNCTION fbox_show
	Displays a tip to the user and positions it relative to the spawner object.
*/
function fbox_show(ev) {

	// Cancel the display of other tips and any in-progress fade-out effects.
	fbox_resetDisplay();
	
	// Obtain spawner object's absolute coordinates.
	var spawnerObj = getEventCatalyst(ev);
	var coords = getObjPos(spawnerObj);
	
	// Salvage key/index from the spawner object, which we'll use to retrieve content for the floatbox.
	var theKey = spawnerObj.getAttribute("key");
	
	// Determine if we're dealing with a simple tip or a floatbox. Get reference to appropriate containers.
	var isTip = fbox_getSpawnerType(spawnerObj);
	var theWrapper = getElementsByClassName("fbox_wrapper", "div", fboxContainer)[0];
	var theContent = getElementsByClassName("fbox_content", "div", fboxContainer)[0];
	var theArrow = getElementsByClassName("fbox_arrow", "span", fboxContainer)[0];
	
	// Set the tip container width to specified width.
	var theWidth = (isTip) ? tipWidth : FloatBoxList[theKey].width;
	fboxContainer.style.width = theWidth;

	// If the container was recently used as a floatbox, it probably still has some content leftover inside it. We don't want to lose that content so we relocate it elsewhere and hide it so it can be reused later.
	var sourceList = getElementsByClassName("floatbox_source", null, theContent);
	for (var i=0; i < sourceList.length; i++) {
		sourceList[i].style.display = "none";
		document.body.appendChild(sourceList[i]);
	}

	// Clean out the container of any remaining content.
	theContent.innerHTML = "";

	// Add new content to the container.
	if (isTip) theContent.innerHTML = tipList.getItem(theKey);
	else if (document.getElementById(FloatBoxList[theKey].source)) {
		fbox_createExitIcon(theContent);
		if (FloatBoxList[theKey].headline != "") {
			theContent.appendChild(createNewElement("h1"));
			theContent.lastChild.appendChild(document.createTextNode(FloatBoxList[theKey].headline));
		}
		theContent.appendChild(document.getElementById(FloatBoxList[theKey].source));
		theContent.lastChild.style.display = "block";
	}	else return;
	
	// Get browser window's currently viewable area.
	var browserDim = getWindowSize();

	// Offset the container relative to the spawner object. Safari does things a bit differently.
	var offset_x = (!isTip) ? spawnerObj.offsetWidth + 7 : 20;
	var offset_y = (isTip) ? -14 : -11;
	if (isSafari_old) offset_y += (isTip) ? 1 : -2;
	else if (isSafari_new && !isTip) offset_y -= 2;
	
	// Detect if the tip will extend off the right side of the viewable screen area. If so, spawn the tip beneath the spawner object instead of default placement.
	var orientation = "left";
	
	if( browserDim.x < ( coords.x + offset_x + theWidth ) ) {
		offset_x = 36 - theWidth;
		offset_y = 20;
		orientation = "top";
	}
	
	// Check if we went over too far on the x-axis, if so, revert to "left" orientation
	if( ( coords.x + offset_x ) < 0 ){
		offset_x = (!isTip) ? spawnerObj.offsetWidth + 7 : 20;
		offset_y = (isTip) ? -14 : -11;
		if (isSafari_old) offset_y += (isTip) ? 1 : -2;
		else if (isSafari_new && !isTip) offset_y -= 2;
		orientation = "left";
	}
	
	theWrapper.className = "fbox_wrapper " + orientation;
	theArrow.className = "fbox_arrow " + orientation;

	// Position the floatbox absolutely within the viewable page space.
	fboxContainer.style.left = coords.x + offset_x + "px";
	fboxContainer.style.top = coords.y + offset_y + "px";
	
	// Show the floatbox to the user.
	fboxContainer.style.display = "block";
}

/*
	FUNCTION fbox_hide
	Hide the tip. Fade-out, if applicable.
*/
function fbox_hide() {
	if (isIE) fboxContainer.style.display = "none";
	else fbox_fadeInterval = setInterval("fbox_fade()", 4);
}

/*
	FUNCTION fbox_fade
	Governs the fade-out effect.
*/
function fbox_fade() {
	if (fbox_fadeCount <= 0) return fbox_resetDisplay();
	fbox_fadeCount -= 10;
	setOpacity(fboxContainer, fbox_fadeCount);
}

/*
	FUNCTION fbox_resetDisplay
	Completely hides the containers and resets their opacities to 100%.
*/
function fbox_resetDisplay() {
	clearInterval(fbox_fadeInterval);
	fboxContainer.style.display = "none";
	fbox_fadeCount = 100;
	setOpacity(fboxContainer, fbox_fadeCount);
	if (isIE)	fboxContainer.style.filter = "none";
	return;
}

/*
	FUNCTION fbox_createExitIcon
	Creates the exit/close "x" icon for use in floatboxes.
*/
function fbox_createExitIcon(parentObj) {
	var el = createNewElement("img", "icon_exit");
	el.src = "/images/icons/exit2.gif";
	el.onclick = fbox_hide;
	parentObj.appendChild(el);
}

/*
	FUNCTION fbox_getSpawnerType
	Returns true if the spawner object is an image, otherwise returns false.
*/
function fbox_getSpawnerType(obj) {
	return (obj.nodeName.toUpperCase() == "IMG");
}