/*
   * menus.js: This code implements a simple horizontal menu system.
   * (c) 2012 Bear Peak Software LLC
   *
   * Touch events for iOS devices added Jan 17, 2012. GT
   */
  
  /* global vars */
  
  var menubar, mainmenu, submenuBox;
  var curSubmenu = null;
  var curMenuitem = null;
  
  // register onload listener
  registerEvent(window, "load", init);

  /* init */
  
  function init() {
    //log("menus.js: init: isTouchDevice = " + isTouchDevice());
     
    // get the important menu elements
    menubar = document.getElementById("menubar");
    mainmenu = document.getElementById("mainmenu");
    submenuBox = document.getElementById("submenuBox");

    // init menubar behavior: add listeners to menuitems (IMG elements)
    var imgs = mainmenu.getElementsByTagName("img");
    for (var i = 0; i < imgs.length; i++) {
      var img = imgs[i];
      //log("img " + i + ": overimg=" + getOverimg(img) + " submenu=" + getSubmenu(img));
      if (isTouchDevice()) {
        if (getSubmenu(img)) {
          registerEvent(img, "click", doTouchClick);
		    }
      } else {
        registerEvent(img, "mouseover", doMenuitemMouseover);
        registerEvent(img, "mouseout", doMenuitemMouseout);
      }
    }
    
    if (isTouchDevice()) {
	    registerEvent(document, "touchstart", doDocTouchStart);
	    registerEvent(document, "touchcancel", doDocTouchCancel);
	    var links = submenuBox.getElementsByTagName("a");
	    for (var i = 0; i < links.length; i++) {
	  	  var link = links[i];
	  	  registerEvent(link, "click", doLinkTouchClick);
	    }
	  } else {
      registerEvent(menubar, "click", resetMenubar);
      registerEvent(menubar, "mouseout", doMenubarMouseout);
    }
  }
  
  /* utility functions */
  
  function eid(element) {
    var result = "null element";
    if (element)
      result = element.id ? element.id : "no id";
    return result;
  }
  
  function getOverimg(menuitem) {
    return menuitem.getAttribute("overimg");
  }
  
  function getSubmenu(menuitem) {
    var submenu = null;
    var subID = menuitem.getAttribute("submenu");
    if (subID)
      submenu = document.getElementById(subID);
    return submenu;
  }
  
  function highlightMI(menuitem) {
    curMenuitem = menuitem;
    menuitem.origSrc = menuitem.src;
    menuitem.src = getOverimg(menuitem);
  }

  function unHighlightMI() {
    if (curMenuitem) {
      curMenuitem.src = curMenuitem.origSrc;
      curMenuitem = null;
    }
  }
  
  function showSubmenu(submenu) {
    //log("showSubmenu: submenu=" + submenu + eid(submenu));
    curSubmenu = submenu;
    submenu.style.visibility = "visible";
  }
  
  function hideSubmenu() {
    if (curSubmenu)
      curSubmenu.style.visibility = "hidden";
    curSubmenu = null;
  }
  
  function elementInSubmenuBox(element) {
    return (element && (element == submenuBox || element == curSubmenu || 
      element.parentNode == curSubmenu));
  }
  
  function resetMenubar() {
    hideSubmenu();
    unHighlightMI();
  }
  
  // note: this is a simplistic test, but is reasonably accurate. It may give
  // false positives on some Android devices.
  function isTouchDevice() {
    return "ontouchstart" in window;
  }
  
  /* event listeners */
  
  function doMenuitemMouseover(e) {
    var target = e.target || e.srcElement;
    var submenu = getSubmenu(target);
    //log("doMenuitemMouseover: target=" + target + eid(target) + " submenu=" + submenu);
      
    highlightMI(target);
    
    if (submenu)
      showSubmenu(submenu);
  }

  function doMenuitemMouseout(e) {
    var target = e.target || e.srcElement;
    var to = e.relatedTarget || e.toElement;
    //log("doMenuitemMouseout: target=" + target + eid(target) + " to=" + to + eid(to));

    if (getSubmenu(target) == null || elementInSubmenuBox(to) == false)
      unHighlightMI();
  }

  function doMenubarMouseout(e) {
    var target = e.target || e.srcElement;
    var to = e.relatedTarget || e.toElement;
    //log("doMenubarMouseout: target=" + target + eid(target) + " to=" + to + eid(to));
      
    if (curSubmenu && elementInSubmenuBox(to) == false)
      resetMenubar();      
  }
  
  /* touch events (for iOS devices) */
  
  function doTouchClick(e) {
    var target = e.target;
    //log("doTouchClick: target=" + target + " id=" + eid(target));
    
    //highlightMI(target);
    
    var submenu = getSubmenu(target);
    showSubmenu(submenu);
    
    e.preventDefault();
    return false;
  }
  
  function doDocTouchStart(e) {
    var target = null;
    if (e.touches.length > 0) {
      target = e.touches[0].target;
    }

    //log("doDocTouchStart: target=" + target + " id=" + eid(target) + 
    //  " tagName=" + target.tagName() +
    //  " elementInSubmenuBox=" + elementInSubmenuBox(target) +
    //  " curSubmenu=" + curSubmenu);

    if (curSubmenu) {
	    //resetMenubar();
	    //touchMI = null;
	    //unhighlightMI();
	    curSubmenu.style.visibility = "hidden";
	    curSubmenu = null;
	    //e.stopPropagation();
	  }
	
	  if (target) {
	    var s = target.toString();
	    if (s.substring(s.length - 5, s.length) == ".html") {
	      window.location = s;
	    }
	  }
	
    return true; 
  }
    
  function doDocTouchCancel(e) {
	  resetMenubar();
	  return true;
  }

  function doLinkTouchClick(e) {
    //var target = e.target;
    //log("doLinkTouchClick: target=" + target + " tagName=" + target.tagName +
    //	" + href=" + target.href);
    //unhighlightMI();
	  curSubmenu.style.visibility = "hidden";
	  curSubmenu = null;
    e.preventDefault();
	  window.location = target.href;
  }