var ImageMenu = new Class({

	Implements:Options,

	getOptions: function(){
		return {
			onOpen: false,
			onClose: Class.empty,
			openWidth: 200,
			transition: Fx.Transitions.quadOut,
			duration: 400,
			open: 4,
			border: 0
		};
	},

	initialize: function(elements, options){
		this.setOptions(this.getOptions(), options);
		
		this.pages=['#contact','#references','#principes','#offre','#accueil','#mentions'];
		
		this.elements = $$(elements);

		this.widths = {};
		this.widths.closed = 25;
		this.widths.hover = 35;
		this.widths.globalWidth = 1000;
		// on diminue légèrement la taille pour éviter un effet de scintillement
		this.widths.open = this.widths.globalWidth-(this.elements.length-1)*this.widths.closed-this.elements.length-10;

		this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});
		this.scrollWin = new Fx.Scroll(window);
		
		var opn=this.options.open;

		var obj = this;
		
		// on appareille le lien sur chaque page
		this.elements.each(function(el,i){
			el.addEvents({
				'mouseenter': function(e){
					//new Event(e).stop();
					if (obj.options.open != i) {obj.fly(i);
					el.setStyle('cursor','pointer');}
					},

				'mouseleave': function(e){
					//new Event(e).stop();
					if (obj.options.open != i) {obj.open(obj.options.open);
					el.setStyle('cursor','auto');}
					},

				'click': function(e){
					//new Event(e).stop();
					if (obj.options.open != i) {obj.open(i);
					if($chk(myOffre)) myOffre.close();}
					el.setStyle('cursor','auto');
					}
			});

		}.bind(this));
		
		
		// on modifie aussi le lien sur chaque lien interne à la page
		$$('a[href^=#]').each(function(el){
				el.addEvent('click', function(e){
					e.stop();
					index=obj.pages.indexOf(el.get('href'));
					if (index>=0) {
						obj.scrollWin.toTop();
						obj.open(index);
					};
				}.bind(this));
			
		}.bind(this));
		
		// Enfin on ouvre l'accueil
		this.open(this.options.open);

	},

	fly: function(num){

		var obj = {};
		var opn=this.options.open;
		this.elements.each(function(el,i){
			var p=this.widths.closed;
			if (i==opn) {p=this.widths.open-this.widths.hover+this.widths.closed; }
			else if (i==num) {p=this.widths.hover}
			else {p=this.widths.closed};
			obj[i] = {'width': p};

		}.bind(this));


		this.fx.start(obj);
	},

	open: function(num){
			this.options.open=num;
			var obj = {};
			var p=0;
			var opn=this.options.open;
			this.elements.each(function(el,i){

				if (i==opn) p=this.widths.open
				else p=this.widths.closed;
				obj[i] = {'width': p};

			}.bind(this));

			this.fx.start(obj);
			
	}

});


var Offre = new Class({

	initialize: function(elements, targets){
		this.open=null;
		this.elements = $$(elements);
		this.targets = $$(targets);
		var obj = this;
		this.fx=[];

		this.elements.each(function(el,i){
			this.dark(i);
			this.fx[i] = new Fx.Slide(targets[i], {duration: 500, mode:'vertical', link:'chain', transition: Fx.Transitions.Quad.EaseIn}).hide();
		    el.addEvents({
		      
		      'click': function(e){
					new Event(e).stop();
					if (obj.open != (i+1)) {
						
						if (obj.open) {	
			              obj.dark(obj.open-1);
			              obj.fx[obj.open-1].slideOut().chain(function(){obj.fx[i].slideIn();});
			              }
						else {obj.fx[i].slideIn();}
						
						obj.open=i+1;
					}
				},
		 
		      'mouseenter': function(e) {
		          if (obj.open!=(i+1)) obj.light(i);
		       },
		      
		      'mouseleave': function(e) {
		          if (obj.open!=(i+1)) obj.dark(i);
		       }
	      	});
	      	
	      	var retour=new Element('span', {
				'class':'retour',
				'html':' ',
				'events': { 
					'click':function () {obj.close();},
					'mouseenter':function () {this.setStyle('cursor','pointer')},
					'mouseleave':function () {this.setStyle('cursor','auto')}
					}
			});
			
			retour.inject(targets[i], 'top');
		}.bind(this));
		
		
	},
	
	light: function(i) {this.elements[i].setStyle('cursor','pointer');
	this.elements[i].getElement('.icon').setStyles({'opacity': 1, 'cursor':'pointer'});
	},
	
	dark: function (i) {this.elements[i].setStyle('cursor','auto');
	this.elements[i].getElement('.icon').setStyles({'opacity': 0.7, 'cursor':'auto'});
	},
	
	close: function() {
		if(this.open) {
			this.fx[this.open-1].hide(); 
			this.dark(this.open-1);
			this.open=null; };
	}
	
});


window.addEvent('domready', function(){

	//Mise en place du slide sur la page Offres
	myOffre = new Offre($$('div.offer'),$$('div.detailoffres'));		

	//Mise en place du menu sur les pages
	var myMenu = new ImageMenu($$('div.page'),{open:4});
	
	//Mise en place de l'envoi de mail en Ajax
	$('registerForm').reset();
	$('registerForm').addEvent('submit', function(e) {
		//Prevents the default submit event from loading a new page.
		e.stop();
		//Empty the log and show the spinning indicator.
		var log = $('log_res').empty().addClass('ajax-loading');
		//Set the options of the form's Request handler. 
		//("this" refers to the $('myForm') element).
		this.set('send', {onComplete: function(response) { 
			log.removeClass('ajax-loading');
			txtresponse=response;
			if (response=='OK') {
				$('registerForm').reset();
				txtresponse='Votre message a bien été envoyé. Nous vous répondrons dans les plus brefs délais.'};
			log.set('html', txtresponse);
		}});
		//Send the form.
		this.send();
	});


});