// JavaScript Document
var timer_delay = 10;
var size_step = 10;
var current_width = 0;
var current_height = 0;
var min_top = 200;
var slideshowTimer = 4000;
var stopwidth;
var stopheight;
var popout_div;
var positiontop;
var div_closing = false;
var div_closed = true;
var image_name;
var image_width;
var image_height;
var preloadArray = new Array();
var preloadCount = 0;

var main_container;
var popout_div;
var popout_main_div;
var topgrey_div;
var bottomgrey_div;
var controller_div;
var title_div;
var caption_div;
var caption_main_div;
var counter_div;
var loader_image;
var main_image;
var image_main_div;
var slideshow_div;
var image_greyout_div;
var spinner_image;
var close_image;
var close_div;
var close_main_div;

var theImage;

var loaderFinish = false;
var imageLoaderFinish = false;
var loaderPreload;
var spinnerPreload;
var imgPreload = new Image();
var loadingAnimTimer;
var preloadAnimTimer;
var slideshowTimer;
var preloadFrom;
var imgPreload;
var preloadActive = false;

var loadingWidth;
var loadingHeight;

var imageObject = new Image();
var loadingImageTimer;

var slideshowArray = new Array();

var myWidth;
var myHeight;
var myScrollTop;
var myScrollLeft;
var myScrollWidth;
var myScrollHeight;
var screenWidth;
var screenHeight;

var currentImageID;
var totalImages;

var loadingImage = "/images/photogallery/loading.gif";
var spinnerImage = "/images/photogallery/loading.gif";
var nextImage = "/images/photogallery/zoom/next_button.gif";
var previousImage = "/images/photogallery/zoom/previous_button.gif";
var playImage = "/images/photogallery/zoom/play_button.gif";
var pauseImage = "/images/photogallery/zoom/pause_button.gif";

var mainPop = true;

var closeBar;

var fadeArrayPop = new Array();
var fadeAnimTimerPop = -1;
var opacityStepPop = 10; //lets keep this in even multiples of 100 to keep things easy

// Zoom: Setup The Page! Called onLoad();
function setupZoom() {
	main_container = document.getElementById("main-table");
	popout_div = document.getElementById("popout-container");
	topgrey_div = document.getElementById("greyout");
	loading_div = document.getElementById("loading");
	controller_div = document.getElementById("controller-container");
	loader_image = document.getElementById("loaderAnimation");
	main_image = document.getElementById("mainImage");
	title_div = document.getElementById("title-container");
	caption_div = document.getElementById("caption-container");
	counter_div = document.getElementById("counter-container");
	slideshow_div = document.getElementById("slideshow-action");
	image_greyout_div = document.getElementById("greyout-slideshow");
	spinner_image = document.getElementById("spinnerAnimation");
	
	popout_main_div = document.getElementById("main-popout");
	caption_main_div = document.getElementById("caption-container-main");
	image_main_div = document.getElementById("mainImageMain");
	
	closeBar = document.getElementById("closeBar");
	
	prepZooms();
	
	loaderPreload = new Image();
	spinnerPreload = new Image();
	nextPreload = new Image();
	previousPreload = new Image();
	playPreload = new Image();
	pausePreload = new Image();
	//loaderPreload.onload = function() {
		//loaderFinish = true;
	//}
	loaderPreload.src = loadingImage;
	spinnerPreload.src = spinnerImage;
	nextPreload.src = nextImage;
	previousPreload.src = previousImage;
	playPreload.src = playImage;
	pausePreload.src = pauseImage;
	
	loader_image.src = loadingImage;
	spinner_image.src = spinnerImage;
	//loadingAnimTimer = setInterval("preloadLoading()", 100);
}

function preloadLoading() {
	if (loaderFinish == true) {
		clearInterval(loadingAnimTimer);
		loaderFinish = false;
		loadingWidth = loaderPreload.width;
		loadingHeight = loaderPreload.height;
		loader_image.src = loadingImage;
	}
}

// Zoom: Inject Javascript functions into zoomable href's, one by one.
// This is done at page load time via an onLoad() handler.
function prepZooms() {
	if (! document.getElementsByTagName) {
		return;
	}
	var links = document.getElementsByTagName("a");
	
	counter = 0;
	
	for (i = 0; i < links.length; i++) {
		if (links[i].getAttribute("href") && (links[i].getAttribute("rel"))) {
			if (links[i].getAttribute("rel").indexOf("zoom:") == 0) {
				counter++;
				//links[i].onclick = function () { zoomClick(this); return false; };
				//links[i].onmouseover = function () { zoomPreload(this); };
			}
		}
	}
	totalImages = counter;
}

