// Mouseover Menu v0.2
// Copyright 2006 - 2007 by Alexander von Weiss

// Useage example:
/*

<style>
#mo_menu {
  position:relative;
} #mo_menu div {
  position:absolute;
  visibility:hidden;
} #mo_menu div div {
  position:relative;
  visibility:hidden;
}
</style>
<script src="js.js" type="text/javascript"></script>

<a href="#" onmouseover="menu.over('1')">Show Menu 1</a>
<a href="#" onmouseover="menu.over('1')">Show Menu 2</a>

<div id="mo_menu">
  <div id="mo_layer_1_1">
    <div id="mo_layer_2_1">
      <a href="#" onmouseover="menu.stopHideTimer('1')" onmouseout="menu.startHideTimer('1')">Link 1</a>
      <a href="#" onmouseover="menu.stopHideTimer('1')" onmouseout="menu.startHideTimer('1')">Link 2</a>
    </div>
  </div>
  <div id="mo_layer_1_2">
    <div id="mo_layer_2_2">
      <a href="#" onmouseover="menu.stopHideTimer('2')" onmouseout="menu.startHideTimer('2')">Link 1</a>
      <a href="#" onmouseover="menu.stopHideTimer('2')" onmouseout="menu.startHideTimer('2')">Link 2</a>
    </div>
  </div>
</div>

*/

function mouseover_menu() {

  // CONFIG
  this.id_of_layers = "mo_layer_"; // id name e.g. id="mo_layer_<layer_depth>_<nr_of_layer>" => id="mo_layer_1_1"
  this.layer_nesting_depth = 2; // <div id="layer_1_1"><div id="layer_2_1"><div id="layer_3_1"></div></div></div> <-- nesting_depth = 3
  this.timer_hide_after = 900; // Hide Layer time in Miliseconds

  // INIT
  this.menu_active = false;
  this.menu_hide_soon = false;
  this.timer = false;
  this.known_layers = new Array();
  
  // METHODS
  this.showLayer               = mouseover_menu_showLayer;
  this.hideLayer               = mouseover_menu_hideLayer;
  this.hideAllLayers           = mouseover_menu_hideAllLayers;
  this.addToKnownLayers        = mouseover_menu_addToKnownLayers;

  this.startHideTimer          = mouseover_menu_startHideTimer;
  this.stopHideTimer           = mouseover_menu_stopHideTimer;

  this.onTimer_hideActiveLayer = mouseover_menu_onTimer_hideActiveLayer;
  this.over                    = mouseover_menu_over;
  this.pageMousedown           = mouseover_menu_pageMousedown;

  // EVENT HANDLER
  // document.onmousedown = this.pageMousedown;
  
}

function mouseover_menu_hideAllLayers() {
  for (var i=1; i<=this.known_layers.length; i++)
    if (this.known_layers[i] === true)
      this.hideLayer(i);
}

function mouseover_menu_over(layerNr) {
  this.hideAllLayers();
  this.showLayer(layerNr);
  this.menu_active = layerNr;
  this.menu_hide_soon = false;
}

function mouseover_menu_addToKnownLayers(layerNr,visibleLayer) {
  this.known_layers[layerNr] = visibleLayer;
}

function mouseover_menu_showLayer(layerNr) {
  this.addToKnownLayers(layerNr,true);
  for (var i=1; i<=this.layer_nesting_depth; i++)
    document.getElementById(this.id_of_layers + i + "_" + layerNr).style.visibility = 'visible';
}

function mouseover_menu_hideLayer(layerNr) {
  this.addToKnownLayers(layerNr,false);
  for (var i=1; i<=this.layer_nesting_depth; i++)
    document.getElementById(this.id_of_layers + i + "_" + layerNr).style.visibility = 'hidden';
}

function mouseover_menu_startHideTimer() {
  if (this.timer)
    clearTimeout(this.timer);
    
  this.timer = setTimeout("menu.onTimer_hideActiveLayer()", this.timer_hide_after);
  this.menu_hide_soon = this.menu_active;
}

function mouseover_menu_stopHideTimer() {
  this.menu_hide_soon = false;
}

function mouseover_menu_onTimer_hideActiveLayer() {
  if (this.menu_hide_soon && this.menu_hide_soon == this.menu_active)
    this.hideLayer(this.menu_active);

  this.menu_hide_soon = false;
}

function mouseover_menu_pageMousedown(event) {
  if (this.menu_active) {
    this.hideLayer(this.menu_active);
    this.menu_active = false;
  }
}

var menu = new mouseover_menu();