var currentStartingPoint = 0;
var numImagesInGallery = images.length;
var currentlyLoadedImage = 0;
var numThumbs = 6;
var thumbTimer = new Array();
var thumbHover = new Array(numImagesInGallery);
document.ondblclick = animateStart;
window.onresize = windowsResized;

function showPostcardURL() {
	prompt("Use the following URL to pass this image in Postcard Mode.","http://www.wklyhne.com?pic="+currentlyLoadedImage);
}

function did( id ) {
	return document.getElementById(id);
}	

function scrollToTop() {
	window.scrollTo(0, 0); 
}

function arrowDown(elem) {
	elem.style.marginTop = "1px";
}

function arrowUp(elem) {
	elem.style.marginTop = "0px";
}

function windowsResized() {
	//Here, we are widening the height of the thumbnail display to show more in some cases, and pushing them down in cases where there's no more to show.
	var oldNumThumbs = numThumbs;
	var thumbSpace = document.body.clientHeight - 65;
	numThumbs = Math.floor(thumbSpace / thumbHeight);
	if (numThumbs==0) numThumbs = 1; //Don't allow there to be less than one thumbnail displayed.
	did('thumbsHolder').style.height = (numThumbs*thumbHeight) + "px";	
	if (oldNumThumbs>numThumbs) did("SEARCHRIGHT").style.visibility = 'visible';
	if (currentStartingPoint+numThumbs>numImagesInGallery) { //Need to fill in thumbnails at the bottom
		swishPoint += ((currentStartingPoint+numThumbs)-numImagesInGallery)*thumbHeight;
		currentStartingPoint -= ((currentStartingPoint+numThumbs)-numImagesInGallery);
		slideMotion();
	}
	if (currentStartingPoint+numThumbs==numImagesInGallery) did("SEARCHRIGHT").style.visibility = 'hidden';
	vCenterCanvas();
	resizeZoomPicture();
}

function loadThumbnailContainers() {
	var thumbSpace = document.body.clientHeight - 65;
	numThumbs = Math.floor(thumbSpace / thumbHeight);
	did('thumbsHolder').style.height = (numThumbs*thumbHeight) + "px";
	var opa = 1;
	var thumbText = "";
	for (var x=0; x<numImagesInGallery; x++) {	
		if (x==numThumbs) opa = 0.55;
		thumbText += '<div style="height:120px;position:relative"><div style="width:100px;height:100px;padding:10px;"><div onmousedown="shrinkThumb(this,'+x+')" style="position:relative;width:100%;height:100%;background-color:black;"><div id="overlay'+x+'" onmouseover="lightenThumb(this,'+x+')" onmouseout="darkenThumb(this,'+x+');" style="opacity:'+opa+';position:absolute;left:0px;top:0px;width:100%;height:100%;background-color:black"></div><img id="'+(currentStartingPoint+x)+'" src="'+getThumbnailImageLocation(currentStartingPoint+x)+'" style="width:100%;height:auto"></div></div></div>';
	}
	did('thumbs').innerHTML = thumbText;
}

function shrinkThumb(elem,imgNum) {
	elem.style.width='90%';
	elem.style.margin='5%';
	document.onmouseup = function() {
		elem.style.width='100%';
		elem.style.margin='0';
		document.onmouseup = "";
		switchImages(imgNum);
	}
}

var swishPoint = 0;
var swishTimeout;
var baseMoveRate = 15;
var timerRate = 30;
var multiFactor = 10;
var thumbHeight = 120;

