var OverlayObjectArray = new Array();
var overlayDiv = null;
var overlayBorderDiv = null;

//display => true or false, true to display overlay, false to hide it
//objId => dialog Id that is being opened or closed.
function ShowGreyOverlay(display, objId){
    if(overlayDiv == null){
        overlayDiv = document.getElementById("overlayDiv");
        overlayBorderDiv = document.getElementById("overlayBorderDiv");
    }
    //get the dialog object
    var dialog = document.getElementById(objId);
    
    //if display, then check if Overlay is already displayed.
    if(display == true){
        try{
            //create new object
            //if this dialog is in GameDiv, 
            //it will need to hide when not in Play Tab.
            var isInGameDiv = false;
            if(dialog.parentNode.id == 'GameDiv'){
                isInGameDiv = true;
            }

            var newODiv = new OverlayDivObject(dialog.id, dialog.style.zIndex, isInGameDiv);
            //add the zIndex to the array and re-sort it.
            OverlayObjectArray.push(newODiv);
            OverlayObjectArray.sort(sortOverlayDivObject);

            //remove overlay Div from it's parent
            if(overlayDiv.parentNode != null){
                overlayDiv.parentNode.removeChild(overlayDiv);
            }
            DisplayOverlay();
            
        }catch(e){
            //alert('Error Displaying Overlay: '+e);
            ClearOverlay();
        }
    }else{
        //check to see if this new overlay is the one getting displayed
        //if it is, remove it, and add it to next highest z-index object
        //if it is not, just remove the z-index from the array.
        try{
            if(OverlayObjectArray.length > 0){
                if(overlayDiv.parentNode != null){
                    overlayDiv.parentNode.removeChild(overlayDiv);
                }
                RemoveFromOverlayObjectArray(dialog.id);
                
                //search for special cases
                //Case #1: if closing the registration page, make sure the overlay
                //for the login is also removed from the list
                if(dialog.id == "RegisterDialogOverlay" || dialog.id == "ForgotPwdDialogOverlay"){
                    var loginDialogIndex = RemoveFromOverlayObjectArray("LoginDialogOverlay");
                    if(loginDialogIndex == 0){
                        dialog = document.getElementById("LoginDialogOverlay");
                        
                        //remove overlay from parent node
                        if(overlayDiv.parentNode != null){
                            overlayDiv.parentNode.removeChild(overlayDiv);
                        }
                    }
                }
                //display next overlay if needed
                DisplayOverlay();
            }
        }catch(e){
            //remove all overlay
            ClearOverlay();
        }
    }
}

//clears all of the overlay, only gets called if there's an exception
function ClearOverlay(){
    overlayDiv.style.display = 'none';
    overlayBorderDiv.style.display = 'none';
    OverlayObjectArray.length = 0; //clears the array
}

//Displays the overlay, if none are found to display, clear them
function DisplayOverlay(){
    //set z-index, width and height and display
    try{
        var dialogIdToDisplay = GetDialogIdToDisplay();
        if(dialogIdToDisplay != -1){
            _dialog = document.getElementById(dialogIdToDisplay);
            
            overlayDiv.style.zIndex = _dialog.style.zIndex - 1;

            //Check what overlayBorderDiv's Height should be.
            _dialog.parentNode.insertBefore(overlayDiv, _dialog.parentNode.firstChild);

            //Get the Heiight of the overlay
            UpdateOverlayHeight();

            overlayDiv.style.display = 'block';
            overlayBorderDiv.style.display = 'block';
        }else{
            //we don't have a dialog to display, therefore hide the overlays
            overlayDiv.style.display = 'none';
            overlayBorderDiv.style.display = 'none';
        }
    }catch(e){
        //clear all the overlays
        ClearOverlay();
    }
}


