var index = 0;
			var imageId = "myImage";
			var dimOpacity = 38;      
			var dimDuration = 165;   

		

		function changeOpacity(myImageId, opacity) {
			var object = document.getElementById(myImageId);
			var object2 = object.style; 
			object2.opacity = (opacity / 100);
			object2.MozOpacity = (opacity / 100);
			object2.KhtmlOpacity = (opacity / 100);
			object2.filter = "alpha(opacity=" + opacity + ")";
		}

		function dimImage(myImageId) {
			changeOpacity(myImageId, dimOpacity);
		}		 

		function restoreImage(myImageId) {
			changeOpacity(myImageId, 100);
		}	


		function blinkImage(myImageId) {
			dimImage(myImageId);
			var restore = function() { restoreImage(myImageId);} 
            setTimeout(restore, dimDuration);			
		}	


		function showImage() {
           	document.getElementById(imageId).src = "../../images/" + category + "/" + index.toString() + ".jpg";
		}	
		

		function showImageFromURLParameter() { 
			var args = location.search.substr(1).split("?");
			index = args[0];
			if (index == "") {
				index = 1;
			}
			if (index > numberOfImages) {
				index = 1;
			}
			showImage();

		}
		

		function showNextImage() { 
			index ++;			
			if (index > numberOfImages) {
				index = 1;				
			}
			showImage();
		}

		function showPrevImage() { 
			index --;			
			if (index < 1) {
				index = numberOfImages;				
			}
			showImage();
		}

			function buildPage() { 
						var newString = "<div class=\"thumbnails\"><table border=\"0\"  cellpadding=\"20\" width=\"65%\"><tr>";
						var x = 1;
						
						while (x <= numberOfImages) { 
							var y = 1;
							var temp  ="" ;
							while ((y <= numberOfRows) && (x <= numberOfImages)) {
								temp += "<td align=\"center\">"
								temp += "<a name=\"" +  x.toString() + "\" ";
								temp += " href=\"index.html?"  + x.toString()  + "\" >" ;
								temp += "<img src=\"../../images/" + category + "/"   ;
								temp +=  x.toString() ;
								temp +=  "link.jpg\"  alt=\"\" title=\"Click to see Full-Size\" " ;
								temp += "id=\""+ x.toString() + "\" " ;
								temp +=  "onMouseOver=\"blinkImage(" + x.toString() + ")\"  "  ;
								temp +=  "/></a></td>" ;
								x++;
								y++;								
							}
							newString += temp + "</tr>";
						}
						newString += "</table></div>";
						document.getElementById("target").innerHTML = newString ;  
						addLinksToPage();
					}
		
			
	
	function addLinksToPage() { 
			var oldHTML = document.getElementById("target").innerHTML ;
			var newHTML = linksString1 + oldHTML + linksString2;
			document.getElementById("target").innerHTML = newHTML ;
	}	
	
	function swapProfilePhotoIn()
	{
		document.getElementById("profilePhoto").src = "../../images/tech/TaggedAdobeRGB.jpg" ; 		
	}
	
	function swapProfilePhotoOut()
	{
		document.getElementById("profilePhoto").src = "../../images/tech/TaggedsRGB.jpg" ; 		
	}
		
		

		function showImage(x, name) {
			var image = document.getElementById("myImage");
     	  	setOpacity(image, 0);
			image.src='../../images/' + name + '/' + (x) + '.jpg';	
			var browserName=navigator.appName; 
			if (browserName == 'Microsoft Internet Explorer')
			{
				// Don't know what to do with this. How to set height on IE ???
			}
			else
			{
				sizeImage("myImage");	
				
			}
			image.style.visibility = 'visible';
 		    fadeIn("myImage",35);    // start out at 35% - this avoids flickering
		    switch (name) {
				case '2011': title = '2011'; break;
				case 'flowers': title = 'Flower'; break;
				case 'landscape': title = 'Landscape'; break;
				case 'portraits': title = 'Portrait'; break;
				case 'still': title = 'Still Life'; break;
				case 'tulips': title = 'Tulip'; break;
				case 'family': title = 'Lee Family Set 1'; break;
				case 'family2': title = 'Lee Family Set 2'; break;
				default: title = 'Photo';
			}
			document.getElementById("myCaption").innerHTML = title +  ' Number ' + x;
		}
		
		var maxDimension = 550;
		function sizeImage(x) {
			var image = document.getElementById(x);
			var originalHeight = image.naturalHeight;
			var originalWidth = image.naturalWidth;
			var aspectRatio = originalHeight / originalWidth;
			if (aspectRatio >= 1)  // portrait
			{
				image.height = maxDimension;
				image.width = maxDimension / aspectRatio;
				image.style.margin = "0px";
			}
			else // landscape
			{
				image.width = maxDimension;
				image.height = maxDimension * aspectRatio;	
				var newMargin = (maxDimension - image.height) / 2;
				var marginString =  newMargin + "px " + 0 + "px";  // this sets top and bottom margins
				image.style.margin = marginString;
			}
 		}

		// The setOpacity function is passed an object and an opacity value. 
		// It then sets the opacity of the supplied object using four proprietary ways. 
		// It also prevents a flicker in Firefox caused when opacity is set to 100%, by setting the value to 99.999% instead.
		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;
		}
		
		// The fadeIn function uses a Timeout to call itself every "delayInterval" ms with an object Id and an opacity. 
		// The opacity is specified as a percentage and increased "opacityIncrement" at a time. 
		//The loop stops once the opacity reaches 100%:

		var opacityIncrement = 2;   // only increase a little
		var delayInterval = 10;     // wait a long time between flickers
		function fadeIn(objId,opacity) {
			if (document.getElementById) {	
		    	obj = document.getElementById(objId);
		    	if (opacity <= 100) {
		      		setOpacity(obj, opacity);
		      		opacity += opacityIncrement;
		      		window.setTimeout("fadeIn('"+objId+"',"+opacity+")", delayInterval);
		    	}
		  	}
		}