/*********************************************************************** 

* File    : JSFX_ImageFader.js  © JavaScript-FX.com

* Created : 2001/08/31 

* Author  : Roy Whittle  (Roy@Whittle.com) www.Roy.Whittle.com 

* Purpose : To create a fading effect for images

* History 

* Date         Version  Description 

* 2001-08-09  1.0 First version

* 2001-08-31  1.1 Code split - others became 

*         JSFX_FadingRollovers,

*                             JSFX_ImageFader,

*         JSFX_ImageZoom.

* 2002-01-27  1.2 Completed development by converting to JSFX namespace

* 2002-02-21  1.3 Added JSFX.fadeUpImg JSFX.fadeDownImg

* 2002-01-29  1.4 Make "fade" a seperate object of "img"

* 2002-03-12  1.5 Added an auto fade up/down for images 

*         with class imageFader

* 2002-08-29  1.6 Thanks to piglet (http://homepage.ntlworld.com/thepiglet/)

*       I now have a partial fix for NS7 and Mozilla 1.1.

***********************************************************************/ 

if(!window.JSFX)

  JSFX=new Object();



JSFX.FadeImageRunning    = false;

JSFX.FadeImageMinOpacity = 30;

JSFX.FadeImageAutoUp   = 10;

JSFX.FadeImageAutoDown   = 10;

JSFX.FadeImageSavedOver  = null;

JSFX.FadeImageSavedOut   = null;

document.write('<STYLE TYPE="text/css">.imageFader{ position:relative; filter:alpha(opacity='+JSFX.FadeImageMinOpacity+');opacity: '+JSFX.FadeImageMinOpacity/100+'; -moz-opacity:'+JSFX.FadeImageMinOpacity/101+'}</STYLE>');

/*******************************************************************

*

* Function    : actionOnMouseOver

*

* Description : Called automatically whenever an element in the

*     document is "mousedOver". It checks to see if the

*     element has the className == "imageFader" and if so

*     starts fading up the element.

*

*****************************************************************/

JSFX.fadeImage_actionOnMouseOver = function(e)

{

  srcElement=e ? e.target : event.srcElement;

  

  if(srcElement.className && srcElement.className=="imageFader")

    JSFX.fadeUp(srcElement);



  /*** If the document already had an onMouseOver handler, call it ***/

  if(JSFX.FadeImageSavedOver != null)

    JSFX.FadeImageSavedOver(e);

}



/*******************************************************************

*

* Function    : actionOnMouseOut

*

* Description : Called automatically whenever an element in the

*     document is "mousedOut". It checks to see if the

*     element has the className == "imageFader" and if so

*     starts fading down the element.

*

*****************************************************************/

JSFX.fadeImage_actionOnMouseOut = function(e)

{

  srcElement=e ? e.target : event.srcElement;



  if(srcElement.className && srcElement.className=="imageFader")

    JSFX.fadeDown(srcElement);

  

  /*** If the document already had an onMouseOut handler, call it ***/

  if(JSFX.FadeImageSavedOut != null)

    JSFX.FadeImageSavedOut(e);

}

/*******************************************************************

*

* Function    : fadeImageAuto

*

* Parameters  : minOpacity  - Minimum opacity to fade down to.

*     stepUp  - fade up speed   - larger = faster.

*     stepDown  - fade down speed - larger = faster.

*

* Description : Saves the documents original mousOver/Out handlers

*     and installs the actionMouseOver/Out handlers

*     of JSFX.fadeImage

*

*****************************************************************/

JSFX.fadeImageAuto = function(minOpacity, stepUp, stepDown)

{

  if(minOpacity)

    JSFX.FadeImageMinOpacity = minOpacity;

  if(stepUp)

    JSFX.FadeImageAutoUp  = stepUp;

  if(stepDown)

    JSFX.FadeImageAutoDown  = stepDown;



  /*** Save the original document mouseOver/Out events ***/

  JSFX.FadeImageSavedOver = document.onmouseover;

  JSFX.FadeImageSavedOut  = document.onmouseout;



  document.onmouseover  = JSFX.fadeImage_actionOnMouseOver ;

  document.onmouseout = JSFX.fadeImage_actionOnMouseOut ;

  JSFX.setMinOpacity(JSFX.FadeImageMinOpacity);

}

/*******************************************************************

*

* Function    : setMinOpacity

*

* Description : sets the minimum opacity for all fading images from

*     the default of 40 to the passed value.

*

*****************************************************************/

JSFX.setMinOpacity = function(minOpacity)

{

  if(document.layers) return;



  for(i=0 ; i<document.images.length ; i++)

  {

    var img = document.images[i];

    if(img.className=="imageFader")

    {

      if(img.filters)

        img.filters.alpha.opacity = JSFX.FadeImageMinOpacity;

      else

        img.style.MozOpacity = JSFX.FadeImageMinOpacity/101;

    }

  }

}

/*******************************************************************

*

* Function    : fadeUpImg

*

* Description : Finds the image in the document and calls JSFX.fadeUp

*

*****************************************************************/

JSFX.fadeUpImg = function(imgName, step)

