var iFrameId;

// Build the menu from the definition given above.
// menuTableId = the Id of the table that contains the menu.
// subPageIframeId = the Id if the Iframe that will display the sub-pages.
function BuildMenu(menuTableId, subPageIframeId) {

    iFrameId = subPageIframeId;

    var menuTable = document.getElementById(menuTableId);
    var numRows = menuTable.rows.length;
    var topMenu;

    for (var rowIdx = 0; rowIdx < numRows; rowIdx++) {
        var menuItem = menuTable.rows[rowIdx];
        var menuCell = menuItem.cells[0];

        if (menuCell.className == 'menu') {
            topMenu = menuItem;
            var link = menuItem.getElementsByTagName("a")[0];
            if (link == null) {
                menuItem.onclick = function () { ExpandSubmenu(this); };
            }
            else {
                menuCell.removeChild(link);
                menuItem.rel = link.href;  // slightly naughty
                menuCell.innerHTML = link.firstChild.data;
                menuItem.onclick = function () { showContent(this); };
            }
        }
        else if (menuCell.className == 'subMenu') {
            menuItem.className = 'subMenuHidden';
            menuCell.className = 'subMenu';

            var link = menuCell.firstChild;
            menuCell.removeChild(link);
            menuItem.rel = link.href;  // slightly naughty
            menuCell.innerHTML = link.firstChild.data;
            menuItem.onclick = function () { showContent(this); };

            topMenu.rel = (menuItem.rowIndex - topMenu.rowIndex);
        }
    }

    // Create Home menu item.
    var newRow = menuTable.insertRow(0);
    var newCell = newRow.insertCell(0);
    newCell.className = 'menu';
    newCell.innerHTML = 'Home';
    newRow.onclick = function () { Home(this); };

    // Expand the Alvaston Park Friends menu item
    ExpandSubmenu(menuTable.rows[1])
 }


// Contract the menu to hide the sub-menus.
// menuItem = any menu item.
function CloseSubmenu(menuItem) {
    var menuTable = menuItem.parentNode;
    var numTableRows = menuTable.rows.length;
    for (var i = 0; i < numTableRows; i++) {
        var tablerow = menuTable.rows[i];
        if (tablerow.className == "subMenuShown") {
            tablerow.className = "subMenuHidden";
        }
    }
}


// Expand the menu to show a sub-menu.
// menuItem = row in table that has been clicked on.
function ExpandSubmenu(menuItem) {
    // Find out if menus are already expanded.
    var menuRowIdx = menuItem.rowIndex;
    var menuRow = menuItem.parentNode.rows[menuRowIdx + 1];
    var isExpanded = (menuRow.className == "subMenuShown");

    // Close all subMenus
    CloseSubmenu(menuItem);
    
    // Show menus if not already expanded.
    if (!isExpanded) {
        // Retrieve number of menus to expand.
        var numRows = menuItem.rel;

        for (var i = menuRowIdx + 1; i < menuRowIdx + numRows + 1; i++) {
            menuItem.parentNode.rows[i].className = "subMenuShown";
        }
    }
}


// Call menu selection from elsewhere
function SelectMenu(menuItemId) {
    menuItem = document.getElementById(menuItemId);
    CloseSubmenu(menuItem);
    showContent(menuItem);
}


// Show the selected sub=page in iFrame.
// menuItem - menu item that has been selected.
function showContent(menuItem) {
    if (menuItem.className == 'menu') {
        CloseSubmenu(menuItem);
    }

    var subPageIframe = document.getElementById(iFrameId);
    subPageIframe.height = "192px";
    subPageIframe.parentNode.style.visibility = "visible";
    var url = menuItem.rel;
    subPageIframe.src = url;
}


// User selects 'Home'
// menuItem - menu item that has been selected.
function Home(menuItem) {
    CloseSubmenu(menuItem);
    var subPageIframe = document.getElementById(iFrameId);
    subPageIframe.height = "192px";
    subPageIframe.parentNode.style.visibility = "hidden";
}