var thumbsRect;
var thumb_current = null;

//--------------------------------------------------------------------------------------------------------------------------------------------------------
function on_body_load()
{
	thumbsRect = document.getElementById("thumbs");
	create_thumbs();
	
	var firstThumb = thumbsRect.childNodes[1];
	var firstEvent = { target:firstThumb };
	on_thumb_click(firstEvent);
}


//--------------------------------------------------------------------------------------------------------------------------------------------------------
function create_thumbs()
{
	for (var i=0; i<gallery_images.length; i++)
	{
		var img = gallery_images[i];
		if (img.substring(0,8)=="section:")
		{
			create_section( img.substring( 8 ));
		}
		else
		{
			var comment = "";
			var sepIndex = img.indexOf(":");
			if (sepIndex > 0)
			{
				comment = img.substring(sepIndex+1);
				img = img.substring(0,sepIndex);
			}
			create_thumb( img, comment );
		}
	}
}


//--------------------------------------------------------------------------------------------------------------------------------------------------------
function create_section(name)
{
	var div = document.createElement("DIV");
	div.className = "section";
	
	var txt = document.createTextNode(name);
	div.appendChild(txt);
	
	thumbsRect.appendChild( div );
}


//--------------------------------------------------------------------------------------------------------------------------------------------------------
function create_thumb(name,comment)
{
	var div = document.createElement("IMG");
	div.className = "thumb";
	div.src = name+"_thumb.jpg";
	div.title = name+"_thumb.jpg";
	div.thumbname = name;
	div.thumbcomment = comment;
	thumbsRect.appendChild( div );

	div.onclick = on_thumb_click;	
	div.onmouseover = on_thumb_over;	
	div.onmouseout = on_thumb_out;	
}


//--------------------------------------------------------------------------------------------------------------------------------------------------------
function on_thumb_click(event)
{
	var evt = event || window.event;
	var targ = evt.target || evt.srcElement;

	var div = document.createElement("IMG");
	div.className = "image";
	div.src = targ.thumbname+".jpg";
	div.title = targ.thumbcomment;

	var imgRect = document.getElementById("image");
	if (imgRect.childNodes.length > 0)
	{
		imgRect.removeChild( imgRect.childNodes[0] );
	}
	
	imgRect.appendChild( div );
	
	if (thumb_current != null)
	{	
		thumb_current.className = "thumb";
	}
	thumb_current = targ;
	thumb_current.className = "thumb_current";
}


//--------------------------------------------------------------------------------------------------------------------------------------------------------
function on_thumb_over(event)
{
	var evt = event || window.event;
	var targ = evt.target || evt.srcElement;

	targ.className = "thumb_over";
	
}


//--------------------------------------------------------------------------------------------------------------------------------------------------------
function on_thumb_out(event)
{
	var evt = event || window.event;
	var targ = evt.target || evt.srcElement;

	if (targ == thumb_current)
	{
		targ.className = "thumb_current";
	}
	else
	{	
		targ.className = "thumb";
	}
	
}