function slideForward2() {
	currentStartingPoint--;
	//alert(currentStartingPoint + "   " + numThumbs + "    " + numImagesInGallery + "   " + (numImagesInGallery-numThumbs-1));
	if (currentStartingPoint==0) did("SEARCHLEFT").style.visibility = 'hidden';
	//if (currentStartingPoint==numImagesInGallery-numThumbs-1) {
		did("SEARCHRIGHT").style.visibility = 'visible';
	//}
	swishPoint += thumbHeight;
	slideMotion();
}
function slideMotion() {
	clearTimeout(swishTimeout);
	//did('debug').innerHTML = Math.floor((swishPoint-did('thumbs').style.marginTop.value())/thumbHeight)*multiFactor;
	
	var currPos = did('thumbs').style.marginTop.value();
	
	if (currPos>swishPoint-baseMoveRate && currPos<swishPoint+baseMoveRate) { //It's in the region of the swishpoint, go to it.
		did('thumbs').style.marginTop = swishPoint +"px";
	} else {
		var newTop;
		if (currPos<swishPoint) {
			newTop = currPos + baseMoveRate + (Math.floor((swishPoint-currPos)/thumbHeight)*multiFactor);
			
		} else {
			newTop = currPos - baseMoveRate - (Math.floor((currPos-swishPoint)/thumbHeight)*multiFactor);
		}
		did('thumbs').style.marginTop = newTop + "px";
		swishTimeout = setTimeout(function() {slideMotion()},timerRate);
	}
}
function slideBack2() {
	//did('thumbs').style.marginTop = (did('thumbs').style.marginTop.value() - 120) + "px";
	currentStartingPoint++;
	if (currentStartingPoint==numImagesInGallery-numThumbs) did("SEARCHRIGHT").style.visibility = 'hidden';
	//if (currentStartingPoint==1) {
		did("SEARCHLEFT").style.visibility = 'visible';
	//}
	swishPoint -= thumbHeight;
	slideMotion();
}


function loadCanvas( thumbName ) {
	cancelZoom();
	currentlyLoadedImage = thumbName;
	if (images[currentlyLoadedImage].name=="REVIEW") {
		did('shiftCanvas').style.marginTop = "0px";
		did('canvas').style.display = "none";
		did('reviews').style.display = "block";
		getReview();
	} else {
		currentZoomStatus();
		did('canvas').style.display = "block";
		did('reviews').style.display = "none";
		did('ImageName').innerHTML = images[currentlyLoadedImage].name;
		did('ImageSeries').innerHTML = "series: " + images[currentlyLoadedImage].series;
		did('ImageInfo').innerHTML = ", " + images[currentlyLoadedImage].board + ", " + images[currentlyLoadedImage].year;
		did('loadPic').src = getSmallImageLocation(currentlyLoadedImage);
		did('canvas').style.width = images[currentlyLoadedImage].width;
		did('container').style.height = images[currentlyLoadedImage].height;
		did('instructions').innerHTML = "";
		vCenterCanvas();	
	}
	scrollToTop();
}


function vCenterCanvas() {
	//Here, center the image vertically if the canvas does not overflow the screen vertically.
	var canvasSpace = document.body.clientHeight - 175 - 75; //210 is the offset from the top of the page set for the canvas area, 75 is guesstimate of the image details area.
	if (images[currentlyLoadedImage].height < canvasSpace) {
		var shiftAmount = Math.floor(((canvasSpace-images[currentlyLoadedImage].height)/2)-20); //Shift if half the height of the free space (-35px so it's slightly above centre).
		if (shiftAmount>70) shiftAmount -= 20;
		if (shiftAmount<0) shiftAmount = 0;
		did('shiftCanvas').style.marginTop = shiftAmount+"px";
	} else {
		did('shiftCanvas').style.marginTop = "0px";
	}
}

var fadeInLoaderTimer;
function fadeLoader(out) {
	clearTimeout(fadeInLoaderTimer);
	if (out) {
		if (did('loader').style.opacity - 0.1 <=0) {
			did('loader').style.opacity = 0;
			did('loader').style.display = "none";
		} else {
			did('loader').style.opacity -= 0.1;
			fadeInLoaderTimer = setTimeout(function () {fadeLoader(out)},20);
		}
	} else {
		if ((did('loader').style.opacity*1)+0.1 >= 1) {
			did('loader').style.opacity = 1;
		} else {
			did('loader').style.display = "block";
			did('loader').style.opacity = (did('loader').style.opacity*1) + 0.1;
			fadeInLoaderTimer = setTimeout(function () {fadeLoader(out)},20);
		}
	}
}

