/*
Author:     JBNN
Date:       08-02-15
Use:        These functions and variables are used for the new sliding dropdown menu for All Departments in top menu.
                They are dependant on prototype.js and scriptacoulus.js which should be initialized before this file.
*/

    var menuStatus = 'up';  // Parameter to determine whether menu is up or down and is changed when it is completely up/down
    var menuPos = 'goUp';           // Parameter to force menu to stay in position on mouseout/mouseover
    
    function callbackDownEnd(obj){
        menuStatus = 'down';
    }

    function callbackUpEnd(obj){
        menuStatus = 'up';
    }

    function callbackStart(obj){
        menuStatus = 'moving';
    }

    function menuSlideDown(){
        if(($('moreRoomsMenu').getStyle('display') == 'none') && (menuStatus == 'up')){
            // change status to prevent new call until the slide is done
            //trace('sliding down');
            Effect.SlideDown('moreRoomsMenu', {
                queue: 'end',
                duration: 0.7,
                beforeStart: callbackStart,
                afterFinish: callbackDownEnd
            });
        }
    }
    
    function menuSlideUp(){
        if(($('moreRoomsMenu').getStyle('display') == 'block') && (menuStatus == 'down')){
            // change status to prevent new call until the slide is done
            //trace('sliding up');
            Effect.SlideUp('moreRoomsMenu', {
                queue: 'end',
                duration: 0.5,
                beforeStart: callbackStart,
                afterFinish: callbackUpEnd
            });
        }
    }
    
    function menuSlideStart(){
        if(menuPos == 'goUp'){
            // If still 0 then no mouseover on menu, so close it
            menuSlideUp();
        }
        return menuPos;
    }
    
    function menuDelay(){
        //trace('mouse out...');
        menuPos = 'goUp';
        setTimeout('menuSlideStart()',500);
    }
    
    
    Event.observe(window, 'load', function() {

        // Add event listener to the div "main" to slide up the menu
        $('main').observe('mouseover', function(event){
            element = Event.element(event);
            myAncestors = element.ancestors();
            // Traverses the parents of current tag
            myAncestors.each(function(tag){
                if(tag.id == 'main'){
                    //trace('Im in: ' + tag.id);
                    menuSlideUp();
                    // Reset the background image for the moreRooms button
                    $('moreRooms').setStyle({
                        backgroundImage: 'url(../inc/080714/img/header/main_menu_bg.gif)'
                    });
                }
            });
        });
    
        // Add event listener to the div "moreRoomsMenu". This is used to check if user goes from menu button and then over the menu...or just leaves the menu button.
        $('moreRoomsMenu').observe('mouseover', function(event){
            element = Event.element(event);
            myAncestors = element.ancestors();
            // Traverses the parents of current tag
            myAncestors.each(function(tag){
                if(tag.id == 'moreRoomsMenu'){
                    menuPos = 'stayDown';
                    // Preserves the background image for the moreRooms button
                    $('moreRooms').setStyle({
                        backgroundImage: 'url(../inc/080714/img/header/main_menu_bg_hover.gif)'
                    });
                    //trace('Im in the menu ', menuPos);
                }
            });
        });

        // Add event listener to the menu button "moreRooms". This is used to check if user goes over the <span> with the arrow image. Then the menu should still stay down
        $('moreRooms').observe('mouseover', function(event){
            element = Event.element(event);
            if(element.tagName == 'SPAN'){
                menuPos = 'stayDown';
                //trace('Im going over the arrow', element.className);
            };
        });
        
        // Add event listener to the menu button "moreRooms". This is used to check if user goes out of the <span> with the arrow image. Then the menu should still stay down
        $('moreRooms').observe('mouseout', function(event){
            element = Event.element(event);
            if(element.tagName == 'SPAN'){
                menuPos = 'stayDown';
                //trace('Im leaving the arrow', element.className);
            };
        });

        // Add events to all menu buttons preceeding the moreRooms button, to slide the menu up on mouseover
        var myBtns = $('moreRooms').previousSiblings();
        myBtns.each(function(tag){
            tag.observe('mouseover', function(event){
                menuSlideUp();
            });
        })
    
    });