var MaritzaGallery = Class.create();
MaritzaGallery.prototype = {
	initialize: function(container, data) {
		this.currentImage = null;
		this.container = $(container);
		this.container.setStyle({position: 'relative'});
		this.data = data;
		var imageLink = this.container.select('.mg_image a')[0];
		imageLink.stopObserving().observe('click', this.loadNext.bind(this));
	},
	loadImage: function(imageIndex) {
		if (imageIndex == this.currentImage) return;
		this.currentImage = imageIndex;
		var bigImage = this.container.select('.mg_image img')[0];
		var imageDescription = this.container.select('.mg_image span')[0];
		var imageLink = this.container.select('.mg_image a')[0];

		var overlay = new Element('div', {className: 'mg_overlay'}).setStyle({
			position: 'absolute',
			width: bigImage.width + 'px',
			height: bigImage.height + 'px',
			background: '#000000 url(/media/layout/ajax_loader_gallery.gif) center no-repeat',
			margin: '4px',
			top: 0,
			left: 0
		});
		overlay.setOpacity(0.4);
		bigImage.insert({'before': overlay});

		var newImage = new Image();
		newImage = $(newImage);
		newImage.observe('load', function() {
			this.container.select('.mg_overlay').invoke('remove');
			bigImage.src = newImage.src;
		}.bind(this));
		newImage.src = this.data[imageIndex].src;
		imageDescription.update(this.data[imageIndex].desc);
		imageLink.stopObserving().observe('click', this.loadNext.bind(this));
	},
	loadNext: function() {
		var nextImage = (this.currentImage + 1 == this.data.length) ? 0 : this.currentImage + 1;
		this.loadImage(nextImage);
	}
};