var Gallery = Class.create({
	initialize: function()
	{
		this.detailImage = $('galleryDetailImage');
		this.tmpDetailImage = $('tmpGalleryDetailImage');
		this.activeGalleryItem = 0;
		this.animation = false;
		this.duration = 0.5;
	},
	
	show: function(id)
	{
		if(this.animation) return;
		
		$('galleryItem' + this.activeGalleryItem).removeClassName('active');
		$('galleryItem' + id).addClassName('active');
		this.activeGalleryItem = id;
		
		var detailSrc = $('galleryImage' + id).src.replace('-list', '-detail');
		var preloadSrc = $('galleryImage' + id).src.replace('-list', '-preload');
		
		if(id == 0)
		{
			this.tmpDetailImage.src = detailSrc;
		}
		else
		{
			var preloadImage = new Image();
			preloadImage.src = detailSrc;
			if(preloadImage.complete)
			{
				this.tmpDetailImage.src = detailSrc;
			}
			else
			{
				this.tmpDetailImage.src = preloadSrc;
				preloader.stop();
			}
		}
		
		this.animation = true;
		Effect.Fade(this.detailImage.identify(), {duration: this.duration, afterFinish: this.animationEnd.bind(this)});
	},
	
	animationEnd: function()
	{
		this.detailImage.src = this.tmpDetailImage.src;
		if(this.detailImage.src.search('-preload') != -1)
		{
			preloader.loadImage(this.detailImage.src.replace('-preload', '-detail'), this.detailImage);
		}
		this.detailImage.show();
		this.animation = false;
	}
	
})

var gallery;
Event.observe(window, 'load', 
	function() {
		gallery = new Gallery();
	}
);