var carouselExt = {
	init: function(panels, controllers, eventType, offset) {
		if ($chk($$(panels))) {
		   carouselExt = new CarouselExt({
										controllers : controllers,										
										panels : panels,
										eventType : eventType,
										offset: offset});
		}
	}
}

CarouselExt = new Class ({
	Implements: [Options],

	options: {
		controllers : '',		
		panels : 'panels',
		eventType : 'click',
		offset: '605px'
	},

	controllers : null,	
	panels : null,
	slides : null,
	currentPanel : 0,
	offset: '605px',
	effectProperty : 'left',
	timer: null,
	timeInterval : 4500,

	initialize: function(options) {
		this.setOptions(options);
		this.controllers = $$(this.options.controllers);
		this.panels = $$(this.options.panels);
		
		this.slides = new Array();
		// Initialize the toggle events
		this.panels.each(function(el,key) {
			var slideE = null;
			slideE = new Fx.Tween(el);				
			this.slides.include(slideE);
			el.addEvent('mouseover', function(e) {
				e.stop();
				if (this.timer) {
					clearInterval(this.timer);
				}
			}.bind(this));
			el.addEvent('mouseout', function(e) {
				e.stop();
				if (this.timer) {
					this.timer = this.run.periodical(this.timeInterval, this);
				}
			}.bind(this));
		}.bindWithEvent(this));			
		
		this.controllers.each(function(elE) {
			elE.addEvent('click', function(e) {
				e.stop();
			});
			elE.addEvent('mouseover', function(e) {
				var hit = parseInt(elE.get('text'));
				this.run(hit);				
				clearInterval(this.timer);
			}.bind(this));
			elE.addEvent('mouseout', function(e) {
				if (this.timer) {
					this.timer = this.run.periodical(this.timeInterval, this);
				}
			}.bind(this));
		}.bind(this));
		
		if (this.panels) {
			this.timer = this.run.periodical(this.timeInterval, this);
		}
	},

	run: function() {				
		if (arguments.length > 0) {
			nextPanel = arguments[0];
		} else {
			// Start sliding
			var nextPanel = this.currentPanel + 1;
			if (nextPanel >= this.slides.length) {
				nextPanel = 0;
			}
		}
		this.controllers[this.currentPanel].removeClass('highlight');
		this.controllers[nextPanel].addClass('highlight');
		
		if (this.slides.length > 0) {
			this.slides[this.currentPanel].onComplete = function() {
				this.lock = false;				
			}.bindWithEvent(this);
			this.lock = true;
			this.slides[this.currentPanel].start(this.effectProperty, '0', '-' + this.options.offset);
			this.slides[nextPanel].start(this.effectProperty, this.options.offset, '0');								
			this.currentPanel = nextPanel;												
		}		

			// Adds onClick events to each controller.
//			this.nextController.addEvent(this.options.eventType, function(e) {
//				e.stop();
//				if (this.lock) {
//					return;
//				}
//				var nextPanel = this.currentPanel + 1;
//				if (nextPanel >= this.slides.length) {
//					nextPanel = 0;
//				}
//				this.slides[this.currentPanel].onComplete = function() {
//					this.lock = false;
//				}.bindWithEvent(this);
//				this.lock = true;
//				this.slides[this.currentPanel].start(this.effectProperty, '0', '-' + offset);
//				this.slides[nextPanel].start(this.effectProperty, offset, '0');
//				this.currentPanel = nextPanel;
//			}.bindWithEvent(this));

//			this.previousController.addEvent(this.options.eventType, function(e) {
//				e.stop();
//				if (this.lock) {
//					return;
//				}
//				var previousPanel = this.currentPanel - 1;
//				if (previousPanel < 0) {
//					previousPanel = this.slides.length - 1;
//				}
//				this.slides[this.currentPanel].onComplete = function() {
//					this.lock = false;
//				}.bindWithEvent(this);
//				this.lock = true;
//				this.slides[this.currentPanel].start(this.effectProperty, '0', offset);
//				this.slides[previousPanel].start(this.effectProperty, '-' + offset, '0');
//				this.currentPanel = previousPanel;
//			}.bindWithEvent(this));		
	}
});