// Javascript document
var xmlDoc= new XMLHttpRequest();
var xmlObj;
function dofromXML() {
if (window.ActiveXObject) {
  xmlDoc=new ActiveXObject("Microsoft.XMLHTTP");
  xmlDoc.open("GET", "reverse.xml",true);
  xmlDoc.onreadystatechange=delegate;
  xmlDoc.send(null);
 }else if (window.XMLHttpRequest) {
  xmlDoc.open("GET", "reverse.xml",true);
  xmlDoc.onreadystatechange=delegate;
  xmlDoc.send(null);
  }
}
function delegate() {
if(xmlDoc.readyState==4) {
 if(xmlDoc.status==200) {
xmlObj = xmlDoc.responseXML.documentElement;
handler();
}}
}
function handler() {
  var root;
  root=xmlObj; // noerr
  var loElements = root.getElementsByTagName('lo')[0].getElementsByTagName('los');
  var oaElements = root.getElementsByTagName('oa')[0].getElementsByTagName('oaxaca');
  var daElements = root.getElementsByTagName('da')[0].getElementsByTagName('daily');
  var poElements = root.getElementsByTagName('po')[0].getElementsByTagName('portraits');
  var afElements = root.getElementsByTagName('af')[0].getElementsByTagName('afghanistan');
  for (var i = 0; i < loElements.length; i++) {
  mkImg(loElements[i], 'l', 0, i, 'lo', 'los');
  }
  for (var i = 0; i < oaElements.length; i++) {
  mkImg(oaElements[i], 'o', 1, i, 'oa', 'oaxaca');
  }
  for (var i = 0; i < daElements.length; i++) {
  mkImg(daElements[i], 'd', 2, i, 'da', 'daily');
  }
  for (var i = 0; i < poElements.length; i++) {
  mkImg(poElements[i], 'p', 3, i, 'po', 'portraits');
  }
  for (var i = 0; i < afElements.length; i++) {
  mkImg(afElements[i], 'a', 4, i, 'af', 'afghanistan');
  }
  // call mkImg() on each element (los,oaxaca,afghanistan,daily,portraits) in the xml documentElement
}
// mkImg()'s role is primarily to make a new document.createElement("img") tag for each element as they exist in the xml file
// the first parameter is the element of the xml file with a particular element name
// the second parameter refers to the physical directory where the thumbnails and images are stored (i.e., in one of either the directories with the names l, o, d, p, & a)
//   it is used to construct the thumbnail location that becomes the set src attribute of the new document.createElement("img") tag
// the third parameter is the particular span object's index on the page (there are 0...4 (5) span tags--one for each child node from the xml file) to which the new anchor (with nested image tag) are to be appended
// the fourth parameter is a copy of the iteration variable from the main loop that is going to be passed to the doShow() function
// the fifth and sixth parameters are references to both the given child node in the xml file that contains all the elements with f and d attributes, and -- like the fourth parameter -- are also passed on to the doShow() function to setup a next and previous button for the referring element as well as the main image incase someone clicks on the mkspace img anchor
function mkImg(node,elm,z,j,getbtn1,getbtn2){
    var string="", tmp="", file="";
    file=node.getAttribute("f");
   if (file!=""){
    string +="/portfolio/"+elm+"/img/thumbs/"+"_"+file;
      var change=document.getElementsByTagName("span")[z];
      var anch=document.createElement("a");
      anch.setAttribute("href","#top");
      anch.onclick=function(){ doShow(getbtn1,getbtn2,j,elm) };
    var mkspace=document.createElement("img");
    mkspace.setAttribute("src",string);
    anch.appendChild(mkspace);
    change.appendChild(anch);//from document.change
}
}
function doShow(xmltag1,xmltag2,i,dir){
 var currentnode=xmlObj.getElementsByTagName(xmltag1)[0];
 //var after=currentnode.getElementsByTagName(xmltag2)[i+1];
var after=i+1;
 var befor= i <= 1 ? currentnode.getElementsByTagName(xmltag2)[0] : currentnode.getElementsByTagName(xmltag2)[i-1];
 // for img src
 var fname=currentnode.getElementsByTagName(xmltag2)[i].getAttribute("f");
 var desc=currentnode.getElementsByTagName(xmltag2)[i].getAttribute("d");
 var emptyp=document.createElement("p");
 emptyp.innerHTML="<br />";
 var nl=document.createElement("p");
    var Desc=document.createTextNode(desc);
 var change=document.getElementById("change");
 change.innerHTML=" ";
     var pindex=document.createElement("a");
     pindex.setAttribute("href", "/portfolio/");
     var title=document.createTextNode("Portfolio Index");
     pindex.appendChild(title);
 if(i>0){var before=i-1;
         var prev=document.createElement("a");
         prev.setAttribute("href","javascript:;");
         prev.onclick=function(){ doShow(xmltag1,xmltag2,before,dir)};
        // var _prev="doShow("+dir+","+before+","+fname+");";
         var Previous=document.createTextNode("Previous");
          prev.appendChild(Previous);
 }
  var thisimglocation="";
  thisimglocation+="/portfolio/"+dir+"/img/"+fname;
  var _img=document.createElement("img");
  _img.setAttribute("src",thisimglocation);
  var next=document.createElement("a");
  next.setAttribute("href","javascript:;");
  next.onclick=function(){ doShow(xmltag1,xmltag2,after,dir)};
  var Next=document.createTextNode("Next");
  next.appendChild(Next);
  if (prev) change.appendChild(prev); // prev would be undefined for i = 0
  change.appendChild(_img);
  change.appendChild(nl);
  nl.appendChild(Desc);
  change.appendChild(nl);
  change.appendChild(next);
  change.appendChild(nl);
 change.appendChild(pindex);
}