﻿var MenuArray = new Array();        // Het array waarin menuitems worden opgeslagen
var WaitInit = 15;                  // Standaardwaarde van de wacht-teller om in- en uitklappen te vertragen

// Klasse van een menuitem
function MenuItem(menuId)
{
    this.Id = menuId;                   // Unieke id van een menuitem (0, 1, 2, .., 42)
    this.Node = null;                   // Eventuele node die bij dit menuitem moet uitklappen (object)
    this.CurrentHeight = 0;             // De huidige hoogte van een submenu
    this.ToHeight = 0;                  // De doelhoogte van een submenu
    this.Wait = WaitInit;               // Wacht-teller om in- en uitklappen te vertragen
}

// Wordt aangeroepen onload
function initMenu()
{
    // Loop het hele array langs
    for (i=0; i<MenuArray.length; i++)
    {
        // Bestaat een item?
        if (MenuArray[i] != null)
        {
            // Bestaat de bijbehorende node?
            if (MenuArray[i].Node != null)
            {               
                // Huidige hoogte en doelhoogte opvragen
                var curH = MenuArray[i].CurrentHeight;
                var newH = MenuArray[i].ToHeight;
                
                // Als huidige hoogte en doelhoogte verschillen
                // dan moet er nog geanimeerd worden
                if (Math.abs(curH - newH) > 2)
                {
                    var waitTo = 0;
                    
                    // Uitklappen sneller dan inklappen
                    if (newH > 0) waitTo = WaitInit / 2.5;
                    
                    // Is de wacht-teller nog bezig?
                    if (MenuArray[i].Wait <= waitTo)
                    {   
                        // Om te kunnen animeren moet het submenu
                        // op zichtbaar en zijn overflow op hidden
                        MenuArray[i].Node.style.display = 'block';
                        MenuArray[i].Node.style.overflow = 'hidden';
                        
                        // De te zetten hoogte trapsgewijs berekenen
                        var setH = curH + ((newH - curH) / 2);
                        
                        // De de zetten hoogten doorvoeren
                        // en opslaan als huidige hoogte 
                        MenuArray[i].Node.style.height = Math.round(setH) + 'px';
                        MenuArray[i].CurrentHeight = setH;
                    }
                    // Wacht-teller verlagen
                    else 
                    {
                        MenuArray[i].Wait--;
                    }
                }
                // Als huidige hoogte en doelhoogte niet (meer) verschillen
                // dan alle eigenschappen op hun eindwaarde zetten
                else
                {
                    MenuArray[i].Wait = WaitInit;
                    MenuArray[i].Node.style.height = newH + 'px';
                    MenuArray[i].CurrentHeight = newH;
                    MenuArray[i].Node.style.overflow = '';
                    if (newH == 0)
                    {
                        MenuArray[i].Node.style.display = '';
                    }
                }
            }
        }
    }
    
    // Alles blijven controleren op eventueel
    // uit te voeren animaties
    setTimeout("initMenu()", 20);
}

// Wordt aangeroepen vanuit flipMenu()
function setMenu(menuId)
{
    // Alleen een menuobject aanmaken
    // als het nog niet bestaat
    if (MenuArray[menuId] == null)
    {
        MenuArray[menuId] = new MenuItem(menuId);
        
        var navRoot = document.getElementById("menuItem" + menuId);
        
        if (navRoot != null)
        {
            // Node opzoeken die bij het huidige menuitem moet uitklappen
            for (i=0; i<navRoot.childNodes.length; i++)
            {
                if (navRoot.childNodes[i].tagName.toLowerCase() == "ul")
                {
                    MenuArray[menuId].Node = navRoot.childNodes[i];
                }
            }
        }
    }
}

// Wordt aangeroepen bij onmouseover en onmouseout van elk menuitem (LI)
function flipMenu(menuId, newH)
{
    // MenuArray vullen indien nodig
    setMenu(menuId);
    
    // Hoogte uitklapper bepalen
    if (newH == -1)
    {
        var navRoot = MenuArray[menuId].Node;
        
        if (navRoot.childNodes != null)
        {
            newH = navRoot.childNodes.length * 20;
        }
    }
    
    // Item in MenuArray nieuwe hoogte meegeven
    MenuArray[menuId].ToHeight = newH;
}
