/*	Javascript for a slideshow and clickable gallery

	These are not displayed as an overlay!

	(c)2011, Red Beagle Web Development, All Rights Reserved */
	var windowWidth=0;					//	Dimensions of screen for scaling the image
	var windowHeight=0;
	var imageWidth=0;
	var imageHeight=0;
	var imageScale=1.0;					//	Ratio of image size to screen size for scaling
	var galleryIndex=-1;				//	Which gallery to display this time?
	var totalImages=0;
	var galleryImageCount=0;
	var galleryFirstImage=-1;
	var galleryImage=[];
	var activeImage=-1;
	var activeIndex=-1;
	var activeState=0;
	var popupDelay=50;
	var popupStep=15;
	var popupSlideshowDelay=4000;
	var popupImage;
//	var popupThumbWidth=68;
	var popupButtonsEnabled=true;
	var popupThumbSlideActive=false;
	var thumbsBarWidth=0;
	var thumbnailsWidth=0;
	var thumbsBarOffset=0;
	var thumbsIndicator;
	var imageLoadedProceed=false;
	var commentsActive=false;
	if (typeof popupSlideShow=="undefined") var popupSlideShow=false;
	if (typeof popUpImageFolder=="undefined") var popUpImageFolder="./photos/";

	function getWindowSize() {
		if( typeof( window.innerWidth ) == 'number' ) {
			//Non-IE
			windowWidth = window.innerWidth;
			windowHeight = window.innerHeight;
		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			//IE 6+ in 'standards compliant mode'
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			//IE 4 compatible
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}
	}

	function big_area_size(b) {	// b==true means there are buttons, etc.
		bigImage=document.getElementById("big_image_area");
		thumbsArea=document.getElementById("thumbs_area");
		getWindowSize();
		bigImage.style.width=(windowWidth-262)+"px";		// 260 = Navigation width (220) + Right padding (20) + Left padding (20)
//		if (b) thumbsArea.style.width=bigImage.style.width;		// Copycat
		if (b) thumbsArea.style.width=(windowWidth-44)+"px";		// TAGG EXCEPTION
		else {
			thumbsArea.style.left=Math.floor((windowWidth-840)/2)+"px";
			thumbsArea.style.width="800px";
		}
		bigImage.style.height=(windowHeight-310)+"px";		// 100 = Height of thumbnail scrollbar area, 120= height of logo and heading
		
		// Repeat these number for the big image cover
		bigImage=document.getElementById("big_cover");
		bigImage.style.width=(windowWidth-332)+"px";		// 260 = Navigation width (220) + Right padding (20) + Left padding (20)
		bigImage.style.height=(windowHeight-310)+"px";		// 100 = Height of thumbnail scrollbar area, 120= height of logo and heading

		buttonTop=(windowHeight-310)/2-11;					// Locate the prev/next buttons
		if (b) {
			document.getElementById("main_left_button").style.top=buttonTop+"px";
			document.getElementById("main_right_button").style.top=buttonTop+"px";
//			thumbsBarWidth=windowWidth-330;
//			document.getElementById("thumbs_bar").style.width=(thumbsBarWidth)+"px";
			thumbsBarWidth=windowWidth-44;		// 44 pixels for the border and padding, 35*2 for the left/right buttons
			document.getElementById("thumbs_bar").style.width="100%";
		}
		bigImageMaxWidth=windowWidth-330;					// 10 additional pixels padding
		bigImageMaxHeight=windowHeight-310;					// Allow 40 pixels on top for caption, 100px on bottom for the thumbs
//			alert("Image max dimensions are "+bigImageMaxWidth+"w x "+bigImageMaxHeight+"h!");
		bigImage=document.getElementById("big_image_content");
		bigImage.style.left="-"+Math.floor(bigImageMaxWidth/2)+"px";
		bigImage.style.top="-"+Math.floor(bigImageMaxHeight/2)+"px";		// Include space for the comment here, e.g /2+20
		bigImage.style.height=Math.floor(bigImageMaxHeight)+"px";
		bigImage.style.width=Math.floor(bigImageMaxWidth)+"px";
	}

