// Javascript object for the creation of a modal background to go with a popup container which is initialised via the server (i.e. on full/partial postback).
// The object accepts the following parameters:
//
// popUpId - the ClientID of the popup container to pair the background with (needed to 'watch it')
// elementToFillId - the ClientID of the container to cover with the modalBackground (use pageWrapper (deprecated) or null to fill the whole page)
// displayingCssClassName - the css class which the popup container is switched to when it appears (when this is done, the modal background appears)
// backgroundCssClassName (optional) - specify things like background-color, opacity etc. If omitted, defaults to a translucent grey
 

function modalBackground( popUpId, openId, closeId, cancelId ,elementToFillId, displayingCssClassName, backgroundCssClassName, backgroundId )
{

    //Get the popup container.
    var popUpContainer = document.getElementById(popUpId);

    popUpContainer.style.zIndex = 150;

    //Get the container to fill with modal background, null is fullpage
    if (elementToFillId) {
        var divToFill = $('#' + elementToFillId);
    }

    //Create a div which will be the background. Style it to fill the document.
    var backgroundContainer = document.getElementById(backgroundId);
    
    //things like opacity and background-color are set in backgroundCssClassName by user (if omitted, use defaults)
    if ( backgroundCssClassName != null & backgroundCssClassName != "" )
    {
        backgroundContainer.className = backgroundCssClassName;
    }
    else
    {
        backgroundContainer.style.backgroundColor = "#000000";
        backgroundContainer.style.opacity = "0.75";
        backgroundContainer.style.filter = "alpha(opacity=75)";
    }
    
    backgroundContainer.style.display = "none";
    backgroundContainer.style.position = "fixed";

    // If they passed an element to fill, mimic its properties, otherwise use the window size
    if (elementToFillId) {
        //
        //

        //Find how far from top/left divToFill is
        var controlToSetTo = divToFill;
        var currentTop = 0;
        var currentLeft = 0;
        if (controlToSetTo.offsetParent) //traverse DOM to get actual position on the page
        {
            do {
                    currentTop += controlToSetTo.offsetTop;
                    currentLeft += controlToSetTo.offsetLeft;
               } while (controlToSetTo = controlToSetTo.offsetParent);
        }
        //figure out how far background is from the top/left and adjust
        backgroundContainer.style.left = '0px';
        backgroundContainer.style.top = '0px';
        
        controlToSetTo = backgroundContainer;
        var backgroundCurrentTop = 0;
        var backgroundCurrentLeft = 0;
        if (controlToSetTo.offsetParent) //traverse DOM to get actual position on the page
        {
            do {
                    backgroundCurrentTop += controlToSetTo.offsetTop;
                    backgroundCurrentLeft += controlToSetTo.offsetLeft;
               } while (controlToSetTo = controlToSetTo.offsetParent);
        }
        
        //backgroundContainer.style.left = currentLeft - backgroundCurrentLeft + 'px';
        //backgroundContainer.style.top = currentTop - backgroundCurrentTop + 'px';
    }
    else {
        backgroundContainer.style.height = $(document).height() +'px';
        backgroundContainer.style.width = $(window).width() +'px';
        backgroundContainer.style.left = '0px';
        backgroundContainer.style.top = '0px';
    }
    
    if (popUpContainer.style.zIndex)
    {
        backgroundContainer.style.zIndex = parseInt(popUpContainer.style.zIndex) - 1;
    }
    else
    {
        backgroundContainer.style.zIndex = "10";
    }
    
    function resizeBehaviour()
    {
        var backgroundContainer = document.getElementById(backgroundId);
        var divToFill = document.getElementById(elementToFillId);

        if (divToFill) {
            
            
            
            
        }
        else {
            backgroundContainer.style.height = $(document).height() +'px';
            backgroundContainer.style.width = $(window).width() +'px';
            backgroundContainer.style.left = '0px';
            backgroundContainer.style.top = '0px';
        }
    }
 
 
    try
    {
 
    Sys.UI.DomEvent.addHandler( window,"resize", resizeBehaviour );
 
    //every time the page is loaded (including async callbacks), check to see if popup container is visible
    Sys.Application.add_load(
                              function () {
                                  var popUpCont = $get(popUpId);
                                  var backgroundContainer = document.getElementById(backgroundId);


                                  if (popUpCont.className == displayingCssClassName || popUpCont.style.display == "block") {
                                      backgroundContainer.style.backgroundColor = "#000000";
                                      backgroundContainer.style.position = "fixed";
                                      if (divToFill) {
                                          
                                          
                                          
                                          
                                      }
                                      else {
                                          backgroundContainer.style.height = $(document).height() +'px';
                                          backgroundContainer.style.width = $(window).width() +'px';
                                          backgroundContainer.style.left = '0px';
                                          backgroundContainer.style.top = '0px';
                                      }
                                      backgroundContainer.style.display = "block";
                                      if (popUpContainer.style.zIndex) {
                                          backgroundContainer.style.zIndex = parseInt(popUpContainer.style.zIndex) - 1;
                                      }
                                      else {
                                          backgroundContainer.style.zIndex = "10";
                                      }

                                      backgroundContainer.style.opacity = "0.75";
                                      backgroundContainer.style.filter = "alpha(opacity=75)";
                                  }
                                  else {
                                      backgroundContainer.style.display = "none";
                                  }
                              }
                            );
                            
   }
   catch(e){}
   
   //If they have been specified, add onclick event handlers to the open/close buttons to show/hide the popup
   if ( openId != null & openId != "" )
   {
        var openButton = document.getElementById(openId);
        if ( openButton != null )
        {
            Sys.UI.DomEvent.addHandler(openButton, 'click', function()            
                                    { 
                                        document.getElementById(popUpId).style.display = "block";
                                        backgroundContainer.style.display = "block";
                                        if (popUpContainer.style.zIndex)
                                        {
                                            backgroundContainer.style.zIndex = parseInt(popUpContainer.style.zIndex) - 1;
                                        }
                                        else
                                        {
                                            backgroundContainer.style.zIndex = "10";
                                        }
                                    }
                                    );
        }
   }
   
   if ( closeId != null & closeId != "" )
   {
        var closeButton = document.getElementById(closeId);
        //var backgroundContainer = document.getElementById(backgroundId);
        if ( closeButton != null ) {

            $(closeButton).click(function () {
                                                document.getElementById(popUpId).style.display = "none";
                                                backgroundContainer.style.display = "none";
                                             }
                                      );
        }
   }
   
   if ( cancelId != null & cancelId != "" )
   {
       var cancelButton = document.getElementById(cancelId);
       
        if ( cancelButton != null )
        {
//            Sys.UI.DomEvent.addHandler(cancelButton, 'click', function () {
//                document.getElementById(popUpId).style.display = "none";
//                backgroundContainer.style.display = "none";
$(cancelButton).click(function () {
                document.getElementById(popUpId).style.display = "none";
                backgroundContainer.style.display = "none";
                });
            
        }
   }
   
}