/**
 * A single slider for an HTMLcaroussel-object. 
 * The object only controls the actions to perform on a target element; the element itself is linked by means of reference.
 * 
 * Methods: 
 * - setReference: set the referred element
 * - prepareShow: hide the slide, and prepare it to show up
 * - doShow : show the slide
 * - prepareHide: show the slide, and prepare it to hide itself
 * - doHide : hide the slide
 */
HTMLCarousselSlide = new Class({
	
	Implements: [new Options],
	
	reference: null,
	
	/**
	 * Options
	 * Options
	 * 
	 * @type {Object}
	 */
	options: {
		zIndex: {
			top :100,
			bottom : 10
		}
	},
	
	initialize: function(options){
		
		if ($chk(options)) {

			this.setOptions(options);
		}
	},
	
	setReference: function(e){
		this.valid = false;
		if ($chk(e)) {
			this.reference = e;
			this.valid = true;
		}
	},
	
	prepareShow: function(element){
		this.setReference(element);
		if ($chk(this.valid)) {
			// put it on the bottom
			// hide it
			// put it back on top 
			this.reference.setStyles({
				zIndex: this.options.zIndex.bottom,
				opacity: 0
			});
		}
	},
	
	/**
	 * 
	 * @param styles
	 * @returns
	 */
	prepareHide: function(){
	},
	
	show: function(){
		if ($chk(this.startEffect)){
			this.startEffect.fireEvent('complete');
			this.startEffect = null;
		}
		this.startEffect = new Fx.Elements(this.reference, {duration: 500, transition: Fx.Transitions.Sine.easeOut});
		this.startEffect.start({
			'0': {
				'opacity': [this.reference.getStyle('opacity'), 1]
			}
		});
	},
	
	hide: function(content){
		if ($chk(this.hideEffect)){
			this.hideEffect.fireEvent('complete');
			this.hideEffect = null;
		}
		
		this.hideEffect = new Fx.Elements(this.reference, {duration:500, transition: Fx.Transitions.Sine.easeOut});
		this.hideEffect.addEvent('complete', function(){
			this.setReference(content);
		}.bind(this));
		
		this.hideEffect.start({
		    '0': {
		        'opacity': [this.reference.getStyle('opacity'), 0]
		    }
		});
	}
});