function fadeInImage(elem) {
	if (((elem.style.opacity*1)+(0.02*1)) >= 1) {
		//elem.style.MozOpacity = "100";
		elem.style.opacity = 1;
		
		//alert(elem.style.opacity + "   " + elem.style.MozOpacity);
		//setTimeout(function() {later(elem);},2000);
	} else {
		elem.style.opacity = ((elem.style.opacity*1)+(0.02*1));
		
		//elem.style.MozOpacity = (val*100);
		setTimeout(function() { fadeInImage(elem); }, 20);
	}
}

var onlyOneImageSwitchAtATimeTimer;

function fadeInCanvas() {
	onlyOneImageSwitchAtATimeTimer = setInterval("canOpa()",30);
}
function canOpa() {
	var st = did('theImageHolder').style;
	if (st.opacity<1) {
		st.opacity = st.opacity*1+0.02;
	} else {
		canZoom = true;
		if (!thumbsMode) setTimeout("animateStart()",4000);
	}
}

function switchImages(newImage) {
	if (thumbHover[newImage] && currentlyLoadedImage!=newImage) {
		canZoom = false;
		clearInterval(onlyOneImageSwitchAtATimeTimer);
		switchImagesActions(newImage);
	}
}
function switchImagesActions(newImage) {
	if (did('theImageHolder').style.opacity-0.1 < 0) {
		did('theImageHolder').style.opacity = 0;
		fadeLoader(false);
		loadCanvas(newImage);
	} else {
		did('theImageHolder').style.opacity -= 0.1;
		setTimeout(function() {switchImages(newImage)},20);
	}
}

function fadeInDarkness(id) {
	//alert("FADING IN DARKNESS");
	//var overlay = elem.getElementsByTagName('div')[0];
	//if (debug) alert(elem.style.opacity + "   " + elem.style.filter.alpha.opacity + "  " + elem.style.mozOpacity);
	var overlay = did("overlay"+id);
	if (((overlay.style.opacity*1)-(0.02*1)) <= darkenThreshold) {
		//elem.style.MozOpacity = "100";
		overlay.style.opacity = darkenThreshold;
		
		//alert(elem.style.opacity + "   " + elem.style.MozOpacity);
		//setTimeout(function() {later(elem);},2000);
	} else {
		overlay.style.opacity = ((overlay.style.opacity*1)-(0.02*1));
		
		//elem.style.MozOpacity = (val*100);
		setTimeout(function() { fadeInDarkness(id); }, 20);
	}
}

String.prototype.value = function() {
	return (this.replace(/px/g,"")*1);
}


function fadeInImage2(elem) {
	if (((elem.style.opacity*1)+0.05)>=1) {
		elem.style.opacity = 1;
	} else {
		elem.style.opacity = (elem.style.opacity*1)+0.05;
		alert(elem.style.opacity);
		setTimeout(function() {fadeInImage(elem);},50);
	}
}

//This switches from postcard mode to thumbs mode.
var thumbsModePos = 188;
var postcardModePos = 132;
var thumbsMode = false;
function animateStart() {
	if (!thumbsMode) {
		did('allThumbs').style.display = "block";
		thumbsMode = true;
		postcardShiftInterval = setInterval("shiftPostcardRight()",30);
	}
}
function shiftPostcardRight() {
	var curPos = did('postcardMode').style;
	if (curPos.marginLeft.value()+3<thumbsModePos) {
		curPos.marginLeft = (curPos.marginLeft.value()+5)+"px";
	} else {
		curPos.marginLeft = thumbsModePos + "px";
		clearInterval(postcardShiftInterval);
		did('loader').style.left = "54%";
		loadThumbsAnimation();
	}
}

