// called once after the main menu buttons rearrange, starts the showing of the sub menu
function startSubMenuDisplay()
{
    // divs shouldn't be shown yet
    subMenuDiv.style.width = "0px";
    subMenuDiv.style.height = "0px";
    mainBodyDiv.style.width = "0px";
    mainBodyDiv.style.height = "0px";
    mainBodyDiv.innerHTML = "";

    // load in sub menu buttons
    subMenuDiv.innerHTML = "";
    switch(buttonOrder[0])
    {
        case "about":
            subMenuDiv.innerHTML = "<img id=\"aboutUs\" src=\"./res/about/us.png\" onclick=\"hitSubMenuButton('aboutUs');\" class=\"subMenuButton\">\n\
                                    <img id=\"aboutServices\" src=\"./res/about/services.png\" onclick=\"hitSubMenuButton('aboutServices');\" class=\"subMenuButton\">\n\
                                    <img id=\"aboutPolicy\" src=\"./res/about/policy.png\" onclick=\"hitSubMenuButton('aboutPolicy');\" class=\"subMenuButton\">";
            break;
        case "game":
            subMenuDiv.innerHTML = "<img id=\"gameAbout\" src=\"./res/games/about.png\" onclick=\"hitSubMenuButton('gameAbout');\" class=\"subMenuButton\">\n\
                                    <img id=\"gameBuy\" src=\"./res/games/buy.png\" onclick=\"hitSubMenuButton('gameBuy');\" class=\"subMenuButton\">\n\
                                    <img id=\"gameScreenShots\" src=\"./res/games/screenshots.png\" onclick=\"hitSubMenuButton('gameScreenShots');\" class=\"subMenuButton\">\n\
                                    <img id=\"gameVideo\" src=\"./res/games/video.png\" onclick=\"hitSubMenuButton('gameVideo');\" class=\"subMenuButton\">\n\
                                    <img id=\"gameDemo\" src=\"./res/games/demo.png\" onclick=\"hitSubMenuButton('gameDemo');\" class=\"subMenuButton\">";
            break;
        case "contribute":
            subMenuDiv.innerHTML = "<img id=\"contributeSubscribe\" src=\"./res/contribute/subscribe.png\" onclick=\"hitSubMenuButton('contributeSubscribe');\" class=\"subMenuButton\">\n\
                                    <img id=\"contributeSuggest\" src=\"./res/contribute/suggestions.png\" onclick=\"hitSubMenuButton('contributeSuggest');\" class=\"subMenuButton\">";
            break;
        case "contact":
            subMenuDiv.innerHTML = "<img id=\"contactEmail\" src=\"./res/contact/email.png\" onclick=\"hitSubMenuButton('contactEmail');\" class=\"subMenuButton\">\n\
                                    <img id=\"contactMail\" src=\"./res/contact/mail.png\" onclick=\"hitSubMenuButton('contactMail');\" class=\"subMenuButton\">";
            break;
    }

    continueSubMenuDisplayDown();
}

// called periodically untill the sub menu has been displayed
function continueSubMenuDisplayDown()
{
    var menuDropVal = 40, subMenuOffset = 5, subMenuWidth=5;

    // get the possitions of all the buttons and the main logo
    var mainLogoPos = findPos(mainLogo);

    // find the pos and dimentions of the left most button
    var refPoint = null;
    switch(buttonOrder[0])
    {
        case "about":
            refPoint = findPos(aboutButton);
            break;
        case "game":
            refPoint = findPos(gameButton);
            break;
        case "contribute":
            refPoint = findPos(contributeButton);
            break;
        case"contact":
            refPoint = findPos(contactButton);
            break;
    }

    // check for the size of the sub menu
    var subMenuPos = findPos(subMenuDiv);

    // move the sub menu and expand it downwards
    subMenuDiv.style.top = (refPoint.bot+subMenuOffset)+"px";
    subMenuDiv.style.left = refPoint.left+"px";
    subMenuDiv.style.width = subMenuWidth+"px";
    subMenuDiv.style.height = (subMenuPos.height + menuDropVal)+"px";

    var siteHeight = 600 - (subMenuPos.bot + menuDropVal + mainLogoPos.top);

    if (siteHeight <= 0)
    {
        subMenuDiv.style.height = (subMenuPos.height + menuDropVal + siteHeight)+"px";
        screenMoving = setTimeout("continueSubMenuDisplayRight();", 40);
    }
    else
        screenMoving = setTimeout("continueSubMenuDisplayDown();", 40);
}

