/* JHIIMe dropdown menu v1.2 last edit 4/19/2001 by Eric Hayes */

/* Notes about the code.

This code creates and controls a DHTML dropdown element. It is to be compatible with IE 4+ and NC4.76. The code branches conditionally depending on browser type. To be able to achieve identical looks and feel in both browser families required the use of Netscape <layer> tags and event capturing. Also, due to DOM differences there are numerous code forks but I've tried to wrap these in functions that can be called consistently. The script is intentionally (and very) verbose to aid maintenance.

From the user's point of view all that's required is pasting a <script> reference to this file into the <head> of their document and calling createDropDown() with it's optional parameters. These three parameters are leftPos, topPos, ddHeadText. The first two are positioning properties. If left blank the defaults set at the beginning of the script are used. The third is the prompt text for the dropdown head. If left blank it also defaults to whatever is specified at the beginning of the script. Colors, height and width are also defined in the defaults section. The overall height of the dropdown is set in code based on the number of menu items it contains. There is no need to specify the number of items - the function is smart enough to make this calculation on its own.

Each dropdown consists of two top-level layers. One is the header that contains the prompt text and the arrow icon. Clicking on the header causes the body of the dropodown to appear. The second layer is the body or container. It is positioned just below the header. It in turn contains nested within it a variable number of additional layers that function as the individual menu items. The container layer is initially hidden from view. The menu item layers inherit their visibility from it so are also initially hidden. Clicking on the text or the icon in the header layer causes a simple toggle of the container's visibility. If it's hidden it is made visible and if not it is hidden. Because the items inherit visibility they are hidden or shown as well.

When createDropDown() is called it checks for the presence of and number of parameters. User-provided parameters override the defaults. If the user provides no links the links in the defaultLinks array are used. A whole series of variables containing function defaults and the skeleton of the layer HTML are initialized. Then the function enters a loop which creates the HTML for the menu items. The HTML for these is concatenated with the header HTML and the container layer HTML into a string which is then written into the document at the point from which the function call was made. (Note: because the layers are absolutely positioned it really doesn't matter where in the <body> of the document this is.) Then, the position of the header and container layers is set, the overall height of the container layer is set and the default visibility of the container is toggled off just in case the browser doesn't pick this up (IE does not always reliably pick up styling initially set from within a <style> block.) A loop begins that sets the top position of each of the menu item layers in such a way that they are vertically stacked within their container. Finally the variable, ddNum, which tracks the number of dropdowns active on the page is incremented so it will be ready for the next call to this function.

Menu item highlighting is done by toggling the layer's background color. There's also an auto-roll up function that is triggered and reset by the user interacting with the dropdown. The time it takes to auto reset is controlled by the ddRollUpTime variable. The user can also click a second time on the header text or icon to roll it up.

*/

//This is a utility function for Navigator 4 to reload the page if the window is resized
function MM_reloadPage(init) {
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);


//check if we're using IE or NN
var explorer = (navigator.appName.indexOf("Explorer") != -1);
var ddPrefix = "document.";
var ddSuffix = "";

//Create standard prefix for object references
if (explorer) {
ddPrefix += "all.";
ddSuffix = ".style";
}

//Set up default values and variables. The color choices control the style sheet, as well, so you only have to change them here.
var ddHiLightColor = "#FFFFFF"; //Drop down hilight color
var ddDefaultColor = "#9B9966"; //Drop down default color
var ddDefaultLeftPos = 580; //Default left position
var ddDefaultTopPos = 100; //Default top position
var ddDefaultWidth = 192; //Default width of the dropdown
var ddArrowSrc = "/reig/images/arrow.gif"; //The URL of the down arrow image 
var ddArrowLeftPos = ddDefaultWidth - 17; //Positions the arrow relative to the right edge of the dropdown
var ddItemHeight = 15; //Default height for the dropdown head and items - also used to calculate inter-element spacing.
var ddDefaultPrompt = "Pull down to visit a network member"; //Default prompt text
var ddRollUpTime = 1000; //The time it takes the menu to auto-roll-up
var ddRollMe = new Array(); //Placeholder for auto roll up function (when the user mouses off a menu choice without clicking)
var ddNum = 1; //Holds number of drop downs created. Used in the element IDs so that we can access them by number.

