var nav = {
  timer: 0,
  currentFocus: null,
  init: function () {
    $('ul#nav li ul').css('display', 'block').addClass('hidden');

    $('ul#nav li').hover(
      function () {
        nav.show($(this).children('ul'));
      },
      function () {
        nav.hide($(this).children('ul'));
      }
    );
    $('ul#nav li ul').hover(
      function () {
        nav.show($(this));
      },
      function () {
        nav.hide($(this));
      }
    );
    
    //keyboard access TODO: needs some more work for the blur/focus event!
    $('ul#nav li').focus(function () {
      nav.currentFocus = $(this);
      nav.show($(this).children('ul'));
    });
    $('ul#nav li').blur(function () {
      nav.hide(nav.currentFocus.children('ul'));
    });
    
  },
  hide: function (el) {
    nav.timer = setTimeout(function () {el.addClass('hidden');}, 500);
  },
  show: function (el) {
    clearTimeout(nav.timer);
    el.removeClass('hidden');
  }  
};

$(document).ready(function() {
  nav.init();
});