/*******************************************************************
* File    : JSFXMap_ImageFadeSwap.js  © JavaScript-FX.com
* Created : 2001/08/31
* Author  : Roy Whittle  (Roy@Whittle.com) www.Roy.Whittle.com
* Purpose : To create a more dynamic image swap using opacity
* History
* Date         Version        Description
* 2001-08-09        1.0                First version
* 2001-08-31        1.1                Got it working with NS6 - You must use opaque
*                                        GIF's and use a STYLE attrib in the main
*                                        HTML Page - Thanks Owl.
* 2001-08-31        1.2                Added different FadIn/FadeOut and converted
*                                        all vars to JSFXMap name space.
* 2001-09-01        1.3                Make it so you only need one onMouseOver
*                                        onMouseOut in the main document.
* 2001-09-09        1.4                Allow you to do a "Swap Other Image" so
*                                        you can swap the same image with different pictures.
* 2001-09-17        1.5                Create the pre-loading object - just like
*                                        simple rollovers and animated rollovers.
*                                        allows for a similar interface to all.
* 2001-09-18        1.6                The code contains so much of SimpleRollovers that
*                                        I added imgOn and imgOff so you can mix rollovers
*                                        without having to include 2 ".js" files.
* 2002-02-08        1.7                If the ON image is already loaded don't reload it.
*                                        This should help with the IE bug that reloads images
*                                        from the server even though they are pre-cached.
*                                        (will not work for swapping multiple pictures into same Image object)
* 2002-02-13        1.8                Corrected a bug in JSFXMap.findImg
* 2002-04-23        1.9                Write out the style tag.
* 2002-06-09        1.10                Attempt fix for IE on a Mac
* 2002-08-27        1.11                Fix a bug whereby opacity may go over 100 which
*                                        may be causing a bug in IE6
* 2002-08-29        1.12                Thanks to piglet (http://homepage.ntlworld.com/thepiglet/)
*                                        I now have a partial fix for NS7 and Mozilla 1.1.
***********************************************************************/
/****** User may alter these to change the fade effect ********/
var FadeInStep         = 20;
var FadeOutStep         = 20;
/****** Don't alter anything else **************/
document.write('<STYLE TYPE="text/css">.imgFader{ position:relative; filter:alpha(opacity=0); -moz-opacity:0.0 }</STYLE>');

if(!window.JSFXMap)
        JSFXMap=new Object();

JSFXMap.RolloverObjects=new Array();

JSFXMap.Rollover = function(name, img)
{
        JSFXMap.RolloverObjects[name]=new Image();
        JSFXMap.RolloverObjects[name].img_src = img;
        if(!JSFXMap.Rollover.postLoad)
                JSFXMap.RolloverObjects[name].src = img;
}
JSFXMap.Rollover.postLoad = false;
JSFXMap.Rollover.loadImages = function()
{
        var i;
        for(i in JSFXMap.RolloverObjects)
        {
                r=JSFXMap.RolloverObjects[i];
                r.src=r.img_src;
        }
}
JSFXMap.Rollover.error = function(n)
{
                alert("JSFXMap.Rollover - An Error has been detected\n"
                        + "----------------------------------\n"
                        + "You must define a JSFXMap.Rollover in your document\n"
                        + "JSFXMap.Rollover(\""+n+"\",\"your_on_img.gif\")\n"
                        + "(check the spelling of your JSFXMap.Rollovers)");
}
/*******************************************************************
*
* Function    : getImg
*
* Description : In Netscape 4 images could be in layers so we might
*                    have to recurse the layers to find the image
*
*****************************************************************/
JSFXMap.getImg = function(n, d)
{
        var img = d.images[n];
        if(!img && d.layers)
                for(var i=0 ; !img && i<d.layers.length ; i++)
                        img=JSFXMap.getImg(n,d.layers[i].document);
        return img;
}
/*******************************************************************
*
* Function    : findImg
*
* Description : gets the image from the document and reports an
*                    error if it cannot find it.
*
*****************************************************************/
JSFXMap.findImg = function(n, d)
{
        var img = JSFXMap.getImg(n, d);

        /*** Stop emails because the image was named incorrectly ***/
        if(!img)
        {
                alert("JSFXMap.findImg - An Error has been detected\n"
                        + "----------------------------------\n"
                        + "You must define an image in your document\n"
                        + "<IMG SRC=\"your_image.ext\" NAME=\""+n+"\">\n"
                        + "(check the NAME= attribute of your images)");

                return(new Image());
        }
        return img;
}

