function afficheEvenements()
{
	var allTD = window.document.getElementsByTagName('td');
	
	for(var cpt=0; cpt < tabEvenements.length; cpt++)
	{
		var timesTempDebut 	= tabEvenements[cpt][0];
		var timesTempFin 	= tabEvenements[cpt][1];
		var debut 			= tabEvenements[cpt][2];
		var fin 			= tabEvenements[cpt][3];
		var description 	= tabEvenements[cpt][4];
		var lieu 			= tabEvenements[cpt][5];
		var organiser 		= tabEvenements[cpt][6];
		var time_event 		= tabEvenements[cpt][7];
		var ville 			= tabEvenements[cpt][8];
		var pays 			= tabEvenements[cpt][9];
		var nbJours 		= tabEvenements[cpt][10];
		var cev_id 			= tabEvenements[cpt][11];
		var background 		= tabEvenements[cpt][12];
		var titre 			= tabEvenements[cpt][13];
		var decalage 		= tabEvenements[cpt][14];
		var picto 			= tabEvenements[cpt][15];
		var visuel 			= tabEvenements[cpt][16];
		var lien 			= tabEvenements[cpt][17];
		
		var marginTop = eval(decalage*20);
		
		var element = $(timesTempDebut);
		if(!element) alert(timesTempDebut);
		var width = (element.getWidth()*nbJours)-(nbJours);
		
		// controle par rapport à la largeur  de la div événement affiché si le texte n'est pas trop long, si c'est le cas, le texte est coupé
		// le rapport est de 13 caractères maximum pour une div de 100px de long.
		var titreTruncate = decodeStr(decodeStr(titre));
		nbCaractMaxTitre = (width/100)*13;
		if(titreTruncate.length > nbCaractMaxTitre) titreTruncate = decodeStr(decodeStr(titre)).truncate(nbCaractMaxTitre);
		
		var position = getPosition(timesTempDebut);
		var positionEvenementX = eval(position[0]);
		var positionEvenementY = eval(position[1]);
		
		var elemEvenement = Builder.node("div",{'class':'evenement','id':'evenement_'+cev_id+'_'+cpt,'style':'background:#'+background+';margin-top:'+marginTop+'px;width:'+width+'px;'});
		
		$(timesTempDebut).appendChild(elemEvenement);
		
		var lieuEncoded 		= encodeStr(lieu);
		var villeEncoded 		= encodeStr(ville);
		var paysEncoded 		= encodeStr(pays);
		var descriptionEncoded 	= encodeStr(description);
		var titreEncoded 		= encodeStr(titre);
		var lienEncoded 		= encodeStr(lien);
		var organiserEncoded 	= encodeStr(organiser);
		var time_eventEncoded 	= encodeStr(time_event);
		
		//alert(lieuEncoded);
		//alert(descriptionEncoded);
		//alert(titreEncoded);
		
		var messageNode = Builder.node("a",{'class':'a_evenement','id':'a_evenement_'+cev_id+'_'+cpt,'onmouseover':'javascript:afficheBubble(\'a_evenement_'+cev_id+'_'+cpt+'\',\''+titreEncoded+'\',\''+debut+'\',\''+fin+'\',\''+descriptionEncoded+'\',\''+lieuEncoded+'\',\''+villeEncoded+'\',\''+organiserEncoded+'\',\''+time_eventEncoded+'\',\''+paysEncoded+'\',\''+background+'\',\''+visuel+'\',\''+lienEncoded+'\');','onmouseout':'javascript:cacheBubble(\'bubble_evenement_'+cev_id+'_'+cpt+'\');','title':decodeStr(decodeStr(titre))},titreTruncate);
		//var messageNode = Builder.node("a",{'class':'a_evenement','id':'a_evenement_'+cev_id+'_'+cpt,'onmouseover':'javascript:afficheBubble(\'a_evenement_'+cev_id+'_'+cpt+'\',\''+titre+'\',\''+debut+'\',\''+fin+'\',\''+description+'\',\''+lieu+'\',\''+ville+'\',\''+organiser+'\',\''+time_event+'\',\''+pays+'\',\''+picto+'\',\''+visuel+'\',\''+lien+'\');','onmouseout':'javascript:cacheBubble(\'bubble_evenement_'+cev_id+'_'+cpt+'\');','title':titre},titreTruncate);
		
		elemEvenement.appendChild(messageNode);
	}
}

