var mouseovertabsmenu =
{
    disappeardelay: 50,

    tabsmenutree: {},

    showsubmenu: function(linkobj) {
        var tabsmenu = this.tabsmenutree[linkobj._parentid]
        var highlightIdx = parseInt(linkobj._pos)

        this.hidesubmenu(linkobj._parentid)
        if (linkobj == tabsmenu.tabs[tabsmenu.selected].a)
        { this.greyTab(tabsmenu.tabs[tabsmenu.selected], false) }
        else
        { this.greyTab(tabsmenu.tabs[tabsmenu.selected], true) }
        this.highlightTab(tabsmenu.tabs[highlightIdx], true)
        tabsmenu.submenu._prevselected = highlightIdx
    },

    hidesubmenu: function(tabsmenuid) {
        var tabsmenu = this.tabsmenutree[tabsmenuid]
        var prevHighlighteIndex = tabsmenu.submenu._prevselected

        if (typeof prevHighlighteIndex != "undefined")
        { this.highlightTab(tabsmenu.tabs[prevHighlighteIndex], false) }
        this.greyTab(tabsmenu.tabs[tabsmenu.selected], false)
    },

    hideAllSubmenus: function(tabsmenuid) {
        var tabsmenu = this.tabsmenutree[tabsmenuid]
        var prevHighlightedIndex = tabsmenu.submenu._prevselected

        if (typeof prevHighlightedIndex != "undefined")
        { this.highlightTab(tabsmenu.tabs[prevHighlightedIndex], false) }
        this.greyTab(tabsmenu.tabs[tabsmenu.selected], true);
    },

    highlightTab: function(tab, highlight) {
        var action, display

        if (highlight) {
            action = 'add'
            display = "block"
        }
        else {
            action = 'remove'
            display = "none"
        }
        this.css(tab.a, "highlighted", action);
        this.css(tab.li, "highlighted", action);
        if (tab.subMenu != null)
        { tab.subMenu.style.display = display } //hide selected menu
    },

    greyTab: function(tab, grey) {
        var action, display

        if (grey) {
            action = 'add'
            display = "none"
        }
        else {
            action = 'remove'
            display = "block"
        }
        this.css(tab.a, "greyed", action);
        this.css(tab.li, "greyed", action);
        if (tab.subMenu != null)
        { tab.subMenu.style.display = display } //hide selected menu
    },

    /*    clearhidetimer: function(timerid) {
    if (timerid)
    clearTimeout(timerid)
    },
    */
    css: function(el, targetclass, action) {
        var needle = new RegExp("(^|\\s+)" + targetclass + "($|\\s+)", "ig")
        if (action == "check")
            return needle.test(el.className)
        else if (action == "remove")
            el.className = el.className.replace(needle, "")
        else if (action == "add" && !needle.test(el.className))
            el.className += " " + targetclass
    },

    isContained: function(m, e) {
        var e = window.event || e
        var c = e.relatedTarget || ((e.type == "mouseover") ? e.fromElement : e.toElement)
        while (c && c != m) {
            try { c = c.parentNode }
            catch (e) { c = m }
        }
        if (c == m)
            return true
        else
            return false
    },

    isContainedSub: function(m, e) {
        var e = window.event || e
        var c = e.relatedTarget || ((e.type == "mouseover") ? e.fromElement : e.toElement)
        var tabsmenu = this.tabsmenutree[m._parentid]
        var tab = tabsmenu.tabs[m._pos]
        var subParent

        try { subParent = tab.subMenu.parentNode }
        catch (e) { subParent = tab.subMenu }

        if (c && c == subParent)
            return true
        else
            return false
    },

    addEvent: function(target, functionref, tasktype) {
        if (target.addEventListener)
            target.addEventListener(tasktype, functionref, false);
        else if (target.attachEvent)
            target.attachEvent('on' + tasktype, function() { return functionref.call(target, window.event) });
    },

    init: function(tabsmenuid, submenuid, disappearBool) {
        this.tabsmenutree[tabsmenuid] = {}

        var tabsMenuElement = document.getElementById(tabsmenuid)
        var tabsmenu = this.tabsmenutree[tabsmenuid]
        var submenu = document.getElementById(submenuid)
        var submenu_divs = []

        tabsmenu.tabs = []
        tabsmenu.submenu = null
        tabsmenu.selected = 0;
        submenu._parentid = tabsmenuid
        tabsmenu.submenu = submenu //remember this DIV as menu's submenu container

        var innerdivs = submenu.getElementsByTagName("div")

        for (var i = 0; i < innerdivs.length; i++) {
            if (/tabsmenucontent/i.test(innerdivs[i].className)) {
                submenu_divs.push(innerdivs[i])
            }
        }
        //        innerdivs[this.tabsmenutree[tabsmenuid].selected].style.display = "block"

        var tablists = tabsMenuElement.getElementsByTagName("li")
        var tablinks = tabsMenuElement.getElementsByTagName("a")
        var submenuCount = 0;
        var tablinks_count = 0

        for (var i = 0; i < tablinks.length; i++) {
            var relattr = tablinks[i].getAttribute("rel")
            var classAttr = tablinks[i].getAttribute("class")

            tablinks[i]._parentid = tabsmenuid
            if (classAttr.indexOf("selected") != -1)
            {   tabsmenu.selected = tablinks_count}
            this.addEvent(tablinks[i], function() { mouseovertabsmenu.showsubmenu(this) }, "mouseover")
            if (/^gotsubmenu/i.test(relattr) && submenuCount < submenu_divs.length) //if "rel" attribute starts with="gotsubmenu" and a tab content exists for this tab based on its order
            {
                tabsmenu.tabs.push({ a: tablinks[i], li: tablists[i], subMenu: submenu_divs[submenuCount] }) //add this tab to tab collection
                submenuCount++
            }
            else //else for regular tab links (with no "rel" attribute)
            {
                tabsmenu.tabs.push({ a: tablinks[i], li: tablists[i], subMenu: null })
            }
            tablinks[i]._pos = tablinks_count

            this.addEvent(tablinks[i], function(e) //hide submenu contents when mouse rolls out of tab DIV
            {
                if (!mouseovertabsmenu.isContainedSub(this, e))
                //if (!mouseovertabsmenu.isContained(this, e))
                {
                    var cursubmenuobj = this
                    mouseovertabsmenu.hidesubmenu(cursubmenuobj._parentid)
                }
            }, "mouseout")

            tablinks_count++
        }
        if (disappearBool == true) {
            this.addEvent(submenu, function(e) //hide submenu contents when mouse rolls out of submenu DIV
            {
                if (!mouseovertabsmenu.isContained(this, e)) {
                    var cursubmenuobj = this
                    //                    this.hidetimer = setTimeout(function() { mouseovertabsmenu.hidesubmenu(cursubmenuobj._parentid) }, mouseovertabsmenu.disappeardelay)
                    mouseovertabsmenu.hidesubmenu(cursubmenuobj._parentid)
                }
            }, "mouseout")
        }
        this.greyTab(tabsmenu.tabs[tabsmenu.selected], false);
    }

}