var JSGallery2_Enh = new Class({
	Extends: JSGallery2,
	/**
	 *	Constructor. Starts up the whole thing :-)
	 *
	 *	This script is free to use. It has been created by http://www.aplusmedia.de and
	 *	can be downloaded on http://www.esteak.net.
	 *	License: GNU GPL 2.0: http://creativecommons.org/licenses/GPL/2.0/
	 *	Example on: http://blog.aplusmedia.de/moo-gallery2
	 *	Known issues:
	 *	- preloading does not care about initialIndex param
	 *	- hovering to a control over the border of the big image will make the other one flickering
	 *	- if you enter and leave the control area very quickly, the control flickers sometimes
	 *	- does not work in IE6
	 *
	 * 	@param {Array} thumbs, An array of HTML elements
	 *	@param {HTMLelement} bigImageContainer, the full size image
	 *	@param {HTMLelement} pageContainer, If you have several pages, put them in this container
	 *@ param {HTMLelement} imgTitleContainer, for image titles
	 *	@param {Object} options, You have to pass imagesPerPage if you have more than one!
	 */
	initialize: function(thumbs, bigImageContainer, pageContainer, imgTitleContainer, options) {
		this.currentPageNumber = 0;
		this.loadedImages = 0;
		this.blockKeys = false;
		this.imagesPerPage = pageContainer.getFirst().getChildren().length;
		this.setOptions(options);
		this.thumbs = thumbs;
		this.bigImage = bigImageContainer;
		this.pageContainer = pageContainer;
		this.imgTitleContainer = imgTitleContainer;
		this.convertThumbs();
		if(this.options.initialIndex != -1) {
			this.selectByIndex(this.options.initialIndex);
		} else {
			this.gotoPage(0);
		}
		this.createControls();
		if($defined(this.options.loadingImage)) {
			new Asset.image(this.options.loadingImage);
		}
		this.loadNextImage();
	},
	/**
	 *	Creates the previous and next links over the big image.
	 */
	createControls: function() {
	},
	/**
	 *	Changes the full size image to given one.
	 *	@param {String} newSrc, new target of the full size image
	 */
	setImage: function(newSrc) {
		var effect = new Fx.Tween(this.bigImage, {duration: this.options.fadeSpeed, transition: Fx.Transitions.Quad.easeOut});
		effect.start('opacity', 0).chain(function(){
			this.bigImage.setProperty('src', newSrc);
			effect.start('opacity', 1).chain(this.unBlockKeys.bind(this));
		}.bind(this));
	},
	/**
	 * Converts one single thumb.
	 * @param {HTMLelement} thumbContainer
	 * @param {Integer} count
	 */
	convertThumb: function(thumbContainer, count) {
		if(!$defined(thumbContainer)) {
			return;
		}
		thumbContainer.addEvent('mouseover', this.select.bind(this, thumbContainer)).setStyle('position', 'relative').setProperty('counter', count);
		var bigImage = thumbContainer.getFirst().setProperty('href', 'javascript: void(0);').getProperty('rel');
		var border = new Element('div', {
			styles: {
				'border': this.options.borderWidthDeselected + 'px solid ' + this.options.borderColor,
				'width': thumbContainer.getSize().x,
				'height': thumbContainer.getSize().y,
				'position': 'absolute',
				'background-color': this.options.loadingMask,
				'top': 0,
				'left': 0
			},
			'rel': bigImage
		}).injectTop(thumbContainer).set('opacity', this.options.loadingOpacity);
	},
	/**
	 *	Selects a certain image. (You have to pass the outer container of the image)
	 *	@param {HTMLelement} container
	 */
	select: function(container) {
		if(this.blockKeys || !$defined(container)) {
			return false;
		}
		this.blockKeys = true;
		if($defined(this.selectedContainer)) {
			//this prevents an ugly effect if you click on the currently selected item
			if(container == this.selectedContainer) {
				this.unBlockKeys();
				return false;
			}
			this.deselect(this.selectedContainer);
		}
		//if target image is not on current page, we have to go there first 
		var targetPage = Math.floor(container.getProperty('counter') / this.imagesPerPage);
		if(this.currentPageNumber != targetPage) {
			this.gotoPage(targetPage, container);
		}
		this.selectedContainer = container;
		//make calculations a bit more handy
		var s = container.getSize();
		var des = this.options.borderWidthDeselected;
		var sel = this.options.borderWidthSelected;
		new Fx.Morph(container.getFirst(), {
			duration: this.options.selectSpeed, 
			transition: Fx.Transitions.Quad.easeOut
		}).start({
			'border-width': [des, sel + 'px'],
			'width': [s.x, s.x - 2 * (sel - des) ],
			'height': [s.y, s.y - 2 * (sel - des)]
		});
		this.setImage(container.getFirst().getProperty('rel'));
		// swap image titles
		this.imgTitleContainer.empty();
		new Element('span').set('text', container.getProperty('title')).inject(this.imgTitleContainer);
	}
});