// -------------------------------------------------------------------
// This script has been developed by Solar Flare Studios.
//		http://www.solarflarestudios.com
// Unlike most scripts you will find on the web it is well documented so feel free to learn from it.
// If you wish to use it wholly or in part please do not remove this message.
// -------------------------------------------------------------------

var curThumb = ''; // this is whatever thumbnail is currently being displayed large
var isWaiting = false;
var waitTimer;
var delayTime = 500;

// get the DIV that holds the large thumbnails
var bigDiv = document.getElementById('bigDIV');

var debugDiv = document.getElementById('debug');


function thumbpop(thumb, isMouseOver)
{
	if (thumb != '' && curThumb != '' && thumb != curThumb)
	{
		// this is a special case where  the thumbnail is not empty and the current thumbnail is different than the last thumbnail.
		// that means that the user jumped to another picture without waiting for the first one to go away.
		if (isWaiting)
		{
			// we are still waiting and this got called again, must have been a false alarm
			// canel the timer
			clearTimeout(waitTimer);
			debugDiv.innerHTML = 'Canceled a thumbSWAP timer.';
			
			if (curThumb != '' && !isMouseOver)
			{
				// there is a large view up, but the mouse is no longer in the box
				// start up a new timer to get rid of the popup
				waitTimer = setTimeout('dothumbpop("' + curThumb + '")', delayTime);
				isWaiting = true;
				
				debugDiv.innerHTML = 'Started a thumbPOP timer.';
				
			}
			
			
			if (isMouseOver)
			{
				// the event was triggered by a mouse over, start another timer
				waitTimer = setTimeout('dothumbswap("' + thumb + '")', delayTime);
				debugDiv.innerHTML = 'Reset a thumbSWAP timer.';
			}
			
		}
		else
		{
			// we are not waiting so this is the first time this has been called
			// start up a timer and say we are waiting.
			waitTimer = setTimeout('dothumbswap("' + thumb + '")', delayTime);
			isWaiting = true;
			
			debugDiv.innerHTML = 'Started a thumbSWAP timer.';	
		}
	}
	else
	{
		if (isWaiting)
		{
			// we are still waiting and this got called again, must have been a false alarm
			// canel the timer but start another.
			clearTimeout(waitTimer);
			debugDiv.innerHTML = 'Canceled a thumbPOP timer.';
			
			if ( (!isMouseOver && thumb == '') || (isMouseOver && thumb != '') )
			{
				waitTimer = setTimeout('dothumbpop("' + thumb + '")', delayTime);
				debugDiv.innerHTML = 'Reset a thumbPOP timer.';
			}

		}
		else
		{
			if ( (isMouseOver && thumb != '') || (!isMouseOver && thumb == '') )
			{
				// we are not waiting so this is the first time this has been called
				// start up a timer and say we are waiting.
				waitTimer = setTimeout('dothumbpop("' + thumb + '")', delayTime);
				isWaiting = true;
				
				debugDiv.innerHTML = 'Started a thumbPOP timer.';
			}
		}
	}
	
	debugDiv.innerHTML += '<br>thumb = ' + thumb + '<br>curThumb = ' + curThumb;
}

function dothumbswap(thumb)
{
	// hide the current picture ...
	dothumbpop(curThumb);
	
	// ... and then show the next after waiting a little bit
	setTimeout('dothumbpop("' + thumb + '")', 500);
}

