// Object of class ds_Rotator stores global data re div id, image name, etc
function ds_Rotator(wrapperId, height, width, path, images, startImage,
		imageTitles, altText, linkUrls, showTime, fadeTime, opacityStep,
		maxCycles) {
	this.wrapper = document.getElementById(wrapperId);
	this.height = height;
	this.width = width;
	this.showTime = showTime;
	this.fadeTime = fadeTime;
	this.opacityStep = opacityStep || 0.02;
	this.maxCycles = maxCycles || 20;
	this.index = startImage;
	this.cycles = 0;
	this.prevDiv = null;
	this.currentDiv = null;
	this.rotateTimer = 0;
	this.showTimer = 0;
	this.linkUrls = linkUrls;
	this.showNav = false;
	this.paused = false;
	this.dummy = null; // blank image to sit on top of rotator and hold title,
	// links and alt
	this.navigator = null; // div to hold navigator icons

	// calculate time interval for each iteration
	this.fade_interval = this.fadeTime * this.opacityStep;

	this.images = [];
	this.addImages = function() {
		var i;
		for (i = 0; i < images.length; i++) {
			var img = new Image();
			img.src = path + images[i];
			this.images[i] = img;
		}
	};

	this.count = images.length;

	// create div to hold next image and swap dummy image alt and title
	this.createDiv = function() {
		var div = document.createElement('div');
		div.style.background = 'url(' + this.images[this.index].src + ') top left';
		div.style.height = this.height;
		div.style.width = this.width;
		div.style.position = 'absolute';
		div.id = 'rotatorDiv' + this.index;
		div.opacity = 0;
		addClass(div, 'transparent');
		this.wrapper.insertBefore(div, this.dummy);

		// Dummy image title defaults to that of first image if not given
		if (imageTitles)
			this.dummy.title = imageTitles[this.index]
					? imageTitles[this.index]
					: imageTitles[0];
		// Dummy image alt text defaults to that of first image if not given
		this.dummy.alt = altText[this.index] ? altText[this.index] : altText[0];
		return div;
	};

	this.start = function() {
		this.currentDiv = this.createDiv();
		this.rotate();
	};

	this.rotate = function() {
		if (this.currentDiv.opacity < 1) {
			this.currentDiv.opacity = this.currentDiv.opacity
					+ this.opacityStep;
			setOpacity(this.currentDiv, this.currentDiv.opacity);
			this.rotateTimer = setTimeout("ds_Rotator.instance.rotate()",
					this.fade_interval);
		} else
			this.showTimer = setTimeout("ds_Rotator.instance.next()",
					this.showTime);
	};

	this.next = function() {
		if (this.cycles == this.maxCycles) {
			this.pause();
			return false;
		}
		if (this.prevDiv)
			this.wrapper.removeChild(this.prevDiv);
		this.prevDiv = this.currentDiv;
		this.incIndex();
		this.currentDiv = this.createDiv();
		this.rotate();
	};

	this.incIndex = function() {
		if (this.index == this.count - 1) {
			this.index = 0;
			this.cycles += 1;
		} else
			this.index += 1;
	};

	this.decIndex = function() {
		if (this.index == 0) {
			this.index = this.count - 1;
			this.cycles -= 1;
		} else
			this.index -= 1;
	};

	this.toggleNavigator = function() {
		if (this.showNav) {
			fadeOut(this.navigator, 20, 250, 0.1, 0.8, 0);
			this.showNav = false;
		} else {
			fadeIn(this.navigator, 20, 250, 0.1, 0, 0.8);
			this.showNav = true;
		}
	};

	this.gotoLink = function() {
		document.location = this.linkUrls[this.index] + '&index=' + this.index;
	};

	this.pause = function() {
		clearTimeout(this.rotateTimer);
		clearTimeout(this.showTimer);
		document.getElementById('iconContinue').style.display = 'inline';
		document.getElementById('iconPause').style.display = 'none';
		this.paused = true;
	};
	this.resume = function() {
		this.incIndex();
		this.currentDiv = this.createDiv();
		this.rotate();
		document.getElementById('iconContinue').style.display = 'none';
		document.getElementById('iconPause').style.display = 'inline';
		this.paused = false;
	};
};

