jQuery function - unintelligible behavior
<p>Please see my script here: <a href="http://jsfiddle.net/MrTest/DmFmM/" rel="nofollow">LIVE EXAMPLE</a></p>

<p>There is a unintelligible behavior which I have noticed.</p>

<p><strong>Onload <code>'All'</code> have 3 option visible - but when you switch to <code>'logo'</code> and back to <code>'all'</code> we have 4.</strong></p>

<p><strong>Why? There should be 4 item in the first tab as well.</strong></p>

<p>How does the script works:</p>

<ul>
<li>onload - I have defined that our <code>var filterClass = "all";</code> is all which means to show ONLY <code>li</code> with <code>'all'</code> class.</li>
<li>when you select something front the top menu - it is taking it's class and finds <code>li</code> with the same class ('li' have multiple classes)</li>
<li>on every change we run <code>CreateTabs</code> function which basically check how many 'li' we have and make them in tabs (4 on every tab).</li>
</ul>

<p><strong>Onload Scipt - which controles classes:</strong></p>

<pre><code>$('#portfolio-items li').CreateTabs();   
var filterClass = "all";

$('.portfolio-filter li a').click(function() {


    $('.portfolio-filter &gt; .selected').prop('class', '');
    $(this).parent('li').addClass('selected');

    filterClass = $(this).attr('class');

    $('#portfolio-items li').hide();
    $('#portfolio-items li.' + filterClass).show();
    $('#portfolio-items').CreateTabs(filterClass);

});
</code></pre>

<p><strong>CreateTabs Script:</strong></p>

<pre><code>(function($) {

$.fn.CreateTabs = function(filterClass) {

    var CoundNumberOfDivs = $('#portfolio-items li:visible').length;
    $('.pagination li a').hide();
    if (CoundNumberOfDivs &lt;= 4) {
        return false;
    }
    else {
        var num = Math.ceil(CoundNumberOfDivs / 4);
        $('.pagination li a:lt(' + num + ')').show();
        $('#portfolio-items li').hide();
        if (filterClass === undefined) {
            $('#portfolio-items li:lt(4)').show();
        } else {
            $('#portfolio-items li.' + filterClass + ':lt(4)').show();
        }
    }

};
})(jQuery);
</code></pre>

<p><strong>Onload script which controles TABS</strong></p>

<pre><code>$('ul.pagination li a').click(function(event) {
    $('ul.pagination li .active').removeClass('active');
    $(this).addClass('active');

    var PI = $('#portfolio-items li' + (filterClass !== undefined) ? '.' + filterClass : '');
    $('#portfolio-items li').hide();


    if ($(this).hasClass('href-1')) {
        PI.slice(0, 4).show();
    }
    else if ($(this).hasClass('href-2')) {

        PI.slice(4, 8).show();
    }
    else if ($(this).hasClass('href-3')) {
        PI.slice(8, 12).show();
    }
    else if ($(this).hasClass('href-4')) {
        PI.slice(12, 16).show();
    }
    else if ($(this).hasClass('href-5')) {
        PI.slice(16, 20).show();
    }
    else if ($(this).hasClass('href-6')) {
        PI.slice(20, 24).show();
    }
    else if ($(this).hasClass('href-7')) {
        PI.slice(24, 28).show();
    }
    else if ($(this).hasClass('href-8')) {
        PI.slice(28, 32).show();
    }
    else if ($(this).hasClass('href-9')) {
        PI.slice(32, 36).show();
    }
    event.preventDefault();
}).filter(':first').click();
</code></pre>
