function onHtmlLoaded(){
	// Set up myLightbox
	initLightbox();
	
	// Setup JS objects
	collection = getCollection();
	convertCollection();
	displayBox = new DisplayBox('main_box');
	
	// Change onClicks of series thumbnails
	displayBox.populateThumbnails();
	
	// Previous, Next & Counter link onClicks
	displayBox.populateContext();
	
	//Preload Images, once document has loaded
	Event.observe(window, 'load', function(){				  
		// Preload 'loading' image
		preloadImages('/images/loading.gif');
		
		// Preload next image in series
		collection.getSeriesById(currentSeries).preloadImg(currentImg +1);
		
		// Preload first image of each series
		collection.series.each(function(series){ series.preloadImg(1); });
	}, false);
}






function convertCollection(){
  // Convert collection to an object, containing the series and add functions
  collection = {
  	// The previously declared series array
  	series: collection,
  	
  	getSeriesById: function(seriesId){
  		for(var i=0; i<this.series.length; i++)
  			{
  				if(this.series[i].id == seriesId)
  					{ return this.series[i]; }
  			}
  		return null;
    }
  }; //end collection	
}





function preloadImages() {
	if(!document.images)
		{ return; }
	
	if(!document.p)
		{ document.p = new Array(); }
	
	var j=document.p.length;
	for(var i=0; i < arguments.length; i++)
		{
			if (arguments[i].indexOf("#")!=0)
				{
					document.p[j] = new Image;
					document.p[j++].src = arguments[i];
				}
		}
}






/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   / 
  /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   / 
 /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */





// SERIES OBJECT
function Series(id, title, collection){
	this.id = id;
	this.folder = id; // NOTE: folder is named after id, e.g. 'highwind' 
	this.title = title;
	this.collection = collection;
	this.images = [];

	// Check for images to be added
	var imagesToAdd = (arguments.length > 3) ? arguments[3] : [];
	var series = this;
	imagesToAdd.each(function(img){ series.addImg(img); });
}


// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+


Object.extend(Series.prototype, {
	imgFolder: 'images',
	thumbsFolder: 'thumbnails',
	portfolioFolder: 'portfolio',
	largeFolder: 'large',
	
	// Start series with no main image. Set on adding first image.
	mainImg: null,
	
	setMainImg: function(imgId){
		if (this.getImg(imgId) !== null)
			{ this.mainImg = this.getImg(imgId); }
		return this.mainImg;
	},
	
	
	// Optional args: image id, size (e.g. 'large')
	getUrl: function(){
		var imgSuffix = (arguments.length > 0) ? (arguments[0] + '/') : '';
		var size = (arguments.length > 1) ? arguments[1] + '/' : '';
		size = size.replace(/^large\/$/, this.largeFolder + '/');
		return '/' + this.portfolioFolder + '/' + this.collection + '/' + this.id + '/' + imgSuffix + size;
	},
	
	
	filenameToSrc: function(filename){
		var size = (arguments.length > 1) ? arguments[1] + '/' : '';
		size = size.replace(/^large\/$/, this.largeFolder + '/');
		return '/' + this.portfolioFolder + '/' + this.imgFolder + '/' + this.collection + '/' + this.folder + '/' + size + filename;
	},
	
	getThumbSrc: function(){
		if (this.mainImg === null)
			{ return null; }
		return '/' + this.portfolioFolder + '/' + this.imgFolder + '/' + this.collection + '/' + this.thumbsFolder + '/' + this.mainImg.filename;
	},
	
	// Add image to series
	addImg: function(img){
		// img is an array of the following:
		var title = img[0];
		var caption = img[1];
		var filename = img[2];
		var hasLarge = img[3];
		
		var newImgId = this.images.length + 1;
		var src = this.filenameToSrc(filename);
		var largeSrc = (hasLarge) ? this.filenameToSrc(filename, 'large') : null;
		
		// Add new image to images array
		this.images.push(new SeriesImage(newImgId, title, caption, src, filename, largeSrc));
		
		// Set main image of series, if one not yet set
		if (newImgId == 1)
			{ this.mainImg = this.images[0]; }
	},
	
	// Return image object from this series
	getImg: function(id){
		if ((this.images.length >= id) && (id > 0))
			{ return this.images[id - 1]; }
		else
			{ return null; }
	},
	
	getPrevImg: function(id){
		return this.getImg(id - 1);
	},
	
	getNextImg: function(id){
		return this.getImg(id + 1);
	},
	
	sendToDisplay: function(displayBox, imgId){
		displayBox.changeDisplay(this, imgId);
	},
	
	preloadImg: function(imgId){
		var img = this.getImg(imgId);
		if (img === null)
			{ return null; }
		preloadImages(img.src);
		return true;
	}
});





