// ImageChanger requires: gen_prototype.lite.js, gen_moo.fx.js, gen_moo.fx.pack.js
function ImageChanger(options) {
	if (!options.images || options.images.length < 2) return false;
	for(var i in options) this[i] = options[i];
	this.imgEl = $(this.imgId);
	
	this.realimages = new Array(this.images.length);
	for(var i=0; i<this.images.length; i++) {
		this.realimages[i] = new Image();
		this.realimages[i].src = this.imgpath + this.images[i];
	}
	this.fadeout = new fx.Opacity(this.imgEl, { duration: this.fade, transition: this.effect, onComplete: (function() {
		this.inc = (this.inc + 1) % this.images.length;
		this.imgEl.src = this.realimages[this.inc].src;
		this.fadein.custom(0,1);
	}).bind(this) });
	this.fadein = new fx.Opacity(this.imgEl, { duration: this.fade, transition: this.effect, onComplete: (function() {
		self.setTimeout((function(){this.fadeout.custom(1,0)}).bind(this), this.delay);
	}).bind(this) });
	
	self.setTimeout((function(){this.fadeout.custom(1,0)}).bind(this), this.delay);
}
ImageChanger.prototype = {
	imgId: 'changing_image', imgEl: {},
	imgpath: '', images: [], realimages: [], inc: 0,
	delay: 3000, fader: 0, effect: fx.quadIn, fade: 500
};

// the following is only for backwards-compatibility:
if (window.delay==undefined) var imgpath = '', images, realimages, inc = 0, delay = 3000, fader, effect = fx.expoOut, fade = 500;
function image_changer_init() {
	new ImageChanger({
		imgId: 'changing_image',
		imgpath: imgpath,
		delay: delay,
		fade: fade,
		images: images,
		effect: fx.quadIn
	});
}

function ImageFader(divid, baseurl, images, altdivid) {
	// divid is the id of an empty div
	// baseurl is the prefix for all image urls
	// images should be [{src:..., href:..., alt:...}, {src:..., href:..., alt:...}] (href and alt are optional)
	// altdivid (optional) is the id of an empty div for displaying the alts as captions
	this.div = $(divid);
	this.base = baseurl;
	this.images = images;
	this.altDiv = altdivid==undefined? false : $(altdivid);

	this.delay = 7000;
	this.effect = fx.expoOut;
	this.duration = 1500;

	this.curimg = 0;	// starts with the first image
}
ImageFader.prototype.setimg = function(spot, altspot) {
	var index = this.curimg;
	this.curimg = (this.curimg+1) % this.images.length;
	spot.src = this.base+this.images[index].src;
	spot.title = this.images[index].alt;
	spot.alt = this.images[index].alt;
	if (this.images[index].href) {
		spot.style.cursor = 'pointer';
		spot.linkto = this.images[index].href;
		spot.onclick = function() { window.location.href = this.linkto; };
	} else {
		spot.style.cursor = 'default';
		spot.onclick = function() {};
	}
	if (altspot) {
		altspot.innerHTML = this.images[index].alt;
		if (this.images[index].href) {
			altspot.style.cursor = 'pointer';
			altspot.linkto = this.images[index].href;
			altspot.onclick = function() { window.location.href = this.linkto; };
		} else {
			altspot.style.cursor = 'default';
			altspot.onclick = function() {};
		}
	}
}
ImageFader.prototype.start = function() {
	this.imgA = document.createElement('img');
	this.imgA.style.zIndex = 2;
	this.div.appendChild(this.imgA);
	if (this.altDiv) {
		this.altA = document.createElement('div');
		this.altA.style.zIndex = 2;
		this.altDiv.appendChild(this.altA);
	} else this.altA = false;
	this.setimg(this.imgA, this.altA);
	
	if (this.images.length > 1) {
		this.imgB = document.createElement('img');
		this.imgB.style.zIndex = 1;
		this.imgB.style.visibility = 'hidden';
		this.div.appendChild(this.imgB);
		if (this.altDiv) {
			this.altB = document.createElement('div');
			this.altB.style.zIndex = 1;
			this.imgB.style.visibility = 'hidden';
			this.altDiv.appendChild(this.altB);
		} else this.altB = false;
		this.setimg(this.imgB, this.altB);

		var h_in = function() {
			this.setimg(this.imgB, this.altB);
			this.timer = self.setTimeout((function() { this.outfx.custom(1,0); if (this.altDiv) this.altOutfx.custom(1,0); }).bind(this), this.delay);
		};
		this.infx = new fx.Opacity(this.imgA, {duration: this.duration, transition: this.effect, onComplete: h_in.bind(this) });
		if (this.altDiv) this.altInfx = new fx.Opacity(this.altA, {duration: this.duration, transition: this.effect, onComplete: h_in.bind(this) });

		var h_out = function() {
			this.setimg(this.imgA, this.altA);
			this.timer = self.setTimeout((function() { this.infx.custom(0,1); if (this.altDiv) this.altInfx.custom(0,1); }).bind(this), this.delay);
		};
		this.outfx = new fx.Opacity(this.imgA, {duration: this.duration, transition: this.effect, onComplete: h_out.bind(this)});
		if (this.altDiv) this.altOutfx = new fx.Opacity(this.altA, {duration: this.duration, transition: this.effect, onComplete: h_out.bind(this)});

		this.timer = self.setTimeout((function() {
			this.imgB.style.visibility = 'visible';
			this.outfx.custom(1,0);
			if (this.altDiv) {
				this.altB.style.visibility = 'visible';
				this.altOutfx.custom(1,0);
			}
		}).bind(this), this.delay);
	}
}