// move the
function continueSubMenuDisplayRight()
{
    var menuMoveVal = 40, subMenuOffset = 5, subMenuDesiredWidth=120;

    // find the pos and dimentions of the left most button
    var refPoint = null;
    switch(buttonOrder[0])
    {
        case "about":
            refPoint = findPos(aboutButton);
            break;
        case "game":
            refPoint = findPos(gameButton);
            break;
        case "contribute":
            refPoint = findPos(contributeButton);
            break;
        case"contact":
            refPoint = findPos(contactButton);
            break;
    }

    // check for the size of the sub menu
    var subMenuPos = findPos(subMenuDiv);

    // move the sub menu and expand it downwards
    subMenuDiv.style.top = (refPoint.bot+subMenuOffset)+"px";
    subMenuDiv.style.left = refPoint.left+"px";
    subMenuDiv.style.width = (subMenuPos.width+menuMoveVal)+"px";

    var stillToExpand = subMenuDesiredWidth - (subMenuPos.width+menuMoveVal);

    if (stillToExpand<=0)
    {
        subMenuDiv.style.width = (subMenuPos.width+menuMoveVal+stillToExpand)+"px";
        screenMoving = setTimeout("continueSubMenuButton();", 40);
    }
    else
        screenMoving = setTimeout("continueSubMenuDisplayRight();", 40);

}

// called when a sub menu button is clicked to re-arrange the submenu
function hitSubMenuButton(_button)
{
    clearTimeout(screenMoving);

    // body is being re-displayed and so has no size and no content
    mainBodyDiv.style.width = "0px";
    mainBodyDiv.style.height = "0px";
    mainBodyDiv.innerHTML = "";

    // hitting the main menu main button resets the sub menu to defaults
    if (subButtonOrder[0] == _button)
    {
        continueSubMenuButton();
        return;
    }

    // loop through the order array an re-insert the requested button as the first one
    hitVal = false;
    for (var i=subButtonOrder.length-1; i>=1; i--)
    {
        if (subButtonOrder[i] == _button || hitVal)
        {
            subButtonOrder[i] = subButtonOrder[i-1];
            hitVal = true;
        }
    }

    subButtonOrder[0] = _button; // top button will be this one now
    screenMoving = true;    // screens are moving around
    continueSubMenuButton(); // buttons start moving
}

// called periodically untill the sub menu has been re-arranged
function continueSubMenuButton()
{
    var offsetHeight = 5, moveVal=0.45, lockSize = 3;
    var desiredPos = new Array(); // holds the desired y possition for each button
    var subMenuPos = findPos(subMenuDiv); // all button possitions are relative to the sub menu

    // get the objects for each button
    var buttonObjs = new Array();
    for (var i=0; i<subButtonOrder.length; i++)
    {
        buttonObjs[i] = document.getElementById(subButtonOrder[i]);
        buttonObjs[i].style.left = "0px";   // align each button to the left of the sub menu        curPos[i] = findPos(buttonObjs[i]);
        desiredPos[i] = 0;  // set latter
    }

    // find the end possitions for each menu button
    desiredPos[0] = 0; // first button is possitioned at the top
    var lastTop = subMenuPos.height;
    for (i=(desiredPos.length-1); i>=1; i--) // loop backwards upto second button, backwards to to being from bottom up
    {
        desiredPos[i] = lastTop - buttonObjs[i].height;
        lastTop = lastTop - buttonObjs[i].height - offsetHeight;
    }

    // move the buttons
    var allSet = true;
    for (i=0; i<desiredPos.length; i++)
    {
        // is button effectivly finished moving
        if (buttonObjs[i].offsetTop<(desiredPos[i]+lockSize) && buttonObjs[i].offsetTop>(desiredPos[i]-lockSize))
            buttonObjs[i].style.top = desiredPos[i]+"px";
        else
        {
            // move button and show that there are still moves to make
            buttonObjs[i].style.top = (buttonObjs[i].offsetTop+((desiredPos[i]-buttonObjs[i].offsetTop)*moveVal))+"px";
            allSet = false;
        }
    }

    // finished moving buttons
    if (allSet)
        startMainBody();
    else
        screenMoving = setTimeout("continueSubMenuButton();", 40);   // continue moving buttons
}