function zoomClick(from) {
	mainPop = false;

	// Get browser dimensions
	getSize();
	
	currentImageID = from.getAttribute("id").substring(5,from.getAttribute("id").length);
	
	topgrey_div.style.height = myScrollHeight + "px";
	topgrey_div.style.width = myScrollWidth + "px";
	startFadePop(topgrey_div);
	if (preloadActive == true) {
		// Preloading is otherwise still going on. So wait.
		preloadFrom = from;
		preloadAnimStart();
	} else {
		// Otherwise, we're loaded: do the zoom!
		zoomIn(from);
	}
}

function zoomClickMain(from) {
	mainPop = true;

	// Get browser dimensions
	getSize();
	fullHeight = myScrollHeight;
	if(screenHeight > myScrollHeight) {
		fullHeight = screenHeight;
	}
	topgrey_div.style.height = fullHeight + "px";
	topgrey_div.style.width = myScrollWidth + "px";
	startFadePop(topgrey_div);
	if (preloadActive == true) {
		// Preloading is otherwise still going on. So wait.
		preloadFrom = from;
		preloadAnimStart();
	} else {
		// Otherwise, we're loaded: do the zoom!
		zoomInMain(from);
	}
}

function slideshowAction(perform) {
	if(perform == "next") {
		if(currentImageID < totalImages) {
			++currentImageID;
		}else{
			currentImageID = 1;
		}
		nextElement = document.getElementById('image'+currentImageID);
		zoomPreload(nextElement);
		slideshowClick(nextElement);
	}else if(perform == "back") {
		if(currentImageID > 1) {
			--currentImageID;
		}else{
			currentImageID = totalImages;
		}
		nextElement = document.getElementById('image'+currentImageID);
		zoomPreload(nextElement);
		slideshowClick(nextElement);
	}else if(perform == "start") {
		slideshow_div.innerHTML = '<a onClick="slideshowAction(\'stop\')";><img src="/images/photogallery/zoom/pause_button.gif" width="33" height="33" border=0 align="absmiddle" /></a>';
		slideshowTimer = setInterval("slideshowPerformer()", slideshowTimer);
	}else if(perform == "stop") {
		clearInterval(slideshowTimer);
		slideshow_div.innerHTML = '<a onClick="slideshowAction(\'start\')";><img src="/images/photogallery/zoom/play_button.gif" width="33" height="33" border=0 align="absmiddle" /></a>';
	}
}

function slideshowPerformer() {
	if(currentImageID < totalImages) {
		++currentImageID;
	}else{
		currentImageID = 1;
	}
	nextElement = document.getElementById('image'+currentImageID);
	zoomPreload(nextElement);
	slideshowClick(nextElement);
}

function slideshowClick(from) {
	getSize();
	
	if (preloadActive == true) {
		// Preloading is otherwise still going on. So wait.
		preloadFrom = from;
		slideshowPreloadAnimStart();
	} else {
		// Otherwise, we're loaded: do the zoom!
		slideshowZoomIn(from);
	}
}

function slideshowPreloadAnimStart() {
	//main_image.src = loadingImage;
	image_greyout_div.style.display = "block";
	spinner_image.style.display = "block";  
	preloadAnimTimer = setInterval("slideshowPreloadAnim()", 100);
}

function preloadAnimStart() {
	loading_div.style.top = (Math.floor(screenHeight/2) - Math.floor(15/2) + myScrollTop) + "px";
	loading_div.style.left = (Math.floor(screenWidth/2) - Math.floor(214/2) + myScrollLeft) + "px";
	loading_div.style.display = "block";  
	preloadAnimTimer = setInterval("preloadAnim()", 100);
}

function slideshowPreloadAnim(from) {
	if (preloadActive == true) {
		
	} else {
		image_greyout_div.style.display = "none";
		spinner_image.style.display = "none";
		clearInterval(preloadAnimTimer);
		slideshowZoomIn(preloadFrom);
	}
}

function preloadAnim(from) {
	if (preloadActive == true) {
		
	} else {
		loading_div.style.display = "none";
		clearInterval(preloadAnimTimer);
		if(mainPop) {
			zoomInMain(preloadFrom);
		}else{
			zoomIn(preloadFrom);
		}
		
	}
}