{

  if(document.layers || window.opera)

    return;



  img = document.images[imgName];

  if(img)

    JSFX.fadeUp(img, step);

}

/*******************************************************************

*

* Function    : fadeUp

*

* Description : This function is based on the turn_on() function

*         of animate2.js (animated rollovers from www.roy.whittle.com).

*         Each fading image object is given a state. 

*     OnMouseOver the state is switched depending on the current state.

*     Current state -> Switch to

*     ===========================

*     null    ->  OFF.

*     OFF   ->  FADE_UP

*     FADE_DOWN ->  FADE_UP

*     FADE_UP_DOWN->  FADE_UP

*****************************************************************/

JSFX.fadeUp = function(img, step)

{



  if(img)

  {

    if(!step) step=JSFX.FadeImageAutoUp;



    if(img.fade == null)

    {

      img.fade = new Object();

      img.fade.state   = "OFF";

      img.fade.upStep  = step;

      img.fade.downStep  = step;

      img.fade.minOpacity  = JSFX.FadeImageMinOpacity;

      img.fade.index = img.fade.minOpacity;

      

    }

    if(img.fade.state == "OFF")

    {

      img.fade.upStep  = step;

      img.fade.state = "FADE_UP";

      JSFX.startImageFading();

    }

    else if( img.fade.state == "FADE_UP_DOWN"

      || img.fade.state == "FADE_DOWN")

    {

      img.fade.upStep  = step;

      img.fade.state = "FADE_UP";

    }

  }

}

/*******************************************************************

*

* Function    : fadeDownImg

*

* Description : Finds the image in the document and calls JSFX.fadeDown

*

*****************************************************************/

JSFX.fadeDownImg = function(imgName, step)

{

  if(document.layers || window.opera)

    return;



  img = document.images[imgName];

  if(img)

    JSFX.fadeDown(img, step);

}

/*******************************************************************

*

* Function    : fadeDown

*

* Description : This function is based on the turn_off function

*         of animate2.js (animated rollovers from www.roy.whittle.com).

*         Each zoom object is given a state. 

*     OnMouseOut the state is switched depending on the current state.

*     Current state -> Switch to

*     ===========================

*     ON    ->  FADE_DOWN.

*     FADE_UP ->  FADE_UP_DOWN.

*****************************************************************/

JSFX.fadeDown = function(img, step)

{

  if(img)

  {

    if(!step) step=JSFX.FadeImageAutoDown;



    if(img.fade.state=="ON")

    {

      img.fade.downStep  = step;

      img.fade.state="FADE_DOWN";

      JSFX.startImageFading();

    }

    else if(img.fade.state == "FADE_UP")

    {

      img.fade.downStep  = step;

      img.fade.state="FADE_UP_DOWN";

    }

  }

}

/*******************************************************************

*

* Function    : startImageFading

*

* 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

*****************************************************************/

JSFX.startImageFading = function()

{

  if(!JSFX.FadeImageRunning)

    JSFX.FadeImageAnimation();

}



/*******************************************************************

*

* Function    : FadeImageAnimation

*

* Description : This function is based on the Animate function

*       of animate2.js (animated rollovers from www.roy.whittle.com).

*       Each object has a state. This function

*       modifies each object and (possibly) changes its state.

*****************************************************************/

JSFX.FadeImageAnimation = function()

{

  JSFX.FadeImageRunning = false;

  for(i=0 ; i<document.images.length ; i++)

  {

    var img = document.images[i];

    if(img.fade)

    {

      if(img.fade.state == "FADE_UP")

      {

        img.fade.index+=img.fade.upStep;

        if(img.fade.index > 100)

          img.fade.index = 100;



        if(img.filters)

          img.filters.alpha.opacity = img.fade.index;

        else

          img.style.MozOpacity = img.fade.index/101;



        if(img.fade.index == 100)

          img.fade.state="ON";

        else

          JSFX.FadeImageRunning = true;

      }

      else if(img.fade.state == "FADE_UP_DOWN")

      {

        img.fade.index+=img.fade.upStep;

        if(img.fade.index > 100)

          img.fade.index = 100;



        if(img.filters)

          img.filters.alpha.opacity = img.fade.index;

        else

          img.style.MozOpacity = img.fade.index/101;

  

        if(img.fade.index == 100)

          img.fade.state="FADE_DOWN";

        JSFX.FadeImageRunning = true;

      }

      else if(img.fade.state == "FADE_DOWN")

      {

        img.fade.index-=img.fade.downStep;

        if(img.fade.index < img.fade.minOpacity)

          img.fade.index = img.fade.minOpacity;



        if(img.filters)

          img.filters.alpha.opacity = img.fade.index;

        else

          img.style.MozOpacity = img.fade.index/101;



        if(img.fade.index == img.fade.minOpacity)

          img.fade.state="OFF";

        else

          JSFX.FadeImageRunning = true;

      }

    }

  }

  /*** Check to see if we need to animate any more frames. ***/

  if(JSFX.FadeImageRunning)

    setTimeout("JSFX.FadeImageAnimation()", 40);

}