// headers available
var headers = new Array( "header_01.jpg", "header_02.jpg", "header_03.jpg",
  "header_04.jpg","header_05.jpg", "header_06.jpg", "header_07.jpg",
  "header_08.jpg","header_09.jpg", "header_13.jpg", "header_14.jpg", 
  "header_16.jpg"
);

// these contain different texts which make it less pleasing:
// "header_08.jpg","header_05.jpg", "header_06.jpg", "header_07.jpg",
// "header_15.jpg",

var currentImage = "header.png";

// start loading headers quickly to avoid stutter
function preLoadHeaders() {
    for (header in headers) {
        img = new Image(1000, 154);
        img.src = "/images/" + headers[header];
    }
}

// puts a new random image in the header by fade in and fade out
function refreshHeader() {
    // get the next imaeg
    var nextImage = getRandomHeaderImage();

    // change the source of the image (it hides behind the foreground image)
    $('#header_img_background').attr( { src: "/images/"+nextImage } );

    // fade away the foreground div, showing the next image (in the background)
    // change the foreground to match the background
    
    $('#header_img_2').fadeOut(900, function() {
        // change the foreground image to the next image
        $('#header_img_foreground').attr( { src: "/images/"+nextImage } );
    });

    // and make the div re-appear after a second or so
    setTimeout("$('#header_img_2').fadeIn(50);", 1000);

    currentImage = nextImage;
}

// finds a nice random header image
function getRandomHeaderImage() {
    var newImage = headers[rand(headers.length)-1];

    // make sure the new image is truly new
    while ( newImage == currentImage ) {
          newImage = headers[rand(headers.length)-1]
    }
    
    return newImage;
}

// a helper for randomization to integers
function rand ( n ) {
    return ( Math.floor ( Math.random ( ) * n + 1 ) );
}