function zoomIn(from) {
	main_image.src = from.getAttribute("href");
	//console.log("IMAGE NAME: "+from.getAttribute("href"));
	//popout_div.style.top = (Math.floor(screenHeight/2) - Math.floor(imgPreload.height/2) + myScrollTop) + "px";
	//popout_div.style.left = (Math.floor(screenWidth/2) - Math.floor(imgPreload.width/2) + myScrollLeft) + "px";
	
	baseTop = (Math.floor(screenHeight/2) - Math.floor(540/2) + myScrollTop)
	baseLeft = (Math.floor(screenWidth/2) - Math.floor(604/2) + myScrollLeft)
	
	popout_div.style.top = baseTop + "px";
	popout_div.style.left = baseLeft + "px";
	
	if(!from.getAttribute("title")) {
		title_div.style.display = "none";
	}else{
		title_div.style.display = "block";
		title_div.innerHTML = from.getAttribute("title");
	}
	
	if(!from.getAttribute("caption")) {
		caption_div.style.display = "none";
	}else{
		caption_div.style.display = "block";
		caption_div.innerHTML = from.getAttribute("caption");
	}
	
	counter_div.innerHTML = "Image "+currentImageID+" of "+totalImages;
	startFadePop(popout_div);
}

function zoomInMain(from) {
	image_main_div.src = from.getAttribute("href");
	//popout_div.style.top = (Math.floor(screenHeight/2) - Math.floor(imgPreload.height/2) + myScrollTop) + "px";
	//popout_div.style.left = (Math.floor(screenWidth/2) - Math.floor(imgPreload.width/2) + myScrollLeft) + "px";
	
	baseTop = (Math.floor(screenHeight/2) - Math.floor(imgPreload.height/2) + myScrollTop - 50)
	baseLeft = (Math.floor(screenWidth/2) - Math.floor(imgPreload.width/2) + myScrollLeft)
	
	popout_main_div.style.top = baseTop + "px";
	popout_main_div.style.left = baseLeft + "px";
	
	if(!from.getAttribute("caption")) {
		caption_main_div.style.display = "none";
	}else{
		caption_main_div.style.display = "block";
		caption_main_div.style.width = (imgPreload.width - 20) + "px";
		caption_main_div.innerHTML = from.getAttribute("caption");
	}
	
	startFadePop(popout_main_div);
}

function slideshowZoomIn(from) {
	main_image.src = from.getAttribute("href");
	if(!from.getAttribute("title")) {
		title_div.style.display = "none";
	}else{
		title_div.style.display = "block";
		title_div.innerHTML = from.getAttribute("title");
	}
	
	if(!from.getAttribute("caption")) {
		caption_div.style.display = "none";
	}else{
		caption_div.style.display = "block";
		caption_div.innerHTML = from.getAttribute("caption");
	}
	counter_div.innerHTML = "Image "+currentImageID+" of "+totalImages;
}

// Zoom: We got a click! Should we do the zoom? Or wait for the preload to complete?
function zoomClick2(from) {

	// Get browser dimensions
	getSize();
	
	//WORKS IN FF
	//topgrey_div.style.height = main_container.clientHeight + 10 + "px";
	//topgrey_div.style.width = main_container.clientWidth + window.scrollMaxX + "px";
	
	topgrey_div.style.height = myScrollHeight + "px";
	topgrey_div.style.width = myScrollWidth + "px";
	//modSize();
	topgrey_div.style.display = "block";
	loading_div.style.top = (Math.floor(screenHeight/2) - Math.floor(loadingHeight/2) + myScrollTop) + "px";
	loading_div.style.left = (Math.floor(screenWidth/2) - Math.floor(loadingWidth/2) + myScrollLeft) + "px";
	preloadFrom = from;
	zoomActivate();
}

function zoomActivate() {
	theImage = preloadFrom.getAttribute("href");
	
	imageObject = new Image();
	imageObject.onload = function() {
		imageLoaderFinish = true;
	}
	imageObject.src = theImage;
	loading_div.style.display = "block";
	loadingImageTimer = setInterval("preloadImage()", 100);
}

function preloadImage() {
	if (imageLoaderFinish == true) {
		clearInterval(loadingImageTimer);
		loading_div.style.display = "none";
		imageLoaderFinish = false;
		imageWidth = imageObject.width;
		imageHeight = imageObject.height;
		main_image.src = imageObject.src;
		popout_div.style.display = "block";
	}
}

// Zoom: Preload a zoom image when hovering over the thumbnail, then set the image once the preload is complete.
// Preloaded image is stored in imgPreload() and swapped out in the zoom function.

