(function($) {
  // Object to hold the menu options: this is the extended object 
  var options = [], menuWidth = 0;
  /**
   * Instatiate the primary navigation menu
   * @name $.fn.mymenu
   * @constructor
   * @param {Object} opts the options passed in when calling the object
   * @return the jQuery wrapper
   */
  $.fn.mymenu = function(opts) {
    var $menu = $(this);
    options = $.extend(/** @lends $ */{
      /**
       * menu delay speed
       * @type Number
       */
      delaySpeed: 100,
      /**
       * Menu fadein duration in ms
       * @type Number
       */
      fadeInDuration: 100,
      /**
       * Menu fadeout duration in ms
       * @type Number
       */
      fadeOutDuration: 100,
      /**
       * Make iframe shims transparent (needed if your 
           dropdowns have transparent or semi-transparent
           areas i.e. rounded corners)
       * @type Boolean
       */
      menuShimTransparency: false,
      /**
       * Number of Items in menu
       * @type Number
       */
      primaryNavItemsLength: null
    }, opts || {});
    //remove background (item devider) of 2nd-to-last menu item
    options.primaryNavItemsLength = $menu.children().size();
    $menu.children().eq(options.primaryNavItemsLength - 2).css('background-image', 'none');
    
    // Workaround for ie6 z-index bug -- search "iframe shim" for info
    // Using version because there's no jQuery.support property for
    var isIE6 = (jQuery.browser.msie && parseInt(jQuery.browser.version) == 6);
    if (isIE6) {
      var iframeShim = $(document.createElement("iframe")).addClass("shim");
      if (options.menuShimTransparency) {
        iframeShim.css({ 
          "filter": "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" 
        });
      }
    }
    
    // Only get items with an id beginning with "menu": this means it has a sub menu
    $menu.find('div[id^="menu"]').each(function(i, item) {
      var t;
      
      if($(item).hasClass('current')) {
        $(item).prev().addClass('previous');
      }

      var container = $(item).find('.navBarContentContainer');
      if (isIE6) {
        // Shim dimensions should match the div it's sitting behind
        var shim = iframeShim.clone(true).
              width(container.outerWidth(true)).
              height(container.outerHeight(true)).
              appendTo(item);
      }

      $(item).hover(
        function(e) {
          // Anonymous method to set highlighted state on tab, 
          // do fadein effect on flyout, etc.
          var $hoveritem = $(this);

          $hoveritem.
            addClass('hovered').
            prev().
            addClass('previous');
            
          if(!$hoveritem.hasClass('current')) {
            $('div.current').removeClass('current').addClass('currentOut');            
            $('div.currentOut').prev().removeClass('previous');  
          }
          
          t = window.setTimeout( function() {
            if ($hoveritem.find('.navBarContentContainer').queue().length<=1) {               
              $hoveritem.find('.navBarContentContainer').fadeIn(options.fadeInDuration);
              if (isIE6) {
                // the fade effects are actually binary on the shims :-/
                shim.fadeIn(options.fadeInDuration);
              }
            }
          }, options.delaySpeed);
        },      
        function(e) {
          // Anonymous method to remove highlight and do fadeout effect
          var $hoveritem = $(this);
          if (!$hoveritem.hasClass('current')) {
            $hoveritem.removeClass('hovered').prev().removeClass('previous');         
          } else {
            $hoveritem.removeClass('hovered');  
          }
          $('div.currentOut').removeClass('currentOut').addClass('current').prev().addClass('previous');
          $hoveritem.find('.navBarContentContainer').fadeOut(options.fadeOutDuration);
          if (isIE6) {
            shim.fadeOut(options.fadeOutDuration);
          }
          window.clearTimeout(t);
        }
      );
    });

    $menu.find('.navBarContentContainer').css('display', 'none'); 
    
    return this;
  };
})(jQuery);

$(document).ready( function(e) {
  $('#menu').mymenu();
});