window.onload = function()
  {
	 
	 var divId1 = "photodiv";
	 var imgId1="photoimg";
	 var imgArray1= new Array(
	     "/slides/slide01.jpg",
		 "/slides/slide02.jpg",
		 "/slides/slide03.jpg",
		 "/slides/slide04.jpg",
		 "/slides/slide05.jpg",
		 "/slides/slide06.jpg",
		 "/slides/slide07.jpg",
		 "/slides/slide08.jpg",
		 "/slides/slide09.jpg",
		 "/slides/slide10.jpg",
		 "/slides/slide11.jpg",
		 "/slides/slide12.jpg",
		 "/slides/slide13.jpg",
		 "/slides/slide14.jpg",
		 "/slides/slide15.jpg",
		 "/slides/slide16.jpg",
		 "/slides/slide17.jpg",
		 "/slides/slide18.jpg",
		 "/slides/slide19.jpg",
		 "/slides/slide20.jpg",
		 "/slides/slide21.jpg",
		 "/slides/slide22.jpg",
		 "/slides/slide23.jpg"
		);
	 
	  var object1 = new shuffler(divId1,imgId1,imgArray1);
	  object1.photoShufflerLaunch();
	  
	  var divId2 = "photodiv2";
	  var imgId2 ="photoimg2";
	  var imgArray2= new Array(
	     "/slides/completed1.jpg",
		 "/slides/completed2.jpg",
		 "/slides/completed3.jpg",
		 "/slides/completed4.jpg",
		 "/slides/completed5.jpg",
		 "/slides/completed6.jpg",
		 "/slides/completed7.jpg",
		 "/slides/completed8.jpg",
		 "/slides/completed9.jpg",
		 "/slides/completed10.jpg",
		 "/slides/completed11.jpg",
		 "/slides/completed12.jpg",
		 "/slides/completed13.jpg",
		 "/slides/completed14.jpg",
		 "/slides/completed15.jpg",
		 "/slides/completed16.jpg",
		 "/slides/completed17.jpg",
		 "/slides/completed18.jpg",
		 "/slides/completed19.jpg",
		 "/slides/completed20.jpg"
		);
	 
	  var object2 = new shuffler(divId2,imgId2,imgArray2);
	  object2.photoShufflerLaunch();
	  
	  //YOU CAN DO AS MANY OBJECTS AS YOU WANT
	  
  }
  var shuffler = function(divId,imgId, imgArray)
  {

   this.gblPhotoShufflerDivId = divId;
   this.gblPhotoShufflerImgId = imgId; 
   this.gblImg = imgArray;
   this.gblPauseSeconds = 5;
   this.gblFadeSeconds = .85;
   this.gblRotations = 1;

  // End Customization section
  
   this.gblDeckSize = this.gblImg.length;
   this.gblOpacity = 100;
   this.gblOnDeck = 0;
   this.gblStartImg;
   this.gblImageRotations = this.gblDeckSize * (this.gblRotations+1);
  
  
  this.photoShufflerLaunch = function()
  {
  	var theimg = document.getElementById(this.gblPhotoShufflerImgId);
        this.gblStartImg = theimg.src; // save away to show as final image

	document.getElementById(this.gblPhotoShufflerDivId).style.backgroundImage='url(' + this.gblImg[this.gblOnDeck] + ')';
	setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),this.gblPauseSeconds*1000);
  }

  this.photoShufflerFade = function()
  {
  	var theimg = document.getElementById(this.gblPhotoShufflerImgId);
	
  	// determine delta based on number of fade seconds
	// the slower the fade the more increments needed
        var fadeDelta = 100 / (30 * this.gblFadeSeconds);

	// fade top out to reveal bottom image
	if (this.gblOpacity < 2*fadeDelta ) 
	{
	  this.gblOpacity = 100;
	  // stop the rotation if we're done
	  if (this.gblImageRotations < 1) return;
	  this.photoShufflerShuffle();
	  // pause before next fade
          setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),this.gblPauseSeconds*1000);
	}
	else
	{
	  this.gblOpacity -= fadeDelta;
	  this.setOpacity(theimg,this.gblOpacity);
	  setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),30);  // 1/30th of a second
	}
  }

  this.photoShufflerShuffle = function()
  {
	var thediv = document.getElementById(this.gblPhotoShufflerDivId);
	var theimg = document.getElementById(this.gblPhotoShufflerImgId);
	
	// copy div background-image to img.src
	theimg.src = this.gblImg[this.gblOnDeck];
	// set img opacity to 100
	this.setOpacity(theimg,100);

    // shuffle the deck
	this.gblOnDeck = ++this.gblOnDeck ; this.gblDeckSize;
	// decrement rotation counter
	if (--this.gblImageRotations < 1)
	{
	  // insert start/final image if we're done
	  this.gblImg[this.gblOnDeck] = this.gblStartImg;
	}

	// slide next image underneath
	thediv.style.backgroundImage='url(' + this.gblImg[this.gblOnDeck] + ')';
  }

  this.setOpacity = function (obj, opacity) 
  {
    opacity = (opacity == 100)?99.999:opacity;
    
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;

    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;

    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
  }
}