var panel = null;

var lastPanel = null;

var fadeSpeed = 30;

var initialBoxWidth = 300;

var boxTopMargin = 50;



function showInteractiveDiv() {

	showPanel('pnlInteractive');



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

}



function showPanel(panelID) {

    lastPanel = panel;

    panel = document.getElementById(panelID);

    displayPanel();

}



function displayPanel() {

    var width = initialBoxWidth;



    if (panel.style.width != '') {

        width = panel.style.width.replace('px', '');

    }

    

    x = Math.round((GetWidth() / 2) - (width / 2));

    y = boxTopMargin + 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';

}



function setOpacity(value) {

    var page_screen = document.getElementById('page_screen');

    page_screen.style.opacity = value / 10;

    page_screen.style.filter = 'alpha(opacity=' + value * 10 + ')';

}



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;

}



function hideCurrentPanel() {

    panel.style.display = 'none';

    panel = lastPanel;

}



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 = initialBoxWidth;

        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 = boxTopMargin + 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";

        }

        

        var page_screen = document.getElementById('page_screen');

        page_screen.style.height = '100%';

        page_screen.style.top = posTop() + 'px';

    }

}



window.onscroll = pageScrolled;