// layout4 demo

xAddEventListener(window, 'load', winOnLoad, false);

function winOnLoad()
{
  var e = xGetElementById('idPage');
  if (e && e.style) { // compatibility check
    winOnResize();
    xAddEventListener(window, 'resize', winOnResize, false);
  }
  else {
    alert('Your browser does not support the Javascript features required by this application.');
  }
}
function winOnResize()
{
  xPaintPage(30,   // left/right page margin
             30,   // top/bottom page margin
             250); // side column width
}

function xPaintPage(lrPgMargin, tbPgMargin, sideColWidth)
{
  var
    ePg = xGetElementById('idPage'),
    eHdr = xGetElementById('idHeader'),
    eCols = xGetElementById('idColumns'),
    eMCol = xGetElementById('idMainColumn'),
    eSCol = xGetElementById('idSideColumn'),
    eFtr = xGetElementById('idFooter'),
    clW = xClientWidth() - (2 * lrPgMargin),
    clH = xClientHeight() - (2 * tbPgMargin),
    colH;

  // This is an example of one of the many extra features that can be thrown in:
  if (clW <= 2 * sideColWidth) {
    sideColWidth = 0;
    eSCol.style.display = 'none';
  }
  else {
    eSCol.style.display = 'block';
  }
  // end extra feature

  xMoveTo(ePg, lrPgMargin, tbPgMargin);
  xResizeTo(ePg, clW, clH);
  xWidth(eHdr, clW);
  xWidth(eFtr, clW);
  colH = clH - xHeight(eHdr) - xHeight(eFtr); 
  xResizeTo(eCols, clW, colH);
  if (sideColWidth) {
    xMoveTo(eSCol, 0, 0);
    xResizeTo(eSCol, sideColWidth, colH);
  }
  xMoveTo(eMCol, sideColWidth, 0);
  xResizeTo(eMCol, clW - sideColWidth, colH);
} // end xPaintPage