base_path = "http://www.natuurlijkduurzaam.nl/";

//var typemenu = "horizontaal";
var typemenu = "verticaal";

function BuildMenu()
{
        var menu = document.getElementById("mainMenu");
        var menubuilder = new HumanitasMenuBuilder();
        var output = menubuilder.BuildMenu(menu);
        document.getElementById("menu").appendChild(output);
        //document.body.innerText = document.body.innerHTML;
//        alert(document.getElementById("menu").innerHTML);
        //alert(output.innerHTML);

}

function MenuBuilder()
{
    this._construct();
}

MenuBuilder.prototype._construct = function ()
{
    this.showDelay = 0;
    this.hideDelay = 500;
}

MenuBuilder.prototype.BuildMenu = function (ul, level)
{
    if (!level)
    {
        var level = 0;
        this.CreateBehaviours();
    }

    var menu = this.CreateMenu(ul, level);
    for (var i = 0; i < ul.childNodes.length; i++)
    {
        if (ul.childNodes[i].tagName == "LI")
        {
            var li = ul.childNodes[i];
            var item = this.CreateItem(li, level);
            var uls = li.getElementsByTagName("UL");
            if (uls.length > 0)
            {
                var subMenu = this.BuildMenu(uls[0], level + 1);
                item.appendMenu(subMenu);
            }
            menu.appendItem(item);
        }
    }

    return menu; 
}

MenuBuilder.prototype.CreateMenu = function (ul, level)
{
    var div = document.createElement("DIV");
    div.className = "menu";
    div.subItems = new Array ();
    div.appendItem = function (item)
    {
        this.subItems[this.subItems.length] = this.appendChild(item);
        item.parentMenu = this;
    }

    if (level > 0)
    {
        div.style.display = "none";
    }
    return div;
}

MenuBuilder.prototype.CreateItem = function (li, level)
{
    var div = document.createElement("DIV");

    var a1 = li.getElementsByTagName("A")[0];
    var a2 = document.createElement("A");
    a2.href = a1.href;
    a2.innerHTML = a1.innerHTML;
    div.appendChild(a2);

    div.appendMenu = function (menu)
    {
        if (typemenu == "horizontaal")
        {
            this.subMenu = this.insertBefore(menu, this.firstChild);
        }
        else if (typemenu == "verticaal")
        {
            this.subMenu = this.appendChild(menu, this.firstChild);
        }
        this.subMenu.parentItem = this;
    }

    this.ApplyItemBehaviours(div, level);

    return div;
}

MenuBuilder.prototype.ApplyItemBehaviours = function (item, level)
{
    item.onmouseover = function ()
    {
        if (this.SetActive) this.SetActive();
        var divs = this.getElementsByTagName("DIV");
        if (divs.length > 0)
        {
            window.menuBehaviours.Show(divs[0]);
        }
    }

    item.onmouseout = function ()
    {
        if (this.SetInactive) this.SetInactive();
        var divs = this.getElementsByTagName("DIV");
        if (divs.length > 0)
        {
            window.menuBehaviours.Hide(divs[0]);
        }
    }
}

MenuBuilder.prototype.CreateBehaviours = function ()
{
    window.menuBehaviours = new Object();
    window.menuBehaviours.showDelay = this.showDelay;
    window.menuBehaviours.hideDelay = this.hideDelay;

    window.menuBehaviours.Hide = function (obj)
    {
        if (!obj.id)
        {
            obj.id = new Date().getTime();
        }
        if (obj.showTimeout)
        {
            window.clearTimeout(obj.showTimeout);
        }
        obj.hideTimeout = window.setTimeout("window.menuBehaviours.HideNow(document.getElementById('" + obj.id + "'))", window.menuBehaviours.hideDelay);
    }

    window.menuBehaviours.HideNow = function (obj)
    {
        obj.style.display = "none";
        if (obj.SetInactive) obj.SetInactive();
    }

    window.menuBehaviours.Show = function (obj)
    {
        if (!obj.id)
        {
            obj.id = new Date().getTime();
        }
        if (obj.hideTimeout)
        {
            window.clearTimeout(obj.hideTimeout);
        }
        obj.showTimeout = window.setTimeout("window.menuBehaviours.ShowNow(document.getElementById('" + obj.id + "'))", window.menuBehaviours.showDelay);
    }

    window.menuBehaviours.ShowNow = function (obj)
    {
        window.menuBehaviours.HideInactive(obj.parentItem.parentMenu);
        if (obj.SetActive) obj.SetActive();
        obj.style.display = "block";
    }

    window.menuBehaviours.HideInactive = function (obj)
    {
        for (var i = 0; i < obj.subItems.length; i++)
        {
            var subItem = obj.subItems[i];
            if (!subItem.active && subItem.subMenu) window.menuBehaviours.HideNow(subItem.subMenu);
        }
    }
}

