/****************************************************************************
* Lucky Marble Photo Gallery
*
* Developed by Lucky Marble Solutions
* Copyright © 2006 Lucky Marble Solutiosn Corp - All rights reserved
* Last Modified: May 9, 2006
*
* Use of this script requires you provide a link back to our website:
*  www.i3dthemes.com
*  link code: <a href="http://www.i3dthemes.com">FrontPage Templates</a>
*
*****************************************************************************/

// PhotoGallery CONSTRUCTOR
function PhotoGallery() {
  this.attributes    = new Array();
  this.readyToRender = false;
  this.xmlHtmlDoc = "";
  // set up default configurations
  this.setAttribute('configFile', PageQueryItem('gallery'));
  if (PageQueryItem('theme') != "") {
    this.setAttribute('theme', PageQueryItem('theme'));
  } else {
    this.setAttribute('theme', 'original');
  }
  
  this.setAttribute('layout', '0');
  
  // gallery page defaults
  this.setAttribute('imgWidth', 100);
  this.setAttribute('imgHeight', 80);
  this.setAttribute('imagesPerPage', 10);
  this.setAttribute('page', PageQueryItem('page'));

  // image viewer defaults
  this.setAttribute('img', parseInt(PageQueryItem("img")));
  this.setAttribute('totalMiniThumbs', 8);
  this.setAttribute('miniThumbWidth', 75);
  this.setAttribute('miniThumbHeight', 60);
  this.setAttribute('miniThumbSpace', 2);
  
  this.loadLayoutFile();
}

PhotoGallery.prototype.getLayoutValue = function(xmlHtmlDoc, layoutID, tagName) {
  var myLayouts = xmlHtmlDoc.getElementsByTagName("layout");
  
  for (i = 0; i < myLayouts.length; i++) {
    currentLayout = myLayouts[i];
    myLayoutsChildren = myLayouts[i].childNodes;
    for (j = 0; j < myLayoutsChildren.length; j++) {
  
      if (myLayoutsChildren[j].nodeName == "id") {
        if (myLayoutsChildren[j].firstChild.nodeValue == layoutID) {
                   
          return this.getLayoutItemValue(myLayoutsChildren, tagName);
        }
        
      }
    }
  }
  return null;
  
}

PhotoGallery.prototype.getLayoutItemValue = function(myLayoutsChildren, tagName) {
  for (k = 0; k < myLayoutsChildren.length; k++) {

    if (myLayoutsChildren[k].nodeName == tagName) {
      
      return myLayoutsChildren[k].firstChild.nodeValue;
    }
  }
  return null;
}

// PhotoGallery Render Gallery
// Purpose: initiates the loading of the XML file passing a boolean declaring
//          that this is the gallery page
// Given: none
// Returns: none
PhotoGallery.prototype.renderGallery = function() {

  if (this.readyToRender == true) {
  
    var objectParamsID = this.getAttribute("objectParams");
    var objectParams = document.getElementById(objectParamsID).childNodes;
  
    for (i = 0; i < objectParams.length; i++) {
      this.setAttribute(objectParams[i].name, objectParams[i].value);
    }
    
    this.setAttribute("configFile", "photo-gallery/config/" + this.getAttribute("configFile"));
    
    var myHTML = this.getLayoutValue(this.xmlHtmlDoc, this.getAttribute("layout"), "galleryHtmlCode");
    
       
    objectBlock   = document.getElementById(this.getAttribute("objectParams"))
    objectBlock.style.display = "none";
        
    var containerNode = document.createElement("div");
    containerNode.innerHTML = myHTML;
    
    
    objectBlock.parentNode.appendChild(containerNode);
    this.loadConfigFile(true);
  } else {
     setTimeout('pg.renderGallery()', 1000);
   }
}

// PhotoGallery Render Image
// Purpose: initiates the loading of the XML file passing a boolean declaring
//          that this not a gallery page
// Given: none
// Returns: none
PhotoGallery.prototype.renderImage = function() {


  var objectParamsID = this.getAttribute("objectParams");
  var objectParams = document.getElementById(objectParamsID).childNodes;

  for (i = 0; i < objectParams.length; i++) {
    if (objectParams[i].name != "theme" && PageQueryItem("theme") != "") {
      this.setAttribute(objectParams[i].name, objectParams[i].value);
    }
  }


  this.loadConfigFile(false);
}

