RealAge.MainNav = new function()
{
    /// <summary>
    /// Handles RealAge.com Main Navigation
    ///</summary>

    this.menuItems = [];
    
    // Top and Sub Nav Selections
    this.selectedTopNav = null;
    this.selectedSubNav = null;
    
    this.rolloverOccured = false;
    
    // Using a timer prevents multiple mouseover/mouseout calls (which causes blinking)
    this.mouseOutTimer = null;

    this.init = function()
    {
        /// <summary>
        /// Called when this class is instantiated.
        ///</summary>
        this.StartNav();
    }
    
    this.load = function()
    {
        /// <summary>
        /// Called when the page is loaded. 
        ///</summary>

        // If menu has been inited already, just hightlight nav
        // we do this because of a bug in IE which sometimes reports
        // the wrong position on init.
        if(this.menuItems.length > 0)
        {
            // This prevents a case where the user rolls over 
            // a nav element before pageload has occured.
            if(this.rolloverOccured == false) 
            {
                this.HighlightTopNav(this.selectedTopNav);
            }
        }
        else
        {
            // Nav not inited, so init now.
            this.StartNav();
        }
        
        // Verify there is a port (topnav selection) before adding resize event
        if((window.port) && (window.port != "none"))
        {
            var topNav = document.getElementById(window.port);

            // Verify the port name is an element name
            if(topNav)
            {
                // Verify that element is a topnav item
                if (RealAge.Utils.hasClassName(topNav, "topnav-item"))
                {
                    // Create Event to Reposition Topnav Selection on Window Resize
                    RealAge.Utils.addEvent(window, "resize", RealAge.Utils.createDelegate(this, new Function("this.HighlightTopNav('" + this.selectedTopNav + "')")));
                }
            }
        }
    }
    
    this.StartNav = function()
    {
        /// <summary>
        /// Sets up menu items and attaches menu mouse events.
        ///</summary>
        this.menuItems = RealAge.Utils.getElementsByClassName("topnav-item", document.getElementById("navigation"));
        this.AddMenuEvents();
    }
    
    this.AddMenuEvents = function()
    {
        /// <summary>
        /// Adds MouseOver / MouseOut Event Handlers to TopNav Menu Items. 
        /// Also, adds a resize event to the window.
        ///</summary>
        
        // Add MouseOver/MouseOut Events to Menu Items
        for(i=0;i<this.menuItems.length;i++)
        {
            RealAge.Utils.addEvent(this.menuItems[i],"mouseover", RealAge.Utils.createDelegate(this, new Function("this.TopNavMouseOver('" + this.menuItems[i].id + "')")));
            RealAge.Utils.addEvent(this.menuItems[i],"mouseout", RealAge.Utils.createDelegate(this,  new Function("this.BeginMouseOut('" + this.menuItems[i].id + "')")));
            
            // Is current item is the selected port
            if(this.menuItems[i].id == window.port)
            {
                // Save Selected TopNav Port
                this.selectedTopNav = window.port;
                
                // Highlight Current TopNav Port
                this.HighlightTopNav(this.selectedTopNav);
            }
        }
    }
    
    this.HighlightTopNav = function(topNavId)
    {
        /// <summary>
        /// Highlights current topnav section.
        ///</summary>

        if(topNavId)
        {    
            var topNav = document.getElementById(topNavId);

            RealAge.Utils.addClassName(topNav, "topnav-item-selected");
            RealAge.Utils.addClassName(topNav, "topnav-item-highlighted");

            var topNavSelect = document.getElementById("topnav-selected");
            topNavSelect.style.visibility = "visible";

            var topNavBounds    = RealAge.Utils.getBounds(topNav);
            
            // Set Position of Tab Shadows (Top Navigation)
            RealAge.Utils.setBounds(topNavSelect, topNavBounds.x - 15, topNavBounds.y + topNavBounds.height - 52, topNavBounds.width + 31, 50);
        }
    }
    
    this.TopNavMouseOver = function(topNavId)
    { 
        /// <summary>
        /// Highlights current topnav section.
        ///</summary>

        this.rolloverOccured = true;

        // If there is a mouseout timer running on another nav element, 
        // then call the mouseout on that element before proceeding
        if(this.mouseOutTimer != null && this.mouseOutTimer["id"] != topNavId)
        {
            // Call Mouseout immediately if timer was not for this element
            this.TopNavMouseOut(this.mouseOutTimer["id"]);
        }

        // If there is a mouseout timer running on THIS nav element,
        // then clear it before continuing
        if(this.mouseOutTimer != null)
        {
            window.clearTimeout(this.mouseOutTimer["timerId"]);
            this.mouseOutTimer = null;
        }
        
        // Get TopNav and SubNav Elements
        var topNav          = document.getElementById(topNavId);
        var subNav          = document.getElementById(topNavId + "-subnav")
        
        // If the TopNav that is being highlighted is also the selected TopNav,
        // then hide the existing highlight.
        if(this.selectedTopNav)
        {
            var selectedNav = document.getElementById(this.selectedTopNav);
            RealAge.Utils.removeClassName(selectedNav, "topnav-item-highlighted");
            var topNavSelect    = document.getElementById("topnav-selected");
            topNavSelect.style.visibility = "hidden";
        }
        
        RealAge.Utils.addClassName(topNav, "topnav-item-highlighted");
        
        // Get the iframe, shadow, and highlight elements
        var subNavIframe    = document.getElementById("topnav-iframe");
        var subNavShadow    = document.getElementById("subnav-shadow");
        var topNavHilite    = document.getElementById("topnav-highlight");
        
        var topNavBounds    = RealAge.Utils.getBounds(topNav);
        
        // Set Position of Tab Shadows (Top Navigation)
        RealAge.Utils.setBounds(topNavHilite, topNavBounds.x - 15, topNavBounds.y + topNavBounds.height - 52, topNavBounds.width + 31, 53);

        subNav.style.display = "block";

        var viewingAreaWidth    = RealAge.Utils.getViewportWidth();
        var subNavWidth         = RealAge.Utils.getWidth(subNav);
        var subNavXMax          = topNavBounds.x + subNavWidth;
        
        var newX = (topNavBounds.x + topNavBounds.width + 1) - subNavWidth;

        // Shadow Parameters
        var subnavShadowWidth = 2;
        var subnavShadowOffset = 4;
        
        // Determine if subnav should pop left, or right of the TopNav
        if((subNavXMax + subnavShadowWidth) > viewingAreaWidth)
            RealAge.Utils.setPosition(subNav, newX, topNavBounds.y + topNavBounds.height-1);
        else
            RealAge.Utils.setPosition(subNav, topNavBounds.x, topNavBounds.y + topNavBounds.height-1);

        var subNavBounds = RealAge.Utils.getBounds(subNav);
        RealAge.Utils.setBounds(subNavIframe, subNavBounds.x, subNavBounds.y, subNavBounds.width + subnavShadowWidth, subNavBounds.height + subnavShadowWidth);
        RealAge.Utils.setBounds(subNavShadow, subNavBounds.x + subnavShadowOffset + subnavShadowWidth, subNavBounds.y + subnavShadowWidth + subnavShadowOffset, subNavBounds.width - subnavShadowOffset, subNavBounds.height - subnavShadowOffset);

    }

    this.BeginMouseOut = function(topNavId)
    {
        /// <summary>
        /// Creates a timer that will call the mouseout event when the timer expires. 
        /// Use of the timer prevents multiple calls to mouseout when child elements 
        /// report a mouseout event. (Which caused blinking, and unnecessary calls to the code.)
        /// </summary>
        /// <remarks>
        /// The use of a timer for the mouseover, is needed because each child-element
        /// inside the top-nav div causes a mouseover/mouseout event. If we call mouseout on
        /// each of these events, it causes blinking due to unnecessary calls being made.
        /// Using a timer prevents this from happening. If it's a "real" mouseout then it will
        /// execute after the timer expires.
        /// </remarks>
        if(this.mouseOutTimer == null)
        {
            this.mouseOutTimer = {id:topNavId, timerId : window.setTimeout(RealAge.Utils.createDelegate(this,  new Function("this.TopNavMouseOut('" + topNavId + "')")), 50)};
        }
    }
    
    this.TopNavMouseOut = function(topNavId)
    {
        /// <summary>
        /// Handles mouseout event for the topnav elements. Called by mouseout timer.
        /// </summary>
        if(this.mouseOutTimer != null && this.mouseOutTimer["id"] == topNavId)
        {

            this.mouseOutTimer = null;
        
            var topNav = document.getElementById(topNavId);
            var subNav = document.getElementById(topNavId + "-subnav")

            // Hide Shadows on Mouse Out
            var subNavIframe        = document.getElementById("topnav-iframe");
            var subnavShadow        = document.getElementById("subnav-shadow");
            var topNavSelected      = document.getElementById("topnav-selected");
            var topNavHighlited     = document.getElementById("topnav-highlight");

            // Move All SubNav Elements Off Screen
            RealAge.Utils.setPosition(subNav,           -1000, -1000);
            RealAge.Utils.setPosition(topNavSelected,   -1000, -1000);
            RealAge.Utils.setPosition(topNavHighlited,  -1000, -1000);
            RealAge.Utils.setBounds(subNavIframe,       -1000, -1000, 10, 10);
            RealAge.Utils.setBounds(subnavShadow,       -1000, -1000, 10, 10);

            // Hide Subnav
            subNav.style.display = "none";

            // Remove Highlighted State        
            RealAge.Utils.removeClassName(topNav, "topnav-item-highlighted");
            
            // Make sure current TopNav is re-selected if necessary.
            this.HighlightTopNav(this.selectedTopNav);
        
        }
    }
    
    RealAge.Utils.registerClass(this, arguments);
}