function overlay_display ( content, width, height ) {

   var windowwidth = window.innerWidth;
   var windowheight = window.innerHeight;
   var documentwidth = document.width;
   var documentheight = document.height;

   if ( ! windowwidth ) {
      windowwidth = documentwidth = document.body.clientWidth;
      windowheight = documentheight = document.body.clientHeight;
   }

   var left = windowwidth / 2 - width / 2;
   var top = windowheight / 2 - height / 2;
   if ( top < 0 ) top = 0;

   documentwidth = '100%';
   if ( document.body.scrollTop ) top += document.body.scrollTop;
   if ( document.body.scrollHeight && document.body.scrollHeight > documentheight ) documentheight = document.body.scrollHeight;

   var overlay = "";

   overlay += "<span style='position: absolute; left: 0px; top: 0px; opacity: 0.8; -moz-opacity:0.8; filter:alpha(opacity=80); z-index: 99;'>";
   overlay += "<table border='0' cellpadding='0' cellspacing='0' width='" + documentwidth + "' height='" + documentheight + "' bgcolor='#ffffff'><tr><td></td></tr></table>";
   overlay += "</span>";

   overlay += "<span style='position: absolute; left: " + left + "px; top: " + top + "px; z-index: 100;'>";
   overlay += content;
   overlay += "</span>";

   document.getElementById ( "pageoverlay" ).innerHTML = overlay;

}

function overlay_hide () {

   document.getElementById ( "pageoverlay" ).innerHTML = "";

   formfield_reset_switch_option_vars ();

}


// USED FOR STATUS TICKER FUNCTIONALITY

function overlay_show_ticker ( actiontext, imagedir ) {

   var alertwidth = 271;
   var alertheight = 79;
   var overlay = "";

   overlay += "<table border='0' cellpadding='1' cellspacing='0' style='background: #000000;'><tr><td>";
   overlay += "<table cellpadding='0' cellspacing='0' width='" + alertwidth + "' height='" + alertheight + "'>";
   overlay += "<tr><td height='66' background='" + imagedir + "/loading_background.jpg' style='text-align: center; vertical-align: middle;'>";
   overlay += "      <span style='color: white; font: 16pt Arial; font-weight: bold; font-style: italic;'>" + actiontext + "</span>";
   overlay += "      <span style='color: white; font: 10pt Arial; font-style: italic;'><br>Please Wait</span>";
   overlay += "   </td></tr>";
   overlay += "<tr><td height='6'><img src='" + imagedir + "/loading_animation.gif' width='" + alertwidth + "' height='6'></td></tr>";
   overlay += "<tr><td height='7' background='" + imagedir + "/loading_background.jpg'></td></tr>";
   overlay += "</table>";
   overlay += "</td></tr></table>";

   overlay_display ( overlay, alertwidth, alertheight );

}


// USED FOR SAVE CARD FUNCTIONALITY

var savecard_captionlist = new Array ();

function overlay_show_dialog ( width, height, title, text ) {

   var box = "";

   box += "<table border='0' cellpadding='1' cellspacing='0' width='" + width + "' class='overlaybox'>";
   box += "<tr><td>";
   box += "   <table border='0' cellpadding='0' cellspacing='0' width='100%'>";
   box += "   <tr><td class='overlayboxtitlebar'>";
   box += "      " + title;
   box += "      </td><td align='right' class='overlayboxtitlebar'><a class='overlayboxtitlebar' href='' onClick='overlay_hide (); return false;'>Close</a></td></tr>";
   box += "   <tr><td colspan='2' class='overlayboxcontentarea'>";
   box += text;
   box += "      </td></tr>";
   box += "   </table>";
   box += "   </td></tr>";
   box += "</table>";

   overlay_display ( box, width, height );

}