// PhotoGallery Set Attribute
// Purpose: stores a passed in value in a global associative array
// Given: name - name of the attribute (used to later reference the attribute)
//        value - value to be storeed
// Returns: none
PhotoGallery.prototype.setAttribute = function(name, value) {
	this.attributes[name] = value;
}

// PhotoGallery Get Attribute
// Purpose: retrieves attribute for given name from global associative array
// Given: name - name of the attribute to be returned
// Returns: value that is stored in the array for given name
PhotoGallery.prototype.getAttribute = function(name) {
	return this.attributes[name];
}


PhotoGallery.prototype.loadLayoutFile = function() {
  var myObj = this;
		if (window.location.href.indexOf("photo-gallery") > -1) {
					sourceLocationModifier = "../";
	  } else {
				  sourceLocationModifier = "";
  }


	if (document.implementation && document.implementation.createDocument) {
	  this.xmlHtmlDoc = document.implementation.createDocument("", "", null);
	
	  
	  this.xmlHtmlDoc.onload = function () {
			myObj.readyToRender = true;
		}
	} else if (window.ActiveXObject) {
	  this.xmlHtmlDoc = new ActiveXObject("Microsoft.XMLDOM");
	  this.xmlHtmlDoc.onreadystatechange = function() {
			if (myObj.xmlHtmlDoc.readyState == 4) {
			  myObj.readyToRender = true;
			}
		};
	} else  {
	  alert('Your browser can\'t render this photo gallery.');
	  return;
	}
  this.xmlHtmlDoc.load(sourceLocationModifier + "photo-gallery/layouts.xml");

}
// PhotoGallery Load Config File
// Purpose: initiates the loading of the XML configuration file and invokes
//          the rendering of the gallery or image viewer
// Given: renderGallery - true/false - true=render gallery/false=render image
// Returns: none
PhotoGallery.prototype.loadConfigFile = function(renderPhotoGallery) {
    
	var myObj = this;
	var linkTag = document.createElement("link");
	linkTag.setAttribute("rel", "stylesheet");
	linkTag.setAttribute("type", "text/css");
	linkTag.setAttribute("id", "galleryStylingLink");
	var galleryRenderCommand = this.getLayoutValue(this.xmlHtmlDoc, this.getAttribute("layout"), "galleryRenderCommand");
		if (window.location.href.indexOf("photo-gallery") > -1) {
					sourceLocationModifier = "../";
	  } else {
				  sourceLocationModifier = "";
  }
	linkTag.setAttribute("href", sourceLocationModifier + "photo-gallery/themes/" + this.getAttribute('theme') + "/photo-gallery.css");
  var galleryContainer = document.getElementById("galleryStyling");
  
  galleryContainer.appendChild(linkTag);

	if (document.implementation && document.implementation.createDocument) {
	  this.xmlDoc = document.implementation.createDocument("", "", null);
	
	  
	  this.xmlDoc.onload = function () {
			if (renderPhotoGallery == true) {
				eval(galleryRenderCommand);
			
			} else {
				myObj.displayImage();
			}
	  }
	} else if (window.ActiveXObject) {
	  this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
	  this.xmlDoc.onreadystatechange = function() {
			if (myObj.xmlDoc.readyState == 4) {
				if (renderPhotoGallery == true) {
				  eval(galleryRenderCommand);
					//myObj.displayGallery();
				} else {

					myObj.displayImage();
			  }
			}
		};
	} else  {
	  alert('Your browser can\'t render this photo gallery.');
	  return;
	}
  
  this.xmlDoc.load(sourceLocationModifier + this.getAttribute('configFile'));
}


