topmenu_sections = function (menuitems) {

    this.section_mapping = menuitems;

};

topmenu_sections.prototype = {

    init : function() {
        var sec_item;
        var _this = this;
        for(var i = 0; i <this.section_mapping.length; i++) {
            sec_item = this.section_mapping[i];
            var tab = document.getElementById(sec_item.tab);
            var sec = document.getElementById(sec_item.sec);
            if (tab != null && sec != null) {
                tab.onmouseover = function (e){ _this.ontabmouseover(this, e) };
                sec.onmouseover = function (e){ _this.onsecmouseover(this, e) };

                tab.onmouseout = function (e){ _this.ontabmouseout(this, e) };
                sec.onmouseout = function (e){ _this.onsecmouseout(this, e) };
            }
        }
    },
    
    getSectionForTab : function(tabId) {
        for(var i = 0; i <this.section_mapping.length; i++) {
            var sec_item = this.section_mapping[i];
            if (sec_item.tab == tabId)
                return sec_item.sec;
        }    
        return null;
    },
    getTabForSection : function(secId) {
        for(var i = 0; i <this.section_mapping.length; i++) {
            var sec_item = this.section_mapping[i];
            if (sec_item.sec == secId)
                return sec_item.tab;
        }    
        return null;
    },
    ontabmouseover : function (el, e) {

        var tabId = el.id;
        var secId = this.getSectionForTab(tabId);
        
        if (this.current_tabId != tabId) {
            el.className = 'topmenu-item-active';
            this.beginShowSection(tabId, secId);
        }
        else 
        {
            if (this.closeTimeout != null)
                clearTimeout(this.closeTimeout);
        }
    },
    onsecmouseover : function (el, e) {
        
        if (this.closeTimeout != null)
            clearTimeout(this.closeTimeout);
    },   
    ontabmouseout : function (el, e) {
        if (!e) var e = window.event;

        //alert (e);
        var tabId = el.id;
        var secId = this.getSectionForTab(tabId);
        var rt = e.relatedTarget || e.toElement;
        if (rt != null)
        {
            newtab = this.getparentTab(rt);
            if (newtab != null && newtab.id == tabId) return;
        }
        // hittest matching section 
        var sec = this.getparentSection(el);
        if (sec == null)
        {
            var _this = this;
            this.closeTimeout = setTimeout(function () {
                    _this.hidesection(secId);
                }, 500);
        }
    },
    onsecmouseout : function (el, e) {
        var secId = el.id;
        var _this = this;
        this.closeTimeout = setTimeout(function () {
                _this.hidesection(secId);
            }, 500);
    },
    
    beginShowSection : function (tabId, secId) {
        if (this.current_sectionId != null)
            this.hidesection(this.current_sectionId);
        if (this.slidingSectionId != null)
        {
            if (this.slidingSectionId == secId) 
                return;
            else 
                this.hidesection(this.slidingSectionId);
        }
        clearInterval(this.slideinterval);

        this.slidingSectionId = secId;
        var section = document.getElementById(secId); 
        section.style.height = "0px";
        section.style.display = "block";
        var _this = this;
        var delta = 30;
        this.slideinterval = setInterval(
			function() { _this.slideSection(section, 50, tabId, secId); },
			10 /* 5 secs */
			);
    },
    
    slideSection : function(section, delta, tabId, secId) {
        var h = parseInt(section.style.height);
        if (h >= 206)
        {
            // stop animation 
            clearInterval(this.slideinterval);
            section.style.height = "300px";
            this.current_tabId = tabId;
            this.current_sectionId = secId;
            this.slidingSectionId = null;
        }
        else 
        {
            h += delta;
            section.style.height = h +"px";
        }
    },
    
    showsection: function(tab_id, sec_id) {
        this.current_tabId = tab_id;
        this.current_sectionId = sec_id;
        var section = document.getElementById(sec_id); 
        section.style.display = 'block';
    },
    hidesection: function(sec_id) {
        var tabId = this.getTabForSection(sec_id);
        var tab = document.getElementById(tabId);
        if (tab != null) tab.className = 'topmenu-item';
        
        clearTimeout(this.closeTimeout);
        this.current_tabId = null;
        this.current_sectionId = null;    
        var section = document.getElementById(sec_id); 
        section.style.display = 'none';
    },
    
    getparentTab : function(el) {
        while (el != null) {
            if (el.className == 'topmenu-item' || el.className == 'topmenu-item-active') {
                return el;
            }
            el = el.parentNode ;
        }
        return null;
    },
    getparentSection : function(el) {
        while (el != null) {
            if (el.className == 'top-menu-section')
                return el;
            el = el.parentNode ;
        }
        return null;
    }
    
    
};