/*
   CSS Photo Shuffler v1.0 by
     Carl Camera
     http://iamacamera.org 
  
   SetOpacity Function and inpiration from Photo Fade by
     Richard Rutter
     http://clagnut.com
  
   Parameter based calling onload by
     Ariell Friedman
	 http://www.limestudio.com.au
  
   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
   
     	 
	 eg:
     <div id="photodiv">
         <img src="image1.jpg" width="50" height="50" border="0" id="photoimg"/>
     </div>
	 
   * Include javascript and call photoShufflerLaunch(images, hrefs, pausesecs, fadesecs, rotations) function onload of target page.
   
     eg:
	 <script type="text/javascript" src="js/photoshufflers/linkedphotoshuffler.js"></script>
     <script type="text/javascript">
     window.onload = function() { 
       photoShufflerLaunch("image2.jpg,image3.jpg,image4.jpg,image1.jpg",7,2,100);
       //fn2Name();
     }
     </script>

   * 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.
*/

  var gblPhotoShufflerDivId = "photodiv";
  var gblPhotoShufflerImgId = "photoimg"; 
  var gblImg;
  var gblPauseSeconds;
  var gblFadeSeconds;
  var gblRotations;
  

  // End Customization section
  
  var gblDeckSize;
  var gblImageRotations;
  var gblOpacity = 100;
  var gblOnDeck = 0;
  var gblStartImg;

  
  function photoShufflerLaunch(images, pausesecs, fadesecs, rotations)
  {
	gblImg = images.split(",");
	gblDeckSize = gblImg.length;
	gblImageRotations = gblDeckSize * (gblRotations+1);
	gblPauseSeconds = pausesecs;
	gblFadeSeconds = fadesecs;
	gblRotations = rotations;
	
	//preload images
	if (document.images) {
      preload_image_object = new Image();
	  var i = 0;
      for(i=0; i<gblDeckSize; i++) 
        preload_image_object.src = gblImg[i];
	}
	
  	var theimg = document.getElementById(gblPhotoShufflerImgId);
        gblStartImg = theimg.src; // save away to show as final image

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

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

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

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

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

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

  function setOpacity(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;
  }