// plirkGallery
// by John Holland
// created 20070810

/* **********************************************

The script uses two predefined DIV elements, plirkGalleryThumb and plirkGalleryFull, to display content in.  
plirkGalleryThumb will have the table of clickable thumbnails and plirkGalleryFull will recive the full size image
selected from the thumbnails.  It will overwrite any existing content in the two DIVs.

HTML Example
<div id="plirkGalleryThumb">loading...</div>
<div id="plirkGalleryFull">select a thumbnail above...</div>

CSS can be applied to:
div#plirkGalleryThumb
div#plirkGalleryFull
div#plirkGalleryFullComment
table.plirkGalleryThumbTable
	td, tr, td.plirkGalleryAdvance, a, img
img.plirkGalleryFullImg


Images and thumbnails need to be pre-created.  The list of immages to use are defined in 
the pGimages array, and it needs to be defined like: pGimages[x] = new plirkGalleryImageInfo(name, height, width, comment);

For Example:
pGimages[0] = new pGimageInfo('gallery-01.jpg', '325', '244', 'pic1 comment');
pGimages[1] = new pGimageInfo('gallery-02.jpg', '325', '244', 'pic2 comment');
pGimages[2] = new pGimageInfo('gallery-03.jpg', '325', '244', 'pic3 comment');
pGimages[3] = new pGimageInfo('gallery-04.jpg', '244', '325', 'pic4 comment');
pGimages[4] = new pGimageInfo('gallery-05.jpg', '244', '325', 'pic5 comment');



The window.onload function should be something like:

window.onload = function () {
  plirkGalleryCreateThumbBlock(picNum);			// display the initial thumbnail block of images
  plirkGalleryShowImage(picNum);			// display a particular image	(optional)
  plirkGalleryPreloadImage(picNum);			// preload full version of picNum-1 and picNum+1
};
  

***************************************************** */


// Some defaults.  File that includes script might override
var pGimages = new Array();
var pGimagePath = 'images/';
var pGthumbNum = 4;
var pGthumbPath = pGimagePath + 'thumbnails/';
var pGimages = new Array();
var pGimagePre1 = new Image();
var pGimagePre2 = new Image();



function pGimageInfo(url, height, width, caption)
{
  this.url = url;
  this.height = height;
  this.width = width;
  this.caption = caption;
}

function pGmaxIndex() {
  return pGimages.length - 1;
}

function plirkGalleryCreateThumbBlock(start) {
  var output = null;
  var thumbnail = null;
  var step = 0;

  output  = '<form>';
  output += '<table class="plirkGalleryThumbTable">';

  step = start-pGthumbNum;
  if (start > 0) {
    output += '<td class="plirkGalleryAdvance"><input value="&lt;&lt;" onclick="plirkGalleryCreateThumbBlock(' + step + ');" type="button" /></td>';
  } else {
    output += '<td class="plirkGalleryAdvance"><input value="&lt;&lt;" type="button" disabled /></td>';
  }

  for (var i=0;i<pGthumbNum;i++) { 

    if ( ( start + i ) <= pGmaxIndex() ) {				// check we are not past our num of images
      thumbnail = '<img src="' + pGthumbPath + pGimages[start+i].url + '" />';
      output += '<td>' + getThumbImageLink(thumbnail, start+i) + '</td>';
    } else {
      output += '<td>&nbsp;</td>';
    }

  }

  step = (start+pGthumbNum);
  if ( step < pGmaxIndex() ) {
    output += '<td class="plirkGalleryAdvance"><input value="&gt;&gt;" onclick="plirkGalleryCreateThumbBlock(' + step + ');" type="button" /></td>';
  } else {
    output += '<td class="plirkGalleryAdvance"><input value="&gt;&gt;" type="button" disabled /></td>';
  }

  output += '</tr>';
  output += '</table>';
  output += '</form>';

  displayThumb(output);
 
}

function plirkGalleryPreloadImage(index) {
  if (index > 0)  {
    pGimagePre1.src = pGimagePath + pGimages[index-1].url;
  }
  if (index < pGmaxIndex())  {
    pGimagePre2.src = pGimagePath + pGimages[index+1].url;
  }
}

function plirkGalleryShowImage(index) {
  var output = null;

  output = '<img class="plirkGalleryFullImg" src="' + pGimagePath + pGimages[index].url + '" />';

  output += '<div id="plirkGalleryFullComment">';
  if (pGimages[index].caption != '') {
    output += '<p>Comment: ' + pGimages[index].caption + '</p>';
  }
  output += '</div>';

  pGdisplayFull(output);

  plirkGalleryPreloadImage(index);

}

// Outputs directly to the "window" div
function displayThumb(output) {
	document.getElementById("plirkGalleryThumb").innerHTML = output;
}

function pGdisplayFull(output) {
	document.getElementById("plirkGalleryFull").innerHTML = output;
}


// Create a link for the user to click on which blows up an image
function getThumbImageLink ( title, index ) {
	link = 'plirkGalleryShowImage(' + index + '); return false;';
	return '<a href="#" onclick="' + link + '">' + title + '</a>';
}