var RealisationItem = new Class({
	
	Implements: [Options, Events],
	options:{
		'container':null,
		'index':null
	},
	
	initialize:function(options) {
		this.setOptions(options);
		debug('RealisationItem:initialize');
		
		this.link = this.options.container.getFirst('a');
		this.accroche = this.options.container.getFirst('div');
		this.client = this.options.container.getFirst('a .client');
		
		if(this.accroche) {
			this.accroche.setStyle('display','block');
			this.fx = new Fxable({
				'target':this.accroche,
				'type': 'height',
				'src': 0,
				'dest': this.accroche.getSize().y,
				'duration':300,
				transition: Fx.Transitions.Quad.easeOut
			});
			this.fx.setClose();
		}		
		
		var grab = new Element('div', {
			'class':'client_cont'
		}).wraps(this.client);
		this.client.setStyles({
			'position':'absolute'
		});
		this.clone = this.client.clone().inject(grab);
		this.clone.addClass('select');
		
		this.client_fx = new Fxable({
			'target':this.client,
			'type': 'opacity',
			'src': 0,
			dest: 1,
			duration:300,
			transition: Fx.Transitions.Quad.easeOut
		});
		
		this.clone_fx = new Fxable({
			'target':this.clone,
			'type': 'opacity',
			'src': 0,
			'dest': 1,
			'duration':300,
			'transition': Fx.Transitions.Quad.easeOut
		});
		this.clone_fx.setClose();
		
		this.bound_over = this.over.bind(this);
		this.bound_out = this.out.bind(this);
		
		this.options.container.addEvents({
			'click': this.click.bind(this),
			'mouseenter': this.bound_over,
			'mouseleave': this.bound_out
		});
	},
	
	click:function(e) {
		e.stop();
		this.fireEvent('RealisationItem:click', {index:this.options.index});
		if(this.accroche) {
			if(this.fx.is_open) this.close();
			else this.open();
		}
	},
	
	open:function() {
		this.fx.open();
		this.client_fx.close();
		this.clone_fx.open();
		this.remove_events();
	},
	
	close:function() {
		this.fx.close();
		this.client_fx.open();
		this.clone_fx.close();
		this.add_events();
	},
	
	over:function() {
		this.client_fx.close();
		this.clone_fx.open();
	},
	
	out:function() {
		this.client_fx.open();
		this.clone_fx.close();
	},
	
	remove_events:function() {
		this.options.container.removeEvents({
			'mouseenter': this.bound_over,
			'mouseleave': this.bound_out
		});
	},
	
	add_events:function() {
		this.options.container.addEvents({
			'mouseenter': this.bound_over,
			'mouseleave': this.bound_out
		});
	}
	
});