var Fullsize = {
	currFullsize : null,
	currFullsizeCaption : null,
	animation : null,
	
	init : function(initID) {
		Fullsize.animation = new Fx.Tween($('main_thumb_container'), {duration: 500, transition: Fx.Transitions.Quad.easeOut});					
		
		$(initID + '_full').setStyle('display', 'block');
		$(initID + '_caption').setStyle('display', 'block');
		
		Fullsize.currFullsize = $(initID + '_full');
		Fullsize.currFullsizeCaption = $(initID + '_caption');
		
		var initSize = $(initID + '_full').getSize().y;
		initSize += $(initID + '_caption').getSize().y + 10;
		$('main_thumb_container').setStyle('height', initSize);
	},
	
	changeImage : function(newID) {					
		var newFullsize = $(newID + '_full');
		var newFullsizeCaption = $(newID + '_caption');
		var newFullsizeHeight = null;
		
		Fullsize.animation.start('opacity', 0).chain(						
			function(){ Fullsize.currFullsize.setStyle('display', 'none'); this.callChain(); },
			function(){ Fullsize.currFullsizeCaption.setStyle('display', 'none'); this.callChain(); },
			function(){ newFullsize.setStyle('display', 'block'); this.callChain(); },
			function(){ newFullsizeCaption.setStyle('display', 'block'); this.callChain(); },
			function(){ newFullsizeHeight = newFullsize.getSize().y; this.callChain(); },
			function(){ newFullsizeHeight += newFullsizeCaption.getSize().y + 10; this.callChain();},
			function(){ Fullsize.animation.start('height', newFullsizeHeight); },
			function(){ Fullsize.animation.start('opacity', 1); },
			function(){ Fullsize.currFullsize = newFullsize; Fullsize.currFullsizeCaption = newFullsizeCaption; }
		);										
	}
}

var Thumbnail = new Class({
	initialize: function(thumbID){
		this.thumbID = thumbID
		this.thumbnail = $(thumbID);
		
		this.thumbnail.set('tween', {
			duration: 350,
			transition: Fx.Transitions.Quad.easeOut,
			link: 'cancel'
		});
		
		this.thumbnail.addEvent('mouseover', this.fadeOut.bind(this));
		this.thumbnail.addEvent('mouseout', this.fadeIn.bind(this));
		this.thumbnail.addEvent('click', Fullsize.changeImage.pass(this.thumbID));
	},
	fadeOut : function() {
		this.thumbnail.tween('opacity', 0.01);
	},
	fadeIn : function() {
		this.thumbnail.tween('opacity', 1);
	}
});

window.addEvent('domready', function(){				
	var arrThumbs = $$('#thumbnails img');
	
	for (i=0; i<arrThumbs.length; i++) {
		new Thumbnail(arrThumbs[i].id);
	}				
});