// Javascript to run image gallery

// Image fade routine - taken from
// http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_21485321.html

function fade(objID,CurrentAlpha,TargetAlpha,steps){

	var obj = document.getElementById(objID);
	CurrentAlpha = parseInt(CurrentAlpha);
	if (isNaN(CurrentAlpha)){
		CurrentAlpha = parseInt(obj.style.opacity*100);
		if (isNaN(CurrentAlpha))CurrentAlpha=100;
	}

	var DeltaAlpha=parseInt((CurrentAlpha-TargetAlpha)/steps);
	var NewAlpha = CurrentAlpha - DeltaAlpha;

	setOpacity(obj, NewAlpha)

	if (steps>1){
		setTimeout('fade("'+objID+'",'+NewAlpha+','+TargetAlpha+','+(steps-1)+')', 50);
	}
}

function setOpacity(obj, alpha) {
	obj.style.opacity = (alpha / 100);
	obj.style.MozOpacity = obj.style.opacity;
	obj.style.filter = 'alpha(opacity='+alpha+')';
}

function fadeIn(objID){
	fade(objID,0,100,20)
}

function fadeOut(objID){
	fade(objID,100,0,20)
}

function fadeDownToHalf(objID){
	fade(objID,100,50,10)
}

function fadeUpFromHalf(objID){
	fade(objID,50,100,10)
}
// Show picture - based on A List Apart: Articles: Javascript Image Gallery
var bgImgID = 'bgImg';
var fgImgID = 'fgImg';
var fgImgAID = 'fgImgA';
var layerID = 'layer1';
var layer1BGID = 'layer1BG';
var nextBtnID = 'btnNext';
var prevBtnID = 'btnPrev';
var closeBtnID = 'btnClose';
var picIndex = -1;

function initGallery() {
	// If DOM is not supported,  don't add javascript to links
	if(!document.getElementById) {return}
	
	// Get array of all gallery links
	var links = document.getElementById('gallery').getElementsByTagName('a');
	
	for (i=0;i<links.length;i++) {
		// add onclick event to load big picture
		links[i].onclick = function(){
			showBigPic(this);
			return false;
		}
	}
}

window.onload = initGallery;

function showBigPic(whichPic) {
	if(!document.getElementById) {return true;}
	
	// Prepare screen for gallery
	initialiseScreen();
	
	// Disable next and previous buttons so user can't click during image fading routines
	disableButtons(false);
	
	// Get objects to work with
	var bgImg = document.getElementById(bgImgID);
	var fgImg = document.getElementById(fgImgID);
	var layer = document.getElementById(layerID);
	
	// Make large picture layer visible
	document.getElementById(layerID).style.display = 'block';
	
	// Fade in 'loading' image
	fadeIn(bgImgID);
	
	//get array of all gallery links
	var links = document.getElementById('gallery').getElementsByTagName('a');
	
	// Find the link that matches the one that was clicked
	for (i=0;i<links.length;i++) {
		if (links[i]==whichPic) {
			picIndex = i;
		}
	}
	
	// Load chosen picture into foreground image
	setOpacity(fgImg, 0)
	fgImg.src = whichPic.href;
	
	// When foreground image has finished loading, fade in FG image
	fgImg.onload = function() {
		fadeInOnLoad(fgImgID)
	}
	
	return false;
}

function swapPic(index) {
	
	// Disable next and previous buttons so user can't click during image fading routines
	disableButtons(true)
	
	// Get objects to work with
	var bgImg = document.getElementById(bgImgID);
	var fgImg = document.getElementById(fgImgID);
	var links = document.getElementById('gallery').getElementsByTagName('a');
	
	// Start to fade out foreground image
	fadeOut(fgImgID);
	
	// 1.5 seconds later, load new image into foreground image and fade up when it's finished loading
	picIndex = index;
	setTimeout('document.getElementById("'+fgImgID+'").src = "'+links[index].href+'";', 1450)
	fgImg.onload = function() {
		fadeInOnLoad(fgImgID)
	}
	
	return false;
}

