function Thomas() {

}

Thomas.prototype.init = function(event) {
	this.registerListeners();
}
Thomas.prototype.registerListeners = function() {
	var images = $('thumbnails').descendants();
	for (var i = 0; i < images.length; i++) {
		images[i].observe('click', this.imageClicked);
	}
}
Thomas.prototype.imageClicked = function(event) {
	var imageNode = event.element();
	var imageSource = imageNode.src.replace('thumb_', '');
	var imageViewer = new ImageViewer(imageSource);
	imageViewer.paintComponent(document.body);
}

function ImageViewer(imageSource) {
	this._imageSource = imageSource;
	this._backgroundNode = null;
	this._borderNode = null;
	this._imageNode = null;
	this._parentNode = null;
}
ImageViewer.prototype.getImageSource = function() {
	return this._imageSource;
}
ImageViewer.prototype.paintComponent = function(parentNode) {
	this._parentNode = parentNode;
	// create semi transparent background
	this._backgroundNode = $(document.createElement('div'));
	this._backgroundNode.addClassName('imageviewer-background');
	var windowDimension = this.getWindowDimension();
	this._backgroundNode.setStyle({ 'width' : windowDimension.width + 'px', 'height' : windowDimension.height + 'px' });
	parentNode.appendChild(this._backgroundNode);
	// image border
	this._borderNode = $(document.createElement('div'));
	this._borderNode.addClassName('imageviewer-border');
	parentNode.appendChild(this._borderNode);
	// create image element
	this._imageNode = $(document.createElement('img'));
	this._imageNode.addClassName('imageviewer-image');
	this._imageNode.observe('load', this.imageLoaded.bindAsEventListener(this));
	this._imageNode.observe('click', this.close.bindAsEventListener(this));
	this._imageNode.src = this.getImageSource();
	parentNode.appendChild(this._imageNode);
}
ImageViewer.prototype.imageLoaded = function(event) {
	var imageNode = event.element();
	// position and display element
	var windowDimension = this.getWindowDimension();
	var imageWidth = imageNode.getWidth();
	var imageHeight = imageNode.getHeight();
	if (windowDimension.height < imageHeight + 60) {
		var factor = (windowDimension.height - 100) / imageHeight;
		imageHeight = factor * imageHeight;
		imageWidth = factor * imageWidth;
	}
	var left = (windowDimension.width - imageWidth) / 2;
	var top = (windowDimension.height - imageHeight) / 2;
	this._borderNode.setStyle({ 'display' : 'block', 'left' : (left - 10) + 'px', 
		'top' : (top - 10) + 'px',
		'width' : (imageWidth + 20) + 'px',
		'height' : (imageHeight + 20) + 'px'
	});
	imageNode.setStyle({ 'display' : 'block', 'left' : left + 'px', 'top' : top + 'px', 'width' : imageWidth + 'px', 'height' : imageHeight + 'px' });
}
ImageViewer.prototype.getWindowDimension = function() {
	var myWidth = 0, myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
	    myWidth = window.innerWidth;
	    myHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
	    //IE 6+ in 'standards compliant mode'
	    myWidth = document.documentElement.clientWidth;
	    myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
	    //IE 4 compatible
	    myWidth = document.body.clientWidth;
	    myHeight = document.body.clientHeight;
	}
	return { 'width' : myWidth, 'height' : myHeight };
}
ImageViewer.prototype.close = function() {
	this._parentNode.removeChild(this._imageNode);
	this._parentNode.removeChild(this._borderNode);
	this._parentNode.removeChild(this._backgroundNode);
}

var thomas = new Thomas();
Event.observe(window, 'load', thomas.init.bindAsEventListener(thomas));