var Toggle = new Class({
	Implements:[Options,Events],
	options: {
		trigger:$empty
	},
	initialize: function(element,options){
		this.setOptions(options);
		this.instance = element;
		this.trigger = options.trigger;
		this.reverseTriggers = options.reverseTriggers;
		this.trigger.addEvent('click', this.flip.bind(this));
		this.trigger.addEvent('click', this.flip.bind(this));
		this.reverseTriggers.addEvent('click', this.flipBack.bind(this));
		this.slides = new Array();
		this.slides[0]=this.options.slide1;
		this.slides[1]= this.options.slide2;
		this.options.slide2.setOpacity(0);
		
		
		this.myEffect = new Fx.Morph(this.instance,{duration:700,transition:Fx.Transitions.Quint.easeOut});
		this.fade = new Fx.Elements(this.slides,{
			link:'chain',
			duration:500,
			onComplete:function(){this.fadeCompleted()}.bind(this)
		});
	},
	flipBack:function(e){
		e.stop();
		this.myEffect.cancel();
		this.options.slide3.removeClass('invisible');
		this.myEffect.start({'left':this.options.slideBackOffset});
		this.fade.start({
			'0':{
				'opacity':1
			},
			'1':{
				'opacity':0
			}
		});
	},
	flip:function(e){
		e.stop();
		this.myEffect.cancel();
		this.options.slide3.addClass('invisible');
		this.fade.start({
			'0':{
				'opacity':0
			},
			'1':{
				'opacity':1,
				'display':'block'
			}
		});
		this.myEffect.start({'left':this.options.slideOffset});
	},
	fadeCompleted: function(){
		
		
			
	}
});