function ScreenOverlay(opacity, width, height, bodyId, maskId)
{
    this.body;
    this.masks = new Array();
	this.width;
	this.height;
	this.bodyLeft;
	this.bodyTop;

    this.createBody = function(elementId, width, height)
    {
        //this.body = top.frames[0].document.createElement("div");
		this.body = document.createElement("div");
        this.body.id = elementId;
        this.body.style.display = "none";
        this.body.style.position = "absolute";
        this.body.style.width = width + "px";
        this.body.style.height = height + "px";
        this.body.style.zIndex = 1000;
		
		this.width = width;
		this.height = height;

        //top.frames[0].document.body.appendChild(this.body);
		document.getElementById("Site").appendChild(this.body);
    }
	
	this.setBodyPosition = function(left, top)
	{
		this.bodyLeft = left;
		this.bodyTop = top;
	}
	
	this.positionBody = function()
	{
		//var documentSize = this.getDocumentSize(top.frames[0].document);
		var documentSize = this.getDocumentSize();
		var scrollPosition = this.getDocumentScrollPosition();

		var bodyLeft = (this.bodyLeft)? this.bodyLeft : ((documentSize.windowWidth - this.width) / 2) + scrollPosition.x;
		var bodyTop = (this.bodyTop)? this.bodyTop : ((documentSize.windowHeight - this.height) / 2) + scrollPosition.y;

		this.body.style.top = bodyTop + "px";
        this.body.style.left = bodyLeft + "px";
	}
    
    this.createMaskElement = function(frameDocument, elementId, opacity)
    {
        var maskStyle = {
            display : "none",
            position : "absolute",
            left : "0px",
            top : "0px",
            width : "100%",
            height : this.getDocumentSize(frameDocument).height + "px",
            backgroundColor : ["background-color", "#000"],
            zIndex : ["z-index", 999]
        }

        if (cms.browser.isIE())
        {
            var styleString = "";
            for (var style in maskStyle)
            {
                styleString += (typeof maskStyle[style] == "object")?
                    maskStyle[style][0] + ": " + maskStyle[style][1] : style + ": " + maskStyle[style];
                styleString += "; ";
            }
            return "<div id=\"" + elementId + "\" style=\"filter: alpha(opacity=" + opacity + "); " + styleString + "\"></div>";
        }
        
        var element = frameDocument.createElement("div");
        element.id = elementId;
        element.style.opacity = opacity / 100;
        for (var style in maskStyle)
        {
            element.style[style] = (typeof maskStyle[style] == "object")? maskStyle[style][1] : maskStyle[style];
        }
        return element;
    }
    
    this.createMask = function(elementId, opacity)
    {
        if (opacity == undefined)
        {
            opacity = 50;
        }
		
        if (cms.browser.isIE())
        {
            //document.getElementById("Site").innerHTML += this.createMaskElement(document, elementId, opacity);
            this.masks.push(document.getElementById(elementId));
        }
        else
        {
            var frameMask = this.createMaskElement(document, elementId, opacity);
            this.masks.push(frameMask);
            //document.getElementById("Site").appendChild(frameMask);
        }
		/*
        for (var iFrames = 0 ; iFrames < top.frames.length ; iFrames++)
        {
            var frameDocument = top.frames[iFrames].document;

            if (browser.isIE())
            {
                frameDocument.body.innerHTML += this.createMaskElement(frameDocument, elementId, opacity);
                this.masks.push(frameDocument.getElementById(elementId));
            }
            else
            {
                var frameMask = this.createMaskElement(frameDocument, elementId, opacity);
                this.masks.push(frameMask);
                frameDocument.body.appendChild(frameMask);
            }
        }
        */
    }
	
	this.getDocumentScrollPosition = function()
	{
		var xScroll = 0, yScroll = 0;
	    if(typeof(window.pageYOffset) == "number")
		{
	        xScroll = window.pageXOffset;
	        yScroll = window.pageYOffset;
	    }
		else if(document.body && (document.body.scrollLeft || document.body.scrollTop))
		{
	        xScroll = document.body.scrollLeft;
	        yScroll = document.body.scrollTop;
	    }
		else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
		{
	        xScroll = document.documentElement.scrollLeft;
	        yScroll = document.documentElement.scrollTop;
	    }
        return {x : xScroll, y : yScroll};
	}
    
    this.getDocumentScroll = function()
    {
        var xScroll = 0, yScroll = 0;
        if (window.innerHeight && window.scrollMaxY)
        {  
            xScroll = document.body.scrollWidth;
            yScroll = window.innerHeight + window.scrollMaxY;
        }
        else if (document.body.scrollHeight > document.body.offsetHeight)
        {
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        }
        else
        {
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
        return {x : xScroll, y : yScroll};
    }
    
    this.getDocumentSize = function()
    {
        var windowWidth, windowHeight;
        if (self.innerHeight)
        {
            windowWidth = self.innerWidth;
            windowHeight = self.innerHeight;
        }
        else if (document.documentElement && document.documentElement.clientHeight)
        {
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        }
        else if (document.body)
        {
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }   
    
        var scroll =  this.getDocumentScroll(document);
        pageWidth = (scroll.x < windowWidth)? windowWidth : scroll.x;
        pageHeight = (scroll.y < windowHeight)? windowHeight : scroll.y;
    
        return {width : pageWidth, height : pageHeight, windowWidth : windowWidth, windowHeight : windowHeight};
    }

    this.toggle = function(state)
    {
        if (state == undefined)
        {
            state = !this.showState;
        }
		this.positionBody();
        this.body.style.display = (state)? "block" : "none";
        for (iMasks = 0 ; iMasks < this.masks.length ; iMasks++)
        {
            //this.masks[iMasks].style.display = (state)? "block" : "none";
        }
        this.showState = state;
    }
    
    this.show = function()
    {
        this.toggle(true);
    }
    
    this.hide = function()
    {
        this.toggle(false);
    }

    this.createMask(maskId, opacity);
    this.createBody(bodyId, width, height);
}