var Slides = new Class({
	initialize: function(workingElement, imgs, options) {
		
		var slidelist = [];

		imgs.each(function (img, i) {
			var url = options.target ? options.target : img.url;				
			slidelist[i] = {src: decodeURIComponent(img.img), url: decodeURIComponent(url), title: decodeURIComponent(img.title)};
		});
			
		workingElement = $(workingElement);
		workingElement.set('html', '');
		//workingElement.setStyle('cursor', 'pointer');
	
		var slides = [];

		$extend(this, options);

		slidelist.each(function (slideinfo, i) {
			//var element = $(workingElement.appendChild(document.createElement('img')));
			var element = new Element('img');
			element.addEvent('load', function() { this.loaded = true });
			$extend(element, slideinfo);

			element.setStyles({
				position: 'absolute',
				visibility: 'hidden',
				opacity: 0,
				zIndex: 0
			});
			
			if(!this.link){
				$(workingElement).adopt(element);
			} else {
					var lnk = new Element('a', {'href':slideinfo.url, 'rel':'milkbox:'+this.rel, 'title':slideinfo.title}).grab(element);
					$(workingElement).adopt(lnk);
			}
			slides.push(element);							
				
		}.bind(this));
			
		$extend(this, {'aantal':slidelist.length});						
		
		this.slides = slides;
		this.workingElement = workingElement;						
	},
	
	print_r: function(theObj){
		if(theObj.constructor == Array || theObj.constructor == Object){
			var txt = "";
			for(var p in theObj){
		  		if(theObj[p].constructor == Array|| theObj[p].constructor == Object){
					txt += "["+p+"] => "+typeof(theObj)+"\r\n";
					txt += "\t";
					txt += this.print_r(theObj[p]);
		  		} else {
					txt += "["+p+"] => "+theObj[p]+"\r\n";
		  		}
			}
	  		this.log(txt);
		}
	},
	
	log: function(text, args) {
		if (window.console) console.log(text.substitute(args || {}));
	},
	
	start: function() {
		if(!this.error){
			if(this.init_mb){var milkbox = new Milkbox();}
			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(this.activeSlide, 'opacity', {duration: this.transitionFor}).start(1, 0);
			this.activeSlide.set('tween', {duration: this.transitionFor});
			this.fadeFx = this.activeSlide.fade(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.x - sizes.x) / 2);
		var boven = Math.round((we_size.y - sizes.y) / 2);

		slide.setStyles({'margin-left': links + 'px', 'margin-top': boven + 'px'});
		
		
		//this.fadeFx = new Fx(slide, 'opacity', {duration: this.transitionFor}).start(0, 1);
		slide.set('tween', {duration: this.transitionFor});
		this.fadeFx = slide.fade(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();
}