/*BEGIN STYLE SHEET BLOCK*/
document.write('<style type="text/css">');

//Text that appears in the prompt and menu items
document.write(".ddmenu {");
document.write("text-decoration: none; ");
document.write("color: #000000; ");
document.write("font-family: arial; ");
document.write("padding-left: 3px; ");
document.write("padding-top: 2px; ");

if (explorer) {
document.write("font-size: 7pt; ");
}
else { //add larger font for Navigator
document.write("font-size: 7.5pt; ");
}

document.write("}");

//Position of the triangle graphic
document.write(".ddarrow {");
document.write("position: absolute; ");
document.write("top: 3px; ");
document.write("left: " + ddArrowLeftPos + "px; ");
document.write("}");

//Styles for the dropdown head.
document.write(".ddhead {");
document.write("position: absolute; ");
document.write("top: " + ddDefaultTopPos + "px; ");
document.write("left: " + ddDefaultLeftPos + "px; ");
document.write("width: " + ddDefaultWidth + "px; ");
document.write("height: " + ddItemHeight + "px; ");
document.write("z-index: 1; ");
if (explorer) document.write("background-color: " + ddDefaultColor + "; "); //Explorer specific style
if (explorer) document.write("padding-left: 3px; ");
if (explorer) document.write("padding-top: 2px; ");
if (explorer) document.write("cursor: default;"); //Explorer specific style
document.write("}");

//Styles for the dropdown container layer
document.write(".dropdown {");
if (explorer) {
document.write("position: absolute; ");
document.write("top: " + (ddDefaultTopPos + ddItemHeight) + "px; ");
document.write("left: " + ddDefaultLeftPos + "px; ");
document.write("width: " + ddDefaultWidth + "px; ");
document.write("z-index: 1; ");
document.write("background-color: " + ddDefaultColor + "; ");
}
document.write("visibility: hidden; ");
document.write("}");

//Styles for the embedded menu item layers
document.write(".dditem {");

if (explorer) {
document.write("position: absolute; ")
document.write("top: 0; ");
document.write("left: 0px; ");
document.write("height: " + ddItemHeight + "px; ");
document.write("width: " + ddDefaultWidth + "px; ");
document.write("z-index: 1; ");
}
document.write("visibility: inherit; ");
if (explorer) document.write("padding-left: 3px; "); //Add additional padding only in Explorer
if (explorer) document.write("padding-top: 2px; "); //""
if (explorer) document.write("cursor: hand;"); //Explorer - set cursor to hand
document.write("}");

document.write("</" + "style>");

/*END STYLE SHEET BLOCK*/

/*BEGIN DEFAULT LINKS - these are the links that show up in the dropdown when there are no user-provided links.*/

var defaultLinks = new Array();

defaultLinks[0] = "";//The first three positions are intentionally left empty
defaultLinks[1] = "";//First prompt at index 3,
defaultLinks[2] = "";//the link it goes with at index 4 then just keep alternating
defaultLinks[3] = "Investment Management Overview";
defaultLinks[4] = "/jhiim/about/ataglance.html";
defaultLinks[5] = "Bond & Corporate Finance Group";
defaultLinks[6] = "/enet-bcfg/bcfg";
defaultLinks[7] = "Guaranteed & Structured Financial Products";
defaultLinks[8] = "/enet-gsfp/gsfp";
defaultLinks[9] = "Hancock Agricultural Investment Group";
defaultLinks[10] = "http://www.haig.jhancock.com";
defaultLinks[11] = "Hancock Timber Resource Group";
defaultLinks[12] = "http://www.htrg.com";
defaultLinks[13] = "Independence Investment";
defaultLinks[14] = "http://www.independence.com";
defaultLinks[15] = "Real Estate Investment Group";
defaultLinks[16] = "/enet-reig/reig";
defaultLinks[17] = "John Hancock Realty Advisors";
defaultLinks[18] = "/enet-reig/reig/affordable/overview.html";
defaultLinks[19] = "John Hancock Real Estate Finance";
defaultLinks[20] = "/enet-reig/reig/jhref/index.html";


