/************************************************************************************
/* Javascript functions for those neat little popup divisions that appear in a page all net-flix style.
/*
/* TODO: This could really benefit from being refactored into an object.
/*
/* NOTE: You have to define the actual popup div yourself on the page in question and give it an id
/* of "popup_div". Each popup div takes a heading and html content. Use {HEADING} and
/* {CONTENT} as place-holders for these. To show a popup, pass in an id to an element with the
/* desired content. The code will look for children with the title attributes of "heading" and
/* "content" to fill out the popup div.
/*
/* e.g.:
/*
/*
/*
/*
/*
/*
show popup
/*
/*
/* My Info
/* Very informative stuff
/*
/*
/*
/***********************************************************************************/
var gDiv, gTemplateHTML, gModalBgDiv, gbModal=false, gbIEModal=false;
// Used to create popup-divs. Don't forget to define a div with a popup_div id to use as the template.
// This will be much more sluggish if called from an onclick event as opposed to an onmousedown event.
// Arguments (all arguments are optional):
// contentElemId: Id of the element that contains children with title attributes of heading and content.
// These attributes are used to populate the popup_div's {HEADING} and {CONTENT} fields
// event: This is used to ascertain the coordinates of the mouse event invoking the popup... these
// coordinates are optionally used to position the div.
// position: The coordinates of the top left corner of the popup div, separate by a comma
// NOTE: You may pass in functions for the coordinates:
// - You may use w or h to denote the width and height of the popup_div
// - You may use x or y to denote the coordinates of the sourceElem parameter
// (may I suggest you pass in the link being clicked)
// - You may use mx or my to denote the mouse coordinates, provided you supply the event parameter
// NOTE: You may pass in "center" to center the div vertically and horizontally on the page
// E.g. To center the popup under the mouse cursor pass in "x - w/2, y - h/2". You can also just pass numbers.
// absolute_pos... Whether or not the position you pass is in relative coordinates or absolute coordinates. You probably want
// relative positioning if you're passing specific coordinates. You probably want absolute if you're actually
// trying to match the mouse cursor. Default is absolute
// modal Whether the popup should gray out the rest of the page (a la Netflix) until dismissed. The page should have a "popup_bg" div
// on it if this item is set to true.
function createPopUpDiv(contentElemId, event, sourceElem, position, absolute_positioning, modal)
{
try {
// If this is the first showing of the popup div, we will have to define some handles.
if (!gDiv)
{
gDiv = document.getElementById("popup_div");
gDiv.style.display = "none";
// If we are absolutely positioning this thing, Lets tear the popup_div out of the layout (even though it is invisible)
// and tac it on to the end of the body so that the mouse coordinates match with the elements coordinates.
// If absolute_positioning is undefined, default to true
if (absolute_positioning == null || absolute_positioning)
{
gDiv.parentNode.removeChild(gDiv);
document.body.appendChild(gDiv);
}
gTemplateHTML = gDiv.innerHTML;
}
if(modal)
{
gbModal = true;
var browserVersion = parseInt(window.navigator.appVersion.charAt(0), 10);
if (browserVersion <= 6 && window.navigator.userAgent.indexOf("MSIE") > -1) {
gbIEModal=true;
}
if(!gModalBgDiv)
{
gModalBgDiv = document.getElementById("popup_bg");
//always absolutely position this
gModalBgDiv.parentNode.removeChild(gModalBgDiv);
document.body.appendChild(gModalBgDiv);
if(gbIEModal)
{
prepareIEModalBG();
}
}
}
else
{
gbModal = false;
}
// Parse input element for heading and content
var contentElem = (contentElemId == null) ? null : document.getElementById(contentElemId);
if(contentElem != null)
{
var title, content;
for (var i = 0; i < contentElem.childNodes.length; i++)
{
if (contentElem.childNodes[i].title == "heading")
title = contentElem.childNodes[i].innerHTML;
else if (contentElem.childNodes[i].title == "content")
content = contentElem.childNodes[i].innerHTML;
}
}
// Snag the template for the popup_div
var newHTML = gTemplateHTML;
// Fill in the values extracted from the input element
newHTML = newHTML.replace("{HEADING}", title);
newHTML = newHTML.replace("{CONTENT}", content);
// Create the popup div
gDiv.innerHTML = newHTML;
// NOTE: we have to display the div to get the rendered height (and maybe even the width)...since
// the contents may very well dictate the size of the div. So we'll display it offscreen and then
// calculate its actual position
var currLeft = gDiv.style.left;
var currTop = gDiv.style.top;
gDiv.style.left = "-1000px";
gDiv.style.top = "-1000px";
gDiv.style.display = "block";
// The following variables are calculated, when the appropriate parameters
// are passed in, such that they may be used in the eval strings which are
// used to position the div. Slightly unorthodox, but kind of handy when you
// simply want to position a popup div over a link or the mouse cursor. See the
// position note in this function's comment for more infor.
var x = 0, y = 0, mx = 0, my = 0;
// Get mouse x and y
if (event != null) {
var pos = getMousePosition(event, window);
mx = pos.x;
my = pos.y;
}
// Get the source element coordinates
if (sourceElem != null) {
var linkpos = getElementPosition(sourceElem, null);
x = linkpos.left;
y = linkpos.top;
}
// Get element w and h
var w = getObjectWidth(gDiv);
var h = getObjectHeight(gDiv);
// Split the position function passed in. First argument defines the x coordinate, second defines the y coordinate
// special case for convenience's sake: "center" centers the div onscreen
if (position && position == "center")
{
//centered divs are handled very very differently.
gDiv.style.marginLeft = "-" + w/2 + "px";
gDiv.style.marginTop = "-" + h/2 + "px";
gDiv.style.left = "50%";
gDiv.style.top = "50%";
}
else if (position)
{
var positionFunction = position.split(",");
var div_left = eval(positionFunction[0]);
var div_top = eval(positionFunction[1]);
var padding = 10; // pixel padding for visual happiness. We'll not let the div any closer the edge than
// this many pixels.
var browser_edge_top = getScrollY(window) + padding;
var browser_edge_bottom = getInsideWindowHeight(window) + browser_edge_top - padding;
var browser_edge_left = getScrollX(window) + padding;
var browser_edge_right = getInsideWindowWidth(window) + browser_edge_left - padding;
// Lets keep this bad boy entirely on the screen:
var x_offset = 0, y_offset = 0;
if (div_left < browser_edge_left)
x_offset = browser_edge_left - div_left;
else if (div_left + w > browser_edge_right)
x_offset = browser_edge_right - (div_left + w);
if (div_top < browser_edge_top)
y_offset = browser_edge_top - div_top;
else if (div_top + h > browser_edge_bottom)
y_offset = browser_edge_bottom - (div_top + h);
// Lets position the popup div
shiftTo(gDiv, div_left + x_offset, div_top + y_offset);
}
else
{
gDiv.style.left = currLeft;
gDiv.style.top = currTop;
}
if(gbModal)
{
gModalBgDiv.style.display="block";
}
}
catch (e)
{
// You may have forgotten to include a on your page
// Or perhaps you passed in an incorrect content element id.
// Or maybe the error message has actually told you whats wrong
alert("Error in createPopUpDiv: " + e.message);
}
}
function closePopUpDiv()
{
if (gDiv)
{
gDiv.style.display = "none";
}
if(gbModal)
{
gbModal=false;
gModalBgDiv.style.display = "none";
}
}
/**
* Sets the size of the background div
*
*/
function prepareIEModalBG() {
prepareIE("100%", "hidden");
}
function removeIEModalBG() {
prepareIE("auto", "auto");
}
function prepareIE(height, overflow)
{
bod = document.getElementsByTagName('body')[0];
bod.style.height = height;
bod.style.overflow = overflow;
htm = document.getElementsByTagName('html')[0];
htm.style.height = height;
htm.style.overflow = overflow;
}
/**
* Darkens the window (or frame) passed in by creating a translucent div over
* the entire page.
*
* frame = window/frame reference
* opacity = the opacity the overlay is as a decimal percent: 1 = opaque, 0 = transparent
*/
function blackOutFrame(frame, opacity)
{
if (!frame.document.body)
{
var f_this = frame;
// There is no document loaded...this is kinda problematic if we want to put an overlay in it.
// Set the onload of the frame to call this function when it decides to get its act together.
frame.onload = function () { blackOutFrame(f_this, opacity); };
return;
}
// Remove heavyweight elements from the page that will draw over the overlay
var applets = frame.document.getElementsByTagName("applet");
for (var i = 0; i < applets.length; i++)
{
applets[i].style.display = "none";
}
var embeds = frame.document.getElementsByTagName("embed");
for (var i = 0; i < embeds.length; i++)
{
embeds[i].style.display = "none";
}
var isIE = (navigator.appVersion.indexOf("MSIE") != -1);
overlay = frame.document.createElement("div");
overlay.id = "TransparentOverlay";
overlay.style.width = getPageWidth(frame) +"px";
overlay.style.height = getPageHeight(frame) +"px";
overlay.style.position="absolute";
overlay.style.top = "0px";
overlay.style.left = "0px";
overlay.style.overflow = "hidden";
overlay.style.backgroundColor = "#000000";
overlay.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
overlay.style.opacity = opacity;
// Note: Z-Index was picked to be larger than the tooltip in the OE, which (I think) is the largest manually set zindex in the site. This, graying
// out a page will always gray everything out, EXCEPT for heavy-weight elements such as applets, which render over everything. These have to
// be manually removed.
overlay.style.zIndex = 20000;
frame.document.body.appendChild(overlay);
if (isIE)
{
frame.document.body.onresize = function() { adjustOverlay(frame); };
}
else
{
frame.onresize = function() { adjustOverlay(frame); };
}
}
// update width and height of overlay on window resize
function adjustOverlay(frame)
{
if (frame && frame.document.getElementById("TransparentOverlay"))
{
frame.document.getElementById("TransparentOverlay").style.width = getPageWidth(frame) +"px";
frame.document.getElementById("TransparentOverlay").style.height = getPageHeight(frame) + "px";
}
}
function undoBlackOutFrame(frame)
{
// remove the onresize event handlers
var isIE = (navigator.appVersion.indexOf("MSIE") != -1);
if (isIE)
{
frame.document.body.onresize = null;
}
else
{
frame.onresize = null;
}
// remove the overlay itself
if (frame && frame.document.getElementById('TransparentOverlay'))
{
frame.document.body.removeChild(frame.document.getElementById('TransparentOverlay'));
}
// Display any heavyweight elements that were previously hidden
var applets = frame.document.getElementsByTagName("applet");
for (var i = 0; i < applets.length; i++)
{
applets[i].style.display = "";
}
var embeds = frame.document.getElementsByTagName("embed");
for (var i = 0; i < embeds.length; i++)
{
embeds[i].style.display = "";
}
}
function changeOverlayOpacity(frame, opacity)
{
if (frame && frame.document.getElementById("TransparentOverlay"))
{
frame.document.getElementById("TransparentOverlay").style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
frame.document.getElementById("TransparentOverlay").style.opacity = opacity;
}
}
function changeOverlayHeight(frame, newHeight)
{
if (frame && frame.document.getElementById("TransparentOverlay"))
{
frame.document.getElementById("TransparentOverlay").style.height = newHeight +"px";
}
}