/*
 * Object that holds the image file name and description for fading.
 */
function imageObj(newName, newDesc) {
    this.name = newName;
    this.desc = newDesc;
}


/*
 * Adds all of the images to an array of imageObj objects.
 */
var images = new Array();
images.push(new imageObj("images/trg-img1.jpg", "Image1"));
images.push(new imageObj("images/trg-img2.jpg", "Image2"));
images.push(new imageObj("images/trg-img3.jpg", "Image3"));
images.push(new imageObj("images/trg-img4.jpg", "Image4"));

/*
 * Starts the image carousel functionality.
 *
 * First it retrieves the div box that the image will be stored by the
 * element ID
 *
 * Second, it changes the opacity of the image to 0 by calling the
 * changeOpacity function, which has many different opacity settings
 * to maximize backward compatibility.
 *
 * Third, it sets the image's visibility to visible. The image is set
 * to not be visible in the image script so that you don't see any
 * images until the entire page is loaded.
 *
 * Fourth, the imageId is set to 0 (the first image) and then div box's
 * background style is set to the first imageObj filename in the array.
 *
 * Finally, the fade in script is called.
 */
function start(){
    var img = document.getElementById("fadingImage");

    changeOpacity(img, 0);
    img.style.visibility = "visible";

    var imageId = 0;
    img.style.background = "url("+images[0].name+")";
    fadeIn(0, imageId);
}

/*
 * This function merely changes the opacity of a specific element.
 * Multiple style changes are used in order to accommodate multiple
 * browsers and their specific requirements.
 */
function changeOpacity(obj, opacity){
    obj.style.opacity = opacity;
    obj.style.filter = "alpha(opacity:"+opacity*100+")";
    obj.style.KHTMLOpacity = opacity;
}

/*
 * The function accepts a specific opacity setting and the imageId,
 * which corresponds to the imageObj array that was created above.
 *
 * First, it retrieves the div box in which the image is displayed by ID.
 *
 * Second, an if statement tests the opacity setting sent to the fadein
 * function. If Opacity is < 1, Opacity is incremented (by .04) and
 * the changeOpacity function is called, to update the opacity settings.
 * A timeout is set to call the fadeIn function again in 20 ms. the
 * function ends at this point.
 *
 * If Opacity is >= 1, the function calls the fadeout script in 5 seconds.
 *
 * At an increment of .04 every 20ms, the function is called 25 times over
 * the course of 500ms (or half a second) to get to 1.
 */
function fadeIn(opacity, imageId) {

    var img = document.getElementById("fadingImage");

    if (opacity < 1){
        opacity += 0.04;
        changeOpacity(img, opacity);

        setTimeout("fadeIn("+opacity+", "+imageId+");", 20);
    } else {
        setTimeout("fadeOut("+1+", "+imageId+");", 5000);
    }
}

/*
 * The fadeout script is similar to the fadein script.
 *
 * First, it retrieves the div box in which the image is displayed by ID.
 *
 * Second, an if statement evaluates the Opacity variable. If Opacity
 * is greater than zero, it decrements the opacity by .04 by calling the
 * changeOpacity function. A timeout is set to call the fadeOut function
 * again in 20 ms. the function ends at this point.
 *
 * if Opacity <=0, an elseif statement is called to evaluate the imageID
 * number. If the current imageId is the last image in the array, the
 * function sets the imageId to 0 (starting the process over again).
 * Otherwise, the imageId number is incremented.
 *
 * In both cases, the opacity is set to 0, because a bug exists in
 * Firefox that makes the image semi-visible, despite Opacity being set
 * to 0 in the function.
 *
 * Both of the remaining else statements change the background image of
 * the div box. A timeout is set to call the fadeIn script again in
 * 200ms.
 */

function fadeOut(opacity, imageId) {
    var img = document.getElementById("fadingImage");

    if (opacity > 0){
        opacity -= 0.04;
        changeOpacity(img, opacity);

        setTimeout("fadeOut("+opacity+", "+imageId+");", 20);
    } else if (imageId == images.length - 1) {
        changeOpacity(img, 0);
        imageId = 0;
        img.style.background = "url("+images[imageId].name+")";
        setTimeout("fadeIn(0, "+imageId+")", 200);
    } else {
        changeOpacity(img, 0);
        imageId++;
        img.style.background = "url("+images[imageId].name+")";
        setTimeout("fadeIn(0, "+imageId+")", 200);
    }
}

/*
 * The window.onload function waits until the page is loaded. At which
 * point a timeout is set to load the stasrt function after 750ms.
 */
window.onload = function() {setTimeout("start(images)", 750)}

/*
 * This sets the "back" div box's visibility to "hidden" so that the images
 * don't appear until they're unhidden in the javascript function. If
 * javascript is disabled, the image won't be hidden (and, thus, visible)
 * to people without javascript enabled.
 */
var img = document.getElementById("fadingImage");
img.style.visibility = "hidden";

/*
 * This script loads all of the images from the image array., but sets their
 * visibility to hidden and height/width to 0. This causes the browser to
 * load all of the images, but not display them. This way, the carousel
 * won't stall due to needing to load an image. All of the images will be
 * pre-loaded. The window.onload command won't load until all of the iamges
 * are preloaded.
 */
for (i=0; i <= (images.length - 1); i++){
    document.write("<img src=\""+images[i].name+"\" style=\"visibility:hidden\" alt=\"\" height=\"0\" width=\"0\"/>");
}