﻿Effect.Transitions.easeOut = function(pos) {
	return 1 - Math.pow(0.5, 20 * pos);
};
var SlideshowType = {
	Horizontal: 1,
	Vertical: 2
};

var Slideshow = Class.create();
Slideshow.prototype = {
	initialize: function() {
		this.photos = $$('div.slideshow img');
		this.container = $$('div.slideshow');
		this.totalImages = this.photos.length;
		this.totalLoaded = 0;
		this.loaded = false;
		this.slideShowType = SlideshowType.Vertical;
		this.width = 0;
		this.height = 0;
		this.next = null;
		this.previous = null;
		this.transitionTime = 0.75;
		this.bookendPrevious = false;
		this.bookendNext = false;

		if (this.photos.length > 1 && this.container.length > 0) {
			this.container = this.container[0];
			this.direction = 1;
			this.distance = 0;
			this.isMoving = false;
			this.slideShowType = (this.container.up().hasClassName('vertical') || this.container.up().hasClassName('showrooms') || this.container.up().hasClassName('left')) ? SlideshowType.Vertical : SlideshowType.Horizontal;
			this.width = parseInt(this.container.getStyle('width'));
			this.height = parseInt(this.container.getStyle('height'));
			this.next = this.container.select('a.next')[0];
			this.previous = this.container.select('a.previous')[0];
			this.previous.hide();
			this.next.hide();
			/* Need to run it on page load to avoid
			'Operation Cancelled' errors in IE7 - grr! */
			Event.observe(window, 'load', this.onLoad.bind(this));
		}
	},

	onLoad: function(e) {
		for (var x = 0; x < this.photos.length; x++) {
			this.preload(x);
			
		}
	},

	create: function() {
		this.index = this.photos.length - 1;
		this.outer = new Element('div');
		this.inner = new Element('div');
		this.container.insert(this.outer);
		this.outer.insert(this.inner);
		this.indicator = new Element('ul');
		this.container.insert(this.indicator);

		for (var x = 0, y = this.photos.length; x < y; x++) {
			this.inner.insert(this.photos[x]);
			this.photos[x].show();
		}

		for (var x = this.photos.length - 1, y = 0; x >= y; x--) {
			var li = new Element('li');
			li.innerText = (x + 1);
			if (x == this.index) {
				li.addClassName('selected');
			}
			this.indicator.insert(li);
		}

		this.indicator.setStyle({
			left: (this.width / 2 - ((this.photos.length *
				parseInt(li.getStyle('width')) +
				parseInt(li.getStyle('margin-right')) +
				parseInt(li.getStyle('margin-left'))) / 2) - 12) + 'px'
		});

		/* Outer container */
		this.outer.setStyle({
			cssFloat: 'left',
			position: 'relative',
			clear: 'both',
			width: this.width + 'px',
			height: (this.slideShowType == SlideshowType.Horizontal) ? '367px' : '514px',
			overflow: 'hidden'
		});
		Event.observe(this.outer, 'mousemove', this.mouseMove.bind(this));
		Event.observe(this.outer.up(), 'mouseleave', this.mouseOut.bind(this));

		/* Inner Container */
		//if (this.slideShowType == SlideshowType.Horizontal) {
		this.inner.setStyle({
			cssFloat: 'left',
			position: 'absolute',
			width: (this.photos.length * this.width) + 'px',
			height: this.height + 'px'
		});
		//}
		//else {
		//	this.inner.setStyle({
		//		cssFloat: 'left',
		//		position: 'absolute',
		//		width: (this.width) + 'px',
		//		height: (this.photos.length * this.height) + 'px'
		//	});
		//}

		/* Buttons */
		if (this.previous) {
			Event.observe(this.previous, 'click', this.onPrevious.bind(this));
		}

		if (this.next) {
			Event.observe(this.next, 'click', this.onNext.bind(this));
		}

		//if (this.slideShowType == SlideshowType.Horizontal) {
		for (var x = 0, y = this.photos.length; x < y; x++) {
			this.photos[x].setStyle({
				cssFloat: 'left',
				clear: 'none'
			});
		}

		//}
	},

	mouseMove: function(e) {
		var x = Event.pointerX(e) - Event.element(e).cumulativeOffset().left;
		var half = this.width / 2;

		if (x > half && x <= this.width) {
			this.next.show();
			this.previous.hide();
		}
		if (x < half && x >= 0) {
			this.previous.show();
			this.next.hide();
		}
	},

	mouseOut: function(e) {
		this.previous.hide();
		this.next.hide();
	},

	isPreLoaded: function() {
		if (this.totalImages == this.totalLoaded) {
			this.loaded = true;
			this.create();
		}
	},

	onNext: function(e) {
		this.direction = 1;
		this.animate();
	},

	onPrevious: function(e) {
		this.direction = 0;
		this.animate();
	},

	onEnd: function(e) {
		this.isMoving = false;
	},

	getNextImageIndex: function() {
		this.bookendPrevious = false;
		if (this.index == 0) {
			this.bookendNext = true;
			return this.index;
		}

		if (this.direction == 0) {
			//if (this.slideShowType == SlideshowType.Horizontal) {
			this.distance = 0 - (this.width * 2);
			//}
			//else {
			//	this.distance = 0 - (this.height * 2);
			//}
			return (this.index - 2);
		}

		//if (this.slideShowType == SlideshowType.Horizontal) {
		this.distance = 0 - this.width;
		//}
		//else {
		//	this.distance = 0 - this.height;
		//}

		return (this.index - 1);
	},

	getPrevImageIndex: function() {
		this.bookendNext = false;

		if (this.index == this.photos.length - 1) {
			this.bookendPrevious = true;
			return this.index;
		}

		if (this.direction == 1) {
			//if (this.slideShowType == SlideshowType.Horizontal) {
			this.distance = (this.width * 2);
			//}
			//else {
			//	this.distance = (this.height * 2);
			//}

			return (this.index + 2);
		}

		//if (this.slideShowType == SlideshowType.Horizontal) {
		this.distance = this.width;
		//}
		//else {
		//	this.distance = this.height;
		//}
		return (this.index + 1);
	},

	animate: function() {
		if (!this.isMoving) {
			this.isMoving = true;

			if (this.direction == 1) {
				this.index = this.getNextImageIndex();

				if (this.bookendNext) {
					this.isMoving = false;
					return;
				}
			}
			else {
				this.index = this.getPrevImageIndex();

				if (this.bookendPrevious) {
					this.isMoving = false;
					return;
				}
			}

			this.endtimer = setTimeout(this.onEnd.bind(this), (this.transitionTime * 1000) - 10); /* Weirdness here, need to subtract a bit of time to enable faster clicking */
			//if (this.slideShowType == SlideshowType.Horizontal) {
			this.effect = new Effect.MoveBy(this.inner, 0, this.distance, {
				duration: this.transitionTime,
				transition: Effect.Transitions.easeOut
			});
			//}
			//else {
			//	this.effect = new Effect.MoveBy(this.inner, this.distance, 0, {
			//		duration: this.transitionTime,
			//		transition: Effect.Transitions.easeOut
			//	});
			//}

			var indicators = this.container.select('ul li');
			for (var x = 0, y = indicators.length; x < y; x++) {
				var li = indicators[x];
				li.removeClassName('selected');
				if (this.index == (y - x - 1)) {
					li.addClassName('selected');
				}
			}
		}
	},

	preload: function(index) {
		var img = new Image;
		Event.observe(img, 'load', this.onImageLoad.bind(this));
		Event.observe(img, 'error', this.onImageError.bind(this));
		Event.observe(img, 'abort', this.onImageAbort.bind(this));
		img.src = this.photos[index].src;
		img.index = index;
		img.element = this.photos[index];
	},

	onImageLoad: function(e) {
		this.totalLoaded++;
		this.isPreLoaded();
	},

	onImageError: function(e) {
		this.totalImages--;
		var index = Event.element(e).index;
		this.photos[index].remove();
		this.photos.splice(index, 1);
	},

	onImageAbort: function(e) {
		this.totalImages--;
		var index = Event.element(e).index;
		this.photos[index].remove();
		this.photos.splice(index, 1);
	}
};

Array.prototype.remove = function(s) {
	for (var x = 0; x < this.length; x++) {
		if (s == this[x]) {
			this.splice(x, 1);
		}
	}
};


var slideshow = new Slideshow();

