var JaS = {
          // Customization parameters
          imagePath : "pictures/",
          images : [
                  ["1.jpg", "Bat bridge in Austin", "Bridge"],
                  ["2.jpg", "Blossoming tree", "Tree"],
                  ["3.jpg", "Bat bridge from below", "Bridge"],
                  ["4.jpg", "Birds", "Birds"],
                  ["5.jpg", "Stevie Ray Vaughan Memorial", "Memorial"],
                  ["6.jpg", "Me in river park", "River park"],
                  ["7.jpg", "Woode Wood playing guitar", "Woode Wood, River park"], // Separate multiple tags by a comma
                  ["8.jpg", "Woode's sign", "Woode Wood"]
          ],
          fadeContainerId : "jas-container",
          imageContainerId : "jas-image",
          imageTextContainerId : "jas-image-text",
          previousLinkId : "previous-image",
          nextLinkId : "next-image",
          imageCounterId : "image-counter",
          startSlideShowId : "start-slideshow",
          stopSlideShowId : "stop-slideshow",
          thumbnailContainerId: "jas-thumbnails",
          tagsContainerId: "jas-tags",
          tagsSelectAllId: "jas-select-all-tags",
          useImageText : true,
          useThumbnails : true,
          useTags : true,
          useKeyboardShortcuts : true,
          useFadingIn : true,
          useFadingOut : true,
          useFadeWhenNotSlideshow : false,
          useFadeForSlideshow : true,
          useFadeAtInitialLoad : false,
          fadeIncrement : 0.1,
          fadeInterval : 100, // Milliseconds
          timeForSlideInSlideshow : 1500, // Milliseconds
  
          // JaS function parameters
          allImages : null,
          currentImages : null,
          fadeContainer : null,
          imageContainer : null,
          imageTextContainer : null,
          previousLink : null,
          nextLink : null,
          imageCounter : null,
          startSlideShowLink : null,
          stopSlideShowLink : null,
          thumbnailContainer : null,
          thumbnailCollection : [],
          currentThumbnailSelected : null,
          tagsContainer : null,
          tagsSelectAll : null,
          tagsList : null,
          tags : [],
          tagsCheckboxes : [],
          selectAllTags : true,
          imageText : null,
          imageText : "",
          imageSource : "",
          imageIndex : 0,
          fadingIn : true,
          fadeLevel : 0,
          fadeEndLevel : 1,
          fadeTimer : null,
          hasOpacitySupport : false,
          useMSFilter : false,
          useMSCurrentStyle : false,
          slideshowIsSupported : false,
          slideshowIsPlaying : false,
          functionAfterFade : null,
          isInitialLoad : false,
  
          init : function (){
              if(document.getElementById){
                          this.fadeContainer = document.getElementById(this.fadeContainerId);
                          this.imageContainer = document.getElementById(this.imageContainerId);
                          this.slideshowIsSupported = this.fadeContainer && this.imageContainer;
                          if(this.slideshowIsSupported){
                                  this.allImages = this.images;
                                  this.currentImages = this.images;
                                  if(this.useImageText){
                                          this.imageTextContainer = document.getElementById(this.imageTextContainerId);
                                          if(!this.imageTextContainer){
                                                  this.useImageText = false;
                                          }
                                  }
                                  this.hasOpacitySupport = typeof this.fadeContainer.style.filter != "undefined" || typeof this.fadeContainer.style.opacity != "undefined";
                                  this.useMSFilter = typeof this.fadeContainer.style.filter != "undefined";
                                  this.useMSCurrentStyle = typeof this.fadeContainer.currentStyle != "undefined";
  
                                  this.previousLink = document.getElementById(this.previousLinkId);
                                  this.previousLink.onclick = function(oEvent){
                                          var oEvent = (typeof oEvent != "undefined")? oEvent : event;
                                          JaS.preventDefaultEventBehavior(oEvent);
                                          JaS.previousImage();
                                  };
                                  this.nextLink = document.getElementById(this.nextLinkId);
                                  this.nextLink.onclick = function(oEvent){
                                          var oEvent = (typeof oEvent != "undefined")? oEvent : event;
                                          JaS.preventDefaultEventBehavior(oEvent);
                                          JaS.nextImage();
                                  };
                                  this.imageCounter = document.getElementById(this.imageCounterId);
                                  this.startSlideShowLink = document.getElementById(this.startSlideShowId);
                                  if(this.startSlideShowLink){
                                          this.startSlideShowLink.style.display = "inline";
                                  }
                                  this.startSlideShowLink.onclick = function(oEvent){
                                          var oEvent = (typeof oEvent != "undefined")? oEvent : event;
                                          JaS.preventDefaultEventBehavior(oEvent);
                                          JaS.startSlideshow();
                                  };
                                  this.stopSlideShowLink = document.getElementById(this.stopSlideShowId);
                                  if(this.stopSlideShowLink){
                                          this.stopSlideShowLink.style.display = "none";
                                  }
                                  this.stopSlideShowLink.onclick = function(oEvent){
                                          var oEvent = (typeof oEvent != "undefined")? oEvent : event;
                                          JaS.preventDefaultEventBehavior(oEvent);
                                          JaS.stopSlideshow();
                                  };
  
                                  if(this.useKeyboardShortcuts){
                                          document.onkeydown = function(oEvent){
                                                  var oEvent = (typeof oEvent != "undefined")? oEvent : event;
                                                  JaS.applyKeyboardNavigation(oEvent);
                                          };
                                  }
  
                                  this.thumbnailContainer = document.getElementById(this.thumbnailContainerId);
                                  if(this.useThumbnails && this.thumbnailContainer){
                                          this.createThumbnails();
                                  }
  
                                  this.tagsContainer = document.getElementById(this.tagsContainerId);
                                  if(this.useTags && this.tagsContainer){
                                          this.tagsSelectAll = document.getElementById(this.tagsSelectAllId);
                                          if(this.tagsSelectAll){
                                                  this.tagsSelectAll.onclick = function (oEvent){
                                                          JaS.tagsSelectAll = this.checked;
                                                          JaS.markAllTags();
                                                  };
                                                  this.createTagList();
                                          }
                                  }
  
                                  this.isInitialLoad = true;
                                  this.setImage();
                                  this.isInitialLoad = false;
                          }
                  }
          },
  
          setImage : function (){
                  if(this.currentImages.length > 0){
                          this.imageContainer.style.visibility = "visible";
                          this.imageSource = this.currentImages[this.imageIndex][0];
                          this.imageText = this.currentImages[this.imageIndex][1];
                          if(this.useFadingOut && (this.slideshowIsPlaying && this.useFadeForSlideshow) || (!this.slideshowIsPlaying && this.useFadeWhenNotSlideshow) && (this.useFadeAtInitialLoad && this.isInitialLoad || !this.isInitialLoad)){
                                  this.fadeOut();
                          }
                          else{
                                  this.displayImageCount();
                                  this.imageContainer.setAttribute("src", (this.imagePath + this.imageSource));
                                  this.setImageText();
                                  this.previousLink.style.visibility = (this.imageIndex > 0)? "visible" : "hidden";
                                  this.nextLink.style.visibility = (this.imageIndex < (this.currentImages.length - 1))? "visible" : "hidden";
                                  if((this.useFadeAtInitialLoad && this.isInitialLoad || !this.isInitialLoad) && ((this.slideshowIsPlaying && this.useFadeForSlideshow) || (!this.slideshowIsPlaying && this.useFadeWhenNotSlideshow))){
                                          this.fadeIn();
                                  }
                          }
                          if(this.useThumbnails){
                                  this.markCurrentThumbnail();
                          }
                  }
                  else{
                          this.imageSource = "";
                          this.imageText = "";
                          this.displayImageCount();
                          this.imageContainer.style.visibility = "hidden";
                          this.setImageText();
                  }
          },
  
          displayImageCount : function (){
              if(this.imageCounter){
                          this.imageCounter.innerHTML = (((this.currentImages.length > 0)? this.imageIndex : -1) + 1) + " / " + this.currentImages.length;
                  }
          },
  
          nextImage : function (){
                  if(this.imageIndex < (this.currentImages.length - 1)){
                          ++this.imageIndex;
                          this.setImage();
                  }
                  else if(this.slideshowIsPlaying){
                          this.stopSlideshow();
                          this.imageIndex = 0;
                          this.setImage();
                  }
          },
  
          previousImage : function (){
                  if(this.imageIndex > 0){
                          --this.imageIndex;
                          this.setImage();
                  }
          },
  
          setImageText : function (){
                  this.imageTextContainer.setAttribute("alt", this.imageText);
              if(this.useImageText && typeof this.imageText == "string"){
                          this.imageTextContainer.innerHTML = this.imageText;
                  }
          },
  
          startSlideshow : function (){
                  if(this.currentImages.length > 0){
                          this.startSlideShowLink.style.display = "none";
                          this.stopSlideShowLink.style.display = "inline";
                          this.slideshowIsPlaying = true;
                          this.fadeTimer = setTimeout("JaS.nextImage()", JaS.timeForSlideInSlideshow);
                  }
          },
  
          stopSlideshow : function (){
                  if(this.currentImages.length > 0){
                          this.startSlideShowLink.style.display = "inline";
                          this.stopSlideShowLink.style.display = "none";
                          this.slideshowIsPlaying = false;
                          this.setFadeParams(false, 1, 0);
                          this.setFade();
                          clearTimeout(this.fadeTimer);
                  }
          },
  
          fadeIn : function (){
                  this.setFadeParams(true, 0, 1);
                  this.functionAfterFade = null;
                  this.fade();
                  if(this.slideshowIsPlaying){
                          this.functionAfterFade = "this.startSlideshow()";
                  }
          },
  
          fadeOut : function (){
                  this.setFadeParams(false, 1, 0);
                  this.functionAfterFade = "this.fadeOutDone()";
                  this.fade();
          },
  
          fadeOutDone : function (){
          this.displayImageCount();
                  this.imageContainer.setAttribute("src", (this.imagePath + this.imageSource));
                  this.setImageText();
                  if(this.useFadingIn){
                          this.fadeIn();
                  }
                  else{
                          this.fadeLevel = 1;
                          this.setFade();
                  }
          },
  
          fade : function (){
                  if((this.fadingIn && this.fadeLevel < this.fadeEndLevel) || !this.fadingIn && this.fadeLevel > this.fadeEndLevel){
                          this.fadeLevel = (this.fadingIn)? this.fadeLevel + this.fadeIncrement : this.fadeLevel - this.fadeIncrement;
                          // This line is b/c of a floating point bug in JavaScript
                          this.fadeLevel = Math.round(this.fadeLevel * 10) / 10;
                          this.setFade();
                          this.fadeTimer = setTimeout("JaS.fade()", this.fadeInterval);
                  }
                  else{
                          clearTimeout(this.fadeTimer);
                          if(this.functionAfterFade){
                                  eval(this.functionAfterFade);
                          }
                  }
          },
  
          setFade : function (){
                  if(this.useMSFilter){
                          this.fadeContainer.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + (this.fadeLevel * 100) + ")";
                  }
                  else{
                          this.fadeContainer.style.opacity = this.fadeLevel;
                  }
          },
  
          setFadeParams : function (bFadingIn, intStartLevel, intEndLevel){
                  this.fadingIn = bFadingIn;
                  this.fadeLevel = intStartLevel;
                  this.fadeEndLevel = intEndLevel;
          },
  
          createThumbnails : function (){
                  this.thumbnailContainer.innerHTML = "";
                  this.thumbnailCollection = [];
              var oThumbnailsList = document.createElement("ul");
                  var oListItem;
                  var oThumbnail;
                  var oCurrentImage;
                  for(var i=0; i<this.currentImages.length; i++){
                  oCurrentImage = this.currentImages[i];
                          oListItem = document.createElement("li");
                          oThumbnail = document.createElement("img");
                          oThumbnail.setAttribute("id", ("jas-thumbnail-" + i));
                          oThumbnail.setAttribute("src", (this.imagePath + oCurrentImage[0]));
                          oThumbnail.setAttribute("alt", oCurrentImage[1]);
                          oThumbnail.setAttribute("title", oCurrentImage[1]);
                          oThumbnail.onclick = function (oEvent){
                                  JaS.imageIndex = parseInt(this.getAttribute("id").replace(/\D*(\d+)$/,\; "\$1"),\; 10);\; JaS.setImage();$};
                          this.thumbnailCollection.push(oThumbnail);
                          oListItem.appendChild(oThumbnail);
                          oThumbnailsList.appendChild(oListItem);
          }
                  this.thumbnailContainer.appendChild(oThumbnailsList);
                  if(this.thumbnailCollection.length > 0){
                          this.markCurrentThumbnail();
                  }
                  if(this.slideshowIsPlaying){
                          this.stopSlideshow();
                  }
          },
  
          markCurrentThumbnail : function (){
                  if(this.currentThumbnailSelected){
                  this.currentThumbnailSelected.className = "";
                          // Sometimes, in IE, the image loses its reference to its parent
                          if(this.currentThumbnailSelected.parentNode){
                                  this.currentThumbnailSelected.parentNode.className = "";
                          }
                  }
                  this.currentThumbnailSelected = this.thumbnailCollection[this.imageIndex];
                  this.currentThumbnailSelected.className = "selected";
                  this.currentThumbnailSelected.parentNode.className = "selected-parent";
          },
  
          createTagList : function (){
                  var strCurrentTag;
                  var arrCurrentTag;
                  var oRegExp;
                  for(var i=0; i<this.images.length; i++){
                          arrCurrentTag = this.images[i][2].replace(/\s*(,)\s*/,  "$1").split(",");
                          for(var j=0; j<arrCurrentTag.length; j++){
                      strCurrentTag = arrCurrentTag[j];
                                  oRegExp = new RegExp(strCurrentTag, "i");
                                  if(this.tags.toString().search(oRegExp) == -1){
                                          this.tags.push(strCurrentTag);
                                  }
              }
          }
                  this.tagsList = document.createElement("ul");
                  var oListItem;
                  var oTagCheckbox;
                  var oLabel;
                  for(var k=0; k<this.tags.length; k++){
                          oTag = this.tags[k];
                          oListItem = document.createElement("li");
                          oTagCheckbox = document.createElement("input");
                          oTagCheckbox.setAttribute("type", "checkbox");
                          oTagCheckbox.setAttribute("id", ("jas-" + oTag));
                          oTagCheckbox.setAttribute("value", oTag);
                          oTagCheckbox.checked = true;
                          oTagCheckbox.onclick = function (oEvent){
                                  JaS.applyTagFilter();
                          };
                          oLabel = document.createElement("label");
                          oLabel.setAttribute("for", ("jas-" + oTag));
                          oLabel.innerHTML = oTag;
                          this.tagsCheckboxes.push(oTagCheckbox);
                          oListItem.appendChild(oTagCheckbox);
                          oListItem.appendChild(oLabel);
                          this.tagsList.appendChild(oListItem);
                  }
                  this.tagsContainer.appendChild(this.tagsList);
                  // This loop is necessary since IE can only mark checkboxes as checked after they've been added to the document
                  for(var l=0; l<this.tagsCheckboxes.length; l++){
                          this.tagsCheckboxes[l].checked = true;
                  }
          },
  
          applyTagFilter : function (){
                  this.currentImages = [];
                  var arrCurrentTags = [];
                  var oCheckbox;
                  for(var i=0; i<this.tagsCheckboxes.length; i++){
                  oCheckbox = this.tagsCheckboxes[i];
                          if(oCheckbox.checked){
                                  arrCurrentTags.push(oCheckbox.value);
                          }
          }
                  var oRegExp;
                  var oImage;
                  for(var j=0; j<this.images.length; j++){
                  oImage = this.images[j];
                          for(var k=0; k<arrCurrentTags.length; k++){
                                  oRegExp = new RegExp(arrCurrentTags[k], "i");
                                  if(oImage[2].search(oRegExp) != -1){
                                          this.currentImages.push(oImage);
                                          break;
                                  }
                          }
          }
  
                  if(this.useThumbnails){
                          this.createThumbnails();
                  }
                  this.imageIndex = 0;
                  this.setImage();
          },
  
          markAllTags : function (){
                  for(var i=0; i<this.tagsCheckboxes.length; i++){
                          this.tagsCheckboxes[i].checked = this.tagsSelectAll;
          }
                  this.applyTagFilter();
          },
  
          closeSession : function (oEvent){
                  JaS = null;
                  delete JaS;
          },
  
          applyKeyboardNavigation : function (oEvent){
              var intKeyCode = oEvent.keyCode;
              if(!oEvent.altKey){
                          switch(intKeyCode){
                                  case 32:
                                          this.slideshowIsPlaying = (this.slideshowIsPlaying)? false : true;
                                          if(this.slideshowIsPlaying){
                                                  this.startSlideshow();
                                          }
                                          else{
                                                  this.stopSlideshow();
                                          }
                                          this.preventDefaultEventBehavior(oEvent);
                                          break;
                                  case 37:
                                  case 38:
                                          this.previousImage();
                                          this.preventDefaultEventBehavior(oEvent);
                                          break;
                                  case 39:
                                  case 40:
                                          this.nextImage();
                                          this.preventDefaultEventBehavior(oEvent);
                                          break;
                          }
                  }
          },
  
          preventDefaultEventBehavior : function (oEvent){
                  if(oEvent){
                          oEvent.returnValue = false;
                          if(oEvent.preventDefault){
                                  oEvent.preventDefault();
                          }
                  }
          }
  };
  // ---
  addEvent(window, "load", function(){JaS.init();}, false);
  addEvent(window, "unload", function(){JaS.closeSession();}, false);
  // ---
  // Utility functions
  function addEvent(oObject, strEvent, oFunction, bCapture){
          if(oObject){
                  if(oObject.addEventListener){
                          oObject.addEventListener(strEvent, oFunction, bCapture);
                  }
                  else if(window.attachEvent){
                          oObject.attachEvent(("on" + strEvent), oFunction)
                  }
          }
  }
  // ---
  if(typeof Array.prototype.push != "function"){
          Array.prototype.push = ArrayPush;
          function ArrayPush(value){
                  this[this.length] = value;
          }
  }