/***********************************
* main-nav.js
*
* Defines various events on the main navigation 
*
* Warning: These v2 event handlers turned into a 
* nightmare pretty fast with all of the special
* cases to handle
* 
* @author eculver
* @version 1.0
* @since 09/26/08
************************************/

// when the page is done loading, apply these to the DOM
$(document).ready(function(){
    $("#main-nav-upper > div.main-nav-upper-active").hover(
        function () {
            $(this).removeClass("main-nav-upper-active");
            $(this).addClass("hover");
            //$(this).css("background", "transparent url("+WEBROOT+"/images/upper_nav_bg_over.gif) repeat-x center");
        }, 
        function () {
            $(this).removeClass("hover");
            $(this).addClass("main-nav-upper-active");
            /*
            if($(this).hasClass("main-nav-upper-active"))
                $(this).css("background", "transparent url("+WEBROOT+"/images/upper_nav_bg_on.gif) repeat-x center");
            else
                $(this).css("background", "transparent url("+WEBROOT+"/images/upper_nav_bg.gif) repeat-x center");
            */
        }
    );
    
    $("#main-nav-upper > div.main-nav-upper-inactive").hover(
        function () {
            $(this).addClass("hover");
            //$(this).css("background", "transparent url("+WEBROOT+"/images/upper_nav_bg_over.gif) repeat-x center");
        }, 
        function () {
            $(this).removeClass("hover");
            /*
            if($(this).hasClass("main-nav-upper-active"))
                $(this).css("background", "transparent url("+WEBROOT+"/images/upper_nav_bg_on.gif) repeat-x center");
            else
                $(this).css("background", "transparent url("+WEBROOT+"/images/upper_nav_bg.gif) repeat-x center");
            */
        }
    );
    
    var mainNavElementGroups = $('.nav-element-group');
    
    // iterate over all nav element group children to assign states.
    for(var i=0; i<mainNavElementGroups.length; i++) {
        // get this nav groups children
        var navGroupChildren = $(mainNavElementGroups[i]).children("div");

        // nav element id is always present as the first child's id
        var navElementId = $(navGroupChildren[0]).attr("id");
                
        // iterate over the children, assigning events to each as encountered
        for(var j=0; j<navGroupChildren.length; j++) {
            // assign events nav element that has no children
            if($(navGroupChildren[j]).hasClass("nav-element-no-children")) {
                $(navGroupChildren[j]).hover(
                    function() {
                        $(this).addClass("nav-element-no-children-on");
                    },
                    function() {
                        $(this).removeClass("nav-element-no-children-on");
                    }
                );
            }
            
            // assign events to nav element that has children (and drop button)
            else if($(navGroupChildren[j]).hasClass("nav-element")) {
                $(navGroupChildren[j]).hover(
                    function() {
                        var id = $(this).attr("id");
                        $(this).addClass("nav-element-on");
                        $("#"+id+"-drop").addClass("nav-element-drop-hover");
                    },
                    function() {
                        var id = $(this).attr("id");
                        
                        // don't hover off if subnav is showing
                        if(!$("#"+id+"-subnav-elements").hasClass("subnav-elements-on")) {
                            $(this).removeClass("nav-element-on");
                            $("#"+id+"-drop").removeClass("nav-element-drop-hover");
                        }
                        
                        // make sure drop button is still set to on
                        else {
                            $("#"+id+"-drop").addClass("nav-element-drop-hover");
                        }
                    }
                );
            }
            
            // assign events to drop button (hover, click)
            else if($(navGroupChildren[j]).hasClass("nav-element-drop")) {
                $(navGroupChildren[j]).hover(
                    function() {
                        var id = $(this).attr("id").replace("-drop", "");
                        $("#"+id).addClass("nav-element-on");
                        $(this).addClass("nav-element-drop-hover-hover");
                    },
                    function() {
                        var id = $(this).attr("id").replace("-drop", "");
                        
                        // don't hover off nav element if subnav is showing
                        if(!$("#"+id+"-subnav-elements").hasClass("subnav-elements-on")) {
                            $("#"+id).removeClass("nav-element-on");
                        }
                        
                        // make sure drop button is still set to on
                        else {
                            $(this).addClass("nav-element-drop-hover");
                        }
                        
                        $(this).removeClass("nav-element-drop-hover-hover");
                    }
                ).click(
                    function() {
                        var id = $(this).attr("id").replace("-drop", "");
                        
                        // subnav is on, turn it off
                        if($("#"+id+"-subnav-elements").hasClass("subnav-elements-on")) {
                            $("#"+id+"-subnav-elements").removeClass("subnav-elements-on");
                            
                            // remove parent on state if not still being hovered
                            if(!$("#"+id+"-drop").hasClass("nav-element-drop-hover-hover")) {
                                $("#"+id).removeClass("nav-element-on");
                            }
                            
                            // remove drop button state
                            $("#"+id+"-drop").removeClass("nav-element-drop-hover");
                        }
                        
                        // subnav is off, turn all others off and this one on
                        else {
                            // turn off all other's parent and drop button on states
                            $(".nav-element").removeClass("nav-element-on");
                            $(".nav-element-drop").removeClass("nav-element-drop-hover");
                            
                            // turn off all others
                            $(".subnav-elements").removeClass("subnav-elements-on");
                            
                            // turn this one on
                            $("#"+id+"-subnav-elements").addClass("subnav-elements-on");
                            
                            // add parent on state
                            $("#"+id).addClass("nav-element-on");
                        }
                    }
                );
            }
        }
    }
    
    // assign hover events to subnav items
    $('.subnav-element').hover(
        function() {
            $(this).addClass("subnav-element-hover");
        },
        function() {
            $(this).removeClass("subnav-element-hover");
        }
    );
});