var SubMenus= ['FeaturesSub', 'CreativeSub', 'BuiltInSub',  'AccessoriesSub', 'VideoSub'];
                    
                 //loop through the menus and do what we want to them

                var hideDelay = 10;
                var timerID= [];
                
                function HideMenu(MainMenuItem, SubMenuItem)
                {
                   
                    SubMenuItem.style.display = 'none';
                }
                
                function SetHideTime(MainMenuItem, SubMenuItem)
                {
                    timerID[timerID.length] = setTimeout(function () {HideMenu(MainMenuItem, SubMenuItem)}, hideDelay); 
                }  
                
                function CancelTimer()
                {
                    for (var i=0; i<timerID.length; i++)
                    {
                        clearTimeout(timerID[i]);
                    }
                }
            
               
                function ShowMenu(CallerName, MenuName)
                {
                    //Set all the other menus to not show
                    for (x in SubMenus) {
                   
                        document.getElementById(SubMenus[x]).style.display = 'none';
                    }
                    
                    var Caller = document.getElementById(CallerName);
                    
                 
                    var menu = document.getElementById(MenuName);
                    
                            
                    if (menu)
                    {
                    
                        if (window.addEventListener)
                        { 
                            //Modern non-ie browsers
                            Caller.parentNode.addEventListener("mouseout", function () {SetHideTime(Caller, menu);}, false);
                            Caller.parentNode.addEventListener("mouseover", function() {CancelTimer();}, false);
                            Caller.addEventListener("mouseover", function() {CancelTimer();}, false);
                            menu.addEventListener("mouseout", function () {SetHideTime(Caller, menu);}, false);
                            menu.addEventListener("mouseover", function() {CancelTimer();}, false);
                            
                          
                            
                        } else if (window.attachEvent) {
                            //IE
                            Caller.parentNode.attachEvent("onmouseout", function () {SetHideTime(Caller, menu);});
                            Caller.parentNode.attachEvent("onmouseover", function() {CancelTimer();});
                            Caller.attachEvent("onmouseover", function() {CancelTimer()});
                            menu.attachEvent("onmouseout", function () {SetHideTime(Caller, menu);});
                            menu.attachEvent("onmouseover", function() {CancelTimer()});
                          
                        }
                    
                        menu.style.display='block';
                        
                        //We want to center the menu on the calling text
                        //So we need to get the width of the calling text
                        var CallerWidth = Caller.offsetWidth;
                        var SubMenuLeft = getXOffet(Caller);
                     
                        //Now we need to align the centers, so take the offset of the calling item
                        //and subtract the 1/2 the width of the menu item and 1/2 the width
                        //of the calling item
                        SubMenuLeft = SubMenuLeft - (menu.offsetWidth/2 - CallerWidth/2);
                       
                        //Set the left position of the sub menu
                        menu.style.left = SubMenuLeft + 'px';
                        
                
                        //Set the height 
                        menu.style.top = getYOffet(Caller) + 30 +  'px';
                    }
                }
                
                 
                function getYOffet(element)
                {
                    var y = 0
                    while (element)
                    {
                        
                        y += element.offsetTop;
                        element = element.offsetParent;
                    }
                    return y;
                    
                }
                
                function getXOffet(element)
                {
                    var x = 0
                    while (element)
                    {
                        
                        x += element.offsetLeft;
                        element = element.offsetParent;
                    }
                    return x;
                    
                }