/*	galleryInit(ii)
	ii=index or name as found in popupGalNames
	
	Output:
	galleryIndex = gallery index
	galleryImages[] = array of indices for popupImageArray
	Return FALSE on error
	
*/
function galleryInit(ii) {		// ii=either an index or a gallery name
	//	if ii is not a number, look for a matching gallery index
	//	if ii is a number AND galleryIndex has not already been set to a different value than -1, use ii
	if (isNaN(ii)) { for (i=0; i<popupGalNames.length; i++) if (ii==popupGalNames[i]) { galleryIndex=i; i=popupGalNames.length; }
	} else if (galleryIndex==-1) galleryIndex=ii;
	totalImages=popupImageArray.length;
	if (galleryIndex>-1) {
		//	Look for the lowest index image in the gallery
		j=Number.POSITIVE_INFINITY;
		for (i=0; i<totalImages; i++) if (popupImageArray[i][5]==galleryIndex && popupImageArray[i][6]<j){
			j=popupImageArray[i][6];
			galleryFirstImage=i;
		}	//	At the end of this loop I should have galleryFirstImage.
		galleryImage[0]=galleryFirstImage;
		j=galleryFirstImage;
		while (popupImageArray[j][8]!=-1) { j=popupImageArray[j][8]; galleryImage.push(j); }
		galleryImageCount=galleryImage.length;
		popupImage=document.getElementById("big_image_image");
		if(commentsActive)popupComment=document.getElementById("big_image_comment");
		if (!popupSlideShow) {	// Then it's a gallery and not a slide-show: initialize thumbs
			thumbBar=document.getElementById("thumbs_bar_infinite");
			loadingRoller=document.getElementById("loading_roller");
			for (i=0; i<galleryImageCount; i++) {
				newThumb=document.createElement('img');
				newThumb.setAttribute('id',"popUpThumb"+i);
				newThumb.setAttribute('src', popUpImageFolder+popupImageArray[galleryImage[i]][4]);
				//newThumb.onmouseover=function(){popupThumbAlpha(100, this.id.substring(10));}
				//newThumb.onmouseout=function(){popupThumbAlpha(70, this.id.substring(10));}
				eval('newThumb.onclick=function(){popupGallerySelect('+i+');}');
				thumbBar.appendChild(newThumb);
			}
//			for (i=0; i<galleryImageCount; i++) {	// enable if the thumbs are position absolute
//				document.getElementById("popUpThumb"+i).style.left=(i*popupThumbWidth)+"px";
//			}
// 			thumbnailsWidth=galleryImageCount*popupThumbWidth;	// This will not work for Tagg!!
// 			if(thumbnailsWidth>thumbsBarWidth) {
// 				document.getElementById("thumbs_left_button").style.display="block";
// 				document.getElementById("thumbs_right_button").style.display="block";
// 				thumbsIndicator=document.getElementById("thumbs_bar_indicator");
// 				thumbsIndicator.style.width=Math.round(thumbsBarWidth*thumbsBarWidth/thumbnailsWidth)+"px";
// 				thumbsIndicator.style.display="block";
// 			}
		} else {
			// For Tagg: attach the thumbs for the first images of each of the eight galleries, in order by name.
			if (ii!="contact") for (k=0; k<popupGalNames.length; k++) if(popupGalNames[k]!="home" && popupGalNames[k]!="contact"){
				// Look for the first image in this gallery
				j=Number.POSITIVE_INFINITY;
				for (i=0; i<totalImages; i++) if (popupImageArray[i][5]==k && popupImageArray[i][6]<j){
					j=popupImageArray[i][6];
					galleryFirstImage=i;
				}	//	At the end of this loop I should have galleryFirstImage.
				thumbBarH=document.getElementById("tb"+k);
				newThumb=document.createElement('img');
				newThumb.setAttribute('src', 'images/small-'+popupGalNames[k]+'.gif');
				thumbBarH.appendChild(newThumb);
				newThumb=document.createElement('img');
				newThumb.setAttribute('id',"popUpThumb"+k);
				newThumb.setAttribute('src', popUpImageFolder+popupImageArray[galleryFirstImage][4]);
				eval('newThumb.onclick=function(){document.location.href="portfolio.php?p='+popupGalNames[k]+'";}');
				thumbBarH.appendChild(newThumb);
			}
		}
		previewImage=document.createElement('img');
		previewImage.onload=function(){imageLoadedProceed=true;}
		return true;
	} else { alert("Gallery initialization error: cannot find gallery index."); return false; }
}

