function placeDescriptions(currentPic) {
	var currentTitle = pictureDivs[currentPic].getElementsByTagName("h1");
	var currentDescription = pictureDivs[currentPic].getElementsByTagName("p");
	
	var titleText = currentTitle[0].innerHTML;
	var descriptionText = currentDescription[0].innerHTML;
	
	var captionHeader = document.getElementById("caption_header");
	var captionText = document.getElementById("caption_text");
	
	captionHeader.innerHTML = titleText;
	captionText.innerHTML = descriptionText;
	
	
	
}




function nextPic() {	
	var nextPic = currentPic+1; // next picture id
	
	//show the next pic or cycle to beginning
	if ( nextPic > pictureDivs.length -1 ) nextPic = 0;
	
	var showImgId = 'img' + nextPic;
	var hideImgId = 'img'+currentPic;
	
	//This function slides the incoming pic div and fades it in.
	function bringItIn() {
		incomingPicDiv = document.getElementById(showImgId);
		incomingPicDiv.style.left = "-30px";
		new Effect.Parallel(
						[ new Effect.Appear(showImgId),
						 new Effect.MoveBy(showImgId, 0, 30, {transition: Effect.Transitions.slowstop})
						]);
	}
	
	//this fades out the outgoing image and calls the above function to bring in the new image.
			new Effect.Parallel(
						[ new Effect.Fade(hideImgId),
						 new Effect.MoveBy(hideImgId, 0, 30, {transition: Effect.Transitions.slowstop})
						], {afterFinish: bringItIn});
	

	//the following lines of code replace the text in the caption box and set the current picture counter to the number of the picture just brought in
	placeDescriptions(nextPic);
	currentPic=nextPic;
	return false;

}


function prevPic() {	
	var previousPic = currentPic-1; // next picture id
	
	//show the next pic or cycle to beginning
	if ( previousPic < 0 ) previousPic = pictureDivs.length - 1;
	
	var showImgId = 'img' + previousPic;
	var hideImgId = 'img'+currentPic;
	
	
		//This function slides the incoming pic div and fades it in.
	function bringItIn() {
		incomingPicDiv = document.getElementById(showImgId);
		incomingPicDiv.style.left = "30px";
		new Effect.Parallel(
						[ new Effect.Appear(showImgId),
						 new Effect.MoveBy(showImgId, 0, -30, {transition: Effect.Transitions.slowstop})
						]);
	}
	
	//this fades out the outgoing image and calls the above function to bring in the new image.
			new Effect.Parallel(
						[ new Effect.Fade(hideImgId),
						 new Effect.MoveBy(hideImgId, 0, -30, {transition: Effect.Transitions.slowstop})
						], {afterFinish: bringItIn});
	
	
	
//	Effect.Appear(showImgId, { queue: 'end'});
//	Effect.Fade(hideImgId, { queue: 'front'});
	
	placeDescriptions(previousPic);
	currentPic=previousPic;
	return false;
}



function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("picture_viewer")) return false;
  var picViewer = document.getElementById("picture_viewer");  
  var loadingImg = document.getElementById("loading");
 
  var picturesPane = document.getElementById("pictures");
  picturesPane.style.height = "285px"; // set height on pictures div so that it does not expand
  
  pictureDivs = picturesPane.getElementsByTagName("div"); //declare as a global so it can be used elsewhere
  
  for ( var i=0; i < pictureDivs.length; i++ ) {
	pictureDivs[i].style.display = "none";  // hide all the images
  }
  Effect.Appear('img0');
  currentPic=0;


  placeDescriptions(0);
  loadingImg.style.display = "none";
  picViewer.style.display = "block"; //show the picture viewer
  
  
  //following lines show the pictures when nav buttons are clicked
  var previousLink = document.getElementById("previous_nav");
  var nextLink = document.getElementById("next_nav");
  
  previousLink.onclick = function() {
	  previousLink.blur();
	  return prevPic();
	}
  nextLink.onclick =  function() {
	  previousLink.blur();
      return nextPic();
	}


 
  previousLink.onmouseover = function() {previousLink.style.backgroundImage = "url(assets/templates/hope/images/pic_viewer/left_arrow_on.png)" ;}
  previousLink.onmouseout = function() {previousLink.style.backgroundImage = "url(assets/templates/hope/images/pic_viewer/left_arrow_off.png)" ;}
  nextLink.onmouseover = function() {nextLink.style.backgroundImage = "url(assets/templates/hope/images/pic_viewer/right_arrow_on.png)" ;}
  nextLink.onmouseout = function() {nextLink.style.backgroundImage = "url(assets/templates/hope/images/pic_viewer/right_arrow_off.png)" ;}

  
}


function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
addLoadEvent(prepareGallery);