/*END DEFAULT LINKS*/


//Navigates to a new site when the user makes a selection from the menu.
function ddNavigate(newSite) {
if (newSite.indexOf("javascript") != -1) {
newSite = unescape(newSite);
var siteSplit = newSite.split(":");
var scriptURL = unescape(siteSplit[siteSplit.length-1]);
eval(scriptURL);
return true;
} //closes if
else {
window.location = newSite;
return true;
} //closes else
}

//Automatically rolls up the dropdown when the user mouses off
function delayRollUp(ddNumber) {
var ddToRollUp = "rollUp(" + ddNumber + ")";
ddRollMe[ddNumber] = setTimeout(ddToRollUp,ddRollUpTime);
}

//Shows the dropdown menu
function dropDown(ddNumber) {

var dropdownref = eval(ddPrefix + "dropdown" + ddNumber + ddSuffix);

if (dropdownref.visibility.indexOf("hid") != -1) {
dropdownref.visibility = "visible";
} //closes if

else { //if the dropdown is already displayed
dropdownref.visibility = "hidden";
} //closes else
}  //closes function

//Rolls up the dropdown menu
function rollUp(ddNumber) {
var dropdownref = eval(ddPrefix + "dropdown" + ddNumber + ddSuffix);
dropdownref.visibility = "hidden";
}  //closes function

//Highlights the background for the current level
function hiLight(ddNumber,level,type) { //type 0 = internal item type 1 = header

clearTimeout(ddRollMe[ddNumber]); //reset the auto-roll up function

if (explorer) {
var currentLevel = type == 0 ? eval(ddPrefix + "dd" + ddNumber + "lev" + level) : eval(ddPrefix + "ddhead" + ddNumber);
currentLevel.style.background = ddHiLightColor;
} //closes if

else {
var currentLevel = type == 0 ? eval(ddPrefix + "dropdown" + ddNumber + ".document.dd" + ddNumber + "lev" + level) : eval(ddPrefix + "ddhead" + ddNumber);
currentLevel.bgColor = ddHiLightColor;
}  //closes else
}  //closes function

//Removes the highligh from the current level
function unHiLight(ddNumber,level,type) {

if (explorer) {
var currentLevel = type == 0 ? eval(ddPrefix + "dd" + ddNumber + "lev" + level) : eval(ddPrefix + "ddhead" + ddNumber);
currentLevel.style.background = ddDefaultColor;
} //closes if

else {
var currentLevel = type == 0 ? eval(ddPrefix + "dropdown" + ddNumber + ".document.dd" + ddNumber + "lev" + level) : eval(ddPrefix + "ddhead" + ddNumber);
currentLevel.bgColor = ddDefaultColor;
}  //closes else
}  //closes function


//The following are positioning functions

//Sets dropdown's left position
function ddSetLeft(ddNumber, leftPos, type) { //type 0 = container element type 1 = header
var currentLevel = type == 0 ? eval(ddPrefix + "dropdown" + ddNumber + ddSuffix) : eval(ddPrefix + "ddhead" + ddNumber + ddSuffix);
currentLevel.left = leftPos;
}  //closes function

//Sets dropdown's top position
function ddSetTop(ddNumber, topPos, type) {
var currentLevel = type == 0 ? eval(ddPrefix + "dropdown" + ddNumber + ddSuffix) : eval(ddPrefix + "ddhead" + ddNumber + ddSuffix);
currentLevel.top = topPos;
}  //closes function

