// layout5 demo

var gBrowserSupported = false;

if (document.getElementById || document.all) {
  document.write(
    "<link rel='stylesheet' type='text/css' href='css/layout5x.css'>"
    + "<script type='text/javascript' src='js/layout4or5_xlib.js'><\/script>"
  );
  gBrowserSupported = true;
}

window.onload = function()
{
  if (gBrowserSupported) {
    winOnResize();
    xAddEventListener(window, 'resize', winOnResize, false);
  }
}
function winOnResize()
{
  xPaintPage(15,   // left/right page margin
             15,   // top/bottom page margin
             350,  // side column width
             2);   // idPage border width
}

function xPaintPage(lrPgMargin, tbPgMargin, sideColWidth, pgBorderWidth)
{
  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);
  clW -= 2 * pgBorderWidth;
  clH -= 2 * pgBorderWidth;
  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