function loadThumbsAnimation() {
	//Each thumb div is a multiple of four, since each thumbnail uses four divs.
	var thDivs = did('thumbs').getElementsByTagName('div');
	var curDiv = 3;
	
	var opa;
	var opaStep = 0.03;
	
	var delayInterval = 20;
	var delayTotal = 0;
	var delayLightUpDown = delayInterval;
	var delayInterThumb = delayInterval;
	
	for (var x=0; x<numThumbs; x++) {
		curId = thDivs[curDiv].id;
		opa = 1;	
		while (opa-opaStep > 0) {
			opa -= opaStep;
			setTimeout("setOpa("+curId+","+opa+")", delayTotal);
			delayTotal += delayInterval;
		}
		opa = 0;
		setTimeout("setOpa("+curId+",0);thumbHover["+x+"]=true;", delayTotal);
		delayTotal += delayLightUpDown;
		while (opa+opaStep < darkenThreshold) {
			opa += opaStep;
			setTimeout("setOpa("+curId+","+opa+")", delayTotal);
			delayTotal += delayInterval;
		}
		setTimeout("setOpa("+curId+","+darkenThreshold+")", delayTotal);
		delayTotal += delayInterThumb;
		curDiv += 4;
	}
	setTimeout("fadeInImage(did('SEARCHRIGHT'));for (var x=0; x<numImagesInGallery; x++) thumbHover[x]=true", delayTotal);
	
}
function setOpa(oy,opa) {
	oy.style.opacity = opa;
}


var darkenThreshold = 0.55;
var darkenStep = 0.05;
var darkenSpeed = 20;

function lightenThumb(elem,thumbNum) {
	if (thumbHover[thumbNum]) {
		clearTimeout(thumbTimer[thumbNum]);
		lightenThumbAnimate(elem,thumbNum);
	}
}
function lightenThumbAnimate(elem,thumbNum) {
	if (elem.style.opacity - darkenStep <= 0) {
		elem.style.opacity = 0;
	} else {
		elem.style.opacity -= darkenStep;
		thumbTimer[thumbNum] = setTimeout(function() { lightenThumbAnimate(elem,thumbNum); }, darkenSpeed);
	}	
}
function darkenThumb(elem,thumbNum) {
	if (thumbHover[thumbNum]) {
		clearTimeout(thumbTimer[thumbNum]);
		darkenThumbAnimate(elem,thumbNum);
	}
}
function darkenThumbAnimate(elem,thumbNum) {
	if ((elem.style.opacity*1+darkenStep*1) >= darkenThreshold) {
		elem.style.opacity = darkenThreshold;
	} else {
		elem.style.opacity = (elem.style.opacity*1+darkenStep*1);
		thumbTimer[thumbNum] = setTimeout(function() { darkenThumbAnimate(elem,thumbNum); }, darkenSpeed);
	}	
}	

function getThumbnailImageLocation(i) {
	return "images/thumbnails/" + images[i].pic + "Thumb.jpg";
}
function getSmallImageLocation(i) {
	return "images/normal/" + images[i].pic + "Normal.jpg";
}
function getLargeImageLocation(i) {
	return "images/large/" + images[i].pic + "Large.jpg";
}


var reviewText = "";
//Send data to dostuff.php.
function getReview() {
	if (reviewText=="") {
		dataRoute = getXmlHttpRequestObject();
		if (dataRoute.readyState == 4 || dataRoute.readyState == 0) {
			dataRoute.open("GET", 'reviews.html', true);
			dataRoute.setRequestHeader('Content-Type','text/html');
			dataRoute.onreadystatechange = function() {
				if (dataRoute.readyState == 4) {
					dataRoute.onreadystatechange = null;
					reviewText = dataRoute.responseText;
					did('reviews').innerHTML = reviewText;
					fadeLoader(true);
					fadeInCanvas()
				}	
			}; 
			dataRoute.send(null);
		}
	} else {
		did('reviews').innerHTML = reviewText;
		fadeLoader(true);
		fadeInCanvas();
	}
}
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}