/* JavaScript Document
 *Place functions within this document
/*Call functions within the dom ready in the html page
*/

var affich = function (bouton){
	jQuery('#infos div').each(function() {
		e = jQuery(this);
		if(e.css('visibility') =='visible') {	
				e.css('visibility', 'hidden');
		}
		if(e.hasClass(bouton)) {
			e.css('visibility', 'visible');
		}
	});
};

var affich_all = function (){
	jQuery('#infos div').each(function() {
		e = jQuery(this);
		if(e.css('visibility') =='visible') {	
				e.css('visibility', 'hidden');
		}
		if(e.hasClass('tres_grand') || e.hasClass('grd') || e.hasClass('moyen') || e.hasClass('ptit') || e.hasClass('tres_petit')) {
			e.css('visibility', 'visible');
		}
	});
};
var affich_div = function (show){
	jQuery('#paragraphe').fadeOut(200, function() {
		jQuery('#paragraphe div').hide();
		jQuery('#paragraphe #' + show).show();
		jQuery('#paragraphe').fadeIn(200);
	});
}
/*
var affich_div = function (show){
	$('paragraphe').getElements('div').each(function( item ) 	{
	//item.setStyle('display', 'none');
	item.fade(0, function() {
		item.setStyle('display', 'none');
	});
	}.bind(this));
//	$(show).setStyle('display', 'block');
	$(show).setStyle('opacity', 0).setStyle('display', 'block');
	$(show).fade(1);
};
*/

function getMouseCoords(e) {
	var coords = {};
	if (!e) { var e = window.event; }
	if (e.pageX || e.pageY) 	{
		coords.x = e.pageX;
		coords.y = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		coords.x = e.clientX + document.body.scrollLeft	+ document.documentElement.scrollLeft;
		coords.y = e.clientY + document.body.scrollTop	+ document.documentElement.scrollTop;
	}
	return coords;
}

function close_popup() {
	var layer = document.getElementById("infobulle");
	layer.style.top =  "-9999px";
	layer.style.left = "-9999px";
}

function affich_nom(e,desc_string) {
	var coords = getMouseCoords(e);
	var layer = document.getElementById("infobulle");
	layer.style.top = (coords.y)+ "px";
	layer.style.left = (coords.x + 20) + "px";
	layer.innerHTML = desc_string;
}
		
 

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

	$('but_tresgrand').addEvent('click', function(){
	affich('tres_grand');
	})
	$('but_grand').addEvent('click', function(){
	affich('grd');
	})	
	$('but_moyen').addEvent('click', function(){
	affich('moyen');
	})
	$('but_petit').addEvent('click', function(){
	affich('ptit');
	})
	$('but_trespetit').addEvent('click', function(){
	affich('tres_petit');
	})

	
	$('but_orange').addEvent('click', function(){
	affich('orange');
	})
	$('but_noir').addEvent('click', function(){
	affich('noir');
	})
	$('but_jaune').addEvent('click', function(){
	affich('jaune');
	})
	$('but_rouge').addEvent('click', function(){
		affich('rouge');
	})
	$('but_vert').addEvent('click', function(){
	affich('vert');
	})
	$('but_gris').addEvent('click', function(){
	affich('gris');
	})
	$('but_rouge_clair').addEvent('click', function(){
		affich('rouge_clair');
	})
	$('but_violet').addEvent('click', function(){
	affich('violet');
	})
	$('but_bleu').addEvent('click', function(){
	affich('bleu');
	})
	$('but_bleu_clair').addEvent('click', function(){
	affich('bleu_clair');
	})
	
	$('but_hf').addEvent('click', function(){
	affich('hf');
	})
	$('but_conv').addEvent('click', function(){
	affich('conv');
	})
	$('but_fe').addEvent('click', function(){
	affich('fe');
	})
	$('but_lac').addEvent('click', function(){
	affich('lac');
	})
	$('but_laf').addEvent('click', function(){
	affich('laf');
	})
	$('but_rev').addEvent('click', function(){
	affich('rev');
	})
	$('but_all').addEvent('click', function(){
	affich_all();
	})
	
});