var Mars={
	submitFormOnSelectChange: function(formsSelector) {
		var formEls=$ES(formsSelector);
		if (!formEls) return false;

		// There may be multiple instances of the form on each page.
		for (var selectEl=null, i=formEls.length-1; i>=0; --i) {
			var formEl=formEls[i];

			selectEl=formEl.getElement('select');
			if (!selectEl) return false;

			// When the a field in the form is changed, submit the form.
			selectEl.addEvent('change', function() {
				formEl.submit();
			});
		}

		// IE has a problem with using binding formEl as the context of the
		// submit function, so we need to use a lambda function as the onchange
		// handler. We need to therefore de-reference the select element so that
		// it does not exist in the scope of that lambda function.
		formEls=null;
		selectEl=null;
		i=null;
	}
};


window.addEvent('domready', function() {
	Mars.submitFormOnSelectChange('form.locale');
});


var Slideshow=new Class({
	changeInterval: null,
	fadeOutDuration: null,

	fadeTimer: null,
	fadeFx: null,

	selectorEls: null,
	slideEls: null,

	currentIndex: null,
	nextIndex: null,
	previousIndex: null,
	slideCount: null,

	initialize: function(slideshowEl) {
		this.getElements(slideshowEl);
		this.getIndices();

		this.attachEvents();

		this.changeInterval=4000; // 4,000 milliseconds = 4 seconds
		this.fadeOutDuration=1000; // 1,000 milliseconds = 1 second

		this.setTimer();
	},

	attachEvents: function() {
		if (0==this.slideCount) return false;

		var container=this.slideEls[0].getParent().getParent();
		if (!container) return false;

		container.addEvent('click', this.handleClick.bindAsEventListener(this));
	},

	getElements: function(slideshowEl) {
		this.slideEls=slideshowEl.getElements('.slides li');
		this.slideCount=this.slideEls.length;

		this.selectorEls=slideshowEl.getElements('.selectors li');
	},

	getIndices: function() {
		this.currentIndex=0;
		this.nextIndex=1;
	},

	handleClick: function(e) {
		e=new Event(e);
		var target=$(e.target);

		if ('span'==target.getTag()) target=target.getParent();
		if ('a'!=target.getTag()) return;

		if (!target.href.toString().test(/#/)) return;
		e.preventDefault();
		target=target.getParent();

		var selectorEls=this.selectorEls;
		for (var i=this.slideCount-1; i>-1; --i) {
			if (target==selectorEls[i]) {
				return this.showArbitrary(i);
			}
		}
	},

	setActiveSelector: function() {
		var currentIndex=this.currentIndex;
		var selectorEls=this.selectorEls;

		for (var i=this.slideCount-1; i>-1; --i) {
			if (i==currentIndex) {
				selectorEls[i].addClass('active');
			} else {
				selectorEls[i].removeClass('active');
			}
		}
	},

	showArbitrary: function(nextSlideIndex) {
		clearTimeout(this.fadeTimer);
		if (this.fadeFx) {
			this.fadeFx.stop();
			this.fadeFx=null;
		}

		this.nextIndex=nextSlideIndex;
		this.showNext();
	},

	showNext: function() {
		if (this.currentIndex>=this.slideCount) this.currentIndex=0;

		var currentSlide=this.slideEls[this.currentIndex];
		currentSlide.setStyles({
			'z-index': 3,
			'opacity': 1
		});

		if (this.nextIndex==this.currentIndex) this.nextIndex=this.currentIndex+1;
		if (this.nextIndex>=this.slideCount) this.nextIndex=0;
		if (this.nextIndex==this.currentIndex) return false;

		var nextSlide=this.slideEls[this.nextIndex];
		nextSlide.setStyles({
			'z-index': 2,
			'opacity': 1
		});

		this.currentIndex=this.nextIndex++;
		this.setActiveSelector();

		this.fadeFx=new Fx.Styles(currentSlide, {
			'duration': this.fadeOutDuration,
			'wait': false,
			'transition': Fx.Transitions.Quad.easeOut,
			'onComplete': this.showNextCb.bind(this, [currentSlide, nextSlide])
		});
		this.fadeFx.start({'opacity': 0});
	},

	showNextCb: function(previousSlide, currentSlide) {
		var slideEls=this.slideEls;

		for (var i=this.slideCount-1; i>-1; --i) {
			if (slideEls[i]!=currentSlide) {
				slideEls[i].setStyles({
					'z-index': 1,
					'opacity': 1
				});
			}
		}

		this.setTimer();
	},

	setTimer: function() {
		this.fadeTimer=setTimeout(
			this.showNext.bind(this), this.changeInterval
		);
	}
});


window.addEvent('domready', function() {
	Mars.slideshow=new Slideshow($E('.slideshow'));
});