function CloseSocialPanels() {
	var social_panel = document.getElementById('social_panel');
	var social_panel2 = document.getElementById('social_panel2');
	var social_panel3 = document.getElementById('social_panel3');
	var social_panel4 = document.getElementById('social_panel4');
	
	social_panel.style.display = 'none';
	social_panel2.style.display = 'none';
	social_panel3.style.display = 'none';
	social_panel4.style.display = 'none';
	
	LightenPage();
}

function SignUpForsocial()
{
    DarkenPage();
    ShowSocialPanel();
}


function ShowSocialPanel()
{
    var social_panel = document.getElementById('social_panel');

    // w is a width of the social panel
    w = 650;
    // h is a height of the social panel
    h = 115;

    // get the x and y coordinates to center the social panel
    xc = Math.round((document.body.clientWidth/2)-(w/2))
    yc = Math.round((document.body.clientHeight/2)-(h/2))

    // show the social panel
    social_panel.style.left = xc + "px";
    social_panel.style.top  = yc + "px";
    social_panel.style.display = 'block';
}

function SignUp()
{
    // hide the social panel
    var social_panel = document.getElementById('social_panel');
    social_panel.style.display = 'none';
    // lighten the page again
    LightenPage();
}

function SignUpForsocial2()
{
    DarkenPage();
	ShowSocialPanel2();
}

function ShowSocialPanel2()
{
    var social_panel2 = document.getElementById('social_panel2');

    // w is a width of the social panel
    w = 650;
    // h is a height of the social panel
    h = 115;

    // get the x and y coordinates to center the social panel
    xc = Math.round((document.body.clientWidth/2)-(w/2))
    yc = Math.round((document.body.clientHeight/2)-(h/2))

    // show the social panel
    social_panel2.style.left = xc + "px";
    social_panel2.style.top  = yc + "px";
    social_panel2.style.display = 'block';
}

function SignUp2()
{
    // hide the social panel
    var social_panel2 = document.getElementById('social_panel2');
    social_panel2.style.display = 'none';
    // lighten the page again
    LightenPage();
}

function SignUpForsocial3()
{
    DarkenPage();
	ShowSocialPanel3();
}

function ShowSocialPanel3()
{
    var social_panel3 = document.getElementById('social_panel3');

    // w is a width of the social panel
    w = 650;
    // h is a height of the social panel
    h = 115;

    // get the x and y coordinates to center the social panel
    xc = Math.round((document.body.clientWidth/2)-(w/2))
    yc = Math.round((document.body.clientHeight/2)-(h/2))

    // show the social panel
    social_panel3.style.left = xc + "px";
    social_panel3.style.top  = yc + "px";
    social_panel3.style.display = 'block';
}

function SignUp3()
{
    // hide the social panel
    var social_panel3 = document.getElementById('social_panel3');
    social_panel3.style.display = 'none';
    // lighten the page again
    LightenPage();
}


function SignUpForsocial4()
{
    DarkenPage();
	ShowSocialPanel4();
}

function ShowSocialPanel4()
{
    var social_panel4 = document.getElementById('social_panel4');

    // w is a width of the social panel
    w = 650;
    // h is a height of the social panel
    h = 115;

    // get the x and y coordinates to center the social panel
    xc = Math.round((document.body.clientWidth/2)-(w/2))
    yc = Math.round((document.body.clientHeight/2)-(h/2))

    // show the social panel
    social_panel4.style.left = xc + "px";
    social_panel4.style.top  = yc + "px";
    social_panel4.style.display = 'block';
}

function SignUp4()
{
    // hide the social panel
    var social_panel4 = document.getElementById('social_panel4');
    social_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';
}

