/* ========================================================================= */

var LOGO_WIDTH = 750;
var LOGO_HEIGHT = 550;

var INFO_WIDTH = 600;
var INFO_HEIGHT = 200;

var MOZ_SCROLLBAR_WIDTH = 19; // actually smaller (usually ~ 16/17px)

/* ========================================================================= */

window.onload = function() {
    //
    // JavaScript not available? Then show <noscript>...</noscript>.
    // JavaScript available? Then show the following:
    //
    show_mini_nav1();
    show_logo();
}

window.onresize = function() {
    resize_transparent_bg();
    reposition_info();
    reposition_logo();
}

/* ========================================================================= */

function show_mini_nav1() {
    document.getElementById('mini-nav1').style.display = 'block';
}


function hide_mini_nav1() {
    document.getElementById('mini-nav1').style.display = 'none';
}

/* ========================================================================= */

function show_logo() {
    document.getElementById('logo').style.left = 
        ((viewport_width() / 2) - (LOGO_WIDTH / 2)) + 'px';
    document.getElementById('logo').style.top = 
        ((viewport_height() / 2) - (LOGO_HEIGHT / 2)) + 'px';

    document.getElementById('logo').style.width = LOGO_WIDTH + 'px';

    document.getElementById('logo').style.display = 'block';
}


function hide_logo() {
    document.getElementById('logo').style.display = 'none';
}


function reposition_logo() {
    document.getElementById('logo').style.left = 
        ((viewport_width() / 2) - (LOGO_WIDTH / 2)) + 'px';
    document.getElementById('logo').style.top = 
        ((viewport_height() / 2) - (LOGO_HEIGHT / 2)) + 'px';
}

/* ========================================================================= */

function show_transparent_bg() {
    document.getElementById('transparent-bg').style.width = 
        page_width() + 'px';
    document.getElementById('transparent-bg').style.height = 
        page_height() + 'px';

    document.getElementById('mini-nav1').style.display = 'none';
    document.getElementById('transparent-bg').style.display = 'block';
    document.getElementById('mini-nav2').style.display = 'block';
}


function hide_transparent_bg() {
    document.getElementById('mini-nav2').style.display = 'none';
    document.getElementById('transparent-bg').style.display = 'none';
    document.getElementById('mini-nav1').style.display = 'block';
}


function resize_transparent_bg() {
    document.getElementById('transparent-bg').style.width = 
        page_width() + 'px';
    document.getElementById('transparent-bg').style.height = 
        page_height() + 'px';
}

/* ========================================================================= */

function show_info() {
    document.getElementById('info').style.left = 
        ((viewport_width() / 2) - (INFO_WIDTH / 2)) + 'px';
    /* the following '- 7': for cosmetics only ('info' in middle of 'logo') */
    document.getElementById('info').style.top = 
        ((viewport_height() / 2) - (INFO_HEIGHT / 2) - 7) + 'px';

    document.getElementById('info').style.width = INFO_WIDTH + 'px';

    document.getElementById('info').style.display = 'block';
}


function hide_info() {
    document.getElementById('info').style.display = 'none';
}


function reposition_info() {
    document.getElementById('info').style.left = 
        ((viewport_width() / 2) - (INFO_WIDTH / 2)) + 'px';
    /* the following '- 7': for cosmetics only ('info' in middle of 'logo') */
    document.getElementById('info').style.top = 
        ((viewport_height() / 2) - (INFO_HEIGHT / 2) - 7) + 'px';
}

/* ========================================================================= */

function page_width() {
    return document.documentElement.scrollWidth;
}


function page_height() {
    return document.documentElement.scrollHeight;
}


function viewport_width() {
    if (typeof window.innerWidth != 'undefined') {
        return window.innerWidth - MOZ_SCROLLBAR_WIDTH;  // workaround
    }
    else {
        return document.documentElement.clientWidth;
    }
}


function viewport_height() {
    if (typeof window.innerHeight != 'undefined') {
        return window.innerHeight;
    }
    else {
        return document.documentElement.clientHeight;
    }
}

/* ========================================================================= */