// charge les informations de l'étape courante en AJAX
function ajaxLoadCarnet()
{
  //alert('ajaxLoadCarnet');
  //alert('url2007JaponLoadCarnet');
  var xhr = getXHR();
  xhr.onreadystatechange = function() { ajaxDisplayCarnet(xhr); };
  xhr.open('GET', url2007JaponLoadCarnet, true);
  xhr.send(null);
}

// affiche les informations de l'étape courante en AJAX
function ajaxDisplayCarnet(xhr)
{
  //alert('ajaxDisplayCarnet');
  if(xhr.readyState == 4 && xhr.status == 200) // le serveur est disponible && la lecture du fichier XML a bien été effectuée
  {
  	var docXML = xhr.responseXML.documentElement;
  	var items = docXML.childNodes;
    //alert(items.length);
  	if (items.length == 22)
  	{
  	  var innerHTML = '';
  	  for (var i = 0; i < 11; ++i)
  	  {
  	    var nodeXML = items.item(i);
  	    if (nodeXML.childNodes[5].firstChild.nodeValue == '')
  	      innerHTML += displayEtapeSansResume(td, nodeXML);
  	    else
  	      innerHTML += displayEtapeAvecResume(td, nodeXML)
  	  }
  	  var td = document.getElementById('parcours_col1');
  	  td.innerHTML = innerHTML;

  	  var innerHTML = '';
  	  for (var i = 11; i < 22; ++i)
  	  {
  	    var nodeXML = items.item(i);
  	    if (nodeXML.childNodes[5].firstChild.nodeValue == '')
  	      innerHTML += displayEtapeSansResume(td, nodeXML);
  	    else
  	      innerHTML += displayEtapeAvecResume(td, nodeXML)
  	  }
  	  var td = document.getElementById('parcours_col3');
  	  td.innerHTML = innerHTML;
  	}
  }
}

function displayEtapeSansResume(td, nodeXML)
{
  //alert('displayEtapeSansResume');
  var innerHTML = '';

  innerHTML += '<table width="465" border="0">';
  innerHTML += '<tr>';
  innerHTML += '<td width="132" height="106">';
  innerHTML += '<a href="etape.php?id_etape=' + nodeXML.childNodes[0].firstChild.nodeValue + '">';
  innerHTML += '<img src="images/th-image' + nodeXML.childNodes[2].firstChild.nodeValue + '.gif" width="132" height="104" border="0" />';
  innerHTML += '</a>';
  innerHTML += '</td>';
  innerHTML += '</td>';
  innerHTML += '<td width="323" valign="top">';
  innerHTML += '<span class="titre_rouge">' +  nodeXML.childNodes[1].firstChild.nodeValue + '</span>';
  innerHTML += '<br />';
  innerHTML += '<span class="titre_noir">' + nodeXML.childNodes[3].firstChild.nodeValue + '</span>';
  innerHTML += '<br />';
  innerHTML += '<span class="resume_etape texte_petit_noir">' + nodeXML.childNodes[4].firstChild.nodeValue + '</span>';
  innerHTML += '</td>';
  innerHTML += '</tr>';
  innerHTML += '</table>';
  innerHTML += '<br />';

  return innerHTML;
}

function displayEtapeAvecResume(td, nodeXML)
{
  //alert('displayEtapeAvecResume');
  var innerHTML = '';

  innerHTML += '<table width="465" border="0">';
  innerHTML += '<tr>';
  innerHTML += '<td width="132" height="106">';
  innerHTML += '<a href="etape.php?id_etape=' + nodeXML.childNodes[0].firstChild.nodeValue + '">';
  innerHTML += '<img src="images/th-image' + nodeXML.childNodes[2].firstChild.nodeValue + '.gif" width="132" height="104" border="0" />';
  innerHTML += '</a>';
  innerHTML += '</td>';
  innerHTML += '<td width="323" valign="top">';
  innerHTML += '<span class="titre_rouge">' +  nodeXML.childNodes[1].firstChild.nodeValue + '</span>';
  innerHTML += '<br />';
  innerHTML += '<span class="titre_noir">' + nodeXML.childNodes[3].firstChild.nodeValue + '</span>';
  innerHTML += '<br />';
  innerHTML += '<span class="texte_petit_noir">';
  innerHTML += '(' + nodeXML.childNodes[6].firstChild.nodeValue + ' photos)';
  innerHTML += '<br />';
  innerHTML += '<span class="resume_etape texte_petit_noir">';
  innerHTML += nodeXML.childNodes[5].firstChild.nodeValue
  innerHTML += '<a href="etape.php?id_etape=' + nodeXML.childNodes[0].firstChild.nodeValue + '">';
  innerHTML += '...<u> (suite) </u>';
  innerHTML += '</a>';
  innerHTML += '</span>';
  innerHTML += '</span>';
  innerHTML += '</td>';
  innerHTML += '</tr>';
  innerHTML += '</table>';
  innerHTML += '<br/>';

  return innerHTML;
}