function zoomPreload(from) {

	var theimage = from.getAttribute("href");
	//console.log("PRELOAD START: "+theimage);

	// Only preload if we have to, i.e. the image isn't this image already

	if (imgPreload.src.indexOf(from.getAttribute("href").substr(from.getAttribute("href").lastIndexOf("/"))) == -1) {
		preloadActive = true;
		imgPreload = new Image();
      
		// Set a function to fire when the preload is complete, setting flags along the way.
   
		imgPreload.onload = function() {
			//console.log("PRELOAD END");
			preloadActive = false;
		}

		// Load it!
		imgPreload.src = theimage;
	}
}
/**
function popout2(imagename, imagewidth, imageheight) {
	image_name = imagename;
	image_width = imagewidth;
	image_height = imageheight;
	
	popout_div = document.getElementById("popout-container");
	topgrey_div = document.getElementById("greyout");
	bottomgrey_div = document.getElementById("greyout-bottom");
	controller_div = document.getElementById("controller-container");
	
	var windowheight = Math.floor(alertSize(true)/2);
	var windowwidth = Math.floor(alertSize(false)/2);
	
	topgrey_div.style.height = document.getElementById("main-table").clientHeight + "px";
	modSize();
	
	document.getElementById("image-container").innerHTML = '<img src="' + imagename + '" />';
	
	//alert("top = " + ((windowheight - Math.floor(imageheight/2)) + document.body.scrollTop));
	//alert("left = " + (windowwidth - Math.floor(imagewidth/2)));
												
	popout_div.style.top = ((windowheight - Math.floor(imageheight/2)) + document.body.scrollTop) + "px";
	popout_div.style.left = (windowwidth - Math.floor(imagewidth/2)) + "px";
	controller_div.style.width = imagewidth;
	//popout_div.style.width = imagewidth + 4;
	//popout_div.style.height = imageheight + 24;
	popout_div.style.display = "block";
	topgrey_div.style.display = "block";
	bottomgrey_div.style.display = "block";
}
*/

function popout2(from) {
	preloadFrom = from;
	preloadAnimStart();
	
	image_name = imagename;
	image_width = imagewidth;
	image_height = imageheight;
	
	popout_div = document.getElementById("popout-container");
	topgrey_div = document.getElementById("greyout");
	bottomgrey_div = document.getElementById("greyout-bottom");
	controller_div = document.getElementById("controller-container");
	
	var windowheight = Math.floor(alertSize(true)/2);
	var windowwidth = Math.floor(alertSize(false)/2);
	
	topgrey_div.style.height = document.getElementById("main-table").clientHeight + "px";
	modSize();
	
	document.getElementById("image-container").innerHTML = '<img src="' + imagename + '" />';
	
	//alert("top = " + ((windowheight - Math.floor(imageheight/2)) + document.body.scrollTop));
	//alert("left = " + (windowwidth - Math.floor(imagewidth/2)));
												
	popout_div.style.top = ((windowheight - Math.floor(imageheight/2)) + document.body.scrollTop) + "px";
	popout_div.style.left = (windowwidth - Math.floor(imagewidth/2)) + "px";
	controller_div.style.width = imagewidth;
	//popout_div.style.width = imagewidth + 4;
	//popout_div.style.height = imageheight + 24;
	popout_div.style.display = "block";
	topgrey_div.style.display = "block";
	bottomgrey_div.style.display = "block";
}


function popout_close() {
	image_name = "none";
	div_closing = true;
	self.setTimeout("expander()", timer_delay);
}

function popout_close2() {
	if(mainPop) {
		startFadePop(popout_main_div);
	}else{
		startFadePop(popout_div);
	}
	
	startFadePop(topgrey_div);
	
	loading_div.style.display = "none";
	spinner_image.style.display = "none";
	if(slideshowTimer) {
		clearInterval(slideshowTimer);
		slideshow_div.innerHTML = '<a onClick="slideshowAction(\'start\')";><img src="/images/photogallery/zoom/play_button.gif" width="33" height="33" border=0 align="absmiddle" /></a>';
	}
}

function expander() {
	if(div_closing) {
		alert(current_width + " -- " + current_height);
		if(current_width > 0) {
			current_width -= size_step;
			if(current_width < 0) {
				current_width = 0;
			}
			popout_div.style.width = current_width + "px";
		}
		
		if(current_height > 0) {
			current_height -= size_step;
			if(current_height < 0) {
				current_height = 0;
			}
			popout_div.style.height = current_height + "px";
		}
		
		if(current_height > 0 || current_width > 0) {
			self.setTimeout("expander()", timer_delay);
		}else{
			div_closed = true;
			if(image_name != "none") {
				popout(image_name, image_width, image_height);
			}else{
				popout_div.style.display = "none";
			}
		}
	}else{
		div_closed = false;
		if(current_width < stopwidth) {
			if((stopwidth - current_width) < size_step) {
				current_width += (stopwidth - current_width);
			}else{
				current_width += size_step;
			}
			popout_div.style.width = current_width + "px";
		}
		
		if(current_height < stopheight) {
			if((stopwidth - current_height) < size_step) {
				current_height += (stopwidth - current_height);
			}else{
				current_height += size_step;
			}
			popout_div.style.height = current_height + "px";
		}
		
		if(current_height < stopheight || current_width < stopwidth) {
			self.setTimeout("expander()", timer_delay);
		}else{
			
		}
	}
}