// PhotoGallery Display Image
// Purpose: renders all aspects of the image viewer page
// Given: none
// Returns: none
PhotoGallery.prototype.displayImage = function() {
  // hide the active-x object block
  document.getElementById(this.getAttribute("objectParams")).style.display = "none";

  // determine if the gallery is within the photo-gallery folder
	if (window.location.href.indexOf("photo-gallery") > -1) {
		sourceLocationModifier = "../";
	} else {
		sourceLocationModifier = "";
	}
	
	var xmlDoc          = this.xmlDoc;
	var targetTagID     = this.getAttribute('targetTagID');
  var x               = xmlDoc.getElementsByTagName('image');
  var myImage         = document.createElement("IMG");
  var imageID         = this.getAttribute("img");



  /** RENDER LARGE IMAGE **/
  thisImageLargeSrc = x[imageID].getElementsByTagName("location");
	if (thisImageLargeSrc.length > 0) {
		myImage.setAttribute("src", sourceLocationModifier+ thisImageLargeSrc[0].firstChild.nodeValue);
	} else {
	  myImage.setAttribute("src", sourceLocationModifier + "photo-gallery/images/system/no-image.png");
	}

  myImage.setAttribute('className', 'mainImage');
  myImage.setAttribute('class', 'mainImage');

  if (this.getAttribute("imagePreviewWidth") != undefined) {
    myImage.setAttribute('width', this.getAttribute("imagePreviewWidth"));
  }


  if (this.getAttribute("imagePreviewHeight") != undefined) {
		myImage.setAttribute('height', this.getAttribute("imagePreviewHeight"));
  }

  /** RENDER GALLERY DETAILS (name, author, last updated) **/
  var galleryDetails = xmlDoc.getElementsByTagName('details');

  if (galleryDetails[0] != null) {
	  var allGalleryInfo = galleryDetails[0].getElementsByTagName("info");
	  for (i = 0; i < allGalleryInfo.length; i++) {
			nodeID          = allGalleryInfo[i].getAttribute("id");
			if (allGalleryInfo[i].firstChild != null) {
  			nodeValue       = allGalleryInfo[i].firstChild.nodeValue;
  			destinationNode = document.getElementById(nodeID);

  			if (nodeID == "lastUpdated") {
  				nodeValue = "(" + nodeValue + ")";
  		  }

  			if (destinationNode != null) {
  			  document.getElementById(nodeID).innerHTML = nodeValue;
  		  }
		  }
		}
  }
  document.getElementById(targetTagID).innerHTML = "";
  document.getElementById(targetTagID).appendChild(myImage);

  document.getElementById("imagePosition").innerHTML    = "Image " + (imageID+1) + " of " + (x.length);

  /** RENDER IMAGE DETAILS **/
  mainImageTitle       = x[imageID].getElementsByTagName('title');
  mainImageDescription = x[imageID].getElementsByTagName('description');

  if (mainImageTitle.length > 0 && mainImageTitle[0].firstChild != null) {
		document.getElementById("imageTitle").innerHTML       = mainImageTitle[0].firstChild.nodeValue + " - ";
  } else {
		document.getElementById("imageTitle").innerHTML = "";
  }

  if (mainImageDescription.length > 0 && mainImageDescription[0].firstChild != null) {
	  document.getElementById("imageDescription").innerHTML = mainImageDescription[0].firstChild.nodeValue;
	} else {
		document.getElementById("imageDescription").innerHTML = "";
  }


  // build nav buttons
   buttons = document.createElement("table");
   buttons.setAttribute("cellPadding", 0);
   buttons.setAttribute("cellSpacing", 0);

   buttonTableBody = document.createElement("tbody");

   buttonRow = document.createElement("tr");

   buttonBbg = document.createElement("td");
   buttonNbg = document.createElement("td");
   spacerCell = document.createElement("td");

   buttonB = document.createElement("IMG");
   buttonN = document.createElement("IMG");

   buttonLink1 = document.createElement("A");
   buttonLink2 = document.createElement("A");



  if (imageID == 0) {
		previousImageID = x.length - 1;
  } else {
		previousImageID = imageID - 1;
  }

  if (imageID == x.length - 1) {
		nextImageID = 0;
	} else {
		nextImageID = imageID + 1;
  }


  buttonBbg.setAttribute("className", "backButton");
  buttonNbg.setAttribute("className", "nextButton");

  buttonBbg.setAttribute("class", "backButton");
  buttonNbg.setAttribute("class", "nextButton");

  buttonLink1.setAttribute("href", 'javascript:pg.setAttribute("img", ' + previousImageID + '); pg.displayImage();');
  buttonLink2.setAttribute("href", 'javascript:pg.setAttribute("img", ' + nextImageID + '); pg.displayImage();');


  buttonB.setAttribute("src", sourceLocationModifier + "photo-gallery/images/system/transparent.gif");
  buttonN.setAttribute("src", sourceLocationModifier + "photo-gallery/images/system/transparent.gif");
  buttonB.setAttribute("className", "backButton");
  buttonN.setAttribute("className", "nextButton");
  buttonB.setAttribute("class", "backButton");
  buttonN.setAttribute("class", "nextButton");

  buttonB.setAttribute("border", 0);
  buttonN.setAttribute("border", 0);

  buttonLink1.appendChild(buttonB);
  buttonLink2.appendChild(buttonN);

  buttonBbg.appendChild(buttonLink1);
  buttonNbg.appendChild(buttonLink2);

  spacerCell.setAttribute("className", "spacerCell");
  spacerCell.setAttribute("class", "spacerCell");

  buttonRow.appendChild(buttonBbg);
  buttonRow.appendChild(spacerCell);
  buttonRow.appendChild(buttonNbg);
  buttonTableBody.appendChild(buttonRow);
  buttons.appendChild(buttonTableBody);

  document.getElementById("navButtons").innerHTML = "";
  document.getElementById("navButtons").appendChild(buttons);
  startPosition = imageID - 2;
  position = startPosition;
  totalMiniThumbs = this.getAttribute("totalMiniThumbs");
  miniThumbWidth = this.getAttribute("miniThumbWidth");
  miniThumbHeight = this.getAttribute("miniThumbHeight");
  miniThumbSpace  = this.getAttribute("miniThumbSpace");
  document.getElementById("navThumbs").innerHTML = "";

  // build thumbnail navigation
  while (position < totalMiniThumbs + startPosition) {
   if (position < 0) {
			displayPosition = x.length + position;
		} else if (position >= x.length) {
			displayPosition = position - x.length;
	  } else {
	    displayPosition = position;
	  }

    var thisThumbContainer = document.createElement("DIV");
		var thisThumb          = document.createElement("IMG");

    thisThumb.setAttribute("src", sourceLocationModifier + this.getThumbSRC(displayPosition));
    thisThumb.setAttribute("border", 0);

		thisThumb.setAttribute("width", miniThumbWidth);
		thisThumb.setAttribute("height", miniThumbHeight);

		thisThumbContainer.setAttribute("className", "miniThumbContainer");
		thisThumbContainer.setAttribute("class",     "miniThumbContainer");

		var thisThumbLink = document.createElement("A");
		thisThumbLink.setAttribute("href", 'javascript:pg.setAttribute("img", ' + displayPosition + '); pg.displayImage();');

		if (position == imageID) {
      thisThumb.setAttribute("className", "miniThumb_selected");
      thisThumb.setAttribute("class", "miniThumb_selected");
	  } else {
      thisThumb.setAttribute("className", "miniThumb_regular");
      thisThumb.setAttribute("class", "miniThumb_regular");
	  }

		thisThumbLink.appendChild(thisThumb);
		thisThumbContainer.appendChild(thisThumbLink);

		document.getElementById("navThumbs").appendChild(thisThumbContainer);
		document.getElementById("navThumbs").appendChild(document.createTextNode(" "));

    position++;
  }
}

