var HoverFade = new Class({
	Implements: [Options],
	options: {
		container: null,
		className: 'fade',
		duration: 800,
		transition: Fx.Transitions.Sine.easeOut		
	},

	initialize: function(options) {
		this.setOptions(options);
		this.container = $(this.options.container) || document;
		this.start();		
	},
	
	start: function(){
		var buttons = this.container.
					  getElements('.'+this.options.className).
					  filter(function(elem,i){
							if(elem.rel!=='selected')
								return elem;							
					   }.bind(this));
		
		buttons.each(function(element,i){
			element.setStyles({'opacity':0.6});
			
			
			var transEffect = new Fx.Morph(element, {duration: this.options.duration, transition: this.options.transition});
			
			element.addEvents({
				'mouseover':function(){
					transEffect.cancel();
					transEffect.start({opacity:1});
				},
				'mouseout':function(){
					transEffect.cancel();
					transEffect.start({opacity:0.6});
				}
			})			
		}.bind(this));
	}
});

/*big image*/

function transitionImage(oldImage,newImage)
{
	var fadeOut = function()
	{
		var div = $(oldImage).set('styles',{
			'opacity' : 1
		});
		
		new Fx.Morph(div, 'opacity', {duration: 1400}).start({'opacity' : 0});
		
		fadeIn();
		
	};
	
	var fadeIn = function()
	{
		
		var div2 = $(newImage).set('styles',{
			'display':'block',
			'opacity': 0
		});
			
		new Fx.Morph(div2, 'opacity', {duration: 1400}).start({'opacity' : 1});
		
	};
	
	if(newImage != activeImage)
	{
		fadeOut();
		activeImage = newImage;		
	}
}