function dothumbpop(thumb)
{
	debugDiv.innerHTML = 'Doing a thumbPOP.<br>thumb = ' + thumb;
	
	// once this actually gets called then that means our wait is over
	isWaiting = false;
	
	// if the thumbnail is empty then we are going to be processing the onMouseOut of the DIV
	// go ahead and load the thumbnail we are currently looking at
	if (thumb == '')
	{
		thumb = curThumb;
	}
	else
	{
		curThumb = thumb;
	}

	if (bigDiv.style.visibility == 'hidden' || bigDiv.style.visibility == '')
	{
		// we are going to be displaying the large thumbnail box, construct the HTML first
		var thumbpic = document.getElementById(thumb);
		bigDiv.innerHTML = '<img src="photos/bigthumbs/' + thumb + '.jpg" border="0">'
		
		// make sure the box fits the picture, plus some padding
		bigDiv.style.width = (thumbpic.width * 3) - 2;
		bigDiv.style.height = (thumbpic.height * 3) - 2;
		
		// line up the DIV with the thumbnail
		bigDiv.style.top = findPosY(thumbpic);
		bigDiv.style.left = findPosX(thumbpic);

		var screenWidth = 0
		var screenHeight = 0;
		if( typeof( window.innerWidth ) == 'number' ) {
			//Non-IE
			screenWidth = window.innerWidth;
			screenHeight = window.innerHeight;
		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			//IE 6+ in 'standards compliant mode'
			screenWidth = document.documentElement.clientWidth;
			myHeight = document.documentElement.clientHeight;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			//IE 4 compatible
			screenWidth = document.body.clientWidth;
			screenHeight = document.body.clientHeight;
		}
		
		// compensate for any scroll bars and scrolling
		screenWidth += getHPos() - 25;
		screenHeight += getVPos() - 25;
		
		// now make sure the DIV didn't end up somewhere off the visible area in the browser
		if ( (parseInt(bigDiv.style.top) + parseInt(bigDiv.style.height)) > screenHeight )
		{
			// the bottom edge is off the screen
			if (parseInt(bigDiv.style.height) < screenHeight)
			{
				// the div will fit on the screen, put it next to the bottom edge of the screen
				bigDiv.style.top = screenHeight - parseInt(bigDiv.style.height);
			}
		}
		if ( (parseInt(bigDiv.style.left) + parseInt(bigDiv.style.width)) > screenWidth )
		{
			// the right edge is off the screen
			if (parseInt(bigDiv.style.width) < screenWidth)
			{
				// the div will fit on the screen, put it next to the right edge of the screen
				bigDiv.style.left = screenWidth - parseInt(bigDiv.style.width);
			}
		}

		// all finished with setup, show the DIV
		bigDiv.style.visibility = 'visible';
		fadeIn('bigDIV', 0);
	}
	else
	{
		curThumb = '';
		fadeOut('bigDIV', 100);
	}
}

// the following three functions handle fadeing an image in and out across multiple browsers
function fadeIn(objId,opacity) {
    obj = document.getElementById(objId);
    if (opacity <= 100)
	{
	  setOpacity(obj, opacity);
      opacity += 20;
      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 50);
    }
	else
	{
		setOpacity(obj, 100);		
	}
}
function fadeOut(objId,opacity) {
    obj = document.getElementById(objId);
    if (opacity >= 0)
	{
	  setOpacity(obj, opacity);
      opacity -= 40;
      window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 50);
    }
	else
	{
		setOpacity(obj, 0);
		obj.style.visibility = 'hidden';
	}
}
function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;
  
  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";
  
  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;
  
  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;
  
  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
}


// locates the X positionn of an object based off of the top left corner
function findPosX(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}

// locates the Y positionn of an object based off of the top left corner
function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}

function getVPos() {
	var scrolled;
	if (document.documentElement && document.documentElement.scrollTop) { scrolled = document.documentElement.scrollTop; } //Sniffing for IE5
	else if (document.body) { scrolled = document.body.scrollTop; } //Sniffing for IE6
	else { scrolled = window.pageYOffset; } //Sniffing for Netscape
	return scrolled; //Returning the variable
}
function getHPos() {
	var scrolled;
	if (document.documentElement && document.documentElement.scrollLeft) { scrolled = document.documentElement.scrollLeft; } //Sniffing for IE5
	else if (document.body) { scrolled = document.body.scrollLeft; } //Sniffing for IE6
	else { scrolled = window.pageXOffset; } //Sniffing for Netscape
	return scrolled; //Returning the variable
}

