// JavaScript Document

var BoxShow = new Class({
	
	initialize: function(container){
		this.container = container;
		this.boxes = this.container.getElements('div');
		this.count = this.boxes.length;
		if (this.count < 2) return null;
		
		this.boxesFx = new Array();
		this.boxes.each(function(box, index){
		  this.boxesFx[index] = new Fx.Tween(box, { property: 'opacity', duration: 1000, link: 'chain' });
			this.boxesFx[index].set(0);
			box.setStyle('z-index', 0);
		}, this);
		
		// display first box
		this.current = this.count - 1;
		this.boxes[this.current].setStyle('z-index', 0);
		this.boxesFx[this.current].set(1);
		
		this.repeater = this.opacityToggle.periodical(5000, this);
	},

  opacityToggle: function(){
		var next = (this.current + 1)%this.count;
		this.boxes[next].setStyle('z-index', 1);
		this.boxesFx[next].start(1).chain(function(){
		  this.boxesFx[this.current].set(0);
			this.boxes[next].setStyle('z-index', 0);
			this.current = next;
		}.bind(this));
	}
});

window.addEvent('domready', function(){

	if ($$('.boxshow')){
		$$('.boxshow').each(function(element, index){
		  (function(){ new BoxShow(element); }).delay(index*0);
		});
	}
	
});