/* Set Up Collage Images */

/* Settings */
var aryCollageDimensions = new Array();
aryCollageDimensions[1] = new Array(116,150);
aryCollageDimensions[2] = new Array(151,128);
aryCollageDimensions[3] = new Array(223,116);

var gnImagesPerSlot = 6;
var gnCollageTransition = 2; // Seconds
var gnCollageImageLength = 12; // Seconds

// Global State Variables
// Note: gnImage1, gnImage2, gnImage3 defined in incBegin.php
var aryCollageImages = new Array();
var aryCollageState = new Array();
aryCollageState[1] = new Array(1,gnImage1); //(Current Holder, Current Index)
aryCollageState[2] = new Array(1,gnImage2); //(Current Holder, Current Index)
aryCollageState[3] = new Array(1,gnImage3); //(Current Holder, Current Index)

function funPreLoadCollageImages()
{
    var nSlots = 3;
    
    if (aryCollageImages.length == 0)
    {
        for (var i = 1; i <= nSlots; i++)
        {
            aryCollageImages[i] = new Array();
            for (var j = 1; j <= gnImagesPerSlot; j++)
            {
                aryCollageImages[i][j] = new Image();
                aryCollageImages[i][j].src = "images/collage/header_photo_" + i + "_" + j + ".jpg";
            }
        }
    }
    
    setTimeout("funFadeCollageImage(1);", 2500);
    setTimeout("funFadeCollageImage(2);", 10000);
    setTimeout("funFadeCollageImage(3);", 6000);
}

function funFadeCollageImage(i) {
    var objImg_1 = funGetObject("headerPhoto_" + i + "_1");
    var objImg_2 = funGetSecondCollageImg(i);

    if (objImg_1 != null && objImg_2 != null) {
        // Determine the Hidden Img Element
        var sIdA, sIdB;
        var nCurrentImg = aryCollageState[i][0];
        var nNextImg = (nCurrentImg == 1) ? 2 : 1;
        // A = The Current Image Element
        // B = The Next Image Element
        sIdA = "headerPhoto_" + i + "_" + nCurrentImg;
        sIdB = "headerPhoto_" + i + "_" + nNextImg;
        var objImgB = funGetObject(sIdB);
        
        // Update the Hidden Img Element's Current Image
        var nNextIndex = aryCollageState[i][1] + 1;
        if (nNextIndex > gnImagesPerSlot) nNextIndex = 1;
        objImgB.src = aryCollageImages[i][nNextIndex].src;
        
        // Ok, start the fade out of the current image and fade in the new one
        funFadeOpacity(sIdA, 100, 0, gnCollageTransition);
        funFadeOpacity(sIdB, 0, 100, gnCollageTransition);
        
        // Update the Current State
        aryCollageState[i][0] = nNextImg;
        aryCollageState[i][1] = nNextIndex;
    }
    setTimeout("funFadeCollageImage(" + i + ");", gnCollageImageLength * 1000);
}

// Returns the Image Element object for the second transition
function funGetSecondCollageImg(i)
{
    // Check to see if the image element already exists
    var sImageID = "headerPhoto_" + i + "_2";
    var objImage = funGetObject(sImageID);
    if (objImage == null)
    {
        // Try to create the image element
        var objHolderDiv = funGetObject("headerPhoto_Fade_" + i);
        if (document.createElement && objHolderDiv != null)
        {
            var objImage = document.createElement("img");
            objImage.id = sImageID;
            objImage.width = aryCollageDimensions[i][0];
            objImage.height = aryCollageDimensions[i][1];
            objImage.alt = "Children at MDS"
            // Now add it to the DOM
            if (objHolderDiv.appendChild) objHolderDiv.appendChild(objImage);
        }
        else if (objHolderDiv.innerHTML)
        {
            objHolderDiv.innerHTML = "<img id=\"" + sImageID + "\" width=\"" + aryCollageDimensions[i][0] + "\" height=\"" + aryCollageDimensions[i][1] + "\" alt=\"Children at MDS\" />";
            objImage = funGetObject(sImageID);
        }
        
        // Initialize the Opacity to 0
        funSetOpacity(sImageID, 0);
    }
    
    return objImage;
}

/* Opacity Functions */

// Updates the Opacity of an object
function funSetOpacity(id, opacity)
{
    var object = funGetObject(id); 
    if (object != null) {
        if (object.style) {
            object = object.style;
        }
	    object.opacity = (opacity / 100);
	    object.MozOpacity = (opacity / 100);
	    object.KhtmlOpacity = (opacity / 100);
	    object.filter = "alpha(opacity=" + opacity + ")";
    }
}

// Fades the Opacity from one value to another
function funFadeOpacity(id, opacStart, opacEnd, sec) {
	//speed for each frame
	var millisec = sec * 1000;
	var speed = Math.round(millisec / 20);
	var timer = 0;
	var i = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStart > opacEnd)
	{
	    //Fade OUT
	    var i = opacStart;
		while (i > opacEnd)
		{
    		setTimeout("funSetOpacity('" + id + "'," + i + ")",(timer * speed));
    		timer++;
    		i = i - 5;
		}
	}
	else if (opacStart < opacEnd)
	{
	    //Fade IN
	    var i = opacStart;
		while (i < opacEnd)
		{
			setTimeout("funSetOpacity('" + id + "'," + i + ")",(timer * speed));
			timer++;
			i = i + 5;
		}
	}
	setTimeout("funSetOpacity('" + id + "'," + opacEnd + ")",(timer * speed));
}

/* General Helper Functions */
function funGetObject(obj)
{
    var theObj;
	if (typeof obj == "string") {
		if (document.getElementById) {
			theObj = document.getElementById(obj);
		}
		else if (document.all) {
			theObj = document.all(obj);
		}
		else if (document.layers) {
			theObj = seekLayer(document, obj);
		}
		if (theObj == null) theObj = eval("document." + obj);
	}
	else {
		// pass through object reference
		theObj = obj;
	}
	return theObj;
}

function seekLayer(doc, name) {
	var theObj;
	for (var i = 0; i < doc.layers.length; i++) {
		if (doc.layers[i].name == name) {
			theObj = doc.layers[i];
			break;
		}
		// dive into nested layers if necessary
		if (doc.layers[i].document.layers.length > 0) {
			theObj = seekLayer(document.layers[i].document, name);
		}
	}
	return theObj;
}