// JavaScript Document
// the slides - relative or complete urls for any number of swappable images

var slides = new Array('http://www.reallyfastwebsites.com/clients/ARA/images/slideshow_01.jpg','http://www.reallyfastwebsites.com/clients/ARA/images/slideshow_02.jpg','http://www.reallyfastwebsites.com/clients/ARA/images/slideshow_03.jpg','http://www.reallyfastwebsites.com/clients/ARA/images/slideshow_04.jpg','http://www.reallyfastwebsites.com/clients/ARA/images/slideshow_05.jpg','http://www.reallyfastwebsites.com/clients/ARA/images/slideshow_06.jpg','http://www.reallyfastwebsites.com/clients/ARA/images/slideshow_08.jpg','http://www.reallyfastwebsites.com/clients/ARA/images/slideshow_09.jpg');

var slideIndex = 0; // which slide are we viewing?

var fadeTimer = 4; // time, in seconds, it takes to swap images

var swapTimer = 9; // time, in seconds, between image swaps

// gotta set it all up before we run it...

function initSwap() {

// CAREFUL! we ASSUME there's a page element with id 'fadeBox' to

// contain the effected images

var fadeBox = document.getElementById('fadeBox');

// set up the actual images

for(var i=0;i<slides.length;i++) {

// hooray for the DOM
              var slide = document.createElement('img'); // a new image

              slide.src = slides[i]; // should show this image

              slide.style.position = 'absolute'; // important so images stay on top of each other

              slide.style.opacity = '0'; // init to transparent (CSS2)

              slide.style.filter = 'alpha(opacity:0)'; // init to transparent (MSIE)

              fadeBox.appendChild(slide); // put the image in the box

              slides[i] = slide; // reassign to same array for convenience

              // if it's the first image, let's show it now to avoid waiting

              if(i==0) {

                  fade(i,1); // fade it in!

                  setTimeout(doSwap,swapTimer*1000); // start the swap timer!

              }

              // repeat for each slide

          }

      }

      function doSwap() {

          var s1 = slideIndex; // where *are* we?

          var s2 = s1+1==slides.length?0:s1+1; // either the next or the first

          // we just wrapped to the beginning if we hit the end of the array, so...

          slideIndex = s2; // update slide index

          fade(s1,0); // fade the old slide out!

          fade(s2,1); // fade the new slide in!

          setTimeout(doSwap,swapTimer*1000); // do it again in swapTimer seconds!

      }
       
      function fade(whoid,dir) {

		  var slide = slides[whoid]; // get the slide element at index whoid

          var completed; // so we know when the fade is done

          var opac = parseFloat(slide.style.opacity,10); // get a reference value

          // increment if fading in, decrement if fading out

          if(dir > 0) {

              opac += .1; // more opaque

              if(opac >= 1) {
 
                  // fade is at max! fade done!
 
                  completed = true;
 
              }
 
          } else {
 
              opac -= .1; // less opaque
 
              if(opac <= 0) {
 
                  // fade is at min! fade done!
 
                  completed = true;
 
              }
 
          }
 
          slide.style.opacity = opac; // set opacity (CSS2)
 
          slide.style.filter = 'alpha(opacity:'+(opac*100)+')'; // set opacity (MSIE)

          if(!completed) {

              // as long as the fade is not complete, keep doing this in 1/10 increments within fadeTimer seconds

              setTimeout("fade("+whoid+","+dir+")",parseInt(fadeTimer/10,10));

		  }

      }

       

      // start it up when the page loads!

      // ideally you want to place this in an onload appender or manager - if you use

      // a lot of JS you may end up overriding your onload

      onload = initSwap;