// JavaScript Document

currentPhoto = 0;
previousPhoto = (currentPhoto - 1);
window.onload = functionOne;


function functionOne() {

// Clear elements From the display

// Find the image gallery

	var gallery = document.getElementById("photoGallery");

// Make the images disappear

	var images = gallery.getElementsByTagName("img");
		for (var i=0; i < images.length; i++) {
			images[i].style.display = 'none';
		}

// Make the text disappear

	var spans = gallery.getElementsByTagName("span");
		for (var j=0; j<spans.length; j++) {
			spans[j].style.display = 'none';
		}
	functionTwo();

}
	
function functionTwo() {	

// Call the first photo

	var gallery = document.getElementById("photoGallery");
	var images = gallery.getElementsByTagName("img");
	var spans = gallery.getElementsByTagName("span");


// Make the first photo appear

	

	images[currentPhoto].style.display = 'inline';
	spans[currentPhoto].style.display = 'inline';

// Add the link before the text 

	var  linkName  = document.createElement("a");
	var linkText = document.createTextNode('Next');
	linkName.appendChild(linkText);
	linkName.setAttribute('href', '#');
	
	
	var linkBack = document.createElement("a");
	var linkBackText = document.createTextNode('Previous');
	linkBack.appendChild(linkBackText);
	linkBack.setAttribute('href', '#');
	
// Add in the ID's that style the buttons
	
	linkBack.id = "backlink";
	linkName.id = "forwardlink";
	
	
//	spans[currentPhoto].appendChild(linkName);

	var linkSrc = gallery.insertBefore(linkName, spans[currentPhoto]);
	var linkBackSrc = gallery.insertBefore(linkBack, linkSrc);
// Call the second function

	linkName.onclick = function() {
		
	// Make current items disappear	
		
		images[currentPhoto].style.display = 'none';
		spans[currentPhoto].style.display = 'none';
//		spans[currentPhoto].removeChild(linkName);
		gallery.removeChild(linkSrc);
		gallery.removeChild(linkBackSrc);
		functionThree(); 
	}
	
	linkBackSrc.onclick = function() {
		images[currentPhoto].style.display = 'none';
		spans[currentPhoto].style.display = 'none';
		gallery.removeChild(linkSrc);
		gallery.removeChild(linkBackSrc);
		functionFour();
	}
	

}

function functionThree() {

	var gallery = document.getElementById("photoGallery");
	var images = gallery.getElementsByTagName("img");
	var spans = gallery.getElementsByTagName("span");

// add to the variable

	currentPhoto++;
	
	
	
	if (currentPhoto >= 11) {
		currentPhoto = 0;	
	}


// call second function again

	functionTwo();

}

function functionFour() {

	var gallery = document.getElementById("photoGallery");
	var images = gallery.getElementsByTagName("img");
	var spans = gallery.getElementsByTagName("span");

// Subtract from the variable

	currentPhoto = currentPhoto - 1;
	
	
	
	if (currentPhoto < 0) {
		currentPhoto = 10;	
	}


// call second function again

	functionTwo();

}