// Function LoadImage and OpenBigImage originally written by Gregory Smith, http://underdogishere.com
// Feel free to copy, reuse, change, pilfer from, etc. as you wish!

// Note that the Javascript works only if a certain naming convention
// is followed for the images.  The LoadImage function takes as
// parameters the name of the 'big' image file (without the .jpg
// extension), and the ALT value.  Optionally, you can also specify
// the medium image's width and height if it's not the default of
// (in my case) 400x300.  The medium image must have the same name
// as the big image, but with "_sm" added to the end.  So if the big
// image is oceanview.jpg, you would pass 'oceanview' to the function,
// and the medium image must be named oceanview_sm.jpg.

// Of course, if you don't like this exact convention, you can change
// it, but the bottom line is there has to be a connection between the
// medium image's name and the big image's name so the function
// OpenBigImage can figure the one from the other.

function LoadImage(imgName,imgAlt,imgWidth,imgHeight) {
	if (!imgWidth) {
		var imgWidth = 400;
	}
	if (!imgHeight) {
		var imgHeight = 300;
	}
	var imgId = document.getElementById('bigImg');
	imgId.setAttribute('src','images/' + imgName + '_sm.jpg');
	imgId.setAttribute('width',imgWidth);
	imgId.setAttribute('height',imgHeight);
	imgId.setAttribute('alt',imgAlt);
}

function OpenBigImage() {
	var imgId = document.getElementById('bigImg');
	var imgWidth = imgId.getAttribute('width');
	var imgHeight = imgId.getAttribute('height');
	var imageName = imgId.getAttribute('alt');
	var imageFileName = imgId.getAttribute('src').split('/').pop().split('_')[0];
	if (imgWidth > imgHeight) {
		var imageWindow = window.open('','imageWindow','width=660,height=540,scrollbars=no,toolbars=no,resizable=no');
	} else {
		var imageWindow = window.open('','imageWindow','width=500,height=700,scrollbars=no,toolbars=no,resizable=no');
	}
	var imageDocument = imageWindow.document;

	imageDocument.write('<html><head><title>' + imageName + '</title>\n');
	imageDocument.write('<link rel="stylesheet" href="style.css" type="text/css"></head>\n<body class="bigger_image_page">\n');
	if (imgWidth > imgHeight) {
		imageDocument.write('<img src="images/' + imageFileName + '.jpg" width=640 height=480><p>\n');
	} else {
		imageDocument.write('<img src="images/' + imageFileName + '.jpg" width=480 height=640><p>\n');
	}
	imageDocument.write('<input type="button" value="Close Window" class="center_button" onclick="javascr' + 'ipt:window.close();" align=center>\n');
	imageDocument.write('</body></html>');
	imageDocument.close();
}

