//============================================================================================================
// PHOTO GALLERY JAVASCRIPT LIBRARY - Copyright 2008 Dreamscape Productions
// Version 1.0
// Note: May be used in conjunction with Photo Gallery ASP Library 1.0
//============================================================================================================



//CONFIGURABLE GLOBAL VARIABLES (SITE-WIDE)
//NOTE: LOCAL JAVASCRIPT OR ASP FUNCTION CALLS OVERRIDE THESE VARIABLES
var galleryCarouselImagesCount = 6;
var galleryCarouselImagesPadding = 4;
var galleryCarouselImagesPath = "photos"
var galleryCarouselElementsPath = "gallery"
var galleryCarouselImagesArray = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg");



//CONFIGURABLE GLOBAL STYLES (SITE-WIDE)
document.writeln("<style>");
document.writeln(".gallery { width: 100%; text-align: center; }"); 
document.writeln(".galleryCarousel { }");
document.writeln(".galleryCarouselPrev { display: inline; position: relative; top: -4px; }");
document.writeln(".galleryCarouselPrevSpacer { width: 25px; height: 40px; }");
document.writeln(".galleryCarouselPrevLink { }");
document.writeln(".galleryCarouselPrevImage { border: 0px; width: 25px; height: 40px; }");
document.writeln(".galleryCarouselImages { position: relative; top: 2px; }");
document.writeln(".galleryCarouselImage { border: 0px; width: 50px; height: 50px; padding: 2px; }");
document.writeln(".galleryCarouselImageSelected { border: 2px solid red; width: 50px; height: 50px; }");
document.writeln(".galleryCarouselNext { display: inline; position: relative; top: -4px; }");
document.writeln(".galleryCarouselNextSpacer { width: 25px; height: 40px; }");
document.writeln(".galleryCarouselNextLink { }");
document.writeln(".galleryCarouselNextImage { border: 0px; width: 25px; height: 40px; }");
document.writeln(".galleryPhoto { margin-top: 10px; }");
document.writeln("</style>");



//============================================================================================================
// DO NOT CONFIGURE BELOW THIS LINE!!
//============================================================================================================



//GLOBAL VARIABLES
var gallery;
var galleryCarousel;
var galleryCarouselPrev;
var galleryCarouselPrevSpacer;
var galleryCarouselPrevLink;
var galleryCarouselPrevImage;
var galleryCarouselImages
var galleryCarouselNext;
var galleryCarouselNextSpacer;
var galleryCarouselNextLink;
var galleryCarouselNextImage;
var galleryPhoto;
var galleryCarouselImageFirstDisplayed;
var galleryCarouselImageLastDisplayed;
var galleryCarouselImageSelected;
var galleryCarouselImagesTotal;



