var ClickSrcChangeGallery = Class.create();
ClickSrcChangeGallery.prototype = {
	mainImage : null,
	thumbnails : null,
	eventType : null,
	prefix : 'small-',
	initialized : false,
	
	initialize : function(config) {
		if (config) {
			this.mainImage = config.mainImage ? $$(config.mainImage)[0] : null;
			this.thumbnails = config.thumbnails ? $$(config.thumbnails) : null;
			this.eventType = config.eventType || null;
			this.createEvents();
		}

		this.initialized = true;
	},
	
	createEvents : function() {
		if (this.thumbnails) {
			var c = this.thumbnails.length;
			for (var i = 0; i<c; i++) {
				var thumbnail = this.thumbnails[i];
				Event.observe(thumbnail, this.eventType, this.setMainImage.bind(this, thumbnail, this.mainImage));
			}
		}
	},
	
	setMainImage : function(thumbnail, mainImage) {
		if (thumbnail && mainImage) {
			if (thumbnail.nodeName.toLowerCase() == 'img') {
				var src = thumbnail.src;	
			} else {
				var src = thumbnail.getStyle('background-image');	
			}
			
			var src = src.replace(this.prefix, '');
			
			if (mainImage.nodeName.toLowerCase() == 'img') {
				mainImage.src = src;	
			} else {
				mainImage.setStyle({backgroundImage: src});
			}
		}
	}
}

var divGallery;
var imgGallery;
var inlineGallery;

Event.observe(window, 'load', function() {
	// Use divs
	divGallery = new ClickSrcChangeGallery({mainImage: '.mainImage-div', thumbnails: '.thumbnail-div', eventType: 'click'});
	// Use images
	imgGallery = new ClickSrcChangeGallery({mainImage: '.mainImage-img', thumbnails: '.thumbnail-img', eventType: 'mouseover'});	
	// Use inline onclicks
	inlineGallery = new ClickSrcChangeGallery();
});