$(document).ready(function(){
  $.event.special.hover.delay = 50;
  $.event.special.hover.speed = 100;

  function hideCCCTopMenu(menuNumber){
    if($("#cursorInMenu"+menuNumber).val()==0
       && $("#cursorInMenuTitle"+menuNumber).val() == 0){

      $("div#topMenu"+menuNumber).hide();
      var re = new RegExp("on\.png");
      onImgSrc = $("li[rel="+menuNumber+"] img").attr("src");
      offImgSrc = onImgSrc.replace(re, "off.png");
      $("li[rel="+menuNumber+"] img").attr("src", offImgSrc);
      $("li[rel="+menuNumber+"]").css("z-index", 98);
    }
  }

  $(".first_lvl li").each(function(){
    var menuNumber = $(this).attr("rel");
    li =  $(this);
    var updateMenu = function() {hideCCCTopMenu(menuNumber);};
    $(this).bind( "hover", function () {
      var menuSelector = "div#topMenu"+menuNumber;

        var re = new RegExp("off\.png");
        offImgSrc = $(this).find("img").attr("src");
        onImgSrc = offImgSrc.replace(re, "on.png");
        $(this).find("img").attr("src", onImgSrc);
        $("li[rel="+menuNumber+"]").css("z-index", 99);

      $(menuSelector).toggle();
    });

    // When mouse leave the menu title, hide of the menu (only if cursor isn't in the menu)
    $(this).mouseenter(function(){
      $("#cursorInMenuTitle"+menuNumber).val(1);
      setTimeout(updateMenu, 2*$.event.special.hover.delay);
    });

    // Hides the menu if not in the menu title nor in the menu
    $(this).mouseleave(function(){
      $("#cursorInMenuTitle"+menuNumber).val(0);
      setTimeout(updateMenu, 2*$.event.special.hover.delay);
    });

    $("div#topMenu"+menuNumber).mouseenter(function(){
      $("#cursorInMenu"+menuNumber).val(1);
      setTimeout(updateMenu, 2*$.event.special.hover.delay);
    });

    // Hides the menu if the cursor leaves the div and is not in the title
    $("div#topMenu"+menuNumber).mouseleave(function(){
      $("#cursorInMenu"+menuNumber).val(0);
      setTimeout(updateMenu, 2*$.event.special.hover.delay);
    });
  });

});