var P21Slideshow = new Class({
	options: {
		delay: 3000,			// duration to show the slide
		duration: 1500,	// duration to transition the image
		transition: Fx.Transitions.Cubic.easeOut,
		width: '518px',
		height: '363px',
		title1: '',
		title2: ''
	},
	initialize: function(element, data, options) {
		this.setOptions(options);
		
		var preloadImages = new Array();
				
		this._index = -1;
		this._element = element;
		this._data = data;
		this._slides = new Array();
		this._timeoutSlideOut = null;
		this._state = "running";
		
		this._element.addEvent('mouseenter', 
			function() {
				// pause slideshow
				this._state = "paused"; // validated in slideOut
				if(this._timeoutSlideOut) {
					clearTimeout(this._timeoutSlideOut);
				}
			}.bind(this)
		);
		this._element.addEvent('mouseleave', 
			function() {
				// resume slideshow
				if(this._state != "stopped") {
					this._state = "running"; // validated in slideOut
				}
				this.slideOut();
			}.bind(this)
		);
		for(var i = 0; i < this._data.length; i++) {
			// push img urls into array for preload via Asset.images
			preloadImages.push(data[i][0]); 
			
			var container = new Element("div", {
				"styles": {
					"opacity": "0",
					"position": "absolute",
					"left": "0px",
					"top": "0px",
					"margin": "0px",
					"border": "0px"
				},
				"class": "ssElement"
			}).inject(this._element);
			
			var anchor = new Element("a", {
				"href": data[i][1]
			}).inject(container);
			anchor.addEvent('click',
				function() {
					// stop slideshow if running
					this._state = "stopped"; // validated in slideOut
					if(this._timeoutSlideOut) {
						clearTimeout(this._timeoutSlideOut);
					}
				}.bind(this)
			);
			
			var img = new Element("img", {
				"src": data[i][0],
				"styles": {
					"width": this.options.width,
					"height": this.options.height
				}						
			}).inject(anchor);
			
			this._slides.push(container);
		}
		
		this._elementLoading = new Element("div", {
			"class": "ssElementLoading"
		}).inject(this._element);

		// Preload Images 		
		new Asset.images(preloadImages, {
			onComplete: function() {
				this._elementLoading.style.display = "none";
				this.slideIn();
			}.bind(this)
		});
	},
	slideIn: function() {
		var Slideshow = this;
	
		// clear slideOut 
		if(this._timeoutSlideOut) {
			clearTimeout(this._timeoutSlideOut);
		}
	
		this._index++;
		if(this._index >= this._data.length) {
			this._index = 0;
		}

		if(this.options.title1 != '') {
			$(this.options.title1).set('html', this._data[this._index][2]);
			if(this.options.title2 != '') {
				$(this.options.title2).set('html', this._data[this._index][2]);
			}
		}
		
		// fade in the slide
		this._slides[this._index].get('tween', {property: 'opacity', 
			duration: this.options.duration,
			transition: this.options.transition
		}).start(0, 1).chain(
			function() {
				this.slideOut();
			}.bind(this)
		);
	},
	slideOut: function() {
		if(this._state == "running") {
			this._timeoutSlideOut = setTimeout(
				function() {
					if(this.options.title1 != '') {
						$(this.options.title1).set('html', '');
						if(this.options.title2 != '') {
							$(this.options.title2).set('html', '');
						}
					}
					// fade OUT the current slide
					this._slides[this._index].get('tween', {property: 'opacity', 
						duration: this.options.duration,
						transition: this.options.transition
					}).start(1, 0)
					// call the next slide
					this.slideIn();	
				}.bind(this), 
				this.options.delay
			);
		}
	}
});
P21Slideshow.implement(new Options);