JSFXMap.ImageFadeRunning=false;
JSFXMap.ImageFadeInterval=30;

/*******************************************************************
*
* Function    : imgFadeIn
*
* Description : This function is based on the turn_on() function
*                      of animate2.js (animated rollovers from www.roy.whittle.com).
*                      Each image object is given a state.
*                        OnMouseOver the state is switched depending on the current state.
*                        Current state -> Switch to
*                        ===========================
*                        null                ->        OFF.
*                        OFF                ->        FADE_IN
*                        FADE_OUT        ->        FADE_IN
*                        FADE_OUT        ->        FADE_OUT_IN (if the new image is different)
*                        FADE_IN_OUT->        FADE_IN (if the image is the same)
*****************************************************************/
JSFXMap.imgFadeIn = function(img, imgSrc)
{
        if(img)
        {
                if(img.state == null)
                {
                        img.state = "OFF";
                        img.index = 0;
                        img.next_on    = null;
                }

                if(img.state == "OFF")
                {
                        /*** Vers 1.7 only load the ON image once ever ***/
                        if(img.src.indexOf(imgSrc) == -1)
                                img.src=imgSrc;

                        img.currSrc = imgSrc;
                        img.state = "FADE_IN";
                        JSFXMap.startFading();
                }
                else if( img.state == "FADE_IN_OUT"
                        || img.state == "FADE_OUT_IN"
                        || img.state == "FADE_OUT")
                {
                        if(img.currSrc == imgSrc)
                                img.state = "FADE_IN";
                        else
                        {

                                img.next_on = imgSrc;
                                img.state="FADE_OUT_IN";
                        }
                }
        }
}
/*******************************************************************
*
* Function    : imgFadeOut
*
* Description : This function is based on the turn_off function
*                      of animate2.js (animated rollovers from www.roy.whittle.com).
*                      Each image object is given a state.
*                        OnMouseOut the state is switched depending on the current state.
*                        Current state -> Switch to
*                        ===========================
*                        ON                ->        FADE_OUT.
*                        FADE_IN        ->        FADE_IN_OUT.
*                        FADE_OUT_IN        ->        FADE_IN. (after swapping to the next image)
*****************************************************************/
JSFXMap.imgFadeOut = function(img)
{
        if(img)
        {
                if(img.state=="ON")
                {
                        img.state="FADE_OUT";
                        JSFXMap.startFading();
                }
                else if(img.state == "FADE_IN")
                {
                        img.state="FADE_IN_OUT";
                }
                else if(img.state=="FADE_OUT_IN")
                {
                        img.next_on == null;
                        img.state = "FADE_OUT";
                }
        }
}
/*******************************************************************
*
* Function    : startFading
*
* Description : This function is based on the start_animating() function
*                        of animate2.js (animated rollovers from www.roy.whittle.com).
*                        If the timer is not currently running, it is started.
*                        Only 1 timer is used for all objects
*****************************************************************/
JSFXMap.startFading = function()
{
        if(!JSFXMap.ImageFadeRunning)
                JSFXMap.ImageFadeAnimation();
}

