var Slides = new Class({
	initialize: function(workingElement, request, options) {
		
		var slidelist = [];
		
		var obj_data = Json.evaluate(request);
		if(obj_data.error){
			this.error = true;
		} else {
			obj_data.data.each(function (img, i) {
				slidelist[i] = {src: decodeURIComponent(img.img), url: decodeURIComponent(img.url)};
			});
				
			workingElement = $(workingElement);
			workingElement.innerHTML = "";
			//workingElement.setStyle('cursor', 'pointer');
	
			Object.extend(this, options);
			
			var slides = [];
			
			slidelist.each(function (slideinfo, i) {
				
				var element = $(workingElement.appendChild(document.createElement('img')));
				
				element.addEvent('load', function() { this.loaded = true });
				Object.extend(element, slideinfo);
	
				element.setStyles({
					position: 'absolute',
					visibility: 'hidden',
					opacity: 0,
					zIndex: 0
				});
				slides.push(element);
			})
			
			Object.extend(this, {'aantal':slidelist.length});
			
			this.slides = slides;
			this.workingElement = workingElement;
		}
	},
	
	start: function() {
		if(!this.error){
			this.displaySlide(this.slides[0], true);
			return this;
		}
		
		return this;
	},
	
	// display a slide (or display it after it's loaded if it isn't ready yet)
	displaySlide: function(slide, autorotate) {
		slide = $(slide);
		
		if (slide.loaded == true) {
			this.forceDisplaySlide(slide, autorotate);
		} else {
			slide.addEvent('load', this.forceDisplaySlide.pass([slide, autorotate], this));
		}
		
		return this;
	},
	
	// force a slide to display, even if it isn't loaded
	forceDisplaySlide: function(slide, autorotate) {
		slide = $(slide);
		
		if (this.activeSlide) {
			this.activeSlide.setStyle.delay(this.transitionFor, this.activeSlide, ['opacity', 0]);
			this.activeSlide.setStyle('z-index', 0);
			this.fadeFx = new Fx.Style(this.activeSlide, 'opacity', {duration: this.transitionFor}).start(1, 0);
		}

		this.workingElement.addEvent('click', function () {window.location.href = slide.url; });

		this.activeSlide = slide;
		slide.setStyle('zIndex', 1);
		
		we_size = this.workingElement.getSize();
		sizes = slide.getSize();
		var links = Math.round((we_size.size.x - sizes.size.x) / 2);
		var boven = Math.round((we_size.size.y - sizes.size.y) / 2);
		//window.alert(links + " " + boven);
		slide.setStyles({'margin-left': links + 'px', 'margin-top': boven + 'px'});
		
		//window.alert("264 - " + sizes.size.x + "/2");
		//window.alert("115 - " + sizes.size.y + "/2");
		
		this.fadeFx = new Fx.Style(slide, 'opacity', {duration: this.transitionFor}).start(0, 1);
		
		if (autorotate && this.aantal > 1) {
			this.displaySlide.delay(this.transitionFor + this.showFor, this, [this.nextSlide(), autorotate])
		}
		
		return this;
	},
	
	// return the slide which will show next
	nextSlide: function() {
		var result = this.slides.indexOf(this.activeSlide) + 1;
		if (result >= this.slides.length) result = 0;
		return this.slides[result];
	}
})

Slides.start = function(slides, target, options) {
	return new Slides(slides, target, options).start();
}