//INITIALIZE COMPONENT (ON LOAD OF WINDOW)
function galleryInit() {

	//DO NOT SHIFT THIS LINE!!
	galleryCarouselImagesTotal = galleryCarouselImagesArray.length;

	//ENSURE THAT AT LEAST ONE THUMBNAIL IMAGE WILL BE DISPLAYED
	if (galleryCarouselImagesCount < 1) {
		galleryCarouselImagesCount = 1;
	}

	//ENSURE THAT NUMBER OF DISPLAYED THUMBNAILS DOES NOT EXCEED NUMBER OF AVAILABLE PHOTOS IN ARRAY
	if (galleryCarouselImagesCount > galleryCarouselImagesTotal) {
		galleryCarouselImagesCount = galleryCarouselImagesTotal;
	}
	
	//ENSURE THAT THUMBNAIL PADDING IS NOT A NEGATIVE NUMBER
	if (galleryCarouselImagesPadding < 0) {
		galleryCarouselImagesPadding = 0;
	}
	
	//REMOVE TRAILING SLASH FROM PATHS (IF EXISTS)
	if (galleryCarouselImagesPath.substring(galleryCarouselImagesPath.length - 1, galleryCarouselImagesPath.length) == "/") {
		galleryCarouselImagesPath = galleryCarouselImagesPath.substring(0, galleryCarouselImagesPath.length - 1);
	}
	if (galleryCarouselElementsPath.substring(galleryCarouselElementsPath.length - 1, galleryCarouselElementsPath.length) == "/") {
		galleryCarouselElementsPath = galleryCarouselElementsPath.substring(0, galleryCarouselElementsPath.length - 1);
	}

	gallery = document.getElementById("gallery");
	gallery.className = "gallery";

	galleryCarousel = document.createElement("div");
	galleryCarousel.id = "galleryCarousel";
	galleryCarousel.className = "galleryCarousel";

	galleryCarouselPrev = document.createElement("div");
	galleryCarouselPrev.id = "galleryCarouselPrev";
	galleryCarouselPrev.className = "galleryCarouselPrev";
	galleryCarouselPrev.style.marginRight = galleryCarouselImagesPadding + "px";

	galleryCarouselPrevSpacer = document.createElement("img");
	galleryCarouselPrevSpacer.id = "galleryCarouselPrevSpacer";
	galleryCarouselPrevSpacer.className = "galleryCarouselPrevSpacer";

	//GIF IMAGES NEEDED UNTIL IE 6 IS PHASED OUT (PNG CLICK-ON-TRANSPARENCY ISSUE)
	galleryCarouselPrevSpacer.src = galleryCarouselElementsPath + "/spacer.gif";

	galleryCarouselPrevLink = document.createElement("a");
	galleryCarouselPrevLink.id = "galleryCarouselPrevLink";
	galleryCarouselPrevLink.className = "galleryCarouselPrevLink";
	galleryCarouselPrevLink.href = "javascript:void(0)";
	galleryCarouselPrevLink.onclick = function() { galleryShiftBackward(); return false; }

	galleryCarouselPrevImage = document.createElement("img");
	galleryCarouselPrevImage.id = "galleryCarouselPrevImage";
	galleryCarouselPrevImage.className = "galleryCarouselPrevImage";
	galleryCarouselPrevImage.src = galleryCarouselElementsPath + "/galleryArrowPrev_off.gif";

	galleryCarouselImages = document.createElement("span");
	galleryCarouselImages.id = "galleryCarouselImages";
	galleryCarouselImages.className = "galleryCarouselImages";

	galleryCarouselNext = document.createElement("div");
	galleryCarouselNext.id = "galleryCarouselNext";
	galleryCarouselNext.className = "galleryCarouselNext";
	galleryCarouselNext.style.marginLeft = galleryCarouselImagesPadding + "px";

	galleryCarouselNextSpacer = document.createElement("img");
	galleryCarouselNextSpacer.id = "galleryCarouselNextSpacer";
	galleryCarouselNextSpacer.className = "galleryCarouselNextSpacer";

	//GIF IMAGES NEEDED UNTIL IE 6 IS PHASED OUT (PNG CLICK-ON-TRANSPARENCY ISSUE)
	galleryCarouselNextSpacer.src = galleryCarouselElementsPath + "/spacer.gif";

	galleryCarouselNextLink = document.createElement("a");
	galleryCarouselNextLink.id = "galleryCarouselNextLink";
	galleryCarouselNextLink.className = "galleryCarouselNextLink";
	galleryCarouselNextLink.href = "javascript:void(0)";
	galleryCarouselNextLink.onclick = function() { galleryShiftForward(); return false; }

	galleryCarouselNextImage = document.createElement("img");
	galleryCarouselNextImage.id = "galleryCarouselNextImage";
	galleryCarouselNextImage.className = "galleryCarouselNextImage";
	galleryCarouselNextImage.src = galleryCarouselElementsPath + "/galleryArrowNext_off.gif";

	var i;

	for (i=1; i < galleryCarouselImagesCount + 1; i++) {

		galleryCarouselImages.appendChild(galleryBuildAndReturnThumbnail(i));

	}

	galleryPhoto = document.createElement("img");
	galleryPhoto.id = "galleryPhoto";
	galleryPhoto.className = "galleryPhoto";

	gallery.appendChild(galleryCarousel);
	galleryCarousel.appendChild(galleryCarouselPrev);
	galleryCarouselPrev.appendChild(galleryCarouselPrevSpacer);
	galleryCarouselPrev.appendChild(galleryCarouselPrevLink);
	galleryCarouselPrevLink.appendChild(galleryCarouselPrevImage);
	galleryCarousel.appendChild(galleryCarouselImages);
	galleryCarousel.appendChild(galleryCarouselNext);
	galleryCarouselNext.appendChild(galleryCarouselNextSpacer);
	galleryCarouselNext.appendChild(galleryCarouselNextLink);
	galleryCarouselNextLink.appendChild(galleryCarouselNextImage);
	gallery.appendChild(galleryPhoto);

	//DO NOT SHIFT ORDER OF LINES BELOW
	galleryCarouselImageFirstDisplayed = 1;
	galleryCarouselImageLastDisplayed = galleryCarouselImagesCount;
	gallerySelectImage(1);

}

