var Big = new Class({
		
	Implements: [Options, Events],
	options:{
		infos:null,
		parent:null,
		index:null,
		total:null
	},
	
	initialize:function(options) {
		this.setOptions(options);
		debug('Big:initialize');
		
		this.initContainer();
		
	},
	
	initContainer:function() {
		this.container = new Element('div').inject(this.options.parent);
		this.container.addClass('profil');
		
		this.container.setStyles({
			'width': "100%",
			'height': "100%",
			'position':'absolute',
			'left': 0,
			'top': 90,
			'z-index': '500'
		});
		
		this.infos = new Element('div').inject(this.container);
		this.infos.addClass('infos');
		
		var number = new Element('div').inject(this.infos);
		number.addClass('numbering');
		var current = new Element('span').inject(number);
		current.addClass('current');
		current.set('html', parseInt(this.options.index) + 1);
		var total = new Element('span').inject(number);
		total.addClass('total');
		total.set('html', this.options.total);
		
		var close = new Element('a', {
			href: "#"
		}).inject(this.infos);
		close.addClass('close');
		close.addEvents({
			"click":function(e) {
				e.stop();
				this.close();
			}.bind(this)
		});
		
		var infos_1 = new Element('div').inject(this.infos);
		infos_1.addClass('infos_1');
		
		var libelle = new Element('h2').inject(infos_1);
		libelle.set('html', this.options.infos.libelle);
		var accroche = new Element('h3').inject(infos_1);
		accroche.set('html', this.options.infos.accroche);
		
		var infos_2 = new Element('div').inject(this.infos);
		infos_2.addClass('infos_2');
		//infos_2.set('html', this.options.infos.text);
		
		var next = new Element('a', {
			href: "#"
		}).inject(infos_2);
		next.addClass('next');
		next.addEvents({
			"click":function(e) {
				e.stop();
				this.next();
			}.bind(this)
		});
		
		var prev = new Element('a', {
			href: "#"
		}).inject(infos_2);
		prev.addClass('prev');
		prev.addEvents({
			"click":function(e) {
				e.stop();
				this.prev();
			}.bind(this)
		});
		
		var text = new Element('div').inject(infos_2);
		text.set('html', this.options.infos.text);
		text.setStyle('clear', 'both');
		
		this.infos_fx = new Fx.Morph(this.infos, {
			transition: Fx.Transitions.Quad.easeOut,
			link:'cancel',
			duration:300
		});
		
		this.infos_fx_src = {
			opacity: 0,
			'margin-left': -60
		}
		
		this.infos_fx_dest = {
			opacity: 1,
			'margin-left': 0
		}
		
		this.infos_fx.set(this.infos_fx_src);
		
		var clear = new Element('div').inject(this.container, 'bottom');
		clear.addClass('clearB');
		
		//this.infos_fx.start(this.infos_fx_dest);
		this.image = new PictureBig({
			filename: this.options.infos.image,
			width: this.options.infos.image_width_big,
			height: this.options.infos.image_height_big,
			parent:this.container
		});
		this.image.addEvent('loadComplete', function() {
			this.infos_fx.start(this.infos_fx_dest);
		}.bind(this));
	},
	
	close:function() {
		this.fireEvent('close');
		this.doClose();
	},
	
	doClose:function(){
		this.image.close();
		this.infos_fx.addEvent('complete', function() {
			this.container.destroy();
		}.bind(this));
		this.infos_fx.removeEvents();
		this.infos_fx.start(this.infos_fx_src);
	},
	
	next:function() {
		this.doClose();
		this.fireEvent('next');
	},
	
	prev:function() {
		this.doClose();
		this.fireEvent('prev');
	}
		
});
