var P21SlideshowHome = new Class({
	options: {
		delay: 3000,			// duration to show the slide
		durationImage: 1500,	// duration to transition the image
		durationText: 750,		// duration to transition the text
		transition: Fx.Transitions.Cubic.easeOut
	},
	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._elementAnchor = new Element("a", {
			"href": ""
		}).inject(this._element);
		
		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)
		);
		this._elementAnchor.addEvent('click',
			function() {
				// stop slideshow if running
				this._state = "stopped"; // validated in slideOut
				if(this._timeoutSlideOut) {
					clearTimeout(this._timeoutSlideOut);
				}
			}.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",
					"background-image": "url('" + data[i][0] + "')",
					"background-position": "center center"
				},
				"class": "ssElement"
			}).inject(this._elementAnchor);
			
			this._slides.push(container);
		}
		
		this._elementLoading = new Element("div", {
			"class": "ssElementLoading"
		}).inject(this._elementAnchor);
		
		this._elementText = new Element("div", {
			"styles": {
				"opacity": "0"
			},
			"class": "ssElementText"
		}).inject(this._elementAnchor);
		
		var p = new Element("p").inject(this._elementText);
		
		this._elementTextTitle = new Element("a").inject(p);
		this._elementTextTitle.set('class', 'df-featured');
		this._elementTextDescription = new Element("span").inject(p);
		
		// 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;
		}

		// set the href
		this._elementAnchor.href = this._data[this._index][1];
		// fade in the slide
		this._slides[this._index].get('tween', {property: 'opacity', 
			duration: this.options.durationImage,
			transition: this.options.transition
		}).start(0, 1).chain(
			function() {
				// set the title and description
				this._elementTextTitle.set('text', this._data[this._index][2]);
				this._elementTextDescription.set('text', this._data[this._index][3]);
				// fade in title and description
				this._elementText.get('tween', {property: 'opacity', 
					duration: this.options.durationText,
					transition: this.options.transition
				}).start(0, 1);
				this.slideOut();
			}.bind(this)
		);
	},
	slideOut: function() {
		if(this._state == "running") {
			this._timeoutSlideOut = setTimeout(
				function() {
					// fade OUT the text
					this._elementText.get('tween', {property: 'opacity', 
						duration: this.options.durationText,
						transition: this.options.transition
					}).start(1, 0);
					// fade OUT the current slide
					this._slides[this._index].get('tween', {property: 'opacity', 
						duration: this.options.durationImage,
						transition: this.options.transition
					}).start(1, 0)
					// call the next slide
					this.slideIn();	
				}.bind(this), 
				this.options.delay
			);
		}
	}
});
P21SlideshowHome.implement(new Options);