/*	usage:
	<a href="#" onclick="toggleFilterSelectorPopup('seeMoreXXX', this); return false;">See more XXX</a>
	<div class="filterAdditionalChoices" id="seeMoreXXX">
		<table cellspacing="0"><tr valign="top"><td>
			<ul class="filterValues">
				<li><a href="...">...</a></li>
				<li><a href="...">...</a></li>
				...
			</ul>
		</td><td>
			...
		</td></tr></table>
	</div>
	<script type="text/javascript">
		setupFilterSelectorPopup("seeMoreXXX", "Filter Attribute");
	</script>
*/

function setupFilterSelectorPopup (popupID, title) {
	var popupElement = document.getElementById(popupID);
	if (!popupElement) return;
	if (popupElement.isSetup) return;

	popupElement.className = "filterAdditionalChoices";
	popupElement.style.display = "none";

	var h4 = document.createElement("h4");
	h4.appendChild(document.createTextNode(title));	
	h4.className = "tight";

	var firstChild = popupElement.childNodes[0];
	if (firstChild) {
		popupElement.insertBefore(h4, firstChild);
	} else {
		popupElement.appendChild(h4);
	}

	popupElement.isSetup = true;
}

function toggleFilterSelectorPopup (popupID, linkElement) {
	var popupElement = document.getElementById(popupID);
	if (!popupElement || !linkElement) return;
	if (!popupElement.isSetup) return;

	/* if popup is visible, then hide it again */
	if (popupElement.style.display != "none") {
		popupElement.style.display = "none";
		return;
	}

	popupElement.style.position = "absolute";
 	popupElement.onmouseout = function (e) {
		if (!e) e = window.event;

		/* ONLY close the "popup" if the event is triggered by the
		   mouse actually LEAVING the "popup" area. */
		if (e.relatedTarget) { /* Standards-compliance */
			if (e.relatedTarget == popupElement || elementIsInside(e.relatedTarget, popupElement)) {
				return;
			}
		}
		if (e.toElement) { /* MSIE */
			if (e.toElement == popupElement || elementIsInside(e.toElement, popupElement)) {
				return;
			}
		}
		popupElement.style.display = "none";
	};

	var parent = document.getElementById("document");

	var x = offsetLeftRelativeTo(linkElement, parent) + linkElement.offsetWidth + 25;
	var y = offsetTopRelativeTo(linkElement, parent) - 100;

	popupElement.style.left = x + "px";
	popupElement.style.top = y + "px";
	popupElement.style.zIndex = 500;
	popupElement.style.display = "block";
}

/*	These recursive functions go up the DIV chain to find
	the position of element e relative to element ep.
	ep *must* be an offsetParent element somewhere up there.
	It is *probably* necessary to make element ep a dynamically
	positioned container.  */

function offsetLeftRelativeTo (e, ep) {
	if (e == null || e == document || e == ep) return 0;
	return e.offsetLeft + offsetLeftRelativeTo(e.offsetParent, ep);
}

function offsetTopRelativeTo (e, ep) {
	if (e == null || e == document || e == ep) return 0;
	return e.offsetTop + offsetTopRelativeTo(e.offsetParent, ep);
}

/* This function is used to determine whether an onmouseout was
   triggered because the mouse *really* left an element. */

function elementIsInside(e, ep) {
	if (e == null || e == document || e == ep) return false;
	if (e.parentNode == ep) return true;
	return elementIsInside(e.parentNode, ep);
}