// 
// SMWWAgency Jock Strap - Image Rotator
//
// based on Carl Camera's CSS Photo Shuffler v1.0 (http://iamacamera.org)
//
// 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 jockstrap = Class.create();	
jockstrap.prototype = {
	//
	//	Setup Variables
	//
	divID : 'jpgrotatorbox',
	imgID : 'jpgrotatorimg', 
	startImg : null, 
	pauseSeconds : 2.5, 
	fadeSeconds : .65, 
	rotations : 100, 
	images : null, 
	// end customization section
	deckSize : 0, 
	opacity : 100, 
	onDeck : 0, 
	startImg : null, 
	imageRotations : null, 
	
	initialize : function(pics) {
		this.images = pics;
		this.deckSize = this.images.length;
		this.imageRotations = this.deckSize * (this.rotations + 1);
		
		this.startImg = $(this.imgID).src;
		$(this.divID).style.backgroundImage = 'url(' + this.images[this.onDeck] + ')';
		setTimeout(this.fade.bind(this), this.pauseSeconds * 1000);
	},
	
	fade : function() {
		
		// determine delta based on number of fade seconds
		// the slower the fade the more increments needed
		var fadeDelta = 100 / (30 * this.fadeSeconds);

		// fade top out to reveal bottom image
		if (this.opacity < 2*fadeDelta ) {
			this.opacity = 100;
			// stop the rotation if we're done
			if (this.imageRotations < 1) return;
			this.shuffle();
			// pause before next fade
			setTimeout(this.fade.bind(this), this.pauseSeconds*1000);
		}
		else {
			this.opacity -= fadeDelta;
			$(this.imgID).setOpacity(this.opacity/100);
			setTimeout(this.fade.bind(this), 30);  // 1/30th of a second
		}	
	},
	
	shuffle : function() {
		// copy div background-image to img.src
		$(this.imgID).src = this.images[this.onDeck];
		// set img opacity to 100
		$(this.imgID).setOpacity(1);

		// shuffle the deck
		this.onDeck = ++this.onDeck % this.deckSize;
		// decrement rotation counter
		if (--this.imageRotations < 1) {
			// insert start/final image if we're done
			this.images[this.onDeck] = this.startImg;
		}

		// slide next image underneath
		$(this.divID).style.backgroundImage='url(' + this.images[this.onDeck] + ')';
	}	
}