/**
 *
 * JaxMenu Module v1.1
 * Requires the Jax JavaScript Library
 *
 * Prototype for the JaxMenu object and its methods and properties.
 *
 * The 'menus' parameter is an array of objects that holds the desired
 * properties of the menu elements (id, x-coor, y-coor, width and height.)
 * The x and y coordinates are adjustment values for the positioning of
 * the menu element from the left and top of the screen. The width and
 * height are only necessary for the 'wipe' action.
 *
 * The optional 'pgW' parameter is a compensation for a centered page of
 * a certain width. The 'gutter' property is calculated from this to
 * maintain the menus correctly centered in the middle of the page.
 *
 * The optional 'act' parameter simply to either fade or wipe a menu on to
 * and off of the screen. Just leave blank if you want the menu to just
 * automatically show and disappear with no effect. The 'wipe' value only
 * effects a vertical wipe of the menu.
 *
 * @param Array menus = [
 *                        {id : 'menu1Nav', x : 20, y : 36, w : 160, h : 112},
 *                        {id : 'menu2Nav', x : 110, y : 36, w : 160, h : 112},
 *                        {id : 'menu3Nav', x : 200, y : 36, w : 160, h : 112}
 *                      ];
 * @param int   pgW = 980;
 * @param int   act = 'fade'|'wipe'|'slideY'|'slideX';
 */

function JaxMenu(menus, pgW, act) {

    this.menus = menus;
    this.menuFx = new JaxFx();
    this.pgWidth = (pgW != null) ? pgW : 0;
    this.action = (act != null) ? act : null;
    this.gutter = 0;
    this.menuTop = 0;
    this.scrollOffset = 0;
    this.menuOpen = null;

    // method to initialize the menus
    this.initMenus = function() {

        // Set the gutter of the page
        this.gutter = (this.pgWidth != 0) ? ((document.body.clientWidth - this.pgWidth) / 2) : 0;

        // Establish the menu positions
        for (i = 0; i < this.menus.length; i++) {

            this.menuTop = this.menus[i].y;
            div = document.getElementById(this.menus[i].id);
            div.style.top = this.menuTop + 'px';
            div.style.left = (this.gutter + this.menus[i].x) + 'px';

            if (this.action == 'fade') {
                brws = new JaxBrowser;
                if (brws.browser == 'MSIE') {
                    div.style.filter = 'alpha(opacity=0)';
                } else {
                    div.style.opacity = 0;
                }
            } else if (this.action == 'wipe') {
                div.style.height = '0px';
            } else if (this.action == 'slideY') {
                div.style.top = '-' + this.menus[i].h + 'px';
            } else if (this.action == 'slideX') {
                div.style.left = '-' + this.menus[i].w + 'px';
            }

        }

    };

    // Method to show a menu
    this.showMenu = function(div) {

        // Re-initialize the menus based on any new window sizing or scrolling
        this.initMenus();

        // Set the menuOpen variable and display the current menu
        this.menuOpen = div;
        if (this.action == 'fade') {
            this.menuFx.fade(div, 100, 15, 20);
        } else if (this.action == 'wipe') {
            this.menuFx.wipeUp(div, this.getHeight(div), 10, 15);
        } else if (this.action == 'slideY') {
            this.menuFx.show(div);
            this.menuFx.move(div, parseInt(document.getElementById(div).style.left), this.getY(div), 10, 15);
        } else if (this.action == 'slideX') {
            this.menuFx.show(div);
            this.menuFx.move(div, this.getX(div), parseInt(document.getElementById(div).style.top), 10, 15);
        } else {
            this.menuFx.show(div);
        }

    };

    // Method to hide a menu
    this.hideMenu = function(div) {
        this.menuOpen = '';
        if (this.action == 'fade') {
            this.menuFx.fade(div, 0, 15, 20);
        } else if (this.action == 'wipe') {
            this.menuFx.wipeUp(div, 0, 10, 15);
        } else if (this.action == 'slideY') {
            this.menuFx.move(div, parseInt(document.getElementById(div).style.left), '-' + this.getHeight(div), 10, 15);
        } else if (this.action == 'slideX') {
            this.menuFx.move(div, '-' + this.getWidth(div), parseInt(document.getElementById(div).style.top), 10, 15);
        } else {
            this.menuFx.hide(div);
        }
    };

    // Function to hide all menus
    this.hideAll = function(div) {
        for (i = 0; i < this.menus.length; i++) {
            this.menuFx.hide(this.menus[i].id);
        }
    };

    // Function to check for the mouse outside of a menu and close that menu
    this.checkMenu = function(event) {

        if (this.menuOpen != null) {
            // Set the boundaries of the current open menu (top X,Y and bottom X,Y) to detect if the mouse is outside of the menu
            // There's about a 30px pad to allow for some cushion as the mouse rolls out of the menu area
            this.currentMenuOpen = document.getElementById(this.menuOpen);
            if (this.currentMenuOpen != null) {
                this.topXCoor = this.currentMenuOpen.offsetLeft - 300;
                this.topYCoor = this.currentMenuOpen.offsetTop - 100 - this.scrollOffset;
                this.bottomXCoor = this.currentMenuOpen.offsetLeft + this.currentMenuOpen.offsetWidth + 100;
                this.bottomYCoor = this.currentMenuOpen.offsetTop + this.currentMenuOpen.offsetHeight + 100 - this.scrollOffset;

                if (navigator.appName.indexOf('Microsoft') != -1) {
                    if ((window.event.clientX > this.bottomXCoor) || (window.event.clientX < this.topXCoor) || (window.event.clientY < this.topYCoor) || (window.event.clientY > this.bottomYCoor)) {
                        this.hideMenu(this.menuOpen);
                    }
                } else {
                    if ((event.clientX > this.bottomXCoor) || (event.clientX < this.topXCoor) || (event.clientY < this.topYCoor) || (event.clientY > this.bottomYCoor)) {
                        this.hideMenu(this.menuOpen);
                    }
                }
            }

        }

    };

    this.getX = function(div) {
        hgt = 0;
        for (i = 0; i < this.menus.length; i++) {
            if (menus[0].id = div) {
                return menus[0].x;
            }
        }
    };

    this.getY = function(div) {
        hgt = 0;
        for (i = 0; i < this.menus.length; i++) {
            if (menus[0].id = div) {
                return menus[0].y;
            }
        }
    };

    this.getWidth = function(div) {
        hgt = 0;
        for (i = 0; i < this.menus.length; i++) {
            if (menus[0].id = div) {
                return menus[0].w;
            }
        }
    };

    this.getHeight = function(div) {
        hgt = 0;
        for (i = 0; i < this.menus.length; i++) {
            if (menus[0].id = div) {
                return menus[0].h;
            }
        }
    };

}