var JaS = {
// Customization parameters
imagePath : "../images-graphics/",
images : [
["wb100.jpg", "A better way to order invitations", "wedding invitations"],
["wb101.jpg", "Hundreds of graphics available", "wedding invitations"],
["wb102.jpg", "Your invitations can match your favors!", "wedding invitations"],
["wb103.jpg", "Lowest priced invitations in the universe!", "wedding invitations"],
["wb104.jpg", "Saving you money for your honeymoon ;)", "wedding invitations"],
["wb105.jpg", "Send us your own graphic or photo", "wedding invitations"],
["wb106.jpg", "You always get a proof before we print", "wedding invitations"],
["wb107.jpg", "Rush orders no problem", "wedding invitations"],
["wb108.jpg", "Don't forget to check our low priced favors", "wedding invitations"],
["wb109.jpg", "Custom printing since 1988", "wedding invitations"],
["wb110.jpg", "Professional customer service = Perfect results 4 U", "wedding invitations"],
["wb111.jpg", "We also print napkins, shot glasses, magnets & more!", "wedding invitations"],
["wb112.jpg", "Make your wedding invitation worth framing", "wedding invitations"],
["wb113.jpg", "Our homepage has 101 wedding tips… Check it out!", "wedding invitations"],
["wb114.jpg", "We also can do personalized fortune cookies! click here", "wedding invitations"],
["wb115.jpg", "Cute wedding quotes… click here", "wedding invitations"],
["wb116.jpg", "Save-The-Date wedding favor magnets click here", "wedding invitations"],
["wb117.jpg", "Questions? Just ask our friendly customer service pros", "wedding invitations"],
["wb118.jpg", "A better way to order invitations", "wedding invitations"],
["wb119.jpg", "Hundreds of graphics available", "wedding invitations"],
["wb120.jpg", "Your invitations can match your favors!", "wedding invitations"],
["wb121.jpg", "Lowest priced invitations in the universe!", "wedding invitations"],
["wb122.jpg", "Saving you money for your honeymoon ;)", "wedding invitations"],
["wb123.jpg", "Send us your own graphic or photo", "wedding invitations"],
["wb124.jpg", "You always get a proof before we print", "wedding invitations"],
["wb125.jpg", "Rush orders no problem", "wedding invitations"],
["wb126.jpg", "Don't forget to check our low priced favors", "wedding invitations"],
["wb127.jpg", "Custom printing since 1988", "wedding invitations"],
["wb128.jpg", "Professional customer service = Perfect results 4 U", "wedding invitations"],
["wb129.jpg", "We also print napkins, shot glasses, magnets & more!", "wedding invitations"],
["wb130.jpg", "Make your wedding invitation worth framing", "wedding invitations"],
["wb131.jpg", "Our homepage has 101 wedding tips… Check it out!", "wedding invitations"],
["wb132.jpg", "We also can do personalized fortune cookies! click here", "wedding invitations"],
["wb133.jpg", "Cute wedding quotes… click here", "wedding invitations"],
["wb134.jpg", "Save-The-Date wedding favor magnets click here", "wedding invitations"],
["wb135.jpg", "Questions? Just ask our friendly customer service pros", "wedding invitations"]
],
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 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