// PhotoGallery Display Image
// Purpose: renders all aspects of the image viewer page
// Given: none
// Returns: none
PhotoGallery.prototype.displaySlideShow = function() {
  // hide the active-x object block
  document.getElementById(this.getAttribute("objectParams")).style.display = "none";

    // determine if the gallery is within the photo-gallery folder
	if (window.location.href.indexOf("photo-gallery") > -1) {
		sourceLocationModifier = "../";
	} else {
		sourceLocationModifier = "";
	}
	
	var xmlDoc          = this.xmlDoc;
	var targetTagID     = this.getAttribute('targetTagID');
  var x               = xmlDoc.getElementsByTagName('image');
  var myImage         = document.createElement("IMG");
  var imageID         = this.getAttribute("img");
  
  if (imageID == "" || imageID == null || imageID == "undefined" || isNaN(imageID)) {
    imageID = 0;
    this.setAttribute("imagePosition", 0);
  }
 
 
  /** RENDER LARGE IMAGE **/
  thisImageLargeSrc = x[imageID].getElementsByTagName("location");
	if (thisImageLargeSrc.length > 0) {
		myImage.setAttribute("src", sourceLocationModifier+ thisImageLargeSrc[0].firstChild.nodeValue);
	} else {
	  myImage.setAttribute("src", sourceLocationModifier + "photo-gallery/images/system/no-image.png");
	}

  myImage.setAttribute('className', 'mainImage');
  myImage.setAttribute('class', 'mainImage');

  if (this.getAttribute("imagePreviewWidth") != undefined) {
    myImage.setAttribute('width', this.getAttribute("imagePreviewWidth"));
  }


  if (this.getAttribute("imagePreviewHeight") != undefined) {
		myImage.setAttribute('height', this.getAttribute("imagePreviewHeight"));
  }

  /** RENDER GALLERY DETAILS (name, author, last updated) **/
  var galleryDetails = xmlDoc.getElementsByTagName('details');

  if (galleryDetails[0] != null) {
	  var allGalleryInfo = galleryDetails[0].getElementsByTagName("info");
	  for (i = 0; i < allGalleryInfo.length; i++) {
			nodeID          = allGalleryInfo[i].getAttribute("id");
			if (allGalleryInfo[i].firstChild != null) {
  			nodeValue       = allGalleryInfo[i].firstChild.nodeValue;
  			destinationNode = document.getElementById(nodeID);

  			if (nodeID == "lastUpdated") {
  				nodeValue = "(" + nodeValue + ")";
  		  }

  			if (destinationNode != null) {
  			  document.getElementById(nodeID).innerHTML = nodeValue;
  		  }
		  }
		}
  }
  
  document.getElementById(targetTagID).innerHTML = "";
  document.getElementById(targetTagID).appendChild(myImage);

  document.getElementById("imagePosition").innerHTML    = "Image " + (imageID+1) + " of " + (x.length);

  /** RENDER IMAGE DETAILS **/
  mainImageTitle       = x[imageID].getElementsByTagName('title');
  mainImageDescription = x[imageID].getElementsByTagName('description');

  if (mainImageTitle.length > 0 && mainImageTitle[0].firstChild != null) {
		document.getElementById("imageTitle").innerHTML       = mainImageTitle[0].firstChild.nodeValue + " - ";
  } else {
		document.getElementById("imageTitle").innerHTML = "";
  }

  if (mainImageDescription.length > 0 && mainImageDescription[0].firstChild != null) {
	  document.getElementById("imageDescription").innerHTML = mainImageDescription[0].firstChild.nodeValue;
	} else {
		document.getElementById("imageDescription").innerHTML = "";
  }


  // build nav buttons
   buttons = document.createElement("table");
   buttons.setAttribute("cellPadding", 0);
   buttons.setAttribute("cellSpacing", 0);

   buttonTableBody = document.createElement("tbody");

   buttonRow = document.createElement("tr");

   buttonBbg = document.createElement("td");
   buttonNbg = document.createElement("td");
   spacerCell = document.createElement("td");

   buttonB = document.createElement("IMG");
   buttonN = document.createElement("IMG");

   buttonLink1 = document.createElement("A");
   buttonLink2 = document.createElement("A");



  if (imageID == 0) {
		previousImageID = x.length - 1;
  } else {
		previousImageID = imageID - 1;
  }

  if (imageID == x.length - 1) {
		nextImageID = 0;
	} else {
		nextImageID = imageID + 1;
  }


  buttonBbg.setAttribute("className", "backButton");
  buttonNbg.setAttribute("className", "nextButton");

  buttonBbg.setAttribute("class", "backButton");
  buttonNbg.setAttribute("class", "nextButton");

  buttonLink1.setAttribute("href", 'javascript:pg.setAttribute("img", ' + previousImageID + '); pg.displayImage();');
  buttonLink2.setAttribute("href", 'javascript:pg.setAttribute("img", ' + nextImageID + '); pg.displayImage();');


  buttonB.setAttribute("src", sourceLocationModifier + "photo-gallery/images/system/transparent.gif");
  buttonN.setAttribute("src", sourceLocationModifier + "photo-gallery/images/system/transparent.gif");
  buttonB.setAttribute("className", "backButton");
  buttonN.setAttribute("className", "nextButton");
  buttonB.setAttribute("class", "backButton");
  buttonN.setAttribute("class", "nextButton");

  buttonB.setAttribute("border", 0);
  buttonN.setAttribute("border", 0);

  buttonLink1.appendChild(buttonB);
  buttonLink2.appendChild(buttonN);

  buttonBbg.appendChild(buttonLink1);
  buttonNbg.appendChild(buttonLink2);

  spacerCell.setAttribute("className", "spacerCell");
  spacerCell.setAttribute("class", "spacerCell");

  buttonRow.appendChild(buttonBbg);
  buttonRow.appendChild(spacerCell);
  buttonRow.appendChild(buttonNbg);
  buttonTableBody.appendChild(buttonRow);
  buttons.appendChild(buttonTableBody);

  document.getElementById("navButtons").innerHTML = "";
  document.getElementById("navButtons").appendChild(buttons);
  startPosition = imageID - 2;
  position = startPosition;
  totalMiniThumbs = this.getAttribute("totalMiniThumbs");
  miniThumbWidth = this.getAttribute("miniThumbWidth");
  miniThumbHeight = this.getAttribute("miniThumbHeight");
  miniThumbSpace  = this.getAttribute("miniThumbSpace");
  document.getElementById("navThumbs").innerHTML = "";

  // build thumbnail navigation
  while (position < totalMiniThumbs + startPosition) {
   if (position < 0) {
			displayPosition = x.length + position;
		} else if (position >= x.length) {
			displayPosition = position - x.length;
	  } else {
	    displayPosition = position;
	  }

    var thisThumbContainer = document.createElement("DIV");
		var thisThumb          = document.createElement("IMG");

    thisThumb.setAttribute("src", sourceLocationModifier + this.getThumbSRC(displayPosition));
    thisThumb.setAttribute("border", 0);

		thisThumb.setAttribute("width", miniThumbWidth);
		thisThumb.setAttribute("height", miniThumbHeight);

		thisThumbContainer.setAttribute("className", "miniThumbContainer");
		thisThumbContainer.setAttribute("class",     "miniThumbContainer");

		var thisThumbLink = document.createElement("A");
		thisThumbLink.setAttribute("href", 'javascript:pg.setAttribute("img", ' + displayPosition + '); pg.displayImage();');

		if (position == imageID) {
      thisThumb.setAttribute("className", "miniThumb_selected");
      thisThumb.setAttribute("class", "miniThumb_selected");
	  } else {
      thisThumb.setAttribute("className", "miniThumb_regular");
      thisThumb.setAttribute("class", "miniThumb_regular");
	  }

		thisThumbLink.appendChild(thisThumb);
		thisThumbContainer.appendChild(thisThumbLink);

		document.getElementById("navThumbs").appendChild(thisThumbContainer);
		document.getElementById("navThumbs").appendChild(document.createTextNode(" "));

    position++;
  }

}



