jQuery(document).ready(function () {
    // variable declaration
    var DEFAULT_MAX_COLUMN_HEIGHT = 300,
        hTot,
        hMin,
        hMax,
        hAvr,
        h,
        html,
        htmlUl,
        $ul,
        $ulPri,
        $lis,
        $li,
        col,
        colMax
        ;

    $('#mainNavigation .cnt .col.sec ul.cat').each(function (i, ul) {

        // --------------------------------
        // --- retrieve jQuery elements ---
        // --------------------------------

        // the jQuery ul element
        $ul = $(ul);

        // the primary columns jQuery ul element
        $ulPri = $ul.parents('.cnt').find(' > .col.pri > ul');

        // -------------------------------------------------
        // --- calculating number of columns and heights ---
        // -------------------------------------------------

        // maximum number of colums
        colMax = parseInt($ul.attr('data-cols'));

        // if not set let's use a default number
        if (isNaN(colMax)) {

            // calculate the default number of columns
            var defaultCols = $ul.parents('.cnt').find(' > .col.pri').length
                ? 3 // if primary column exists
                : 4 // if primary column doesn't exist
                ;

            // use the default number
            colMax = defaultCols;
        }

        // total height of the primary column
        hMin = parseInt($ulPri.outerHeight());
        if (isNaN(hMin) || !hMin) hMin = DEFAULT_MAX_COLUMN_HEIGHT;
        if (hMin < DEFAULT_MAX_COLUMN_HEIGHT) {
            hMin = DEFAULT_MAX_COLUMN_HEIGHT;
        }

        // total height of the ul to be seperated
        hTot = $ul.outerHeight();

        // the average height of the uls (divided on number of columns)
        hAvr = hTot / colMax;

        // hMax is the max height for each seperated column
        hMax = Math.max(hMin, hAvr);

        // --------------------------------------------
        // --- dividing the ul's into smaller parts ---
        // --------------------------------------------

        // the current column counter
        col = 1;

        // h is current height we've reached so far
        h = 0;

        // the final html we'll generate and inject (at the end)
        html = '';

        // define html for each column
        htmlUl = '<ul class="cat">';

        $lis = $ul.find('> li');

        $lis.each(function (j, li) {
            // the jQuery li element
            $li = $(li);

            // add the li's height
            h += $li.outerHeight();

            // should we proceed to a new column - that is: close the current ul?
            if (
                j > 0 && // don't care for the first li-element
                col < colMax && // below minimum number of columns?
                h > hMax // gone above the max column height
            ) {
                // let's add a new column

                // end the current ul
                htmlUl += '</ul>';

                // add the ul to the html
                html += htmlUl;

                // the new height counter should start with the current li('s height) at hand
                h = $li.outerHeight();

                // define a new ul tag
                htmlUl = '<ul class="cat">';

                // a new column...
                col += 1;
            }

            // add the li's html to the htmlUl
            htmlUl += '<li>' + $li.html() + '</li>';
        });

        // close the ul tag
        htmlUl += '</ul>';

        // add the last ul to the html
        html += htmlUl;

        // remove the old ul and inject the new html 
        $ul
            .parent() // ul's parent
            .append(html) // append the html
            .end() // back to the ul
            .remove() // remove it from DOM
            ;

    });
});