background image carousel

headline-carousel.js

$(function(){
        var headline = $('#headline');
        var lastImageId = 3; // total amount of images in carousel
        var imgFadeInterval = 7000;

        // fade image backgrounds in and out
        headline.data('image', 1);
        var headlineCarousel = function () {
            var currentImage = headline.data('image');
            $('#img-holder2').fadeToggle('slow', function(){
                $(this).toggleClass('active next');
            });
            $('#img-holder1').fadeToggle('slow', function(){
                headline.removeClass('image'+ currentImage);
                if (currentImage==lastImageId) currentImage = 0; // stops at last image and repeats the carousel
                headline.data('image', currentImage+1);
                headline.addClass('image'+(currentImage+1)); // headline class name changes css bg image of #img-holder divs
                $(this).toggleClass('active next'); // after the images have faded, divs swap places
            });
        }
        var changeBackground = setInterval(headlineCarousel, imgFadeInterval);


        $('#btn-get-started').click(function(){
            $('#create_challenge').triggerHandler('open');
            if (_gaq) _gaq.push(['_trackEvent', identifyContext(), 'headline', 'Get started']);
        });

        // display how it works section
        $('#btn-how-it-works').click(function(){
            headline.toggleClass('show');
            if (headline.hasClass('show')) {
                clearInterval(changeBackground);
                if (_gaq) _gaq.push(['_trackEvent', identifyContext(), 'how it works', 'Show']);
            } else {
                changeBackground = setInterval(headlineCarousel, imgFadeInterval);
                if (_gaq) _gaq.push(['_trackEvent', identifyContext(), 'how it works', 'Close']);
            }
        });

    });