Event.observe(window, 'load', sizes_init);

function sizes_init(event){
	
		//Stop listen Event
	Event.stop(event);
	Event.stopObserving(window, 'load', sizes_init);

		//Local vars init
	var params, make, tmp1, tmp2, tmp3, tmp4, idx;

		//Make over window
	$$('.product').each(function(divProduct){
		
		
		params = new Array;
		tmp1 = tmp2 = tmp3 = tmp4 = null;

		//params = divProduct.getAttribute('name').split(/\|{2}/g);
		params = Prototype.Browser['IE'] ? divProduct.childElements()[0].innerText.split(/\|{2}/g) : divProduct.childElements()[0].textContent.split(/\|{2}/g);
		divProduct.childElements()[0].remove();
		make = false;
		params.each(function(sizes){
			sizes = sizes.split(/\|/g);
			if(sizes[1] != null && sizes[1] != 'sans' && sizes[1] != 'Sans' && sizes[1] != 'SANS' && sizes[1] != 'TU'){
				make = true;
			}
		});
		if(make){
			
			// on vérifie si tailles sans dans seconde colonne
			if(params.length > 1){
				sizesTmp = params[1].split(/\|/g);
				hasSizes = false;
				for(i=1 ; i<sizesTmp.length ; i++){
					if(sizesTmp[i] != 'Sans' && sizesTmp[i] != 'sans' && sizesTmp[i] != 'SANS' && sizesTmp[i] != 'TU')
						hasSizes = true;
				}
				if(!hasSizes)
					params = [params[0]];
			}
			
			var correspondances = [];
			
			//var test = divProduct.childElements()[0].insert({'after':new Element('a', {'href':divProduct.childElements()[0].getAttribute('href')})}).next();
			var divOver = divProduct.childElements()[0].insert({'after':new Element('div', {'class':'over_window'})}).next();
			//var divOver = test.insert({'bottom':new Element('div', {'class':'over_window'})}).childElements()[0];
			var divSize = divOver.insert({'bottom':new Element('div', {'class':'size'})}).childElements()[0];

			divSize.insert({'bottom':new Element('p').update('<strong>Tailles disponibles&nbsp;:</strong>')});

			tmp1 = divSize.insert({'bottom':new Element('div', {'class':'type'})}).childElements()[1];
			if(params.length == 1){
				//tmp1.insert({'bottom':new Element('li').update(tmp2[0])});
				tmp1.setStyle({'display':'none'});
			}else{
				tmp1 = tmp1.insert({'bottom':new Element('ul')}).childElements()[0];
				tmp2 = params[0].split(/\|/g);
				tmp1.insert({'bottom':new Element('li', {'style':'width:64px'}).update(tmp2[0])});
				tmp1.insert({'bottom':new Element('li', {'style':'width:20px'}).update('&nbsp;')});
				tmp2 = params[1].split(/\|/g);
				tmp1.insert({'bottom':new Element('li', {'style':'width:78px'}).update(tmp2[0])});
			}

			tmp1 = divSize.insert({'bottom':new Element('div', {'class':'sizes'})}).childElements()[2];
			tmp1 = tmp1.insert({'bottom':new Element('ul')}).childElements()[0];
			tmp2 = params[0].split(/\|/g);
			if(params[1] != null){tmp3 = params[1].split(/\|/g);}
			if(tmp3 != null){
				if(tmp2.length >= tmp3.length){tmp4 = tmp2;}else{tmp4 = tmp3;}
				for(idx = 1; idx < tmp4.length; idx++){
					if(tmp2[idx] != null){
						newLi = new Element('li', {'style':'width:64px'});
						sizeElements = tmp2[idx].split('->');
						newLi.update(sizeElements[0]);
						if(sizeElements.length>1)
							newLi.insert({'bottom':new Element('span', {'class':'sizeCorrespondance'}).update(' ('+sizeElements[1]+')')});
						tmp1.insert({'bottom':newLi});
					}
					else{
						tmp1.insert({'bottom':new Element('li', {'style':'width:64px'}).update('&nbsp;')});
					}
					tmp1.insert({'bottom':new Element('li', {'style':'width:20px'}).update('&nbsp;')});
					if(tmp3[idx] != null){
						newLi = new Element('li', {'style':'width:78px'});
						sizeElements = tmp3[idx].split('->');
						newLi.update(sizeElements[0]);
						if(sizeElements.length>1)
							newLi.insert({'bottom':new Element('span', {'class':'sizeCorrespondance'}).update('('+sizeElements[1]+')')});
						tmp1.insert({'bottom':newLi});
					}
					else{
						tmp1.insert({'bottom':new Element('li', {'style':'width:78px'}).update('&nbsp;')});
					}
				}
			}else{
				tmp3 = false;
				for(idx = 1; idx < tmp2.length; idx++){
					newLi = new Element('li');
					/*if(tmp2[idx].length > 8 || (tmp2[idx + 1] != null && tmp2[idx + 1].length > 8)){
						newLi.setStyle({'width':'82px'});
					}*/
					sizeElements = tmp2[idx].split('->');
					newLi.update(sizeElements[0]);
					if(sizeElements.length>1)
						newLi.insert({'bottom':new Element('span', {'class':'sizeCorrespondance'}).update(' ('+sizeElements[1]+')')});
					tmp1.insert({'bottom':newLi});
				}
			}
			divProduct.childElements()[1].observe('click', function(event){document.location.href = divProduct.childElements()[0].href});
			divProduct.childElements()[0].observe('mouseover', function(event){sizes_dropDown(divOver);});
			divProduct.childElements()[0].observe('mouseout', function(event){sizes_initDropUp(divOver);});
			divOver.observe('mouseover', function(event){sizes_dropDown(divOver);});
			divOver.observe('mouseout', function(event){sizes_initDropUp(divOver);});
		}
	});

	/*$$('.product').each(function(div){
		element = div.getAttribute('name').split(/\|/g);
		if(element[1] != null && element[1] != 'sans'){
				//Add over_window
			div.childElements()[0].insert({'after':new Element('div', {'class':'over_window'})});

				//Add sizes
			divSize = new Element('div', {'class':'size'});
			div.childElements()[1].insert({'bottom':divSize});
			p = new Element('p');
			p.update('<strong>Tailles disponibles&nbsp;:</strong>');
			divSize.insert({'bottom':p});
			p = new Element('p', {'class':'type'});
			p.update(element[0]);
			divSize.insert({'bottom':p});
			divSize.insert({'bottom':new Element('div', {'class':'sizes'})});
			ul = new Element('ul');
			divSize.childElements()[divSize.childElements().length - 1].insert({'bottom':ul});
			for(idx = 1; idx < element.length; idx++){
				li = new Element('li');
				li.update(element[idx]);
				ul.insert({'bottom':li});
			}

			div.childElements()[1].setStyle({'left':'0px'});
			div.childElements()[0].observe('mouseover', function(event){sizes_dropDown(div.childElements()[1]);});
			div.childElements()[0].observe('mouseout', function(event){sizes_initDropUp(div.childElements()[1]);});
			div.childElements()[1].observe('mouseover', function(event){sizes_dropDown(div.childElements()[1]);});
			div.childElements()[1].observe('mouseout', function(event){sizes_initDropUp(div.childElements()[1]);});
			
		}
	});*/
}

function sizes_dropDown(div){
	clearTimeout(div.up);
	if(div.getHeight() < div.childElements()[0].getHeight() + parseInt(div.childElements()[0].getStyle('marginTop')) + parseInt(div.childElements()[0].getStyle('marginBottom'))){
		div.setStyle({'height':div.getHeight() + 10 + 'px', 'top':192 - div.getHeight() - 10 + 'px'});
		div.down = setTimeout(function(){sizes_dropDown(div);}, 10);
	}
}

function sizes_initDropUp(div){
	clearTimeout(div.down);
	div.up = setTimeout(function(){sizes_dropUp(div);}, 100);
}

function sizes_dropUp(div){
	if(div.getHeight() > 0){
		if(div.getHeight() - 5 < 0){
			div.setStyle({'height':'0px', 'top':'192px'});
		}else{
			div.setStyle({'height':div.getHeight() - 10 + 'px', 'top':192 - div.getHeight() + 10 + 'px'});
		}
		div.up = setTimeout(function(){sizes_dropUp(div);}, 10);
	}
}