function showBox(box){

  Event.observe('page_overlay', 'click', function() { hideBox(box); });
  $('page_overlay').style.height = getPageHeight() + 'px';
  $('page_overlay').style.width = getPageWidth() + 'px';

  $('page_overlay').show();
  center(box);
  return false;
}

function hideBox(box){
    Event.stopObserving('page_overlay', 'click', function() { hideBox(); });
    $(box).hide();
    $('page_overlay').hide();
    return false;
}

function getPageWidth()
{
  var x;
  if (self.innerHeight) // all except Explorer
  {
    x = self.innerWidth;
  }
  else if (document.documentElement && document.documentElement.clientHeight)
    // Explorer 6 Strict Mode
  {
    x = document.documentElement.clientWidth;
  }
  else if (document.body) // other Explorers
  {
    x = document.body.clientWidth;
  }
  
  var bodyWidth;
  var test1 = document.body.scrollHeight;
  var test2 = document.body.offsetHeight
  if (test1 > test2) // all but Explorer Mac
  {
    bodyWidth = document.body.scrollWidth;
  }
  else // Explorer Mac;
       //would also work in Explorer 6 Strict, Mozilla and Safari
  {
    bodyWidth = document.body.offsetWidth;
  }
  
  if(bodyWidth > x)
    return bodyWidth;
  else
    return x;

}

function getPageHeight()
{
  var y;
  if (self.innerHeight) // all except Explorer
  {
    y = self.innerHeight;
  }
  else if (document.documentElement && document.documentElement.clientHeight)
    // Explorer 6 Strict Mode
  {
    y = document.documentElement.clientHeight;
  }
  else if (document.body) // other Explorers
  {
    y = document.body.clientHeight;
  }
  
  var bodyHeight;
  var test1 = document.body.scrollHeight;
  var test2 = document.body.offsetHeight
  if (test1 > test2) // all but Explorer Mac
  {
    bodyHeight = document.body.scrollWidth;
  }
  else // Explorer Mac;
       //would also work in Explorer 6 Strict, Mozilla and Safari
  {
    bodyHeight = document.body.offsetWidth;
  }
  
  if(bodyHeight > y)
    return bodyHeight;
  else
    return y;

}
function center(element){
    try{
        element = $(element);
    }catch(e){
        return;
    }

    var my_width  = 0;
    var my_height = 0;

    if ( typeof( window.innerWidth ) == 'number' ){
        my_width  = window.innerWidth;
        my_height = window.innerHeight;
    }else if ( document.documentElement && 
             ( document.documentElement.clientWidth ||
               document.documentElement.clientHeight ) ){
        my_width  = document.documentElement.clientWidth;
        my_height = document.documentElement.clientHeight;
    }
    else if ( document.body && 
            ( document.body.clientWidth || document.body.clientHeight ) ){
        my_width  = document.body.clientWidth;
        my_height = document.body.clientHeight;
    }

    element.style.position = 'absolute';
    element.style.zIndex   = 99;

    var scrollY = 0;

    if ( document.documentElement && document.documentElement.scrollTop ){
        scrollY = document.documentElement.scrollTop;
    }else if ( document.body && document.body.scrollTop ){
        scrollY = document.body.scrollTop;
    }else if ( window.pageYOffset ){
        scrollY = window.pageYOffset;
    }else if ( window.scrollY ){
        scrollY = window.scrollY;
    }

    var elementDimensions = Element.getDimensions(element);

    var setX = ( my_width  - elementDimensions.width  ) / 2;
    var setY = ( my_height - elementDimensions.height ) / 2 + scrollY;

    setX = ( setX < 0 ) ? 0 : setX;
    setY = ( setY < 0 ) ? 0 : setY;

    element.style.left = setX + "px";
    element.style.top  = setY + "px";

    element.style.display  = 'block';
}