var SlideShow = new Class({

	setOptions: function(options) {
		this.options = Object.extend({
			duration: 900,
			wait: 6000,
			onComplete: Class.empty,
			onStart: Class.empty
		}, options || {});
	},
	
	initialize: function(container, hidePlay, options) {
		if (hidePlay) { display = 'none'; } else { display = 'block'; }
		this.setOptions(options);
		this.container = $(container);
		this.items = this.container.getElements('li');
		
		this.current = 0;
		this.stopped = false;
		
		this.width = 0;
		this.height = 0;
		
		this.items.each(function (element) {
			element.setStyle('opacity', 0);
			//if (!hidePlay) { element.setStyle('position', 'absolute'); }
			element.setStyle('position', 'absolute');
			this.width = Math.max(this.width, element.getSize().size.x);
			this.height = Math.max(this.height, element.getSize().size.y);
		}, this);
		
		this.controller = new Element('span', {
			'styles': {
				'display': 'block',
				'float': 'right',
				'height': '20px',
				'padding': 0,  // Was 1, but lowered for "hidePlay" examples.
				'background-color': '#FFF',
				'opacity': 0.9
			}
		}).injectInside(new Element('div', {
			'styles': {
				'position': 'relative',
				'padding': 0,
				'top': this.height - 22,
				'text-align': 'right'
			}
		}).injectInside(this.container));
		
		i = 0;
		this.items.each(function (element) {
			var i2 = i;
			this.items[i].button = new Element('a', {
				'styles': {
					'display': display,
					'float': 'left',
					'color': '#FFF',
					'width': '18px',
					'height': '18px',
					'margin': '2px 3px',
					'text-decoration': 'none',
					'text-align': 'center',
					'line-height': '12px',
					'font': 'bold 11px Verdana, sans-serif',
					'background': '#FFF no-repeat left url(assets/images/homepageslideshow/button_bg.gif)'
				},
				'events': {
					'click': (function(event) {
						var event = new Event(event);
						this.pause();
						this.transition(i2);
						event.stop();
						return false;
					}).bind(this)
				},
				'href': '#'
			}).setHTML(i+1).injectInside(this.controller);
			i++;
		}, this);
		
		this.playbutton = new Element('a', {
			'styles': {
				'display': display,
				'float': 'left',
				'width': '18px',
				'height': '18px',
				'margin': '2px 8px',
				'text-decoration': 'none',
				'font-weight': 'bold',
				'background': '#FFF no-repeat -18px 0 url(assets/images/homepageslideshow/play_pause.gif)'
			},
			'events': {
				'click': (function(event) {
					var event = new Event(event);
					this.pause();
					event.stop();
					return false;
				}).bind(this)
			},
			'href': '#'
		}).setHTML(' ').injectInside(this.controller);
		
		new Fx.Style(this.items[this.current], 'opacity', {duration: this.options.duration}).start(0, 1);
		this.items[this.current].button.setStyles({
			'background-position': '-18px 0'
		});
		
		this.next.delay(this.options.wait, this);
	},
	
	next: function() {
		if (this.stopped) return;
		
		to = this.current + 1;
		if (to >= this.items.length) to = 0;
		this.transition(to);
		
		this.timer = this.next.delay(this.options.wait, this);
	},
	
	transition: function(to) {
		if (this.current == to) return;
		
		new Fx.Style(this.items[this.current], 'opacity', {duration: this.options.duration}).start(1, 0);
		this.items[this.current].button.setStyles({
			'background-position': '0 0'
		});
		this.current = to;
		new Fx.Style(this.items[this.current], 'opacity', {duration: this.options.duration}).start(0, 1);
		this.items[this.current].button.setStyles({
			'background-position': '-18px 0'
		});
	},
	
	pause: function() {
		$clear(this.timer);
		this.stopped = !this.stopped;
		if (!this.stopped) this.next();
		this.playbutton.setStyle('background-position', this.stopped ? '0 0' : '-18px 0')
	}
});

