var submenuChangingState = false;
var submenuVisible = false;
var submenuClosePending = null;

function onSignBoardPressed() {
  document.location = "/contact_us.html";
}

function onLogoPressed() {
  document.location = "/";
}

function showPointer() {
  hideSubmenu();

  $("submenu_1").style.height = "1px";
  $("submenu_1").show();

  new Effect.Morph($("submenu_1"), { style: "height: 7px;", duration: 0.2 })
}

function hidePointer() {
  new Effect.Morph($("submenu_1"), { 
    style: "height: 1px;",
    duration: 0.2,
    afterFinish: function() { 
      $("submenu_1").hide();   
    },
    queue: "end"
  });
}

function showSubmenu() {
  if (submenuVisible || submenuChangingState) { return; };
  if (submenuClosePending) {
    clearTimeout(submenuClosePending);
    submenuClosePending = null;
  };

  submenuChangingState = true;

  $("submenu_2").style.height = "1px";
  $("submenu_2").show();

  new Effect.Morph($("submenu_2"), { style: "height: 22px;", duration: 0.2 })
  new Effect.Appear($("submenu_item_1"), { duration: 0.1, queue: "end" })
  new Effect.Appear($("submenu_item_2"), { duration: 0.1, queue: "end" })
  new Effect.Appear($("submenu_item_3"), { duration: 0.1, queue: "end", 
    afterFinish: function() {
      submenuChangingState = false;
      submenuVisible = true;
    }
  })
}

function hideSubmenu() {
  if (!submenuVisible || submenuChangingState) { return; };
  if (submenuClosePending) { return };
  
  submenuClosePending = setTimeout(doHideSubmenu, 100);
}

function doHideSubmenu() {
  submenuClosePending = null;
  submenuChangingState = true;

  new Effect.Fade($("submenu_item_3"), { duration: 0.1})
  new Effect.Fade($("submenu_item_2"), { duration: 0.1, queue: "end" })
  new Effect.Fade($("submenu_item_1"), { duration: 0.1, queue: "end" })
  new Effect.Morph($("submenu_2"), { 
    style: "height: 1px;",
    duration: 0.2,
    afterFinish: function() { 
      $("submenu_2").hide();   
      submenuVisible = false;
      submenuChangingState = false;
    },
    queue: "end"
  });
}

document.observe("dom:loaded", function(e) {
  $("menu").appear({ duration: 1 });

  $$("#submenu_2 li").each(function(node) {
    node.observe("mouseover", function(e) {
      node.down("span").appear( { duration: 0.3 } );
    });

    node.observe("mouseout", function(e) {
      node.down("span").fade( { duration: 0.3 } );
    });
  });

  $("menu_item_1").observe("mouseover", function(e) {
    showPointer();
  });

  $("menu_item_2").observe("mouseover", function(e) {
    showSubmenu();
  });

  $("menu_item_1").observe("mouseout", function(e) {
    hidePointer();
  });

  $("submenu_2").observe("mouseout", function(e) {
    var to = $(e.relatedTarget || e.toElement);
    if (!to.up("#submenu_2") && to.id != "submenu_2") {
      hideSubmenu();
    };
  });
});