/***********************

Add to your main.js

function Sunglass_Initialize()
{
  //# Defined sizes for popupdiv types
  var aPopupDivSizes = new Array;
  aPopupDivSizes['popup'] = new Array;
  aPopupDivSizes['popup']['width'] = 641;
  aPopupDivSizes['popup']['height'] = 392;
  document['aPopupDivSizes'] = aPopupDivSizes;

  //# Create sunglassdiv and add onclick events
  if ('function' == typeof SUNGLASS_CreateSunglassPopup)
  {
    SUNGLASS_CreateSunglassPopup();
  }
  //# Create close popup links
  if ('function' == typeof SUNGLASS_InitClosePopupWindow)
  {
    SUNGLASS_InitClosePopupWindow();
  }
}

if ('function' == typeof WHITE_AddWindowLoadFunction)
{
  WHITE_AddWindowLoadFunction(Sunglass_Initialize);
}

**********************

The link should look like this:

<a href="http://www.white.nl/" class="popupLink" id="popup-whitedemo">popup white demo</a>

**********************

Add to your template HTML just before </body>:

<div id="popupIFrameDiv" class="PopupDiv"><iframe src="/empty.html" name="popupIFrame" id="popupIFrame" scrolling="no" frameborder="0"></iframe></div>
<div id="SunglassDiv"></div>

**********************

Create an empty text file at /empty.html

**********************

Put the following css in your main.css


div#popupIFrameDiv {
  position:                    absolute;
  visibility:                  hidden;
  width:                       400px;
  height:                      250px;
  z-index:                     1501;
}

iframe#popupIFrame {
  width:                       100%;
  height:                      100%;
  left:                        0px;
  top:                         0px;
  overflow:                    hidden;
  border:                      none;
  background-color:            #FFFFFF;
  z-index:                     1502;
}

***********************/

//#############################################################################
//# Popup div with sunglass background
//#############################################################################
//### Write div to HTML content
function SUNGLASS_CreateSunglassPopup()
{
  //# Check for elements with class PopupDiv
  var aPopupLinks = WHITE_GetElementsByClass(document, 'popupLink', 'a');
  var oPopupIFrame = WHITE_GetElementFlex('popupIFrame');
  var oSunglassDiv = WHITE_GetElementFlex('SunglassDiv');

  if ('object' == typeof oPopupIFrameDiv
      && 'object' != typeof oSunglassDiv)
  {
    //# Place SunGlassHTML before Popup Div
    var sSunglassDivHTML = '<div id="SunglassDiv"></div>\n';
    WHITE_InsertBeforeElement(oPopupIFrameDiv, sSunglassDivHTML);
    oSunglassDiv = WHITE_GetElementFlex('SunglassDiv');
  }

  //# Style SunglassDiv
  if ('object' == typeof oSunglassDiv)
  {
    //# Hide sunglass with a single click outside the popup (on the sunglass)
    //WHITE_AddEventToElement(oSunglassDiv, 'click', SUNGLASS_EventSunglassPopupHide);
    oSunglassDiv.style.position          = 'absolute';
    oSunglassDiv.style.left              = '0px';
    oSunglassDiv.style.top               = '0px';
    oSunglassDiv.style.zIndex            = '1500';
    oSunglassDiv.style.visibility        = 'hidden';
    oSunglassDiv.style.backgroundColor   = '#000000';
    oSunglassDiv.style.opacity           = '0.70';
    oSunglassDiv.style.filter            = 'Alpha(Opacity=70)';
    WHITE_AddClassName(oSunglassDiv,'hidden');
  }

  if ('object' == typeof oPopupIFrame)
  {
    if ('undefined' != typeof oPopupIFrame.src)
    {
      oPopupIFrame['sEmptySrc'] = oPopupIFrame.src;
    }
  }

  for (var iEl=0;iEl<aPopupLinks.length;iEl++)
  {
    var oPopupLink = aPopupLinks[iEl];
    if ('object' == typeof oPopupLink)
    {
      //# Add function EventSunglassPopupShow to openbuttons
      WHITE_AddEventToElement(oPopupLink, 'click', SUNGLASS_EventSunglassPopupShow);
    }
  }

}

