//
// My picture viewing tool.  Lots of fun with pictures :-)
//
// Somewhere there is a list of pictures (an array) that was initialized.
//
var pictureArea;
var sizeField;
var dateField;
var popup;
var popupTitle;
var popupImage;
var idiv;

var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];

function getX(img)
{
	var x = img.x;
	if (!x)	// Silly IE - does not have absolute position so we need to find it...
	{
		x = img.offsetLeft;
		var p = img.offsetParent;
		while (p)
		{
			x = x + p.offsetLeft;
			p = p.offsetParent;
		}
	}
	return(x);
}

function getY(img)
{
	var y = img.y;
	if (!y)	// Silly IE - does not have absolute position so we need to find it...
	{
		y = img.offsetTop;
		var p = img.offsetParent;
		while (p)
		{
			y = y + p.offsetTop;
			p = p.offsetParent;
		}
	}

	return(y);
}

function getmonth(name)
{
	return(months[name.substring(5,7) - 1]);
}

// We will do some tricks here...
// When the page first loads we will look at the URL and if there
// is an "anchor" we will try to see if it matches either a specific
// year/month.  If it does, we will set that month as the current
// image display month.  If it matches a specific picture, we will
// jump to displaying the specific picture.

function load_pictures()
{
	// Initialize the areas of the display
	pictureArea = document.getElementById('pictures');
	sizeField = document.getElementById('ViewSize');
	dateField = document.getElementById('ViewDate').options;
	popup = document.getElementById('popup');
	popupTitle = document.getElementById('popupTitle');
	popupImage = document.getElementById('popupImage');

	// Set up the options for size sizing...
	sizeField.options[sizeField.options.length] = new Option('Tiny',5);
	sizeField.options[sizeField.options.length] = new Option('Small',4);
	sizeField.options[sizeField.options.length] = new Option('Normal',3);
	sizeField.options.selectedIndex = sizeField.options.length - 1;
	sizeField.options[sizeField.options.length] = new Option('Large',2);

	// Figure out what options are available for the ViewDate section
	dateField[dateField.length] = new Option('*** All ***','2');
	var lastMonth = '';
	var lastYear = '';
	for (var i = 0; i < pics.length; i++)
	{
		var month = pics[i].substring(0,7);
		var year = month.substring(0,4);
		if (lastYear != year)
		{
			dateField[dateField.length] = new Option('All of ' + year,year);
			lastYear = year;
		}
		if (lastMonth != month)
		{
			dateField[dateField.length] = new Option('    ' + getmonth(month) + ' ' + year,month);
			lastMonth = month;
		}
	}

	// Start / assume the last month...
	dateField.selectedIndex = dateField.length - 1;

	// Ahh, now lets look at the document URL and see if we
	// have a better match...
	var prepos = new String(document.location);
	if (prepos.lastIndexOf('#') > 0)
	{
		prepos = prepos.substring(prepos.lastIndexOf('#') + 1);

		// Figure out what the index is...
		var section = prepos.substring(0,7);
		for (var i = 0; i < dateField.length; i++)
		{
			if (dateField[i].value == section)
			{
				dateField.selectedIndex = i;
			}
		}
	}
	else
	{
		prepos = null;
	}

	load_new(dateField[dateField.selectedIndex].value);

	// Now, lets see if we have a specific picture to load...
	if (prepos)
	{
		var img = document.getElementById(prepos);
		if (img)
		{
			if (img.full)
			{
				img.onclick();
			}
		}
	}
}

// Empty the element passed in...
function empty(e)
{
	if (e)
	{
		while (e.firstChild)
		{
			e.removeChild(e.firstChild);
		}
	}
}

// Replace all of the inner text of an element.
function replaceText(e,text)
{
	if (e)
	{
		empty(e);
		e.appendChild(document.createTextNode(text));
	}
}

function setLocation(match)
{
	var loc = document.location + '';
	var old = loc;
	if (loc.indexOf('#') > 0)
	{
		loc = loc.substring(0,loc.indexOf('#'));
	}

	loc = loc + '#' + match;

	if (loc != old)
	{
		document.location = loc;
	}
}

// Display the pictures as envisioned...
function load_new(match)
{
	// Set the URL bar to match the display selection
	setLocation(match);

	// Start out with a blank slate
	empty(pictureArea);

	// Now, for all of the pictures that match, build and append our picture link...
	for (i = 0; i < pics.length; i++)
	{
		var p = pics[i];
		if (p.substring(0,match.length) == match)
		{
			var img = document.createElement('img');
			img.width = 1;
			img.height = 1;
			img.src = 'preview/' + p;
			img.full = p;
			img.id = p.substring(0,19);
			img.alt = getmonth(p) + ' ' + p.substring(8,10) + ', ' + p.substring(0,4)
			+ ' at '
			+ p.substring(11,13) + ':' + p.substring(14,16) + ':' + p.substring(17,19);

			img.onmouseout = untip;

			img.onmouseover = function()
			{
				tip(this);
			}

			img.onclick = function()
			{
				dozoom(this);
			}

			pictureArea.appendChild(document.createTextNode(' '));
			pictureArea.appendChild(img);

			// Set up our nice reference image...
			img.img = new Image();
			img.img.src = img.src;
			img.img.img = img;
			img.img.onload = img_loaded;
		}
	}

	size_new();
}

