/*
Image viewer code
15th May 2006
Matthew Sach

NEEDS GENERALISATION TO ALLOW MULTIPLE VIEWERS PER PAGE
- fckeditor manages it by having the tags with duplicate ids inside iframes.
*/

/* Global code to hold a reference to image viewers on the page */
function ImageViewerAPI_RegisterInstance(imageViewer)
{ this._Instances[ imageViewer.instanceName ] = imageViewer; }

function ImageViewerAPI_GetInstance(instanceName)
{ return this._Instances[ instanceName ]; }

var ImageViewerAPI = new Object();
ImageViewerAPI._Instances = new Array();
ImageViewerAPI.RegisterInstance = ImageViewerAPI_RegisterInstance;
ImageViewerAPI.GetInstance = ImageViewerAPI_GetInstance;


/* Viewer Code */
ImageViewer = function(name)
{
	// Do not use spaces in instanceName!
	this.instanceName = name;
	this.images;
	this.currentIndex;
	this.length = 0;
	this.imagesLoaded = false;
	this.gallerySelectable = false;
}

ImageViewer.prototype.create = function() {
	/* write initial HTML framework to page */
	ImageViewerAPI.RegisterInstance(this);
	document.write('<div id="imageviewer"><div id="mainimage"><div id="mainimagecaption"></div></div><div id="viewcontrols">&nbsp;</div></div>');
}
ImageViewer.prototype.loadImages = function(drawOnComplete, source, params) {
	/*
	source = URL for image list
	params = comma separated list of name/value pairs
	
	Obtain image list via XmlHttpRequest. Simplest to return in JSONesque format:
	
	[ { id:'ID', filename:'URL', caption:'caption' },
		{ id:'ID', filename:'URL', caption:'caption' },
		...
		{ id:'ID', filename:'URL', caption:'caption' } ]

	*/
	
	document.getElementById('mainimagecaption').innerHTML = 'Loading...';
	
	var content = null;
	if (params != undefined)
	{
		content = '';
		var paramList = params.split(',');
		for (var n = 0; n <= paramList.length; n+=2)
		{
			if (n)
			{ content += '&'; }
			content += paramList[n] + '=' + paramList[n+1];
		}
	}
	else
	{ content = 'dummy=1'; }
	
	var viewer = this;
	
	var imageConn = getXmlHttpObj();
	imageConn.onreadystatechange = function() { completeImageLoad(imageConn, viewer, drawOnComplete); }
	imageConn.open('POST', source, true);
	imageConn.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8')
	imageConn.send(content);
}

function completeImageLoad(imageConn, viewer, drawOnComplete)
{
	// callback function to complete loading and display of image list
	if (imageConn.readyState == 4)
	{
		if (imageConn.status == 200)
		{
			var imageArray = imageConn.responseText;
			viewer.images = eval(imageArray);
			if (viewer.images)
			{
				viewer.length = viewer.images.length;
				viewer.currentIndex = 0;
				viewer.imagesLoaded = true;
				if (drawOnComplete)
				{
					viewer.drawCurrentImage();
					viewer.drawGallery();
				}
			}
			else
			{
				document.getElementById('mainimagecaption').innerHTML = 'No images loaded.';
				document.getElementById('viewcontrols').innerHTML = '&nbsp;';
			}
		}
		else
		{ alert(imageConn.status); }
	}
}

ImageViewer.prototype.drawCurrentImage = function() {
	if (this.length)
	{
		var imageURL = this.images[this.currentIndex]['filename'];
		var captionText = this.images[this.currentIndex]['caption'];
		var insertHTML = '';
		var indicatorHTML = '';

		// rewrite the image and caption
		insertHTML = '<img src="' + imageURL + '" alt="' + captionText + '" />';
		insertHTML += '<div id="mainimagecaption">' + captionText + '</div>';
		document.getElementById('mainimage').innerHTML = insertHTML;
		
		// if caption is blank, hide the caption block
		if (captionText == '')
		{ document.getElementById('mainimagecaption').style.display = 'none'; }

		// rewrite the imagecount x/y indicator
		indicatorHTML = '<div id="ivprev" onclick="ImageViewerAPI.GetInstance(\'' + this.instanceName + '\').movePrev();">&laquo; Prev</div>';
		indicatorHTML += '<div id="ivnext" onclick="ImageViewerAPI.GetInstance(\'' + this.instanceName + '\').moveNext();">Next &raquo;</div>';
		indicatorHTML += '<div id="ivcount">' + (this.currentIndex+1) + '/' + this.length + '</div>';
		document.getElementById('viewcontrols').innerHTML = indicatorHTML;
	}
	else
	{
		document.getElementById('mainimage').innerHTML = '<div id="mainimagecaption">No Images loaded.</div>';
		document.getElementById('viewcontrols').innerHTML = '&nbsp;';
	}
}

ImageViewer.prototype.drawGallery = function() {
	// rewrite the gallery thumbnails
	if (document.getElementById('imagegallery'))
		{
		if (this.length)
		{
			var galleryCode = '';
			for (var n = 0; n < this.images.length; n++)
			{
				// MASSIVE NON-GENERIC HACK HERE
				var galleryFilename = this.images[n]['filename'].replace(/medium/, 'thumbnail');
				
				// generate item code
				galleryCode += '<div class="ivgalitem"><img src="' + galleryFilename + '" alt="' + this.images[n]['caption'] + '" onclick="ImageViewerAPI.GetInstance(\'' + this.instanceName + '\').goTo(' + n + ');" />';
				if (this.gallerySelectable)
				{
					// add the checkbox
					var imageId = 'ivg_' + this.images[n]['id'];
					galleryCode += '<input type="checkbox" id="' + imageId + '" name="' + imageId + '" /> <label for="' + imageId + '">' + (n+1) + '</label>';
				}
				galleryCode += '</div>\n';
			}
			if (this.gallerySelectable)
			{ galleryCode = '<form id="reqimages" name="reqimages" method="post" action="/requestimages.asp"><input type="submit" id="subgaltop" name="subgaltop" class="subgal" value="Request Images" />' + galleryCode + '<input type="submit" id="subgalbot" name="subgalbot" class="subgal" value="Request Images" /></form>'; }
			document.getElementById('imagegallery').innerHTML = galleryCode;
		}
		else
		{ document.getElementById('imagegallery').innerHTML = '&nbsp;'; }
	}
}

ImageViewer.prototype.moveNext = function() {
	this.currentIndex = ++this.currentIndex % this.length;
	this.drawCurrentImage();
}

ImageViewer.prototype.movePrev = function() {
	this.currentIndex = (this.length + (--this.currentIndex)) % this.length;
	this.drawCurrentImage();
}

ImageViewer.prototype.goTo = function(image) {
	this.currentIndex = image;
	this.drawCurrentImage();
}