// Fancy Gallery
// 2009 Rensselaer Polytechnic Institute - ewp.rpi.edu

// Requires Prototype 1.6

var FancyGallery = Class.create({
	initialize: function (target, images, rotateCount, stoponImage, waitTime, transitionSpeed, sliceCount) {
		this.target = $(target);
		this.images = images;
		this.stoponImage =  stoponImage || this.images.length;
		this.stoponImage =  this.stoponImage < 1 ? 1 : this.stoponImage;
		this.stoponImage =  this.stoponImage > this.images.length ? this.images.length : this.stoponImage;
		this.rotateMax = 10001;
		this.rotateCount = rotateCount || this.rotateMax;
		this.animateTimerID = undefined;
		this.transitionSpeed = transitionSpeed || 1.5;
		this.waitTime = waitTime*1000 || 3000;
		this.sliceCount = sliceCount === undefined ? 7 : sliceCount;
		// for testing...
		//this.transitionSpeed = 0.5;
		//this.waitTime = 300;
		//this.sliceCount = 3

		this.readyTarget();

		this.toggleFlags = new Array(this.sliceCount);
		
		this.currentImage = undefined;
		this.futureImage = undefined;
		this.readyToAdvance = true;
		this.rotateIndex =  0; //index of rotated images
		this.accessIndex = -1; //index of the queue we're up to
		this.preload();
	},
	
	preload: function() {
		for (var i=0; i<this.images.length; i++) {
			var img = new Image();
			if (i==0) {
				img.onload = this.start.bind(this);
			}
			img.src = this.images[i];
		}
	},
	
	//Get target ready by creating slices
	readyTarget: function() {
		this.slices = new Array();
		var size = this.target.getDimensions();
		this.target.setStyle({position: "relative", overflow:"hidden"});//set as offset parent
		
		var eachWidth = Math.ceil(size.width/this.sliceCount);
		
		for (var i=0; i<this.sliceCount; i++) {
			var offset = eachWidth*i+'px';
			var e = new Element('div');
			e.setStyle({width:eachWidth+'px', height:size.height+'px', left:offset, backgroundPosition:'-'+offset+" center", backgroundColor:'transparent', position:'absolute'});
			this.target.insert({top:e});
			this.slices.push(e);
		}
	},
	
	//Reset toggle flags to false, set slice background to current image
	resetToggle: function() {
		for (var i=0; i<this.sliceCount; i++) {
			this.toggleFlags[i] = false;
			if (this.currentImage) {
				this.slices[i].setStyle({backgroundImage: 'url('+this.currentImage+')'});
			}
		}
	},
	
	advanceTransitionRatio: function () {
		this.tRatio += this.step;
		
		for (var i=0; i<this.sliceCount; i++) {
			var s = this.slices[i];
			var offset = i/(this.sliceCount-1);
			var x = this.tRatio+offset;
			
			var toggle = x > 0.5;
			
			if (x>0 && x<1) {
				s.setOpacity(Math.cos(x*Math.PI*2)/2+0.5);
			}
			//Use the toggle array to check if we need to set the bg image. This speeds things up big time.
			if (toggle && this.toggleFlags[i]===false) {
				s.setStyle({backgroundImage: 'url('+this.futureImage+')'});
				this.toggleFlags[i] = true;
				//s.setStyle({backgroundColor: toggle?'red':'blue'});
			}
		}
		if (this.tRatio > 1) {
			//cleanup
			clearInterval(this.animateTimerID);
			this.animateTimerID = undefined;
			setTimeout(this.start.bind(this), this.waitTime);
		}
	},
	
	//Begin a wipe
	start: function () {
		//var imgl = this.queue.items.length;
		//if (imgl < 2 || false) {
		//	this.readyToAdvance = true;
		//	return; //not ready to advance
		//}
		var imgl = this.images.length;

		// Count the number of rotations of the images
		if ((this.accessIndex+1)==imgl) {
			this.rotateIndex = (this.rotateIndex+1)%this.rotateMax;
			//alert("rotateIndex: "+this.rotateIndex+", rotateCount: "+this.rotateCount);
		}
		//alert("accessIndex+1: "+(this.accessIndex+1)+", stop: "+this.stoponImage);
		if (this.rotateIndex >= this.rotateCount) {
		  //alert("if-accessIndex+1: "+(this.accessIndex+1)+", imgl: "+imgl);
		  if ((this.accessIndex+1)==this.stoponImage) {
			return; // stop rotating the images
		  }
		}

		this.readyToAdvance = false;
		this.currentImage = this.futureImage;
		this.accessIndex = (this.accessIndex+1)%imgl;
		//this.futureImage = this.queue.items[this.accessIndex].readAttribute('src');
		this.futureImage = this.images[this.accessIndex];
		//alert("ci: "+this.currentImage+", fi: "+this.futureImage);
		this.resetToggle();
		
		this.tRatio = -1; //transition ratio, start at -1 to give a full cycle of pre-transition
		var framerate = 30;
		if (Prototype.Browser.MobileSafari) framerate = 10;
		//step = 60th of a sec divided by transition speed (reduce step to increase time)
		this.step = 1/framerate/this.transitionSpeed;
		if (this.animateTimerID) {
			clearInterval(this.animateTimerID);
		}
		this.animateTimerID = setInterval(this.advanceTransitionRatio.bind(this), 1000/(framerate));
	}
});