/*

    HOW TO USE
    ----------

    1. include files 'emerciv_dropmenu.js' and 'emerciv_dropmenu.css' in html header
    2. for primary menu elements, add class 'emenu' and set tag's rel='{id}' where {id} is the id of the dropdown.
    3. for dropdowns, add class 'edropdown' and give it a unique id. they can be placed anywhere

    You can add any other classes to the menus and dropdowns for styling

*/


var drop_speed = 40;
// the speed in which the panels drop down. higher numbers are faster

var close_speed = 80;
// the speed in which the panels roll back up

var delay_before_closing = 2;
// how long to wait after the user rolls off the menu





// NO NEED TO CHANGE ANYTHING BELOW THIS LINE
// ------------------------------------------

function _em_add_event(el, evname, func){
    try{
        if(el.attachEvent){
            el.attachEvent('on'+evname, func);
        } else if(el.addEventListener){
            el.addEventListener(evname, func, true);
        } else {
            el['on'+evname] = func;
        }
    } catch (error){}
}


function _emerciv_dropmenu(){
    this.menus = [];
    this.dropdowns = [];
    this.dropheights = [];
    this.timer = window.setInterval(_emenu_update, 20);
    this.started = false;
    this.is_setup = false;
    this.currentmenu = -1;
    this.delaycount = 0;
    this.resizecount = 0;
    this.showing_all = false;

    this.update = function(){
        if(this.started){
            if(this.showing_all){return;}
            if(this.resizecount > 0){
                this.resizecount--;
                if(this.resizecount == 0){this.doresize();}
                return;
            }
            if(this.currentmenu == -1 && this.delaycount > 0){
                this.delaycount--;
            } else {
                for(var i = 0; i < this.menus.length; i++){
                    if(i == this.currentmenu){
                        // showing
                        if(this.dropdowns[i].style.display == 'none'){
                            this.dropdowns[i].style.height = '1px';
                            this.dropdowns[i].style.display = 'block';
                        } else if(this.dropdowns[i].offsetHeight < this.dropheights[i]){
                            var h = this.dropdowns[i].offsetHeight + drop_speed;
                            if(h > this.dropheights[i]){h = this.dropheights[i];}
                            this.dropdowns[i].style.height = '' + h + 'px';
                        }

                    } else if (this.dropdowns[i].style.display != 'none'){
                        // hiding
                        var h = this.dropdowns[i].offsetHeight - close_speed ;
                        if(h > 0){
                            this.dropdowns[i].style.height = '' + h + 'px';
                        } else {
                            this.dropdowns[i].style.display = 'none';
                        }
                    }
                }
            }
        }
    }

    this.setup = function(){
        var n = document.getElementsByTagName('body')[0];
        this.setupnode(n);
        this.started = true;
        _em_add_event(n, 'unload', _em_unload);
        _em_add_event(window, 'resize', _em_resize);
    }

    this.setupnode = function(n){
        if(n.className && n.className.match(/emenu/)){
            var reltag = (n.rel) ? n.rel : n.childNodes[0].rel;
            var dnode = document.getElementById(reltag);
            if(dnode){
                this.menus.push(n);
                this.dropdowns.push(dnode);
                dnode.style.display = 'block';
                this.dropheights.push(dnode.offsetHeight);

                var id = this.menus.length - 1;
                _em_add_event(n, 'mouseover', function(){_emenu_mouseover(id);});
                _em_add_event(n, 'mouseout', function(){_emenu_mouseout(id);});
                this.addDropEvent(dnode, id);
                this.positionNode(dnode, n);
                dnode.style.display = 'none';
            }
        }
        for(var i = 0; i < n.childNodes.length; i++){
            this.setupnode(n.childNodes[i]);
        }
    }

    this.addDropEvent = function(n, id){
        _em_add_event(n, 'mouseover', function(){_emenu_mouseover(id);});
        _em_add_event(n, 'mouseout', function(){_emenu_mouseout(id);});
        for(var i = 0; i < n.childNodes.length; i++){
            this.addDropEvent(n.childNodes[i], id);
        }
    }

    this.positionNode = function(dropnode, anchornode){
        var x = this.getXPos(anchornode);
        var y = this.getYPos(anchornode);
        y += anchornode.offsetHeight;

        var x2 = this.getXPos(dropnode);
        var y2 = this.getYPos(dropnode);

        dropnode.style.left = '' + (x - x2) + 'px';
        dropnode.style.top = '' + (y - y2) + 'px';
    }

    this.getXPos = function(n){
        if(!n){return 0;}
        var x = n.offsetLeft ;
        if(n != document.getElementsByTagName('body')[0]){
            x += this.getXPos(n.offsetParent);
        }
        return x;
    }

    this.getYPos = function(n){
        if(!n){return 0;}
        var y = n.offsetTop;
        if(n != document.getElementsByTagName('body')[0]){
            y += this.getYPos(n.offsetParent);
        }
        return y;
    }

    this.mouseover = function(i){
        this.currentmenu = i;
        if(this.menus[i].className && !this.menus[i].className.match(/emenuover/)){ this.menus[i].className += ' emenuover'; }
    }
    this.mouseout = function(i){
        if(this.currentmenu >= 0){this.menus[this.currentmenu].className = this.menus[this.currentmenu].className.replace(/ emenuover/, '');}
        this.delaycount = delay_before_closing;
        this.currentmenu = -1;
    }

    this.stopTimer = function(){
        window.clearInteral(this.timer);
    }

    this.resize = function(){
        this.resizecount = 5;
    }

    this.doresize = function(){
        for(var i= 0; i < this.menus.length; i++){
            this.dropdowns[i].style.display = 'block';
            this.dropdowns[i].style.left = '0px';
            this.dropdowns[i].style.top = '0px';
            this.positionNode(this.dropdowns[i], this.menus[i]);
            this.dropdowns[i].style.display = 'none';
        }
    }

    this.show = function(){
        this.showing_all = (this.showing_all) ? false : true;
        for(var i= 0; i < this.dropdowns.length; i++){
            this.dropdowns[i].style.display = 'block';
        }

    }

}
function _emenu_update(e){_emenu.update();}
function _emenu_mouseover(id){_emenu.mouseover(id);}
function _emenu_mouseout(id){_emenu.mouseout(id);}
function _em_unload(e){_emenu.stopTimer();}
function _em_resize(e){_emenu.resize();}
function _em_setup(e){_emenu.setup();}
var _emenu = new _emerciv_dropmenu();
_em_add_event(window, 'load', _em_setup);