// function to reposition mega menu popup
function repositionPopUps(tabLi) {
    var containerwidth = 949;
    var popupList = $(tabLi).children('ul');
    var buttonposition = $(tabLi).position();
    var buttonwidth = $(tabLi).width();
    var popupleftposition;
    // IE6 Fix for pop up width       
    var popupwidth;
    switch (popupList.children('li').size()) // count number of sub menus
    {
        case 1:
            popupwidth = '170px';
            break;
        case 2:
            popupwidth = '340px';
            break;
        case 3:
            popupwidth = '510px';
            break;
        case 4:
            popupwidth = '680px';
            break;
        default:
            popupwidth = '680px';
            break;
    }
    popupList.css('width', popupwidth);
    popupList.children('li').css('width', '160px');

    var childwidth = popupList.width();

    // if left position + the width of the child element > than the container width, offset the left to the difference
    if ((buttonposition.left + childwidth) > containerwidth) {
        popupleftposition = buttonposition.left - ((buttonposition.left + childwidth) - containerwidth) - 4;
        popupList.css('left', popupleftposition + 'px');
    }
    else {
        popupList.css('left', buttonposition.left + 'px');
    }
}

// Mega Menu jquery code
$(document).ready(function() {
    // change the class of the anchor tag when the user is hovering over the sub mega menu
    $('#megamenu ul.AspNet-MegaMenu ul').hover(
            function() {
                $(this).prev('a').addClass("megamenuNavHover");
            },
            function() {
                $(this).prev('a').removeClass("megamenuNavHover");
            }
        );

    // set the style for current category
    $('#megamenu ul.AspNet-MegaMenu > li.AspNet-MegaMenu-Selected > a').addClass('megamenuNavSelected');
    $('#megamenu ul.AspNet-MegaMenu > li.AspNet-MegaMenu-ChildSelected > a').addClass('megamenuNavSelected');

    // dynamically reposition child popups when page loads // Fix IE 6 repositioning
    $('#megamenu ul.AspNet-MegaMenu > li').each(
            function() {
                repositionPopUps(this);
            }
        );

    // show popup on the hover of a tab item
    $('#megamenu ul.AspNet-MegaMenu > li').hover(
              function() {
                  $(this).children('ul').css('visibility', 'visible');
                  $(this).children('ul').children('li').children('ul').css('visibility', 'visible');

              },
              function() {
                  $(this).children('ul').children('li').children('ul').css('visibility', 'hidden');
                  $(this).children('ul').css('visibility', 'hidden');
              }
            );

    $('#megamenu .AspNet-MegaMenu > li > ul').masonry({
        singleMode: true,
        itemSelector: '> li'
    });
});