$(document).ready(function(){
    $('div.filter').each(function(){
        $$this = $(this);
        //get target
        var $$target = $($$this.attr('rel'));
        //get target items
        var $$items = $$target.find(".type");
        //initialise filters
        $$this.find('.type').click(function(e){
            var filter = $(e.target).attr('rel');
            
            $(e.target).siblings().removeClass('selected')
            $(e.target).addClass('selected');
            $$items.animate(
                    {opacity:0},
                    {   queue: 'true', 
                        duration: 200,
                        complete: function() {
                            $(this).hide();
                        }
                    }
                )
                .filter('.type.' + filter)
                    .animate(
                        {opacity:1},
                        {
                            queue:true, 
                            duration:300,
                            complete: function(){
                                $(this).fadeIn('slow');
                            }
                        }
                    );
        });
    }).fadeIn('slow');
    /* do caption slide */
    if(!$.browser.msie){ //not for ie because it doesn't always fire the mouseout(known bug)
    $('div.caption').hover(function(){
            $(this).find('p').slideDown(200);
        }
        ,function(){
            $(this).find('p').slideUp(200);
        }
       ).find('p').addClass('stop');
    }
    /* fancy fade */
        //remove extra css classes as we are running so can disable the css only effect
        $('.fade').removeClass('fade');
        $('div.jfade ul li img').fadeTo(1,.8).mouseover(function(e){
            $(this).fadeTo(100,1);
        }).mouseleave(function(e){
            $(this).fadeTo(1000,.8);
        });
});