$(document).ready(function(){
    InitilizeMenu('#header-menu',400,'fade','fade');
    
    //submenu hover event
    var visibleUl=$('ul.sub-mainnav:visible');
    $('#header-menu ul.sub-mainnav').closest('li').hover(
        function(){
            if(visibleUl) {
                visibleUl.hide();
            }
            $(this).children('ul.sub-mainnav').stop(true,true).fadeIn().css('display','inline');
        },
        function(){
             $(this).children('ul.sub-mainnav').stop(true,true).hide();
             if(visibleUl) {
                 visibleUl.stop(true,true).fadeIn().css('display','inline');
             }
        }
    );

    //unbind the parent of the visible submenu so we don't have flicker
    visibleUl.parent().unbind('mouseenter').unbind('mouseleave');
    
    /* the following two functions create the nav events for menus and interactive buttons */
    function InitilizeMenu(parent,moveSpeed,inStyle,outStyle) {
        //var parentClass = $(parent).attr('class');
        $(parent).children('li').each(function() {
            //if($(this).children('ul:nth-child(1)').size() > 0) {
            //    InitilizeMenu($(this).find('ul:nth-child(1)').attr('class'),moveSpeed,inStyle,outStyle);
            //}
            var thisClass = $(this).attr('class');
            AttachNavEvents(parent,thisClass,moveSpeed,inStyle,outStyle);
            $(this).children('a:not(.current)').css({backgroundImage:'none'});
        });
    }
    
    function AttachNavEvents(parent,thisClass,moveSpeed,inStyle,outStyle) {
        $(parent+' .'+thisClass).hover(function() {
            $(this).append('<div class="nav-'+thisClass+'"></div>')
            switch(inStyle) {
                case 'slide':
                    $('div.nav-'+thisClass).css({display:'none'}).slideDown(moveSpeed);
                    break;
                case 'fade':
                    $('div.nav-'+thisClass).css({display:'none'}).fadeIn(moveSpeed);
                    break;
                case 'none':
                    $('div.nav-'+thisClass);
                    break;
                default:
                    $('div.nav-'+thisClass);
                    break;
            }
        },function(){
            switch(outStyle) {
                case 'slide':
                    $('div.nav-'+thisClass).slideUp(moveSpeed,function(){
                        $(this).remove();
                    });
                    break;
                case 'fade':
                    $('div.nav-'+thisClass).fadeOut(moveSpeed,function(){
                        $(this).remove();
                    });
                    break;
                case 'none':
                    $('div.nav-'+thisClass).remove();
                    break;
                default:
                    $('div.nav-'+thisClass).remove();
                    break;
            }
        });
    }
});