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

ModalManager.prototype = 
//========================
{

  centerModal : function()
  {
	var myWidth = 0, myHeight = 0;
	if( typeof ( window.innerWidth ) == 'number' ) {
		//Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} else if ( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} else if ( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
	var myPopup  = document.getElementById(this.popupId);
	myPopup.style.maxHeight = (myHeight - 60) + 'px';
	myPopup.style.top = Math.ceil((myHeight - myPopup.offsetHeight) / 2) + 'px';
	myPopup.style.left = Math.ceil((myWidth - myPopup.offsetWidth) / 2) + 'px';
	
  },

  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';
	//myPopup.style.top = myPopup.offsetHeight
        //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
	this.centerModal();
		
        //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);
  }
}