var fadeid;
var current = 1;
var last = 5;


$(document).ready(function(){
	Cufon.replace('h1, h2, .company-name', { fontFamily: 'Frutiger SBIN Bd v.1' }); Cufon.replace('h3', { fontFamily: 'Trebuchet' });
    $('#b1').show(); $('#d1').show();	
    $('#b2').hide(); $('#b2').fadeTo(0,0); $('#d2').hide(); $('#d2').fadeTo(0,0);
    $('#b3').hide(); $('#b3').fadeTo(0,0); $('#d3').hide(); $('#d3').fadeTo(0,0);
    $('#b4').hide(); $('#b4').fadeTo(0,0); $('#d4').hide(); $('#d4').fadeTo(0,0);
    $('#b5').hide(); $('#b5').fadeTo(0,0); $('#d5').hide(); $('#d5').fadeTo(0,0);
        
    fadeid = setInterval("loopfade()", 4000);
    
    $('.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('active');
            $('#f'+clicked).addClass('active');
            
            // fade out old
            $('#b'+old).animate({ opacity: .3 }, 325, function() {
                
               $('#b'+clicked).animate({ opacity: .5 }, 325, function() {
                    $('#b'+old).animate({ opacity: 0 }, 1, function() {
                        $('#b'+old).hide();
                        $('#d'+old).hide();
                        $('#b'+clicked).animate({ opacity: 1 }, 1, function() {
                            clearInterval(fadeid);
                            $('#d'+clicked).animate({ opacity: 1 }, 1000);
                            fadeid = setInterval("loopfade()", 8000);
							$('#b'+clicked).fadeIn(250);
							$('#d'+clicked).fadeIn(250);
                        });
                    });
                });
            });
        }
    });

});


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