//Requires Mootools 1.2

//Use onload rather than Mootools domready because we need the thumbnails to have loaded, so that we can get their size properly
window.onload = function() { new Gallery(document.getElement("#galleryImage"), document.getElement("#galleryList")) };

var Gallery = new Class({
	
	initialize: function(imageEl, thumbsListEl)
	{
		this.largeImage = imageEl;
		
		this.thumbs = new Array();
		var liList = thumbsListEl.getChildren();
		for (var i = 0; i < liList.length; i++)
		{
			this.thumbs.push(liList[i].getElement('img'));
		}
		
		for (var i = 0; i < this.thumbs.length; i++)
		{
			var thumb = this.thumbs[i];
			
			thumb.addEvent('click', this.onClickedThumb.bind(this));
		
			this.centerImage(thumb);
		}
	},
	
	onClickedThumb: function(event)
	{
		event.preventDefault();
		
		var thumb = event.target;
		
		this.changeImage(this.getImageUrl(thumb));
	},
	
	getImageUrl: function(thumb)
	{
		var filename = '';
		
		return thumb.getProperty('rel');
	},
	
	changeImage: function(url)
	{
		this.largeImage.setProperty('src', url);
	},
	
	centerImage: function(thumb)
	{
		var height = thumb.getSize().y;
		var width = thumb.getSize().x;
		
		thumb.getParent().setStyles({
			position: 'relative'
		});
		
		thumb.setStyles({
			position: 'absolute',
			height: height + 'px',
			width: width + 'px',
			top: '50%',
			marginTop: -(height/2) + 'px',
			marginLeft: -(width/2) + 'px',
			left: '50%'
		});
	}
	
});