/*  ***********************************************************
 *
 *  Aan de slag met JavaScript - Jeroen Visser - Naar Voren
 *  
 *  JavaScript voor menu-animatie
 *  
 *  V0.2 - Naar Voren - 20 januari 2006
 *
 *  Inhoud:
 *  - Dispatch om DOM compatible scripts aan events te hangen.
 *  - Menuscript om animatie aan mouseover/mouseout te koppelen.
 *
 *  Locatie:
 *  - ./voorbeeld_script.js
 *  
 *  *********************************************************** */


/*  ***********************************************************
 *
 *  0  DISPATCH: haak routines in het DOM event model
 *
 */
function dispatch(targetElement,eventName,handlerName)
{ 
  if (targetElement.addEventListener) { 
    targetElement.addEventListener(eventName, function() { return targetElement[handlerName](); }, false);
  } else if (targetElement.attachEvent) { 
    targetElement.attachEvent("on" + eventName, function() { return targetElement[handlerName](); });
  } else { 
    var originalHandler = targetElement["on" + eventName]; 
    if (originalHandler) { 
      targetElement["on" + eventName] = function() { originalHandler(); return targetElement[handlerName](); }
    } else { 
      targetElement["on" + eventName] = function() { return targetElement[handlerName](); } 
    } 
  }
}




/*  ***********************************************************
 *
 *  1  MENUBAR: animeer de menuitems bij mouseover / mouseout
 *
 */

// Enkele variabelen zetten.
//
var motion_top_state = 7, motion_base_state = 0;   // Start en eindpunt menustand.
var motion_speed = 120;                             // Zet snelheid van neerwaartse beweging.


// Initieer script: hoofdroutine.
//
function initMenu()
{
  var menu = document.getElementById("menu");
  
  // Geen menu? Dan niets doen.
  if (!menu) return;
  
  var menu_links = menu.getElementsByTagName("a");
  var pagina_tak = document.getElementsByTagName("body")[0].className;
  
  for (var i = 0; i < menu_links.length; i++)
  {
    // Check eerst of item bij huidige sitetak hoort (dan geen mouseover!).



    if (menu_links[i].parentNode.id != pagina_tak)
    {
      menu_links[i].targetMenuOverHandler = moveUp;
      menu_links[i].targetMenuOutHandler = startMoveDown;
      dispatch(menu_links[i], "mouseover", "targetMenuOverHandler");
      dispatch(menu_links[i], "mouseout", "targetMenuOutHandler");
    }
  }
}





//  Hang menu handler in het DOM.
//
window.targetMenuHandler = initMenu;
dispatch(window, "load", "targetMenuHandler");


// Hulproutine: zet menu-item omhoog.
//
function moveUp()
{
  // Haal menu-item op uit document.
  var current_item = this.parentNode;
  
 // Geen menu-item? Dan niets doen.
  if (!current_item) return false;
  
  // Wis bestaande timeout indien aanwezig.
  if (current_item.inMotion) clearTimeout(current_item.inMotion);
  
  // Verplaats en 'verkleur' menu-item.
  current_item.state = motion_top_state;
  current_item.className = "stap" + current_item.state;
  
  // Wis verwijzing naar de stopwatch.
  current_item.inMotion = null;
}

// Hulproutine: start terugzetten menu-item met vertraging.
//
function startMoveDown()
{
  // Haal huidige menu-item op.
  var current_item = this.parentNode;
  
  // Geen menu-item? Dan niets doen.
  if (!current_item) return;
  
  var in_motion = "moveDown('" + current_item.id + "')";
  current_item.inMotion = setTimeout(in_motion, 2*motion_speed);
}

// Recursieve hulproutine: zet menu-item stapje omlaag tot basispositie is bereikt.
//
function moveDown(item_id)
{
  // Haal huidige menu-item en link uit dit menu-item op.
  var current_item = document.getElementById(item_id);
  
  // Geen menu-item? Dan niets doen.
  if (!current_item) return;
  
  // Verplaats en 'verkleur' menu-item.
  current_item.state--;
  current_item.className = "stap" + current_item.state;
  
  
  // Vervolg timeoutserie voor terugplaatsen totdat eindpositie weer is bereikt.
  if (current_item.state > motion_base_state)
  {
    // We zijn er nog niet, dus volgende stap.
    var in_motion = "moveDown('" + item_id + "')";
    current_item.inMotion = setTimeout(in_motion, motion_speed);
  }
  else
  {
    // Klaar, dus wis de verwijzing naar de stopwatch.
    current_item.inMotion = null;
  }
}