function DisplayInfo()
{
    DarkenPage();
    ShowInfoPanel();
}
function DisplayInfo1()
{
    DarkenPage();
    ShowInfoPanel1();
}
function DisplayInfo2()
{
    DarkenPage();
    ShowInfoPanel2();
}
function DisplayInfo3()
{
    DarkenPage();
    ShowInfoPanel3();
}
function DisplayInfo4()
{
    DarkenPage();
    ShowInfoPanel4();
}


function ShowInfoPanel()
{
    var info_panel = document.getElementById('info_panel');
    
    // w is a width of the newsletter panel
    w = 600;
    // h is a height of the newsletter panel
    h = 600;
    
    // get the x and y coordinates to center the newsletter panel
    xc = Math.round((document.body.clientWidth/2)-(w/2))
    yc = Math.round((document.body.clientHeight/2)-(h/2))
    
    // show the newsletter panel
    info_panel.style.left = xc + "px";
    info_panel.style.top  = yc + "px";
    info_panel.style.display = 'block';
}

function Show()
{
    // hide the newsletter panel
    var info_panel = document.getElementById('info_panel');
    info_panel.style.display = 'none';
    // lighten the page again
    LightenPage();
}

function ShowInfoPanel1()
{
    var info_panel1 = document.getElementById('info_panel1');
    
    // w is a width of the newsletter panel
    w = 600;
    // h is a height of the newsletter panel
    h = 500;
    
    // get the x and y coordinates to center the newsletter panel
    xc = Math.round((document.body.clientWidth/2)-(w/2))
    yc = Math.round((document.body.clientHeight/2)-(h/2))
    
    // show the newsletter panel
    info_panel1.style.left = xc + "px";
    info_panel1.style.top  = yc + "px";
    info_panel1.style.display = 'block';
}

function Show1()
{
    // hide the newsletter panel
    var info_panel1 = document.getElementById('info_panel1');
    info_panel1.style.display = 'none';
    // lighten the page again
    LightenPage();
}

function ShowInfoPanel2()
{
    var info_panel2 = document.getElementById('info_panel2');
    
    // w is a width of the newsletter panel
    w = 600;
    // h is a height of the newsletter panel
    h = 500;
    
    // get the x and y coordinates to center the newsletter panel
    xc = Math.round((document.body.clientWidth/2)-(w/2))
    yc = Math.round((document.body.clientHeight/2)-(h/2))
    
    // show the newsletter panel
    info_panel2.style.left = xc + "px";
    info_panel2.style.top  = yc + "px";
    info_panel2.style.display = 'block';
}

function Show2()
{
    // hide the newsletter panel
    var info_panel2 = document.getElementById('info_panel2');
    info_panel2.style.display = 'none';
    // lighten the page again
    LightenPage();
}

function ShowInfoPanel3()
{
    var info_panel3 = document.getElementById('info_panel3');
    
    // w is a width of the newsletter panel
    w = 600;
    // h is a height of the newsletter panel
    h = 500;
    
    // get the x and y coordinates to center the newsletter panel
    xc = Math.round((document.body.clientWidth/2)-(w/2))
    yc = Math.round((document.body.clientHeight/2)-(h/2))
    
    // show the newsletter panel
    info_panel3.style.left = xc + "px";
    info_panel3.style.top  = yc + "px";
    info_panel3.style.display = 'block';
}

function Show3()
{
    // hide the newsletter panel
    var info_panel3 = document.getElementById('info_panel3');
    info_panel3.style.display = 'none';
    // lighten the page again
    LightenPage();
}

function ShowInfoPanel4()
{
    var info_panel4 = document.getElementById('info_panel4');
    
    // w is a width of the newsletter panel
    w = 600;
    // h is a height of the newsletter panel
    h = 500;
    
    // get the x and y coordinates to center the newsletter panel
    xc = Math.round((document.body.clientWidth/2)-(w/2))
    yc = Math.round((document.body.clientHeight/2)-(h/2))
    
    // show the newsletter panel
    info_panel4.style.left = xc + "px";
    info_panel4.style.top  = yc + "px";
    info_panel4.style.display = 'block';
}

function Show4()
{
    // hide the newsletter panel
    var info_panel4 = document.getElementById('info_panel4');
    info_panel4.style.display = 'none';
    // lighten the page again
    LightenPage();
}

// this function puts the dark screen over the entire page
function DarkenPage()
{
    var page_screen = document.getElementById('page_screen');
    page_screen.style.height = document.body.parentNode.scrollHeight + 'px';
    page_screen.style.display = 'block';
}

// this function removes the dark screen and the page is light again
function LightenPage()
{
    var page_screen = document.getElementById('page_screen');
    page_screen.style.display = 'none';
}