//### Show SunglassDiv and PopupDiv
function SUNGLASS_EventSunglassPopupShow(oEvent)
{
  //# Get vars from object
  var sPopupUrl  = this.href;
  var sPopupType = this.id.split(/-/)[0];

  if (!sPopupType)
  {
  	sPopupType = 'popup';
  }
  var bShowSuccess = SUNGLASS_SunglassPopupShowType(sPopupUrl,sPopupType);

  //# Cancel all other (link) events
  WhiteForm_CancelEvent(oEvent);
  return false;
}

//
// returns boolean, true = success
//
function SUNGLASS_SunglassPopupShowType(sPopupUrl,sPopupType)
{
  var iWidth = false;
  var iHeight = false;
  var aPopupDivSizes = new Array();
  var bResult = false;
  if (document.aPopupDivSizes)
  {
    aPopupDivSizes = document.aPopupDivSizes;
  }
  if ('object' == typeof aPopupDivSizes[sPopupType])
  {
    iWidth = aPopupDivSizes[sPopupType]['width'];
    iHeight = aPopupDivSizes[sPopupType]['height'];
  }
  bResult = SUNGLASS_SunglassPopupShow(sPopupUrl,iWidth,iHeight);
  return bResult;
}

//
// returns boolean, true = success
//
function SUNGLASS_SunglassPopupShow(sPopupUrl,iWidth,iHeight)
{
  var oSunglassDiv = WHITE_GetElementFlex('SunglassDiv');
  var oPopupIFrame = WHITE_GetElementFlex('popupIFrame');
  var oPopupDiv = WHITE_GetElementFlex('popupIFrameDiv');
  var bResult = false;

  if ('object' == typeof oPopupIFrame
      && 'object' == typeof oPopupDiv)
  {
    //# Show sunglass div
    if ('object' == typeof oSunglassDiv)
    {
      var aWebsiteSize = SUNGLASS_GetWebsiteSize();
      oSunglassDiv.style.width      = aWebsiteSize[0] + 'px';
      oSunglassDiv.style.height     = aWebsiteSize[1] + 'px';
      oSunglassDiv.style.visibility = 'visible';
      WHITE_RemoveClassName(oSunglassDiv,'hidden');
      //Hide selects
      SUNGLASS_SelectHide();
    }

    //# Show popup div
    if ('undefined' != typeof iWidth  && iWidth)  oPopupDiv.style.width = iWidth + 'px';
    if ('undefined' != typeof iHeight && iHeight) oPopupDiv.style.height = iHeight + 'px';

    oPopupIFrame.src = sPopupUrl;
    setTimeout('SUNGLASS_PopupShowTimer();',1); // by using timer the sizing in function is completed first

    bResult = true;
  }
  return bResult;
}

function SUNGLASS_PopupShowTimer()
{
  var oPopupDiv = WHITE_GetElementFlex('popupIFrameDiv');
  var oPopupIFrame = WHITE_GetElementFlex('popupIFrame');

  oPopupDiv.style.visibility = 'visible';
  WHITE_RemoveClassName(oPopupDiv,'hidden');
  WHITE_RemoveClassName(oPopupIFrame,'hidden');

  // unhide first to make offsetWidth & offsetHeight work
  var aPopupLeftTop   = SUNGLASS_GetWindowCenterLeftTop(oPopupDiv.offsetWidth, oPopupDiv.offsetHeight);
  oPopupDiv.style.left       = aPopupLeftTop[0] + 'px';
  oPopupDiv.style.top        = aPopupLeftTop[1] + 'px';
}


function SUNGLASS_EventSunglassPopupHide(oEvent)
{
  var bClosedOK = SUNGLASS_SunglassPopupHide();
  if (bClosedOK)
  {
    WhiteForm_CancelEvent(oEvent);
  }
  return !bClosedOK;
}

