function changePhoto(imagepath){//Preload new images
var newimage = document.getElementById("main-photo");

var tmpimage = new Image();

newimage.src="images/loading.gif"; //show loading animation

tmpimage.onload = function(){
newimage.src=tmpimage.src;
}

newimage.src=imagepath;
}



function insertPhoto(imagepath,id){ //Display the first photo

	var treeImg = document.createElement("img"); //Create the large image
	treeImg.id = "main-photo";




	var newContent = document.createElement("div"); //Create new <div>
	newContent.id = "photo-place";
	newContent.appendChild(treeImg); //insert the tree photo into this <div>
	var wall = document.getElementById("enlargeimage"); //wall is where we "hang" the image
	wall.innerHTML = "";
	wall.appendChild(newContent); //insert this code into the HTML
	var tmpimage = changePhoto(imagepath); //Preload the first image, default is 1

	var oldid = tempid;
	tempid = id;
	if (oldid != tempid)
	{	
		element = document.getElementById('img'+id);
		element.setAttribute("status",1);
		testing2();
	}
}



Event.observe(window, 'load', testing, false);



function testing()
{

	$$("a.chgopacity").each(function(oBox){
			var oLinkImg = oBox.down('img');
			if ('img'+tempid != oBox.id)
				new Effect.Opacity(oLinkImg, {duration:0, from:1.0, to:0.5});
			else
				oBox.setAttribute("status",1);
				
			Event.observe(oBox, 'mouseover', function() {
				oBox.setAttribute("status",1);
				new Effect.Opacity(oLinkImg, {duration:0, from:0.5, to:1.0})				
			});
			Event.observe(oBox, 'mouseout', function() {
				//if ('img'+tempid != oBox.id) 
				//	new Effect.Opacity(oLinkImg, {duration:0, from:1.0, to:0.5})
				//oBox.setAttribute("status",0);
				testing2();
			});
	});
}

function testing2()
{
	$$("a.chgopacity").each(function(oBox){
		var oLinkImg = oBox.down('img');
		
		if ('img'+tempid != oBox.id) 
		{
		
			if (oBox.getAttribute("status") == 1)
			{
				oBox.setAttribute("status",0);
				new Effect.Opacity(oLinkImg, {duration:0.5, from:1.0, to:0.5});
				
			}
			
		}
				
	});
}