var SimpleSlideShow = new Class({
	
	Implements: Options,
	
	options: {
		fadeTime: 1000,
		stayTime: 3000,
		onFade: $empty
	},
	
	initialize: function(wrapper, images, options) {
		this.setOptions(options);
		this.wrapper = $(wrapper);
		this.images = images.map(function(image){
			return new Element('img', {
				src: image,
				tween: {duration: this.options.fadeTime}
			});
		}, this);
		this.index = 0;
		this.topImage = this.images[0].inject(this.wrapper);
		this.fade.periodical(this.options.stayTime + this.options.fadeTime, this);
	},
	
	fade: function() {
		this.index = (this.index + 1) % this.images.length;
		this.bottomImage = this.topImage;
		this.topImage = this.images[this.index]
			.fade('hide')
			.inject(this.wrapper)
			.fade('in');
			
		this.options.onFade(this.topImage);
	}

});

window.addEvent('domready', function() {
    // Grab the image urls from the links to the images
    var images = $$('#images a');
    
    if (images.length == 0) return;
    
    images = images.map(function(anchor) {
        return anchor.href;
    });
    
    // Create the div that holds the images
    var imageHolder = new Element("div", { id: 'image' });
    imageHolder.inject($('content'));
    
    // Create the slideshow
	var slideShow = new SimpleSlideShow(imageHolder, images, { stayTime: 6000, onFade: function(image) {
	    var images = $$('#images a').map(function(anchor) {
	        var text = anchor.getParent().get('text').split("-");
	        return {
	            property: text[0],
	            description: text[1]
	        };
	    });
	    
	    var image = images[slideShow.images.indexOf(image)];
	    
        details.fade('out');
        
        var func = function () {
            details.set('html', "<h4>" + image.property + "</h4>", "<p>" + image.description + "</p>");
            details.fade('in');
        };
        
        // If first time fading, then don't fade
        if (details.get('text') == "") {
            func();
        } else {
            func.delay(slideShow.options.fadeTime / 2);
        }
	}});
	
    // Create blue bit at bottom that holds the details of the image
    var details = new Element('div', {
		tween: { duration: slideShow.options.fadeTime / 2 }
	});
	
    details.inject($('imagedetails'));
	
	slideShow.options.onFade(slideShow.topImage);
});