//### Hide SunglassDiv and PopupDiv
//
// result = boolean, true = succesfully closed
//
function SUNGLASS_SunglassPopupHide()
{
  //Show selects
  SUNGLASS_SelectShow();
  bResult = false;

  var oPopupDiv = WHITE_GetElementFlex('popupIFrameDiv');
  var oSunglassDiv = WHITE_GetElementFlex('SunglassDiv');
  if ('object' == typeof oPopupDiv)
  {
    oPopupDiv.style.visibility = 'hidden';
    WHITE_AddClassName(oSunglassDiv,'hidden');
    var oPopupIFrame = WHITE_GetElementFlex('popupIFrame');
    if ('object' == typeof oPopupIFrame)
    {
      oPopupIFrame.src = oPopupIFrame.sEmptySrc; // clear content to be empty for next popup
    }
  }
  if ('object' == typeof oSunglassDiv)
  {
    oSunglassDiv.style.visibility = 'hidden';
    WHITE_AddClassName(oSunglassDiv,'hidden');
  }
  if ( 'object' == typeof oPopupDiv
       && 'object' == typeof oSunglassDiv )
  {
    bResult = ( 'hidden' == oSunglassDiv.style.visibility
                 && 'hidden' == SunglassDiv.style.visibility );
  }
/*
  ### Changing the src of the iframe kills this current running script, at least in FF.
  var oPopupIFrame = WHITE_GetElementFlex('popupIFrame');
  if ('object' == typeof oPopupIFrame)
  {
    oPopupIFrame.src = "/images/spacer.gif";
  }
*/
  return bResult;
}

//### Calculate size of website
function SUNGLASS_GetWebsiteSize()
{
  var iWindowWidth  = 0;
  var iWindowHeight = 0;

  //# Get width of fullscreen div (if exists)
  //# and height of site div (if exists)
  var oFullscreen = WHITE_GetElementFlex('fullscreen');
  if ('object' == typeof oFullscreen)
  {
    iWindowWidth = oFullscreen.offsetWidth;
  }
  var oSiteDiv = WHITE_GetElementFlex('site');
  if ('object' == typeof oSiteDiv)
  {
    iWindowHeight = oSiteDiv.offsetHeight;
  }
  if (0 == iWindowWidth)
  {
    iWindowWidth = window.innerWidth;
  }
  if (0 == iWindowHeight)
  {
    iWindowHeight = window.innerHeight;
  }

  //# Check if fullscreen div isn't smaller than body
  var iBodyWidth  = SUNGLASS_f_clientWidth();
  var iBodyHeight = SUNGLASS_f_clientHeight();
  if (iWindowWidth < iBodyWidth)
  {
    iWindowWidth = iBodyWidth;
  }
  if (iWindowHeight < iBodyHeight)
  {
    iWindowHeight = iBodyHeight;
  }

  //# Return values
  var aResult = new Array(2);
  aResult[0] = iWindowWidth;
  aResult[1] = iWindowHeight;
  return aResult;
}

//### Calculate center position of website
function SUNGLASS_GetWindowCenter()
{
  var iBodyWidth  = SUNGLASS_f_clientWidth();
  var iBodyHeight = SUNGLASS_f_clientHeight();
  var iScrollLeft = SUNGLASS_f_scrollLeft();
  var iScrollTop  = SUNGLASS_f_scrollTop();
  //# Calculate center position of website
  var aResult = new Array(2);
  aResult[0] = (iBodyWidth  / 2) + iScrollLeft.valueOf();
  aResult[1] = (iBodyHeight / 2) + iScrollTop.valueOf();
  return aResult;
}

//### Calculate x,y pos of PopupDiv from center of active window
function SUNGLASS_GetWindowCenterLeftTop(iObjectWidth,iObjectHeight)
{
  var aWindowCenter = SUNGLASS_GetWindowCenter();
  var aResult = new Array(2);

  //# Calculate position
  aResult[0] = Math.floor(aWindowCenter[0].valueOf() - iObjectWidth.valueOf() / 2);
  aResult[1] = Math.floor(aWindowCenter[1].valueOf() - iObjectHeight.valueOf() / 2);

  //# Position starts in visible window (min scrollTop and scrollLeft)
  var iScrollLeft = SUNGLASS_f_scrollLeft();
  var iScrollTop  = SUNGLASS_f_scrollTop();
  if (iScrollLeft > aResult[0])
  {
    aResult[0] = iScrollLeft;
  }
  if (iScrollTop > aResult[1])
  {
    aResult[1] = iScrollTop;
  }

  //# Position is within website size (max WebsiteSize - iObjectSize)
  var aWebsiteSize = SUNGLASS_GetWebsiteSize();
  if ((aWebsiteSize[0]- iObjectWidth) < aResult[0])
  {
    aResult[0] = (aWebsiteSize[0]- iObjectWidth);
  }
  if ((aWebsiteSize[1]- iObjectHeight) < aResult[1])
  {
    aResult[1] = (aWebsiteSize[1]- iObjectHeight);
  }

  return aResult;
}

