// function to get the position of the x & y
function getAdElementPosition(objElement) {
	var offsetLeft = 0;
	var offsetTop = 0;
	while (objElement) {
		offsetLeft += objElement.offsetLeft;
		offsetTop += objElement.offsetTop;
		objElement = objElement.offsetParent;
	}
	if (navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined") {
		offsetLeft += document.body.leftMargin;
		offsetTop += document.body.topMargin;
	}
	if (navigator.userAgent.indexOf("Mac") != -1) {
		offsetTop = offsetTop - 13;
	}
	return {left:offsetLeft, top:offsetTop}
}

// Determine whether the x-position is on the left 50% of the screen
function IsLeftSide(intXPosition) {
   var intMiddle = $(window).width() / 2;
   if (intXPosition < intMiddle)
      return true;
   else
      return false;
}

// the function to make the div with the thumbnail appear
function showDetailsLarger(objElement, strThumbUrl, strCaption) {
   var objLoc = getAdElementPosition(objElement);
   var topCoords = objLoc.top - 5;   // Display the hover div at the top of the thumbnail.
   var leftCoords;
   if (IsLeftSide(objLoc.left + $(objElement).width() / 2)) {
      // Thumbnail is located on the left 50% of the screen.
      leftCoords = objLoc.left;
   } else {
      leftCoords = objLoc.left - $(objElement).width();
   }
	var objElementToShow = document.getElementById('thumbShower');
	objElementToShow.style.left = leftCoords;
	objElementToShow.style.top = topCoords;
	//document.getElementById('thumbShowerImg').src = "/images/utility/loading_sm.gif";
	document.getElementById('thumbShowerImg').src = strThumbUrl;
	objElementToShow.style.visibility = 'visible';
	objElementToShow.style.display = 'block';
	objElementToShow.style.position = 'absolute';
}

$(document).ready(function() {
   $("img[src*='thumbs/']").click(
	   function(event) {
	      // Find the path the to thumbnail image.
	      var objElement = this; //.children(":first-child").get(0);
	      var strThumbImagePath = objElement.src;
	      // Remove the "/thumbs" directory. Now the image path will point to the full image.
	      var strImagePath = strThumbImagePath.replace(/\/thumbs/i, "");
	      // Remove the "th_" from the beginning from the thumbnail filename.
	      var strModifiedImagePath = strImagePath.replace(/\/th_/i, "/");
	      showDetailsLarger(objElement, strModifiedImagePath, '');
	      // Prevent the user from clicking on the thumbnail and viewing the full image the old way
	      event.preventDefault();
	   });

   $("#thumbShower").click(function() {
      document.getElementById('thumbShower').style.visibility = 'hidden';
      document.getElementById('thumbShower').style.display = 'none';
   });

});