/*
Dialog.js

Javascript function which creates a "modal" dialog centered on the screen.

Depends on the (excellent!) scriptaculous library for fade effects

The way this works is pretty simple, basically it just creates a div that covers
everything up that is the same coloy as the body bgcolor, with a z-index of 10001. It fades this halfway
in which gives the impression that everything else is actually being faded out.

Then whatever div is passed in is displayed on top of the big fader div.


Written by Clayton C. Gulick
All rights reserved

*/

function Dialog()
{
    throw "This is a static class and should not be instantiated. Use Dialog.show().";
}

//main method of the class, will fade out the background and display the passed in div
Dialog.show = function _show(divDialog)
{
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    
    
    
    //create a div that will cover the whole screen.
    //later, we'll fade this in and give the impression that everthing else
    //is fading out. 
    var frmFade = Dialog.createElement("iframe");
    frmFade.style.position="absolute";
    frmFade.style.top="0px";
    frmFade.style.left="0px";
    frmFade.style.width=w + "px"; //append px to be W3C compliant
    frmFade.style.height=h + "px";    
    frmFade.style.backgroundColor="#FFFFFF";//document.body.style.backgroundColor;
    frmFade.style.display="none";
    frmFade.style.zIndex=10001;
    
    
    Dialog.frmFade = frmFade;
    Dialog.divDialog = divDialog;
    
    //some DOM manipulation here - take the div out of wherever it is and make it a child of the body
    divDialog.parentNode.removeChild(divDialog);
    document.body.appendChild(frmFade);
    document.body.appendChild(divDialog);
    
    
    //now position the div to the center of the screen
    var cw = parseInt(divDialog.style.width); //Dialog.getEleWidth(divDialog);
    var ch = parseInt(divDialog.style.height); //Dialog.getEleHeight(divDialog);
    divDialog.style.position="absolute";
    divDialog.style.left=((w/2) - (cw/2)) + "px";
    divDialog.style.top=((h/2) - (ch/2)) + "px";
    divDialog.style.zIndex=10002;
        
    //fade everything in
    Effect.Appear(frmFade, {duration: 0.25, to:.7});
    Effect.Appear(divDialog, {duration: 0.25});
    
}

Dialog.hide = function _hide()
{
    Effect.Fade(Dialog.frmFade, {duration:0.25});
    Effect.Fade(Dialog.divDialog, {duration:0.25});
        
    document.body.removeChild(Dialog.frmFade);    
}

/* Utility function for creating elements in browser independent way */
Dialog.createElement = function _createElement(element)
{
  if (typeof document.createElementNS != 'undefined') 
  {
    return document.createElementNS('http://www.w3.org/1999/xhtml', element);
  }
  if (typeof document.createElement != 'undefined') 
  {
    return document.createElement(element);
  }
  return false;
}