var navigation = {

  //onload in global.js
  init: function () {

    //hide all subnav 
    $$("#main-nav .level2-list").fade("hide");

    //attach click event to header
    $$("#main-nav .level1-header").addEvent("mouseenter", function () {
      //rest van de items hidden
      $$("#main-nav .level2-list").fade("hide");

      //menu op visible/hidden zetten
      var subNav = this.getNext("ul");
      var visible = subNav.style.visibility == 'visible';
      if (visible)
        subNav.fade("hide");
      else
        subNav.fade("show");
    });

    //attach hide event
    $(window.document.body).addEvent("click", navigation.hideAllSubNavigation);
    $$("#main-nav .level1-header").addEvent("mouseleave", navigation.hideAllSubNavigation);
  },

  hideAllSubNavigation: function (evt) {
    var isNavItem = $(evt.target).getParent("#main-nav") != null;
    //only hide if click is not from navigation
    if (!isNavItem) {
      $$("#main-nav .level2-list").fade("hide");
    }
  }
}