function fadeInOnLoad(imgID) {
	fadeIn(imgID);
	enableButtons();
	}

function disableButtons(useFade) {
	var prevBtn = document.getElementById(prevBtnID);
	var nextBtn = document.getElementById(nextBtnID);
	var closeBtn = document.getElementById(closeBtnID);
	var fgImgA = document.getElementById(fgImgAID);
	
	if (useFade) {
		fadeDownToHalf(nextBtnID);
		fadeDownToHalf(prevBtnID);
		fadeDownToHalf(closeBtnID);
	} else {
		setOpacity(nextBtn, 50)
		setOpacity(prevBtn, 50)
		setOpacity(closeBtn, 50)
	}
	prevBtn.onclick = function() {return false};
	nextBtn.onclick = function() {return false};
	closeBtn.onclick = function() {return false};
	fgImgA.onclick = function() {return false};
}

function enableButtons() {
	var links = document.getElementById('gallery').getElementsByTagName('a');
	var prevBtn = document.getElementById(prevBtnID);
	var nextBtn = document.getElementById(nextBtnID);
	var closeBtn = document.getElementById(closeBtnID);
	var fgImgA = document.getElementById(fgImgAID);
	
	nextBtn.href = '#';
	prevBtn.href = '#';
	fgImgA.href = '#';
	closeBtn.href = '#';
	closeBtn.onclick = function() {return closeGallery()};
	fadeUpFromHalf(closeBtnID)
	
	// Wait 1.5 secs before enabling next & previous buttons - stops program trying
	// to fade an image down wile it's still being faded up by another routine
	switch (picIndex) {
		case -1: // picture number not set
		alert('error');
		break;
		case 0: // first picture in gallery - disable previous button
		fadeUpFromHalf(nextBtnID)
		prevBtn.onclick = function() {return false};
		setTimeout(enableNextBtn, 1500);
		setTimeout(enableFGImgA, 1500);
		break;
		case (links.length - 1): // last picture in gallery - disable next button
		fadeUpFromHalf(prevBtnID)
		nextBtn.onclick = function() {return false};
		setTimeout(enablePrevBtn, 1500);
		fgImgA.onclick = function() {closeGallery()};
		break;
		default:
		fadeUpFromHalf(prevBtnID)
		fadeUpFromHalf(nextBtnID)
		setTimeout(enablePrevBtn, 1500);
		setTimeout(enableNextBtn, 1500);
		setTimeout(enableFGImgA, 1500);
		break;
	}
}

function enablePrevBtn() {
	var prevBtn = document.getElementById(prevBtnID);
	prevBtn.onclick = function() {return swapPic(picIndex-1)};
}

function enableNextBtn() {
	var nextBtn = document.getElementById(nextBtnID);
	nextBtn.onclick = function() {return swapPic(picIndex+1)};
}

function enableFGImgA() {
	fgImgA.onclick = function() {return swapPic(picIndex+1)};
}

function closeGallery() {
	document.getElementById(layerID).style.display = 'none';
	document.getElementById(fgImgID).src = '';
	document.getElementById(bgImgID).src = 'shared/images/gallery-loading.gif';
	return false;
}

function resetGallery() {
	document.getElementById(layerID).style.display = 'none';
	document.getElementById(fgImgID).src = '';
	document.getElementById(bgImgID).src = 'shared/images/gallery-loading.gif';
}

function initialiseScreen() {
	
	// Scroll to top of page
	scroll(0,0);
	
	// Get screen height - adapted from
	// http://codylindley.com/Webdev/295/javascript-get-page-height-with-scroll
	var docH;
	if (window.innerHeight && window.scrollMaxY ) { // Firefox 
		docH = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
		docH = document.body.scrollHeight;
	} else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari
		docH = document.body.offsetHeight + document.body.offsetTop;
	}
	
	// Set height of background layer in case user scrolls down
	var layer1BG = document.getElementById(layer1BGID);
	layer1BG.style.height = docH+'px';
	setOpacity(layer1BG, 85);
}