////////////////////////////////////////////////////////////////////////////
//  imgRotate.js -
//      @author: Jeff Lambert
//
//  Fades a list of images randomly in and out.  The image 'placeholder' in the html is
//  assumed to have an id of 'fadeThis'.
//
//  Global part is executed before the body finishes loading.  Everything before the
//  first function declaration will delay the browser from displaying anything but
//  a white screen.  The more files in the 'images' array, the longer it will take to
//  to pre-download them preventing any response to/from the client.
//
//  The beginning function to start the rotation after the body has finished loading is
//  beginFade([0 or 1]).  0 is passed in from the main page only, and ensures that the
//  first image in the array is displayed (default picture).  1 is passed in from every
//  other page and specifies that any random image can be loaded first.
////////////////////////////////    
// Begin Global Variables...
var DEBUG = false;
if(DEBUG)
    alert("Inside imgRotate.js....");

var SERVER = "http://www.ourhousefoundation.org/new/";
var OPACITY_STEP = 2;       // percentage to step the opacity by. Lower values = smoother, 
                            // slower, higher values = quicker, choppier.
var STEP_TIMEOUT = 50;      // (~FPS): num milliseconds between successive opacity changes (+/-)
                            // 100ms ~ 10 FPS, 50 ms ~ 20 FPS
var IMAGE_TIMEOUT = 5000;   // number of milliseconds before starting to fade an image out.
var SWAP_TIMEOUT = 500;     // number of milliseconds before fading the next image in.
var curImage = 0;           // index of current image in 'images' array. Upper bounded by
                            // images.length  Initially set to 0 (default pic), may be changed
                            // inside of beginFade function.
var curOpacity = 0;         // current image opacity
var maxOpacity;             // Maximum opacity value. IE: 100, FF: 1.
var direction = 1;          // Direction to fade.  1 = Fade In, 0 = Fade Out
var curBrowser = "";        // Used to determine and set the opacity correctly, SINCE NO ONE
                            //      CAN PLAY NICE!!!!

// To change the images in the rotation, simply add paths to them in this array.
// The actual aspect ratio of the images is irrelevant, as they will be forced
// to a certain aspect ratio (set in corresponding HTML file), meaning any image
// that does not have a 'similar' aspect ratio will still work correctly, but may
// not look very good.                                         
var images = [  SERVER + "images/rotate/image1.jpg",
                SERVER + "images/rotate/image9.jpg", 
                SERVER + "images/rotate/image5.jpg",
                SERVER + "images/rotate/image6.jpg",
                SERVER + "images/rotate/image7.jpg",
                SERVER + "images/rotate/image8.jpg",  ];  


////////////////// NO EDITING BELOW THIS LINE!! ////////////////////////////
// Preload all the images in the rotation. Prevents incomplete images from
// being displayed.
if(document.images) {   // Older browsers will fail this, meaning they will not pre-download.
    for(i = 0; i < images.length; i++) {
        pic = new Image();
        pic.src = images[i];
    }
}

// Set current browser
curBrowser = navigator.appName; // Checking for document.all and document.layers is supposedly one way to
                                // determine whether this is IE or FF, but didn't seem to work right.

// Initialize curOpacity
curOpacity = 0;
if(DEBUG)
    alert("Finish Initial Load");
////////////////////////////////
// beginFade(firstImage_flag) -
//  Sets the global variable curBrowser and maxOpacity, then begins the infinite fadeIn()/fadeOut() loop.
    function beginFade(firstImage_flag) {
        if(DEBUG)
            alert("Inside Begin Fade");
        if(curBrowser == "Netscape") {  // Netscape?!? This is for Firefox
            maxOpacity = 1;
            document.getElementById("fadeThis").style.MozOpacity = 0;   // Firefox Fix for initial NaN
        }

        if(curBrowser == "Microsoft Internet Explorer") 
            maxOpacity = 100;

        // If firstImage_flag == 1, call nextPic() (which automatically calls fadeIn, starting state chain).
        // Otherwise, go ahead and fade in the first image.
        if(firstImage_flag) 
            nextPic();
        else
            fadeIn();
    }
////////////////////////////////
// fadeIn() -
// Tests the global variable 'curOpacity' against 'maxOpacity'. If
// current is less than the max, increase the image's opacity by
// OPACITY_STEP percent, and keep fading in.  Otherwise, change the
// direction and start fading out after IMAGE_TIMEOUT milliseconds.
    function fadeIn() {
        getOpacity();
        if(curOpacity < maxOpacity) {
            setOpacity(direction, OPACITY_STEP);
            setTimeout("fadeIn()", STEP_TIMEOUT);
        } else {
            direction = 0;
            setTimeout("fadeOut()", IMAGE_TIMEOUT);
        }
    }
////////////////////////////////
// fadeOut() -
// Similar to fadeIn().  Once the opacity reaches 0, changes the
// direction and calls nextPic() after SWAP_TIMEOUT milliseconds.
    function fadeOut() {
        getOpacity();
        if(curOpacity > 0) {
            setOpacity(direction, OPACITY_STEP);
            setTimeout("fadeOut()", STEP_TIMEOUT);
        } else {
            direction = 1;
            setTimeout("nextPic()", SWAP_TIMEOUT);
        }
    }
////////////////////////////////
// getOpacity -
// Sets the value of the global variable 'curOpacity' by inspecting the
// HTML element.  
    function getOpacity() {
        if(curBrowser == "Microsoft Internet Explorer")
            curOpacity = document.getElementById("fadeThis").filters[0].opacity;
        if(curBrowser == "Netscape")
            curOpacity = document.getElementById("fadeThis").style.MozOpacity;
    }
////////////////////////////////
// setOpacity(direction, value)
// Changes the opacity in the specified direction. 1 = Increasing Opacity,
// 0 = Decreasing Opacity by the value (in percent) specified. 
    function setOpacity(direction, value) {
        if(curBrowser == "Netscape") {
            if(direction == 1)  // Continue Fading In
        	    document.getElementById("fadeThis").style.MozOpacity = 
        	        parseFloat(parseFloat(curOpacity) + parseFloat(value/100));
        	else    // Begin Fading out
        	    document.getElementById("fadeThis").style.MozOpacity = 
        	        parseFloat(parseFloat(curOpacity) - parseFloat(value/100));
        }

    	if(curBrowser == "Microsoft Internet Explorer") {
    	    if(direction == 1)
        	    fadeThis.style.filter = 'alpha(opacity=' + (document.getElementById("fadeThis").filters[0].opacity + value) + ')';
    	    else
        	    fadeThis.style.filter = 'alpha(opacity=' + (document.getElementById("fadeThis").filters[0].opacity - value) + ')';
        }
    }
////////////////////////////////
// nextPic() -
//  Sets the value of curImage to a random integer in the range:
//    [0-images.length)
//  Updates the source attribute of the html element.
    function nextPic() {
        // a + Math.random() * (b - a)
        // a = 0, b = images.length
        var prevImage = curImage;
        while(prevImage == curImage) // Loop until a new image found
            curImage = parseInt(Math.random() * (images.length-1));
           
        if(DEBUG)
            alert("Cur Image: " + images[curImage] + ", Prev Image: " + prevImage);

        // Swap the HTML element's source, and begin fading in the new image
        document.getElementById("fadeThis").setAttribute("src", images[curImage]);
        fadeIn();
    }