/*
* Class for tweening between a number of images that are linked to different urls or returning a random image
*/
var Slideshow = new Class({
	Implements: [Options],
	
	// the default options
	options: {
		container: null, // a dom element that acts as the container for the slideshow
		items: [], // array of objects: {url: 'url to link to', image: 'the source of the image', width: 'image width', height: 'image height', altText: 'alt/title text of the image'}
		slideDuration: 3000, // duration for the tween effect in milliseconds
		waitDuration: 5000, // the duration that each image is shown in milliseconds
		type: 'slideshow' // can be "slideshow" or "random"
	},
	
	// constructor
	initialize: function(options) { 
		this.setOptions(options, this.getOptions);
		
		this.currentItemIndex = 0;
		this.newItemIndex = 0;
		this.zIndex = 1000;
		
		switch (this.options.type) {
			case 'slideshow':
				this.slideshow();
			break;
			case 'random':
				this.random();
			break;
			default: 
				this.slideshow();
			break;
		}
	},
	
	// type = slideshow
	slideshow: function() {
		if ($chk($(this.options.container)) && this.options.items) {
			// build DOM
			this.options.items.each(function(item, index) { 
				if (index > 0 && $chk($(this.options.items[0].id))) { // if the first element already exists
					var image = new Asset.image(item.image, {
						onload: function(item, index) {
							var linkedImage;
							if (item.url) {
								linkedImage = new Element('a', { href: item.url });
								image.inject(linkedImage);
							} else {
								linkedImage = image;
							}
							var itemDiv = new Element('div', {
								id: item.id,
								'class': 'tx-byggfabriken-slideshow-item'
							});
							linkedImage.inject(itemDiv);
							itemDiv.inject($(this.options.container, 'bottom'));
							itemDiv.set('tween', { duration: this.options.slideDuration });
						}.bind(this, [item, index]),
						width: item.width,
						height: item.height,
						alt: item.altText,
						title: item.altText
					});
				} else {
					// the first item that already exists
					$(item.id).set('tween', { duration: this.options.slideDuration });
				}
			}, this);
			
			// start slide
			this.slide.periodical(this.options.waitDuration, this);
		}
	},
	
	// slides to the next image
	slide: function() {
		if (this.currentItemIndex == this.options.items.length - 1) {
			// if we're at the last item, we want to go to the first
			this.newItemIndex = 0;
		} else {
			this.newItemIndex = this.currentItemIndex + 1;
		}
		// fade out old and fade in new
		$(this.options.items[this.currentItemIndex].id).tween('opacity', 1, 0);
		$(this.options.items[this.newItemIndex].id).tween('opacity', 0, 1);
		// increase x-index (so the right link and title text is on top)
		// we'll delay the call to this function so it happens after the slide is finished
		this.increaseZIndex.delay(this.options.slideDuration, this, $(this.options.items[this.newItemIndex].id));
		// set current to new
		this.currentItemIndex = this.newItemIndex;
	},
	
	// increases the z-index so the link points to the right place
	increaseZIndex: function(element) { 
		element.setStyle('z-index', this.zIndex++); 
	},
	
	// type = random
	random: function() {
		var imageToShow = this.options.items.getRandom();
		var image = new Asset.image(imageToShow.image, {
			onload: function(imageToShow) {
				var linkedImage;
				if (imageToShow.url) {
					linkedImage = new Element('a', { href: imageToShow.url });
					image.inject(linkedImage);
				} else {
					linkedImage = image;
				}
				var itemDiv = new Element('div', {
					id: imageToShow.id,
					'class': 'tx-byggfabriken-slideshow-item'
				});
				linkedImage.inject(itemDiv);
				itemDiv.inject($(this.options.container, 'bottom'));
				//itemDiv.set('tween', { duration: this.options.slideDuration });
				//itemDiv.tween('opacity', 0, 1);
				itemDiv.setStyle('opacity', 1).setStyle('visibility', 'visible');
				this.increaseZIndex(itemDiv);
			}.bind(this, [imageToShow]),
			width: imageToShow.width,
			height: imageToShow.height,
			alt: imageToShow.altText,
			title: imageToShow.altText
		});
	}
	
	
});