[jQuery] Tabbed content problem

[Yoni]

I'm currently using a jquery script that converts li's to
categorically tabbed thumbnails.
You can see what I'm talking about here:
http://2photoshop.com/portfolio/ (this contains the original code from
the script I use, only the style is changed)

I wanted to change it so instead of having the "All" category be
viewed first, only the web design content will show at first. I tried
doing this and this is the best I could manage:
http://2photoshop.com/portfolio2/

If you look, you will notice that instead of only "Web Design" content
showing up, all of it does. Only after you click around the categories
does it show the correct content.

I tried different things to figure out what needs to be changed in the
jquery code but I could not get it to work.
Can anyone please point me to what part of the code needs to be
altered?

My jquery code is currently:
---------------------

$(document).ready(function() {
        $('ul#filter a').click(function() {
                $(this).css('outline','none');
                $('ul#filter .current').removeClass('current');
                $(this).parent().addClass('current');

                var filterVal = $(this).text().toLowerCase().replace(' ','-');

                if(filterVal == 'all') {
                        $('ul#portfolio 
li.hidden').fadeIn('slow').removeClass('hidden');
                } else {

                        $('ul#portfolio li').each(function() {
                                if(!$(this).hasClass(filterVal)) {
                                        
$(this).fadeOut('normal').addClass('hidden');
                                } else {
                                        
$(this).fadeIn('slow').removeClass('hidden');
                                }
                        });
                }

                return false;
        });
});
---------------------

Thanks for your help!!