<html>
<head>
<script type="text/javascript" src="simplejax.js"></script>
<script type="text/javascript" src="record.js"></script>
<script type="text/javascript">
function displayRecord(setRecord)
{
   var display = '<b>' + nodeValue(setRecord, 'name') + ' ' + nodeValue(setRecord, 'surname') + '</b><br />';
   display += 'Country: ' + nodeValue(setRecord, 'country');
   
   document.getElementById('record').innerHTML = display;
}

function myCallBack(response)
{
   record.assign(response.getElementsByTagName('record'));
   displayRecord(record.activeRecord());
}

function nodeValue(object, tag)
{
   return object.getElementsByTagName(tag)[0].firstChild.nodeValue;
}

record = new record();
simplejax = new simplejax('records.xml', myCallBack);
simplejax.set('XML', true);

window.onload = function()
{
      simplejax.invoke();
}
</script>
</head>
<body>
<input type="button" value="Previous" onclick="displayRecord(record.previous())"/>&nbsp;
<input type="button" value="Next" onclick="displayRecord(record.next())" />
<div id="record"></div>
</body>
</html>