function afficheBubble(id,titre,debut,fin,description,lieu,ville,organiser,time_event,pays,picto,visuel,lien)
{
	var tabSplited = id.split('_');
	var idEvenement = tabSplited[1]+"_"+tabSplited[2]+"_"+tabSplited[3];
	var evenement = $(idEvenement);
	
	var position = get_full_position(idEvenement);
	
	if($('bubble_'+idEvenement) == null)
	{
		
		var miEcran = document.body.clientWidth/2;
		
		//var styleBubble = 'margin-top:-90px;margin-left:'+((widthConteneur/2)-50)+'px;';
		//alert((position.left+(position.width/2)-50)>1004-300);
		if ((position.left+(position.width/2)-50)+300>miEcran+480){
			var styleBubble = 'top:'+position.top+'px;left:'+(miEcran+480-350)+'px;margin-top:-40px;margin-left:0px;';
		}else{
			var styleBubble = 'top:'+position.top+'px;left:'+position.left+'px;margin-top:-40px;margin-left:'+((position.width/2)-50)+'px;';
		}
		
		var bubble = Builder.node("div",{'class':'bubble',id:'bubble_'+idEvenement,'style':styleBubble});
		document.body.appendChild(bubble);
		
		$('bubble_'+idEvenement).style.display = 'none';
		
		var bubble_header = Builder.node("div",{'class':'header','id':'header_'+idEvenement});
		bubble.appendChild(bubble_header);
		
		
		// picto
		//var picto_illu = Builder.node("img",{'src':'http://www.microinsurancenetwork.org/admin/calendrier/img/categories/'+picto,'class':'picto_bubble','alt':'','title':''});
		//var picto_illu = Builder.node("div",{'style':'width:15px; height:15px;background-color:#'+picto,'class':'picto_bubble','alt':'','title':''});
		//bubble_header.appendChild(picto_illu);
		
		// bouton fermer
		var a_close = Builder.node("a",{'href':'javascript:cacheBubble(\''+idEvenement+'\');','class':'close_bubble','title':'Close'});
		bubble_header.appendChild(a_close);
		
		var clearBoth = Builder.node("div",{'class':'clearBoth'});
		bubble.appendChild(clearBoth);
		
		var bubble_middle = Builder.node("div",{'class':'middle',id:'middle_'+idEvenement,'style':'color:#000;'});
		bubble.appendChild(bubble_middle);
		
		var clearBoth = Builder.node("div",{'class':'clearBoth'});
		bubble.appendChild(clearBoth);
		
		var bubble_footer = Builder.node("div",{'class':'footer','id':'footer_'+idEvenement});
		bubble.appendChild(bubble_footer);
	}
	// sinon on detruit le texte qu\'elle comporte
	else clearNode('middle_'+idEvenement);
	
	// TITRE
	var messageNode = Builder.node("span",{'class':'titre_bubble'},decodeStr(decodeStr(titre)));
	$('middle_'+idEvenement).appendChild(messageNode);
	
	
	var clearBoth = Builder.node("div",{'class':'clearBoth'});
	$('middle_'+idEvenement).appendChild(clearBoth);
	
	// DATE DEBUT ET DATE DE FIN
	var messageNode = Builder.node("span",{'class':'dates_bubble','style':'margin-top:5px;'},debut);
	$('middle_'+idEvenement).appendChild(messageNode);
	
	
	if(time_event != 'aucun')
	{
		var clearBoth = Builder.node("div",{'class':'clearBoth'});
		$('middle_'+idEvenement).appendChild(clearBoth);
		
		var messageNode = Builder.node("span",{'class':'time_bubble'},decodeStr(decodeStr(time_event)));
		$('middle_'+idEvenement).appendChild(messageNode);	
	}
		
	var clearBoth = Builder.node("div",{'class':'clearBoth'});
	$('middle_'+idEvenement).appendChild(clearBoth);
	
	
	
	// LIEU
	if(lieu != 'aucun')
	{
		var clearBoth = Builder.node("div",{'class':'clearBoth'});
		$('middle_'+idEvenement).appendChild(clearBoth);
		
		var messageNode = Builder.node("span",{'class':'lieu_bubble'},decodeStr(decodeStr(lieu)));
		$('middle_'+idEvenement).appendChild(messageNode);
	}
	
	
	// VILLE
	if(ville != 'aucun')
	{
		var clearBoth = Builder.node("div",{'class':'clearBoth'});
		$('middle_'+idEvenement).appendChild(clearBoth);
		
		//var messageNode = Builder.node("span",{'class':'lieu_bubble'},'city : '+decodeStr(decodeStr(ville)));
		var messageNode = Builder.node("span",{'class':'ville_bubble'},decodeStr(decodeStr(ville)));
		$('middle_'+idEvenement).appendChild(messageNode);
	}
	
	
	// PAYS
	if(pays != 'aucun')
	{
		
		//var messageNode = Builder.node("span",{'class':'lieu_bubble'},'country : '+decodeStr(decodeStr(pays)));
		if(ville != 'aucun'){
			pays = ', '+pays;
		}else{
			var clearBoth = Builder.node("div",{'class':'clearBoth'});
			$('middle_'+idEvenement).appendChild(clearBoth);
		}
		var messageNode = Builder.node("span",{'class':'pays_bubble'},decodeStr(decodeStr(pays)));
		$('middle_'+idEvenement).appendChild(messageNode);
	}
	
	
	// ORGANISER
	if(organiser != 'aucun')
	{
		var clearBoth = Builder.node("div",{'class':'clearBoth'});
		$('middle_'+idEvenement).appendChild(clearBoth);
		
		//var messageNode = Builder.node("span",{'class':'lieu_bubble'},'organiser : '+decodeStr(decodeStr(organiser)));
		var messageNode = Builder.node("span",{'class':'lieu_bubble'},decodeStr(decodeStr(organiser)));
		$('middle_'+idEvenement).appendChild(messageNode);
	}
	
	
	
	
	
	var clearBoth = Builder.node("div",{'class':'clearBoth','style':'height:10px;'});
	$('middle_'+idEvenement).appendChild(clearBoth);
	
	// VISUEL
	if(visuel != 'aucun')
	{
		var visuel_illu = Builder.node("img",{'src':'http://www.microinsurancenetwork.org/image/calendrier/petites/'+visuel,'class':'visuel_illu','alt':'','title':''});
		$('middle_'+idEvenement).appendChild(visuel_illu);
	}
	
	// DESCRIPTION DE L'EVENEMENT
	var messageNode = Builder.node("span",{'id':'middle_desciption_'+idEvenement,'class':'description_bubble'});
	$('middle_'+idEvenement).appendChild(messageNode);
	
	var newDescription = decodeStr(decodeStr(description));
	var newDescription = newDescription.replace('----------','<br/><br/>');
	var newDescription = newDescription.replace('----- -----','<br/><br/>');
	var newDescription = newDescription.replace(' ----- ','<br/>');
	var newDescription = newDescription.replace(' -----','<br/>');
	var newDescription = newDescription.replace('----- ','<br/>');
	var newDescription = newDescription.replace('-----','<br/>');
	
	var reg=new RegExp("-----","g");
	if (reg.test(newDescription))
	{
	
		var test = newDescription;
		var temp = test.split('-----');
		
		if(temp.length>0)
		{
			newDescription = '';
			for(var cpt=0;cpt<temp.length;cpt++)
			{
				if(cpt<((temp.length)-1))
				newDescription += temp[cpt]+'<br/>';
			}
		}
	
	}
	//alert(description+' ---------- '+newDescription);
	
	$('middle_desciption_'+idEvenement).update(newDescription);
	
	var clearBoth = Builder.node("div",{'class':'clearBoth'});
	$('middle_'+idEvenement).appendChild(clearBoth);
	
	// LIEN
	if(lien != 'aucun')
	{
		var a_lien = Builder.node("a",{'href':decodeStr(decodeStr(lien)),'target':'_blank','class':'lien_bubble','title':'Link'});
		
		var lienTemp = decodeStr(lien);
		/*if(lienTemp.length > 55) 	lienAff = "Click here for more information";//lienTemp.truncate(55);
		else 						lienAff = lienTemp;*/
		
		lienAff = "Click here for more information";
		a_lien.innerHTML = lienAff;
		
		$('middle_'+idEvenement).appendChild(a_lien);
	}
	
	new Effect.Appear('bubble_'+idEvenement, {duration:0.3});
	
	
	var bubbles = new Array();
	// récupération de toutes les bulles
	var result = window.document.getElementsByTagName('div');
	
	for(var cpt2 =0; cpt2<result.length; cpt2++)
	{
		if((result[cpt2].getAttribute("className") == 'bubble') || (result[cpt2].getAttribute("class") == 'bubble'))
		{
			bubbles[bubbles.length] = result[cpt2];
		}
	}
	//alert('result.length = '+result.length+' --- bubbles.length = '+bubbles.length);
	// on cache toutes les autres bulles sauf celle qui doit être affichée (si nécessaire)
	for(var cpt=0; cpt<bubbles.length; cpt++)
	{
		var id = bubbles[cpt].identify();
		
		if($(id) && id != 'bubble_'+idEvenement)
		{
			var reg = new RegExp("bubble_");
			
			if(reg.test(id))
			{
				var idSplited = id.split('bubble_');
				cacheBubble(idSplited[1]);
			}
		}
	}
}

