// ---

/*

	JaS is developed by Robert Nyman, http://www.robertnyman.com

	For more information, please see http://www.robertnyman.com/jas

*/

var JaS_WS = {

	// Customization parameters

	imagePath : "images/",

	images : [
		
		["th/ircf.jpg", "<a href=\"http://www.ircf.org\"><b>IRCF (International Reptile Conservation Foundation)</b></a>", "Website Design, Donation Port, Search Engine Optimization, Maintenance. Informational site with high image content."],

		["th/iif.jpg", "<a href=\"http://www.iguanafoundation.org\"><b>International Iguana Foundation</b></a>", "Website Design, Content Management System, Donation Port, Search Engine Optimization, Maintenance. Informational site with high text and image content."],
		
		["th/lifeflow.jpg", "<a href=\"http://www.lifeflow.org\"><b>LifeFlow</b></a>", "Website Design, Maintenance. Audio Video site with Amember Pro integration."],
		
		["th/bap.jpg", "<a href=\"http://caymanbiodiversity.com/\"><b>Cayman Biodiversity</b></a>", "Website Design, Content Management System, Maintenance. High content and imagery."],
		
		["th/fwz.jpg", "<a href=\"http://www.fortworthzoo.org\"><b>Fort Worth Zoo</b></a>", "Website Design, Dream Weaver Template Content Management System, Search Engine Optimization, Maintenance. "],
		
		["th/ekw.jpg", "<a href=\"http://www.ekaweeka.com\"><b>Ekaweeka</b></a>", "Social Networking using PHP-MySQL."],		
		
		["th/wildhorizons.jpg", "<a href=\"http://wildhorizons.com/new.html\"><b>Wild Horizons</b></a>", "Website Design, Content Management System, Image Gallery, E-Commerce, Search Engine Optimization. Professional photographers gallery, print sales."],
		
		["th/cyclura.jpg", "<a href=\"http://www.cyclura.com\"><b>Cyclura</b></a>", "Website Design, Content Management System, Search Engine Optimization, Maintenance. Informational site with high text and image content."],
		
		["th/cayman.jpg", "<a href=\"http://www.caymanbiodiversity.ky\"><b>Cayman Biodiversity</b></a>", "Website Design, Flash-Swish , Search Engine Optimization, Maintenance. "],
		
		["th/iguana.jpg", "<a href=\"http://www.ircf.org/iguana\"><b>Conservation Journal</b></a>", "Website Design, E-Commerce, Search Engine Optimization, Maintenance. "],
		
		["th/ief.jpg", "<a href=\"http://www.elephantconservation.org\"><b>International Elephant Conservation</b></a>", "Website Design, Search Engine Optimization, Maintenance. "]
	],

	fadeContainerId : "jas-container_ws",

	imageContainerId : "jas-image_ws",

	imageTextContainerId : "jas-image-text_ws",

	previousLinkId : "previous-image_ws",

	nextLinkId : "next-image_ws",

	imageCounterId : "image-counter_ws",

	startSlideShowId : "start-slideshow_ws",

	stopSlideShowId : "stop-slideshow_ws",	

	dimBackgroundOverlayId : "jas-dim-overlay_ws",

	dimBackgroundId : "dim-background_ws",

	noDimBackgroundId : "no-dim-background_ws",

	thumbnailContainerId: "jas-thumbnails_ws",

	tagsContainerId: "jas-tags_ws",

	tagsSelectAllId: "jas-select-all-tags_ws",

	useImageText : true,

	useThumbnails : true,

	allowDimmedBackground : true,

	automaticallyDimBackgroundWhenSlideShow : true,

	useTags : true,

	useKeyboardShortcuts : true,	

	useFadingIn : true,

	useFadingOut : true,

	useFadeWhenNotSlideshow : false,

	useFadeForSlideshow : true,

	useFadeAtInitialLoad : false,

	fadeIncrement : 0.1,	

	fadeInterval : 100, // Milliseconds	

	timeForSlideInSlideshow : 2000, // Milliseconds

	

	// JaS_WS function parameters

	allImages : null,

	currentImages : null,

	fadeContainer : null,

	imageContainer : null,

	imageTextContainer : null,

	previousLink : null,

	nextLink : null,

	dimBackgroundOverlay : null,

	dimBackgroundLink : null,

	noDimBackgroundLink : null,

	dimmingActivated : false,

	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($){

			this.fadeContainer = $(this.fadeContainerId);

			this.imageContainer = $(this.imageContainerId);

			this.slideshowIsSupported = this.fadeContainer && this.imageContainer;

			if(this.slideshowIsSupported){

				this.allImages = this.images;

				this.currentImages = this.images;

				if(this.useImageText){

					this.imageTextContainer = $(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 = $(this.previousLinkId);

				this.previousLink.onclick = JaS_WS.previousLinkClick;

				this.nextLink = $(this.nextLinkId);

				this.nextLink.onclick = JaS_WS.nextLinkClick;

				this.imageCounter = $(this.imageCounterId);

				this.startSlideShowLink = $(this.startSlideShowId);

				if(this.startSlideShowLink){

					this.startSlideShowLink.style.display = "inline";

				}

				this.startSlideShowLink.onclick = JaS_WS.startSlideShowClick;

				this.stopSlideShowLink = $(this.stopSlideShowId);

				if(this.stopSlideShowLink){

					this.stopSlideShowLink.style.display = "none";

				}

				this.stopSlideShowLink.onclick = JaS_WS.stopSlideshowClick;

				

				if(this.allowDimmedBackground){

					this.dimBackgroundOverlay = $(this.dimBackgroundOverlayId);

					this.dimBackgroundLink = $(this.dimBackgroundId);

					this.noDimBackgroundLink = $(this.noDimBackgroundId);

					if(this.dimBackgroundOverlay && this.dimBackgroundLink && this.noDimBackgroundLink){

						this.dimBackgroundLink.onclick = JaS_WS.dimBackgroundClick;

						this.noDimBackgroundLink.onclick = JaS_WS.noDimackgroundClick;

						this.noDimBackgroundLink.style.display = "none";

						this.dimmingActivated = true;

					}

				}

				

				if(this.useKeyboardShortcuts){

					document.onkeydown = JaS_WS.documentKeyDown;

				}

				

				this.thumbnailContainer = $(this.thumbnailContainerId);

				if(this.useThumbnails && this.thumbnailContainer){

					this.createThumbnails();

				}

				

				this.tagsContainer = $(this.tagsContainerId);

				if(this.useTags && this.tagsContainer){

					this.tagsSelectAll = $(this.tagsSelectAllId);

					if(this.tagsSelectAll){

						this.tagsSelectAll.onclick = JaS_WS.tagsSelectAllClick;

						this.createTagList();

					}

				}

				

				this.isInitialLoad = true;

				this.setImage();

				this.isInitialLoad = false;

			}

		}

	},

	

	previousLinkClick : function(oEvent){

		var oEvent = (typeof oEvent != "undefined")? oEvent : event;

		JaS_WS.preventDefaultEventBehavior(oEvent);

		JaS_WS.previousImage();

	},

	

	nextLinkClick : function(oEvent){

		var oEvent = (typeof oEvent != "undefined")? oEvent : event;

		JaS_WS.preventDefaultEventBehavior(oEvent);

		JaS_WS.nextImage();

	},

	

	startSlideShowClick : function(oEvent){

		var oEvent = (typeof oEvent != "undefined")? oEvent : event;

		JaS_WS.preventDefaultEventBehavior(oEvent);

		JaS_WS.startSlideshow();

	},

	

	stopSlideshowClick : function(oEvent){

		var oEvent = (typeof oEvent != "undefined")? oEvent : event;

		JaS_WS.preventDefaultEventBehavior(oEvent);

		JaS_WS.stopSlideshow();

	},

	

	dimBackgroundClick : function(oEvent){

		var oEvent = (typeof oEvent != "undefined")? oEvent : event;

		JaS_WS.preventDefaultEventBehavior(oEvent);

		JaS_WS.dimBackground();

	},

	

	documentKeyDown : function(oEvent){

		var oEvent = (typeof oEvent != "undefined")? oEvent : event;

		JaS_WS.applyKeyboardNavigation(oEvent);

	},

	

	tagsSelectAllClick : function (oEvent){

		JaS_WS.tagsSelectAll = this.checked;

		JaS_WS.markAllTags();

	},

	

	noDimackgroundClick : function(oEvent){

		var oEvent = (typeof oEvent != "undefined")? oEvent : event;

		JaS_WS.preventDefaultEventBehavior(oEvent);

		JaS_WS.noDimBackground();

	},

	

	setImage : function (){

		if(this.currentImages.length > 0){

			this.imageContainer.style.visibility = "visible";

			this.imageSource = this.currentImages[this.imageIndex][0];

			//ahmad edit to render description

			if(typeof(this.currentImages[this.imageIndex][2]) == "undefined"){
                this.currentImages[this.imageIndex][2] = "";
            }

			this.imageText = "<b>" + this.currentImages[this.imageIndex][1] + "</b><br><br>" + this.currentImages[this.imageIndex][2];

			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;

		}

	},

	

	setDimBackgroundSize : function(){

         var oDimBackground = this.dimBackgroundOverlay.style;

         var intWidth = document.body.offsetWidth;

         var intXScroll = (typeof window.pageXOffset != "undefined")? window.pageXOffset : document.body.scrollLeft;

         var intHeight = (typeof window.innerHeight != "undefined")? window.innerHeight : (document.documentElement)? document.documentElement.clientHeight : document.body.clientHeight;

         var intYScroll = (typeof window.window.pageYOffset != "undefined")? window.window.pageYOffset : (document.documentElement)? document.documentElement.scrollTop : document.documentElement.scrollTop;

         oDimBackground.width = intWidth + intXScroll + "px";

         oDimBackground.height = intHeight + intYScroll + "px";

	},

	

	dimBackground : function (){

         this.setDimBackgroundSize();

         this.dimBackgroundOverlay.style.display = "block";

		 this.noDimBackgroundLink.style.display = "inline";		

	},

	

	noDimBackground : function (fromStopSlideshow){

		this.dimBackgroundOverlay.style.display = "none";

		this.noDimBackgroundLink.style.display = "none";

		if(!fromStopSlideshow){

			this.stopSlideshow();

		}

	},

		

	startSlideshow : function (){

		if(this.currentImages.length > 0){

			this.startSlideShowLink.style.display = "none";

			this.stopSlideShowLink.style.display = "inline";

			this.slideshowIsPlaying = true;

			this.fadeTimer = setTimeout("JaS_WS.nextImage()", JaS_WS.timeForSlideInSlideshow);

			if(this.dimmingActivated  && this.automaticallyDimBackgroundWhenSlideShow){

				this.dimBackground();

			}

		}

	},

	

	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);

			if(this.dimmingActivated && this.automaticallyDimBackgroundWhenSlideShow){

				this.noDimBackground(true);

			}

		}

	},

	

	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_WS.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 = JaS_WS.thumbnailClick;

			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();

		}

	},

	

	thumbnailClick : function (oEvent){

		JaS_WS.imageIndex = parseInt(this.getAttribute("id").replace(/\D*(\d+)$/, "$1"), 10);

		JaS_WS.setImage();

	},

	

	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 = JaS_WS.tagCheckboxClick;

			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;		

		}

	},

	

	tagCheckboxClick : function (oEvent){

		JaS_WS.applyTagFilter();

	},

	

	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_WS = null;

		delete JaS_WS;

	},

	

	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_WS.init();}, false);

addEvent(window, "unload", function(){JaS_WS.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)

		}

	}

}

// ---

function $(strId){

	return document.getElementById(strId);

}

// ---

if(typeof Array.prototype.push != "function"){

	Array.prototype.push = ArrayPush;

	function ArrayPush(value){

		this[this.length] = value;

	}

}

// ---