function showLoginDiv() {
    document.getElementById('txtUsername').value = "";
    document.getElementById('txtPassword').value = "";
    document.getElementById('txtUsername').style.background = "white";
    document.getElementById('txtPassword').style.background = "white";
    document.getElementById('errUsername').innerHTML = "";
    document.getElementById('errPassword').innerHTML = "";
    document.getElementById('errMessage').innerHTML = "";


    // Hide any old validator text.

    //document.getElementById('vldUsername').style.visibility = 'hidden';
    //document.getElementById('vldPassword').style.visibility = 'hidden';

    showPanel('pnlLogin');

    try { document.getElementById('txtUsername').focus(); } catch (ex) { }
}

/* 
*   Global variables
* 
*   These two variables are used to keep track of the displayed divs when they
*   are called using the showPnl methods. They do not need to be referenced
*   externally.
*
*/
var panel = null;
var lastPanel = null;


/*
*  Fade Speed
*
*  This variable dictates how fast the page will fade when a div is shown.
*  The value should be set between 10 (fast) and 100 (slow).
*
*/
var fadeSpeed = 30;


/* 
*   reInsertQuotes(text)
* 
*   This method is called to replace any "_" or "~" characters in the given text 
*   variable with "'" and '"' symbols, respectively. This was necessary to allow
*   comments in a patient record to include these quotation symbols.
*
*/
function reInsertQuotes(text) {
    while (text.indexOf('_') > -1) {
        text = text.replace('_', "'");
    }
    while (text.indexOf('~') > -1) {
        text = text.replace('~', '"');
    }
    return text;
}


/* 
*   GetWidth()
* 
*   This method is used to determine the width of the browser window, when determining
*   the size of the blackening div that is displayed when the showPnl methods are used.
*
*/
function GetWidth() {
    var x = 0;
    if (self.innerHeight) {
        x = self.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientHeight) {
        x = document.documentElement.clientWidth;
    }
    else if (document.body) {
        x = document.body.clientWidth;
    }

    return x;
}


/* 
*   GetHeight()
* 
*   This method is used to determine the height of the browser window, when determining
*   the size of the blackening div that is displayed when the showPnl methods are used.
*
*/
function GetHeight() {
    //return 1000;
}


/* 
*   setOpacity(value)
* 
*   This method is used to set the opacity of the blackening div. It is called numerous 
*   times by the displayPanel method to create a fading out effect. The value supplied
*   is an integer ranging from 0 (fully transparent) to 10 (fully black).
*
*/
function setOpacity(value) {
    var page_screen = document.getElementById('page_screen');
    page_screen.style.opacity = value / 10;
    page_screen.style.filter = 'alpha(opacity=' + value * 10 + ')';
}


/* 
*   displayPanel()
* 
*   This method is called by the showPnl methods to show the front div and setup the effect
*   for the blackening div. DO NOT CALL THIS METHOD EXTERNALLY. Instead, you should call showPnl.
*
*/
function displayPanel() {
    var width = 450;



    if (panel.style.width != '') {
        width = panel.style.width.replace('px', '');
    }
    //width = '378';
    width = 28 + parseInt(width);

    x = Math.round((GetWidth() / 2) - (width / 2));
    y = 150 + posTop();
    panel.style.left = x + "px";
    panel.style.top = y + "px";
    var page_screen = document.getElementById('page_screen');
    page_screen.style.height = '100%';
    page_screen.style.display = 'block';
    page_screen.style.top = posTop();

    for (var i = 1; i < 8; i++) {
        setTimeout('setOpacity(' + i + ')', fadeSpeed * i);
    }

    panel.style.display = 'block';
}


/* 
*   displayPanelNoFade()
* 
*   This method is called by the showPnl methods to show the front div, without the effect
*   for the blackening div. DO NOT CALL THIS METHOD EXTERNALLY. Instead, you should call showPnlNoFade.
*
*/
function displayPanelNoFade() {
    var width = 450;

    if (panel.style.width != '') {
        width = panel.style.width.replace('px', '');
    }

    x = Math.round((GetWidth() / 2) - (width / 2));
    y = 150 + posTop();
    panel.style.left = x + "px";
    panel.style.top = y + "px";
    panel.style.display = 'block';
}


/* 
*   showPanel(panelID)
* 
*   Call this method when you wish to have a div panel brought forward in the center of the 
*   screen, and a blackening div applied to the background with a gradual fading effect. The
*   panelID is the id of the div that will be displayed. 
*
*/
function showPanel(panelID) {
    lastPanel = panel;
    panel = document.getElementById(panelID);
    displayPanel();
}


/* 
*   showPanelNoFade(panelID)
* 
*   Call this method when you wish to have a div panel brought forward in the center of the 
*   screen, without the blackening div or the fading effect. The panelID is the id of the 
*   div that will be displayed. 
*
*/
function showPanelNoFade(panelID) {
    lastPanel = panel;
    panel = document.getElementById(panelID);
    displayPanelNoFade();
}


/* 
*   hideCurrentPanel()
* 
*   Call this method when you wish to hide the div panel currently showing and show another one
*   using the showPnl methods. If you simply wish to cancel out of the currently displayed div
*   and return to the page, then use the cancel method below.
*
*/
function hideCurrentPanel() {
    panel.style.display = 'none';
    panel = lastPanel;
}


/* 
*   cancel()
* 
*   Call this method when you wish to hide the div panel currently showing and return to the page.
*
*/
function cancel() {
    hideCurrentPanel();
    var page_screen = document.getElementById('page_screen');
    page_screen.style.display = 'none';
    setOpacity(0);
    panel = null;
    return false;
}

function pageWidth() { return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null; }
function pageHeight() { return window.innerHeight != null ? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null ? document.body.clientHeight : null; }
function posLeft() { return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0; }
function posTop() { return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0; }
function posRight() { return posLeft() + pageWidth(); }
function posBottom() { return posTop() + pageHeight(); }

function pageScrolled() {
    var page_screen = document.getElementById('page_screen');

    if (panel != null) {
        var width = 450;
        var height = parseInt(panel.style.height.replace('px', ''));

        if (panel.style.width != '') {
            width = panel.style.width.replace('px', '');
        }

        x = Math.round((GetWidth() / 2) - (width / 2));
        y = 150 + posTop();
        panel.style.left = x + "px";

        //only allow the panel to move if it's not going to make the button unclickable
        if (y + height < pageHeight()) {
            panel.style.top = y + "px";
        }

        page_screen.style.height = '100%';
        page_screen.style.top = posTop() + 'px';
    }
}

window.onscroll = pageScrolled;