function slideshowLaunch() {
	if (activeState==0) {
		slideshowDisplay(1, 0, 0);
	}
}

function slideshowDisplay(state, im, step) {
	activeState=state;
	step=Math.floor(Math.min(100, Math.max(0, step)));
	stepr=100-step;	// Reverse step
	switch(state) {
		case 1:
			activeImage=galleryImage[im];	// This is the index of the new active image, in the full image array
			activeIndex=im;					// This is the index wrt this page, e.g. 0 - 5
			imageLoadedProceed=false;
			previewImage.src=popUpImageFolder+popupImageArray[activeImage][0];
			popupButtonsEnabled=false;
			setTimeout ("slideshowDisplay("+(popupSlideShow?6:2)+", "+im+", 0);", popupDelay);
			break;
		case 2:	// Fade out current image or skip step
			if (activeImage==-1) setTimeout ("slideshowDisplay("+(popupSlideShow?5:6)+", "+im+", 0);", popupDelay);
			else {
				popupImage.style.opacity=(stepr/100);
				popupImage.style.filter='alpha(opacity=' + stepr + ')';
				if(commentsActive){
					popupComment.style.opacity=(stepr/100);
					popupComment.style.filter='alpha(opacity=' + stepr + ')';
				}
				if (step==100) setTimeout ("slideshowDisplay("+(popupSlideShow?5:6)+", "+im+", 0);", popupDelay);
				else setTimeout ("slideshowDisplay(2, "+im+", "+(step+popupStep)+");", popupDelay);
			}
			break;
		case 3:	// Fade in active image
			// big_area_size();	// If you want to resize on each new image ... ?
			if (step==0) {	// Initialize the image
				popupImage.style.display="block";
				if(commentsActive)popupComment.style.display="block";
			}
			popupImage.style.opacity=(step/100);
			popupImage.style.filter='alpha(opacity=' + step + ')';
			if(commentsActive){
				popupComment.style.opacity=(step/100);
				popupComment.style.filter='alpha(opacity=' + step + ')';
			}
			if (step==100) setTimeout ("slideshowDisplay(4, "+im+", 0);", popupDelay);
			else setTimeout ("slideshowDisplay(3, "+im+", "+(step+popupStep)+");", popupDelay);
			break;
		case 4:
			if (popupSlideShow) {
				im=(im+1)%galleryImageCount;
				if (galleryImageCount>1) setTimeout("slideshowDisplay(1, "+im+", 0);", popupSlideshowDelay);
			} else popupButtonsEnabled=true;
			break;
		case 5: // Initialize the image to be active
			// Set the source
//			imageLoadedProceed=false;
			popupImage.src=popUpImageFolder+popupImageArray[activeImage][0];
			if(commentsActive)popupComment.innerHTML=popupImageArray[activeImage][3];
			// Set the size and position
			imageWidth=popupImageArray[activeImage][1];
			imageHeight=popupImageArray[activeImage][2];
			if (imageWidth>bigImageMaxWidth || imageHeight>bigImageMaxHeight) {
				imageScale=(imageWidth/bigImageMaxWidth > imageHeight/bigImageMaxHeight)?bigImageMaxWidth/imageWidth:bigImageMaxHeight/imageHeight;
				imageWidth=Math.round(imageWidth*imageScale);
				imageHeight=Math.round(imageHeight*imageScale);
			}
			popupImage.style.height=imageHeight+"px";
			popupImage.style.width=imageWidth+"px";
			popupImage.style.top=Math.round((bigImageMaxHeight-imageHeight)/2)+"px";	// replace with "0px"; to flush image to top
			popupImage.style.left=Math.round((bigImageMaxWidth-imageWidth)/2)+"px";
			if(commentsActive){
				popupComment.style.top=Math.round((bigImageMaxHeight-imageHeight)/2)+"px";	// replace with "0px"; to flush image to top
				popupComment.style.right=Math.round((bigImageMaxWidth-imageWidth)/2+10)+"px";
				popupComment.style.display="none";
			}
			popupImage.style.display="none";
			setTimeout("slideshowDisplay(3, "+im+", 0);", popupDelay);
			break;
		case 6:
			if(imageLoadedProceed) {
				if(!popupSlideShow)loadingRoller.style.display="none";
				setTimeout("slideshowDisplay("+(popupSlideShow?2:5)+", "+im+", 0);", popupDelay);
			}
			else {
				setTimeout("slideshowDisplay(6, "+im+", "+(step+1)+");", popupDelay);
				if (step==2 && !popupSlideShow) loadingRoller.style.display="block";
			}
			break;
	}
}

