$(function() {
  var DELAY = 1000;
  var tab = $("#searchTab");
  var box = $("#navSearchBox");
  var timeout = null;
  
  tab.mouseleave(function() {
    timeout = setTimeout(function() {
      box.animate({width: "0px"}, "fast", function() {
        box.css("display", "none");
      });
    }, DELAY);
  });
  
  tab.mouseenter(function(evt) {
    clearTimeout(timeout);
    box.css("display", "inline");
    box.animate({width: "201px"}, "fast");
  });
});