/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Robert Nyman :: http://www.robertnyman.com */

var JaS = {
// Customization parameters
imagePath : "pictures/weddings/",
images : [
         ["01.jpg"],["02.jpg"],["03.jpg"],["04.jpg"],["05.jpg"],["06.jpg"],
         ["07.jpg"],["08.jpg"],["09.jpg"],["10.jpg"],["11.jpg"],["12.jpg"],
         ["13.jpg"],["14.jpg"],["15.jpg"],["16.jpg"],["17.jpg"],["18.jpg"],
         ["19.jpg"],["20.jpg"],["21.jpg"],["22.jpg"],["23.jpg"],["24.jpg"],
         ["25.jpg"],["26.jpg"],["27.jpg"],["28.jpg"],["29.jpg"],["30.jpg"],
         ["31.jpg"],["32.jpg"],["33.jpg"],["34.jpg"],["35.jpg"],["36.jpg"],
         ["37.jpg"],["38.jpg"],["39.jpg"],["40.jpg"],["41.jpg"],["42.jpg"]
         
],
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;
}
}