$(document).ready(function(){
    //add a class to our main menu which we can use to target JS only CSS
    $('#MainMenu').addClass('doubleNav');
    
    //need to move nav items into grouping 'divs' otherwise IE flickers on hover
    
    var menuGroup1 = $('<div></div>').attr('id','MenuGroup1').appendTo('#MenuUL');
    
    $('#mainmenu-planningandenvironment, #mainmenu-communication').appendTo(menuGroup1);
    
    var menuGroup2 = $('<div></div>').attr('id','MenuGroup2').appendTo('#MenuUL');
    
    $('#mainmenu-connections, #mainmenu-design_construction').appendTo(menuGroup2);
    
    var menuGroup3 = $('<div></div>').attr('id','MenuGroup3').appendTo('#MenuUL');
    
    $('#mainmenu-the_project, #mainmenu-about').appendTo(menuGroup3);
    
    $('#MenuGroup1, #MenuGroup2, #MenuGroup3').hover(
        function(){
            $(this).addClass('active');
        },
        function () {
            $(this).removeClass('active');
        }
    );
    
    var group1a = $('#mainmenu-planningandenvironment ul');
    var group1b = $('#mainmenu-communication ul');
    
    var group2a = $('#mainmenu-connections ul');
    var group2b = $('#mainmenu-design_construction ul');
    
    var group3a = $('#mainmenu-the_project ul');
    var group3b = $('#mainmenu-about ul');
    
    //need to set uniform height on the UL's as well
    SetDoubleNavHeight(group1a,group1b);
    SetDoubleNavHeight(group2a,group2b);
    SetDoubleNavHeight(group3a,group3b);
});

function SetDoubleNavHeight(el1,el2){
    
    if(el1.height() < el2.height()){
        el1.css('height',el2.height());
    }
    else if(el2.height() < el1.height()){
        el2.css('height',el1.height());
    }
}