function loadit( element, id, index) {

	var tabs=document.getElementById('tpanes_'+id).getElementsByTagName("a");

	for (var i=0; i < tabs.length; i++)
	{
		if(tabs[i].rel) {
			$('container_'+id+'_'+i).style.display = 'none';
			if(tabs[i].rel == element.rel) {
				tabs[i].className="tpane_header_selected";
			}
			else {
				tabs[i].className = "tpane_header";
			}
		}
	}

	var container = $('container_'+id+'_'+index);
	container.style.display = 'block';
	container.className="tpane_selected";
}

function draw_onglets(onglets, id) {
	var str = "<div id=\"tpanes_"+id+"\" class=\"tpanes\">";
	str += "<table border='0' cellpadding='0' cellspacing='0' style=\"width:100%;\"><tr>";

	str += "<td><table border='0' cellpadding='0' sellspacing='0'><tr>";
	var i = 0;
	for (; i < onglets.length-1; i++) {
		var onglet = onglets[i].split("_SEP_");
		str += "<td>";
		str += str_onglet_h(id+"_"+i, "true" == onglet[0].trim());
		str += "<a href=\"javascript:void(0);\" rel=\""+id+"_"+i+"\""
		    +  " class=\"" +(i==0?"tpane_header_selected":"tpane_header")+"\""
		    +  " onclick=\"loadit(this, '"+id+"', "+i+")\">"+onglet[4]+"</a>";
		str += str_onglet_f(id+"_"+i, "true" == onglet[1].trim());
		str += "</td>";
	}
	str += "</tr></table>";

	str += "</td></tr><tr><td>";
	for (i = 0; i < onglets.length-1; i++) {
		var onglet = onglets[i].split("_SEP_");
		str += "<div id=\"container_"+id+"_"+i+"\" class=\""+(i==0?"tpane_selected":"tpane")+"\">";
		str += str_onglet_h("container_border_"+id+"_"+i, "true" == onglet[2].trim());
		str += "<div id=\"tpane_content_"+id+"_"+i+"\" class=\"tpane_content\">" + onglet[5] + "<div>";
		str += str_onglet_f("container_border_"+id+"_"+i, "true" == onglet[3].trim());
	    str += "</div>";
	}
	str += "</td></tr></table>";
	return str;
}


/**
 * Decoration OUVRANTE de la bordure des onglets.
 * @param id - Identifiant de l'element.
 * @param top
 * 		Si TRUE on affiche la bordure arrondie sion la bordure est un angle droit.
 * @return
 */
function str_onglet_h(id, top) {
	var str = "<table class=\"tp_h_w_e_b\"  border='0' cellspacing='0' cellpadding='0'>";
	if( !ie && top) {
		str += "<tr>";
		str += "<td id=\"tp_t_l_"+id+"\" class=\"tp_t_l tp_h tp_w\"></td>";
		str += "<td id=\"tp_t_t_"+id+"\" class=\"tp_t_t tp_h\"></td>";
		str += "<td id=\"tp_t_r_"+id+"\" class=\"tp_t_r tp_h tp_w\"></td>";
		str += "</tr>";
	} else {
		str += "<tr>";
		str += "<td id=\"tp_t_t_"+id+"\" colspan=\"3\" class=\"tp_t_t tp_h\" style=\"height:1px;\"></td>";
		str += "</tr>";			
	}
	str += "<tr>";
	str += "<td id=\"tp_w_w_"+id+"\" class=\"tp_w_w tp_w\"></td>";
	str += "<td id=\"tp_x_bg_"+id+"\" class=\"tp_x_bg\">";
	return str;
}

/**
 * Decoration FERMANTE de la bordure des onglets.
 * @param id - Identifiant de l'element.
 * @param bottom
 * 		Si TRUE on affiche la bordure du bas sinon l'onglet n'aura pas de bordure basse.
 * @return
 */
function str_onglet_f(id, bottom) {
	var str = "";
	str = "</td>";
	str += "<td id=\"tp_e_e_"+id+"\" class=\"tp_e_e tp_w\"></td>";
	str += "</tr>";
	if( !ie && bottom) {
		str += "<tr>";
		str += "<td id=\"tp_b_l_"+id+"\" class=\"tp_b_l tp_h tp_w\"></td>";
		str += "<td id=\"tp_b_b_"+id+"\" class=\"tp_b_b tp_h\"></td>";
		str += "<td id=\"tp_b_r_"+id+"\" class=\"tp_b_r tp_h tp_w\"></td>";
		str += "</tr>";
	} else {
		str += "<tr>";
		str += "<td id=\"tp_b_b_"+id+"\" colspan=\"3\" class=\"tp_b_b tp_h\" style=\"height:1px;background-position: 0px -6px;\"></td>";
		str += "</tr>";
	}
	str += "</table>";
	return str;
}