$(document).ready(function(){

  // each dropdown has its own timeout, named after the parent li class
  var hideTimer = new Array();

  $("#mainmenu > li").hover(
    function () {
      var submenu = $(this).find("ul:first");

      // 1. find the position, size and margin for the parent li
      var pos = $(this).position();
      var height = $(this).height();
      var leftmargin = $(this).css("margin-left").replace('px', '');
      var topMargin = $(this).css("margin-top").replace('px', '');
      var bottomMargin = $(this).css("margin-bottom").replace('px', '');
      var x = pos.left + parseInt(leftmargin);
      var y = pos.top + height + parseInt(topMargin) + parseInt(bottomMargin) + 1;

      // 2. position the popup
      submenu.css('left', x+'px');
      submenu.css('top', y+'px');

      // 3. apply special style rules
      $("#mainmenu > li > ul").each(function() {
        $(this).find("li:first").css('border', 'none');
      });
      /*
      $("#mainmenu > li > ul > li").each(function() {
        var url = $(this).find('a').attr('href');
        $(this).css('cursor', 'pointer');
        $(this).click(function() {
          window.location = url;
        });
      });
      */

      // 4. cancel any pending hide operations and show the menu
      var intervalKey = $(this).attr('class');
      clearInterval(hideTimer[intervalKey]);
      submenu.fadeIn(300);
    },
    function () {
      // insert a short delay before hiding
      var submenu = $(this).find("ul:first");
      var intervalKey = $(this).attr('class');
      hideTimer[intervalKey] = window.setTimeout(function() {
        submenu.hide();
      }, 250);
    }
  );

  // 3rd level menus
  $("#mainmenu > li > ul > li").hover(
    function () {
      var submenu = $(this).find("ul:first");

      // 1. find the position, size and margin for the parent li
      var pos = $(this).position();
      var width = $(this).width();
      var leftmargin = $(this).css("margin-left").replace('px', '');
      var topMargin = $(this).css("margin-top").replace('px', '');
      var bottomMargin = $(this).css("margin-bottom").replace('px', '');
      var x = pos.left + width + parseInt(leftmargin) + 16;
      var y = pos.top + parseInt(topMargin) + parseInt(bottomMargin);

      // 2. position the popup
      submenu.css('left', x+'px');
      submenu.css('top', y+'px');

      // 3. apply special style rules
      $("#mainmenu > li > ul > li > ul").each(function() {
        $(this).find("li:first").css('border', 'none');
      });
      /*
      $("#mainmenu > li > ul > li > ul > li").each(function() {
        var url = $(this).find('a').attr('href');
        $(this).css('cursor', 'pointer');
        $(this).click(function() {
          window.location = url;
        });
      });
      */

      // 4. cancel any pending hide operations and show the menu
      var intervalKey = $(this).attr('class');
      clearInterval(hideTimer[intervalKey]);
      submenu.fadeIn(300);
    },
    function () {
      // insert a short delay before hiding
      var submenu = $(this).find("ul:first");
      var intervalKey = $(this).attr('class');
      hideTimer[intervalKey] = window.setTimeout(function() {
        submenu.hide();
      }, 250);
    }
  );


  /*
   *  Submenu rollover effect
   */
  $("#mainmenu > li > ul > li").hover(
    function () {
      $(this).css('background-color', '#9B009B');
    },
    function () {
      $(this).css('background-color', 'transparent');
    }
  );
  $("#mainmenu > li > ul > li > ul > li").hover(
    function () {
      $(this).css('background-color', '#9B009B');
    },
    function () {
      $(this).css('background-color', 'transparent');
    }
  );

});