// PhotoGallery Get Thumb Source
// Purpose: gets the relative URI for the smaller thumbnail of the given image position
// Given: displayPosition - int - index position of image to reference
// Returns: relative URI of the thumbnail
PhotoGallery.prototype.getThumbSRC = function(displayPosition) {
	var x = this.xmlDoc.getElementsByTagName('image');

	var thisImageThumbSrc = x[displayPosition].getElementsByTagName("thumbnail");
	var thisImageLargeSrc = x[displayPosition].getElementsByTagName("location");
	var thumbSource = "";

	if (thisImageThumbSrc.length > 0 && thisImageThumbSrc[0].firstChild != null) {
		thumbSource = thisImageThumbSrc[0].firstChild.nodeValue;
	} else {
		if (thisImageLargeSrc.length > 0 && thisImageLargeSrc[0].firstChild != null) {
			thumbSource = thisImageLargeSrc[0].firstChild.nodeValue;
		} else {
			thumbSource = "photo-gallery/images/system/no-image.png";
		}
	}

	return thumbSource;
}

// PhotoGallery Display Gallery
// Purpose: renders all aspects of the photo gallery
// Given: none
// Returns: none
PhotoGallery.prototype.displayGallery = function() {
  // hide active-x object block
 

	xmlDoc        = this.xmlDoc;
	targetTagID   = this.getAttribute('targetTagID');
	imgDefaultWidth      = this.getAttribute('imgWidth');
	imgDefaultHeight     = this.getAttribute('imgHeight');
	imagesPerPage = this.getAttribute('imagesPerPage');
	page          = this.getAttribute('page');

	
	
	
	document.getElementById(targetTagID).innerHTML = "";
	
	document.getElementById("galleryNavigation").innerHTML = "";
	
	if (this.getAttribute("imageViewer").indexOf("photo-gallery") > -1) {
				sourceLocationModifier = "../";
  } else {
			  sourceLocationModifier = "";
	}

  var x = xmlDoc.getElementsByTagName('image');

  if (page == 'false') {
    page = 0;
  }
  

  var navTable = document.createElement("TABLE");
  var navTBody = document.createElement("TBODY");
  var navTRow  = document.createElement("TR");
  navTable.setAttribute("cellSpacing", 0);
  navTable.setAttribute("cellPadding", 0);
  navTable.setAttribute("width", "100%");

  //set up first navigation cell
  // gallery name/author

  // set up middle navigation cell
	// set up pages quick links
  var pageLinkCell = document.createElement("TD");
  pageLinkCell.appendChild(document.createTextNode("Page: "));
	for (i = 0; i < Math.ceil(x.length/imagesPerPage); i++) {
		var pageLink = document.createElement('A');

		pageLink.setAttribute('href', 'javascript:pg.setAttribute("page", ' + i + '); pg.displayGallery();');

		if (page == i) {
			var pageLinkSpan = document.createElement("SPAN");
			var pageLinkText = document.createTextNode("[" + (i+1) + "]");
      pageLinkSpan.setAttribute("className", "pageLink");
      pageLinkSpan.setAttribute("class", "pageLink");
      pageLinkSpan.appendChild(pageLinkText);
			pageLinkCell.appendChild(pageLinkSpan);
		} else {
			var pageLinkText = document.createTextNode(i+1);
			pageLink.appendChild(pageLinkText);
			pageLinkCell.appendChild(pageLink);
		}
    pageLink.setAttribute("className", "pageLink");
    pageLink.setAttribute("class", "pageLink");
    pageLinkCell.appendChild(document.createTextNode("   "));

  }
  navTRow.appendChild(pageLinkCell);
  // set up left navigation cell (back/next buttons)

  var navButtonCell = document.createElement("TD");
  navButtonCell.setAttribute("align", "right");

  navButtonTable = document.createElement("table");
  navButtonTBody = document.createElement("tbody");
  navButtonTRow  = document.createElement("tr");

  navButtonTable.setAttribute("cellSpacing", 0);
  navButtonTable.setAttribute("cellPadding", 0);
  navButtonTable.setAttribute("className", "galleryNavTableIE");
  navButtonTable.setAttribute("class", "galleryNavTable");

  // set up "back" link
  if (page > 0) {

    var backCell = document.createElement("td");
    backCell.setAttribute("className", "backButton");
    backCell.setAttribute("class", "backButton");
    var backLink = document.createElement('A');
    backLink.setAttribute('href', 'javascript:pg.setAttribute("page", ' + (parseInt(page)-1) + '); pg.displayGallery();');

    var backLinkButton = document.createElement('IMG')
    backLinkButton.setAttribute('src', 'photo-gallery/images/system/transparent.gif');
    backLinkButton.setAttribute('border', 0);

    backLink.appendChild(backLinkButton);
    backCell.appendChild(backLink);
    navButtonTRow.appendChild(backCell);
  }


  // set up "next" link
  var displayNextButton = x.length > imagesPerPage * (parseInt(page)+1)
  if ((page == 0 && displayNextButton) || displayNextButton) {
		var spacerCell = document.createElement("td");
		spacerCell.setAttribute("className", "spacerCell");
		spacerCell.setAttribute("class", "spacerCell");
    navButtonTRow.appendChild(spacerCell);

    var nextCell = document.createElement("td");
    nextCell.setAttribute("className", "nextButton");
    nextCell.setAttribute("class", "nextButton");

    var nextLink = document.createElement('A');
    nextLink.setAttribute('href', 'javascript:pg.setAttribute("page", ' + (parseInt(page)+1) + '); pg.displayGallery();');

    var nextLinkButton = document.createElement('IMG')
    nextLinkButton.setAttribute('src', 'photo-gallery/images/system/transparent.gif');
    nextLinkButton.setAttribute('border', 0);
    nextLink.appendChild(nextLinkButton);

    nextCell.appendChild(nextLink);
    navButtonTRow.appendChild(nextCell);

  }

  navButtonTBody.appendChild(navButtonTRow);
  navButtonTable.appendChild(navButtonTBody);
  navButtonCell.appendChild(navButtonTable);
  navTRow.appendChild(navButtonCell);
  navTBody.appendChild(navTRow);
  navTable.appendChild(navTBody);
  document.getElementById("galleryNavigation").appendChild(navTable);



  // build thumbnails for photo gallery
  var myResultsPerPageLimit = parseInt(page * imagesPerPage) + parseInt(imagesPerPage);
  var myImageHTMLTemp = this.getLayoutValue(this.xmlHtmlDoc, this.getAttribute("layout"), "imageHtmlCode");
 
  for (i=page*imagesPerPage; i<x.length && i < myResultsPerPageLimit ; i++) {
    thisImageWidth = x[i].getElementsByTagName("width")[0].firstChild.nodeValue;
    thisImageHeight = x[i].getElementsByTagName("height")[0].firstChild.nodeValue;
    maintainAspectRatio = x[i].getElementsByTagName("maintainAspectRatio")[0].firstChild.nodeValue;
    aspectRatio = x[i].getElementsByTagName("aspectRatio")[0].firstChild.nodeValue;
    
    
    if (thisImageWidth == "default") {
      thisImageWidth = imgDefaultWidth;
      thisImageHeight = thisImageWidth * aspectRatio;
    } else {
      
    }
    
    var myImageHTML = myImageHTMLTemp;
    
    myImageHTML = myImageHTML.replace('[ImageSource]', this.getThumbSRC(i));
    myImageHTML = myImageHTML.replace('[ImageWidth]', thisImageWidth);
   
    myImageHTML = myImageHTML.replace('[ImageHeight]', thisImageHeight);
    myImageHTML = myImageHTML.replace('[ConfigFile]', this.getAttribute("configFile"));
    myImageHTML = myImageHTML.replace('[GalleryTheme]', this.getAttribute("theme"));
    myImageHTML = myImageHTML.replace('[ImageNumber]', i);
    myImageHTML = myImageHTML.replace('[ImageViewer]', this.getAttribute("imageViewer"));
    
    var newEl = document.createElement('DIV');
    newEl.innerHTML = myImageHTML;
    document.getElementById(targetTagID).appendChild(newEl);
  }
}

