var timCloser;





function Container(id, title) {
    var Subs = new Array();
    this.id = id;
    this.title = title;
    this.addMenu = function(name, link) {
        Subs[Subs.length] = new Menu(name, link);
        return Subs[Subs.length - 1];
    }
    this.menus = Subs;
    this.draw = function() {
        var maincon = document.getElementById(id);
        var mnu = document.createElement('Div');
        var total = '';
        var subs = '';
        var sub = '';
        if (maincon) {

            maincon.innerHTML = '<span onmouseout="Sub_Hide();" onmouseover="SubHide_Abort();ShowMain(\'' + id + 'sub\');" id="' + id + 'title">' + title + '</span>'
            mnu.id = id + 'sub';
            mnu.style.display = 'none';
            mnu.name = 'mainpart';
            total = '<table style=" border-collapse:collapse;" class="menublock" onmouseout="Sub_Hide();" onmouseover="SubHide_Abort();">';
            for (var cnt = 0; cnt < Subs.length; cnt++) {
                var cur = Subs[cnt];
                if (cur.link == '') {
                    total = total + '<tr id="m' + id + cnt + '" onmouseover="M_Over(\'' + id + cnt + '\');" onmouseout="M_Out(\'' + id + cnt + '\');" class="menu"><td >' + cur.name + '</td><td align="right"><img src="http://muziekvisieweb.becosoft.net/images/arrows.gif"></td></tr>';
                    sub = '<div name="subpart" id="sub' + id + cnt + '" style="display: none;"><table style=" border-collapse:collapse;" class="submenublock"  onmouseout="Sub_Hide();" onmouseover="SubHide_Abort();">';
                    for (var scnt = 0; scnt < cur.childs.length; scnt++) {
                        var scur = cur.childs[scnt];
                        if (scur.link != '') {
                            sub = sub + '<tr id="s' + id + cnt + '_' + scnt + '" onmouseover="SM_Over(\'' + id + cnt + '_' + scnt + '\');" onmouseout="SM_Out(\'' + id + cnt + '_' + scnt + '\');" class="submenu" onclick="window.location.href=document.getElementById(\'l' + cnt + '_' + scnt + '\').href;"><td ><a id="l' + cnt + '_' + scnt + '" href="' + scur.link + '">' + scur.name + '</a></td></tr>';
                        }
                    }
                    sub = sub + '</table></div>';
                    subs = subs + sub;
                }
                else {
                    total = total + '<tr id="m' + id + cnt + '" onmouseover="M_Over(\'' + id + cnt + '\');" onmouseout="M_Out(\'' + id + cnt + '\');" class="menu"  onclick="window.location.href=document.getElementById(\'l' + cnt + '\').href;"><td ><a id="l' + cnt + '" href="' + cur.link + '">' + cur.name + '</a></td><td align="right">&nbsp;</td></tr>';
                }
            }
            total = total + '</table>';
            mnu.innerHTML = total + subs;
            document.body.appendChild(mnu);
        }
    }
}

function HideSubs() {
    //ff
    var Elems = document.getElementsByName('subpart');
    for (var cnt = 0; cnt < Elems.length; cnt++) {
        Elems[cnt].style.display = 'none';
    }


    //IE
    var Elems = document.getElementsByTagName('div');
    for (var cnt = 0; cnt < Elems.length; cnt++) {
        if (Elems[cnt].name == 'subpart') {
            Elems[cnt].style.display = 'none';
        }
    }

}

function HideMains() {
    HideSubs();
    //FF
    var Elems = document.getElementsByName('mainpart');
    for (var cnt = 0; cnt < Elems.length; cnt++) {
        Elems[cnt].style.display = 'none';
    }
    //IE
    var Elems = document.getElementsByTagName('div');
    for (var cnt = 0; cnt < Elems.length; cnt++) {
        if (Elems[cnt].name == 'mainpart') {
            Elems[cnt].style.display = 'none';
        }
    }
}


function Menu(name, link) {
    var Subs = new Array();
    this.name = name;
    this.link = link;
    this.addSubMenu = function(name, link) {
        Subs[Subs.length] = new Menu(name, link);
        return Subs[Subs.length - 1];
    }
    this.childs = Subs;
}

function ShowMain(id) {
    HideMains();
    SubHide_Abort();
    var par = new String(id);
    par = par.substr(0, par.length - 3);
    document.getElementById(id).style.display = '';
    document.getElementById(id).style.position = 'absolute';
    /*if (document.getElementById(par).parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.tagName) {
    alert(document.getElementById(par).parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.tagName);
    }*/
    if (getbrowser() == "ie") {
        document.getElementById(id).style.left = document.getElementById(par).parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.offsetLeft + document.getElementById(par).offsetLeft + 'px';
    }
    else if (getbrowser() == 'saf') {
        document.getElementById(id).style.left = document.getElementById(par).parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.offsetLeft + document.getElementById(par).offsetLeft + 'px';
    }
    else if (getbrowser() == 'o') {
        document.getElementById(id).style.left = document.getElementById(par).parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.offsetLeft + document.getElementById(par).offsetLeft + 'px';
    }
    else if (getbrowser() == 'ff') {
        document.getElementById(id).style.left = document.getElementById(par).parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.offsetLeft + document.getElementById(par).offsetLeft + 'px';
    }
    else {
        document.getElementById(id).style.left = document.getElementById(par).parentNode.parentNode.parentNode.parentNode.parentNode.offsetLeft + document.getElementById(par).offsetLeft + 'px';
    }
    document.getElementById(id).style.top = document.getElementById(par).offsetTop + document.getElementById(par).offsetHeight + 'px';
}

function M_Over(id) {
    var sMenu = document.getElementById('m' + id);
    SubHide_Abort();
    sMenu.className = 'menusel';
    HideSubs();
    if (document.getElementById('sub' + id)) {
        var sDiv = document.getElementById('sub' + id);
        sDiv.style.display = '';
        sDiv.style.position = 'absolute';
        sDiv.style.left = sMenu.parentNode.parentNode.offsetLeft + sMenu.parentNode.offsetLeft + sMenu.offsetLeft + sMenu.offsetWidth - 1 + 'px';
        sDiv.style.top = sMenu.parentNode.parentNode.offsetTop + sMenu.offsetTop + 'px';
    }
}

function M_Out(id) {
    document.getElementById('m' + id).className = 'menu';
}

function SM_Over(id) {
    document.getElementById('s' + id).className = 'submenusel';
    SubHide_Abort();
}

function SM_Out(id) {
    document.getElementById('s' + id).className = 'submenu';
}

function Sub_Hide() {
    timCloser = setTimeout("HideMains();", 1000);
}

function SubHide_Abort() {
    clearTimeout(timCloser);
}





//------------------------------------------------
function getbrowser() {
    var browserName = "";

    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("opera") != -1) {
        browserName = "o";
    } else if (ua.indexOf("msie") != -1) {
        browserName = "ie";
    } else if (ua.indexOf("safari") != -1) {
        browserName = "saf";
    } else if (ua.indexOf("mozilla") != -1) {
        if (ua.indexOf("firefox") != -1) {
            browserName = "ff";
        } else {
            browserName = "moz";
        }
    }

    return browserName;
};