//
   // v4 grabs an xml doc and creates a portfolio entry for each <entry> in the doc.
   //
   // new in v4 - images are preloaded as the xml parser finds them, to make the 
   // visual effects run smoothly
   // 
   // selecting a new entry causes the containing box to collapse upwards and then
   // expand down again with the new content, thanks to scriptaculous effects. (This
   // requires the inclusion of prototype.js and effects.js
   //
   // 
   var xmldoc; //global var to hold the received xml file
   var linkColours = new Array; //global var to hold link colours

   function loadurl(dest){
	   new Ajax.Request(dest, {method: 'get', onSuccess:handlerFunc, onFailure:errFunc});
   } 

   var errFunc = function(t){
    alert('Error ' + t.status + ' -- ' + t.statusText);
   }

   var handlerFunc = function(xmlhttp) {
    var i = j = k =  0;
	   var linkAddy = false;
	   var imageSrc = false;

	   // xmlhttp.responseXML object contains the response.
	   xmldoc = xmlhttp.responseXML;
	   var out = document.getElementById("folio-output"); //useful for status indication
	   var primaryNodes = xmldoc.documentElement.childNodes;
/*    var copy = new Array;
    for(i = 0; i < primaryNodes.length; i++){
     if (xmldoc.documentElement.childNodes[i].nodeType != 3){
      copy[i] = xmldoc.documentElement.childNodes[i];      
     }
     out.innerHTML += copy[i].nodeType;
    }
*/
   	//create list of primary nodes, linked to closeBox, 
   	//a function for displaying their content:

	   setLinkColours(primaryNodes.length);
   	//alert(shortList.length);
    out.innerHTML += "<div style='margin: 3px;'>";
	   for(i = 0; i < primaryNodes.length; i++){
     out.innerHTML += "<a id='folio-link" +
		  i +"' onMouseOver='displayName(" + 
		  i + 
		  ")' style='background: #" +
		  linkColours[i] + "' href='javascript:closeBox(" + i + ")' title='load portfolio entry #" +
		  i + "'>" + (i+1) +"</a></span>";
   }
    out.innerHTML += "</div>";

 	//preload images
  preLoad(primaryNodes);


	//clear any waiting message
  	document.getElementById("folio-waiting").innerHTML = "";

	//display the first entry
	closeBox('0');
   }

   function displayName(id){
    var pri = xmldoc.documentElement.childNodes;
	var sec = pri[id].childNodes;
	for(j = 0; j < sec.length; j++){
	 // name of secondary nodes = secondaryNodes[j].nodeName;
	 // content of secondary nodes = secondaryNodes[j].firstChild.nodeValue;
	 if(sec[j].nodeName == 'name')
	  document.getElementById('folio-link-name').innerHTML = "&nbsp;" + sec[j].firstChild.nodeValue;
	}	
   }

   function setLinkColours(numLinks){
	//creates a graduate list of colours. only works for 27 or fewer links at the moment. 
	var colourSwatches = new Array('165416', '255F25', '366C36', '497A49', '5F895F', '759A75', '8AA98A', '9EB89E', 'B2C7B2', 'C5D5C5', 'E9EFE9', 'ffffff', 'ffffff', 'ffffff', 'ffffff', 'ffffff');
	var i = j = 0;

	if(colourSwatches.length >= numLinks){
	 var spacing = Math.round(colourSwatches.length / numLinks);
	 for(i = 0; i < colourSwatches.length; i += spacing){	 
	  linkColours[j] = colourSwatches[i];
	  j++;
	 }
	}

	else for(j in linkColours) linkColours[j] = '000000' ;

	
   }

   function preLoad(primaryNodes){
	// pre-loads all images into memory to make the visual effects smoother
	var h = i = j = k = 0; 
	var imageSrcList = new Array;
	for(i = 0; i < primaryNodes.length; i++){	
	 secondaryNodes = primaryNodes[i].childNodes;
	 for(j = 0; j < secondaryNodes.length; j++){
	  if(secondaryNodes[j].nodeName == 'image'){
	   imageSrcList[k] = secondaryNodes[j].firstChild.nodeValue;
	   k++;
	  }
	 }
	}
	var imageList = new Array;
	for (i = 0; i < imageSrcList.length; i++){
	 imageList[i] = new Image();
	 imageList[i].src = "images/portfolio/" + imageSrcList[i];	 
	}
   }
  
   function closeBox(entryID){
	// closes the display box using scriptaculous Blind effect. 
	// on completion, goto loadBox();

	// if nothing has yet been loaded (ie. its the first time through), close the box rapidly
	if (document.getElementById("folio-text").innerHTML.indexOf(' ') == -1)
	 new Effect.BlindUp('folio-box', {afterFinish: function(){loadBox(entryID)} , duration: '0'});

	// else, close the box gradually
	else
	 new Effect.BlindUp('folio-box', {afterFinish: function(){loadBox(entryID)} , duration: '0.8'});
   }

   function openBox(){
	new Effect.BlindDown('folio-box', {queue: 'end', limit: '1', duration: '0.8'});
   }

   function loadBox(entryID){

	var primaryNodes = xmldoc.documentElement.childNodes;
	// name of primary nodes = primaryNodes[i].nodeName;

	//document.getElementById('folio-link' + entryID).style.background = 'white';

	//turn all links off
	for (i = 0; i < primaryNodes.length; i++){
	 document.getElementById('folio-link' + i).className = "off";
	}

	// indicate which link has been clicked:
	document.getElementById('folio-link' + entryID).className = "on";

	//parses the xml doc, pulls out the relevant info, 
	//and puts it in the appropriate elements in the html doc.

	//init and clear vars
	var nameTxt = linkAddy = imageSrc = descTxt = assocTxt = false;
  document.getElementById("folio-image").innerHTML = "";
  document.getElementById("folio-desc").innerHTML = "";

	secondaryNodes = primaryNodes[entryID].childNodes;

	// xml doc is now referred to as such:
	// 
	// <root> (or, <xmldoc.documentElement.nodeName>)
	//  <primaryNodes[0].nodeName>
	//   <secondaryNodes[0].nodeName>
	//    secondaryNodes[0].firstChild.nodeValue
	//   </secondaryNodes[0].nodeName>
	//   <secondaryNodes[1].nodeName>
	//    secondaryNodes[1].firstChild.nodeValue
	//   </secondaryNodes[1].nodeName>
	//  </primaryNodes[0].nodeName>
	//  <primaryNodes[1].nodeName>
	//   <secondaryNodes[0].nodeName>
	//    secondaryNodes[0].firstChild.nodeValue
	//   </secondaryNodes[0].nodeName>
	//   <secondaryNodes[1].nodeName>
	//    secondaryNodes[1].firstChild.nodeValue
	//   </secondaryNodes[1].nodeName>
	//  </primaryNodes[1].nodeName>
	// </root>

	//
	// iterate through all second-level nodes of a given primary node,
	// generate content depending on node name.



	for(j = 0; j < secondaryNodes.length; j++){
	 // name of secondary nodes = secondaryNodes[j].nodeName;
	 // content of secondary nodes = secondaryNodes[j].firstChild.nodeValue;
	 if(secondaryNodes[j].nodeName == 'description')
	  descTxt = secondaryNodes[j].firstChild.nodeValue;
	 if(secondaryNodes[j].nodeName == 'image')
	  imageSrc = secondaryNodes[j].firstChild.nodeValue;
	 }

	if(imageSrc)
	 document.getElementById("folio-image").innerHTML = "<img src='images/portfolio/" + imageSrc + "' />";
	if(descTxt)
	 document.getElementById("folio-desc").innerHTML = descTxt;

	openBox();
   }

   var portfolioContent = '<p>Hurry Up offers a wide range of services:</p>' +
    '<ul>' +
	 '<li>Repair worn toes, heels and soles.</li>' +
	 '<li>Zip Repairs</li>' +
	 '<li>Boot Alternations</li>' +
	 '<li>Bag Repairs including zips, latches and handles</li>' +
	 '<li>Shoe Colouring</li>' +
	 '<li>Orthotic requirements and special build-ups</li>' +
	 '<li>Sneaker rebuilds</li>' +
	 '<li>Work &amp; Tramping Boots - resoling and repairs</li>' +
	 '<li>Worn elastics, lost buckles and relining worn inside heels</li>' +
  '</ul>' + 
  '<div id="prefolio">Before/After Photos</div>' +
  '<span id="folio-waiting"></span>' +
  '<div id="folio-output"></div>' + 
  '<div id="folio-box">' +
  ' <div id="folio-text">' +
  ' <div id="folio-desc"></div></div>' +
  ' <div id="folio-image"></div>' +
  '</div>';

  function initContent(){//loads page i content into 'contentBlock[i]'
   contentBlock = new Array;
   contentBlock['portfolio'] = portfolioContent;
   loadPage('portfolio');
  }

  function loadPage(page){
   document.getElementById("content").innerHTML = ''; //replaces static content with dynamic content
   document.getElementById("content").innerHTML = contentBlock[page];
   if (page == 'portfolio')
	   loadurl("portfolioList.xml");
  }