// ---

/*

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

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

*/

var JaS = {

	// Customization parameters

	imagePath : "http://www.caymanbiodiversity.com/wp-content/themes/baplarge/pictures_birds/pictureswoodpeckers/",

	images : [
	
		["awoodintro.jpg", "Woodpeckers and Kingfishers", "Robust. Mid-sized. Strong bill. Woodpeckers often attached to pole or tree truck. Kingfishers often perch near water."],	

	
		["woodpeckers_beltedkingfishe.jpg", "<a href=\"http://www.birds.cornell.edu/AllAboutBirds/BirdGuide/Belted_Kingfisher.html\" target=\"_blank\"><img src=\"http://www.caymanbiodiversity.com/wp-content/themes/baplarge/logocornell.gif\" border=\"0\" align=\"right\" onMouseover=\"this.src='http://www.caymanbiodiversity.com/wp-content/themes/baplarge/logoclick.gif'\"  onMouseout=\"this.src='http://www.caymanbiodiversity.com/wp-content/themes/baplarge/logocornell.gif'\"></a>Belted Kingfisher (Kingfisherman)", "<i>Ceryle alcyon    </i><br>Length 28-36cm (11-14\"). Fairly common winter visitor to the Cayman Islands. Prefers Ironshore edges, margins of ponds and lagoons and freshwater pools. Perches motionless, or hovers above the water\'s surface, before plunging down to take small fish. Also feeds on crabs and other arthropods. Males lack the orange breast band displayed by the females... an exception to the rule of males being most colourful."],

		["woodpeckers_northernflicker.jpg", "<a href=\"http://www.birds.cornell.edu/AllAboutBirds/BirdGuide/Northern_Flicker.html\" target=\"_blank\"><img src=\"http://www.caymanbiodiversity.com/wp-content/themes/baplarge/logocornell.gif\" border=\"0\" align=\"right\" onMouseover=\"this.src='http://www.caymanbiodiversity.com/wp-content/themes/baplarge/logoclick.gif'\"  onMouseout=\"this.src='http://www.caymanbiodiversity.com/wp-content/themes/baplarge/logocornell.gif'\"></a>Northern Flicker (Black Heart)", "<i>Colaptes auratus		</i><br>Length 30-32cm (12-12.5\"). Fairly common breeding resident, found only in Grand Cayman. Breeds and forages in all woodland habitats. Our local subspecies, Colaptes auratus gundlachi is endemic: found only in the Cayman Islands and nowhere else in the world. Feeds almost exclusively on ants, which it laps up with its long, barbed tongue. Often forages on the ground, and around the base of trees. Not to be confused with our similarly common West Indian Woodpecker."],
		
		["woodpeckers_westindian.jpg", "West Indian Woodpecker (Red-Head)", "<i>Melanerpes superciliaris	</i><br>Length 26cm (10\"). Fairly common breeding resident, found only in Grand Cayman. A single bird was once seen on Little Cayman. Breeds and forages in all woodland habitats. Our local subspecies, Melanerpes superciliaris caymanensis is endemic: found only in the Cayman Islands and nowhere else in the world. Often to be seen working its was around tree trunks, searching for insects and tree frogs. Nests in cavities drilled in dead trees. The red crown of the males extends forward above and in front of the eye, while the crown of the female is more receding, stopping short of the eye. Not to be confused with our similarly common Northern Flicker."],
		
		["woodpeckers_yellowbellieds.jpg", "<a href=\"http://www.birds.cornell.edu/AllAboutBirds/BirdGuide/Yellow-bellied_Sapsucker.html\" target=\"_blank\"><img src=\"http://www.caymanbiodiversity.com/wp-content/themes/baplarge/logocornell.gif\" border=\"0\" align=\"right\" onMouseover=\"this.src='http://www.caymanbiodiversity.com/wp-content/themes/baplarge/logoclick.gif'\"  onMouseout=\"this.src='http://www.caymanbiodiversity.com/wp-content/themes/baplarge/logocornell.gif'\"></a>Yellow-bellied Sapsucker (Spanish Woodpecker)", "<i>Sphyrapicus varius     </i><br>Length 20-23cm (8-9\"). Uncommon winter visitor to the Cayman Islands. Prefers inland and coastal woodland and mangrove, also trees in disturbed habitat. Yellow-bellied Sapsuckers are responsible for the concentric rings of tiny holes, often seen peppering the trunks of favoured trees. After drilling the holes, they lick up the sap as it wells to the surface."]
	],

	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",	

	dimBackgroundOverlayId : "jas-dim-overlay",

	dimBackgroundId : "dim-background",

	noDimBackgroundId : "no-dim-background",

	thumbnailContainerId: "jas-thumbnails",

	tagsContainerId: "jas-tags",

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

	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 : 5000, // Milliseconds

	

	// JaS 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.previousLinkClick;

				this.nextLink = $(this.nextLinkId);

				this.nextLink.onclick = JaS.nextLinkClick;

				this.imageCounter = $(this.imageCounterId);

				this.startSlideShowLink = $(this.startSlideShowId);

				if(this.startSlideShowLink){

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

				}

				this.startSlideShowLink.onclick = JaS.startSlideShowClick;

				this.stopSlideShowLink = $(this.stopSlideShowId);

				if(this.stopSlideShowLink){

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

				}

				this.stopSlideShowLink.onclick = JaS.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.dimBackgroundClick;

						this.noDimBackgroundLink.onclick = JaS.noDimackgroundClick;

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

						this.dimmingActivated = true;

					}

				}

				

				if(this.useKeyboardShortcuts){

					document.onkeydown = JaS.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.tagsSelectAllClick;

						this.createTagList();

					}

				}

				

				this.isInitialLoad = true;

				this.setImage();

				this.isInitialLoad = false;

			}

		}

	},

	

	previousLinkClick : function(oEvent){

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

		JaS.preventDefaultEventBehavior(oEvent);

		JaS.previousImage();

	},

	

	nextLinkClick : function(oEvent){

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

		JaS.preventDefaultEventBehavior(oEvent);

		JaS.nextImage();

	},

	

	startSlideShowClick : function(oEvent){

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

		JaS.preventDefaultEventBehavior(oEvent);

		JaS.startSlideshow();

	},

	

	stopSlideshowClick : function(oEvent){

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

		JaS.preventDefaultEventBehavior(oEvent);

		JaS.stopSlideshow();

	},

	

	dimBackgroundClick : function(oEvent){

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

		JaS.preventDefaultEventBehavior(oEvent);

		JaS.dimBackground();

	},

	

	documentKeyDown : function(oEvent){

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

		JaS.applyKeyboardNavigation(oEvent);

	},

	

	tagsSelectAllClick : function (oEvent){

		JaS.tagsSelectAll = this.checked;

		JaS.markAllTags();

	},

	

	noDimackgroundClick : function(oEvent){

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

		JaS.preventDefaultEventBehavior(oEvent);

		JaS.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 (){

    	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.nextImage()", JaS.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.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.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.imageIndex = parseInt(this.getAttribute("id").replace(/\D*(\d+)$/, "$1"), 10);

		JaS.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.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.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 = 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)

		}

	}

}

// ---

function $(strId){

	return document.getElementById(strId);

}

// ---

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

	Array.prototype.push = ArrayPush;

	function ArrayPush(value){

		this[this.length] = value;

	}

}

// ---