var imageName;
var smokeAnimDone = false;
var picLoaded = false;

var imageObj = new Image();
imageObj.src = 'images/pictures/4-Picture-014_full.jpg';
imageObj.src = 'images/pictures/Bow_full.jpg';
imageObj.src = 'images/pictures/Bow-wind-turbine_full.jpg';
imageObj.src = 'images/pictures/SWIFT-Picture1_full.jpg';
imageObj.src = 'images/pictures/Bright-Sky-Pic_full.jpg';
imageObj.src = 'images/pictures/DSCF1880_full.jpg';
imageObj.src = 'images/pictures/Picture-008_full.jpg';
imageObj.src = 'images/pictures/SWIFTs-069_full.jpg';
imageObj.src = 'images/pictures/Palestra_full.jpg';
imageObj.src = 'images/pictures/Canmore-School_full.jpg';
imageObj.src = 'images/pictures/DSC01658_full.jpg';
imageObj.src = 'images/pictures/Scottish-Parliament_full.jpg';
imageObj.src = 'images/pictures/Berwickshire-Housing_full.jpg';
imageObj.src = 'images/pictures/SWIFT-and-jet-stream_full.jpg';
var fullImages = {'images':{'4-Picture-014':{'src':'images/pictures/4-Picture-014_full.jpg', 'w':'640', 'h':'480'}, 'Bow':{'src':'images/pictures/Bow_full.jpg', 'w':'396', 'h':'550'}, 'Bow-wind-turbine':{'src':'images/pictures/Bow-wind-turbine_full.jpg', 'w':'413', 'h':'550'}, 'SWIFT-Picture1':{'src':'images/pictures/SWIFT-Picture1_full.jpg', 'w':'640', 'h':'480'}, 'Bright-Sky-Pic':{'src':'images/pictures/Bright-Sky-Pic_full.jpg', 'w':'441', 'h':'550'}, 'DSCF1880':{'src':'images/pictures/DSCF1880_full.jpg', 'w':'640', 'h':'480'}, 'Picture-008':{'src':'images/pictures/Picture-008_full.jpg', 'w':'413', 'h':'550'}, 'SWIFTs-069':{'src':'images/pictures/SWIFTs-069_full.jpg', 'w':'640', 'h':'530'}, 'Palestra':{'src':'images/pictures/Palestra_full.jpg', 'w':'640', 'h':'480'}, 'Canmore-School':{'src':'images/pictures/Canmore-School_full.jpg', 'w':'640', 'h':'480'}, 'DSC01658':{'src':'images/pictures/DSC01658_full.jpg', 'w':'413', 'h':'550'}, 'Scottish-Parliament':{'src':'images/pictures/Scottish-Parliament_full.jpg', 'w':'403', 'h':'550'}, 'Berwickshire-Housing':{'src':'images/pictures/Berwickshire-Housing_full.jpg', 'w':'640', 'h':'480'}, 'SWIFT-and-jet-stream':{'src':'images/pictures/SWIFT-and-jet-stream_full.jpg', 'w':'439', 'h':'559'}}};
function highlightPicture(e) {
	$(e).addClassName("hoverBorder");
}

function unHighlightPicture(e) {
	$(e).removeClassName("hoverBorder");
}

function onImageLoad() {
	picLoaded = true;
	if (smokeAnimDone) {
		turnOnPicture();
	}
}

function turnOnPicture() {
	var a = $("smokeImageAnchor");
	var smokeImageWrap = a.select("div");
	if (smokeImageWrap.length > 0) {
		a.removeChild(smokeImageWrap[0]);
	}
	smokeImageWrap = document.createElement("div");
	smokeImageWrap.id = "smokeImage";
	var smokeImage = document.createElement("img");
	smokeImage.src = fullImages.images[imageName].src;
	smokeImage.style.width = fullImages.images[imageName].w + "px";
	smokeImage.style.height = fullImages.images[imageName].h + "px";
	smokeImageWrap.appendChild(document.createTextNode("Click to close"));
	smokeImageWrap.appendChild(document.createElement("br"));
	smokeImageWrap.appendChild(smokeImage);
	smokeImageWrap.style.display = "none";
	a.appendChild(smokeImageWrap);
	
	var w = fullImages.images[imageName].w;
	var h = fullImages.images[imageName].h;
	
	var docSize = getDocSize();
	var scroll = getScrollXY();
	
	var lo = $("loadingOverlay");
	
	smokeImageWrap = $(smokeImageWrap);

	var top = (docSize.h / 2) - (smokeImageWrap.getHeight() / 2) + scroll.y;
	if (top < 0) {
		top = 0;
	}
	var left = (docSize.w / 2) - (smokeImageWrap.getWidth() / 2) + scroll.x;
	if (left < 0) {
		left = 0;
	}
	smokeImageWrap.style.top = top + "px";
	smokeImageWrap.style.left = left + "px";

	lo.style.display = "none";
	smokeImageWrap.style.display = "block";
}

function showFullPicture(e) {
	smokeAnimDone = false;
	picLoaded = false;
	
	var smoke = $("pictureSmoke");
	var footer = $("footer"); // Grab the footer since it's floating and it's height is not included in the document height.
	
	imageName = new String(e.src);
	imageName = imageName.replace(/.*\/(.*)_thumb.jpg/g, "$1"); // get the base name of the image
	
	var image = new Image();
	image.onLoad = onImageLoad();
	image.src = fullImages.images[imageName].src;
	
	smoke.style.height = document.body.clientHeight+footer.getHeight()+"px"; // Add in the footer height as well, since it's floating and not included in the document height
	smoke.style.width = document.body.clientWidth+"px";
	smoke.style.display = "block";
	animateSmokeOn();
}

function getDocSize() {
	var width;
	var height;
	if (browser.isIE === false) {
		width = window.innerWidth;
		height = window.innerHeight;
	} else {
		width = document.documentElement.clientWidth;
		height = document.documentElement.clientHeight;
	}
	return {w:width, h:height}; 
}

function showOverlay() {
	var docSize = getDocSize();
	var scroll = getScrollXY();

	var lo = $("loadingOverlay");
	lo.style.top = (docSize.h / 2) - (lo.getHeight() / 2) + scroll.y + "px";
	lo.style.left = (docSize.w / 2) - (lo.getWidth() / 2) + scroll.x + "px";
	lo.style.display = "block";
}

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return {x:scrOfX, y:scrOfY};
}

function animateSmokeOn() {
	var animation=new SimpleAnimation(function(){});
	animation.duration=200;
	animation.pre=function()
	{
		this.endOpacity = 0.9;
		this.e = $("pictureSmoke");
		this.overlay = $("loadingOverlay");
	}
	animation.post=function()
	{
		smokeAnimDone = true;
		if (picLoaded) {
			turnOnPicture();
		} else {
			showOverlay();
		}
	}
	animation.update=function(now)
	{
		this.e.setOpacity(this.endOpacity*now);
	}
	animation.start();
}

function animateSmokeOff() {
	var animation=new SimpleAnimation(function(){});
	animation.duration=200;
	animation.pre=function()
	{
		this.endOpacity = .01;
		this.e = $("pictureSmoke");
		$("smokeImage").style.display = "none";
		$("loadingOverlay").style.display = "none";
	}
	animation.post=function()
	{
		this.e.style.display = "none";
		var smokeImage = $("smokeImage");
		smokeImage.parentNode.removeChild(smokeImage);
	}
	animation.update=function(now)
	{
		this.e.setOpacity(1-now);
	}
	animation.start();
}

function hideSmoke() {
	animateSmokeOff();
}