var gallery = new Class({
	initialize: function(frameElement, infoElement, thumbnailElement, options) {
		this.setOptions({
			elementSelector: "div.imageElement",
			titleSelector: "h3",
			descriptionSelector: "p",
			imageSelector: "img.full",
			thumbnailSelector: "img.thumbnail",
			thumbnailOpacity: "0.4",
			baseClass: "imGallery",
			fadeDuration: 500,
			initialIndex: 0
		}, options);
		this.frameElement = frameElement;
		this.infoElement = infoElement;
		this.thumbnailElement = thumbnailElement;
		this.frameElement.style.display="block";
		this.frameElement.addClass(this.options.baseClass);
		this.infoElement.addClass(this.options.baseClass);
		this.thumbnailElement.addClass(this.options.baseClass);
		this.galleryData = Array();
		this.imageElements = Array();
		this.populateData();
		this.constructElements();
		this.currentIndex = this.options.initialIndex;
		this.goTo(this.options.initialIndex);
	},
	populateData: function () {
		options = this.options;
		data = this.galleryData;
		index = data.length;
		this.frameElement.getElements(options.elementSelector).each(function(el) {
			elementDict = {
				index: index,
				image:  el.getElement(options.imageSelector).getProperty('src'),
				thumbnail: el.getElement(options.thumbnailSelector).getProperty('src'),
				title:  el.getElement(options.titleSelector).innerHTML,
				description: el.getElement(options.descriptionSelector).innerHTML
			}
			data[index++] = elementDict;
			el.remove();
		});
		this.galleryData = data;
	},
	constructElements: function() {
		el = this.frameElement;
		for(i=0; i<this.galleryData.length;i++) {
			var myImage = new Fx.Style(
				new Element('div').addClass('imPhoto').setStyles({
					'position':'absolute',
					'left':'0px',
					'right':'0px',
					'margin':'0px',
					'padding':'0px',
					'backgroundImage':"url('" + this.galleryData[i].image + "')",
					'backgroundPosition':'center center',
					'opacity':'0'
				}).injectInside(el),
				'opacity',
				{ 
					duration: this.options.fadeDuration ,
					transition: Fx.Transitions.quartInOut
				}
			);
			this.imageElements[i] = myImage;
			var opacity = this.options.thumbnailOpacity;
			var myThumb = new Fx.Style(
				new Element('div').addClass('imThumbnail').setStyles({
					backgroundImage: "url('" + this.galleryData[i].thumbnail + "')",
					backgroundRepeat: "no-repeat"
				}).injectInside(this.thumbnailElement),
				'opacity',
				{
					duration: this.options.fadeDuration,
					transition: Fx.Transitions.quartInOut
				}
			);
			myThumb.set(opacity);
			myThumb.element.addEvents({
				'click': function (myself) {
					this.goTo(myself.relatedImage.index);
				}.pass(myThumb, this),
				'mouseover': function (myself) {
					myself.clearTimer();
					myself.custom(1);
				}.pass(myThumb, this),
				'mouseout': function (myself) {
					myself.clearTimer();
					myself.custom(opacity);
				}.pass(myThumb, this)
			});
			myThumb.relatedImage = this.galleryData[i];
		};
	},
	goTo: function(newIndex) {
		previousIndex = this.currentIndex;
		// clean house except for previous
		for(i=0;i<this.imageElements.length; i++) {
			if (i != previousIndex) this.imageElements[i].set(0);
		}
		if (newIndex > previousIndex) this.imageElements[newIndex].custom(1);
		else if (newIndex == previousIndex) this.imageElements[newIndex].set(1);
		else {
			this.imageElements[newIndex].set(1);
        	this.imageElements[previousIndex].custom(0);
		}
		this.infoElement.getElement(this.options.titleSelector).setHTML(
			this.galleryData[newIndex].title);
		this.infoElement.getElement(this.options.descriptionSelector).setHTML(
			this.galleryData[newIndex].description);
		this.currentIndex = newIndex;
	}
});

gallery.implement(new Options);
gallery.implement(new Events);