/* background image rotator */
function rotator() {
        $('#backgroundImages div').css('opacity', 0)
                                  .eq(0).css('opacity', 1).addClass('active');
        
        setInterval('rotateIt()', 8000);
}

function rotateIt() {
    //Get the first image
    var currentImg = $('#backgroundImages div.active') ? $('#backgroundImages div.active') : $('#backgroundImages div:first');

    //Get next image, when it reaches the end, rotate it back to the first image
    var nextImg = (currentImg.next().length) ? (currentImg.next().hasClass('active')) ? $('#backgroundImages div:first') : currentImg.next() : $('#backgroundImages div:first');	
	
    //Set the fade in effect for the next image, the active class has higher z-index
    nextImg.css('opacity', 0)
	   .addClass('active')
           .animate({opacity: 1}, 1500);

    //Hide the current image
    currentImg.animate({opacity: 0}, 1500)
	      .removeClass('active');
                  
}

$(function() {
/* run rotator */
    rotator();
  
});