/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   / 
  /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   / 
 /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */




// SERIES IMAGE
function SeriesImage(id, title, caption, src, filename, largeSrc){
	this.id = id;
	this.title = title;
	this.caption = caption;
	this.src = src;
	this.filename = filename;
	this.largeSrc = largeSrc;
	this.name = filename.slice(0, filename.lastIndexOf('.'));
}

Object.extend(SeriesImage.prototype, {});




/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   / 
  /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   / 
 /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /   /
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */




// DISPLAY BOX
function DisplayBox(divId){
	this.div = $(divId);
	
	// Shortcut: getElementsByClassName on current div
	// optional arg: return all elements, otherwise just first
	function getElByCN(elId){
		var els = document.getElementsByClassName(elId, divId);
		var allEls = (arguments.length > 1) ? arguments[1] : false;
		return (allEls) ? els : (els.length > 0) ? els[0] : null;
	}
	
	this.img = getElByCN('main_img');
	this.seriesTitle = getElByCN('series_title');
	this.imgTitle = getElByCN('img_title');
	this.imgCaption = getElByCN('img_caption');
	this.prev = getElByCN('prev');
	this.next = getElByCN('next');
	this.counter = getElByCN('counter');
	
	var anchors = getElByCN('main_img_anchor', true);
	if (anchors.length > 0){
		this.a = anchors[0];
		// Add Lightbox link if it links to the large view
		if (this.a.href.match(/\/large\/?$/))
			{
				this.a.onclick = function(){
					myLightbox.start(this);
					return false;
				};
				this.a.onkeypress = this.a.onclick;
			}
	}
	else {
		this.a = null;
	}
}


// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