function alertSize(height) {
	  if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		if(height) {
			return window.innerHeight;
		}else{
			return window.innerWidth;
		}
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		if(height) {
			return document.documentElement.clientHeight;
		}else{
			return document.documentElement.clientWidth;
		}
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		if(height) {
			return document.body.clientHeight;
		}else{
			return document.body.clientWidth;
		}
	}
}
	
function modSize() {
	if((myHeight - main_container.clientHeight) > 0) {
		bottomgrey_div.style.height = (myHeight - main_container.clientHeight) + "px";
		alert(myHeight + " -- " + main_container.clientHeight);
	 }else{
		bottomgrey_div.style.height = "0px";
		alert(myHeight + " -- " + main_container.clientHeight);
	 }
}
function preloadImage(imagename) {
	preloadArray[preloadCount] = new Image();
	preloadArray[preloadCount].src = imagename;
	preloadCount++;
}

// Get the size of the window, and set myWidth and myHeight

function getSize() {
	if (document.all) {
		// IE4+ or IE6+ in standards compliant 
		myWidth  = (document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.clientWidth;
		myHeight = (document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.clientHeight;
		myScrollTop = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
		myScrollLeft = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
	} else {
		// Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
		myScrollTop = window.pageYOffset;
		myScrollLeft = window.pageXOffset;
	}
	
	// Core code from - quirksmode.org
    if (window.innerHeight && window.scrollMaxY) {	
        myScrollWidth = document.body.scrollWidth;
		myScrollHeight = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
		myScrollWidth = document.body.scrollWidth;
		myScrollHeight = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		myScrollWidth = document.body.offsetWidth;
		myScrollHeight = document.body.offsetHeight;
	}
	
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		screenHeight = window.innerHeight;
		screenWidth = window.innerWidth;
		
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		screenHeight = document.documentElement.clientHeight;
		screenWidth = document.documentElement.clientWidth;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		screenHeight = document.body.clientHeight;
		screenWidth = document.body.clientWidth;
	}
}

function startFadePop(fadeDiv) {
	//initialize the div, direction (0=fadeout, 1=fadein), opacity level(start at 100)
	if(fadeDiv.style.display == "block") {
		if(fadeDiv.id == "greyout") {
			fadeArrayPop.push(new Array(fadeDiv, 0, 60));
		}else{
			fadeArrayPop.push(new Array(fadeDiv, 0, 100));
		}
	}else{
		fadeArrayPop.push(new Array(fadeDiv, 1, 0));
	}
	
	if(fadeAnimTimerPop == -1) {
		fadeAnimTimerPop = setInterval("fadeWorkerPop()", 20);
	}
}

function fadeWorkerPop() {
	numItems = fadeArrayPop.length;
	if(numItems == 0) {
		clearInterval(fadeAnimTimerPop);
		fadeAnimTimerPop = -1
	}else{
		for(i=0;i<numItems;i++) {
			setOpacPop(fadeArrayPop[i], i);
		}
	}
}

function setOpacPop(divArray, mainPos) {
	if(!divArray) {
		return;	
	}
	if(divArray[1] == 0) {
		if(divArray[2] == 0) {
			divArray[0].style.display = "none"
			fadeArrayPop.splice(mainPos, 1);
		}else{
			divArray[2] -= opacityStepPop;
		}
	}else{
		if(divArray[2] == 0) {
			divArray[0].style.display = "block"
			divArray[2] += opacityStepPop;
		}else if(divArray[2] == 100) {
			fadeArrayPop.splice(mainPos, 1);
		}else{
			if(divArray[0].id == "greyout") {
				if(divArray[2] == 60) {
					fadeArrayPop.splice(mainPos, 1);
				}
			}
			divArray[2] += opacityStepPop;
		}
	}
	divArray[0].style.opacity = divArray[2] / 100;
	divArray[0].style.filter = 'alpha(opacity=' + divArray[2] + ')';
}