function galleryBuildAndReturnThumbnail(index) {

	window["galleryCarouselImage" + index] = document.createElement("img");
	window["galleryCarouselImage" + index].id = "galleryCarouselImage" + index;
	window["galleryCarouselImage" + index].className = "galleryCarouselImage";
	window["galleryCarouselImage" + index].src = galleryCarouselImagesPath + "/" + galleryCarouselImagesArray[index-1];

	//THIS SECTION MUST FOLLOW "IMG" SECTION ABOVE TO SUPPORT "IMG.SRC"
	window["galleryCarouselImageLink" + index] = document.createElement("a");
	window["galleryCarouselImageLink" + index].id = "galleryCarouselImageLink" + index;
	window["galleryCarouselImageLink" + index].href = "javascript:void(0)";
	window["galleryCarouselImageLink" + index].CarouselImageNum = index;
	window["galleryCarouselImageLink" + index].onclick = function() { gallerySelectImage(this.CarouselImageNum); return false; }
	window["galleryCarouselImageLink" + index].style.marginLeft = galleryCarouselImagesPadding + "px";
	window["galleryCarouselImageLink" + index].style.marginRight = galleryCarouselImagesPadding + "px";
	window["galleryCarouselImageLink" + index].appendChild(window["galleryCarouselImage" + index]);

	return window["galleryCarouselImageLink" + index];

}

function gallerySelectImage(index) {

	//REMOVE BORDER FROM THUMBNAILS, RESTORE TO SELECTED, UPDATE MAIN IMAGE, RESTORE BOTH ARROWS
	if (index >= 1 && index <= galleryCarouselImagesTotal) {

		for (i = galleryCarouselImageFirstDisplayed; i < galleryCarouselImageFirstDisplayed + galleryCarouselImagesCount; i++) {

			window["galleryCarouselImage" + i].className = "galleryCarouselImage";

		}

		window["galleryCarouselImage" + index].className = "galleryCarouselImageSelected";

		galleryPhoto.src = galleryCarouselImagesPath + "/" + galleryCarouselImagesArray[index-1];
		
		galleryCarouselImageSelected = index;

	}

	//FIRST IMAGE SELECTED, REMOVE "PREVIOUS" ARROW
	if (galleryCarouselImageSelected <= 1) {

		//JUST IN CASE IT'S LESS THAN 1
		galleryCarouselImageSelected = 1;

		galleryCarouselPrevLink.style.visibility = "hidden";
		galleryCarouselPrevLink.style.display = "none";
		galleryCarouselPrevSpacer.style.visibility = "visible";
		galleryCarouselPrevSpacer.style.display = "inline";

	}
	//RESTORE "PREVIOUS" ARROW
	else {

		galleryCarouselPrevSpacer.style.visibility = "hidden";
		galleryCarouselPrevSpacer.style.display = "none";
		galleryCarouselPrevLink.style.visibility = "visible";
		galleryCarouselPrevLink.style.display = "inline";

	}

	//LAST IMAGE SELECTED, REMOVE "NEXT" ARROW
	if (galleryCarouselImageSelected >= galleryCarouselImagesTotal) {

		//JUST IN CASE IT'S MORE THAN THE TOTAL COUNT OF IMAGES WITHIN THE ARRAY
		galleryCarouselImageSelected = galleryCarouselImagesTotal;

		galleryCarouselNextLink.style.visibility = "hidden";
		galleryCarouselNextLink.style.display = "none";
		galleryCarouselNextSpacer.style.visibility = "visible";
		galleryCarouselNextSpacer.style.display = "inline";

	}
	//RESTORE "NEXT" ARROW
	else {

		galleryCarouselNextSpacer.style.visibility = "hidden";
		galleryCarouselNextSpacer.style.display = "none";
		galleryCarouselNextLink.style.visibility = "visible";
		galleryCarouselNextLink.style.display = "inline";

	}

}

