// images.js

// display the thumbs on a grid
function finishedLoading()
{
	var totalImages = 8;
	var imageToLoad = 1;
	
	var startTable = "<table>";
	var startRow = "<tr height=\"120\">";
	var endRow = "</tr>";
	var startData = "<td width=\"160\">";
	var endData = "</td>";
	var endTable = "</table>";
	
	var data = "";
	
	// works out if new row is needed
	for(var i=0; i<(totalImages/4); i++)
	{
		// writes first row
		data += startRow;
		// works out the cells needed in the grid
		for(var j=0; j<4; j++)
		{
			// writes  first cell
			data += startData;
			// loads in the image that should go in the cell
			if(imageToLoad <= totalImages)
			{
				// need to add onClick data
				var newImg = "<img src=\"res/imggallery/thumb" + imageToLoad + ".jpg\" alt=\"image" + imageToLoad + "\" width=\"160\" height=\"120\" id=\"image" + imageToLoad + "\" onClick=\"enlargeImage(\'image" + imageToLoad + "\')\" />"
				data += newImg;
				imageToLoad++;
			}
			else
			{
				data += "&nbsp;";
			}
			data += endData;
		}
		data += endRow;
	
	}

	
	var newTable = startTable + data + endTable;
	document.getElementById('imageGrid').innerHTML = newTable;
}

// need to make an array of the big numbers so that only the big numbers can be clicked
var imgBig = 0;
var scalebyX = 320;
var scalebyY = 240;

function enlargeImage(imageNumber)
{
	makeLayer('bgWhite', 'imgFG', imageNumber);
}

// makeLayer(ID,left,top,width,height,color,visible,zIndex)
function makeLayer(id, id2, imageNumber)
{
 if (document.getElementById)
 {
  if (document.getElementById(id))
	{
   alert ('Layer with this ID already exists!');
   return
  }
	
	var ST = 'position: absolute'
	+'; left: 0'
	+'; top: 0'
	+'; width: 100%'
	+'; height: 100%'
	+'; clip: rect(0px, 100%, 100%, 0px)'
	+'; background-color: black'
	+'; opacity: 0.5'
	+'; z-index: 10'
	+';';

	var imgST = 'position: absolute'
	+'; left: 0'
	+'; top: 0'
	+'; width: 100%'
	+'; height: 100%'
	+'; z-index: 20'
	+';';
	
	var topTable = '<table width="100%" height="100%" border="0"><tr align="center"><td valign="middle">';
	var botTable = '</td></tr></table>';
	var imageToLoad = '<img src="res/imggallery/'+imageNumber+'.jpg" alt='+imageNumber+' onClick="deleteLayer()" />';
	var imgPos = topTable + imageToLoad + botTable;

  var LR = '<div id='+id+' style="'+ST+'"></div>';
	var imgLR = '<div id='+id2+' style="'+imgST+'">' + imgPos + '</div>';

  if (document.body)
	{
   if (document.body.insertAdjacentHTML)
	 {
		 document.body.insertAdjacentHTML("BeforeEnd",LR);
		 document.body.insertAdjacentHTML("BeforeEnd",imgLR);
	 }
   else if (document.createElement && document.body.appendChild)
	 {
    var newNode = document.createElement('div');
    newNode.setAttribute('id',id);
    newNode.setAttribute('style',ST);
    document.body.appendChild(newNode);
		
		var newNode2 = document.createElement('div');
    newNode2.setAttribute('id',id2);
    newNode2.setAttribute('style',imgST);			
		document.body.appendChild(newNode2);
		
		// creates the image to load
		//newImage = document.createTextNode(imageToLoad);
		//document.getElementById(id2).appendChild(newImage);
		newImage = document.createTextNode(imgLR);
		document.getElementById(id2).innerHTML = newImage.textContent;

		//alert("Sorry but there has been a problem, please try using another internet browser");
   }
  }
 }
}

function deleteLayer()
{
  var olddiv = document.getElementById('bgWhite');
  document.body.removeChild(olddiv);
	 var olddiv = document.getElementById('imgFG');
  document.body.removeChild(olddiv);
}