/************************************************************************************
/* 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;
// 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 oppose to an onmousedown event.
// Arguments:
// 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
// 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
function createPopUpDiv(contentElemId, event, sourceElem, position, absolute_positioning)
{
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)
{
gDiv.parentNode.removeChild(gDiv);
document.body.appendChild(gDiv);
}
gTemplateHTML = gDiv.innerHTML;
}
// Parse input element for heading and content
var contentElem = document.getElementById(contentElemId);
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
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
var positionFunction = position.split(",");
var div_left = eval(positionFunction[0]);
var div_top = eval(positionFunction[1]);
// Lets keep this bad boy entirely on the screen:
var x_offset = 0, y_offset = 0;
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;
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);
}
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";
}
}