/**
 * @todo bug (notice) sous IE
 */
 
var ConfiguratorList = new Class({
	silhouette: {},
	budgets: {},
	families: {},
	cars: {},
	categories: {},

	list: {
		category: {},
		silhouette: {},
		energie: {},
		boite: {}
	},

	echelle:
	{
		width:	562,
		cells:	6,
		steps: 	{
			// Budget
			p: [
				{value: 5000000, lang: '$5.000.000 '+LANGS.configurator.afterprice},
				{value: 10000000, lang: '$10.000.000 '+LANGS.configurator.afterprice},
				{value: 15000000, lang: '$15.000.000 '+LANGS.configurator.afterprice},
				{value: 20000000, lang: '$20.000.000 '+LANGS.configurator.afterprice},
				{value: 25000000, lang: '$25.000.000 '+LANGS.configurator.afterprice},
				{value: 30000000, lang: '$30.000.000 '+LANGS.configurator.afterprice},
				{value: 35000000, lang: '$35.000.000 '+LANGS.configurator.afterprice}
			],
			// Consomation
			c:	[
				{value: 400, lang: '4.00'},
				{value: 500, lang: '5.00'},
				{value: 600, lang: '6.00'},
				{value: 700, lang: '7.00'},
				{value: 800, lang: '8.00'},
				{value: 900, lang: '9.00'},
				{value: 1050, lang: '10.50'}
			],
			// Emission CO2
			e: [
				{value: 10000, lang: '100 g/Km'},
				{value: 12000, lang: '120 g/Km'},
				{value: 14000, lang: '140 g/Km'},
				{value: 16000, lang: '160 g/Km'},
				{value: 18000, lang: '180 g/Km'},
				{value: 21000, lang: '210 g/Km'},
				{value: 25000, lang: '250 g/Km'}
			]
		}
	},

	// Current echelle
	e:	'p',

	storeChoices:
	{
		silhouette:		'',
		boite:			'',
		energie:		'',
		category:		''
	},

	cacheCategory: {},

	fx: null,

	xml: '',

	/**
	 * Constructor, get general informations from a XML file and organize data to associative arrays
	 */
	initialize: function(opt)
	{
		SELF = this;
		this.categories = opt.categories;
		this.echelle.steps = opt.echelle.steps;
		
		var carZoom = new Element('div');
		carZoom.setAttribute('id', 'carZoom');
		carZoom.setOpacity(0);
			var img = new Element('img');
			img.setAttribute('id', 'carZoomImg');
			img.addEvent('load', this.imageZoomLoad);
		carZoom.appendChild(img);
		$('right').appendChild(carZoom);

		query = new Ajax('/defaultSites/peugeot/php/criteres.php', {
			method:		'get',
			onSuccess:	this.loadXml,
			onFailure:	function()
			{
				$('loadingText').setHTML('Le configurateur a rencontre une erreur lors de son chargement, nous vous prions de nous excuser pour ce probleme passager.')
			}
		});
		query.request();
	},

	/**
	 * Called when XML file is loaded
	 */
	 loadXml: function(data, xml)
	 {
	 	SELF.xml = xml;

	 	// Load categories
	 	SELF.cacheCategory = {};
	 	$each(SELF.categories, function(v, k)
	 	{
	 		SELF.list.category[k] = {lang: k, state: false};
	 		for (var i = 0; i < v.length; i++)
	 		{
	 			if ($type(SELF.cacheCategory[v[i].famille]) == false)
	 			{
	 				SELF.cacheCategory[v[i].famille] = {};
	 			}
	 			SELF.cacheCategory[v[i].famille][v[i].silhouette] = k;
	 		}
	 	});

	 	// Load budgets
	 	var b = SELF.xml.getElementsByTagName('budget');
	 	for (var i = 0; i < b.length; i++)
	 	{
	 		var code = b.item(i).getAttribute('code');
	 		var value = b.item(i).firstChild.nodeValue.toInt();

	 		SELF.budgets[code] = value;
	 	}

	 	// Load families
		var b = SELF.xml.getElementsByTagName('famille');
	 	for (var i = 0; i < b.length; i++)
	 	{
	 		var code = b.item(i).getAttribute('code');
	 		var value = b.item(i).firstChild.nodeValue;

	 		SELF.families[code] = value;
	 	}

	 	// Load silhouette
	 	var s = SELF.xml.getElementsByTagName('silhouette');
	 	var store = {};
	 	for (var i = 0; i < s.length; i++)
	 	{
	 		var code = s.item(i).getAttribute('code');
	 		var value = s.item(i).firstChild.nodeValue;

	 		if ($type(store[code]) == false)
	 		{
	 			store[code] = value;
	 		}
	 		SELF.silhouette[code] = store[value];
	 		SELF.list.silhouette[code] = {lang: value, state: false};
	 	}

	 	// Load energie
	 	var e = SELF.xml.getElementsByTagName('energie');
	 	for (var i = 0; i < e.length; i++)
	 	{
	 		SELF.list.energie[e.item(i).getAttribute('code')] = {lang: e.item(i).firstChild.nodeValue, state: false};
	 	}

	 	// Load boite
	 	var b = SELF.xml.getElementsByTagName('boite');
	 	for (var i = 0; i < b.length; i++)
	 	{
	 		SELF.list.boite[b.item(i).getAttribute('code')] = {lang: b.item(i).firstChild.nodeValue, state: false};
	 	}

	 	SELF.click_item('', '__select_all__');
	 	SELF.createEchelle.delay(1);

	 	// Page loaded ...
	 	$('loadingText').setStyle('display', 'none');
	 	$('loading').setStyle('display', 'block');
		/* PNG FIX */
		if(typeof(pngfix)=='function') {
			pngfix();
		}
		
		//scrooll remover
		/* var tmp = 0;
		$('cars').getChildren().each(function(){
			tmp++;
		});
		tmp = tmp * 38;
		$('right').setStyle('height',tmp);
		$('echelle_background').setStyle('height',tmp);
		$('cars').setStyle('height',tmp); */
	 },

	/**
	 * Called when click on a choice
	 * type : categorie name (silhouette, energie, etc.)
	 * code : item uniq code identifier
	 */
	click_item: function(type, code)
	{
	
		var tmpArray = '';
		if (typeof(code)=='object')
		{
			var countArray = 0;
			$each(code, function(k, v)
			{
				if (countArray == 0)
					code = k;
				tmpArray[v] = k;
				countArray++;
			});
		}
		
			
			// Set all menu links as bad
			$$('.item').addClass('carUnlinked');
			$$('.item').removeClass('choiceSelected');
	
			$each(SELF.list.silhouette, function(v, k){SELF.list.silhouette[k].value = false});
			$each(SELF.list.boite, function(v, k){SELF.list.boite[k].value = false});
			$each(SELF.list.energie, function(v, k){SELF.list.energie[k].value = false});
			$each(SELF.list.category, function(v, k){SELF.list.category[k].value = false});
	
			if (type)
			{
				if (this.storeChoices[type] == code)
				{
					this.storeChoices[type] = '';
				}
				else
				{
					this.storeChoices[type] = code;
				}
			}
	
			if (this.storeChoices['silhouette'])
			{
				$('silhouette_' + this.storeChoices['silhouette']).addClass('choiceSelected');
			}
			if (this.storeChoices['energie'])
			{
				$('energie_' + this.storeChoices['energie']).addClass('choiceSelected');
			}
	
			if (this.storeChoices['boite'])
			{
				$('boite_' + this.storeChoices['boite']).addClass('choiceSelected');
			}
	
			if (this.storeChoices['category'])
			{
				$('category_' + this.storeChoices['category']).addClass('choiceSelected');
			}
	
			// Get selected cars
			var versions = this.xml.getElementsByTagName('version');
			var cars = {};
			for (var i = 0; i < versions.length; i++)
			{
				var selected = true;
				if (code != '__select_all__')
				{
					$each(this.storeChoices, function(v, k)
					{
						if (selected == false)
						{
							return ;
						}
	
						if (k == 'category' && v != '')
						{
							var cf = versions.item(i).getAttribute('famille');
							var cs = versions.item(i).getAttribute('silhouette');
							if ($type(SELF.cacheCategory[cf]) == false
								|| $type(SELF.cacheCategory[cf][cs]) == false
								|| SELF.cacheCategory[cf][cs] != v)
							{
								selected = false;
							}
						}
						else if (v != '' && versions.item(i).getAttribute(k) != v)
						{
							if (k == 'silhouette') {
								if (tmpArray != '') {
									for(var iA= 0; iA < tmpArray.length; iA++)
									{
										if (tmpArray[iA] == v)
											selected = true;
										else
											selected = false;
									}
								}
								else {
									selected = false;
								}
							}
							else {
								selected = false;
							}
						}
					});
				}
	
				var silhouetteCode = versions.item(i).getAttribute('silhouette');
				var energieCode = versions.item(i).getAttribute('energie');
				var boiteCode = versions.item(i).getAttribute('boite');
	
				if (selected)
				{
					var family = versions.item(i).getAttribute('famille');
					var hash = family + '_' + silhouetteCode;
	
					// Create car if not exists
					if ($type(cars[hash]) == false)
					{
						cars[hash] = {
							family:			family,
							name:			this.families[family],
							silhouette:		silhouetteCode,
							silhouetteName:	this.list.silhouette[silhouetteCode].lang,
							budget:			[],
							consomation:	[],
							emission:		[]
						};
					}
	
					SELF.list.silhouette[silhouetteCode].value = true;
					SELF.list.energie[energieCode].value = true;
					SELF.list.boite[boiteCode].value = true;
	
					if ($type(SELF.cacheCategory[family]) != false && $type(SELF.cacheCategory[family][silhouetteCode]) != false)
					{
						var categoryCode = SELF.cacheCategory[family][silhouetteCode];
						SELF.list.category[categoryCode].value = true;
						$('category_' + categoryCode).removeClass('carUnlinked');
					}
	
					// Set selected menu links as corrects
					if ($('silhouette_' + silhouetteCode) != null) 
						$('silhouette_' + silhouetteCode).removeClass('carUnlinked');
					$('energie_' + energieCode).removeClass('carUnlinked');
					$('boite_' + boiteCode).removeClass('carUnlinked');
	
					// Add budget in current car data
					cars[hash]['budget'].push(this.budgets[versions.item(i).getAttribute('budget')]);
					cars[hash]['consomation'].push(versions.item(i).getAttribute('consomation'));
					cars[hash]['emission'].push(versions.item(i).getAttribute('emission'));
				}
			}
	
			this.countChoices('silhouette', SELF.list.silhouette);
			this.countChoices('energie', SELF.list.energie);
			this.countChoices('boite', SELF.list.boite);
			this.countChoices('category', SELF.list.category);
	
			this.cars = cars;
			this.showCars(cars);
			/* PNG FIX */
			if(typeof(pngfix)=='function') {
				pngfix();
			}
	},
	
	/**
	 * Reset choices
	*/
	clearChoices: function()
	{
		$$('.item').removeClass	('carUnlinked');
		$$('.item').removeClass('choiceSelected');
		this.storeChoices = {};
		SELF.click_item('', '__select_all__');
		/* PNG FIX */
		if(typeof(pngfix)=='function') {
			pngfix();
		}
	},

	/**
	 * Count choices
	 */
	countChoices: function(type, list)
	{
		var total = 0;
		var lang = '';
		$each(list, function(v, k)
		{
			if (v.value)
			{
				total++;
				lang = v.lang;
			}
		});

		if (total == 1)
		{
			if (isNaN(lang))
				$('menuHeader_' + type).getElement('span').setHTML(lang);
			else
				$('menuHeader_' + type).getElement('span').setHTML(total + ' ' + LANGS.configurator.choices_possible);
		}
		else
		{
			$('menuHeader_' + type).getElement('span').setHTML(total + ' ' + LANGS.configurator.choices_possible);
		}
	},

	/**
	 * Print list of cars selected
	 */
	 showCars: function(cars)
	 {
	 	$('cars').setHTML('');
	 	$each(cars, function(v, k)
	 	{
	 		var div = new Element('div', {'class': 'carContainer'});
			div.addEvent('click', this.carClick.bind({'model': v.family, 'body': v.silhouette, 'el': div}));

			var result = SELF.getEchelle(k, v);

			if (result.width < 2)
				result.width = 10;

	 		// Price div with variable width
	 		var divPrice = new Element('div', {
				'class':'carPrice',
				'id':'car_'+k,
				'styles': {
					'width': result.width+'px',
					'left': result.left+'px'
				}
			});
	 		// divPrice.addClass('carPrice');
	 		// divPrice.setAttribute('id', 'car_' + k)
	 		// divPrice.setStyles({
	 			// 'width':			result.width + 'px',
	 			// 'left':				result.left + 'px'
	 		// });

			var divArrow = new Element('div', {
				'class':'carArrow'
			});

		 	// Image car div
	 		var divCar = new Element('div', {
				'class':'carImages'
			});
	 		// divCar.addClass('carImages');

	 		var carImage = new Element('img', {
				'src': '/media/configurator/images/carSelector/cs_' + v.family + '_' + v.silhouette + '.png',
				'width': '75',
				'height': '38',
				'events' : {
		 			'mouseover': SELF.carOver.bind(
		 			{
		 				'family': 		v.family,
		 				'silhouette': 	v.silhouette
		 			}),
		 			'mouseout':	SELF.carOut,
		 			'mousemove': SELF.carMove
				}
			});
			
			var carLabel = new Element('img', {
				'src': '/media/configurator/images/carSelector/label/lb_' + v.family + '_' + v.silhouette + '_small.png',
				'width': '100',
				'height': '22',
				'events' : {
		 			'mouseover': SELF.carOver.bind(
		 			{
		 				'family': 		v.family,
		 				'silhouette': 	v.silhouette
		 			}),
		 			'mouseout':	SELF.carOut
				}
			});

	 		
	 		// carImage.src = '/argosSites/peugeot/images/gamme/th_' + v.family + '_' + v.silhouette + '_small.png';
	 		// carImage.addEvent('error', function()
	 		// {
				// this.src = '/argosSites/peugeot/images/car.png';
	 		// });

	 		// carImage.addEvents({
	 			// 'mouseover':	SELF.carOver.bind({'img': '/argosSites/peugeot/images/gamme/th_' + v.family + '_' + v.silhouette + '_big.png'}),
	 			// 'mouseout':		SELF.carOut
	 		// });
			// console.log(($('cars').getStyle('width').toInt()-result.left)+'<'+divCar.getStyle('width').toInt());
			/*if(typeof pngFilter != "undefined")
				{
					pngFilter(carImage);
					pngFilter(carLabel);
				}*/
			
	 		divCar.appendChild(carImage);
	 		divCar.appendChild(carLabel);
	 		
	 		
			if((562-result.left)<165)
			{
				
				divCar.setStyle('left', '-'+(165*0.55)+'px');
			}

	 		//divCar.appendText(' Peugeot ' + v.name + ' (' + v.silhouetteName + ')');
	 		divArrow.appendChild(divCar);
	 		divPrice.appendChild(divArrow);
	 		div.appendChild(divPrice);

	 		$('cars').appendChild(div);
	 	}.bind(this));
	 },
	 
	 /**
	  * Called when click on a car
	  */
	 carClick: function(event)
	 {
	 	event = new Event(event);
	 	
		if (this.el.hasClass('selected'))
		{
			var haz = true;
		}
		$$('.carContainer').removeClass('selected');
		if(!haz)
		{
			this.el.addClass('selected');
			
			// Find car info
			var row = null;
			$each(SELF.categories, function(v, k)
			{
				if (row != null)
				{
					return ;
				}
	
				for (var i = 0; i < v.length; i++)
				{
					if (v[i].famille == this.model && v[i].silhouette == this.body)
					{
						row = v[i];
						break;
					}
				}
			}.bind(this));

			// Set right info
			$('rightInfoCarName').src = row.img.bigName;
			$('rightInfoCarImg').src = row.img.bigImg;
			
				$('rightInfoCarImg').setStyles(
				{
					width: '200px',
					height: '120px'
				});
				
				
				$('rightInfoCarName').setStyles(
				{
					width: '180px',
					height: '40px'
				});
		if(typeof(pngfix)=='function') {
				pngFilter($('rightInfoCarName'));
				pngFilter($('rightInfoCarImg'));
		}
			$('discoverLink').href = row.url.discover;
			
			if (row.url_alternate_trad.discover) {
				$('discoverLink').setHTML(row.url_alternate_trad.discover);
			}
			else
				$('discoverLink').setHTML(LANGS.configurator.models.discover_car);
			
			if (row.url.configure) {
				$('configureLink').setStyle('display', 'block');
				$('configureLink').href = row.url.configure;
				if (row.url_alternate_trad.configure) {
					$('configureLink').setHTML(row.url_alternate_trad.configure);
				}
				else
					$('configureLink').setHTML(LANGS.configurator.models.configure_car);
			}
			else {
				if ($('configureLink'))
					$('configureLink').setStyle('display', 'none');
			}
			
			if (row.url.testdrive) {
				$('testdriveLink').setStyle('display', 'block');
				$('testdriveLink').href = row.url.testdrive;
				if (row.url_alternate_trad.testdrive) {
					$('testdriveLink').setHTML(row.url_alternate_trad.testdrive);
				}
				else
					$('testdriveLink').setHTML(LANGS.configurator.models.book_a_try);
			}
			else {
				if ($('testdriveLink'))
					$('testdriveLink').setStyle('display', 'none');
			}
			/* if ( showPrice )
			{
				$('carPrice').setHTML(row.priceFull);
			}
			else
			{
				$('carPrice').setHTML(replacePriceLabel);
			} */
			$('carPrice').setHTML(row.priceFull);
			$('xright').addClass('box_on');
			
		}
		else
		{
			$('xright').removeClass('box_on');
		}
	 },

	 /**
	  * Called when mouse over on a car image
	  */
	 carOver: function(event)
	 {
	 	var f = this.family;
	 	var s = this.silhouette;
		
		$('carZoomImg').src = '/media/configurator/images/gamme/thumbnail/th_' + f + '_' + s + '_big.png';
	 },
	 
	 carMove: function(event)
	 {
	 	event = new Event(event);

	 	$('carZoom').setStyles({
	 		'left':		(event.client.x + 40) + 'px',
	 		'top':		(event.client.y - 60) + 'px'
	 	});
	 },

	 /**
	  * Called when mouse out from car image
	  */
	 carOut: function()
	 {
	 	if (SELF.fx) SELF.fx.stop();

	 	$('carZoom').setOpacity(0);
	 	SELF.fx = new Fx.Styles('carZoom', {
 			duration:	300,
 			wait:		false
 		});

 		SELF.fx.start({
 			'opacity':	0
 		});
	 },

	 /**
	  * Called when image zoomed is loaded
	  */
	 imageZoomLoad: function()
	 {
	 	if (SELF.fx) SELF.fx.stop();

 		SELF.fx = new Fx.Styles('carZoom', {
 			duration:	500,
 			wait:		false
 		});

 		SELF.fx.start({
 			'opacity':	1
 		});
	 },

	 /**
	  * Change echelle mode
	  */
	 changeEchelle: function(mode)
	 {
	 	if (mode != 'p' && mode != 'c' && mode != 'e')
	 	{
	 		mode = 'p';
	 	}

	 	$('right').setHTML = '';
	 	this.e = mode;

	 	// Change tab style
	 	$$('#model_view li a').removeClass('view_selected');
	 	$('echelle_' + mode).addClass('view_selected');

	 	// Move cars
	 	$each(this.cars, function(v, k)
	 	{
			var result = SELF.getEchelle(k, v);

	 		var effect = new Fx.Styles('car_' + k, {
	 			duration:	500,
	 			fps:		80,
	 			wait:		false
	 		});
			
	 		effect.start({
	 			'width':			result.width + 'px',
	 			'left':				result.left + 'px'
	 		});

			var leftCorrection = $('car_'+k).getFirst().getFirst();
			var effectCorrection = new Fx.Styles(leftCorrection, {
				duration:500,
				fps:80,
				wait:false
			});

			if($('car_'+k).getFirst().getStyle('width').toInt()+10 != result.width)
			{
				if(($('cars').getStyle('width').toInt()-result.left)<$('car_'+k).getFirst().getFirst().getStyle('width').toInt())
				
				if((562-result.left)<165)
				{
					
					effectCorrection.start({'left':-+(165*0.85)});
				}
				
				else
				{
					effectCorrection.start({'left':20});
				}
			}
	 	});

	 	for (var i = 0; i < this.echelle.steps[SELF.e].length; i++)
	 	{
	 		$('echelleStep_' + i).setHTML(this.echelle.steps[SELF.e][i].lang);
	 	}
	 },

	 /**
	  * Calcul car width and left position
	  */
	 getEchelle: function(k, v)
	 {
 		if (SELF.e == 'c')
 		{
 			var ref = v.consomation;
 		}
 		else if (SELF.e == 'e')
 		{
 			ref = v.emission;
 		}
 		else
 		{
 			var ref = v.budget;
 		}

 		// Get price div width
 		var minEchelle = 999999999;
 		var maxEchelle = 0;
 		for (var i = 0; i < ref.length; i++)
 		{
 			minEchelle = Math.min(minEchelle, ref[i]);
 			maxEchelle = Math.max(maxEchelle, ref[i]);
 		}

 		var stepLength = Math.round(SELF.echelle.width / (SELF.echelle.steps[SELF.e].length - 1));
 		var left = 0;
 		var width = 0;
 		for (var i = 0; i < SELF.echelle.steps[SELF.e].length - 1; i++)
 		{
 			if (minEchelle >= SELF.echelle.steps[SELF.e][i].value
 				&& (i == SELF.echelle.steps[SELF.e].length - 2 || minEchelle < SELF.echelle.steps[SELF.e][i + 1].value))
 			{
 				var localPosition = Math.round(
 					(minEchelle - SELF.echelle.steps[SELF.e][i].value)
 					* stepLength
 					/ (SELF.echelle.steps[SELF.e][i + 1].value - SELF.echelle.steps[SELF.e][i].value)
 				);
 				left = (i * stepLength) + localPosition;
 			}

 			if (maxEchelle >= SELF.echelle.steps[SELF.e][i].value
 				&& (i == SELF.echelle.steps[SELF.e].length - 1 || maxEchelle < SELF.echelle.steps[SELF.e][i + 1].value))
 			{
 				var localPosition = Math.round(
 					(maxEchelle - SELF.echelle.steps[SELF.e][i].value)
 					* stepLength
 					/ (SELF.echelle.steps[SELF.e][i + 1].value - SELF.echelle.steps[SELF.e][i].value)
 				);
 				width = ((i * stepLength) + localPosition) - left;
 			}
 		}

 		if (width == 0)
 		{
 			width = 1;
 		}

 		return ({'width': width, 'left': left});
	 },

	 /**
	  * Create echelle
	  */
	 createEchelle: function()
	 {
		var total = (SELF.echelle.steps[SELF.e].length - 1) * SELF.echelle.cells + 1;
		var cellWidth = Math.floor(SELF.echelle.width / total);
		var importantI = 0;

		/** Create Echelle Background */
		var div_EchelleBackground = $('echelle_background');
		div_EchelleBackground.setStyles({
				'width':SELF.echelle.width+'px',
				'height':$('right').getStyle('height').toInt()+'px'
		});
		var j=0;
		for(var i=0;i<total;i++)
		{
			if((i % SELF.echelle.cells) == 0)
			{
				widthEchelleBgColumn = (SELF.echelle.cells*cellWidth)-1;
				if(j++%2==0)
				{
					classEchelleBgColumn = 'echelle_bg_column';
				}
				else
				{
					classEchelleBgColumn = 'echelle_bg_column alternate';
				}
				var divEchelleBgColumn = new Element('div', {
					'class':classEchelleBgColumn,
					'styles':{
						'width':widthEchelleBgColumn
					}
				});
				divEchelleBgColumn.injectInside(div_EchelleBackground);
			}
		}
		divEchelleBgColumn.remove();
		
		/** Create Echelle Cursors & Legends */
		var div_EchelleTop = new Element('div', {
			'id':'echelle_top',
			'styles':{
				'width':SELF.echelle.width+'px'
			}
		});

				for(var i=0;i<total;i++)
				{
					if((i % SELF.echelle.cells) == 0)
					{
						var div_EchelleStrong = new Element('div', {
							'class':'echelle_strong'
						});
						div_EchelleStrong.injectInside(div_EchelleTop);
					}
					var div_EchelleMedium = new Element('div', {
						'class':'echelle_medium',
						'styles':{
							'width':(cellWidth-1)+'px'
						}
					});
					div_EchelleMedium.injectInside(div_EchelleStrong)
				}

				var div_EchelleLegend = new Element('div', {
					'id':'echelle_legend'
				});
	 			for (var i = 0; i < SELF.echelle.steps[SELF.e].length; i++)
	 			{
	 				if (i == 0 || i == SELF.echelle.steps[SELF.e].length - 1)
	 				{
						width_EchelleLabel = Math.floor(SELF.echelle.cells / 2)*cellWidth+1;
	 					class_EchelleLabel = 'echelle_label position_' + ((i == 0) ? 'left' : 'right');
					}
					else
					{
						width_EchelleLabel = SELF.echelle.cells*cellWidth+1;
	 					class_EchelleLabel = 'echelle_label';
					}
					var div_EchelleLabel = new Element('div', {
						'id':'echelleStep_'+i,
						'class':class_EchelleLabel,
						'styles':{
							'width':width_EchelleLabel+'px'
						}
					});
					div_EchelleLabel.setHTML(SELF.echelle.steps[SELF.e][i].lang);
					div_EchelleLabel.injectInside(div_EchelleLegend);
				}
				div_EchelleLegend.injectInside(div_EchelleTop);
				div_EchelleTop.injectInside($('echelle'));


	 	/* var table = new Element('table', {
			'class':'echelle',
			'styles':{
				'width':SELF.echelle.width+'px'
			}
		});
	 	// table.addClass('echelle');
	 	// table.setStyle('width', SELF.echelle.width + 'px');
	 		var tr = new Element('tr');
	 			var total = (SELF.echelle.steps[SELF.e].length - 1) * SELF.echelle.cells + 1;
	 			var cellWidth = Math.floor(SELF.echelle.width / total);
	 			var importantI = 0;
	 			for (var i = 0; i < total; i++)
	 			{
	 				var td = new Element('td', {
						'class':'step',
						'styles':{
							'width':cellWidth+'px'
						}
					});
	 				// td.addClass('step');
	 				if ((i % SELF.echelle.cells) == 0)
	 				{
	 					td.addClass('step_important');
	 				}

	 				// td.setStyles({
	 					// 'width':	cellWidth + 'px'
	 				// });
	 				tr.appendChild(td);
	 			}
	 		table.appendChild(tr);

	 		var tr = new Element('tr');
	 			for (var i = 0; i < SELF.echelle.steps[SELF.e].length; i++)
	 			{
	 				var td = new Element('td', {
						'id':'echelleStep_'+i
					});
	 				// td.setAttribute('id', 'echelleStep_' + i);
	 				if (i == 0 || i == SELF.echelle.steps[SELF.e].length - 1)
	 				{
	 					colspan = Math.floor(SELF.echelle.cells / 2);
	 					td.addClass('position_' + ((i == 0) ? 'left' : 'right'));
	 				}
	 				else
	 				{
						colspan = SELF.echelle.cells;
	 				}
	 				td.setAttribute('colspan', colspan);
	 				td.setStyles({
	 					'width':	(colspan * cellWidth) + 'px'
	 				});

	 				td.appendText(SELF.echelle.steps[SELF.e][i].lang);

	 				tr.appendChild(td);
	 			}
	 		table.appendChild(tr);
	 	$('echelle').appendChild(table); */
	 }
});