﻿/* *******************************************************************
incFadeImagesAPI.js
Functions for Fading Images from one to another (like in Header)
*** REQUIRES: incCommonAPI.js ***
-scott 3/17/09
******************************************************************** */

// Global State Variables
var g_aryFadeInstances = new Array();
var g_aryFadeImages = new Array();
var g_aryFadeState = new Array();

// -------------------------------------------------------------------
// gfunInitFadeImage(sImageID, aryImageSRCs, nWidth, nHeight, sAltText, nSecondsBetween, nSecondsTransition)// Creates a Fading Image Feature
// Parameters://	sImageID: the client (or DOM) ID of the Image tag that will be used for the fadde//	aryImageSRCs: an array of URLS to the images to be used for this fader. the first entry should be the current image//	nWidth: the width of the image
//	nHeight: the height of the image
//	sAltText: the alt text of the image (must be the same for all)
//	nSecondsBetween: The number of seconds to pause between images//  nSecondsTransition: The number of seconds it takes to fade between one image to the next// -------------------------------------------------------------------
function gfunInitFadeImage(sImageID, aryImageSRCs, nWidth, nHeight, sAltText, nSecondsBetween, nSecondsTransition) {
    // Add the instance
    var nInstanceIndex = g_aryFadeState.length;
    g_aryFadeInstances[nInstanceIndex] = new Array(sImageID, nWidth, nHeight, sAltText, nSecondsBetween, nSecondsTransition); // DOM ID, Width, Height, Image Alt Text, nSecondsBetween, nSecondsTransition

    // Set the initial State
    g_aryFadeState[nInstanceIndex] = new Array(1,0); //(Current Holder, Current Index)
    
    // Pre-Load Images
    if (aryImageSRCs.length > 0)
    {
        g_aryFadeImages[nInstanceIndex] = new Array();
        for (var j = 0; j < aryImageSRCs.length; j++)
        {
            g_aryFadeImages[nInstanceIndex][j] = new Image();
            g_aryFadeImages[nInstanceIndex][j].src = aryImageSRCs[j];
        }
    }
    
    // Start the Timer for the Collage
    setTimeout("gfunFadeCollageImage('" + sImageID + "');", (nSecondsBetween * 1000) - 2);
}


/*****************************************************************
    PRIVATE HELPER FUNCTIONS
*****************************************************************/

function gfunFadeCollageImage(sImageID) {
    var objImg_1 = g_getRawObject(sImageID);
    var objImg_2 = gfunGetSecondCollageImg(sImageID);

    if (objImg_1 != null && objImg_2 != null) {

        // Get the Instance details
        var nInstanceIndex = 0;
        var nSecondsBetween = 6;
        var nSecondsTransition = 1;
        for (var i = 0; i < g_aryFadeInstances.length; i++) {
            if (g_aryFadeInstances[i][0] == sImageID) {
                nInstanceIndex = i;
                nSecondsBetween = g_aryFadeInstances[i][4];
                nSecondsTransition = g_aryFadeInstances[i][5];
                break;
            }
        }
        
        // Determine the Hidden Img Element
        var sIdA, sIdB;
        var nCurrentImg = g_aryFadeState[nInstanceIndex][0];
        var nNextImg = (nCurrentImg == 1) ? 2 : 1;
        // A = The Current Image Element
        // B = The Next Image Element
        if (nNextImg == 2) {
            sIdA = sImageID;
            sIdB = sImageID + "_2";
        }
        else {
            sIdA = sImageID + "_2";
            sIdB = sImageID;
        }
        var objImgB = g_getRawObject(sIdB);
        
        // Update the Hidden Img Element's Current Image
        var nNextIndex = g_aryFadeState[nInstanceIndex][1] + 1;
        if (nNextIndex >= g_aryFadeImages[nInstanceIndex].length) nNextIndex = 0;
        objImgB.src = g_aryFadeImages[nInstanceIndex][nNextIndex].src;
        
        // Ok, start the fade out of the current image and fade in the new one
        gfunFadeOpacity(sIdA, 100, 0, nSecondsTransition);
        gfunFadeOpacity(sIdB, 0, 100, nSecondsTransition);
        
        // Update the Current State
        g_aryFadeState[nInstanceIndex][0] = nNextImg;
        g_aryFadeState[nInstanceIndex][1] = nNextIndex;
    }
    setTimeout("gfunFadeCollageImage('" + sImageID + "');", nSecondsBetween * 1000);
}


// Returns the Image Element object for the second transition
function gfunGetSecondCollageImg(sImageID)
{
    var objImage1 = g_getRawObject(sImageID);

    // Check to see if the image element already exists
    var sImageID2 = sImageID + "_2";
    var objImage2 = g_getRawObject(sImageID2);
    if (objImage1 != null && objImage2 == null)
    {
        var nWidth = 0;
        var nHeight = 0;
        var sAltText = "";
        
        // Get the Instance details
        for (var i = 0; i < g_aryFadeInstances.length; i++) {
            if (g_aryFadeInstances[i][0] == sImageID) {
                nWidth = g_aryFadeInstances[i][1];
                nHeight = g_aryFadeInstances[i][2];
                sAltText = g_aryFadeInstances[i][3];
                break;
            }
        }
        
        // Try to create the image element
        var objHolderDiv = objImage1.parentNode;
        if (objHolderDiv.insertBefore && objHolderDiv != null)
        {
            var objImage2 = document.createElement("img");
            objImage2.id = sImageID2;
            if (nWidth > 0) objImage2.width = nWidth;
            if (nHeight > 0) objImage2.height = nHeight;
            objImage2.alt = sAltText
            objImage2.style.position = "absolute";
            objImage2.style.zIndex = 100;
            // Now add it to the DOM
            if (objHolderDiv.appendChild) objHolderDiv.insertBefore(objImage2, objImage1);
        }
        else if (objHolderDiv.innerHTML)
        {
            var sTag = "<img id=\"" + sImageID2 + "\" alt=\"" + sAltText + "\" style=\"position:absolute;z-index:100;\"";
            if (nWidth > 0) sTag += " width=\"" + nWidth + "\"";
            if (nHeight > 0) sTag += " height=\"" + nHeight + "\"";
            sTag += " />";
            objHolderDiv.innerHTML = sTag + objHolderDiv.innerHTML;
            objImage2 = g_getRawObject(sImageID2);
        }
        
        // Initialize the Opacity to 0
        gfunSetOpacity(sImageID2, 0);
    }
    
    return objImage2;
}


// Updates the Opacity of an object
function gfunSetOpacity(id, opacity)
{
    var object = g_getObject(id); 
    if (object != null) {
	    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 gfunFadeOpacity(id, opacStart, opacEnd, sec) {
	//speed for each frame
	var millisec = sec * 1000;
	var speed = Math.round(millisec / 14);
	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("gfunSetOpacity('" + id + "'," + i + ")",(timer * speed));
    		timer++;
    		i = i - 7;
		}
	}
	else if (opacStart < opacEnd)
	{
	    //Fade IN
	    var i = opacStart;
		while (i < opacEnd)
		{
			setTimeout("gfunSetOpacity('" + id + "'," + i + ")",(timer * speed));
			timer++;
			i = i + 7;
		}
	}
	setTimeout("gfunSetOpacity('" + id + "'," + opacEnd + ")",(timer * speed));
}
