var selectedImage = 1;
var selectedCategory = 1;
var resetColor = "#999999";
var highlightColor = "#cccccc";
var contactShown = false;

function ShowCategory(whatCategory){

	var oldLayer = document.getElementById("thetext" + selectedCategory);
	var newLayer = document.getElementById("thetext" + whatCategory);
	var arrayIndex = 0;

	oldLayer.style.display = "none";
	newLayer.style.display = "block";
	
	selectedCategory = parseInt(whatCategory);
	
	for (var x = 0; x < imageCategory.length - 1; x ++){
		if (parseInt(imageCategory[x]) == parseInt(selectedCategory)){
			arrayIndex = x;
			break;
		}
	}
	
	ShowImage(imageID[arrayIndex]);
	
}

function ShowImage(whatImage){

	var arrayIndex = 0
	var theCategory = "";
	var theName = "";
	var theLink = "";
	var imageDiv = document.getElementById("thepicture");
	var contactDiv = document.getElementById("thecontact");
	var newImage = new Image();
	var oldLink;
	var newLink;
	
	for (var x = 0; x < imageID.length - 1; x ++){
		if (parseInt(imageID[x]) == parseInt(whatImage)){
			arrayIndex = x;
			break;
		}
	}
	
	theCategory = imageCategory[arrayIndex];
	theName = imageName[arrayIndex];
	theLink = imageLink[arrayIndex];

	if (imageDiv.style.display == "none"){
		imageDiv.style.display = "block";
		contactDiv.style.display = "none";
	}
	
	newImage.src = "images/" + theLink;
	document.images["theimage"].src = newImage.src;
	
	if (selectedImage != 0){
		oldLink = document.getElementById("link_" + selectedImage);
		oldLink.style.color = resetColor;
	}
	
	selectedImage = parseInt(whatImage);
	
	newLink = document.getElementById("link_" + selectedImage);
	newLink.style.color = highlightColor;
	
}

function ShowContact(){

	var imageDiv = document.getElementById("thepicture");
	var contactDiv = document.getElementById("thecontact");
	var oldLink;

	if (contactShown == false){
	
		if (selectedImage != 0){
			oldLink = document.getElementById("link_" + selectedImage);
			oldLink.style.color = resetColor;
		}
		
		imageDiv.style.display = "none";
		contactDiv.style.display = "block";
		
		contactShown = true;
		
	}
	
	else {
	
		if (selectedImage != 0){
			oldLink = document.getElementById("link_" + selectedImage);
			oldLink.style.color = highlightColor;
		}
		
		imageDiv.style.display = "block";
		contactDiv.style.display = "none";	
		
		contactShown = false;
	
	}
	
	
	
}