function HumanitasMenuBuilder()
{
	this._construct();
}

HumanitasMenuBuilder.prototype = new MenuBuilder();
HumanitasMenuBuilder.prototype.base = new MenuBuilder();

HumanitasMenuBuilder.prototype.BuildMenu = function (ul, level)
{
    if (!level)
    {
        var level = 0;
        this.CreateBehaviours();
    }

    var menu = this.CreateMenu(ul, level);
    for (var i = 0; i < ul.childNodes.length; i++)
    {
        if (ul.childNodes[i].tagName == "LI")
        {
            var li = ul.childNodes[i];
            var item = this.CreateItem(li, level);
            var uls = li.getElementsByTagName("UL");
            if (uls.length > 0)
            {
                var subMenu = this.BuildMenu(uls[0], level + 1);
                item.appendMenu(subMenu);
            }
            menu.appendItem(item);

            menu.className = "menu " + li.className;
        }
    }
    return menu;
}

HumanitasMenuBuilder.prototype.CreateItem = function (li, level)
{
    if (level > 0)
    {
        return this.base.CreateItem.call(this, li, level);
    }

    var div = document.createElement("DIV");

    var a1 = li.getElementsByTagName("A")[0];
    var a2 = document.createElement("A");
    a2.href = a1.href;

    var img = document.createElement("IMG");
    img.style.border = "0px";
    img.src = base_path + "images/" + li.className + ".gif" //a1.id + ".gif";
    img.className = "inactive";
    a2.appendChild(img);

    var img2 = document.createElement("IMG");
    img2.style.border = "0px";
    img2.src = base_path + "images/" + li.className + "_over.jpg" //+ a1.id + "_over.jpg";
    img2.className = "active";
    a2.appendChild(img2);

    //a2.innerHTML = a1.innerHTML;
    div.appendChild(a2);

    div.className = "menuItemInactive";

    var LiClassName = li.className;
    if (LiClassName)
    {
    	div.className = LiClassName + " " + "menuItemInactive";
    }
    else
    {
      	div.className = "menuItemInactive";
    }


    div.SetActive = function ()
    {
        if (LiClassName)
        {
        	this.className = LiClassName + " " + "menuItemActive";
        }
        else
        {
            this.className = "menuItemActive";
        }
        //this.className = "menuItemActive";
    }

    div.SetInactive = function ()
    {
        if (LiClassName)
        {
        	this.className = LiClassName + " " + "menuItemInactive";
        }
        else
        {
          	this.className = "menuItemInactive";
        }
        //this.className = "menuItemInactive";
    }

    div.appendMenu = function (menu)
    {
        if (typemenu == "horizontaal")
        {
            this.subMenu = this.insertBefore(menu, this.firstChild);
        }
        else if (typemenu == "verticaal")
        {
            this.subMenu = this.appendChild(menu, this.firstChild);
        }
        this.subMenu.parentItem = this;
    }

    this.ApplyItemBehaviours(div, level);

    return div;
}

function GetParentByTagName(obj, tagName)
{
    return obj.parentNode ? (obj.parentNode.tagName == tagName ? obj.parentNode : GetParentByTagName(obj.parentNode, tagName)) : null;
}