// Index for current header images to show
var headerImageIndex = 1;

    // Id of the div for header images
var headerImagesId = 'header-image';
    
    // Id of the div for header images
var headerImagesClass = 'img-header';
    
    // Id of the div for header images
var headerImages = {};
    
function fadeHeaderImages() {
        // Reset image index if necessary
    if (headerImageIndex >= header_images_array.length) {
        headerImageIndex = 0;
    }
    
        // Fade out the other images
    headerImages.each(function(img) {
        if (headerImages[headerImageIndex] != img) {
            img.fade({
                duration: 2
            });
        }
    });
    
        // Fade in current image
    headerImages[headerImageIndex].appear({
        duration: 2
    });
    
        // Increment index for next header image
    headerImageIndex += 1;
}

    // Wait until DOM is ready
document.observe('dom:loaded', function() {
    
        // If there are values in the header_images array...
    if (Object.isArray(header_images_array)) {
        if (header_images_array.length > 0) {
            
                // Add images
            for (var i = 0; i < header_images_array.length; i++) {
                var style = '';
                if (i > 0) {
                    style = 'display: none;';
                }
                
                var headerImage = new Element('img', {
                    'class': headerImagesClass,
                    src: header_images_array[i],
                    style: style
                });
                
                $(headerImagesId).insert(headerImage);
            }
            
            headerImages = $$('.'+headerImagesClass);
            
            window.setInterval('fadeHeaderImages()', 5000);
        }
    }
});