var fadeid;
var current = 1;
var last = 4;

function loopfade() {
    if (current == 4) {
        current = 1;
        last = 4;
    } else {
        last = current;
        current++;
    }
    
    $('#f'+last).removeClass('f-active');
    $('#f'+current).addClass('f-active');
    
    $('#b'+last).animate({ opacity: 0 }, 1000, function() {
        $('#b'+last).hide();
    });
    
    $('#b'+current).show();
    $('#b'+current).animate({ opacity: 1 }, 1000);
}

$(document).ready(function(){  

$(".current-page").parents("li").addClass("current-page");

$.fn.hoverClass = function(c) {
    return this.each(function(){
        $(this).hover( 
            function() { $(this).addClass(c); $(this).parents("li").addClass("noHover");  },
            function() { $(this).removeClass(c); $(this).parents("li").removeClass("noHover"); }
        );
    });
}



$(".menu li").hoverClass("sfHover");



  $('#b2').hide(); $('#b2').fadeTo(0,0);
    $('#b3').hide(); $('#b3').fadeTo(0,0);
    $('#b4').hide(); $('#b4').fadeTo(0,0);
    fadeid = setInterval("loopfade()", 8000);
    
    $('.f').click(function() {
        var clicked = $(this).attr('id').substr(1,1);
        var old = current;
        current = clicked;
        
        if (old != clicked) {
            // stop animations
            clearInterval(fadeid);
            
            $('#f'+old).removeClass('f-active');
            $('#f'+clicked).addClass('f-active');
            
            // fade out old
            $('#b'+old).animate({ opacity: .3 }, 325, function() {
                
                $('#b'+clicked).show();
                $('#b'+clicked).animate({ opacity: .5 }, 325, function() {
                    $('#b'+old).animate({ opacity: 0 }, 1, function() {
                        $('#b'+old).hide();
                        $('#b'+clicked).animate({ opacity: 1 }, 1, function() {
                            clearInterval(fadeid);
                            fadeid = setInterval("loopfade()", 8000);
                        });
                    });
                });
            });
        }
    });

})