/* 

Flipbook Class:

	Version: 0.02
	Date: 2006-12-04
	Author: Marty Stake

Dependencies:

	prototype.js (http://conio.prototype.net) version RC_1
	effects.js
	scriptaculous.js


Parameters:

	Required
	--------
	element: 	string
				The ID of the containing element which houses the items to be "flipped"

	Optional
	--------
	duration: 	string
				The length of time when blending the on and off items
	className: 	string
				If provided, you set which items will be flipped.  Otherwise you will just get <img> tags within the base element.
	interval:	string
				The length of time one item stays on
				

Instantiation:

function build() {
	var flipper = new FlipBook('message-flip', {className: 'flipbook'});	
	var imgflipper = new FlipBook('image-flip', {duration: .3, interval: 5});	
}

Event.observe(window, 'load', build);
	


*/



FlipBook = Class.create(); 

FlipBook.prototype = {
	
	initialize: function(element, options) {
		
		// set the default options here - if you want to overwrite them, do that in the constructor
		this.options = Object.extend({
			duration: '2.5',
			className: '',
			interval: '10'			
		}, options || {} );
		
		
		this.currentShowing = 0;
		this.nextShowing = 1;
		this.element = element;
		
		this.container = $(element);
	
		// if we have a classname, only target elements with that classname.  Else, pick every element in the id (thats an image) //	
		if (this.options.className == '') {
			this.flipGroup = $A(this.container.getElementsByTagName('img'));
		}
		else {
			this.flipGroup = document.getElementsByClassName(this.options.className, this.container);
		}
		
		this.flipGroup.each(function(el, count) {
				$(el).setOpacity(0);
				el.id = element + "-page-" + count;
				el.style.display = "none";
			});
		
		this.totalEls = this.flipGroup.length - 1;
		this.showFirst(this.flipGroup.first());
		
		new PeriodicalExecuter(this.crossFade.bind(this), this.options.interval);
		
	},
	
	crossFade: function() {
	
		var hide = $(this.element + "-page-" + this.currentShowing);
		var show = $(this.element + "-page-" + this.nextShowing);
	
		show.style.display = "block";
	
		//new Effect.EffectName( element, required-params, [options] );
		new Effect.Opacity( hide, {duration: this.options.duration, from: 1, to: 0 });
		new Effect.Opacity( show, {duration: this.options.duration, from: 0, to: 1} );
		
		hide.style.zIndex = "0"; // do this so links go to the top on absolute positioning
		show.style.zIndex = "1000"; 
	
		this.advanceFrame();
	},
	
	advanceFrame: function() {
	
			this.currentShowing = this.nextShowing;
			
			if (this.nextShowing == this.totalEls) { 
				this.nextShowing = 0; 
			} 
			else { 
				this.nextShowing++;
			}
	
	},
	
	showFirst: function(el) {
	
		el.style.display = "block";
		$(el).setOpacity(1);
		el.style.zIndex = "1000";
	
	}
	
}


function build() {
	var flipper = new FlipBook('logos', {className: 'fb'});	
}

Event.observe(window, 'load', build);