/**
This script is based on the image gallery script in Jeremy Keith's DOM scripting book:

http://domscripting.com/book/

The difference here is to use classes instead of ids so that more than one image gallery can be placed on a page. Of course, there may be simpler ways of doing this...

***
Setup:

UL list of pictures should have a class of "piclist."

Each gallery "piclist" on a page should be contained in a div with the class of "gallery."

Captions are optional, but the "p" element for a caption should have a class of "description."

Finally, the placeholder image should have a class of "placeholder."

*If no placeholder image is supplied, one is created from the first image in the piclist UL list if possible.

**/

addLoadEvent(appClick);
addLoadEvent(prepareGallery);

function appClick() {
if(!document.getElementsByTagName) {
return false;
}
if(!document.getElementById) {
return false;
}
var theLists = document.getElementsByTagName('ul');
for (var index=0; index< theLists.length; index++) {
var aList = theLists[index];
if(aList.className == 'piclist'){
var theAnchors = aList.getElementsByTagName('a');
setLinks(theAnchors);
}
  }
 }

function setLinks(a) {
for (var index=0; index< a.length; index++) {
a[index].onclick = function() {
      return showPic(this);
}
  }
}

function prepareGallery() {
if(!document.getElementsByTagName) {
return false;
}
if(!document.getElementById) {
return false;
}
var theLists = document.getElementsByTagName('ul');
for (var index=0; index< theLists.length; index++) {
var aList = theLists[index];
if(aList.className == 'piclist'){
setEls(aList);
}
  }
}

function setEls(g) {
var galPar = g.parentNode;

if(galPar.className !='gallery') {
return false;
}

var testP = getElementsByClassName(galPar, 'description');
var testImg = getElementsByClassName(galPar, 'placeholder');

if(testImg.length < 1) {
image = false;
var newImg = document.createElement('img');
var newImgA = g.getElementsByTagName('a')[0];
newImg.src = newImgA.href;
newImgA.className = 'current';
if(newImgA.title){
newImg.setAttribute('alt', newImgA.title);
}


newImg.className = 'placeholder';
} else {
image = true;
}

if(testP.length < 1){
description = false;
} else {
description = true;
var exP = testP[0];
}

if (!description && !image) {
galPar.insertBefore(newImg, g);
}

if (!image && description) {
galPar.insertBefore(newImg, exP);
}
  }


function showPic (whichpic) {
if (document.getElementById && document.getElementsByTagName) {
var theLink = whichpic.href;
var picList = whichpic.parentNode.parentNode;
var picGal = picList.parentNode;
var mainPic = getElementsByClassName(picGal, 'placeholder')[0];
var desc = getElementsByClassName(picGal, 'description');

if(desc.length < 1){
desc = false;
} else {
desc = true;
var description = getElementsByClassName(picGal, 'description')[0];
}

if(picGal.className != 'gallery') {
return true;
}
var theseURLs = picGal.getElementsByTagName('a');
//For current image style in the pick list:
for (var index=0; index< theseURLs.length; index++)
{
var aURL = theseURLs[index];
if(aURL.href == theLink ) {
var changeThis = aURL;
changeThis.className = "curpic";
} else {
aURL.className = "slides";
}
  }
mainPic.src = whichpic.href;

if (desc && whichpic.title) {
description.childNodes[0].nodeValue = whichpic.title;
} else {
if(desc){
description.childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
   }
 }
return false;
} else {
return true;
  }
}

  function  getElementsByClassName(thisDiv, name) {
  var results = new Array();
  var elems = thisDiv.getElementsByTagName("*");
  for (var i=0; i<elems.length; i++) {
    if (elems[i].className.indexOf(name) != -1) {
      results[results.length] = elems[i];
    }
  }
  return results;
}