var thumbnailsPerCol = 5;

    var myRequest = createHTTPRequest();
	var dispFunc = null;
	var propertyXML = null;
	var prevPropertyID = null;


	// CLEAN
	function selectProperty(id)
	{
		// Reset property table cells
		document.getElementById("cellPhoto").innerHTML = "";
		if (prevPropertyID != null)
    {
      $('property' + prevPropertyID).removeClassName('propertySelected');
    }
    
		prevPropertyID = id;
    $('property' + id).addClassName('propertySelected');

		// Hide the property info popup window if it is displayed
		hidePropertyPopup();

		// Load property info and display the thumbnails
		dispFunc = showThumbnails;
		getPropertyInfo(id, dispFunc);
	}

	// CLEAN
	function showThumbnails()
	{
		// Resize the thumbnail based on the window size
		// HOW CAN I CHANGE THE STYLE FOR THE CLASS "thumbnail" TO USE THE DIMENSION DETERMINED ABOVE?!?!?!?
		//var heightAdjust = 95;
		//var thumbSizeMin = 50;
		//var thumbSizeMax = 125;
		//var thumbSize = Math.floor((document.getElementById("cellThumbnails").clientHeight - heightAdjust) / 5);
		//if (thumbSize < thumbSizeMin)
		//	thumbSize = thumbSizeMin;
		//else if (thumbSize > thumbSizeMax)
		//	thumbSize = thumbSizeMax;
        
    // Hard-coding thumbnail size until calculation can be fixed.
    thumbSize = 75;

		// Generate the thumbnails table
		var categories = propertyXML.documentElement.getElementsByTagName("category");
		var photoTable = '<table id="thumbnails"><tr><td colspan="' + categories.length + '" class="thumbnailInstruct">' +
		                 'Click A Thumbnail</td></tr><tr>';
		for (var i = 0; i < categories.length; i++)
		{
			var categoryName = categories[i].getAttribute("name");
			var photos = categories[i].childNodes;

			if (i == 0)
				var columnClass = "thumbnailHeaderLeft";
			else
				var columnClass = "thumbnailHeaderRight";
			photoTable += '<td class="' + columnClass + '">' + categoryName + '<br />';

      // Calculate the number of columns needed to display the thumbnails
      var numCols = Math.ceil(photos.length / thumbnailsPerCol);
            
      // Calculate the number of rows needed to display the thumbnails
      if (photos.length < thumbnailsPerCol)
        numRows = photos.length;
      else
        numRows = thumbnailsPerCol;

      // Generate the photo table
      var photoIdx = 0
      photoTable += '<table>';
			for (var j = 0; j < numRows; j++)
			{
        photoTable += '<tr>';
        for (var k = 0; k < numCols; k++)
        {
          photoIdx = j + (k * thumbnailsPerCol)
          if (photoIdx < photos.length)
          {
            var thumbSrc = photos[photoIdx].getElementsByTagName("thumbnail")[0].getAttribute("src");
            var photoID = photos[photoIdx].getAttribute("id");
            var photoLink = '<td style="padding: 0px; margin: 0px;"><img src="' + thumbSrc + '" onClick="showPhoto(\'' + photoID + '\')"' +
                            ' class="thumbnail" style="width: ' + thumbSize + '; height: ' + thumbSize + ';"></td>';
            photoTable += photoLink;
          }
          else
          {
            photoTable += '<td>&nbsp;</td>';
          }
        }
        photoTable += '</tr>';
			}
			photoTable += '</table></td>';
		}
		photoTable += '</tr>';

		// Only add the property details link if there is a description
		if (propertyXML.documentElement.getElementsByTagName("description")[0].hasChildNodes())
			photoTable += '<tr><td colspan="' + categories.length + '" id="propertyPopupLinks" class="propertyPopupLinks">'+
                    '<a id="propertyPopupLink" class="propertyPopupLink" href="javascript:showPropertyPopup();">' +
                    'Property Details</a></td></tr>';
		photoTable += '</table>';

		document.getElementById("cellThumbnails").innerHTML = photoTable;
	}

	// REWRITE TO LOOKUP FULLSIZE SRC BASED ON photoID
	function showPhoto(photoID)
	{
		// Resize the fullsize photo based on the window size
/*		var photoX = document.getElementById("cellThumbnails").clientWidth - 20;
		var photoY = document.getElementById("cellThumbnails").clientHeight - 20;
		if (photoX < photoY)
			photoSize = Math.floor(photoX);
		else
			photoSize = Math.floor(photoY);
		if (photoSize < 300)
			photoSize = 300;
		else if (photoSize > 600)
			photoSize = 600;
*/
		photo = '<img src="/images/gallery/' + photoID + '.jpg" class="photo">';
		document.getElementById("cellPhoto").innerHTML = photo;
	}

	// SHOULD THE DESCRIPTION USE SUBNODES?
	function showPropertyPopup()
	{
		// Determine where to locate the property popup
		var popupLeft = 0;
		var popupTop = 0;
		var popupHeight = document.getElementById("propertyPopup").offsetHeight;
		var popupWidth = document.getElementById("propertyPopup").offsetWidth;
		var cellHeight = document.getElementById("cellPhoto").offsetHeight;
		var cellWidth = document.getElementById("cellPhoto").offsetWidth;
		var popupReference = document.getElementById("cellPhoto");
		var popupXShift = -10;
		var popupYShift = -10;

		if (popupReference.offsetParent)
		{
			popupLeft = popupReference.offsetLeft;
			popupTop = popupReference.offsetTop;

			while (popupReference = popupReference.offsetParent)
			{
				popupLeft += popupReference.offsetLeft;
				popupTop += popupReference.offsetTop;
			}
		}
		popupLeft += cellWidth - popupWidth + popupXShift;
		popupTop += cellHeight - popupHeight + popupYShift;

		var title = propertyXML.documentElement.getElementsByTagName("title")[0].lastChild.nodeValue;
		var description = propertyXML.documentElement.getElementsByTagName("description")[0].lastChild.nodeValue;
		document.getElementById("propPopupTitleBar").innerHTML = title;
		document.getElementById("propertyPopupText").innerHTML = description;
		document.getElementById("propertyPopup").style.left = popupLeft;
		document.getElementById("propertyPopup").style.top = popupTop;
		document.getElementById("propertyPopup").style.visibility = "visible";
	}

	// CLEAN
	function hidePropertyPopup()
	{
		document.getElementById("propertyPopup").style.visibility = "hidden";
	}

	// CLEAN
	function createHTTPRequest()
	{
		var request = false;

		try	{ request = new XMLHttpRequest(); }
		catch(err)
		{
			try	{ request = new ActiveXObject("Msxml2.XMLHTTP"); }
			catch(err)
			{
				try	{ request = new ActiveXObject("Microsoft.XMLHTTP"); }
				catch(err)	{ request = false; }
			}
		}

		return request;
	}

	// CLEAN
	function getPropertyInfo(id, respFunc)
	{
		var cacheKill = parseInt(Math.random() * 99999999);
		var ajaxURL = "/library/getPropertyInfo.php?id=" + id + "&cache=" + cacheKill;

		myRequest.open("GET", ajaxURL, true);
		myRequest.onreadystatechange = function()
		{   
			if (myRequest.readyState == 4)
			{
				if (myRequest.status == 200)
				{
					propertyXML = myRequest.responseXML;
					respFunc();
				}
				else
					alert("Error retrieving property info");
			}
		}
		myRequest.send(null);   
	}