// DropMenu.js

var ShowingMenu = false;

function SetShowing() { ShowingMenu = true; }
function SetHiding() {
  ShowingMenu = false;
  setTimeout(function() { CheckStillHiding(); }, 10);
}
function CheckStillHiding() { if (ShowingMenu == false) HideMenu(); }

function ShowMenu() {
  SetShowing();
  var td = document.getElementById("menu1");
  td.style.background = "black";

  var width = td.offsetWidth;
  var left = 0;
  var top = 0;
  var obj = td;
  do {
    left += obj.offsetLeft
    top += obj.offsetTop;
  } while (obj = obj.offsetParent);

  var div = document.getElementById("dropMenu");
  div.innerHTML = '<table align=center cellspacing=0><tr><td class="sideNavigation" onmouseover="SetShowing()" onmouseout="SetHiding()">' +
                  '  <table class="menus" cellspacing=0>' +
                  '    <tr><td><a href="ScreamingTrumpetPro.html">Pro</a></td></tr>' +
                  '    <tr><td><a href="ScreamingTrumpet.html">Original</a></td></tr>' +
                  '  </table>' +
                  '</td></tr></table>';

  div.style.backgroundColor = "rgb(255, 243, 185)";
  div.style.left = left + width;
  div.style.top = top;
  div.style.width = width;
  div.style.position = "absolute";
  div.style.visibility = "visible";
  div.style.display = "block";
}

function HideMenu(id) {
  var div = document.getElementById("dropMenu");
  div.innerHTML = "";
  div.style.position = "static";
  div.style.visibility = "hidden";
  div.style.display = "none";

  var td = document.getElementById("menu1");
  td.style.background = "transparent url('Images/Sidebar.jpg') repeat-x";
}