/* @UK PLC Stage - 31/03/2009
Very simple div fade out effects using Mootools 1.2 */

var Rotater = new Class({
	Implements: [Options,Events],
	
	options: {
		period: 3000, //time set
		startDiv: null
	},
	
	initialize: function(divs, tabs, options) {
		this.setOptions(options);
		this.divs = divs;
		this.tabs = tabs;
		this.currentDiv = 0;
		this.rotating = null;
		this.divs.each(function(div, index) {
			var tab = this.tabs[index];
			tab.addEvent('mouseenter', this.onMouseEnter.bindWithEvent(this, div))
			tab.addEvent('mouseleave', this.onMouseLeave.bindWithEvent(this, div));
			if (index != this.currentDiv) div.fade(0);
		}, this);
	},
	
	rotate: function() {
		this.divs[this.currentDiv].fade(0);
		this.currentDiv =  (this.currentDiv + 1 < this.divs.length) ? this.currentDiv + 1 : 0;
		this.divs[this.currentDiv].fade(1);
	},
	
	start: function() {
		this.rotating = this.rotate.periodical(this.options.period, this);
	},
	
	stop: function() {
		$clear(this.rotating);
	},
	
	onMouseEnter: function(e, div) {
		this.stop();
		this.divs.each(function(d, index) {
			if (d == div) {
			d.fade(1)
			this.currentDiv = index;
			} else d.fade(0);
		}, this);
	},
	
	onMouseLeave: function(e) {
		this.start();
	}
});

window.addEvent('domready', function() {
	var rotater = new Rotater([$('screen1'), $('screen2'), $('screen3')], [$('tab1'), $('tab2'), $('tab3')]); // Add any other divs and tabs here
	rotater.start();
})