document.observe("dom:loaded", function() {
	var slide = $('photoslider');
	if (!slide) return;

	window.photoslider = new PhotoSlider(slide);
	if (PhotoSlider.autoplay) window.photoslider.play();
});

var PhotoSlider = Class.create({

	autoplay: false,
	playInterval: 2,

	initialize: function(container) {
		this.container = container;
		this.slider = container.down('.slider');
		this.container.slide = this.slider.slide = this;

		this.prevArrow = this.createArrow('prevarrow', 'previous');
		this.nextArrow = this.createArrow('nextarrow', 'next');
		this.container.appendChild(this.prevArrow);
		this.container.appendChild(this.nextArrow);
	},

	createArrow: function(name, callback) {
		var arrow = new Element('div')
			.addClassName(name)
			.setStyle({ opacity: 0, cursor: 'pointer', height: this.container.getHeight()+'px' });

		arrow.slide = this;
		arrow.callback = callback;

		// Function
		arrow.fade = function(to) {
			if (this.effect && this.effect.state && this.effect.state != 'idle') this.effect.cancel();
			this.effect = new Effect.Opacity(this, { duration: .4, from: this.getStyle('opacity'), to: to });
		}
		arrow.doAction = function() {
			this.slide[this.callback]();
		}

		// Events
		arrow.observe('mouseover', function(event) { // Fade in
			event.element().fade(.8);
		});
		arrow.observe('mouseout', function(event) { // Fade out
			event.element().fade(0);
		});
		arrow.observe('click', function(event) { // Click
			event.element().doAction();
		});

		return arrow;
	},

	next: function() {
		if (this.isSliding) return;
		this.slide(PhotoSlider.getNextSlide(), 'right');
	},

	previous: function() {
		if (this.isSliding) return;
		this.slide(PhotoSlider.getPreviousSlide(), 'left');
	},

	slide: function(element, direction) {
		if (this.isSliding || !element.hasClassName('photo') || (direction != 'right' && direction != 'left')) return;
		var right = direction == 'right';

		// Insert the element and adjust position
		if (right) {
			this.slider.insert({ bottom: element });
		} else {
			this.slider.insertBefore(element, this.slider.firstDescendant());
			this.slider.style.left = -this.container.getWidth() + 'px';
		}

		//setTimeout(function() {
			new Effect.Move(this.slider, {
				x: right ? -this.container.getWidth() : +this.container.getWidth(),
				y: 0,
				mode: 'relative',
				duration: 1,
				fps: 15,
				beforeStart: function(event) {
					event.element.slide.isSliding = true;
				},
				afterFinish: function(event) {
					var slider = event.element;
					slider.slide.element = slider.select('.photo')[right? 0 : 1].remove();
					slider.style.left = '0';
					slider.slide.isSliding = false;
					if (slider.slide.isPlaying()) slider.slide.play(); // Restart the timer to prevent flip-flop
				}
			});
		//}.bind(this), 900);
	},

	play: function(seconds) {
		if (this.isPlaying()) this.stop();

		if (!seconds || seconds < 0) seconds = this.playInterval;
		else this.playInterval = seconds;

		this.timer = new PeriodicalExecuter(function(timer) {
			timer.slider.next();
		}, seconds);
		this.timer.slider = this;
	},

	isPlaying: function() {
		return this.timer && this.timer instanceof PeriodicalExecuter;
	},

	stop: function(seconds) {
		if (!this.isPlaying()) return;
		this.timer.stop();
		delete this.timer;
	}

});