container = document.createElement("div");

function showKey() {
	
	var width   = 130;
	var height  = 521;
	var popPage = 'services_key.htm';
	var cHeight = 14;
	
	height += cHeight;
	
	var body  = document.body;
	var style = container.style;
	
	style.top  =
			body.scrollTop + Math.floor((body.clientHeight - height) / 2) + "px"
	;
	style.left     = Math.floor((body.clientWidth - width) / 2) + "px";
	style.position = 'absolute';
	style.overflow = 'hidden';
	style.width    = width;
	style.height   = height;
	style.padding  = '3px 3px 3px 3px';
	
	container.innerHTML =
			"<div style='width:100%;height:" + cHeight + "px;" + 
			"background-color:blue;color:white;text-align:center;margin:0px;" + 
			"padding:0px;font:" + (cHeight - 2) + "/" + cHeight + "px sans-serif;' " + 
			"onclick='document.body.removeChild(container)'>close</div>" +
			"<iframe style='width:" + width + "px;height:" + height + "px;" + 
			"border:0px;' src='" + popPage + "' scrolling='no' border='0'></div>"
	;
	
	body.appendChild(container);
	
	return false;
}


/**
 * Return a string that defines the HTML for a trio of date selection menus
 * i.e. a dropdown each for day of month, month and year.
 *
 * @param namePrefix a string to prepend to the name attribute of each 
 *   SELECT.
 * @param minYear the minimum year to be in the year menu (inclusive). If
 *   missing, it defaults to the current year. If less than 0, the current
 *   year is added to it; therefore, if the year is 2007 and minYear is
 *   -100, then the minYear becomes 1907.
 * @param maxYear the maximum year to be in the year menu (inclusive). If
 *   maxYear is less than one thousand then the current year is added to it.
 */
function getDateSelector(namePrefix, minYear, maxYear) {
  
  var output     = [];
  var date       = new Date();
  var year       = date.getFullYear();
  var month      = date.getMonth() + 1;
  var dayOfMonth = date.getDate();
  
  if (!minYear) minYear = year; else if (minYear < 0   ) minYear += year;
  if (!maxYear) maxYear = year; else if (maxYear < 1000) maxYear += year;

  /*
   * Start the day of month select box
   */
  output.push("<select name='", namePrefix, "DayOfMonth'>\n  ");
  
  for (var i = 1; i < 31; i++) {
    output.push(
        "<option value='", i, "'",
        (i == dayOfMonth ? " selected='selected'" : ''), ">",
        (i < 10 ? '0' : ''), i,
        "</option>"
    );
  }
  
  output.push("\n</select>\n");
  
  
  /*
   * Start the month select box
   */
  var months = ["",
      "Jan", "Feb", "Mar", "Apr", "May", "Jun",
      "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
  ];
  
  output.push("<select name='", namePrefix, "Month'>\n  ");
  
  for (var i = 1; i < 12; i++) {
    output.push(
        "<option value='", i, "'",
        (i == month ? " selected='selected'" : ''), ">",
        months[i],
        "</option>"
    );
  }
  
  output.push("</select>");
  
  
  /*
   * Start the year select box
   */
  output.push("<select name='", namePrefix, "Year'>\n  ");
  
  for (var i = minYear; i <= maxYear; i++) {
    output.push(
      "<option value='", i, "'",
      (i == year ? " selected='selected'" : ''), ">",
      i,
      "</option>"
    );
  }
  
  output.push("\n</select>\n");
  
  return output.join('');
}