var slideshow_references = new Array();

/**
 * Creates a slideshow with the slides specified in JSON style array with 
 * each element having attributes: 
 *	- image: url of the image
 *	- url: if the user clicks on the image, the browser should load this url
 *	- onclick: a function that gets executed if the user clicks on the image
 *	example var slideshow1 = new Slideshow('slideshow_container', {
 *	[
 *		{
 *			image: '/images/slide1.jpg',
 *			url: 'target1.html'
 *		}
 *		,
 *		{
 *			image: '/images/slide2.jpg',
 *			onclick: 'somefunction()'
 *		}
 *	]
 *	});
 */
function Slideshow(divId, divWidth, divHeight, delay, slides) {
	this.divId = divId;
	this.slides = slides;
	this.delay = delay;
	this.divWidth = divWidth;
	this.divHeight = divHeight;
	this.loadImages = slideshow_loadImages;
	this.appearImage = slideshow_appearImage;
	this.showImage = slideshow_showImage;
	this.start = slideshow_start;
	this.loadImages();

	var imageUrl = 'url(' + this.slides[0].image + ')';
	$(divId).setStyle({
		position: 'relative',
		width: divWidth,
		height: divHeight});
	var e1 = new Element('div');
	e1.setStyle({
		position: 'absolute',
		width: divWidth,
		height: divHeight,
		top: '0px',
		left: '0px',
		backgroundImage: imageUrl
	});
	$(divId).insert(e1);
	var e2 = new Element('div');
	e2.setStyle({
		position: 'absolute',
		width: divWidth,
		height: divHeight,
		top: '0px',
		left: '0px',
		backgroundImage: imageUrl
	});
	$(divId).insert(e2);
	e2.appear({ duration: 1.0, from: 1.0, to: 0.0 }); // disappear

	this.reference = slideshow_references.length;
	slideshow_references[this.reference] = this;
}

function slideshow_loadImages() {
	// load the images
	if(document.images) {
		for(idx in this.slides) {
			pic = new Image();
			pic.src = this.slides[idx].image;
			this.slides[idx].picObj = pic;
		}
	}
}

function slideshow_start() {
	this.showImage(0);
	setTimeout("timer_nextslideappear('" + this.reference + "', 1)", this.delay);	
}

function slideshow_appearImage(idx) {
	var rootDiv = $(this.divId);
	var imageUrl = this.slides[idx].image;
	rootDiv.childElements()[1].setStyle({backgroundImage: 'url('+imageUrl+')'});
	rootDiv.childElements()[1].appear({ duration: 1.0 });
	if(rootDiv.childElements().length > 2) {
		for(i = 0; i < rootDiv.childElements().length; i++) {
			if(rootDiv.childElements()[i].tagName == 'A') {
				rootDiv.childElements()[i].remove();
				break;
			}
		}
	}

	setTimeout("timer_nextslide('" + this.reference + "', " + idx + ")", 1000);
}


function slideshow_showImage(idx) {
	var rootDiv = $(this.divId);
	var imageUrl = this.slides[idx].image;
	rootDiv.childElements()[0].setStyle({backgroundImage: 'url('+imageUrl+')'});
	rootDiv.childElements()[1].appear({ duration: 1.0, from: 1.0, to: 0.0 }); // disappear
	if(typeof(this.slides[idx].url) == 'string') {
		var aEl = new Element('a', {href: this.slides[idx].url});
		aEl.setStyle({
			position: 'absolute',
			background: 'none',
			width: this.divWidth,
			height: this.divHeight,
			display: 'block',
			padding: '0px'
		});
		rootDiv.insert(aEl);
	}
	if(typeof(this.slides[idx].onclick) == 'string') {
		var aEl = new Element('a', {onclick: this.slides[idx].onclick, href: '#'});
		aEl.setStyle({
			position: 'absolute',
			background: 'none',
			width: this.divWidth,
			height: this.divHeight,
			display: 'block',
			padding: '0px'
		});
		rootDiv.insert({bottom: aEl});
	}


	var nextIdx = idx + 1;
	if(nextIdx >= this.slides.length) {
		nextIdx = 0;
	}

	setTimeout("timer_nextslideappear('" + this.reference + "', " + nextIdx + ")", this.delay);
}

function timer_nextslide(reference, idx) {
	slideshow_references[reference].showImage(idx);
}

function timer_nextslideappear(reference, idx) {
	slideshow_references[reference].appearImage(idx);
}