function zoom_loaded()
{
	var x = this.width;
	var y = this.height;

	y = y * 680 / x;
	x = 680;

	this.img.src = this.src;
	this.img.width = x;
	this.img.height = y;

	var mag = document.getElementById('magControl');
	if (mag)
	{
		mag.style.display='';
	}
}

var magSizes = [ 0, 100, 150, 300 ];

function posMag(mag,eventX,eventY)
{
	var m = mag.div;
	var s = Math.round(m.size / 2);
	var x = getX(m.img);
	var y = getY(m.img);

	if (eventX < x)
	{
		eventX = x;
	}
	else if (eventX > x + m.img.width)
	{
		eventX = x + m.img.width;
	}

	if (eventY < y)
	{
		eventY = y;
	}
	else if (eventY > y + m.img.height)
	{
		eventY = y + m.img.height;
	}


	var centerX = Math.round((eventX - x) * m.img.img.width / m.img.width - s);
	var centerY = Math.round((eventY - y) * m.img.img.height / m.img.height - s);

	m.style.backgroundPosition = (-centerX) + 'px ' + (-centerY) + 'px';

	var mx = eventX - s;
	var my = eventY - s;

	if ((mx - x + m.size) > m.img.width)
	{
		mx = x + m.img.width - m.size;
	}
	if (mx < x)
	{
		mx = x;
	}

	if ((my - y + m.size) > m.img.height)
	{
		my = y + m.img.height - m.size;
	}
	if (my < y)
	{
		my = y;
	}

	mag.style.left = (mx - 17) + 'px';
	mag.style.top = (my - 17) + 'px';
}

function moveMag(event)
{
	var mag = document.getElementById('mag');
	if (mag)
	{
		// Handle the systems that don't pass the event...
		if (!event)	event = window.event;

		// Now, lets get the location...
		var eventX;
		var eventY;

		if (event.pageX)
		{
			eventX = event.pageX;
			eventY = event.pageY;
		}
		else if (event.clientX)
		{
			eventX = event.clientX + document.documentElement.scrollLeft;
			eventY = event.clientY + document.documentElement.scrollTop;
		}
		else
		{
			return;
		}

		posMag(mag,eventX,eventY);
	}
}

function setMag()
{
	// Get rid of any past magnifiers...
	mag = document.getElementById('mag');
	if (mag)
	{
		document.getElementById('zoom').removeChild(mag);
		document.body.onmousemove = null;
	}

	mag = document.getElementById('magControl');
	if (mag)
	{
		// Get the size of the magnification window
		// (note that '0' is turning it off)
		var size = mag.opt;
		if (size)
		{
			var s = magSizes[size];
			var div = document.createElement('div');
			div.className = 'magnifier';
			div.size = s;
			div.style.width = s + 'px';
			div.style.height = s + 'px';

			s += 34;
			var sdiv = document.createElement('div');
			sdiv.id = 'mag';
			sdiv.className = 'magnifierShadow';
			sdiv.size = s;
			sdiv.style.width = s + 'px';
			sdiv.style.height = s + 'px';
			sdiv.style.display = 'none';

			// Funky IE trick for PNG alpha channel...
			if (sdiv.runtimeStyle)
			{
				sdiv.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='shadow" + size + ".png',sizingMethod='scale')";
			}
			else
			{
				sdiv.style.backgroundImage = 'url(shadow' + size + '.png)';
			}

			div.img = document.getElementById('zoomImage');
			div.style.backgroundImage = 'url(' + div.img.src + ')';

			sdiv.div = div;
			sdiv.appendChild(div);
			document.getElementById('zoom').appendChild(sdiv);

			document.body.onmousemove = moveMag;

			posMag(sdiv,99999,0);
			sdiv.style.display = 'block';
		}
	}
}

function magClick(id)
{
	var mag = document.getElementById('magControl');
	if (mag.opt != id)
	{
		mag.opts[mag.opt].className = 'magButton';
		mag.opt = id;
		mag.opts[mag.opt].className = 'magButtonSelected';

		setMag();
	}
}

function addMag(text,id)
{
	var mag = document.getElementById('magControl');
	var span = document.createElement('span');

	span.appendChild(document.createTextNode(text));
	span.className = (mag.opt == id ? 'magButtonSelected' : 'magButton')
	span.onclick = function() { magClick(id); };
	span.opt = id;
	mag.appendChild(span);
	mag.opts[id] = span;
}

// To handle those systems that do not handle onload for images...
function check_load(img)
{
	if (img.width)
	{
		img.onload();
	}
	else
	{
		setTimeout(function(){check_load(img);} , 500);
	}
}

