/// <reference path ="/Scripts/jquery-1.4.1-vsdoc.js />

// extend jquery

$.fn.menuSetTier2Width = function (smallWidth, bigWidth) {
    $(this).has('li').each(function (index, item) {
        // go tiers down funkt nicht
       // $(item).menuSetTier2Width(smallWidth, bigWidth);
        // TIER 2
        $(item).find("ul").each(function (subIndex, subItem) {
            // TIER 2 UL // SET TIER 2 with
            if ($(subItem).outerWidth() > smallWidth) {
                $(subItem).width(bigWidth);
            }
            else {
                $(subItem).width(smallWidth);
            }
        });
    });
};

$(document).ready(
      function () {

          // Set menu Visible ( jquery loading workaround => display fehler lang gezogenes menu
          $('.pre_menu').hide();
          $('.menu').show();

          // var
          var tier1 = $('.menu ul li');
          var tier2 = $('.menu ul li li');
          var imgWidthBig = 300;
          var imgWidthSmall = 170;

          var isBig = false;

          var imgBigActive = 'url(/Controls/Images/menu/bg_tier2_active.png)';
          var imgBigNormal = 'url(/Controls/Images/menu/bg_tier2.png)';

          var imgSmallActive = 'url(/Controls/Images/menu/bg_tier2_small_active.png)';
          var imgSmallNormal = 'url(/Controls/Images/menu/bg_tier2_small.png)';
          // ------------------------------------------------------------------------------------ //
          // TIER 1 => underline
          //$(tier1).hover(function () {
          //    $(this).addClass('menuActiveHover');
          //},
          //function () {
          //    $(this).removeClass('menuActiveHover');
          //});
          // ------------------------------------------------------------------------------------ //
          // TIER 2 Größen angleichen
          $(tier1).menuSetTier2Width(imgWidthSmall, imgWidthBig);
          // TIER 2 => FADE EFFECT
          $(tier2).hover(function () {
              $(this).fadeTo('fast', 0.90);
              if ($(this).outerWidth() > imgWidthSmall) {
                  $(this).css('background-image', imgBigActive);
              } else {
                  $(this).css('background-image', imgSmallActive);
              }
          },
          function () {
              $(this).fadeTo('fast', 100);
              if ($(this).outerWidth() > imgWidthSmall) {
                  $(this).css('background-image', imgBigNormal);
              } else {
                  $(this).css('background-image', imgSmallNormal);
              }
          });
      }
    );