//  Mootools Periodic Carousel Object - Written by Kristofer Baxter (kris@intellistrand.com)

//  Example Call:
//  new Carousel(elements(as mootools objects), triggers(as mootools objects), {options})
//	new Carousel($S('ul#agentCarousel'), $S('ul#agentSwitcher li'), $('agentsNext'), $('agentsPrevious'), {periodic: true, firstPeriod: 3000, elementWidth: 360, displayDuration: 6000, fxDuration: 1000, type: 'agents'});
	
var Carousel = new Class({

	setOptions: function(options){
		this.options = {
			activeImage: 'media/icons/periodicActive.gif',
			inactiveImage: 'media/icons/periodic.gif'
		}
		Object.extend(this.options, options || {});
	},

	initialize: function(elements, triggers, next, previous, options){
		this.elements = elements;
		this.triggers = triggers;
		this.setOptions(options);
		this.fx = new fx.Style(this.elements[0], 'margin-left', {duration: this.options.fxDuration});
		this.fx.now = 0;
		this.count = triggers.length;
		this.clicked = false;
		$A(triggers).each(function(el) {
			el.onclick = function() {
				this.triggers.each(function(el) {
					el.getElement('img').src=this.options.inactiveImage;
				}, this);
				el.blur();
				el.getElement('img').src = this.options.activeImage;
				this.clickRegistered(el);
				return false;
			}.bind(this);	
		}, this);
		next.onclick = function() {
			next.blur();
			this.clicked = true;
			this.nextView();
		}.bind(this);
		previous.onclick = function() {
			previous.blur();
			this.clicked = true;
			this.previousView();
		}.bind(this);
		if (this.options.periodic) {
			this.timer = $clear(this.timer);
			this.timer = this.show.delay(this.options.firstPeriod, this);
		}
	},

	previousView: function(el) {
		var newMargin = Math.round(this.fx.now) + this.options.elementWidth;
		var current = -1 * (newMargin/this.options.elementWidth);
		//console.log(current + " " + newMargin);
		if (current < 0) {
			current = this.count-1;
			newMargin = -1 * current*this.options.elementWidth;
		}
		this.triggers.each(function(el) {
			el.getElement('img').src=this.options.inactiveImage;
			if (el.title.split("carousel")[1] == (current+1)) el.getElement('img').src = this.options.activeImage;
		}, this);
		this.fx.custom(Math.round(this.fx.now), newMargin);
	},
	
	nextView: function(el) {
		var newMargin = Math.round(this.fx.now) - this.options.elementWidth;
		var current = -1 * (newMargin/this.options.elementWidth);
		if (current >= this.count) {
			current = 0;
			newMargin = 0;
		}
		this.triggers.each(function(el) {
			el.getElement('img').src=this.options.inactiveImage;
			if (el.title.split("carousel")[1] == (current+1)) el.getElement('img').src = this.options.activeImage;
		}, this);
		this.fx.custom(Math.round(this.fx.now), newMargin);
	},

	clickRegistered: function(el){
		this.clicked = true;
		var newMargin = -1 * (this.options.elementWidth * (el.title.split("carousel")[1]-1));
		this.fx.custom(Math.round(this.fx.now), newMargin);
	},
	
	isActive: function() {
		return this.clicked;
	},
	
	hault: function() {
		this.clicked = true;
	},
	
	show: function(el) {
		if (!this.clicked) {
			this.nextView(el);
			this.timer = this.show.delay(this.options.displayDuration, this);
		}
	}
});