var timeout = null;
var selectedMenu = '';

function displayMenu(id)
{
  var menuElement = document.getElementById(id);
  var buttonElement = document.getElementById(id+"_button");

  // Hide already shown menu
  //if (selectedMenu != '' && selectedMenu != id) 
  if (selectedMenu != id) 
  {
    timeout=1;
    hideMenu();
  }

  // Show new menu
  menuElement.style.visibility = "visible";
  menuElement.style.display = "block";

  // Show activated button
  if (id != selectedMenu)
  {
    buttonElement.className = "menu_button_activated";
  }

  selectedMenu = id;

  // Clear timeout
  if (timeout) window.clearInterval(timeout);
  timeout = null;
}

function hideMenu()
{
  var menuElement;
  var buttonElement;
  var i;

  if (timeout != null)
  {
    for (i=1; i<=numberOfMenus; i++)
    {
      id = 'menu_'+i;
      menuElement = document.getElementById(id);
      buttonElement = document.getElementById(id+"_button");

      // Hide menu
      menuElement.style.visibility = "hidden";
      menuElement.style.display = "none";

      // Show deactivated button
      buttonElement.className = "menu_button";
    }
  }
  timeout = null;
  selectedMenu = '';
}

function startTimeOut(id)
{
  // Start timeout to hide the menu
  if (timeout == null)
  {
    timeout = window.setTimeout(hideMenu, 1000);
  }
}

function rollOver(ref)
{
  ref.className = "menu_element over";
}

function rollOut(ref)
{
  ref.className = "menu_element";
}