// JavaScript Document

window.onload = function()
  {
	 
	 var divId1 = "photodiv";
	 var imgId1="photoimg";
	 var imgArray1= new Array(
	"images/shuffler/Nat-shuffler.jpg?v=0",
	"images/shuffler/bike-box-shuffler.jpg?v=0",
	"images/shuffler/Hariet1_shuffler.jpg?v=0",
	"images/shuffler/Hariet2_shuffler.jpg?v=0",
	"images/shuffler/SC2588DD-internal_shuffler.jpg?v=0",
	"images/shuffler/designbuild-2_shuffler.jpg?v=0",
	"images/shuffler/P9181278_shuffler.jpg?v=0",
	"images/shuffler/P9022030_shuffler.jpg?v=0",
	"images/shuffler/P4031483_shuffler.jpg?v=0",
	"images/shuffler/P4031487_shuffler.jpg?v=0",
	"images/shuffler/P6041898_shuffler.jpg?v=0",
	"images/shuffler/P9022021_shuffler.jpg?v=0",
	"images/shuffler/P9022038_shuffler.jpg?v=0",
	"images/shuffler/P9022037_shuffler.jpg?v=0",
	"images/shuffler/Preston4_shuffler.jpg?v=0",
	"images/shuffler/SC2588DD_shuffler.jpg?v=0",
	"images/shuffler/SC2511DD-4_shuffler.jpg?v=0",
	"images/shuffler/SC2511DD_shuffler.jpg?v=0"
	
					    );
	 
	  var object1 = new shuffler(divId1,imgId1,imgArray1,5,2);
	  object1.photoShufflerLaunch();
	  
	  var divId2 = "photodiv2";
	  var imgId2 ="photoimg2";
	  var imgArray2= new Array(
		"images/door_closed_sml.jpg?v=0",
		"images/door_open_sml.jpg?v=0"
		
		);
	 
	 var object2 = new shuffler(divId2,imgId2,imgArray2,1.5,1);
	  object2.photoShufflerLaunch();
	  //YOU CAN DO AS MANY OBJECTS AS YOU WANT
	  
  }
  var shuffler = function(divId,imgId, imgArray, interval, interval)
  {

   this.gblPhotoShufflerDivId = divId;
   this.gblPhotoShufflerImgId = imgId; 
   this.gblImg = imgArray;
   this.gblPauseSeconds = interval;
   this.gblFadeSeconds = interval;
   this.gblRotations = 30;

  // 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;
  }
}