function ModalManager(maskId, popupId, shadowId, popupWidth)
//==========================================================
{
  this.maskId    = maskId;
  this.popupId   = popupId;
  this.shadowId  = shadowId;
  this.popupWidth= popupWidth;
}

ModalManager.prototype = 
//========================
{
  showModal : function()
  //====================
  {
    //--- Compute sizes
    var bodyWidth  = Math.max(document.body.offsetWidth , document.documentElement.offsetWidth);
    var bodyHeight = Math.max(document.body.offsetHeight , document.documentElement.offsetHeight);
    var topOffset  = Math.max(document.body.scrollTop , document.documentElement.scrollTop);
        //to set left corner of popup at half the window width
    var middleHorizontal = Math.ceil( bodyWidth/2 );
        //to set top of popup at half the window height + topOffset (if scrolling)
    var middleVertical = Math.ceil( getWindowheight()/2 )+topOffset;

    //--- Show mask after setting its height 
    var mask = document.getElementById(this.maskId);
    mask.style.height=bodyHeight+'px';
    mask.style.display='block';         //show it
    
    //--- Show myPopup after setting its witdh 
    var myPopup  = document.getElementById(this.popupId);
    myPopup.style.width = this.popupWidth + 'px';
        //we set the top-left corner in the middle.
        //top:50% and left:50% in the css cannot work because of scrolling 
    myPopup.style.top  = middleVertical+'px';
    myPopup.style.left = middleHorizontal+'px';
    myPopup.style.display='block';      //show it
        //we set the margin : we need to display first to get the value of myPopup.offsetHeight
    var theMarginTop  = Math.ceil(myPopup.offsetHeight/2);
    var theMarginLeft = Math.ceil(this.popupWidth/2);
    myPopup.style.marginTop  = '-' + theMarginTop +'px';
    myPopup.style.marginLeft = '-' + theMarginLeft +'px';
    
    
    //--- Show shadow after setting its witdh and height relatively to myPopup
    if( this.shadowId != '' )
    {
      var myShadow = document.getElementById(this.shadowId);
      myShadow.style.width  = this.popupWidth + 'px';
      myShadow.style.height = myPopup.offsetHeight+'px';
   
      myShadow.style.top  = middleVertical+'px';
      myShadow.style.left = middleHorizontal+'px';
    
      myShadow.style.marginTop  = '-' + (theMarginTop -5) +'px';
      myShadow.style.marginLeft = '-' + (theMarginLeft-15)+'px';
      myShadow.style.display='block';      //show it
    }
  },
  
  hideModal : function()
  //====================
  {
    if( this.shadowId != '' )
      hide(this.shadowId);
    hide(this.popupId);
    hide(this.maskId);
  }
}