//Sets the individual items in the dropdown to the correct vertical position
function ddSetItemTop(ddNumber,level,topPos) {

if (explorer) {
var currentLevel = eval(ddPrefix + "dd" + ddNumber + "lev" + level + ddSuffix);
} //closes if

else {
var currentLevel = eval(ddPrefix + "dropdown" + ddNumber + ".document.dd" + ddNumber + "lev" + level);
}  //closes else

currentLevel.top = topPos;
}  //closes function

//Sets the overall height of the menu container element (not including the header)
function ddSetHeight(ddNumber,cHeight,iHeight) {
var dropdownref = eval(ddPrefix + "dropdown" + ddNumber + ddSuffix);
if (explorer) {
dropdownref.height = cHeight;
}
else {
cHeight -= iHeight; //Subtract the header height from the overall container height
dropdownref.resizeBy(0,cHeight);
} //closes if
}  //closes function

//Master drop down creation - the listed parameters are optional, without them the box defaults to the upper right corner
function createDropDown(leftPos, topPos, ddHeadText) {

//Initialize array to hold text and links
var textAndLinks = new Array();

//Expected number of arguments to this function. Sometimes retrievable in script, for clarity I've made it a variable. IMPORTANT: Edit this is you change the number of declared parameters. This number is used throughout the function. If it's wrong you'll get incorrect results.
var ddDefaultArguments = 3;
var ddHead; //Placeholder for header HTML

//Check for parameters passed in and assign defaults if there are none
if (!leftPos) leftPos = ddDefaultLeftPos; //Left position
if (!topPos) topPos = ddDefaultTopPos; //Top position
if (!ddHeadText) ddHeadText = ddDefaultPrompt; //Prompt text
if (arguments.length > ddDefaultArguments) { //The following block sets the source of the prompts and links. If the user passes any in they are used. If not, the links declared above in the defaultLinks array are used.
textAndLinks = arguments;
}
else {
textAndLinks = defaultLinks; //This array is created at the top of this file
}

for (var i = (ddDefaultArguments-1) ; i <= textAndLinks.length-1 ; i++) {
if (textAndLinks[i].indexOf("javascript") != -1) {
textAndLinks[i] = escape(textAndLinks[i]);
} //closes if
} //closes for loop

//Sets Explorer-specific layer code
if (explorer) {
ddHead = '<div class="ddhead" id="ddhead' + ddNum + '" onclick="dropDown(' + ddNum + ');return false;" onmouseover="hiLight(' + ddNum + ',' + '0,1);clearTimeout(ddRollMe[' + ddNum + '])" onmouseout="unHiLight(' + ddNum + ',' + '0,1);delayRollUp(' + ddNum + ')"><span class="ddmenu">' + ddHeadText + '</span><span class="ddarrow"><img src="' + ddArrowSrc + '" width="11" height="8" border="0" alt="Click to drop down"></span></div>';
}
else {
ddHead = '<layer onLoad="this.captureEvents(Event.MOUSEDOWN);this.onmousedown=function() {dropDown(' + ddNum + ');}" top="0" left="0" height="' + ddItemHeight + '" width="' + ddDefaultWidth + '" bgColor="' + ddDefaultColor + '" id="ddhead' + ddNum + '" onMouseOver="hiLight(' + ddNum + ',' + '0,1);clearTimeout(ddRollMe[' + ddNum + '])" onMouseOut="unHiLight(' + ddNum + ',' + '0,1);delayRollUp(' + ddNum + ')"><a href="#" onclick="dropDown(' + ddNum + ');return false;"><span class="ddmenu">' + ddHeadText + '</span><span class="ddarrow"><img src="' + ddArrowSrc + '" width="11" height="8" border="0" alt="Click to drop down"></span></a></layer>';
}

var ddOpen = (explorer) ? '<div class="dropdown" id="dropdown' + ddNum + '">' : '<layer visibility="hide" left="' + leftPos + '" top="' + topPos + '" class="dropdown" id="dropdown' + ddNum + '">';
var ddClose = (explorer) ? '</div>' : '</layer>'; //End of the container element
var ddItemTopPos = 0; //Starting point for items in the container element. This is added to ddItemHeight to establish a new starting point for each successive layer.
var ddItems = ""; //Holds the HTML generated for the individual menu levels
var ddComplete = ""; //Hold the completed dropdown HTML
var ddItemsNum = (textAndLinks.length - ddDefaultArguments) / 2 //ddDefaultArguments is declared above. Divide by two because href and text are two arguments but one menu item.
var ddLinkLoc = ddDefaultArguments; //Initial link index in arguments array - should begin at the first slot after the default parameters
var ddPromptLoc = ddDefaultArguments + 1; //Initial prompt index in arguments array - should begin at the second slot after the default parameters
var ddContainerHeight = ddItemsNum * ddItemHeight; //The container element's overall height.

//In this section we create the HTML for the drop down items
for (i=1 ; i <= ddItemsNum ; i++) {

//Sets Explorer-specific layer code
if (explorer) {
ddItems += '<div class="dditem" id="dd' + ddNum + 'lev' + i + '" onclick="ddNavigate(\'' + textAndLinks[ddPromptLoc] + '\')" onmouseover="hiLight(' + ddNum + ',' + i + ',0)" onmouseout="unHiLight(' + ddNum + ',' + i + ',0);delayRollUp(' + ddNum + ')"><span class="ddmenu">' + textAndLinks[ddLinkLoc] + '</span></div>';
}
else {
ddItems += '<layer onLoad="this.captureEvents(Event.MOUSEDOWN);this.onmousedown=function() {ddNavigate(\'' + textAndLinks[ddPromptLoc] + '\');return false;}" class="dditem" top="0" left="0" height="' + ddItemHeight + '" width="' + ddDefaultWidth + '" bgColor="' + ddDefaultColor + '" id="dd' + ddNum + 'lev' + i + '" onMouseOver="hiLight(' + ddNum + ',' + i + ',0)" onMouseOut="unHiLight(' + ddNum + ',' + i + ',0);delayRollUp(' + ddNum + ')"><a href="#" onclick="ddNavigate(\'' + textAndLinks[ddPromptLoc] + '\');return false;"><span class="ddmenu">' + textAndLinks[ddLinkLoc] + '</span></a></layer>';
}

ddPromptLoc += 2; //Increment prompt location
ddLinkLoc += 2; //Increment link location

} //closes for loop

//Concatenate and write the complete dropdown code into the document. Broken apart here for clarity.
ddComplete = ddHead; //Header code
ddComplete += ddOpen; //Container layer open
ddComplete += ddItems; //Individual menu items
ddComplete += ddClose; //Container layer close
document.write(ddComplete);

//In this section we set the style properties of the dropdown
if (topPos) { //Sets top of container element
ddSetTop(ddNum, topPos, 1); //Header
ddSetTop(ddNum,(topPos + ddItemHeight),0); //Container element
}

if (leftPos) { //Sets left position of container element
ddSetLeft(ddNum,leftPos,1); //Header
ddSetLeft(ddNum,leftPos,0); //Container element
}

ddSetHeight(ddNum,ddContainerHeight,ddItemHeight); //Sets overall height of container element

rollUp(ddNum); //Set default visibility to hidden just in case. IE doesn't always pick this up from the initial <style> declaration.

//Following loop sets the top property of the individual layers in the container layer to stack them up vertically
for (i=1 ; i <= ddItemsNum ; i++) {
ddSetItemTop(ddNum,i,ddItemTopPos); //Set top position for item
ddItemTopPos += ddItemHeight; //Increment by item height
} //closes for loop

ddNum++; //Increment the dropdown counter

} //closes function