var page = 0;
var index = 0;

function choose(i) {
	// Remove current highlight
	$('thumb-'+index).className = '';

	index = i;
	var image = gimages[(page * 10) + index];
	
	// Change the main image and highlight the thumbnail

	$('thumb-'+index).className = 'highlight';
	
	$('main-picture').src = image.path;
	
	$('main-picture').onload = function() {
		$('caption').innerHTML = image.caption;
		$('credit' ).innerHTML = image.credit;
	}
}

function changePage(i) {
	if (i == page) return;

	$('pg-'+page).className = '';
	$('pg-'+i   ).className = 'current';

	page = i;
	var start = page * 10;

	for (var j = 0; j < 10; j++) {
		var k = start + j;
		var image = gimages[k];
		var thumb = $('thumb-'+j);

		if (k < gimages.length) {
			thumb.src = image.path.substring(0, image.path.indexOf('.jpg')) + '-35x35.jpg';

			var t = image.caption;
			if (t.length > 30) t = t.substr(0, 28) + '...';

			thumb.title = t;
			thumb.style.visibility = 'visible';
		} else {
			thumb.style.visibility = 'hidden';
		}
	}
		
	// Select the first image on the page
	choose(0);
}

function $(e) {
	return document.getElementById(e);
}