var $ = require('jquery');
var debounce = require('../debounce.js');

function subnav() {
    var subnav = $(this);

    // Equalize List Items Width
    var subnavList = subnav.find('.subnav__list');
    var subnavItems = subnav.find('.subnav__item');
    var numberOfListItems = subnavItems.length;

    // This is a handcrafted threshold to avoid animations by only a few pixels
    var animationThreshold = 10;

    function equalizeListItemsWidth() {
        var listWidth = subnavList.width();
        var activeItem;

        // check if current/hover exists
        subnavItems.each(function() {
            var $el = $(this);

            if ($el.hasClass('hover')) {
                activeItem = $el;
                return false;
            }
        });

        if (!activeItem) {
            subnavItems.width(listWidth / numberOfListItems);
        } else {
            var currentWidth = activeItem.width();
            var text = activeItem.find('.subnav__text');
            var activeWidth = activeItem.find('.subnav__text').width() + parseFloat(text.css('margin-left')) + parseFloat(text.css('margin-right'));

            if (activeWidth - animationThreshold <= currentWidth) {
                return;
            }

            function width(el) {
                var width = 0;

                el.each(function() {
                    width += $(this).width();
                });

                return width;
            }

            var prevItems = activeItem.prevAll();
            var nextItems = activeItem.nextAll();
            var center = width(prevItems) + (currentWidth / 2);
            var half = activeWidth / 2;

            if (!!prevItems.length) {
                prevItems.width((center - half) / prevItems.length);
            }

            if (!!nextItems.length) {
                nextItems.width((listWidth - (center + half)) / nextItems.length);
            }

            activeItem.width(activeWidth);
        }
    }

    var $window = $(window);

    $window.resize(debounce(equalizeListItemsWidth, 50));
    equalizeListItemsWidth();

    // Expand listitem on hover
    subnavItems.hover(function() {
        var $el = $(this);
        $el.addClass('hover');
        equalizeListItemsWidth();

    }, function() {
        var $el = $(this);
        $el.removeClass('hover');
        equalizeListItemsWidth();
    });

    // Mobile Menu Button
    $(document).on('click', '[data-subnav-toggle]', function(e) {
        subnav
            .toggleClass("subnav--mobile")
            .find('.caret, .caret-up')
            .toggleClass('caret--reverse')
        ;
         e.preventDefault();
    });

    $window.resize(debounce(function() {
        if ($window.width() > 480) {
            subnav
                .removeClass('subnav--mobile')
                .find('.caret, .caret-up')
                .removeClass('caret--reverse');
        }
    }, 50));
}

module.exports = function() {
    $(function() {
        $('.subnav').each(subnav);
    });
};
