//// 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.var gblPhotoShufflerDivId = "photodiv";var gblPhotoShufflerImgId = "photoimg"; var gblImg = new Array("../photos/02.jpg?v=0","../photos/03.jpg?v=0","../photos/04.jpg?v=0","../photos/05.jpg?v=0","../photos/06.jpg?v=0","../photos/07.jpg?v=0","../photos/08.jpg?v=0","../photos/09.jpg?v=0","../photos/10.jpg?v=0","../photos/11.jpg?v=0","../photos/01.jpg?v=0");// preload imagesimageObj = new Image();for(i=0; i<gblImg.length; i++) {imageObj.src=gblImg[i];}var gblPauseSeconds = 4;var gblFadeSeconds = .85;var gblRotations = 50;// End Customization sectionvar gblDeckSize = gblImg.length;var gblOpacity = 100;var gblOnDeck = 0;var gblStartImg;var gblImageRotations = gblDeckSize * (gblRotations+1);window.onload = photoShufflerLaunch;function photoShufflerLaunch(){var theimg = document.getElementById(gblPhotoShufflerImgId);	gblStartImg = theimg.src; // save away to show as final imagedocument.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 imageif (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.srctheimg.src = gblImg[gblOnDeck];// set img opacity to 100setOpacity(theimg,100);	// shuffle the deckgblOnDeck = ++gblOnDeck % gblDeckSize;// decrement rotation counterif (--gblImageRotations < 1){  // insert start/final image if we're done  gblImg[gblOnDeck] = gblStartImg;}// slide next image underneaththediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';}function setOpacity(obj, opacity) {opacity = (opacity == 100)?99.999:opacity;// IE/Winobj.style.filter = "alpha(opacity:"+opacity+")";// Safari<1.2, Konquerorobj.style.KHTMLOpacity = opacity/100;// Older Mozilla and Firefoxobj.style.MozOpacity = opacity/100;// Safari 1.2, newer Firefox and Mozilla, CSS3obj.style.opacity = opacity/100;}