$(document).ready(function() {
    var menuItems = $('.subnav');

    menuItems.each(function(index, element) {

        var numberOfColumns = 3; // used to be 3 (with the optional increase to 4 below) but then requested to always set it to 4

        var height = $(element).height();
        var elementHeight = $('.topnavtext').height();

        var totalNumberOfElements = $('.topnavtext', element).length

        var oneThirdHeight = (elementHeight * totalNumberOfElements) / 3

        if (elementHeight >= oneThirdHeight)
            return;

        var elementsPerDiv = Math.ceil(totalNumberOfElements / numberOfColumns);
        var elementsLeftToMove = totalNumberOfElements;

        if (elementsLeftToMove >= 60) {
            numberOfColumns = 4;

            elementsPerDiv = Math.ceil(totalNumberOfElements / numberOfColumns);
            elementsLeftToMove = totalNumberOfElements;
        }
        var containerDiv = $('<div class="temprow"></div>');
        for (i = 0; i < numberOfColumns; i++) {

            var createdDiv = $('<div class="row"></div>');
            if (elementsLeftToMove > elementsPerDiv) {
                createdDiv.append($('.topnavtext', element).parent().slice(0, elementsPerDiv));
            }
            else {
                createdDiv.append($('.topnavtext', element).parent().slice(0, elementsLeftToMove));
            }

            
            $(containerDiv).append(createdDiv);

            elementsLeftToMove = elementsLeftToMove - elementsPerDiv;
        }
        $(element).append(containerDiv);
    });
});