function overlay_show_save_dialog ( currentcaption, currentgroup, grouplist, captionlist, writetolocation ) {

   var options = "";
   var option1checked = "";
   var option2checked = "";
   var option1disabled = "";
   var option2disabled = "";
   var option2value = "Enter Group Name";

   // build the list of captions to be used to verify that the caption is not a duplicate
   for ( var i = 0; i < captionlist.length; i++ ) {
      if ( captionlist[i] != currentcaption ) {
         savecard_captionlist.push ( captionlist[i] );
      }
   }

   currentcaption = currentcaption.replace ( "'", "&#39;" );

   // build the options for the group drop-down
   for ( var i = 0; i < grouplist.length; i++ ) {
      options += "<option";
      if ( ! grouplist[i] ) {
         //grouplist[i] = ( document.all ) ? "----------------------------------------" : "";
         grouplist[i] = "";
         options += " value='separator'";
      }

      if ( ( currentgroup && grouplist[i] == currentgroup ) || ( ! i && ! currentgroup ) ) { // if current group or no group and first option
         options += " selected";
         option1checked = " checked";
         option2disabled = " disabled";
      }
      options += ">";
      options += grouplist[i];
   }

   // if current group exists and is not in list, default into the freeform field
   if ( ! option1checked ) {
      option2checked = " checked";
      option2value = currentgroup.replace ( "'", "&#39;" );;
      option1disabled = " disabled";
   }

   var reviewcardjs = " onKeyUp='if ( document.theform && document.theform.savecard && document.theform.savecard.type == \"checkbox\" ) { document.theform.savecard.checked = ( ( this.value ) ? true : false ); }'";

   var contents = "";

   if ( ! writetolocation ) {
      contents += "<span class='headerstepdescription'>Save this card to your Postcard Gallery so that you can finish your card later.  Enter a caption and grouping to continue.</span>";
      contents += "<br><br><center>";
   }

   contents += "<table border='0' cellpadding='0' cellspacing='2'>";
   contents += "<tr><td align='right'>";
   contents += "      <span class='required'>*</span> Caption:&nbsp; &nbsp;";
   contents += "   </td><td>";
   contents += "      <input type='text' id='savecard_overlay_caption' maxlength='50' value='" + currentcaption + "' style='width: 200px;'" + reviewcardjs + ">";
   contents += "   </td></tr>";
   contents += "<tr><td align='right'>";
   contents += "      <span class='required'>*</span> Group:&nbsp; &nbsp;";
   contents += "   </td><td>";
   contents += "      <input type='radio' name='savecard_overlay_grouptype' id='savecard_overlay_grouptype_1' value='1'" + option1checked + " onClick='switch_option_and_enable_status ( document.getElementById ( \"savecard_overlay_groupoptions\" ), document.getElementById ( \"savecard_overlay_newgroup\" ), document.getElementById ( \"savecard_overlay_grouptype_1\" ) );'>&nbsp;";
   contents += "      <span onClick='switch_option_and_enable_status ( document.getElementById ( \"savecard_overlay_groupoptions\" ), document.getElementById ( \"savecard_overlay_newgroup\" ), document.getElementById ( \"savecard_overlay_grouptype_1\" ) );'><select id='savecard_overlay_groupoptions' name='savecard_overlay_groupoptions' style='width: 177px;' onChange='formfield_skip_select_separator ( this );' onKeyUp='formfield_skip_select_separator ( this );'" + option1disabled + ">" + options + "</select></span>";
   contents += "   </td></tr>";
   contents += "<tr><td></td><td>";
   contents += "      <input type='radio' name='savecard_overlay_grouptype' id='savecard_overlay_grouptype_2' value='2'" + option2checked + " onClick='switch_option_and_enable_status ( document.getElementById ( \"savecard_overlay_newgroup\" ), document.getElementById ( \"savecard_overlay_groupoptions\" ), document.getElementById ( \"savecard_overlay_grouptype_2\" ) );'>&nbsp;";
   contents += "      <span onClick='switch_option_and_enable_status ( document.getElementById ( \"savecard_overlay_newgroup\" ), document.getElementById ( \"savecard_overlay_groupoptions\" ), document.getElementById ( \"savecard_overlay_grouptype_2\" ) );'><input id='savecard_overlay_newgroup' style='width: 177px;' maxlength='20' value='" + option2value + "'" + option2disabled + "></span>";
   contents += "   </td></tr>";
   contents += "</table><br>";

   if ( ! writetolocation ) {
      contents += "<input type='button' value='Save' onClick='overlay_submit_save_dialog ();'>&nbsp; &nbsp;<input type='button' value='Cancel' onClick='overlay_hide ();'>";
      contents += "</center><br><span class='required'>* - Denotes required field</span>";
      overlay_show_dialog ( 350, 220, "Save Card to Postcard Gallery", contents );
      setTimeout ( "document.getElementById ( 'savecard_overlay_caption' ).focus ();", 500 ); // needs a delay for IE
   }
   else document.getElementById ( writetolocation ).innerHTML = contents;

}

function overlay_show_save_results ( statusmessage ) {

   var contents = "";
   contents += "<span class='headerstepdescription'>" + statusmessage + "</span><br><br><center>";
   contents += "<input type='button' id='savecard_overlay_hide_button' value='OK' onClick='overlay_hide ();'></center><br>";

   overlay_show_dialog ( 350, 100, "Save Card to Postcard Gallery", contents );
   document.getElementById ( 'savecard_overlay_hide_button' ).focus ();

}