// chargée de cacher la bulle
function cacheBubble(id){

	if($('bubble_'+id))
	{
		new Effect.Fade('bubble_'+id, {duration:0.3});
		setTimeout("removeNode('bubble_"+id+"');",300);
	}
}


function getPosition(element)
{
	var left = 0;
	var top = 0;
	/*On récupère l\'élément*/
	var e = document.getElementById(element);
	/*Tant que l\'on a un élément parent*/
	while (e.offsetParent != undefined && e.offsetParent != null)
	{
		/*On ajoute la position de l\'élément parent*/
		left += e.offsetLeft + (e.clientLeft != null ? e.clientLeft : 0);
		top += e.offsetTop + (e.clientTop != null ? e.clientTop : 0);
		e = e.offsetParent;
	}
	return new Array(left,top);
}

function get_offset(elem, pos)
{
    var offset = 0;
    while(elem) {
        offset += elem[pos];
        elem = elem.offsetParent;
    }
    return offset;
}

//voir ^
function get_full_position(id)
{
    var d = document.getElementById(id);
    var offsets = new Object;
    offsets.top 	= get_offset(d, "offsetTop");
    offsets.left 	= get_offset(d, "offsetLeft");
    offsets.width 	= d.clientWidth;
    offsets.height 	= d.clientHeight;
    return offsets;
}

//supprime le noeud definit par nodeId
function removeNode(nodeId){
	if (document.getElementById(nodeId)){
		document.getElementById(nodeId).parentNode.removeChild(document.getElementById(nodeId));
	}	
}


//netoie un noeud definit par l'ID nodeId 
function clearNode(nodeId){
	if (document.getElementById(nodeId)){
		var node = document.getElementById(nodeId);
		if(node.hasChildNodes()){
			var liste = node.childNodes;		
			//alert(liste[0]);
			for (var i=liste.length-1; i>=0; i--) document.getElementById(nodeId).removeChild(liste[i]);
		}
	}else alert("Auncun element détecté avec l'id "+nodeId);	
}

function encodeStr(sStr)
{
	return escape(encodeURI(sStr));
}

function decodeStr(sStr)
{
	return unescape(decodeURI(sStr));
}