$(document).ready(function () {
   // store the initial subnav text
   var initialTabText = $("#SubNavArea").html();
   var changeNavText = "";
   var flagHovered = false;
   var newHover = false;
   var aLinkColour;

   $("ul#topnav li").hover(function () {
      newHover = true;
      changeNavText = $(this).find("span").html();
      $("#SubNavArea").html(changeNavText);

      // change the anchor colour
      
      aLinkColour = $(this).find("a").filter(':first').css('color');
      $(this).find("a").filter(':first').css({ color: '#FFF' });
   },

    function () { //on hover out...
       // allow delay if user continues down to sub nav to utilise the links

       // reset the link colour regardless of the submenu being shown
       $(this).find("a").filter(':first').css({ color: aLinkColour });

       newHover = false; // this will be set to true if user moves straight to a new tab

       setTimeout(function () {
          if (!flagHovered && !newHover) {
             $("#SubNavArea").html(initialTabText);
          }
       }, 100);
    });


   $("#SubNavArea").hover(function () {
      flagHovered = true;
   },

   function () { // hover out
      $("#SubNavArea").html(initialTabText);
      flagHovered = false;
   });

});