//////////////////////////////////  1 IMAGE - WITH TEXT  ///////////////////////////////////////////


function changeCaption(index){
	
	var caption = document.getElementById("caption");
	caption.innerHTML = captions[index];
	caption.style.visibility = "";
	
}


function createImage(index){

	var theSrc = "images/";
	var holder = document.getElementById("picture");
	var content = ""
	
	
	content += "<img src=\"images/" + images[index] + ".jpg\" height=490 width=700 border=0 style='border: solid 1px; border-color: #999999;'>"
	
	holder.innerHTML = content;
	holder.style.display = "";
	
}


function getPage(index){

	// create image
	createImage(index);
	
	
	// build arrows
	var dirSize = eval(images.length);
	
	var holder = document.getElementById("arrows");
	
	
	var content = ""
	if (index == 0){
	
		content += "<a href=\"javascript:getPage('1');\">&gt;</a>"
	
	}
	
	else if (index == Number(dirSize-1) ){
			var prevPage = Number(dirSize-2);
		content += "<a href=\"javascript:getPage('" + prevPage + "');\">&lt;</a>"
		content += " &nbsp; &nbsp; &nbsp; "
		content += "<a href=page2.html>&gt;</a>"
	}
	
	else {
	
		var prev = Number(index) - 1;
		var next = Number(index) + 1;
	
		content += "<a href=\"javascript:getPage('" + prev + "');\">&lt;</a>"
		content += " &nbsp; &nbsp; &nbsp; "
		content += "<a href=\"javascript:getPage('" + next + "');\">&gt;</a>"
		
	}
	
	holder.innerHTML = content;
	holder.style.display = "block";	
	changeCaption(index);
	
}

function getPage2(index){

	// create image
	createImage(index);
	
	
	// build arrows
	var dirSize = eval(images.length);
	
	var holder = document.getElementById("arrows");
	
	
	var content = ""
	if (index == 0){
	
		content += "<a href=index.html>&lt;</a>"
		content += " &nbsp; &nbsp; &nbsp; "
		content += "<a href=\"javascript:getPage2('1');\">&gt;</a>"
	
	}
	
	else if (index == Number(dirSize-1) ){
			var prevPage = Number(dirSize-2);
		content += "<a href=\"javascript:getPage2('" + prevPage + "');\">&lt;</a>"
		content += " &nbsp; &nbsp; &nbsp; "
		content += "<a href=page3.html>&gt;</a>"
	}
	
	else {
	
		var prev = Number(index) - 1;
		var next = Number(index) + 1;
	
		content += "<a href=\"javascript:getPage2('" + prev + "');\">&lt;</a>"
		content += " &nbsp; &nbsp; &nbsp; "
		content += "<a href=\"javascript:getPage2('" + next + "');\">&gt;</a>"
		
	}
	
	holder.innerHTML = content;
	holder.style.display = "block";	
	changeCaption(index);
	
}

function getPage3(index){

	// create image
	createImage(index);
	
	
	// build arrows
	var dirSize = eval(images.length);
	
	var holder = document.getElementById("arrows");
	
	
	var content = ""
	if (index == 0){
	
		content += "<a href=page2.html>&lt;</a>"
		content += " &nbsp; &nbsp; &nbsp; "
		content += "<a href=\"javascript:getPage3('1');\">&gt;</a>"
	
	}
	
	else if (index == Number(dirSize-1) ){
			var prevPage = Number(dirSize-2);
		content += "<a href=\"javascript:getPage3('" + prevPage + "');\">&lt;</a>"
		content += "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"
	}
	
	else {
	
		var prev = Number(index) - 1;
		var next = Number(index) + 1;
	
		content += "<a href=\"javascript:getPage3('" + prev + "');\">&lt;</a>"
		content += " &nbsp; &nbsp; &nbsp; "
		content += "<a href=\"javascript:getPage3('" + next + "');\">&gt;</a>"
		
	}
	
	holder.innerHTML = content;
	holder.style.display = "block";	
	changeCaption(index);
	
}