//
  // CSS Photo Shuffler v1.0 by
  //   Carl Camera
  //   http://iamacamera.org 
  //
  // SetOpacity Function and inpiration from Photo Fade by
  //   Richard Rutter
  //   http://clagnut.com
  //
  // License: Creative Commons Attribution 2.5  License
  //   http://creativecommons.org/licenses/by/2.5/
  //

  // Customize your photo shuffle settings
  // 
  // * Surround the target <img /> with a <div>. specify id= in both
  // * set background-repeat:no-repeat in CSS for the div
  // * The first and final photo displayed is in the html <img> tag
  // * The array contains paths to photos you want in the rotation. 
  //   If you want the first photo in the rotation, then it's best to
  //   put it as the final array image.  All photos must be same dimension
  // * The rotations variable specifies how many times to repeat array.
  //   images. zero is a valid rotation value.


 

 window.onload = function() {

 
  fader_1.photoShufflerLaunch();
  fader_2.photoShufflerLaunch();
  fader_3.photoShufflerLaunch(); 
 }

 function Fader() {

  this.gblPhotoShufflerDivId = "photodiv";
  this.gblPhotoShufflerImgId = "photoimg"; 
  this.gblImg = new Array();
  this.className = "fader";
  
  
  this.gblPauseSeconds = 7.25;
  this.gblFadeSeconds = .85;
  this.gblRotations = 10;

  // End Customization section
  
  this.gblDeckSize = this.gblImg.length;
  this.gblOpacity = 100;
  this.gblOnDeck = 0;
  this.gblStartImg;
  this.gblImageRotations = this.gblDeckSize * (this.gblRotations+1);

 }
  //
  
  
  Fader.prototype.addImgs = function(imgs) {
	  this.gblImg = imgs;
	  this.gblDeckSize = this.gblImg.length;	  
	  this.gblImageRotations = this.gblDeckSize * (this.gblRotations+1);	  
  }
  
  Fader.prototype.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] + ')';
	
	//alert(Math.random()*200);
	setTimeout(this.className+".photoShufflerFade()",this.gblPauseSeconds*(Math.random()*20));
  }

  Fader.prototype.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(this.className+".photoShufflerFade()",this.gblPauseSeconds*(500+(Math.random()*500)));
	}
	else
	{
	  this.gblOpacity -= fadeDelta;
	  this.setOpacity(theimg,this.gblOpacity);
	  setTimeout(this.className+".photoShufflerFade()",30);  // 1/30th of a second
	}
  }

  Fader.prototype.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
		var rand_no = Math.round(Math.random() * (this.gblDeckSize-1) );

	this.gblOnDeck = rand_no; //++(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] + ')';
  }

  Fader.prototype.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;
  }

 var fader_1 = new Fader;
 fader_1.gblPhotoShufflerDivId = "photodiv_1";
 fader_1.gblPhotoShufflerImgId = "photoimg_1";
 
 fader_1.addImgs ( new Array('images/header1.jpg','images/header3.jpg','images/header5.jpg','images/header7.jpg') );
 fader_1.className = "fader_1";
 //fader_1.gblPauseSeconds = 5.5;
  var fader_2 = new Fader;
 fader_2.gblPhotoShufflerDivId = "photodiv_2";
 fader_2.gblPhotoShufflerImgId = "photoimg_2";
fader_2.addImgs ( new Array('images/header2.jpg','images/header4.jpg','images/header6.jpg') );
 fader_2.className = "fader_2";
  //fader_2.gblPauseSeconds = 7.5;
 
  var fader_3 = new Fader;
 fader_3.gblPhotoShufflerDivId = "photodiv_3";
 fader_3.gblPhotoShufflerImgId = "photoimg_3";
fader_3.addImgs ( new Array('images/header8.jpg') );
 fader_3.className = "fader_3";
  //fader_3.gblPauseSeconds = 2.5;