function grayOut(vis, options) {
    // Pass true to gray out screen, false to ungray
    var options = options || {};
    var zindex = options.zindex || 70;
    var opacity = options.opacity || 70;
    var opaque = (opacity / 100);
    var bgcolor = options.bgcolor || '#000000';
    var dark = document.getElementById('darkenScreenObject');
    if (!dark) {
        // The dark layer doesn't exist, it's never been created.  So we'll
        // create it here and apply some basic styles.
        // If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
        var tbody = document.getElementsByTagName("body")[0];
        var tnode = document.createElement('div');           // Create the layer.
        tnode.style.position = 'absolute';                 // Position absolutely
        tnode.style.top = '0px';                           // In the top
        tnode.style.left = '0px';                          // Left corner of the page
        tnode.style.overflow = 'hidden';                   // Try to avoid making scroll bars            
        tnode.style.display = 'none';                      // Start out Hidden
        tnode.id = 'darkenScreenObject';                   // Name it so we can find it later
        tbody.appendChild(tnode);                            // Add it to the web page
        dark = document.getElementById('darkenScreenObject');  // Get the object.
    }
    if (vis) {
        // Calculate the page width and height 
        if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
            var pageWidth = document.body.scrollWidth+'px';
            var pageHeight = document.body.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%';
        }   
        //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+')'; 

        shadeStepper(dark, 5, 10, 75, 10);

        dark.style.zIndex = zindex;
        dark.style.backgroundColor = bgcolor;
        dark.style.width = pageWidth;
        dark.style.height = pageHeight;
        dark.style.display = 'block';
    } else {
        // Clear shade in steps
        shadeStepper(dark, 70, -10, 0, 10);

        // remove layer
        setTimeout(function() { dark.style.display = 'none'; }, 400);
    }
}

function shadeStepper(item, shade, step, maxShade, delay) {
    if (shade == maxShade) {
        return;
    }

    var opaque = (shade / 100);
    item.style.opacity = opaque;
    item.style.MozOpacity = opaque;
    item.style.filter = 'alpha(opacity=' + shade + ')';

    setTimeout(function() {
        shadeStepper(item, shade + step, step, maxShade, delay)
    }, delay);
}

function toggleLoginBox(elemId, elemHeight) {
    if (elemId == "") {
        return;
    } else {
        var control = document.getElementById(elemId);
        if (control.style.display == "none") {
            grayOut(true);
            setTimeout(function() {
                var windowHeight = getWindowHeight();
                var controlDivHeight = elemHeight;  // Get height of Image from parameter (TODO: make this automatic?)
                var ScrollY = getScrollYPos();
                if (windowHeight - controlDivHeight > 0) {
                    control.style.top = (((windowHeight / 2) - (controlDivHeight / 2)) + ScrollY) + 'px';
                }
                control.style.display = "block";
            }, 400);
        } else {
            control.style.display = "none";
            setTimeout("grayOut(false);", 200);
        }
    }
}

function getWindowHeight() {
    var windowHeight = 0;
    if (typeof (window.innerHeight) == 'number') {
        windowHeight = window.innerHeight;
    }
    else {
        if (document.documentElement && document.documentElement.clientHeight) {
            windowHeight = document.documentElement.clientHeight;
        }
        else {
            if (document.body && document.body.clientHeight) {
                windowHeight = document.body.clientHeight;
            }
        }
    }
    return windowHeight;
}

function getWindowWidth() {
    var windowWidth = 0;
    if (typeof (window.innerWidth) == 'number') {
        windowHeight = window.innerWidht;
    }
    else {
        if (document.documentElement && document.documentElement.clientWidth) {
            windowHeight = document.documentElement.clientWidth;
        }
        else {
            if (document.body && document.body.clientWidth) {
                windowWidth = document.body.clientWidth;
            }
        }
    }
    return windowWidth;
}

function getScrollYPos() {
    var ScrollY = document.body.scrollTop;

    if (ScrollY == 0) {
        if (window.pageYOffset)
            ScrollY = window.pageYOffset;
        else
            ScrollY = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
    }

    return ScrollY;
}