var selectedImage = 0;

function showImage(i)
{
  selectedImage = i;
  var imageWindow = window.open("imageviewer.htm", "imagewindow", "height=770,width=760,resizable=yes");
  imageWindow.focus();
}

if(metadata)
{
  var thumbnails = "<table width=\"70%\" align=\"left\" cellpadding=\"8px\" border=\"0\"><tr><td colspan=\"4\" align=\"center\"><br><p style=\"font: bold 10px verdana, arial, helvetica, sans; color: #852F25; text-transform: uppercase;\"><b>Missing House Models</b></p></td></tr>";
  var thumbnails2 = "";
  for(var i = 0; i < metadata.length+1; i+=2)
  {
	  if(i <= 1) {
	if(metadata[i])
		thumbnails += "<tr><td><img src=\"skidegate/tb/" + metadata[i][0] + "\" alt=\"\" border=\"0\"  onclick=\"showImage(" + i + ")\" onmouseover=\"this.className='hover';\"><div class=\"photoCaption\" style=\"width:100px; text-align:left;\">" + metadata[i][2] +"</div></td>";
	if(metadata[i+1])
		thumbnails += "<td><img src=\"skidegate/tb/" + metadata[i+1][0] + "\" alt=\"\" border=\"0\"  onclick=\"showImage(" + (i+1) + ")\" onmouseover=\"this.className='hover';\"><div class=\"photoCaption\" style=\"width:100px; text-align:left;\">" + metadata[i+1][2] +"</div></td>";
	  } else {
		thumbnails += "</table>";
		thumbnails2 += "<table width=\"70%\" cellpadding=\"8px\" border=\"0\">";
		if(metadata[i])
		thumbnails2 += "<tr><td><img src=\"skidegate/tb/" + metadata[i][0] + "\" alt=\"\" border=\"0\"  onclick=\"showImage(" + i + ")\" onmouseover=\"this.className='hover';\"><div class=\"photoCaption\" style=\"width:100px; text-align:left;\">" + metadata[i][2] +"</div></td>";
		if(metadata[i+1])
		thumbnails2 += "<td><img src=\"skidegate/tb/" + metadata[i+1][0] + "\" alt=\"\" border=\"0\"  onclick=\"showImage(" + (i+1) + ")\" onmouseover=\"this.className='hover';\"><div class=\"photoCaption\" style=\"width:100px; text-align:left;\">" + metadata[i+1][2] +"</div></td>";
		if(metadata[i+2])
		thumbnails2 += "<td><img src=\"skidegate/tb/" + metadata[i+2][0] + "\" alt=\"\" border=\"0\"  onclick=\"showImage(" + (i+2) + ")\" onmouseover=\"this.className='hover';\"><div class=\"photoCaption\" style=\"width:100px; text-align:left;\">" + metadata[i+2][2] +"</div></td>";
		if(metadata[i+3])
		thumbnails2 += "<td><img src=\"skidegate/tb/" + metadata[i+3][0] + "\" alt=\"\" border=\"0\"  onclick=\"showImage(" + (i+3) + ")\" onmouseover=\"this.className='hover';\"><div class=\"photoCaption\" style=\"width:100px; text-align:left;\">" + metadata[i+3][2] +"</div></td>";
		if(metadata[i+4])
		thumbnails2 += "<td><img src=\"skidegate/tb/" + metadata[i+4][0] + "\" alt=\"\" border=\"0\"  onclick=\"showImage(" + (i+4) + ")\" onmouseover=\"this.className='hover';\"><div class=\"photoCaption\" style=\"width:100px; text-align:left;\">" + metadata[i+4][2] +"</div></td>";
		if(metadata[i+5])
		thumbnails2 += "<td><img src=\"skidegate/tb/" + metadata[i+5][0] + "\" alt=\"\" border=\"0\"  onclick=\"showImage(" + (i+5) + ")\" onmouseover=\"this.className='hover';\"><div class=\"photoCaption\" style=\"width:100px; text-align:left;\">" + metadata[i+5][2] +"</div></td>";
		i+=4;
	  }
	//if(metadata[i+2])
		//thumbnails += "<td><img src=\"skidegate/tb/" + metadata[i+2][0] + "\" alt=\"\" border=\"0\"  onclick=\"showImage(" + (i+2) + ")\" onmouseover=\"this.className='hover';\"><div class=\"photoCaption\" style=\"width:100px; text-align:left;\">" + metadata[i+2][2] +"</div></td>";
	//if(metadata[i+3])
		//thumbnails += "<td><img src=\"skidegate/tb/" + metadata[i+3][0] + "\" alt=\"\" border=\"0\"  onclick=\"showImage(" + (i+3) + ")\" onmouseover=\"this.className='hover';\"><div class=\"photoCaption\" style=\"width:100px; text-align:left;\">" + metadata[i+3][2] +"</div></td>";
		
  }
  var to = (i+1) % 4;
  for(var z = 0; z < to; z++) {
	//thumbnails += "<td>&nbsp;</td>";
  }

  thumbnails += "</tr></table>";
  thumbnails2 += "</tr></table>";
  document.getElementById("thumbnails").innerHTML = thumbnails;
  document.getElementById("thumbnails2").innerHTML = thumbnails2;
}