//#############################################################################
//# Get body size and scrollbar positions functions
//#############################################################################
//http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
function SUNGLASS_f_clientWidth()
{
  return SUNGLASS_f_filterResults (
    window.innerWidth ? window.innerWidth : 0,
    document.documentElement ? document.documentElement.clientWidth : 0,
    document.body ? document.body.clientWidth : 0
  );
}
function SUNGLASS_f_clientHeight()
{
  return SUNGLASS_f_filterResults (
    window.innerHeight ? window.innerHeight : 0,
    document.documentElement ? document.documentElement.clientHeight : 0,
    document.body ? document.body.clientHeight : 0
  );
}
function SUNGLASS_f_scrollLeft() {
  return SUNGLASS_f_filterResults (
    window.pageXOffset ? window.pageXOffset : 0,
    document.documentElement ? document.documentElement.scrollLeft : 0,
    document.body ? document.body.scrollLeft : 0
  );
}
function SUNGLASS_f_scrollTop()
{
  return SUNGLASS_f_filterResults (
    window.pageYOffset ? window.pageYOffset : 0,
    document.documentElement ? document.documentElement.scrollTop : 0,
    document.body ? document.body.scrollTop : 0
  );
}
function SUNGLASS_f_filterResults(n_win, n_docel, n_body)
{
  var n_result = n_win ? n_win : 0;

  if (n_docel && (!n_result || (n_result > n_docel)))
  {
    n_result = n_docel;
  }

  return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

//#############################################################################
//# Hide and show select lists in form
//#############################################################################
function SUNGLASS_SelectHide()
{
  var aSelects = document.getElementsByTagName("select");
  if (0 < aSelects.length)
  {
    for (iTel = 0; iTel != aSelects.length; iTel++)
    {
      oSelect = aSelects[iTel];
      if ('object' == typeof oSelect)
      {
        oSelect.style.visibility = "hidden";
      }
    }
  }
}

function SUNGLASS_SelectShow()
{
  var aSelects = document.getElementsByTagName("select");
  if (0 < aSelects.length)
  {
    for (iTel = 0; iTel != aSelects.length; iTel++)
    {
      oSelect = aSelects[iTel];
      if ('object' == typeof oSelect)
      {
        oSelect.style.visibility = "visible";
      }
    }
  }
}

//#############################################################################
//# Call SunglassPopupHide from parent window
//#############################################################################
function SUNGLASS_InitClosePopupWindow()
{
  var aApplyToElements = new Array('a','img','area');
  var aCloseButtons = WHITE_GetElementsByClass(document, 'closelink', aApplyToElements);
  for (var iElC=0;iElC<aCloseButtons.length;iElC++)
  {
    WHITE_AddEventToElement(aCloseButtons[iElC], 'click', SUNGLASS_EventCloseThisPopupWindow);
  }
}

//
// Result = boolean, true = handeled (successfully closed or backup-plan executed)
//
function SUNGLASS_CloseThisPopupWindow()
{
  var bResult = false;
  if (parent && 'function' == typeof parent.SUNGLASS_SunglassPopupHide)
  {
    bResult = parent.SUNGLASS_SunglassPopupHide();
  }
  if (!bResult)
  {
    if (1 >= history.length) // opened in new window/tab // FF=1, IE=0
    {
      window.close(); // Fix for if opened in new window/tab
    }
    else
    {
      history.back(); // Fix for if opened in same window in _top
    }
    bResult = true;
  }
  return bResult;
}

function SUNGLASS_EventCloseThisPopupWindow(oEvent)
{
  var bCloseSuccess = SUNGLASS_CloseThisPopupWindow();
  var bEventResult = true;
  if (bCloseSuccess)
  {
    WhiteForm_CancelEvent(oEvent);
    bEventResult = false;
  }
  return bEventResult;
}