var ConfiguratorCarsSteps = new Class(
{
	/*************************************************************************************************************************
	 * Variable
	 *************************************************************************************************************************/
	etape: 0,
	current_etape: 0,
	delay: 50,
	cancel_layer:true,
	timer: '',
	blink: '',
	overlay_timer: '',
	myAccordion: '',
	milkbox: '',
	last_info: '',
	fx: {},
	carInfos: {},
	clone: '',
	clone2: '',
	clone3: '',
	
	//preloading
	step1_img: '',
	step1_p: '',
	step2_a: '',
	step2_img: '',
	co2A: '',co2B: '',co2C: '',co2D: '',co2E: '',co2F: '',co2G: '',loupe: '',
	step3_p1: '',
	step3_p2: '',
	
	prix_total_defaut : 0,
	/*************************************************************************************************************************
	 * Constructor
	 *************************************************************************************************************************/
	initialize: function(etape,current_etape)//etape = etape effectue et current_etape = etape actuelle de la page
	{
		this.etape = etape;
		this.current_etape = current_etape;
		this.load(etape,current_etape);// on charge les evenements lie aux objets de chaque etape
		this.recup_Infos(etape); //on recup les infos des etapes precedentes
		this.preload_image();
		this.end_loading();
	},
	
	
	
	/*************************************************************************************************************************
	 * Evenements
	 *************************************************************************************************************************/
	load: function(etape,current_etape)
	{
	/*************************************************************************************************************************
	 * Evenements communs aux etapes
	 *************************************************************************************************************************/
		this.menu_blink(current_etape);//on fe clignoter le nouveau element du menu contextuel
		
		//slide menu (id,taille du li deploye, vitesse, vitesse de transition, li a montrer en 1er, numero detape)
		if ( $('recap_box') != undefined )
		{
			if (Browser.Engine.trident)//ie pour eviter un effet de lag
			{
				if ( current_etape == etape )
					var cfgMenu = new slideMenu('recap_box',173,2,3,current_etape,etape);
				else//eviter un decalage de 1 par rapport a la recap box
					var cfgMenu = new slideMenu('recap_box',173,2,3,current_etape,etape-1);
			}
			else //others
			{
				if ( current_etape == etape )
					var cfgMenu = new slideMenu('recap_box',173,10,12,current_etape,etape);
				else//eviter un decalage de 1 par rapport a la recap box
					var cfgMenu = new slideMenu('recap_box',173,10,12,current_etape,etape-1);
			}
			
			//colorise avec le code couleur des etape selon son etat
			if ( this.current_etape < this.etape )
				$('step'+this.current_etape).set('class', 'selected gone');
			else 
				$('step'+this.current_etape).set('class', 'selected');
			
			if ( this.current_etape == 4 )
				$('step'+this.current_etape).addClass('last');
			
			//colorise le derneire etape en noir
			if ( this.etape < 5 )
				$('step'+this.etape).getFirst().setStyle('color', '#000');
		}
		
		//go next step
		if ( $('goNextStep')!=undefined )
		{
			$('goNextStep').addEvent('click', this.save_cfg.pass([], this));
		}
		
		//evenements pours les menus de la recap box
		if ( $('step1') != undefined )
		{
			$('step1').addEvent('mouseenter', this.show_recapInfo_step1.pass([], this));
			$('step2').addEvent('mouseenter', this.show_recapInfo_step2.pass([], this));
			$('step3').addEvent('mouseenter', this.show_recapInfo_step3.pass([], this));
			$('step4').addEvent('mouseenter', this.show_recapInfo_step4.pass([], this));
		}
		
		//stepsBar progression
		if ( $('progressBar') != undefined )
		{
			var nb_caracs = $('item_Grades').getFirst().get('html').length + $('item_Engines').getFirst().get('html').length + $('item_Colors').getFirst().get('html').length + $('item_Options').getFirst().get('html').length + $('item_Summary').getFirst().get('html').length;
			
			var temp = (($('item_Grades').getFirst().get('html').length/nb_caracs)*95);
			$('item_Grades').setStyle('width',temp+'%');
			$('item_Grades').setStyle('text-align','left');
			
			temp = (($('item_Engines').getFirst().get('html').length/nb_caracs)*95);
			$('item_Engines').setStyle('width',temp+'%');
			$('item_Engines').setStyle('text-align','center');
			
			temp = (($('item_Colors').getFirst().get('html').length/nb_caracs)*95);
			$('item_Colors').setStyle('width',temp+'%');
			$('item_Colors').setStyle('text-align','left');
			
			temp = (($('item_Options').getFirst().get('html').length/nb_caracs)*95);
			$('item_Options').setStyle('width',temp+'%');
			$('item_Options').setStyle('text-align','center');
			
			temp = (($('item_Summary').getFirst().get('html').length/nb_caracs)*95);
			$('item_Summary').setStyle('width',temp+'%');
			$('item_Summary').setStyle('text-align','right');
			
			$('item_Grades').setStyle('width',$('item_Grades').getFirst().getSize().x);
			$('item_Engines').setStyle('width','');$('progress2').setStyle('width','');
			$('item_Colors').setStyle('width',$('item_Colors').getFirst().getSize().x);
			$('item_Options').setStyle('width','');$('progress4').setStyle('width','');
			$('item_Summary').setStyle('width',$('item_Summary').getFirst().getSize().x+15);
		}
		
		//lightbox active si necessaire
		if ( $('CO2Image') != undefined || $('lightbox') != undefined )
		{
			this.milkbox = new Milkbox();
			this.milkbox.changeOptions({ 
				topPosition :'100px',
				autoSize: true
			});
		}
		
		//evenements pour le menu en haut a droite
		SqueezeBox.assign($$('.popup_menu'), {
			parse: 'rel'
		});
		
		$$('.top_menu').each(function(menu)
			{
				menu.addEvents({
					'mouseenter':	this.rightTopMenuEnter.pass([menu], this)
				});
			}.bind(this));
				
		//evenement pour la selection de la categorie de vehicule
		if ( $('ribbon_combo')!=undefined )
		{
			$('ribbon_combo').addEvent('click', this.showCar_Cat.pass([], this));
		}
		
		//quitter l'overlay lors du click
		$('deliamask').addEvent('click', this.deliamaskClick.pass([], this));
		$('RibbonShadowOverlay').addEvent('click', this.deliamaskClick.pass([], this));
		
		//evenements pour menu horizontal -> on quitte le configurateur
		if ( $('progressBar') != undefined && $('alertBox') != undefined )
		{
			$$('a').each(function(el)
			{
				if (!el.hasClass('noStop'))
				{
					el.addEvents({
						'click':		this.leave_conf.pass([el], this)
					});
				}
			}.bind(this));
		}
		
		//evenements sur l'alert box
		if ( $('alertBox_cancel') != undefined )//toutes les etapes
		{
			$('alertBox_cancel').addEvent('click', this.alertBox_cancel.pass([], this));
		}
		
		//save box
		if ( $('gotoSaveBox') != undefined )//toutes les etapes
		{
			$('gotoSaveBox').addEvent('click', this.emailBox_show.pass([], this));
		}
		
		//save box show and overlay
		if ( $('recapSave') != undefined && $('recapSave').hasClass('sendEmail') )
		{
			$('recapSave').addEvent('click', this.emailBoxandOverlay_show.pass([], this));
		}
		
		//email pop up
		if ( $('emailPopup') != undefined )//toutes les etapes
		{
			$('emailBox_cancel').addEvent('click', this.emailBox_cancel.pass([], this));
			if ( $('emailMyPeugeot') !=undefined )
			{
				$('emailMyPeugeot').addEvent('click', this.emailBox_cancel.pass([], this));
			}
		}
		
		//evenements pour les tooltips
		$$('.tooltip_info').each(function(el)
			{
				el.addEvents({
					'mouseenter':	this.show_tooltip.pass([el], this),
					'mouseleave':	this.hide_tooltip.pass([el], this)
				});
			}.bind(this));
		$$('.tooltip_infoAlone').each(function(el)
			{
				el.addEvents({
					'mouseenter':	this.show_tooltipAlone.pass([el], this),
					'mouseleave':	this.hide_tooltip.pass([el], this)
				});
			}.bind(this));
		
		//pngfix dynamic loading
		if ( Browser.Engine.trident && Browser.Engine.version == 4 )
		{
			if ( typeof pngfix!='function' )
			{
				var myScript = new Asset.javascript('/defaultSites/peugeot/js/pngfix.js', {
					id: 'myScript', 
					onload: function(){
						;
					}
				});
			}
		}
		
		//formcheck
		//this.initFormcheck();
		
	/*************************************************************************************************************************
	 * Evenements relatives aux etapes
	 *************************************************************************************************************************/
		//evenement sur les item de l'accordion
		if ( $$('div.SideTabItemContent').length != 0 )
		{
			$each($$('div.SideTabItemContent'), function(el)
			{
				el.addEvents({
					'click':		this.optionItemClick.pass([el], this),
					'mouseenter':	function(){}
				});
			}.bind(this));
		}
		
	/************************************************************************************************************************/
		//color selection -----> etape 3
		if ( $('exteriorColors') != undefined )
		{
		//exteriorColors
		$$('.RadioItem').each(function(el)
			{
				el.addEvents({
					'click':		this.changeCarColor.pass([el], this)
				});
			}.bind(this));
		//interiorColors
		$$('.RadioItem2').each(function(el)
			{
				el.addEvents({
					'click':		this.changeCarInterior.pass([el], this)
				});
			}.bind(this));
		}
		
	/************************************************************************************************************************/
		//options selector  -----> etape 4
		if ( $('options_select') != undefined )
		{
			//slide +/-
			$$('h4.Less').each(function(el)
			{
				el.addEvents({
					'click':		this.details_slide.pass([el], this)
				});
			}.bind(this));
			
			//evenements pour les checkbox ---> choix des options de la voiture
			$('options_select').getElements('.option_click').each(function(el)
			{
				var input = el.getElement('input');
				
				input.checked = false;
				input.setProperty('disabled','');
				input.addEvents({
					'click':	this.click_option.pass([input], this)
				});
				
				el.getElement('span').addEvents({
					'click':	function(input)
					{
						input.checked ^= true;
						this.click_option(input);
					}.pass([input], this)
				});
			}.bind(this));
		}
		
	/************************************************************************************************************************/
		//resume  -----> etape 5
		if ( $('summary') != undefined )
		{ 
			$$('h4.Less').each(function(el)
			{
				el.addEvents({
					'click':		this.details_slide.pass([el], this)
				});
			}.bind(this));
		}
	/************************************************************************************************************************/
		//accessoire display 
		if ( $$('div.AccessoryItemImage').length != 0 )
		{
			//slide accessoire
			$$('h4.CategoryTitle').each(function(el)
			{
				el.addEvents({
					'click':		this.details_slide.pass([el], this)
				});
			}.bind(this));
			
			//animation show
			$$('div.AccessoryItemImage').each(function(el)
			{
				el.addEvents({
					'mouseenter':	this.show_add_accessoire.pass([el], this)
				});
			}.bind(this));
			$$('p.AccessoryItemPrice').each(function(el)
			{
				el.addEvents({
					'mouseenter':	this.show_add_accessoire2.pass([el], this)
				});
			}.bind(this));
			
			//animation hide
			$$('div.AccessoryItem').each(function(el)
			{
				el.addEvents({
					'mouseleave':	this.hide_add_accessoire.pass([el], this)
				});
			}.bind(this));
			
			//ajout accessoire
			$$('p.btn_container').each(function(el)
			{
				el.addEvents({
					'click':	this.add_accessoire.pass([el], this)
				});
			}.bind(this));
		}
	/************************************************************************************************************************/
	},
	
	
	
	/*************************************************************************************************************************
	 * Load infos
	 *************************************************************************************************************************/
	//load tous les formcheck
	initFormcheck: function()
	{
		$$(document.getElementsByTagName('form')).each(function(form)
		{
			if ( form.hasClass('formcheck') || form.id=='sendToDealerForm' )
			{
				formcheck = new FormCheck(form);
			}
		}.bind(this));
	},
	
	recup_Infos: function(etape)
	{
		//on recupere ici les information des etapes precedentes
		this.carInfos = new carConfig_Infos(etape);
		
		//preload co2 image
		this.preloadCo2();
		
		//on preselectionne et prerempli les informations de l'utilisateur
		this.preselect_cfg();
	},
	
	preloadCo2: function()
	{
		if ( this.current_etape == 2 )
			{
				this.co2A = new Element('img');
				this.co2A.src = '/defaultSites/peugeot/images/new_cfg/Engines/CO2/png/A.png';
				this.co2A.width = 85;
				this.co2A.height = 65;
				this.co2B = new Element('img');
				this.co2B.src = '/defaultSites/peugeot/images/new_cfg/Engines/CO2/png/B.png';
				this.co2B.width = 85;
				this.co2B.height = 65;
				this.co2C = new Element('img');
				this.co2C.src = '/defaultSites/peugeot/images/new_cfg/Engines/CO2/png/C.png';
				this.co2C.width = 85;
				this.co2C.height = 65;
				this.co2D = new Element('img');
				this.co2D.src = '/defaultSites/peugeot/images/new_cfg/Engines/CO2/png/D.png';
				this.co2D.width = 85;
				this.co2D.height = 65;
				this.co2E = new Element('img');
				this.co2E.src = '/defaultSites/peugeot/images/new_cfg/Engines/CO2/png/E.png';
				this.co2E.width = 85;
				this.co2E.height = 65;
				this.co2F = new Element('img');
				this.co2F.src = '/defaultSites/peugeot/images/new_cfg/Engines/CO2/png/F.png';
				this.co2F.width = 85;
				this.co2F.height = 65;
				this.co2G = new Element('img');
				this.co2G.src = '/defaultSites/peugeot/images/new_cfg/Engines/CO2/png/G.png';
				this.co2G.width = 85;
				this.co2G.height = 65;
				this.loupe = new Element('img');
				this.loupe.src = '/defaultSites/peugeot/images/new_cfg/Pictos/zoom.png';
				this.loupe.width = 17;
				this.loupe.height = 17;
			}
	},
	
	preload_image: function()
	{
		if ( this.etape > 1 ) 
		{
			this.step1_img = new Element('img');
				this.step1_img.src = this.carInfos.finition.nom[this.carInfos.choix_finition].url_avatar;
				this.step1_img.width = 204;
				this.step1_img.height = 97;
			this.step1_p = new Element('p');
				this.step1_p.set('class','carName');
				this.step1_p.set('html',this.carInfos.finition.nom[this.carInfos.choix_finition].url_imgName);
		}
		if ( this.etape > 2 )
		{
			if ( this.carInfos.moteur.nom[this.carInfos.choix_moteur].imgco2big != undefined && this.carInfos.moteur.nom[this.carInfos.choix_moteur].imgco2big != '' )
			{
				this.step2_a = new Element('a');
					this.step2_a.setProperty('href',this.carInfos.moteur.nom[this.carInfos.choix_moteur].imgco2big);
					this.step2_a.setProperty('rel','milkbox');
					this.step2_img = new Element('img');
						var catMoteur;
						catMoteur = this.carInfos.moteur.nom[this.carInfos.choix_moteur].imgco2thumb;
						/*if ( parseFloat(this.carInfos.moteur.nom[this.carInfos.choix_moteur].classe) < 101 ) 
							catMoteur = 'A';
						else if ( parseFloat(this.carInfos.moteur.nom[this.carInfos.choix_moteur].classe) < 121 ) 
							catMoteur = 'B';
						else if ( parseFloat(this.carInfos.moteur.nom[this.carInfos.choix_moteur].classe) < 141 ) 
							catMoteur = 'C';
						else if ( parseFloat(this.carInfos.moteur.nom[this.carInfos.choix_moteur].classe) < 161 ) 
							catMoteur = 'D';
						else if ( parseFloat(this.carInfos.moteur.nom[this.carInfos.choix_moteur].classe) < 201 ) 
							catMoteur = 'E';*/
						this.step2_img.src = catMoteur;
						this.step2_img.width = 85;
						this.step2_img.height = 65;
					this.step2_a.appendChild(this.step2_img);
			}
		}
		if ( this.etape > 3 )
		{
			this.step3_p1 = new Element('p');
				this.step3_p1.set('class', 'colorInfo' );
				var img1 = new Element('img');
					img1.set('class', 'colorImg' );
					img1.src = this.carInfos.couleur_icon[this.carInfos.choix_couleur];
					img1.width = 25;
					img1.height = 25;
				this.step3_p1.appendChild(img1);
				var span1 = new Element('span');
					span1.set('class', 'colorName' );
					span1.set('html', this.carInfos.couleur.nom[this.carInfos.choix_couleur].description );
				this.step3_p1.appendChild(span1);
				var span2 = new Element('span');
					span2.set('class', 'colorPrice' );
				if ( this.carInfos.showPrice )
					span2.set('html',this.carInfos.before_price + this.carInfos.couleur.nom[this.carInfos.choix_couleur].prix + this.carInfos.after_price);
				else
					span2.set('html', this.carInfos.replacePriceLabel);
				this.step3_p1.appendChild(span2);
				
			this.step3_p2 = new Element('p');
				this.step3_p2.set('class', 'colorInfo' );
				var img2 = new Element('img');
					img2.set('class', 'colorImg' );
					img2.src = this.carInfos.trim_icon[this.carInfos.choix_trim];
					img2.width = 25;
					img2.height = 25;
				this.step3_p2.appendChild(img2);
				var span3 = new Element('span');
					span3.set('class', 'colorName' );
					span3.set('html', this.carInfos.trim.nom[this.carInfos.choix_trim].description );
				this.step3_p2.appendChild(span3);
				var span4 = new Element('span');
					span4.set('class', 'colorPrice' );
				if ( this.carInfos.showPrice )
					span4.set('html',this.carInfos.before_price + this.carInfos.trim.nom[this.carInfos.choix_trim].prix + this.carInfos.after_price);
				else
					span4.set('html', this.carInfos.replacePriceLabel);
				this.step3_p2.appendChild(span4);
		}
	},
	
	preselect_cfg : function()
	{
		//on informe lutilisateur de letape actuelle dans la recap box
		if ( $('SummaryBoxResume') != undefined )
		{
			this.showInfo(this.current_etape);
		}
		
		//enlevez les couleurs et trims qui n'ont pas d'assiociation
		if ( $('exteriorColors') != undefined && this.current_etape == 3 )
		{
			var reselect = false;
			$('exteriorColors').getChildren().each(function(currentCouleur)
			{
				if ( currentCouleur != $('exteriorColors').getLast() )
				{
					if ( this.carInfos.couleur.nom[this.trim(currentCouleur.id.split('_')[1])] == undefined )
					{
						reselect = true;
						currentCouleur.dispose();
					}
				}
			}.bind(this));
			//on reselectionne lelement
			if ( reselect )
				$('exteriorColors').getFirst().addClass('Selected');
				
			reselect = false;
			$('interiorColors').getChildren().each(function(currentTrim)
			{
				if ( currentTrim != $('interiorColors').getLast() )
				{
					if ( this.carInfos.trim.nom[this.trim(currentTrim.id.split('_')[1])] == undefined )
					{
						reselect = true;
						currentTrim.dispose();
					}
				}
			}.bind(this));
			//on reselectionne lelement
			if ( reselect )
				$('interiorColors').getFirst().addClass('Selected');
		}
		
		//on preload les infos preselectionnees par l'utilisateur si letape a deja ete fait
		if ( this.etape > this.current_etape )
		{
			if ( this.current_etape == 3 )
			{
				this.prix_total_defaut = parseFloat(this.carInfos.prix_total) - parseFloat(this.carInfos.couleur.nom[this.carInfos.choix_couleur].prix);
				this.prix_total_defaut = this.prix_total_defaut - parseFloat(this.carInfos.trim.nom[this.carInfos.choix_trim].prix);
			}
			this.preselect_infoStep(this.current_etape);
		}
		
		//preselect la finition
		if ( this.current_etape == 1 && $('sideTabs')!=undefined )
		{
			if ( $('sideTabs').getElement('.SideTabSelected') != undefined )
				this.changeInfo_Finition($('sideTabs').getElement('.SideTabSelected'));
				//this.carInfos.choix_finition = $('sideTabs').getElement('.SideTabSelected').getProperty('id');
		}
		
		//creation de laccordion avec la selection par defaut si lutilisateur n'as pas encore choisi le moteur ----> etapes  2
		if ( $('accordion') != undefined && this.current_etape == 2 )
		{
			this.createAccordion();
		}
		
		// si ya pas de color par defaut on les choisi pour l'utilisateur ----> etapes  3
		if (  this.carInfos.choix_couleur == undefined || this.carInfos.choix_couleur == '' && this.current_etape == 3 )
		{
			if ( $('exteriorColors').getElement('.Selected') != undefined )
				var s = $('exteriorColors').getElement('.Selected').getProperty('id').split('_');
			else
				alert('There is no color associated to the current motor');
			if ( $('interiorColors').getElement('.Selected') != undefined )
				var s2 = $('interiorColors').getElement('.Selected').getProperty('id').split('_');
			else
				alert('There is no trim associated to the current motor');
			
			//load defaut
			if ( this.carInfos.trim.nom[s2[1]] != undefined )
			{
				this.carInfos.choix_couleur = this.trim(s[1]);
				this.changeCarInterior($('interiorColors').getElement('.Selected'));
			}
			if ( this.carInfos.couleur.nom[s[1]] != undefined )
			{
				this.changeCarColor($('exteriorColors').getElement('.Selected'));
				this.carInfos.choix_trim = this.trim(s2[1]);
			}
		}
		
		//si on est sur la page accessoire on essaie de recuperer les infos des accessoires ---> etape 5
		if ( $('accessoryCart') != undefined )
		{
			this.load_accessoires_panier();
		}
		
		//on load les prix
		if ( $('TotalPrice') != undefined )
		{
			this.update_price();
		}
	},
	
	//on selectionne les choix de l'ulisateur precedement choisi
	preselect_infoStep: function(current_etape)
	{
		//preselection des infos de l'etape 1
		if ( current_etape == 1 && $('sideTabs')!=undefined )
		{	
			if ( this.carInfos.choix_finition != undefined && this.carInfos.choix_finition != '' )
			{
				var choix;
				//on selectionne la finition precedement choisi
				$$('.SideTabItemContent').each(function(el)
				{
					el.removeClass('SideTabSelected');
					if (el.id == this.carInfos.choix_finition)
					{
						choix = el;
					}
				}.bind(this));
				//MAJ des infos dans le panel du milieu
				choix.addClass('SideTabSelected');
				this.changeInfo_Finition(choix);
			}
		}
		
		//preselection des infos de l'etape 2
		else if ( current_etape == 2 && $('sideTabs')!=undefined )
		{
			if ( this.carInfos.choix_moteur != undefined && this.carInfos.choix_moteur != '' )
			{
				var choix = '';
				//on selectionne la finition precedement choisi
				$$('.SideTabItemContent').each(function(el)
				{
					el.removeClass('SideTabSelected');
					if (el.id == this.carInfos.choix_moteur)
					{
						choix = el;
					}
				}.bind(this));
				//MAJ des infos dans le panel du milieu
				choix.addClass('SideTabSelected');
				this.changeInfo_Motor(choix);
			}
		}
		
		//preselection des infos de l'etape 3
		else if ( current_etape == 3 && $('interiorColors')!=undefined )
		{
			if ( this.carInfos.choix_trim != undefined && this.carInfos.choix_trim != '' )
			{
				var choix_trim;
				$('interiorColors').getChildren().each(function(el)
				{
					el.removeClass('Selected');
					if ( this.trim(el.id.split('_')[1]) == this.carInfos.choix_trim )
					{
						choix_trim = el;
					}
				}.bind(this));
				choix_trim.addClass('Selected');
				this.changeCarInterior(choix_trim);
			}
			
			if ( this.carInfos.choix_couleur != undefined && this.carInfos.choix_couleur != '' )
			{
				var choix_couleur;
				$('exteriorColors').getChildren().each(function(el)
				{
					el.removeClass('Selected');
					if ( this.trim(el.id.split('_')[1]) == this.carInfos.choix_couleur )
					{
						choix_couleur = el;
					}
				}.bind(this));
				choix_couleur.addClass('Selected');
				this.changeCarColor(choix_couleur);
			}
		}
		
		//preselection des infos de l'etape 4
		else if ( current_etape == 4 )
		{
			if ( $('options_select') != undefined )
			{
				var option;
				//les prix sont deja prix en compte on save alors le prix
				var basePrix = this.carInfos.prix_de_base;
				var totalPrix = this.carInfos.prix_total;
				$each(this.carInfos.choix_options, function(v, k)
				{
					option = $('options_select').getElement('input[value='+v+']');
					option.checked = true;
					this.click_option(option);
					
				}.bind(this));
				//on restaure les bon prix
				this.carInfos.prix_de_base = basePrix;
				this.carInfos.prix_total = totalPrix;
				this.update_price();
			}
		}
	},
	
	
	
	/*************************************************************************************************************************
	 * Functions
	 *************************************************************************************************************************/
	
	/****************************************************Fonctions communes aux etapes *****************************************/
	//montrer l'info de l'etape courant au chargement de la page
	showInfo: function(current_etape)
	{
		if ( current_etape==1 )
			this.show_recapInfo_step1();
		else if( current_etape==2 )
			this.show_recapInfo_step2();
		else if ( current_etape==3 )
			this.show_recapInfo_step3();
		else if ( current_etape==4 )
			this.show_recapInfo_step4();
		else
			this.show_recapInfo_step1();
	},
	
	//montrer les infos de l'etape 1
	show_recapInfo_step1: function()
	{
		if (this.last_info != $('step1'))// pour eviter de recharger plusieur fois
		{
			this.last_info = $('step1');
			//code pour la mise a jour de la recapbox pour le step 1 ici
			if ( this.current_etape == 1 )
			{
				$('SummaryBoxResume').set('html','');
				$('SummaryBoxResume').setStyle('text-align','left');
				$('SummaryBoxResume').set('html', this.carInfos.info_recap1 );
			}
			else
			{
				//info sur la finition
				//$('SummaryBoxResume').setStyle('display','none');
				$('SummaryBoxResume').set('html','');
				$('SummaryBoxResume').addClass('carFinition');
				$('SummaryBoxResume').setStyle('text-align','center');
				
				//optimisation de prechargement
				$('SummaryBoxResume').appendChild(this.step1_img);
				$('SummaryBoxResume').appendChild(this.step1_p);
				//$('SummaryBoxResume').setStyle('display','block');
				
				if (Browser.Engine.trident && Browser.Engine.version == 4)
				{
					if (typeof pngfix=='function')
						pngfix();
					this.preload_image();
				}
			}
		}
	},
	
	//montrer les infos de l'etape 2
	show_recapInfo_step2: function()
	{
		if (this.etape >= 2 && this.last_info != $('step2'))// pour eviter de recharger plusieur fois
		{
			this.last_info = $('step2');
			$('SummaryBoxResume').removeClass('carFinition');
			//code pour la mise de jour de la recapbox pour le step 2 ici
			if ( this.current_etape == 2 )
			{
				$('SummaryBoxResume').set('html','');
				$('SummaryBoxResume').setStyle('text-align','left');
				$('SummaryBoxResume').set('html', this.carInfos.info_recap2 );
			}
			else if ( this.etape > 2 )
			{
				//info sur le moteur choisi
				//$('SummaryBoxResume').setStyle('display','none');
				$('SummaryBoxResume').set('html','');
				$('SummaryBoxResume').setStyle('text-align','center');
				
				var p = new Element('p');
					p.set('class', 'motorType');
					p.set('html', this.carInfos.moteur.nom[this.carInfos.choix_moteur].type );
				$('SummaryBoxResume').appendChild(p);
				var p = new Element('p');
					p.set('class', 'motorName');
					p.set('html', this.carInfos.moteur.nom[this.carInfos.choix_moteur].nomination );
				$('SummaryBoxResume').appendChild(p);
				var p = new Element('p');
					p.set('class', 'motorBox');
					p.set('html', this.carInfos.moteur.nom[this.carInfos.choix_moteur].box );
				$('SummaryBoxResume').appendChild(p);
				
				if ( this.carInfos.moteur.nom[this.carInfos.choix_moteur].imgco2big != undefined && this.carInfos.moteur.nom[this.carInfos.choix_moteur].imgco2big != '' )
				{
					//prechargement image optimise
					$('SummaryBoxResume').appendChild(this.step2_a);
					//$('SummaryBoxResume').setStyle('display','block');
					
					//mise a jour des infos de la milkbox
					this.milkbox = new Milkbox();
					this.milkbox.changeOptions({ 
						topPosition :'100px',
						autoSize: true
					});
					
					if (Browser.Engine.trident && Browser.Engine.version == 4)
					{
						//pngfix();
						this.preload_image();
					}
				}
			}
		}
	},
	
	//montrer les infos de l'etape 3
	show_recapInfo_step3: function()
	{
		if (this.etape >= 3 && this.last_info != $('step3'))// pour eviter de recharger plusieur fois
		{
			this.last_info = $('step3');
			$('SummaryBoxResume').removeClass('carFinition');
			//code pour la mise de jour de la recapbox pour le step 3 ici
			if ( this.current_etape == 3 )
			{
				$('SummaryBoxResume').set('html','');
				$('SummaryBoxResume').setStyle('text-align','left');
				$('SummaryBoxResume').set('html',this.carInfos.info_recap3);
			}
			else if ( this.etape > 3 )
			{
			//info sur le visuel de la voiture
				//$('SummaryBoxResume').setStyle('display','none');
				$('SummaryBoxResume').set('html','');
				$('SummaryBoxResume').setStyle('text-align','left');
				
				//prechargement image optimise
				$('SummaryBoxResume').appendChild(this.step3_p1);
				$('SummaryBoxResume').appendChild(this.step3_p2);
				//$('SummaryBoxResume').setStyle('display','block');
				
				if (Browser.Engine.trident && Browser.Engine.version == 4)
				{
					//pngfix();
					this.preload_image();
				}
			}
		}
	},
	
	//montrer les infos de l'etape 4
	show_recapInfo_step4: function()
	{	
		if (this.etape >= 4 && this.last_info != $('step4'))// pour eviter de recharger plusieur fois
		{
			this.last_info = $('step4');
			$('SummaryBoxResume').removeClass('carFinition');
			//code pour la mise de jour de la recapbox pour le step 4 ici
			if ( this.current_etape == 4 )
			{
				$('SummaryBoxResume').set('html','');
				$('SummaryBoxResume').setStyle('text-align','left');
				$('SummaryBoxResume').set('html', this.carInfos.info_recap4 );
			}
			else if ( this.etape > 4 )
			{
				//$('SummaryBoxResume').setStyle('display','none');
				$('SummaryBoxResume').set('html','');
				$('SummaryBoxResume').setStyle('text-align','left');
				//on parcours tous les options
				var i = 0;
				var div = new Element('div');
					div.set('class','item_options');
					var ul = new Element('ul');
						ul.set('class','options_list');
				while ( this.carInfos.choix_options[i] != undefined )
				{
						var li = new Element('li');
						var span = new Element('span');
							span.set('class','option_price');
							if ( this.carInfos.showPrice )
								span.set('html', this.carInfos.before_price + this.carInfos.options_reference.ref[this.carInfos.choix_options[i]].prix + this.carInfos.after_price);
							else
								span.set('html', this.carInfos.replacePriceLabel);
							li.appendChild(span);
						
						var span = new Element('span');
							span.set('class', 'option_name');
							span.set('html', this.carInfos.options_reference.ref[this.carInfos.choix_options[i]].nom )
							li.appendChild(span);

						ul.appendChild(li);
					i++;
				}
					div.appendChild(ul);
				$('SummaryBoxResume').appendChild(div);
				//$('SummaryBoxResume').setStyle('display','block');
			}
		}
	},
	
	//tooltip standalone
	show_tooltipAlone: function(el)
	{
		var elementWidth = null;
		var elementContent = el.getFirst().getFirst();
		var elementWidth = elementContent.getSize().x;

		$('tooltip').setStyle('top',$(el).getPosition().y-15);
		$('tooltip').setStyle('left',$(el).getPosition().x+elementWidth);
		
		//ici le code pour la mise a jour de l'info du tooltip !
		
		//tooltip text
		$('tooltip').getElement('.Description').set('html', this.carInfos.textOnHover );
		
		$('tooltip').setStyle('opacity',0);
		$('tooltip').setStyle('display','block');
		$('tooltip').fade(1);
	},
	
	//montrer le tooltip
	show_tooltip: function(el)
	{
		$('tooltip').setStyle('top',$(el).getPosition().y-15);
		$('tooltip').setStyle('left',$(el).getPosition().x+22);
		
		//ici le code pour la mise a jour de l'info du tooltip !
		
		//tooltip pour les differentes etapes
		if ( this.current_etape==1 && this.carInfos.tooltip[el.id] != undefined )
		{
			$('tooltip').getElement('.Description').set('html', this.carInfos.tooltip[el.id] );
		}
		else if ( this.current_etape==4 && this.carInfos.options_reference.ref[el.id] != undefined )
		{
			$('tooltip').getElement('.Description').set('html', this.carInfos.options_reference.ref[el.id].tooltip );
		}
		
		$('tooltip').setStyle('opacity',0);
		$('tooltip').setStyle('display','block');
		$('tooltip').fade(1);
	},
	
	//cacher le tooltip
	hide_tooltip: function(el)
	{
		$('tooltip').fade(0);
	},
	
	//survol d'un item du menu en haut a droite
	rightTopMenuEnter: function(menu)
	{	
		//on arrete le blink pour eviter un bug d'affichage
		//$clear(this.blink);
		menu.fade(1);
		menu.setStyle('opacity',1);
		menu.setStyle('visibility','visible');
		
		
		//on montre le menu right top au dessus de loverlay avec les infos correspondant
		if ( $('deliamask').getStyle('opacity') == 0 || $('deliamask').getStyle('opacity') == 1 )//pour eviter de refaire leffet overlay  bizarement il est a 1 au tout debut..
		{
			//$('topRightMenu').setStyle('z-index','99999');
			var map = $('topRightMenu').getCoordinates();
			var map_left = map.left
			if ( Browser.Engine.gecko )
				map_left += 0;
			this.clone2 = $('topRightMenu').clone(true,true).injectAfter('deliamask');
			this.clone2.set({
				'styles': {
					'z-index': '999',
					'position': 'absolute',
					'display': 'block',
					'top': map.top,
					'left': map_left
			}
			});
			$('topRightMenu').setStyle('visibility','hidden');
			this.clone2.addEvent('mouseleave', this.topRightMenuLeave.pass([], this));
			this.clone2.getElements('.top_menu').each(function(el)
			{
				el.addEvent('mouseenter', this.changeTopMenuInfo.pass([el], this));
				//evenement pour email popup
				if ( el.id == 'menu_save' && el.hasClass('sendEmail') )
				{
					el.addEvent('click', function()
					{
						$('emailPopup').setStyle('display','block');
					});
				}
			}.bind(this));
			this.clone2.setStyle('display','block');
			//show overlay
			this.show_Overlay();
			
			SqueezeBox.assign(this.clone2.getElements('.popup_menu'), {
				parse: 'rel'
			});
		}
		
		//show overlay
		//this.show_Overlay();
	},
	
	changeTopMenuInfo: function(menu)
	{
		$('info_Text').set('html','');
		if ( $('info_Text').getParent().getElement('.selector') != undefined )
			$('info_Text').getParent().getElement('.selector').dispose();
		var h5 = new Element('h5');
		var p = new Element('p');
		/* var div = new Element('div');
			div.set('html','&nbsp;');
			div.set('class','selector'); */
		//div.setStyle('left',menu.getPosition(menu.getParent()).x+38);
		
		if ( this.carInfos.menu_contextuelle.nom[menu.id] != undefined )
		{
			h5.set('html', this.carInfos.menu_contextuelle.nom[menu.id].titre);
			p.set('html', this.carInfos.menu_contextuelle.nom[menu.id].description);
		}
		else
		{
			h5.set('html', '');
			p.set('html', '');
		}
		
		//la fleche
		$('selectorArrow').setStyle('left',menu.getCoordinates().left+12);
		$('selectorArrow').setStyle('top',menu.getCoordinates().top+29);
		$('selectorArrow').setStyle('display','block');
		
		//on affiche le contenu dans la box d'info
		$('info_Text').appendChild(h5);
		$('info_Text').appendChild(p);
		//$('info_Text').getParent().appendChild(div);
		
		$('topRightMenuInfo').setStyle('display','block');
		$('topRightMenuInfo').setStyle('visibility','hidden');
		if ( this.clone3 == '' )
		{
			var map = $('topRightMenuInfo').getCoordinates();
			var map_left = map.left;
			if ( Browser.Engine.gecko )
				map_left += 0;
			if ( menu.id == 'menu_specs' )
				map_left -= 38;
			if ( menu.id == 'menu_save' )
				map_left -= 82;
			if ( menu.id == 'menu_email' )
				map_left -= 126;
				this.clone3 = $('topRightMenuInfo').clone(true,true).injectAfter('deliamask');
				this.clone3.addEvent('mouseenter', this.topRightMenuLeave.pass([], this)); 
				this.clone3.set({
					'styles': {
						'z-index': '999',
						'position': 'absolute',
						'display': 'block',
						'visibility': 'visible',
						'top': map.top+12,
						'left': map_left
				}
				});
				this.clone3.setStyle('display','block');
		}
		else
		{
			var map = $('topRightMenuInfo').getCoordinates();
			var map_left = map.left;
			if ( Browser.Engine.gecko )
				map_left += 0;
			if ( menu.id == 'menu_specs' )
				map_left -= 38;
			if ( menu.id == 'menu_save' )
				map_left -= 82;
			if ( menu.id == 'menu_email' )
				map_left -= 126;
			this.clone3.setStyle('left',map_left);
			//this.clone3.getElement('.selector').setStyle('left',menu.getPosition(menu.getParent()).x+38);
			if ( this.carInfos.menu_contextuelle.nom[menu.id] != undefined )
			{
				this.clone3.getElement('h5').set('html', this.carInfos.menu_contextuelle.nom[menu.id].titre);
				this.clone3.getElement('p').set('html', this.carInfos.menu_contextuelle.nom[menu.id].description);
			}
			else
			{
				this.clone3.getElement('h5').set('html', '');
				this.clone3.getElement('p').set('html', '');
			}
			
		}
		//$('topRightMenuInfo').setStyle('display','none');
	},
	
	//montrer une pop up avec en argument le code html
	showInfo_popup: function(structure)
	{
		var top=(screen.height-700)/2;
		var left=(screen.width-600)/2;
		var newWindow = window.open('','Informations','top='+top+', left='+left+', scrollbars=yes, width=600, height=600');
		//Ecrit la structure dans la fenetre popup
		//newWindow.document.write(structure);
	},
	
	//mise a jour des prix
	update_price: function()
	{	
		if ( this.carInfos.showPrice )//si les prix sont affiches ou pas ==> australie qui ne veut pas de prix
		{
			//info box a changer
			// mise a jour des prix
			if ( $('TotalPrice')!= undefined /*&& this.etape == this.current_etape*/ && this.current_etape <= 2 && this.etape<=3 )
			{
				if (this.current_etape==1)
				{
					if (usePromoPrice)
					{
						if (this.carInfos.finition.nom[this.carInfos.choix_finition].prix != this.carInfos.finition.nom[this.carInfos.choix_finition].prix_promotion && this.carInfos.finition.nom[this.carInfos.choix_finition].prix_promotion > this.carInfos.finition.nom[this.carInfos.choix_finition].prix)
						{
							$('SousTotalPricePromotion').setStyle('display','block');
							$('SousTotalPricePromotion').getFirst().set('html',this.carInfos.before_price + this.number_format(this.carInfos.finition.nom[this.carInfos.choix_finition].prix_promotion , 0 , "," , this.carInfos.priceThousands) + this.carInfos.after_price);
							$('SousTotalPriceDiffPromotion').setStyle('display','block');
							$('SousTotalPriceDiffPromotion').getFirst().set('html',this.carInfos.before_price + this.number_format(this.carInfos.finition.nom[this.carInfos.choix_finition].prix_promotion_diff , 0 , "," , this.carInfos.priceThousands) + this.carInfos.after_price);
						}
						else 
						{
							$('SousTotalPricePromotion').setStyle('display','none');
							$('SousTotalPriceDiffPromotion').setStyle('display','none');
						}
					}
					$('TotalPrice').getFirst().set('html',this.carInfos.before_price + this.number_format(this.carInfos.finition.nom[this.carInfos.choix_finition].prix , 0 , "," , this.carInfos.priceThousands) + this.carInfos.after_price);
				}
				else//2 et 3
				{
					if (usePromoPrice)
					{
						if (this.carInfos.moteur.nom[this.carInfos.choix_moteur].prix != this.carInfos.moteur.nom[this.carInfos.choix_moteur].prix_promotion && this.carInfos.moteur.nom[this.carInfos.choix_moteur].prix_promotion > this.carInfos.moteur.nom[this.carInfos.choix_moteur].prix)
						{
							$('SousTotalPricePromotion').setStyle('display','block');
							$('SousTotalPricePromotion').getFirst().set('html',this.carInfos.before_price + this.number_format(this.carInfos.moteur.nom[this.carInfos.choix_moteur].prix_promotion , 0 , "," , this.carInfos.priceThousands) + this.carInfos.after_price);
							$('SousTotalPriceDiffPromotion').setStyle('display','block');
							$('SousTotalPriceDiffPromotion').getFirst().set('html',this.carInfos.before_price + this.number_format(this.carInfos.moteur.nom[this.carInfos.choix_moteur].prix_promotion_diff , 0 , "," , this.carInfos.priceThousands) + this.carInfos.after_price);
						}
						else 
						{
							$('SousTotalPricePromotion').setStyle('display','none');
							$('SousTotalPriceDiffPromotion').setStyle('display','none');
						}
					}
					$('TotalPrice').getFirst().set('html',this.carInfos.before_price + this.number_format(this.carInfos.moteur.nom[this.carInfos.choix_moteur].prix , 0 , "," , this.carInfos.priceThousands) + this.carInfos.after_price);
				}
			}
			else
			{
				if ( $('TotalPrice')!= undefined )
				{
					if ( this.carInfos.prix_de_base != this.carInfos.prix_total ) // si il y surcout ( couleur,trim,accessoire,options)
					{
						$('SousTotalPrice').getFirst().set('html',this.carInfos.before_price + this.number_format(this.carInfos.prix_de_base , 0 , "," , this.carInfos.priceThousands) + this.carInfos.after_price);
						$('SousTotalPrice').setStyle('display','block');
					}
					else// si tout est de serie
					{
						$('SousTotalPrice').getFirst().set('html','');
						$('SousTotalPrice').setStyle('display','none');
					}
					if (usePromoPrice)
					{
						if (this.carInfos.prix_total_promotion > 0) 
						{
							$('SousTotalPricePromotion').setStyle('display','block');
							$('SousTotalPricePromotion').getFirst().set('html',this.carInfos.before_price + this.number_format(this.carInfos.prix_total_promotion , 0 , "," , this.carInfos.priceThousands) + this.carInfos.after_price);
							$('SousTotalPriceDiffPromotion').setStyle('display','block');
							$('SousTotalPriceDiffPromotion').getFirst().set('html',this.carInfos.before_price + this.number_format(this.carInfos.prix_total_diff_promotion , 0 , "," , this.carInfos.priceThousands) + this.carInfos.after_price);
						}
						else 
						{
							$('SousTotalPricePromotion').setStyle('display','none');
							$('SousTotalPriceDiffPromotion').setStyle('display','none');
						}
					}
					$('TotalPrice').getFirst().set('html',this.carInfos.before_price + this.number_format(this.carInfos.prix_total , 0 , "," , this.carInfos.priceThousands) + this.carInfos.after_price);
				}
			}
			
			//double prix
			//var useLocalPrice = true ou false si ya un double prix
			//var localPriceConvert = taux de conversion du double prix
			//var localPriceUnit = Money du double prix
			if ( useLocalPrice && $('TotalPrice')!= undefined )
			{
				var second_price = parseFloat(this.carInfos.prix_total) * parseFloat(localPriceConvert);
				if ( this.carInfos.before_price != undefined && this.carInfos.before_price != '' )
				{
					var before_second_price = localPriceUnit;
					var after_second_price = '';
				}
				else
				{
					var before_second_price = '';
					var after_second_price = localPriceUnit;
				}
				//prix de base
				if ( $('SousTotalPrice').getStyle('display') == 'block' )
				{
					var second_price_base = parseFloat(this.carInfos.prix_de_base) * parseFloat(localPriceConvert);
					$('SousTotalPrice2').getFirst().set('html', '( ' + before_second_price +' '+ this.number_format(second_price_base , 0 , "," , this.carInfos.priceThousands) +' '+ after_second_price +' )' );
					$('SousTotalPrice2').setStyle('display','block');
				}
				else
				{
					$('SousTotalPrice2').getFirst().set('html','');
					$('SousTotalPrice2').setStyle('display','none');
				}
				//prix total
				if ( this.current_etape <= 2 && this.etape<=3)
				{
					if (this.current_etape==1)
					{
						var second_price = parseFloat(this.carInfos.finition.nom[this.carInfos.choix_finition].prix) * parseFloat(localPriceConvert);
					}
					else//2 et 3
					{
						var second_price = parseFloat(this.carInfos.moteur.nom[this.carInfos.choix_moteur].prix) * parseFloat(localPriceConvert);
					}
				}
				else
				{
					var second_price = parseFloat(this.carInfos.prix_total) * parseFloat(localPriceConvert);
				}
				$('TotalPrice2').getFirst().set('html', '( ' + before_second_price +' '+ this.number_format(second_price , 0 , "," , this.carInfos.priceThousands) +' '+ after_second_price + ' )' );
				$('TotalPrice2').setStyle('display','block');
			}
			else
			{
				//console.log('pas de double prix');
			}
		}
		else	//remplacement du prix par un label
		{
			$('TotalPrice').getElement('.left_price').set('html','');
			$('TotalPrice').getFirst().set('html',this.carInfos.replacePriceLabel);
		}
	},
	
	//mise a jour de la financement box
	maj_InfoBox: function()
	{
		//code pour la mise a jour du financement box
		var a = new Element('a');
			a.setProperty('href', '#');
			a.setProperty('target', '_new');
			a.set('html','exemple de financememnt');
		$('financingBox_content').set('html','');
		$('financingBox_content').appendChild(a);
	},
	
	/****************************************************Fonctions pour les effets visuels communes aux etapes *****************************************/
	//lorqu'on quit le menu en haut a droite
	topRightMenuLeave: function()
	{
		//on clear le timer de l'overlay
		$clear(this.overlay_timer);
		//on detruit le clone et on affiche kl'original
		$('topRightMenu').setStyle('visibility','visible');
		if ( this.clone2 != undefined && this.clone2 != '' && this.clone3 != undefined && this.clone3 != '')
		{
			this.clone2.dispose();
			this.clone3.dispose();
			this.clone3 = ''; 
			$('selectorArrow').setStyle('display','none');
		}
		$('topRightMenuInfo').setStyle('display','none');
		//on cache l'overlay
		this.hide_Overlay();
	},
	
	//deploy undeploy pour details des informations
	details_slide: function(el)
	{	
		// pour montrer k'une categorie ---> pour 'linstant que categorie accessoire
		if ( el.getParent().getParent().id == 'AccessoryCategories' )
		{
			el.getParent().getChildren('h4').removeClass('Less');
			el.getParent().getChildren('h4').addClass('More');
			el.getParent().getChildren('div').setStyle('display','none');
			el.getNext().setStyle('display','block');
			el.removeClass('More');
			el.addClass('Less');
		}
		// pour les deploy et undeploy normal
		else
		{
			if ( el.getNext().getStyle('display') == 'block' )
			{
				el.getNext().setStyle('display','none');
				el.removeClass('Less');
				el.addClass('More');
			}
			else
			{
				el.getNext().setStyle('display','block');
				el.removeClass('More');
				el.addClass('Less');
			}
		}
	},
	
	//faire clignoter les nouveau element du menu contextuel
	menu_blink: function(current_etape)
	{
		if (this.etape == 2)
		{
			this.blink_element('menu_specs', 8, 225);
		}
		else if (this.etape == 3)
		{
			this.blink_element('menu_save', 8, 225);
			this.blink_element('menu_email', 8, 225);
		}
	},
	
	//fonction pour faire clignoter
	blink_element :function(el,nb,vitesse)
	{
		if ( $(el) != undefined )
		{
			var blinkTimer;
			var nb_clignotement = 0;
				var runChain = function()
				{ 
					if ( nb_clignotement < nb )
					{
						if ( $(el).getStyle('opacity')==0 )
						{
							new Fx.Tween(el,
							{
								property: 'opacity',
								duration: vitesse-50
							}).start(0,1);
						}
						else
						{
							new Fx.Tween(el,
							{
								property: 'opacity',
								duration: vitesse-50
							}).start(1,0);
						}
						nb_clignotement++;
					}
					else //on stop le timer et on remet limage
					{
						$clear(blinkTimer);
						//pour eviter les bugs, on affiche lelement de nouveau en fondu
						$(el).fade(1);
					}
				}
			//on lance le timer
			blinkTimer = runChain.periodical(vitesse);
		}
	},
	
	//montrer le menu deroulant des categorie de vehicule
	showCar_Cat: function(f)
	{
		if ( $('deliamask').getStyle('opacity') == 0 || $('deliamask').getStyle('opacity') == 1)//pour eviter de refaire lanimation lorqu'elle est deja faite
		{
			var map = $('ribbon_border').getCoordinates();
			var map_left = map.left
			if ( Browser.Engine.gecko )
				map_left += 0;
			this.clone = $('ribbon_border').clone(true,true).injectAfter('deliamask');
			this.clone.set({
				'styles': {
					'z-index': '302',
					'position': 'absolute',
					'display': 'block',
					'top': map.top,
					'left': map_left-16
			}
			});
			this.clone.getFirst().getLast().setStyle('display','block');
			$('ribbon_border').setStyle('visibility','hidden');
			this.clone.addEvent('click', this.deliamaskClick.pass([], this));
			
			this.cancel_layer = true;
			this.show_Overlay();
		}
	},
	
	//on montre progressivement l'overlay
	show_Overlay: function(f)
	{
		/*$("deliamask").setStyle('height',$(window).getScrollSize().y+$(window).getScroll().y);
		this.overlay_timer = new Fx.Tween("deliamask", 
		{
			property: 'opacity',
			duration: 'normal'
		}).start(0,0.6);*/
		
		$("RibbonShadowOverlay").setStyle('height',$('details_content').getScrollSize().y+$('details_content').getScroll().y+8);
		this.overlay_timer = new Fx.Tween("RibbonShadowOverlay", 
		{
			property: 'opacity',
			duration: 'normal'
		}).start(0,0.7);
	},
	
	//on enleve progressivement l'overlay
	hide_Overlay: function()
	{
		$('ribbon_combo').setStyle('z-index','20');//on remet le z-index pour l'overlay
		$('topRightMenu').setStyle('z-index','20');//on remet le z-index pour l'overlay
		/*new Fx.Tween("deliamask", 
		{
			property: 'opacity',
			duration: 'normal'
		}).start($('deliamask').getStyle('opacity'),0);//0.6 -> 0*/
		if ( $('emailPopup') != undefined )
		{
			if ( $('emailPopup').getStyle('display') == 'none' )
			{
				new Fx.Tween("RibbonShadowOverlay", 
				{
					property: 'opacity',
					duration: 'normal'
				}).start($('RibbonShadowOverlay').getStyle('opacity'),0);//0.6 -> 0
			}
		}
		else
		{
			new Fx.Tween("RibbonShadowOverlay", 
			{
				property: 'opacity',
				duration: 'normal'
			}).start($('RibbonShadowOverlay').getStyle('opacity'),0);//0.6 -> 0
		}
	},
	
	//lorqu'on clik sur le mask overlay
	deliamaskClick: function()
	{
		if ( this.cancel_layer )
		{
			//on detruit le clone
			$('ribbon_border').setStyle('visibility','visible');
			if ( this.clone != undefined && this.clone != '' )
				this.clone.dispose();
			//on cache l'overlay
			this.hide_Overlay();
			//$('ComboBoxItems').setStyle('display','none');
		}
	},
	
	//montrer l'alert box pour quitter le conf
	leave_conf: function(el)
	{
		if ( this.carInfos.showAlertBox == true )
		{
			$('alertBox_ok').setProperty('href', el.getProperty('href'));
			$('alertBox').setStyle('display','block');
			this.show_Overlay();
			this.cancel_layer = false;
			return false;
		}
	},
	
	//cancel l'alert box
	alertBox_cancel: function()
	{
		$('alertBox').setStyle('display','none');
		this.cancel_layer = true;
		this.hide_Overlay();
	},
	
	//montrer lemail pop up
	emailBox_show: function()
	{
		$('alertBox').setStyle('display','none');
		$('emailPopup').setStyle('opacity','0');
		$('emailPopup').setStyle('display','block');
		new Fx.Tween("emailPopup",
		{
			property: 'opacity',
			duration: 'normal'
		}).start(0.0,1.0);
	},
	
	emailBoxandOverlay_show: function()
	{
		this.cancel_layer = false;
		this.show_Overlay();
		$('emailPopup').setStyle('display','block');
		return false;
	},
	
	//sauvegarde de la configuration
	emailBox_send: function()
	{
		$('emailPopup').setStyle('display','none');
		this.cancel_layer = true;
		this.hide_Overlay();
		this.save_config_overlay();
	},
	
	//annuler la pop pour envoyer la sauvegarde
	emailBox_cancel: function()
	{
		$('emailPopup').setStyle('display','none');
		this.cancel_layer = true;
		this.hide_Overlay();
	},
	
	//mise a jour de la financement box
	maj_InfoBox: function()
	{
		//code pour la mise a jour du financement box
		var a = new Element('a');
			a.setProperty('href', '#');
			a.setProperty('target', '_new');
			a.set('html','exemple de financememnt');
		$('financingBox_content').set('html','');
		$('financingBox_content').appendChild(a);
	},
	
	/****************************************************Fonctions relatives aux etapes 1 et 2 *****************************************/
	//on cree l'accordion avec les evements lies
	createAccordion: function()
	{
		//on rechercher dans quel toggler est l'element(moteur) selectionne
		var cat = -1;
		var trouve = false;
		$$('.SideTabCategoryItems').each(function(el)
		{
			if ( !trouve )
			{
				el.getElements('.SideTabItemContent ').each(function(moteur)
				{
					if ( !trouve )
					{
						if ( moteur.get('class').indexOf('SideTabSelected') != -1 )//si on trouve la class selected
						{
							trouve = true;
						}
					}
				}.bind(this));
				cat++;
			}
		}.bind(this));
		
		//on cree l'accordion
		this.myAccordion = new Fx.Accordion( $$('h4.toggler'), $$( 'div.SideTabCategoryItems'), {
			show: cat,
			initialDisplayFx: false,
			opacity: false,
			onActive: function(toggler, element){
				//element active
				toggler.set('class','toggler less');
				//on affiche les infos de l'element selectionnee
				//on recherche l'element selectionne
				var boucle = true;
				var current = element.getFirst();
				while( boucle && current != undefined )
				{
					if ( current.get('class').indexOf('SideTabSelected') != -1 )
					{
						boucle = false;
					}
					else
					{
						current = current.getNext();
					}
				}
				//si lelement selectionne a ete trouve
				if ( boucle==false )
				{
					this.changeInfo_Vehicule(current);
				}
				//sinon on selectionne le 1er element
				else
				{
					element.getFirst().addClass('SideTabSelected');
					this.changeInfo_Vehicule(element.getFirst());
				}
				//border fix
				element.setStyle('border','');
			}.bind(this),
			onBackground: function(toggler, element){
				//element en fond
				toggler.set('class','toggler more');
			}
		});
		
	},
	
	//evement sur le click d'un item de laccordeon
	optionItemClick: function(el)
	{
		//on deselectionen tout et on selectionen le bon
		el.getParent().getChildren().each(function(item)
			{
				item.removeClass('SideTabSelected');
			});
		el.addClass('SideTabSelected');
		//MAJ des infos dans le panel du milieu
		this.changeInfo_Vehicule(el);
	},
	
	//on change les infos selon l'etape pour les item en accordion
	changeInfo_Vehicule: function(el)
	{
		// code pour remplir la colonne du milieu avec les elements correspondant
		if (this.current_etape == 1)
				this.changeInfo_Finition(el);
				
		if (this.current_etape == 2)
				this.changeInfo_Motor(el);
	},
	
	//on change les infos selon l'etape 1 dans le panel du milieu -> finition
	changeInfo_Finition: function(el)
	{
		// recup de l'id
		var id = el.id;
		
		//save choix
		this.carInfos.choix_finition = id;
		 
		//charger la nouvelle l'image 
		/*var load = new Image();
			load.src = '/defaultSites/peugeot/images/new_cfg/loadingBig.gif';
			load.width = 32;
			load.height = 32;*/
		var img = new Element('img');
			//img.src = this.carsInfos.opts.url_bigImg[s[1]];
			img.src = this.carInfos.finition.nom[el.id].url_img;
			img.width = 377;
			img.height = 204;
		var images = [
			img.src
		];
		
		//change infos
		var ul = new Element('ul');
		$each(this.carInfos.finition.nom[id].caracteristiques, function(v, k)
		{
			var li = new Element('li');
			li.set('html',v+'  ');
			if ( this.carInfos.tooltip[v] != undefined )
			{
				var img = new Element('img');
					img.src = '/defaultSites/peugeot/images/new_cfg/info.png';
					img.width = 16;
					img.height = 15;
					img.setProperty('id',v);
					img.set('class','tooltip_info');
					img.addEvent('mouseenter', this.show_tooltip.pass([img], this));
					img.addEvent('mouseleave', this.hide_tooltip.pass([img], this));
					li.appendChild(img);
					if (Browser.Engine.trident && Browser.Engine.version == 4)
					{
						if (typeof pngfix=='function')
							pngfix();
					}
			}
			ul.appendChild(li);
		}.bind(this));
		
		//loading
		new Asset.images(images, 
		{
			onProgress: function() {
				//$('finitions').set('html','');
				//$('finitions').appendChild(load);
			},
			onComplete: function() {
				$('finitions').set('html','');
				$('finitions').appendChild(img);
				if (Browser.Engine.trident && Browser.Engine.version == 4)
				{
					if (typeof pngfix=='function')
						pngfix();
				}
				if ( this.carInfos.finitionText != undefined && this.carInfos.finitionText != '' )
				{
					var p = new Element('p');
						p.set('html', this.carInfos.finitionText);
						$('finitions').appendChild(p);
				}
				$('finitions').appendChild(ul);
			}.bind(this)
		});
		
		//pngfix
		if (Browser.Engine.trident && Browser.Engine.version == 4)
		{
			if (typeof pngfix=='function')
				pngfix();
		}
		
		//afficher le nouveau prix
		if ( $('TotalPrice') != undefined )
		{
			this.update_price();
		}
		
		//si nous sommes dans finition simplepage on doit mettre a jour les liens sur la box a droite
		if ( $('LinkBoxItems') != undefined )
		{
			if ( $('topRightCompare') != undefined )
			{
				$('topRightCompare').setProperty('href',this.carInfos.finition.nom[id].url);
			}
			if ( $('topRightConfigure') != undefined )
			{
				$('topRightConfigure').setProperty('href',this.carInfos.finition.nom[id].url_conf);
			}
		}
	},
	
	//on change les infos selon l'etape 2 dans le panel du milieu -> motorisation
	changeInfo_Motor: function(el)
	{
		// recup de l'id
		var id = el.id;
		
		//save choix
		this.carInfos.choix_moteur = el.id;
		
		//mis a jour url pour les specs
		if (this.current_etape == 2)
		{
			if ( $('menu_specs') != undefined )
			{
				$('menu_specs').href = '/index.php?template=new_cfg/range/specs&motor=' + this.carInfos.choix_moteur;
			}
		}
		
		//changer le nom du moteur
		if ( this.carInfos.showBox )
			$('motorName').set('html',this.carInfos.moteur.nom[el.id].nomination + ' - ' + this.carInfos.moteur.nom[el.id].box);
		else
			$('motorName').set('html',this.carInfos.moteur.nom[el.id].nomination);
		//on efface l'ancien tableau de contenu
		$('motorInfos').set('html','');
		
		//on ajoute la description
		$('motor_description').set('html',this.carInfos.moteur.nom[el.id].description);
		
		//on change les images du CO2
		if ( this.carInfos.moteur.nom[el.id].imgco2big !=undefined && this.carInfos.moteur.nom[el.id].imgco2big != '' )
		{
			var a = new Element('a');
				//a.setProperty('href','/defaultSites/peugeot/images/new_cfg/Engines/CO2/'+this.carInfos.moteur.nom[el.id].classe+'.gif');
				a.setProperty('href',this.carInfos.moteur.nom[el.id].imgco2big);
				a.setProperty('rel','milkbox');
			var img = new Element('img');
				//img.src = '/defaultSites/peugeot/images/new_cfg/Engines/CO2/'+this.carInfos.moteur.nom[el.id].classe+'_small.gif';
			var catMoteur;
			
			//this.step2_img = new Element('img');
			catMoteur = this.carInfos.moteur.nom[el.id].imgco2thumb;
			img.src = catMoteur;
			img.width = 85;
			img.set('class','imgStyle');
			img.height = 65;
			a.appendChild(img);
			
			
			
			
			/*if ( parseFloat(this.carInfos.moteur.nom[el.id].classe) < 101 ) 
				catMoteur = this.co2A;
			else if ( parseFloat(this.carInfos.moteur.nom[el.id].classe) < 121 ) 
				catMoteur = this.co2B;
			else if ( parseFloat(this.carInfos.moteur.nom[el.id].classe) < 141 ) 
				catMoteur = this.co2C;
			else if ( parseFloat(this.carInfos.moteur.nom[el.id].classe) < 161 ) 
				catMoteur = this.co2D;
			else if ( parseFloat(this.carInfos.moteur.nom[el.id].classe) < 201 ) 
				catMoteur = this.co2E;
			else if ( parseFloat(this.carInfos.moteur.nom[el.id].classe) < 251 ) 
				catMoteur = this.co2F;
			else 
				catMoteur = this.co2G;*/
				
			
			
			// var a2 = new Element('a');
				//a2.setProperty('href','/defaultSites/peugeot/images/new_cfg/Engines/CO2/'+this.carInfos.moteur.nom[el.id].classe+'.gif');
				// a2.setProperty('href',this.carInfos.moteur.nom[el.id].imgco2big);
				// a2.setProperty('rel','milkbox');
			var div = new Element('div');
				div.set('class','ZoomButton');
			var zoom = this.loupe;
			div.appendChild(zoom);
			a.appendChild(div);
			
			$('Co2class').set('html','');
			$('Co2class').appendChild(a);
			// $('Co2class').appendChild(a2);
			
			if (Browser.Engine.trident && Browser.Engine.version == 4)
			{
				if (typeof pngfix=='function')
					pngfix();
			}
			
			//mise a jour des infos de la milkbox
			this.milkbox = new Milkbox();
				this.milkbox.changeOptions({ 
					topPosition :'100px',
					autoSize: true
				});
		}
		
		//on boucle sur le nombre d'option pour remplir les infos, a chaque iterations on repete ce code 
		$each(this.carInfos.moteur.nom[el.id].caracteristiques, function(v, k)
		{
			var tr = new Element('tr');
			tr.set('class','Technics');
			
			var td_label = new Element('td');
			td_label.set('class','TechnicLabel');
			td_label.set('html',k);
			var td_value = new Element('td');
			td_value.set('class','TechnicValue');
			td_value.set('html',v);
			
			tr.appendChild(td_label);
			tr.appendChild(td_value);
			
			$('motorInfos').appendChild(tr);
		}.bind(this));
		
		//afficher le nouveau prix
		if ( $('TotalPrice') != undefined )
		{
			this.update_price();
		}
		
		//si nous sommes dans finition simplepage on doit mettre a jour les liens sur la box a droite
		if ( $('LinkBoxItems') != undefined )
		{
			if ( $('topRightCompare') != undefined )
			{
				$('topRightCompare').setProperty('href',this.carInfos.moteur.nom[id].url);
			}
			if ( $('topRightConfigure') != undefined )
			{
				$('topRightConfigure').setProperty('href',this.carInfos.moteur.nom[id].url_conf);
			}
		}
	},
	
	/****************************************************Fonctions relatives aux etapes 3 *****************************************/
	//on change la couleur de la voiture lors du click sur une peinture
	changeCarColor: function(el)
	{
		if ( this.carInfos.couleur.nom[el.id.split('_')[1]] != undefined )
		{
			//on active toute les couleurs
			if ( $('interiorColors').getElements('.RadioItem2').length > 1 )
			{
				$('exteriorColors').getChildren().each(function(couleur)
				{
					if ( couleur != $('exteriorColors').getLast() )
						couleur.getLast().setStyle('visibility','hidden');
				}.bind(this));
			}
			
			//lors d'un choix de couleur on disable les trims qui ne sont pas compatible
			$('interiorColors').getChildren().each(function(mytrim)
			{
				if ( mytrim != $('interiorColors').getLast() )
				{
					if ( !this.carInfos.couleur.nom[el.id.split('_')[1]].trims.contains(this.trim(mytrim.id.split('_')[1])) )
					{
						//ici le code pour mettre le petit rouge pour dire que c est indisponible
						mytrim.getLast().setStyle('visibility','visible');
					}
					else
					{
						mytrim.getLast().setStyle('visibility','hidden');
					}
				}
			}.bind(this));
			
			//si le trim selectionne n'est plus disponible on selectionne le 1er par defaut
			if ( $('interiorColors').getElement('.Selected').getLast().getStyle('visibility')=='visible' )
			{
				$('interiorColors').getElement('.Selected').removeClass('Selected');
				$('interiorColors').getFirst().addClass('Selected');
				//choix du premier trim compatible
				var compatible = $('interiorColors').getFirst();
				while ( compatible.getLast().getStyle('visibility')=='visible' )
				{
					compatible = compatible.getNext();
				}
				this.carInfos.choix_trim = this.trim(compatible.id.split('_')[1]);
				this.changeCarInterior_html(compatible);
			}
			
			//maj htlm
			this.changeCarColor_html(el);
			
			//maj du choix de couleur
			this.carInfos.choix_couleur = this.trim(el.id.split('_')[1]);
			
			//maj du prix total
			if ( this.etape > this.current_etape )
			{
				this.carInfos.prix_total = parseFloat(this.prix_total_defaut) + parseFloat(this.carInfos.couleur.nom[this.carInfos.choix_couleur].prix) + parseFloat(this.carInfos.trim.nom[this.carInfos.choix_trim].prix);
			}
			else
			{
				this.carInfos.prix_total = parseFloat(this.carInfos.prix_de_base) + parseFloat(this.carInfos.couleur.nom[this.carInfos.choix_couleur].prix) + parseFloat(this.carInfos.trim.nom[this.carInfos.choix_trim].prix);
			}
			this.update_price();
		}
	},
	
	changeCarColor_html: function(el)
	{
		//selection color
		$$('.RadioItem').removeClass('Selected');
		el.addClass('Selected');
		//on change l'image carcolor  grace a l'id de l'item
		var img = new Element('img');
		img.src = this.carInfos.couleur.nom[el.id.split('_')[1]].url_img;
		img.width = 370;
		img.height = 193;
		//image de preload
		/*var load = new Image();
			load.src = '/defaultSites/peugeot/images/new_cfg/loadingBig.gif';
			load.width = 32;
			load.height = 32;*/
		var images = [
			img.src
		];
		new Asset.images(images, 
		{
			onProgress: function() {
				//$('ColorImage').set('html','');
				//$('ColorImage').appendChild(load);
			},
			onComplete: function() {
				//fondu d'image
				var clone_color = $('ColorImage').clone(true,true);
				clone_color.set('html','');
				clone_color.appendChild(img);
				clone_color.inject('ColorImage','before');
				
				var fx = new Fx.Tween($('ColorImage').getNext(),{
					duration: 350,
					onComplete: function(){ 
						$('ColorImage').getNext().dispose();
					}
				});
				fx.start('opacity',1,0);
			}.bind(this)
		});
		
		//code pour la mise a jour prix et info pour la couleur
		$('color_PriceLabel').set('html','');
			var b = new Element('b');
				var desc = this.carInfos.couleur.nom[el.id.split('_')[1]].description;
				//b.set('html', desc.substr(0, 1)+desc.toLowerCase().substr(1, desc.length));
				b.set('html', desc);
				
		//code pour la mise a jour du sous prix et du prix total
			var nobr = new Element('nobr');
			
			if ( this.carInfos.showColorTrimPrice )
			{
				if ( this.carInfos.showPrice )
					var both_price = ' : '+ this.carInfos.before_price + this.number_format(this.carInfos.couleur.nom[el.id.split('_')[1]].prix , 0 , "," , this.carInfos.priceThousands) + this.carInfos.after_price;
				else
					var both_price = ' : '+ this.carInfos.replacePriceLabel;
					
				if ( useLocalPrice )
				{
					if ( this.carInfos.before_price != undefined && this.carInfos.before_price != '' )
					{
						var before_second_price = localPriceUnit.toLowerCase();
						var after_second_price = '';
					}
					else
					{
						var before_second_price = '';
						var after_second_price = localPriceUnit.toLowerCase();
					}
					both_price += ' ( ' + before_second_price + this.number_format(parseFloat(this.carInfos.couleur.nom[el.id.split('_')[1]].prix) * parseFloat(localPriceConvert), 0 , "," , this.carInfos.priceThousands) + '&nbsp;'+ after_second_price +' )';
				}
				nobr.set('html', both_price);
			}
			else nobr.set('html', '');
		
		$('color_PriceLabel').appendChild(b);
		$('color_PriceLabel').appendChild(nobr);
	},
	
	//on change l'interieur de la voiture lors d'un click sur un trim
	changeCarInterior: function(el)
	{
		if ( this.carInfos.trim.nom[el.id.split('_')[1]] != undefined )
		{
			$('interiorColors').getChildren().each(function(trim)
			{
				if ( trim != $('interiorColors').getLast() )//fix div clearfix pour IE6
					trim.getLast().setStyle('visibility','hidden');
			}.bind(this));
			
			//lors d'un choix de trim on disable les couleurs qui ne sont pas compatible
			$('exteriorColors').getChildren().each(function(couleur)
			{
				if ( couleur != $('exteriorColors').getLast() )
				{
					if ( this.carInfos.trim.nom[el.id.split('_')[1]].couleurs.contains(couleur.id.split('_')[1]) )
					{
						//ici le code pour mettre le petit rouge pour dire que c'est indisponible
						couleur.getLast().setStyle('visibility','hidden');
					}
					else
					{
						couleur.getLast().setStyle('visibility','visible');
					}
				}
			}.bind(this));
			//si la couleur selectionne n'est plus disponible on selectionne le 1er par defaut
			if ( $('exteriorColors').getElement('.Selected').getLast().getStyle('visibility')=='visible' )
			{
				$('exteriorColors').getElement('.Selected').removeClass('Selected');
				$('exteriorColors').getFirst().addClass('Selected');
				//choix du premier trim compatible
				var compatible = $('exteriorColors').getFirst();
				while ( compatible.getLast().getStyle('visibility')=='visible' )
				{
					compatible = compatible.getNext();
				}
				this.carInfos.choix_couleur = this.trim(compatible.id.split('_')[1]);
				this.changeCarColor_html(compatible);
			}
			
			//maj html
			this.changeCarInterior_html(el);
			
			//maj du choix de trim
			this.carInfos.choix_trim = this.trim(el.id.split('_')[1]);
			
			//maj du prix total
			if ( this.etape > this.current_etape )
			{
				this.carInfos.prix_total = parseFloat(this.prix_total_defaut) + parseFloat(this.carInfos.couleur.nom[this.carInfos.choix_couleur].prix) + parseFloat(this.carInfos.trim.nom[this.carInfos.choix_trim].prix);
			}
			else
			{
				this.carInfos.prix_total = parseFloat(this.carInfos.prix_de_base) + parseFloat(this.carInfos.couleur.nom[this.carInfos.choix_couleur].prix) + parseFloat(this.carInfos.trim.nom[this.carInfos.choix_trim].prix);
			}
			this.update_price();
		}
	},
	
	changeCarInterior_html: function(el)
	{
		//selection color
		$$('.RadioItem2').removeClass('Selected');
		el.addClass('Selected');
		//on change l'image carinterior grace a l'id de l'item
		var img = new Element('img');
		img.src = this.carInfos.trim.nom[el.id.split('_')[1]].url_img;
		img.width = 220;
		img.height = 142;
		//$('ImageSpace').set('html','');
		//$('ImageSpace').appendChild(img);
		//image de preload
		/*var load = new Image();
			load.src = '/defaultSites/peugeot/images/new_cfg/loadingBig.gif';
			load.width = 32;
			load.height = 32;*/
		var images = [
			img.src
		];
		new Asset.images(images, 
		{
			onProgress: function() {
				//$('ImageSpace').set('html','');
				//$('ImageSpace').appendChild(load);
			},
			onComplete: function() {
				//fondu d'image
				var clone_color = $('ImageSpace').clone(true,true);
				clone_color.set('html','');
				clone_color.appendChild(img);
				clone_color.inject('ImageSpace','before');
				
				var fx = new Fx.Tween($('ImageSpace').getNext(),{
					duration: 350,
					onComplete: function(){ 
						$('ImageSpace').getNext().dispose();
					}
				});
				fx.start('opacity',1,0);
				if (Browser.Engine.trident && Browser.Engine.version == 4)
				{
					if (typeof pngfix=='function')
						pngfix();
				}
			}.bind(this)
		});
		
		//code pour la mise a jour prix et info pour le trim
		$('trim_PriceLabel').set('html','');
			var b = new Element('b');
				var desc = this.carInfos.trim.nom[el.id.split('_')[1]].description;
				//b.set('html', desc.substr(0, 1)+desc.toLowerCase().substr(1, desc.length));
				b.set('html', desc);
				
		//code pour la mise a jour du sous prix et du prix total
			var nobr = new Element('nobr');
			
			if ( this.carInfos.showColorTrimPrice )
			{
				if ( this.carInfos.showPrice )
					var both_price = ' : '+ this.carInfos.before_price + this.number_format(this.carInfos.trim.nom[el.id.split('_')[1]].prix , 0 , "," , this.carInfos.priceThousands) + this.carInfos.after_price;
				else
					var both_price = ' : '+ this.carInfos.replacePriceLabel;
					
					if ( useLocalPrice )
					{
						if ( this.carInfos.before_price != undefined && this.carInfos.before_price != '' )
						{
							var before_second_price = localPriceUnit.toLowerCase();
							var after_second_price = '';
						}
						else
						{
							var before_second_price = '';
							var after_second_price = localPriceUnit.toLowerCase();
						}
						both_price += ' ( ' + before_second_price + this.number_format(parseFloat(this.carInfos.trim.nom[el.id.split('_')[1]].prix) * parseFloat(localPriceConvert), 0 , "," , this.carInfos.priceThousands) + '&nbsp;'+ after_second_price +' )';
					}
					nobr.set('html', both_price);
			}
			else nobr.set('html', '');
		
		$('trim_PriceLabel').appendChild(b);
		$('trim_PriceLabel').appendChild(nobr);
	},
	
	
	/****************************************************Fonctions relatives aux etapes 4 *****************************************/
	click_option: function(el)
	{
		if (el.checked == true)//option selectionne
		{
			if ( this.carInfos.options_reference.ref[el.value].include != undefined )
			{
				$each(this.carInfos.options_reference.ref[el.value].include, function(v, k)
				{
					if ( this.carInfos.options_reference.ref[v] != undefined )
					{
						if ( $('options_select').getElement('input[value='+v+']') != undefined )
						{
							$('options_select').getElement('input[value='+v+']').checked = true;
							$('options_select').getElement('input[value='+v+']').setProperty('disabled','disabled');
							//text en gris
							$('options_select').getElement('input[value='+v+']').getParent().getParent().setStyle('color','#aaa');
						}
					}
				}.bind(this));
			}
			
			if ( this.carInfos.options_reference.ref[el.value].exclude != undefined )
			{
				var excludes = this.carInfos.options_reference.ref[el.value].exclude.split(',');
				excludes.each(function(v)
				{
					if ( this.carInfos.options_reference.ref[v] != undefined )
					{
						if ( $('options_select').getElement('input[value='+v+']') != undefined )
						{
							$('options_select').getElement('input[value='+v+']').checked = false;
							$('options_select').getElement('input[value='+v+']').setProperty('disabled','disabled');
							//text en gris
							$('options_select').getElement('input[value='+v+']').getParent().getParent().setStyle('color','#aaa');
						}
					}
				}.bind(this));
			}
			//code pour enregistrer l'option
			if ( !this.carInfos.choix_options.contains(el.value) )
			{
				this.carInfos.choix_options.push(el.value);
			}
		}
		else//option deselectionne
		{
			if ( this.carInfos.options_reference.ref[el.value].include != undefined )
			{
				$each(this.carInfos.options_reference.ref[el.value].include, function(v, k)
				{
					if ( this.carInfos.options_reference.ref[v] != undefined )
					{
						if ( $('options_select').getElement('input[value='+v+']') != undefined )
						{
							$('options_select').getElement('input[value='+v+']').checked = false;
							$('options_select').getElement('input[value='+v+']').setProperty('disabled','');
							//text en noir
							$('options_select').getElement('input[value='+v+']').getParent().getParent().setStyle('color','#000');
						}
					}
				}.bind(this));
			}
			
			if ( this.carInfos.options_reference.ref[el.value].exclude != undefined )
			{
				var excludes = this.carInfos.options_reference.ref[el.value].exclude.split(',');
				excludes.each(function(v)
				{
					if ( this.carInfos.options_reference.ref[v] != undefined )
					{
						if ( $('options_select').getElement('input[value='+v+']') != undefined )
						{
							$('options_select').getElement('input[value='+v+']').setProperty('disabled','');
							$('options_select').getElement('input[value='+v+']').getParent().getParent().setStyle('color','#000');
						}
					}
				}.bind(this));
			}
			//code pour retirer l'option
			this.carInfos.choix_options.erase(el.value);
		}
		
		//on reinitialise les prix des options
		this.carInfos.prix_total -= this.carInfos.options_prix;
		this.carInfos.options_prix = 0;
		//code de mise a jour du prix
		$each(this.carInfos.choix_options, function(v, k)
		{
			this.carInfos.options_prix += this.carInfos.options_reference.ref[v].prix;
		}.bind(this));
		this.carInfos.prix_total += this.carInfos.options_prix;
		this.update_price();
	},
	
	/****************************************************Fonctions relatives aux etapes 5 *****************************************/
	
	
	/****************************************************Fonctions relatives aux accessoires*****************************************/
	//faire apparaitre le bouton ajouter le tooltips accesoire
	show_add_accessoire: function(el)
	{
		//positionenment du tooltips 
		$clear(this.timer);
		$('tooltip').setStyle('top',$(el).getPosition($('details_content')).y+45);
		$('tooltip').setStyle('left',$(el).getPosition($('details_content')).x+200);
		//timer des effets d'affichage
		this.timer = function()
		{
			el.getNext().getLast().getPrevious().setStyle('display','none');
			el.getNext().getLast().setStyle('display','block');
			$('tooltip').setStyle('display','block');
			$('tooltip').setStyle('opacity',1);
			$$('div.AccessoryItem').setStyle('opacity','0.3');
			el.getParent().setStyle('opacity','1');
		}.delay(this.delay);
	},
	
	//faire apparaitre le bouton ajouter le tooltips accesoire
	show_add_accessoire2: function(el)
	{
		//positionenment du tooltips 
		$clear(this.timer);
		$('tooltip').setStyle('top',$(el.getParent().getPrevious()).getPosition($('details_content')).y+45);
		$('tooltip').setStyle('left',$(el.getParent().getPrevious()).getPosition($('details_content')).x+200);
		//timer des effets d'affichage
		this.timer = function()
		{
			el.setStyle('display','none');
			el.getNext().setStyle('display','block');
			$('tooltip').setStyle('display','block');
			$('tooltip').setStyle('opacity',1);
			$$('div.AccessoryItem').setStyle('opacity','0.3');
			el.getParent().getParent().setStyle('opacity','1');
		}.delay(this.delay);
	},
	
	//faire disparaitre le bouton ajouter le tooltips accesoire
	hide_add_accessoire: function(el)
	{
		$clear(this.timer);
		$('tooltip').setStyle('display','none');
		$$('.btn_container').setStyle('display','none');
		$$('.AccessoryItemPrice').setStyle('display','block');
		$$('div.AccessoryItem').setStyle('opacity','1');
	},
	
	//ajouter un accessoire
	add_accessoire: function(el)
	{
		//on regarde si l'item a deja ete ajoute
		var first = true;
		var current;
		$$('td.NameColumn').each(function(name)
			{
				if (name.get('html') == el.getPrevious().getPrevious().get('html'))
				{
					first = false;
					current = name;
				}
			});
			
		//si l'item n'a pas encore ete ajoute on lajoute
		if ( first )
		{
			var tr = new Element ('tr');
				tr.set('class','CartItem');
					var td = new Element ('td');
					td.set('class','NameColumn');
					td.set('html',el.getPrevious().getPrevious().get('html'));
				tr.appendChild(td);
					var td = new Element ('td');
					td.set('class','QuantityColumn');
					td.set('html',1);
				tr.appendChild(td);
					var td = new Element ('td');
					td.set('class','PriceColumn');
						var span = new Element ('span');
						span.set('class','PriceLabel');
						//le prix est recuperer a partir d'un tableau de reference
						span.set('html', this.carInfos.before_price + this.number_format(this.carInfos.accessoires_reference.nom[el.getPrevious().getPrevious().get('html')] , 0 , "," , this.carInfos.priceThousands) +  this.carInfos.after_price);
					td.appendChild(span);
						var img = new Element('img');
						img.set('class','RemoveIcon');
						img.src = '/defaultSites/peugeot/images/new_cfg/Pictos/remove.png';
						img.width = 16;
						img.height = 15;
						//on ajoute levenement sur la croix pour supprimer
						img.addEvent('click', this.delete_accessoire.pass([img], this));
					td.appendChild(img);
					if (Browser.Engine.trident && Browser.Engine.version == 4)
					{
						if (typeof pngfix=='function')
							pngfix();
					}
				tr.appendChild(td);
			$('accessoire_item').appendChild(tr);
		}
		//sino on monte just la quantite
		else
		{
			//on met a jour les prix des accessoires
			current.getNext().set('html', parseInt(current.getNext().get('html'))+1);
			var sous_total = this.number_format(parseInt(current.getNext().get('html')) * this.carInfos.accessoires_reference.nom[current.get('html')], 0 , "," , this.carInfos.priceThousands);
			current.getNext().getNext().getFirst().set('html', sous_total +  this.carInfos.after_price);
		}
		//on met a jour les informations
		this.maj_accessoires_panier();
		//on met a jour le prix
		this.maj_accessoires_price();
	},
	
	//supprimer un accesoire
	delete_accessoire: function(item)
	{
		//on enleve l'item correspondant si il y a seulement un item
		if ( parseInt(item.getParent().getPrevious().get('html')) <= 1 )
		{
			item.getParent().getParent().getParent().removeChild(item.getParent().getParent());
		}
		//sinon on retire la quantite de 1
		else
		{
			//on met a jour les prix des accessoires
			item.getParent().getPrevious().set('html', parseInt(item.getParent().getPrevious().get('html')) - 1);
			var sous_total = this.number_format(parseInt(item.getParent().getPrevious().get('html')) * this.carInfos.accessoires_reference.nom[item.getParent().getPrevious().getPrevious().get('html')], 0 , "," , this.carInfos.priceThousands);
			item.getPrevious().set('html', sous_total +  this.carInfos.after_price);
		}
		//on met a jour les informations
		this.maj_accessoires_panier();
		//on met a jour le prix
		this.maj_accessoires_price();
	},
	
	//montrer le panier avec les accessoire deja choisis
	load_accessoires_panier: function()
	{
		var i = 0;
		while ( this.carInfos.choix_accessoires.nom[i] != undefined )
		{
			//on rempli les accesoires un par un
			var tr = new Element ('tr');
				tr.set('class','CartItem');
					var td = new Element ('td');
					td.set('class','NameColumn');
					td.set('html',this.carInfos.choix_accessoires.nom[i]);
				tr.appendChild(td);
					var td = new Element ('td');
					td.set('class','QuantityColumn');
					td.set('html',this.carInfos.choix_accessoires.quantite[i]);
				tr.appendChild(td);
					var td = new Element ('td');
					td.set('class','PriceColumn');
						var span = new Element ('span');
						span.set('class','PriceLabel');
						span.set('html',this.carInfos.before_price + this.number_format(this.carInfos.accessoires_reference.nom[this.carInfos.choix_accessoires.nom[i]] * this.carInfos.choix_accessoires.quantite[i] , 0 , "," , this.carInfos.priceThousands)+  this.carInfos.after_price);
					td.appendChild(span);
						var img = new Element('img');
						img.set('class','RemoveIcon');
						img.src = '/defaultSites/peugeot/images/new_cfg/Pictos/remove.png';
						img.width = 16;
						img.height = 15;
						//on ajoute levenement sur la croix pour supprimer
						img.addEvent('click', this.delete_accessoire.pass([img], this));
					td.appendChild(img);
					if (Browser.Engine.trident && Browser.Engine.version == 4)
					{
						if (typeof pngfix=='function')
							pngfix();
					}
				tr.appendChild(td);
			$('accessoire_item').appendChild(tr);
			//incrementation de laccessoire
			i++;
		}
		if (Browser.Engine.trident && Browser.Engine.version == 4)
		{
			if (typeof pngfix=='function')
				pngfix();
		}
		//on met a jour le prix
		this.maj_accessoires_price();
	},
	
	maj_accessoires_panier:function()
	{
		//on reinitialise le tableau des accesoires
		this.carInfos.choix_accessoires.nom = [];
		this.carInfos.choix_accessoires.nom[0] = null;
		this.carInfos.choix_accessoires.quantite = [];
		this.carInfos.choix_accessoires.quantite[0] = null;
		this.carInfos.choix_accessoires.prix = [];
		this.carInfos.choix_accessoires.prix[0] = null;
		//on rempli le tableau avec les nouvelles donnees
		var i = 0;
		$$('.CartItem').each(function(el)
			{
				this.carInfos.choix_accessoires.nom[i] = el.getFirst().get('html');
				this.carInfos.choix_accessoires.quantite[i] = parseInt(el.getFirst().getNext().get('html'));
				//recuperer du prix a partir d'un tableau de reference
				//this.carInfos.choix_accessoires.prix[i] = parseFloat(this.carInfos.accessoires_reference.nom[el.getFirst().get('html')]);
				i++;
			}.bind(this));
	},
	
	maj_accessoires_price: function()
	{
		var i = 0;
		this.carInfos.accessoires_prix = 0.0;
		while ( this.carInfos.choix_accessoires.nom[i] != undefined )
		{
			//pour chaque accesoire on multiplie le quantite et le prix et on lajout au total
			this.carInfos.accessoires_prix = this.carInfos.accessoires_prix + this.carInfos.choix_accessoires.quantite[i] * this.carInfos.accessoires_reference.nom[this.carInfos.choix_accessoires.nom[i]];
			//incrementation de laccessoire
			i++;
		}
		$('accessoires_total_price').set('html', this.carInfos.before_price + this.number_format(this.carInfos.accessoires_prix , 0 , "," , this.carInfos.priceThousands) + this.carInfos.after_price);
	},
	
	/*************************************************** Fonctions utiles *****************************************/
	//fonction pour formater le prix
	number_format: function(number, decimals, dec_point, thousands_sep)
	{
		var n = number, prec = decimals;
		
		var toFixedFix = function (n,prec) 
		{
			var k = Math.pow(10,prec);
			return (Math.round(n*k)/k).toString();
		};
		
		n = !isFinite(+n) ? 0 : +n;
		prec = !isFinite(+prec) ? 0 : Math.abs(prec);
		var sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep;
		var dec = (typeof dec_point === 'undefined') ? '.' : dec_point;
		
		var s = (prec > 0) ? toFixedFix(n, prec) : toFixedFix(Math.round(n), prec); //fix for IE parseFloat(0.55).toFixed(0) = 0;
		
		var abs = toFixedFix(Math.abs(n), prec);
		var _, i;
		
		if (abs >= 1000) 
		{
			_ = abs.split(/\D/);
			i = _[0].length % 3 || 3;
		
			_[0] = s.slice(0,i + (n < 0)) +
				  _[0].slice(i).replace(/(\d{3})/g, sep+'$1');
			s = _.join(dec);
		} 
		else 
		{
			s = s.replace('.', dec);
		}
		
		var decPos = s.indexOf(dec);
		if (prec >= 1 && decPos !== -1 && (s.length-decPos-1) < prec) 
		{
			s += new Array(prec-(s.length-decPos-1)).join(0)+'0';
		}
		else if (prec >= 1 && decPos === -1) 
		{
			s += dec+new Array(prec).join(0)+'0';
		}
		
		return s;
	},
	
	 /********************************************************* Save infos*******************************************************/
	//sauvegarder la config
	save_cfg: function()
	{
		if ( this.current_etape == 1 )
		{
			if ( $('form_finition') != undefined )
			{
				this.save_config_overlay();
				//rempli par defaut par delia changer ensuite par l'utilisateur
				$('finition_choice').setProperty('value', this.carInfos.choix_finition);
				$('form_finition').submit(); 
				return false;
			}
		}
		else if ( this.current_etape == 2 )
		{
			if ( $('form_motor') != undefined )
			{
				this.save_config_overlay();
				//rempli par defaut par delia changer ensuite par l'utilisateur
				$('motor_choice').setProperty('value', this.carInfos.choix_moteur);
				$('form_motor').submit(); 
				return false;
			}
		}
		else if ( this.current_etape == 3 )
		{
			if ( $('form_color') != undefined )
			{
				this.save_config_overlay();
				//par defaut il ny a rien de selectionne juste le style selected sur le 1er color et le 1er trim qu'on va recupere si l'utilisateur na pas change
				if ( this.carInfos.choix_couleur == undefined || this.carInfos.choix_couleur == '' || this.carInfos.choix_trim == undefined || this.carInfos.choix_trim )
				{
					var s = $('exteriorColors').getElement('.Selected').getProperty('id').split('_');
					this.carInfos.choix_couleur = this.trim(s[1]);
					var s2 = $('interiorColors').getElement('.Selected').getProperty('id').split('_');
					this.carInfos.choix_trim = this.trim(s2[1]);
				}
				$('color_choice').setProperty('value', this.carInfos.choix_couleur);
				$('trim_choice').setProperty('value', this.carInfos.choix_trim);
				$('form_color').submit(); 
				return false;
			}
		}
		else if ( this.current_etape == 4 )
		{
			if ( $('form_option') != undefined )
			{
				this.save_config_overlay();
				$('form_option').submit(); 
				return false;
			}
		}
	},
	
	end_loading: function()
	{
		new Fx.Tween("Message",
		{
			property: 'opacity',
			duration: 'long'
		}).start(0.8,0);
		new Fx.Tween("Overlay",
		{
			property: 'opacity',
			duration: 'long'
		}).start(0.7,0);
	},
	
	save_config_overlay: function()
	{
		new Fx.Tween("Message",
		{
			property: 'opacity',
			duration: 'short'
		}).start(0.0,0.8);
		new Fx.Tween("Overlay",
		{
			property: 'opacity',
			duration: 'normal'
		}).start(0.0,0.7);
	},
	
	trim:function(str, charlist)
	{
		var whitespace, l = 0, i = 0;
		str += '';
		
		if (!charlist) {
			whitespace = " \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000";
		} else {
			charlist += '';
			whitespace = charlist.replace(/([\[\]\(\)\.\?\/\*\{\}\+\$\^\:])/g, '\$1');
		}
		
		l = str.length;
		for (i = 0; i < l; i++) {
			if (whitespace.indexOf(str.charAt(i)) === -1) {
				str = str.substring(i);
				break;
			}
		}
		l = str.length;
		for (i = l - 1; i >= 0; i--) {
			if (whitespace.indexOf(str.charAt(i)) === -1) {
				str = str.substring(0, i + 1);
				break;
			}
		}
		return whitespace.indexOf(str.charAt(0)) === -1 ? str : '';
	},
	
	end_fonction: function()
	{
		
	}
	
	
	
});//fin class