/***************************************
* HELPER FUNCTIONS
***************************************/

// Page Query
// Purpose: parses the HTML page's query string
// Given: page's URI
// Returns: an array of name/value pairs
function PageQuery(q) {
  if(q.length > 1) this.q = q.substring(1, q.length);
  else this.q = null;

  this.keyValuePairs = new Array();

  if(q) {
    for(var i=0; i < this.q.split("&").length; i++) {
      this.keyValuePairs[i] = this.q.split("&")[i];
    }
  }

  this.getKeyValuePairs = function() { return this.keyValuePairs; }
  this.getValue = function(s) {

    for(var j=0; j < this.keyValuePairs.length; j++) {
      if(this.keyValuePairs[j].split("=")[0] == s)
        return this.keyValuePairs[j].split("=")[1];
    }
    return false;
  }

  this.getParameters = function() {
    var a = new Array(this.getLength());
    for(var j=0; j < this.keyValuePairs.length; j++) {
      a[j] = this.keyValuePairs[j].split("=")[0];
    }
    return a;
  }

  this.getLength = function() { return this.keyValuePairs.length; }
}

// PageQueryItem
// Purpose: retrieves the value for a given parameter of the page's querystring
// Given: key - name of the parameter to be returned
// Returns: value of the parameter
function PageQueryItem(key){
  var page = new PageQuery(window.location.search);
  return unescape(page.getValue(key));
}