//function that determines the height of the overlay
//it gets called when changing tabs/content or when a 
//new dialog is displayed
function UpdateOverlayHeight(){
    
    var parentHeight = 0;

    parentHeight = document.getElementById('mainContainer').offsetHeight;

    //if in play tab, substract the header height from the main container height, since the overlay is within gameDiv    
    if (CurrentTab == "TabPlayContent" && document.getElementById("ctl00_ctrl_userId").value != "-1" ){
        parentHeight = parentHeight - 120;
    }

    //get the height of the users's browser and set the border height if it's smaller than parent height
    var maxHeight = GetMaxHeight(); 
    if(parentHeight > maxHeight){
        maxHeight = parentHeight;
    }
    
    if(overlayDiv != null && overlayBorderDiv != null){
        if(IsInternetExplorer6() == true){
            overlayDiv.style.height = parentHeight + 'px';
            overlayBorderDiv.style.height = maxHeight + 'px';
        }else{
            //alert(parentHeight+'::'+maxHeight+'::'+headerHeight);
            overlayDiv.style.minHeight = parentHeight + 'px';
            overlayBorderDiv.style.minHeight = (maxHeight)+ 'px';
        }
    }
}

//Remove the overlay div object from the array, this is done when 
//the dialog disapears and the overlay for it is no longer needed.
function RemoveFromOverlayObjectArray(_dialogId){
    var index = -1;
    //get index
    for(var i=0, len = OverlayObjectArray.length; i< len; i++){
        if(_dialogId == OverlayObjectArray[i].dialogId){
            index = i;
            break;
        }
    }
    if(index != -1){
        //remove if it was found
        OverlayObjectArray.splice(i,1);
    }
    
    return index;
}

//Object that holds the dialog Id and it's z-index
//This is used to determine the zindex of the overlay
function OverlayDivObject(_dId, _zIndex, _inGameDiv){
    this.dialogId = _dId;
    this.zIndex = _zIndex;
    this.inGameDiv = _inGameDiv;
}

//function to sort the overlayDiv Object
//it is sorted by Z-Index from highest to smallest
function sortOverlayDivObject(a,b){
    return b.zIndex - a.zIndex;
}

//This is to change the size of the overlay when the user resizes the window
//while a dialog is displayed
function HandleResize(){
    if(overlayDiv != null && overlayBorderDiv != null){
        if(overlayDiv.style.display == 'block'){
            overlayBorderDiv.style.height = GetMaxHeight();
            UpdateOverlayHeight();
        }
    }
}

//Get the Id of the dialog that should get displayed.
//if not in TabPlayContent, don't check the dialog who's
//parents are in GameDiv
function GetDialogIdToDisplay(){
    var dialogIdToDisplay = '-1';
    if(CurrentTab != 'TabPlayContent'){
        for(var i=0, len = OverlayObjectArray.length; i<len; i++){
            if(OverlayObjectArray[i].inGameDiv == false){
                dialogIdToDisplay = OverlayObjectArray[i].dialogId;
                break;
            }
        }
    }else{
        if(OverlayObjectArray.length > 0){
            dialogIdToDisplay = OverlayObjectArray[0].dialogId;
        }
    }
    return dialogIdToDisplay;
}

//When tabs switch, make sure sure in game overlays are not displayed
//unless we're in the Play Tab
function UpdateOverlay(){
    //initialize global variables
    if(overlayDiv == null){
        overlayDiv = document.getElementById("overlayDiv");
        overlayBorderDiv = document.getElementById("overlayBorderDiv");
    }

    //Display the correct overlays
    DisplayOverlay();
}

//get the width of the browser, not the width of the page
function GetMaxWidth(){
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  
  if(myWidth < document.body.clientWidth){
    myWidth = document.body.clientWidth;
  }
  
  return myWidth;
}

//get the height of the browser, not the height of the page
function GetMaxHeight(){
  var myHeight = 0;
  if (window.innerHeight && window.scrollMaxY) {// Firefox         
      myHeight = window.innerHeight + window.scrollMaxY;         
  } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac         
      myHeight = document.body.scrollHeight;         
  } else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari         
      myHeight = document.body.offsetHeight;         
  }     
      
  if(myHeight < document.body.clientHeight){
    myHeight = document.body.clientHeight;
  }
  
  var pageY = (document.documentElement && document.documentElement.scrollHeight) ? document.documentElement.scrollHeight : (document.body.scrollHeight > document.body.offsetHeight) ? document.body.scrollHeight : document.body.offsetHeight;
  
  if(myHeight < pageY){
    myHeight = pageY;
  }  
  
  return myHeight;
}