var popupSlide = new Class({
	
	Implements: [Options],

	options: {
		client: 0,
		width: 1080,
		left_max: 0
	},

	initialize:function(options) {
		this.setOptions(options);
		this.init();
		this.click();
	},

	init:function() {
		$$('div#content_middle div a').set('href', '#');
	},
	
	change:function() {
		$$('div.content_popup div.change a').addEvent('click', function(event) {
			var nameEvent = event.target.get('id');
			var pos = event.target.getParent().getParent().getParent().getStyle('left').toString().toInt();
			if (nameEvent == "suivant") {
				res = pos - 1080;
				var myFx = new Fx.Tween('content_middle_hidden');
				myFx.start('left', res);
			} else {
				res = pos + 1080;
				var myFx = new Fx.Tween('content_middle_hidden');
				myFx.start('left', res);
			}
			return false;
		});
	},

	click:function() {
		$$('div.client a').addEvent('click', function(event) {
			var id = event.target.getParent().getParent().get('id');
			this.initContent(id);
			return false;
		}.bind(this));
	},
	
	incrust:function(html) {
		$('popup').set('html', html);
		$('popup').setStyle('display', 'block');
		
		$$('div.content_popup').addEvents({
			'mouseleave': function() {
				$$('body').addEvent('click', this.closePopup);
			}.bind(this),
			'mouseenter': function() {
				$$('body').removeEvent('click', this.closePopup);
			}.bind(this),
		});
				
		$$('div.content_popup').each(function(item, index){
			item.setStyle('display', 'block');
		}.bind(this));
	},
	
	initContent:function(id) {
		var req = new Request.HTML({
			url:'/frontend_dev.php/client/'+id+'/all.html',
			onSuccess: function(tree, elements, html) {
				this.incrust(html);
				this.change();
			}.bind(this),
			onFailure: function() {
				alert("Erreur lors du chargement du JavaScript");
			}
		});
		req.send();
	},
	
	closePopup: function() {
		$('popup').setStyle('display', 'none');
	}
});