window.onload = slideshowinit;

function slideshowinit() {
	index=0;
	var imageContainer = document.getElementById("imageContainer");
	var currentImage = imageContainer.getElementsByTagName("img");
	
	//Finds the arrow link and attach the functionality
	var portfolioArrows = document.getElementById("portfolioArrows");
	var arrowLinks = portfolioArrows.getElementsByTagName("a");
	arrowLinks[0].onclick = changePhotograph;
	arrowLinks[1].onclick = changePhotograph;
	
	//Finds the individual links to assign the functionality
	var linkContainer = document.getElementById("linkContainer");
	var currentLink = linkContainer.getElementsByTagName("a");	
	var counter = currentLink.length;
	for(linkindex=0; linkindex<counter; linkindex++){
		currentLink[linkindex].onclick = linkPhotograph;
	}	
}

function changePhotograph(){
	var increment = this.title;//The title is being used to increment or decrement
	var imageContainer = document.getElementById("imageHere");//finds the main image location
	var currentImage = imageContainer.getElementsByTagName("img");//gets the actual image 
	var currentImageHeight = currentImage[0].height;
	var currentImageWidth = currentImage[0].width;
	

	var linkContainer = document.getElementById("linkContainer");//finds the link group
	var currentLink = linkContainer.getElementsByTagName("a");	//finds the link
	var lengthCurrentLink = currentLink.length;//Gets the length of the links array 
	if(index ==0 && increment == -1){//Resets the index to highest items when decrementing
		index= lengthCurrentLink;
	}
	if(index ==lengthCurrentLink && increment == 1){//Resets the index to highest items when decrementing
		index= 0;
	}		
	index = index + Number(increment);
	if(index ==lengthCurrentLink && increment == 1){//Resets the index to lowest item when incrementing
		index= 0;
	}		
	currentImage[0].src = currentLink[index].href;	//sets the image to the current index in the array
	return false;
}

//This works fine. Brings up correct image where it's supposed to. Just need to change the css to reflect where it is
function linkPhotograph(){
	var imageContainer = document.getElementById("imageHere");//finds the div where the image placeholder is
	var currentImage = imageContainer.getElementsByTagName("img");	//finds the actual image placeholder
	currentImage[0].src = this.href;//Moves this link's href into the image placeholder
	index = Number(this.title);//Gives the current number of the image into the index to be used in other functions
	return false;
}