function popupThumbAlpha (alpha, t) {
	th=document.getElementById("popUpThumb"+t);
	th.style.opacity=(alpha/100);
	th.style.filter="alpha(opacity="+alpha+")";
}

function popupGallerySelect(t) {
	if (popupButtonsEnabled) slideshowDisplay(1, t, 0);
}

function popupClick(inc) {
	if (activeIndex>-1 && popupButtonsEnabled) {
		i=Math.floor(inc)+Math.floor(activeIndex);
		if (i==galleryImageCount) i=0;
		if (i==-1) i=galleryImageCount-1;
		slideshowDisplay(1, i, 0);
	}
}

function popupThumbSlide(dir) {
	if (popupThumbSlideActive) {
		thumbsBarOffset=Math.max(0, Math.min(thumbsBarOffset+5*dir, (thumbnailsWidth-thumbsBarWidth)));
		//alert(thumbsBarOffset);
		thumbBar.style.left="-"+thumbsBarOffset+"px";
		thumbsIndicator.style.left=Math.round(thumbsBarOffset*thumbsBarWidth/thumbnailsWidth+35)+"px";
		setTimeout("popupThumbSlide("+dir+")", 20);
	}
}

function popupReport() {
	str="popupButtonsEnabled="+popupButtonsEnabled+"\n"+activeIndex+"\nState: "+activeState;
	alert(str);
}

function resizeBigImage() {
	imageWidth=popupImageArray[activeImage][1];
	imageHeight=popupImageArray[activeImage][2];
	if (imageWidth>bigImageMaxWidth || imageHeight>bigImageMaxHeight) {
		imageScale=(imageWidth/bigImageMaxWidth > imageHeight/bigImageMaxHeight)?bigImageMaxWidth/imageWidth:bigImageMaxHeight/imageHeight;
		imageWidth=Math.round(imageWidth*imageScale);
		imageHeight=Math.round(imageHeight*imageScale);
	}
	popupImage.style.height=imageHeight+"px";
	popupImage.style.width=imageWidth+"px";
	popupImage.style.top=Math.round((bigImageMaxHeight-imageHeight)/2)+"px";	// replace with "0px"; to flush image to top
	popupImage.style.left=Math.round((bigImageMaxWidth-imageWidth)/2)+"px";
}