function NavigatorIcon(name) {
	this.name = name;
	this.icon = document.createElement('img');
	this.icon.src = '/images/icon_' + this.name + '.png';
	this.icon.id = 'icon' + this.name;
	this.icon.title = name;
	this.icon.style.cursor = 'pointer';
	ds_Rotator.instance.navigator.appendChild(this.icon);
	addClass(this.icon, 'oneQuarterTransparent');
	this.mouseOver = function(e) {
		e = ds_event.getEvent(e);
		setOpacity(document.getElementById(e.target.id), 1);
	};
	this.mouseOut = function(e) {
		e = ds_event.getEvent(e);
		setOpacity(document.getElementById(e.target.id), 0.75);
	};
	this.click = function(e) {
		e = ds_event.getEvent(e);
		switch (e.target.id) {
			case 'iconPrevious' : {
				ds_Rotator.instance.pause();
				ds_Rotator.instance.decIndex();
				ds_Rotator.instance.currentDiv = ds_Rotator.instance
						.createDiv();
				fadeIn(ds_Rotator.instance.currentDiv, 20, 500, 0.02, 0, 1);
				break;
			}
				;
			case 'iconPause' : {
				ds_Rotator.instance.pause();
				break;
			}
				;
			case 'iconContinue' : {
				ds_Rotator.instance.resume();
				break;
			}
				;
			case 'iconNext' : {
				ds_Rotator.instance.pause();
				ds_Rotator.instance.incIndex();
				ds_Rotator.instance.currentDiv = ds_Rotator.instance
						.createDiv();
				fadeIn(ds_Rotator.instance.currentDiv, 20, 500, 0.02, 0, 1);
				break;
			}
				;
			case 'iconGallery' : {
				ds_Rotator.instance.gotoLink();
				break;
			}

		}
	};
	ds_event.add(this.icon, 'mouseover', this.mouseOver);
	ds_event.add(this.icon, 'mouseout', this.mouseOut);
	ds_event.add(this.icon, 'click', this.click);
};

ds_Rotator.setUp = function(rotator) {
	var ds_rotator = new ds_Rotator(rotator.wrapperId, rotator.height,
			rotator.width, rotator.path, rotator.images, rotator.startImage,
			rotator.imageTitles, rotator.altText, rotator.linkUrls,
			rotator.showTime, rotator.fadeTime, rotator.opacityStep,
			rotator.maxCycles);

	// store instance as class property
	ds_Rotator.instance = ds_rotator;

	ds_rotator.addImages();

	// set up dummy image
	var dummy = document.createElement('img');
	dummy.setAttribute('height', rotator.height);
	dummy.setAttribute('width', rotator.width);
	addClass(dummy, 'transparent');
	ds_rotator.dummy = dummy;
	ds_rotator.wrapper.appendChild(dummy);

	// set up navigator div
	var navigator = document.createElement('div');
	navigator.id = 'rotatorNavigator';
	navigator.setAttribute('height', '24px');
	navigator.setAttribute('width', '104px');
	navigator.style.paddingLeft = '4px';
	navigator.style.position = 'absolute';
	navigator.style.bottom = 0;
	navigator.style.left = 0;
	addClass(navigator, 'transparent');
	ds_rotator.wrapper.appendChild(navigator);
	ds_rotator.navigator = navigator;

	// add icons to navigator
	var previous = new NavigatorIcon('Previous');
	var pause = new NavigatorIcon('Pause');
	var resume = new NavigatorIcon('Continue');
	resume.icon.title = 'Resume automatic rotation';
	resume.icon.style.display = 'none';
	var next = new NavigatorIcon('Next');
	var gallery = new NavigatorIcon('Gallery');
	gallery.icon.title = 'Show in gallery';

	// register mouseover/mouseleave events on wrapper
	ds_event.add(ds_rotator.wrapper, 'mouseenter', function() {
		ds_rotator.toggleNavigator();
	});
	ds_event.add(ds_rotator.wrapper, 'mouseleave', function() {
		ds_rotator.toggleNavigator();
	});
	ds_rotator.start();
};