function addEvent(obj ,evt, fnc)
{
  if( obj.addEventListener )
  {
    obj.addEventListener(evt, fnc, false);
  }
  else if( obj.attachEvent )
  {
    obj.attachEvent('on' + evt, fnc);
  }
  else
  {
    return false;
  }
  return true;
}

function removeEvent(obj ,evt, fnc)
{
  if( obj.removeEventListener )
  {
    obj.removeEventListener(evt, fnc, false);
  }
  else if( obj.detachEvent )
  {
    obj.detachEvent('on' + evt, fnc);
  }
  else
  {
    return false;
  }
  return true;
}

function appendElement(node, tag, id, htm)
{
  var ne = document.createElement(tag);
  if( id )
  {
    ne.id = id;
  }
  if( htm )
  {
    ne.innerHTML = htm;
  }
  node.appendChild(ne);
}

function greyout(d, z)
{
  var obj = getElement('greyout');
  if( !obj )
  {
    appendElement(document.body, 'div', 'greyout');
    obj = getElement('greyout');
    obj.style.position = 'absolute';
    obj.style.top = '0px';
    obj.style.left = '0px';
    obj.style.background = '#111';
    obj.style.opacity = '.6';
    obj.style.filter = 'alpha(opacity=60)';
  }
  if( d )
  {
    if( !z )
    {
      z - 50
    }
    obj.style.zIndex = z;
    obj.style.height = Math.max(document.body.scrollHeight,document.body.clientHeight) + 'px';
    obj.style.width  = Math.max(document.body.scrollWidth,document.body.clientWidth) + 'px';
    obj.style.display = 'block';
    addEvent(window, 'resize', greyoutResize);
  }
  else
  {
    obj.style.display = 'none';    
    removeEvent(window,'resize',greyoutResize);
  }
}

function greyoutResize()
{
  var obj = getElement('greyout');
  obj.style.height = document.body.clientHeight+'px';
  obj.style.width  = document.body.clientWidth+'px';
  obj.style.height = Math.max(document.body.scrollHeight,document.body.clientHeight)+'px';
  obj.style.width  = Math.max(document.body.scrollWidth,document.body.clientWidth)+'px';
}

function showPopup(popupId)
{
  greyout(true);
  getElement(popupId).style.display = 'block';
}

function hidePopup(popupId)
{
  greyout(false);
  getElement(popupId).style.display = 'none';
}