var j;
var z;
var dir;
var totalThumbs=0;
var count=0;
var imageArray = new Array();


	// initiate app
function thumbnails(di, img)
{
	dir=di;
	totalThumbs=img;
	j=totalThumbs-1;
	while(count<5)
	{
		generateThumb();
	}
	reset();
	document.getElementById("gal").style.display = "block";
	document.getElementById("galHead").style.display = "none";
	document.getElementById("galMenu").style.display = "none";
}

	// create thumbnails
function generateThumb()
{
	var thumb = document.createElement("img");
	thumb.id = "thumb"+j;
	thumb.className = "thumbnail";
	thumb.src = dir+j+".png";
	thumb.alt = j;
	thumb.onclick = function() { select(this) };
	thumb.onmouseover = function() { thumbOver(this) };
	thumb.onmouseout = function() { thumbOut(this) };
	document.getElementById("thumbs").appendChild(thumb);
	imageArray[count]=thumb;
	if(j==totalThumbs)
	{
		j=1;
	}
	else
	{
		j++;
	}
	count++;
}


	//gallery control
function browse(dir)
{
	count=0;
	document.getElementById("thumbs").innerHTML="";
	j=imageArray[0].alt;
	if(dir=="r")
	{
		if(j==totalThumbs)
		{
			j=1;
		}
		else
		{
			j++;
		}
	}
	if(dir=="l")
	{
		if(j==1)
		{
			j=totalThumbs;
		}
		else
		{
			j--;
		}
	}
	while(count<5)
	{
		generateThumb();
	}
	document.getElementById("main").src = imageArray[2].src;
	document.getElementById(imageArray[2].getAttribute("id")).style.backgroundColor = "#D3D3D3";
}


	// thumbnail events
function select(el)
{
	j=el.getAttribute("alt");
	if(j==1)
	{
		j=totalThumbs-1;
	}
	else if(j==2)
	{
		j=totalThumbs;
	}
	else
	{
		j=j-2;
	}
	count=0;
	document.getElementById("thumbs").innerHTML="";
	while(count<5)
	{
		generateThumb();
	}
	document.getElementById("main").src = imageArray[2].src;
	document.getElementById(imageArray[2].getAttribute("id")).style.backgroundColor = "#D3D3D3";
}

function thumbOver(el)
{
	var t=el.getAttribute("id");
	document.getElementById(t).style.borderColor = "#ffff00";
}

function thumbOut(el)
{
	var t=el.getAttribute("id");
	document.getElementById(t).style.borderColor = "#ffffff";
}

	// error handler
function galError()
{
	var c = alert("Apologies, there has been an error in loading the next picture." + '\n' + "You will now be returned to the gallery selection page.");
	reset();
}

function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
  {
  document.write("You pressed OK!");
  }
else
  {
  document.write("You pressed Cancel!");
  }
}


	// reset
function reset()
{
	count=0;
	document.getElementById("thumbs").innerHTML="";
	j=totalThumbs-1;
	while(count<5)
	{
		generateThumb();
	}
	document.getElementById("main").src = imageArray[2].src;
	document.getElementById(imageArray[2].getAttribute("id")).style.backgroundColor = "#D3D3D3";
	back();
}

	// return to gallery list
function back()
{
	document.getElementById("gal").style.display = "none";
	document.getElementById("galHead").style.display = "block";
	document.getElementById("galMenu").style.display = "block";
	stop();
}

	// slideshow controls
function start()
{
	browse("r");
	document.getElementById("slideshow").innerHTML = "Slideshow: click to stop";
	document.getElementById("slideshow").onclick = function() { stop() };
	z=setTimeout("start()", 3500);
}

function stop()
{
	document.getElementById("slideshow").innerHTML = "Slideshow: click to start";
	document.getElementById("slideshow").onclick = function() { start() };
	clearTimeout(z);
}

	// folder functions
function folderOver(el)
{
	var t=el.getAttribute("i");
	document.getElementById(t).src = "images/galIcon_over.png";
}

function folderOut(el)
{
	var t=el.getAttribute("i");
	document.getElementById(t).src = "images/galIcon.png";
}