var SlideShow2 = new Class({

	setOptions: function(options) {
		this.options = Object.extend({
			duration: 900,
			wait: 10000,
			onComplete: Class.empty,
			onStart: Class.empty
		}, options || {});
	},
	
	initialize: function(container, hidePlay, options) {
		if (hidePlay) { display = 'none'; } else { display = 'block'; }
		this.setOptions(options);
		this.container = $(container);
		this.items = this.container.getElements('li');
		
		this.current = 0;
		this.stopped = false;
		
		this.width = 0;
		this.height = 0;
		
		this.items.each(function (element) {
			element.setStyle('opacity', 0);
			//if (!hidePlay) { element.setStyle('position', 'absolute'); }
			element.setStyle('position', 'absolute');
			this.width = Math.max(this.width, element.getSize().size.x);
			this.height = Math.max(this.height, element.getSize().size.y);
		}, this);
		
		this.controller = new Element('span', {
			'styles': {
				'display': 'block',
				'float': 'right',
				'height': '20px',
				'padding': 0,  // Was 1, but lowered for "hidePlay" examples.
				'background-color': '#FFF',
				'opacity': 0.9
			}
		}).injectInside(new Element('div', {
			'styles': {
				'position': 'relative',
				'padding': 0,
				'top': this.height - 22,
				'text-align': 'right'
			}
		}).injectInside(this.container));
		
		i = 0;
		this.items.each(function (element) {
			var i2 = i;
			this.items[i].button = new Element('a', {
				'styles': {
					'display': display,
					'float': 'left',
					'color': '#FFF',
					'width': '18px',
					'height': '18px',
					'margin': '2px 3px',
					'text-decoration': 'none',
					'text-align': 'center',
					'line-height': '12px',
					'font': 'bold 11px Verdana, sans-serif',
					'background': '#FFF no-repeat left url(assets/images/homepageslideshow/button_bg.gif)'
				},
				'events': {
					'click': (function(event) {
						var event = new Event(event);
						this.pause();
						this.transition(i2);
						event.stop();
						return false;
					}).bind(this)
				},
				'href': '#'
			}).setHTML(i+1).injectInside(this.controller);
			i++;
		}, this);
		
		this.playbutton = new Element('a', {
			'styles': {
				'display': display,
				'float': 'left',
				'width': '18px',
				'height': '18px',
				'margin': '2px 8px',
				'text-decoration': 'none',
				'font-weight': 'bold',
				'background': '#FFF no-repeat -18px 0 url(assets/images/homepageslideshow/play_pause.gif)'
			},
			'events': {
				'click': (function(event) {
					var event = new Event(event);
					this.pause();
					event.stop();
					return false;
				}).bind(this)
			},
			'href': '#'
		}).setHTML(' ').injectInside(this.controller);
		
		new Fx.Style(this.items[this.current], 'opacity', {duration: this.options.duration}).start(0, 1);
		this.items[this.current].button.setStyles({
			'background-position': '-18px 0'
		});
		
		this.next.delay(this.options.wait, this);
	},
	
	next: function() {
		if (this.stopped) return;
		
		to = this.current + 1;
		if (to >= this.items.length) to = 0;
		this.transition(to);
		
		this.timer = this.next.delay(this.options.wait, this);
	},
	
	transition: function(to) {
		if (this.current == to) return;
		
		new Fx.Style(this.items[this.current], 'opacity', {duration: this.options.duration}).start(1, 0);
		this.items[this.current].button.setStyles({
			'background-position': '0 0'
		});
		this.current = to;
		new Fx.Style(this.items[this.current], 'opacity', {duration: this.options.duration}).start(0, 1);
		this.items[this.current].button.setStyles({
			'background-position': '-18px 0'
		});
	},
	
	pause: function() {
		$clear(this.timer);
		this.stopped = !this.stopped;
		if (!this.stopped) this.next();
		this.playbutton.setStyle('background-position', this.stopped ? '0 0' : '-18px 0')
	}
});