//DO NOT SHIFT LINES WITHIN THIS FUNCTION!!
function galleryShiftBackward() {

	if ((galleryCarouselImageSelected == galleryCarouselImageFirstDisplayed) && 
		(galleryCarouselImageSelected > 1)) {

		window["galleryCarouselImageLink" + galleryCarouselImageLastDisplayed].parentNode.removeChild(window["galleryCarouselImageLink" + galleryCarouselImageLastDisplayed]);

		if (window["galleryCarouselImageLink" + (galleryCarouselImageFirstDisplayed-1)] != null) {

			galleryCarouselImages.insertBefore(galleryBuildAndReturnThumbnail((galleryCarouselImageFirstDisplayed - 1)), window["galleryCarouselImageLink" + galleryCarouselImageFirstDisplayed]);

		}

	}

	if (galleryCarouselImageSelected > 1) {

		gallerySelectImage(galleryCarouselImageSelected - 1)

	}

	//"IF" CHECK INCREMENTED BY ONE SINCE IT WAS DECREMENTED IN LINE ABOVE
	if (((galleryCarouselImageSelected+1) == galleryCarouselImageFirstDisplayed) && 
		(galleryCarouselImageSelected >= 1)) {

		galleryCarouselImageFirstDisplayed = galleryCarouselImageFirstDisplayed - 1
		galleryCarouselImageLastDisplayed = galleryCarouselImageLastDisplayed - 1

	}

}

//DO NOT SHIFT LINES WITHIN THIS FUNCTION!!
function galleryShiftForward() {

	if ((galleryCarouselImageSelected == galleryCarouselImageLastDisplayed) && 
		(galleryCarouselImageSelected < galleryCarouselImagesTotal)) {

		window["galleryCarouselImageLink" + galleryCarouselImageFirstDisplayed].parentNode.removeChild(window["galleryCarouselImageLink" + galleryCarouselImageFirstDisplayed]);
		galleryCarouselImages.appendChild(galleryBuildAndReturnThumbnail(galleryCarouselImageLastDisplayed + 1));

	}

	if (galleryCarouselImageSelected < galleryCarouselImagesTotal) {

		gallerySelectImage(galleryCarouselImageSelected + 1)

	}

	//"IF" CHECK DECREMENTED BY ONE SINCE IT WAS INCREMENTED IN LINE ABOVE
	if (((galleryCarouselImageSelected-1) == galleryCarouselImageLastDisplayed) && 
		(galleryCarouselImageSelected <= galleryCarouselImagesTotal)) {

		galleryCarouselImageFirstDisplayed = galleryCarouselImageFirstDisplayed + 1
		galleryCarouselImageLastDisplayed = galleryCarouselImageLastDisplayed + 1

	}

}



//ADD TO CALLING PAGE'S "ONLOAD" EVENT
if (window.addEventListener) {
	window.addEventListener("load", galleryInit, false);
}
else {
	window.attachEvent("onload", galleryInit);
}