/*******************************************************************
*
* Function    : ImageFadeAnimation
*
* Description : This function is based on the Animate function
*                    of animate2.js (animated rollovers from www.roy.whittle.com).
*                    Each image object has a state. This function
*                    modifies each object and (possibly) changes its state.
*****************************************************************/
JSFXMap.ImageFadeAnimation = function()
{
        JSFXMap.ImageFadeRunning = false;
        for(i=0 ; i<document.images.length ; i++)
        {
                var img = document.images[i];
                if(img.state)
                {
                        if(img.state == "FADE_IN")
                        {
                                img.index+=FadeInStep;

                                if(img.index > 100)
                                        img.index = 100;

                                if(img.filters)
                                        img.filters.alpha.opacity = img.index;
                                else
                                        img.style.MozOpacity = img.index/101;

                                if(img.index == 100)
                                        img.state="ON";
                                else
                                        JSFXMap.ImageFadeRunning = true;
                        }
                        else if(img.state == "FADE_IN_OUT")
                        {
                                img.index+=FadeInStep;
                                if(img.index > 100)
                                        img.index = 100;

                                if(img.filters)
                                        img.filters.alpha.opacity = img.index;
                                else
                                        img.style.MozOpacity = img.index/101;


                                if(img.index == 100)
                                        img.state="FADE_OUT";

                                JSFXMap.ImageFadeRunning = true;
                        }
                        else if(img.state == "FADE_OUT")
                        {
                                img.index-=FadeOutStep;
                                if(img.index < 0)
                                        img.index = 0;

                                if(img.filters)
                                        img.filters.alpha.opacity = img.index;
                                else
                                        img.style.MozOpacity = img.index/101;


                                if(img.index == 0)
                                        img.state="OFF";
                                else
                                        JSFXMap.ImageFadeRunning = true;
                        }
                        else if(img.state == "FADE_OUT_IN")
                        {
                                img.index-=FadeOutStep;
                                if(img.index < 0)
                                        img.index = 0;

                                if(img.filters)
                                        img.filters.alpha.opacity = img.index;
                                else
                                        img.style.MozOpacity = img.index/101;

                                if(img.index == 0)
                                {
                                        img.src = img.next_on;
                                        img.currSrc = img.next_on;
                                        img.state="FADE_IN";
                                }
                                JSFXMap.ImageFadeRunning = true;
                        }
                }
        }
        /*** Check to see if we need to animate any more frames. ***/
        if(JSFXMap.ImageFadeRunning)
                setTimeout("JSFXMap.ImageFadeAnimation()", JSFXMap.ImageFadeInterval);
}
/*******************************************************************
*
* Function    : hasOpacity
*
* Description : Tests if the browser allows Opacity
*
*****************************************************************/
JSFXMap.hasOpacity = function(obj)
{
        if(document.layers)
                return false;

        if(window.opera)
                return false;

        if(navigator.userAgent.toLowerCase().indexOf("mac") != -1)
                return false;

        return true;
}
/*******************************************************************
*
* Function    : fadeIn /fadeOut
*
* Description : Detects browser that can do opacity and fades the images
*                    For browsers that do not support opacity it just does an image swap.
*                    (I only know about NS4 but maybe IE on a Mac also ?)
*                    For these functions to work you need to name the image
*                        e.g. for an image named "home" you need
*                        <IMG .... NAME="home">
*                    and you need 2 images, the on and the off image
*****************************************************************/
JSFXMap.fadeIn = function(imgName, rollName)
{
        if(rollName == null)
                rollName=imgName;

        /*** Stop emails because the rollover was named incorrectly ***/
        if(!JSFXMap.RolloverObjects[rollName])
        {
                JSFXMap.Rollover.error(rollName);
                return;
        }

        var img = JSFXMap.findImg(imgName, document);
        if(JSFXMap.hasOpacity(img))
                JSFXMap.imgFadeIn(img, JSFXMap.RolloverObjects[rollName].img_src);
        else
        {
                if(img.offSrc==null)
                        img.offSrc=img.src;
                img.src=JSFXMap.RolloverObjects[rollName].img_src;
        }
}
JSFXMap.fadeOut = function(imgName)
{
        var img = JSFXMap.findImg(imgName, document);
        if(JSFXMap.hasOpacity(img))
                JSFXMap.imgFadeOut(img);
        else
                img.src=img.offSrc;
}
/*******************************************************************
*
* Function    : imgOn /imgOff
*
* Description : Included these functions so you can mix simple and
*                    fading rollovers without having to include 2 ".js" files
*
*****************************************************************/
JSFXMap.imgOn = function(imgName, rollName)
{
        if(rollName == null)
                rollName=imgName;

        /*** Stop emails because the rollover was named incorrectly ***/
        if(!JSFXMap.RolloverObjects[rollName])
        {
                JSFXMap.Rollover.error(rollName);
                return;
        }
        var img = JSFXMap.findImg(imgName,document);
        if(img.offSrc==null)
                img.offSrc=img.src;
        img.src=JSFXMap.RolloverObjects[rollName].img_src;
}
JSFXMap.imgOff = function(imgName)
{
        var img = JSFXMap.findImg(imgName,document);
        img.src=img.offSrc;
}