// First level zoom of the image...
function dozoom(img)
{
	untip();	// A problem with Safari...  Clean up the missing mouseout...

	// Set the URL bar to match the picture...
	setLocation(img.id);

	var zi = document.getElementById('zoomImage');

	zi.old = zi.src;
	zi.alt = img.alt;
	zi.width = 700;
	zi.height = 525;

	replaceText(document.getElementById('zoomTitle'),img.alt);

	var mag = document.getElementById('magControl');
	if (mag)
	{
		empty(mag);
		mag.style.display='none';
		mag.opt = 0;
		mag.opts = new Array();

		var span = document.createElement('span');
		span.appendChild(document.createTextNode('Magnifier:'));
		mag.appendChild(span);

		addMag('off',0);
		addMag('small',1);
		addMag('medium',2);
		addMag('large',3);

		setMag();
	}


	document.getElementById('index').style.display = 'none';
	document.getElementById('zoom').style.display = '';

	var zoom = new Image();
	zoom.src = 'fullsize/' + img.full;
	zoom.img = zi;
	zi.img = zoom;
	zoom.onload = zoom_loaded;
	check_load(zoom);
}

function dofullzoom(img)
{
	document.getElementById('fullzoomImage').src = img.src;

	replaceText(document.getElementById('fullzoomTitle'),img.alt);

	document.getElementById('zoom').style.display = 'none';
	document.getElementById('fullzoom').style.display = '';
}

// Remove the zoom...
function unzoom()
{
	var zi = document.getElementById('zoomImage');

	zi.src = zi.old;
	document.getElementById('fullzoomImage').src = zi.src;

	document.getElementById('zoom').style.display = 'none';
	document.getElementById('fullzoom').style.display = 'none';
	document.getElementById('index').style.display = '';

	magClick(0);
}

function img_new_size(img)
{
	var w = img.img.width;
	var h = img.img.height;

	w = w * 240 / h;
	h = 240;

	img.width = w / sizeField.value;
	img.height = h / sizeField.value;
}

// Resize the thumbnails
function size_new()
{
	var img = pictureArea.firstChild;
	if (pictureArea.loop)
	{
		clearTimeout(pictureArea.loop);
		pictureArea.loop = 0;
	}
	while (img)
	{
		if (img.img)
		{
			if (img.img.width)
			{
				img_new_size(img);
			}
			else
			{
				// Since Safari does not do the onload for the pictures
				// we also need to do this loop until all are loaded...
				if (!pictureArea.loop)
				{
					pictureArea.loop = setTimeout('size_new();',500);
				}
			}
		}
		img = img.nextSibling;
	}
}

function img_loaded()
{
	img_new_size(this.img);
}

// Remove the "lens" tip
function untip()
{
	if (idiv)
	{
		idiv.style.display = 'none';
	}
	idiv = null;
}

// Popup the tip...
function tip(img)
{
	untip();
	idiv = popup;
	if (idiv)
	{
		replaceText(popupTitle,img.alt);
		popupImage.src = img.src;

		var popW = img.img.width + 8;
		var popH = img.img.height + 29;

		// Now, where do we want this thing...
		// By default we want to be up and above the mouse...
		// But not if that means begin off screen.  Here it
		// gets difficult since knowing that is non-trivial
		// Assume no scrolling has happened...
		var minX = 0;
		var minY = 0;
		if (window.innerHeight)
		{
			// The more "standard" way to do things (albeit not IE)
			minX = window.pageXOffset;
			minY = window.pageYOffset;
		}
		else if (document.documentElement && document.documentElement.scrollTop)
		{
			// The funky IE-way
			minX = document.documentElement.scrollLeft;
			minY = document.documentElement.scrollTop;
		}
		else if (document.body)
		{
			// What should have been the way to do it...
			minX = document.body.scrollLeft;
			minY = document.body.scrollTop;
		}

		var minW = (window.innerWidth) ?window.pageXOffset:((document.documentElement && document.documentElement.scrollLeft)?document.documentElement.scrollLeft:(document.body?document.body.scrollLeft:0));
		var minH = (window.innerHeight)?window.pageYOffset:((document.documentElement && document.documentElement.scrollTop)?document.documentElement.scrollTop:(document.body?document.body.scrollTop:0));;
		var winW = (window.innerWidth) ?window.innerWidth+window.pageXOffset-16:document.body.offsetWidth-20;
		var winH = (window.innerHeight)?window.innerHeight+window.pageYOffset  :document.body.offsetHeight;

		var x = getX(img);
		x = x + ((img.width - popW) / 2);
		if (x < minW)
		{
			x = minW;
		}
		else if (x + popW > winW)
		{
			x = winW - popW;
		}

		var y = getY(img);
		y = y - popH;
		if (y < minH)
		{
			y = y + img.height + popH + 4;
		}

		idiv.style.left = x + 'px';
		idiv.style.top = y + 'px';

		idiv.style.display = '';
	}
}