function overlay_submit_save_dialog () {

   // retrieve the values to be saved
   var caption = document.getElementById ( "savecard_overlay_caption" ).value;

   if ( document.getElementById ( "savecard_overlay_grouptype_1" ) .checked )
      var group = document.getElementById ( "savecard_overlay_groupoptions" ).options[document.getElementById ( "savecard_overlay_groupoptions" ).selectedIndex].text;
   else if ( document.getElementById ( "savecard_overlay_grouptype_2" ) .checked )
      var group = document.getElementById ( "savecard_overlay_newgroup" ).value;

   // validate the save information before attempting to save
   if ( ! caption ) { // check that caption exists
      alert ( 'Please enter a caption to continue.' );
      return false;
   }

   for ( var i = 0; i < savecard_captionlist.length; i++ ) { // check that the caption is not already in use
      if ( savecard_captionlist[i] == caption ) {
         alert ( 'You already have a card saved as "' + caption + '".  Please enter a different caption to continue.' );
         return false;
      }
   }

   if ( ! group ) { // should not be possible, but verify that a group is available
      alert ( 'Please enter a group to continue.' );
      return false;
   }

   // find the base page form that is to be submitted
   var submitform = null;

   // check for a top priority form - used to allow page level submit button to be rounted to a specific form before submitting its own form
   if ( document.form_top_priority && document.form_top_priority.savecard_caption && document.form_top_priority.savecard_group ) {
      submitform = document.form_top_priority;
   }
   // check all other forms on the page if not within the top priority form
   else {
      for ( var i = 0; i < document.forms.length; i++ ) {
         if ( document.forms[i].savecard_caption && document.forms[i].savecard_group ) {
            submitform = document.forms[i];
         }
      }
   }

   // if the text tool is available, save through it
   if ( dock_submit_texttool ( '', caption, group ) ) return true;
   // if a form was found, popuplate the fields and submit
   else if ( submitform ) {
      submitform.savecard_caption.value = caption;
      submitform.savecard_group.value = group;
      submitform.submit ();
      return true;
   }
   // no save fields were found - issue an error to the user - this should never happen
   else {
      overlay_hide ();
      alert ( "Your card cannot be saved due to an error on the current web page.  Please try saving from a different step." );
      return false;
   }

}


// USED FOR USER AGREEMENT POPUP FUNCTIONALITY

function overlay_show_agreement () {

   var title = "User Agreement Update";
   var width = 600;
   var height = 350;
   var text = "";

   text += "<br><center><span class='selectSubDescription'>We have updated our user agreement.  Please accept the agreement to continue.</span><br><br>";
   text += "<span style='display: block; margin: 5px; width: 85%; height: 200px; overflow: auto; border: 1px solid #999; background: #f8f8f8; padding-right: 15px; text-align: left;'>";
   text += document.getElementById ( "user_agreement_text" ) .value;
   text += "</span><br>";
   text += "<table cellpadding='10' cellspacing='0'><tr><td>";
   text += "<form action='/updatesession.php' method='post'><input type='hidden' name='action' value='accept_agreement'><input type='submit' id='user_agreement_accept_button' value='Accept'></form>";
   text += "</td><td>";
   text += "<form action='/logout.php' method='post'><input type='submit' value='Decline'></form>";
   text += "</td></tr></table></center>";

   var box = "";

   box += "<table border='0' cellpadding='1' cellspacing='0' width='" + width + "' class='overlaybox'>";
   box += "<tr><td>";
   box += "   <table border='0' cellpadding='0' cellspacing='0' width='100%'>";
   box += "   <tr><td class='overlayboxtitlebar'>";
   box += "      " + title;
   box += "      </td><td align='right' class='overlayboxtitlebar'></td></tr>";
   box += "   <tr><td colspan='2' class='overlayboxcontentarea'>";
   box += text;
   box += "      </td></tr>";
   box += "   </table>";
   box += "   </td></tr>";
   box += "</table>";

   overlay_display ( box, width, height );
   document.getElementById ( "user_agreement_accept_button" ) .focus ();

}


function overlay_toggle_foreground_background ( element_front, element_back ) {

   // just switch the zIndex values for now, but may want to expand for animation or more control over it in the future
   document.getElementById ( element_front ).style.zIndex = 1;
   document.getElementById ( element_back ).style.zIndex = 2;