Viewer = function(panelId) {
	this.image = document.getElementById(panelId + "Image");
	this.title = document.getElementById(panelId + "Title");
	this.caption = document.getElementById(panelId + "Caption");
	this.text = document.getElementById(panelId + "Text");
	this.infoButton = document.getElementById(panelId + "InfoButton");
	this.timeout = 10000;
	this.images = new Array();
	this.imageIndex = 0;
	this.timer = null;
	this.info = false;
	this.infoButton.style.textDecoration = "line-through underline";
	
	//buffering
	this.buffer = new Array();
	this.bufferIndex = 0;
	this.bufferComplete = 0;
}

Viewer.prototype.addImage = function(url, title, caption, portrait) {
	//buffering
	var lookAhead = 3;
	var obj = this;
	obj.buffer[obj.bufferIndex] = new Image();
	obj.buffer[obj.bufferIndex++].onload = function() {
		if (++obj.bufferComplete == lookAhead) obj.start();
		if (obj.bufferComplete < obj.buffer.length) obj.buffer[obj.bufferComplete].src = url;
	};
	if (obj.bufferIndex == 1) obj.buffer[0].src = url;
	
	//add to data set
	portrait = (portrait == null) ? false : portrait; //default to false
	this.images.push(new Array(url, title, caption, portrait));
}

Viewer.prototype.setImage = function() {
	//animate disappearance
	var ad = new YAHOO.util.Anim(this.image, { opacity: {to: 0, from: 1} }, 1.5, YAHOO.util.Easing.easeOut);
	var ae = new YAHOO.util.Anim(this.title, { opacity: {to: 0, from: 1} }, 1.5, YAHOO.util.Easing.easeOut);
	var af = new YAHOO.util.Anim(this.caption, { opacity: {to: 0, from: 1} }, 1.5, YAHOO.util.Easing.easeOut);
	var obj = this;
	var handler = function(type, args) {
		//clear to prevent jumping
		obj.image.style.opacity = "0";
		obj.title.style.opacity = "0";
		obj.caption.style.opacity = "0";
		
		obj.image.innerHTML = "<img id='image' src='" + obj.images[obj.imageIndex][0] + "'>";
		
		//show info as required
		obj.title.innerHTML = obj.images[obj.imageIndex][1];
		obj.caption.innerHTML = obj.images[obj.imageIndex][2];
		if (obj.info) {
			obj.title.style.display = "block";
			obj.caption.style.display = "block";
		}
		else {
			obj.title.style.display = "none";
			obj.caption.style.display = "none";
		}
		
		obj.orientate();
		
		//animate appearance
		var aa = new YAHOO.util.Anim(obj.image, { opacity: {to: 1, from: 0} }, 1.5, YAHOO.util.Easing.easeIn);
		var ab = new YAHOO.util.Anim(obj.title, { opacity: {to: 1, from: 0} }, 1.5, YAHOO.util.Easing.easeIn);
		var ac = new YAHOO.util.Anim(obj.caption, { opacity: {to: 1, from: 0} }, 1.5, YAHOO.util.Easing.easeIn);
		aa.animate();
		ab.animate();
		ac.animate();
	};
	ad.onComplete.subscribe(handler);
	if (this.imageIndex != 0) {
		ad.animate();
		ae.animate();
		af.animate();
	}
	else {
		handler("", "");
	}
}

Viewer.prototype.nextImage = function() {
	if (this.imageIndex + 1 < this.images.length) {
		this.imageIndex++;
	}
	else if (this.images[0] != null) {
		this.imageIndex = 0;
	}
	
	this.setImage();
	
	return false;
}

Viewer.prototype.previousImage = function() {
	if (this.imageIndex - 1 >= 0) {
		this.imageIndex--;
	}
	else if (this.images[this.images.length-1] != null) {
		this.imageIndex = this.images.length-1;
	}
	
	this.setImage();
	
	return false;
}

Viewer.prototype.start = function() {
	this.setImage();
	var obj = this;
	this.timer = setInterval(function() { obj.nextImage(); }, this.timeout);
	return false;
}

Viewer.prototype.pause = function() {
	clearInterval(this.timer);
	return false;
}

Viewer.prototype.play = function() {
	this.imageIndex++;
	this.start();
	return false;
}

Viewer.prototype.toggleInfo = function() {
	if (this.info) {
		this.info = false;
		this.infoButton.style.textDecoration = "line-through underline";
		this.title.style.display = "none";
		this.caption.style.display = "none";
		this.orientate();
	}
	else {
		this.info = true;
		this.infoButton.style.textDecoration = "underline";
		this.title.style.display = "block";
		this.caption.style.display = "block";
		this.orientate();
	}
	
	return false;
}

Viewer.prototype.orientate = function() {
	//handle orientation of pictures
	if (this.images[this.imageIndex][3]) {
		this.image.className = "portrait";
		if (!this.info) {
			this.image.className = "portraitCentered";
		}
		this.text.className = "portraitText";
	}
	else {
		this.image.className = "landscape";
		if (!this.info) {
			this.image.className = "landscapeCentered";
		}
		this.text.className = "landscapeText";
	}
}