Object.extend(DisplayBox.prototype, {
	getPrevHTML: function(series, imgId){
		var img = series.getImg(imgId);
		var prev = series.getPrevImg(img.id);
		var html = (prev !== null) ? '<a title="Previous image" href="' + series.getUrl(prev.name) + '">&laquo; Previous</a>' : '';
		return html;
	},
	
	getNextHTML: function(series, imgId){
		var img = series.getImg(imgId);
		var next = series.getNextImg(img.id);
		var html = (next !== null) ? '<a title="Next image" href="' + series.getUrl(next.name) + '">Next &raquo;</a>' : '';
		return html;
	},
	
	
	// Populate Previous and next contexts
	populateContext: function(){
		var series = collection.getSeriesById(currentSeries);
		var prevImg = series.getPrevImg(currentImg);
		var nextImg = series.getNextImg(currentImg);
		
		var prev = this.prev.getElementsByTagName('a');
		var next = this.next.getElementsByTagName('a');
		
		if (prev.length == 1)
			{
				prev[0].onclick = (prevImg !== null) ? function(){ displayBox.changeDisplay(prevImg.id); return false; } : '';
				prev[0].onkeypress = prev[0].onclick;
			}
			
		if (next.length == 1)
			{
				next[0].onclick = (nextImg !== null) ? function(){ displayBox.changeDisplay(nextImg.id); return false; } : '';
				next[0].onkeypress = next[0].onclick;
			}
	},
	
	
	populateThumbnails: function(){
		// Get each thumbnail
		var thumbs = $A($('thumbs').getElementsByTagName('a'));
		// Make thumbnail onclick change the display
		thumbs.each(function(thumb){
			var series_id = thumb.href.replace(/^.*\/(\w+)\/?$/g, '$1');
			
			function thumbClick(){
				// Change main image display to show first image in the series
				displayBox.changeDisplay(1, series_id);
				// Update the CSS of the thumbnails
				displayBox.updateNavCSS(this.href);
				// Lose focus of thumbnail (changes appearance in Firefox, etc)
				this.blur();
				// Don't follow the href to a new page
				return false;
			}
			thumb.onclick = thumbClick;
			thumb.onkeypress = thumb.onclick;
		});
	},
	
	
	updateNavCSS: function(currentThumbHref){
		var thumbs = $A($('thumbs').getElementsByTagName('a'));
		thumbs.each(function(thumb){
			if (thumb.href == currentThumbHref)
				{
					Element.addClassName(thumb, 'navcurrent');
					if (thumb.parentNode.nodeName.toLowerCase() == 'li')
						{ Element.addClassName(thumb.parentNode, 'navcurrent'); }
				}
			else
				{
					Element.removeClassName(thumb, 'navcurrent');
					if (thumb.parentNode.nodeName.toLowerCase() == 'li')
						{ Element.removeClassName(thumb.parentNode, 'navcurrent'); }
				}
		});
	},
	
	
	showLoading: function(){
		var loadingDivArr = document.getElementsByClassName('loading_div', $('main_box'));
		
		if (loadingDivArr.length > 0)
			{
				var loadingDiv = loadingDivArr[0];
				var loadingImg = document.getElementsByClassName('loading_img', loadingDiv)[0];
			}
			
		else
			{
				var loadingDiv = document.createElement('div');
				loadingDiv.className = 'loading_div';
				
				var loadingImg = loadingDiv.appendChild(document.createElement('img'));
				loadingImg.className = 'loading_img';
				loadingImg.alt = 'Loading...';
				loadingImg.src = '/images/loading.gif';
				
				this.div.insertBefore(loadingDiv, this.div.firstChild);
			}
			
		loadingDiv.style.paddingTop = Math.round((this.img.height / 2) - ((60 + loadingImg.height) / 2)) + 'px';
		loadingDiv.style.display = 'block';
		loadingDiv.style.filter = 'alpha(opacity=90)';
	},
	
	
	hideLoading: function(){
		var loadingDiv = document.getElementsByClassName('loading_div', $('main_box'))[0];
		loadingDiv.style.display = 'none';
	},
	
	
	
	replaceImage: function(newImg){
		var oldImg = this.img.parentNode.replaceChild(newImg, this.img);
		oldImg.src = '';
		this.img = newImg;
	},
	
	
	// Change the display
	// First argument: image to display (from current series, if no second arg passed)
	// Second argument: series to change to
	changeDisplay: function(imgId){		
		// Check for new series
		var seriesId = (arguments.length > 1) ? arguments[1] : currentSeries;
		var series = collection.getSeriesById(seriesId);
		if (series === null)
			{ return null; }
	
		// Get image to display
		var imgObj = series.getImg(imgId);
		if (imgObj === null)
			{ return null; }
			
		
		// Set global display settings
		currentSeries = seriesId;
		currentImg = imgId;
		
		// Change img element
		var newImg = Object.extend(document.createElement('img'), {					  
			alt: imgObj.title,
			title: imgObj.title,
			src: imgObj.src,
			className: this.img.className
		});
		
		// Replace the image once loaded
		var that = this;
		
		// Display 'loading' image
		if (!newImg.complete) {
				this.showLoading();
				Event.observe(newImg, 'load', this.hideLoading, false);	
				Event.observe(newImg, 'load', function(){ that.replaceImage(newImg); }, false);
		}
		
		else {
			this.replaceImage(newImg);
		}
	
		// Change other display elements
		this.seriesTitle.innerHTML = series.title;
		this.imgTitle.innerHTML = imgObj.title;
		this.imgCaption.innerHTML = imgObj.caption;
		this.prev.innerHTML = this.getPrevHTML(series, imgId);
		this.next.innerHTML = this.getNextHTML(series, imgId);
		this.populateContext();
		this.a.href = series.getUrl(imgObj.name, 'large');
		
		// Change the counter HTML - e.g. '2 of 6'
		// If only one image in the series
		if (series.images.length == 1)
			{
				this.counter.innerHTML = "<a href='" + series.getUrl(imgObj.name) + "' title='Permanent link for this image'>Permalink</a>";
			}	
		// If more than one image
		else
			{
				this.counter.innerHTML = "<a href='" + series.getUrl(imgObj.name) + "' title='Permanent link for this image'>" + currentImg + "</a> of <a href='" + series.getUrl() + "' title='Permanent link for this series'>" + series.images.length + "</a>";
			}
	
		// Preload the next image in the series, if it exists
		series.preloadImg(currentImg +1);
	}
});