// JavaScript Document

var DarkScreenVisible = "false";

window.onresize = doResize;

function GreyOutScreen(imagetoshow, options) {
    // options are optional.  This is a JSON object with the following (optional) properties
    // opacity:0-100         // Lower number = less greyout, higher = more of a blackout
    // zindex: #             // HTML elements with a higher zindex appear on top of the grey out
    // bgcolor: (#xxxxxx)    // Standard RGB Hex color code
    // GreyOutScreen(IMAGE-NAME-HERE, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});
    // Because options is JSON opacity/zindex/bgcolor are all optional and can appear
    // in any order.  Pass only the properties you need to set.
    
    var options = options || {};
    var zindex = options.zindex || 101;
    var opacity = options.opacity || 70;
    var opaque = (opacity / 100);
    var bgcolor = options.bgcolor || "#000000";

    var dark=document.getElementById("darkenScreenObject");

    // Calculate the page width and height
    var pageDimensions = GetPageDimensions( );
    
    //set the shader to cover the entire page and make it visible.
    dark.style.opacity = opaque;
    dark.style.MozOpacity = opaque;
    dark.style.filter = "alpha(opacity="+opacity+")";
    dark.style.zIndex = zindex;
    dark.style.backgroundColor = bgcolor;
    dark.style.width = pageDimensions.pageWidth;
    dark.style.height = pageDimensions.pageHeight;
    dark.style.display = "block";

    DarkScreenVisible = "true";
    
    if( imagetoshow != "") {    
        document.getElementById("screenimage").style.background="url('" + imagetoshow + "') no-repeat";
        document.getElementById("screenimage").style.backgroundPosition = "50% 50%";
	}

	document.getElementById("box").style.display = "block";

}

function GetPageDimensions( ) {

    if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {

        if (document.body.scrollWidth > document.documentElement.scrollWidth) {
            var pageWidth = document.body.scrollWidth+"px";
        } else {
            var pageWidth = document.documentElement.scrollWidth+"px";
        }
        
        if (document.body.scrollHeight > document.documentElement.scrollHeight) {
            var pageHeight = document.body.scrollHeight+"px";
        } else {
            var pageHeight = document.documentElement.scrollHeight+"px";
        }
        
    } else if( document.body.offsetWidth ) {

        var pageWidth = document.body.offsetWidth+"px";
        var pageHeight = document.body.offsetHeight+"px";

    } else {

        var pageWidth="100%";
        var pageHeight="100%";
        
    }
    
    return {pageWidth : pageWidth, pageHeight : pageHeight};
}


function CloseBox( ) {

    document.getElementById("darkenScreenObject").style.display = "none";
    DarkScreenVisible = "false";     

    document.getElementById("box").style.display = "none";
    document.body.style.overflow = "auto";
}

function doResize( ) {
 
    var dark=document.getElementById("darkenScreenObject");
    
    if (dark) {

        if (DarkScreenVisible == "true") {
        
            // Calculate the page width and height
            var pageDimensions = GetPageDimensions( );

            // Adjust width and height
            dark.style.width = pageDimensions.pageWidth;
            dark.style.height = pageDimensions.pageHeight;

        }
    }
}