// Flags
var isLoaded = 0;
var tLoaded = 0;
var cLoaded = 0;
var tableBuilt = 0;

// Thumbs and Captions array declarations
var thumbs = new Array();
var captions = new Array();

/**
 * Loads the gallery.
 *
 * This function loads handles the calling of the SAJAX 
 * functions to load the three main parts of the Gallery,
 * Thumbs (building tha actual table), thumb names, and captions.
 * 
 * After loading it will set a flag so the contents do not
 * get loaded multiple times if the user closes out the 
 * gallery and decides to later go back in and view pictures
 * on the same page view.
 *
 **/
function LoadPhotoGallary()
{
	if (isLoaded == 1)
	{
		gallery(true);
	}
	else
	{
		// Set the loading gif and display it while the gallery loads
		document.getElementById("loadingImage").src = "/images/gallery_loading.gif";
		document.getElementById("map_panel").style.display = "none";
		document.getElementById("photo_panel").style.display = "none";
		document.getElementById("load_panel").style.display = "block";

		x_loadGallery("INIT", build_gallery);    // Build the table of thumbnails
		x_loadGallery("THUMBS", set_thumbs);     // Get the thumbnail names
		x_loadGallery("CAPTIONS", set_captions); // Get the image captions

		isLoaded = 1; // Flag the loading as complete.
	}
}

/**
 * Checks to see if all parts are completely loaded.
 *
 * This function checks to make sure all three sections are loaded 
 * before displaying the gallery to the user. It does this by 
 * checking flags set by each load function. If all the flags are
 * set to 1 then it's time to show the gallery to the user.
 *
 **/
function checkComplete()
{
	if (tLoaded == 1 && cLoaded == 1 && tableBuilt == 1)
	{
		x_loadGallery("SHOW", show_gallery);
	}
}

/**
 * Fills the thumbnail array.
 *
 * This funtion fills the thumbnail array. This is used to load
 * the large image each time a thumbnail is clicked.
 *
 * After this is complete it sets a flag indicating so and
 * calls the checkCOmplete() function.
 *
 * @param string result [AJAX result string]
 *
 **/
function set_thumbs(results)
{
	// Split the results into a clean Javascript Array
	var aUpdated = new Array()
	aUpdated = results.split("|");

	for (var i = 0; i < aUpdated.length; i++)
	{
		thumbs[i] = aUpdated[i];
	}
	tLoaded = 1;
	checkComplete();
}

/**
 * Fills the captions array.
 *
 * This funtion fills the caption array. This is used to display 
 * the correct caption when a thumbnail is clicked.
 *
 * After this is complete it sets a flag indicating so and
 * calls the checkCOmplete() function.
 *
 * @param string result [AJAX result string]
 *
 **/
function set_captions(results)
{
	// Split the results into a clean Javascript Array
	var aUpdated = new Array()
	aUpdated = results.split("|");

	for (var i = 0; i < aUpdated.length; i++)
	{
		captions[i] = aUpdated[i];
	}
	cLoaded = 1;
	checkComplete();

}

/**
 * Displays the gallery to the user.
 *
 * This funtion sets the initial image by calling the shoOne()
 * function with an argument of '0' setting the default first
 * image.
 *
 * After this is set it displays the photo panel to the user.
 *
 * @param string result [AJAX result string]
 *
 **/
function show_gallery($results)
{
	// Show the initial gallery
	showOne(0);

	document.getElementById("map_panel").style.display = "none";
	document.getElementById("photo_panel").style.display = "block";
	document.getElementById("load_panel").style.display = "none";
}

/**
 * Build the table of thumbnails
 *
 * This funtion builds the HTML table dynamically
 * with the results of the AJAX query. The table 
 * includes all the thumbnails that the user will 
 * click to view teh high res image.
 *
 * After this is complete it sets a flag indicating so and
 * calls the checkCOmplete() function.
 *
 * @param string result [AJAX result string]
 *
 **/
function build_gallery(results)
{
	// Split the results into a clean Javascript Array
	var aUpdated = new Array()
	aUpdated = results.split("[|]");

	// now lets loop through and built the table...
	var row;
	var rowPadding;
	var td =  new Array();
	var img = new Array();

	var count = 0;
	var tdCount = 0;

	var tbody = document.getElementById('GalleryTable').getElementsByTagName('TBODY')[0];

	for (var i = 0; i < aUpdated.length; i++)
	{
		if (count % 4 == 3)
		{
			// Create the row
			try
			{
				row = document.createElement("<tr>");
			}
			catch (e)
			{
				row = document.createElement("tr");
			}

			// Build the last TD element
			$imageData = aUpdated[i].split("|");
			rowPadding = "padding:0px 0px 10px 5px;";
			try
			{
				td[tdCount] = document.createElement("<td style=\""+rowPadding+"\">");
			}
			catch (e)
			{
				td[tdCount] = document.createElement("td");
				td[tdCount].setAttribute("style", rowPadding);
			}

			try
			{
				img[tdCount] = document.createElement("<img src=\"/images/photo_gallery/"+$imageData[0]+"\" alt=\""+$imageData[1]+"\" title=\""+$imageData[1]+"\" style=\"cursor:pointer;\" id=\""+$imageData[2]+"\" onclick=\"showOne("+count+");\" />");
			}
			catch (e)
			{
				img[tdCount] = document.createElement("img");
				img[tdCount].setAttribute("src", "/images/photo_gallery/"+$imageData[0]);
				img[tdCount].setAttribute("alt", $imageData[1]);
				img[tdCount].setAttribute("title", $imageData[1]);
				img[tdCount].setAttribute("style", "cursor:pointer;");
				img[tdCount].setAttribute("id", $imageData[2]);
				img[tdCount].setAttribute("onclick", "showOne("+count+");");
			}

			// Build the Row
			for (var j = 0; j < 4; j++)
			{

				td[j].appendChild(img[j]);
				row.appendChild(td[j]);
			}

			// Attach the row to the table
			tbody.appendChild(row);

			tdCount = 0;
		}
		else
		{
			// Create the td and img elements
			$imageData = aUpdated[i].split("|");

			if (count % 4 == 0)
			{
				rowPadding = "padding:0px 5px 10px 0px;";
			}
			else if (count % 4 == 3)
			{
				rowPadding = "padding:0px 0px 10px 5px;";
			}
			else
			{
				rowPadding = "padding:0px 5px 10px 5px;";
			}

			try
			{
				td[tdCount] = document.createElement("<td style=\""+rowPadding+"\">");
			}
			catch (e)
			{
				td[tdCount] = document.createElement("td");
				td[tdCount].setAttribute("style", rowPadding);
			}


			try
			{
				img[tdCount] = document.createElement("<img src=\"/images/photo_gallery/"+$imageData[0]+"\" alt=\""+$imageData[1]+"\" title=\""+$imageData[1]+"\" style=\"cursor:pointer;\" id=\""+$imageData[2]+"\" onclick=\"showOne("+count+");\" />");
			}
			catch (e)
			{
				img[tdCount] = document.createElement("img");
				img[tdCount].setAttribute("src", "/images/photo_gallery/"+$imageData[0]);
				img[tdCount].setAttribute("alt", $imageData[1]);
				img[tdCount].setAttribute("title", $imageData[1]);
				img[tdCount].setAttribute("style", "cursor:pointer;");
				img[tdCount].setAttribute("id", $imageData[2]);
				img[tdCount].setAttribute("onclick", "showOne("+count+");");
			}

			tdCount++;
		}
		count++;
	}

	// Now remove the placeholder row
	var row = document.getElementById('galleryPlaceholder');
	// Remove the ROW
	tbody.removeChild(row);

	tableBuilt = 1;
	checkComplete();
}


/**
 *
 * THE FOLLOWING FUNCTIONS WERE PREVIOUSLY CODED AND HAVE NOT BEEN ALTERED... 
 * 
 * Thats a lie... I did alter moveNext() and movePreviously() to work with 
 * the way SAJAX returned the data. I changed this line in both functions...
 *
 * REVISION: 3/10/08 - Miah
 * var maxPosition = parseInt(thumbs.length - 1); to var maxPosition = parseInt(thumbs.length - 2);
 *
 * I changed it as it was breaking the next and previous buttons and not letting the gallery loop 
 * correctly.
 *
 **/


function inArr(value, arr)
{
	for(x=0; x<arr.length; x++)
	{
		if(arr[x] == value)		return true;
	}
	return false;
}

var picCounter = 0;

function showOne(thumbnail)
{
	// alert("");
	document.getElementById("big_photo").src = "/images/photo_gallery/"+thumbs[thumbnail];
	document.getElementById("photo_caption").innerHTML = captions[thumbnail];
	picCounter = thumbnail;
}

function moveNext()
{
	var maxPosition = parseInt(thumbs.length - 2);
	var minPosition = 0;

	if(picCounter >= minPosition && picCounter < maxPosition)
	{
		picCounter++;
		document.getElementById("big_photo").src = "/images/photo_gallery/"+thumbs[picCounter];
		document.getElementById("photo_caption").innerHTML = captions[picCounter];
	}
	else
	{
		picCounter = minPosition;	//reset back to the top of the list
		document.getElementById("big_photo").src = "/images/photo_gallery/"+thumbs[picCounter];
		document.getElementById("photo_caption").innerHTML = captions[picCounter];
	}
}

function movePrev()
{
	var maxPosition = parseInt(thumbs.length - 2);
	var minPosition = 0;

	//alert(thumbs.length);
	//alert(picCounter);

	if(picCounter > minPosition && picCounter <= maxPosition)
	{
		picCounter--;
		document.getElementById("big_photo").src = "/images/photo_gallery/"+thumbs[picCounter];
		document.getElementById("photo_caption").innerHTML = captions[picCounter];
	}
	else
	{

		picCounter = maxPosition;
		//alert(picCounter);
		document.getElementById("big_photo").src = "/images/photo_gallery/"+thumbs[picCounter];
		document.getElementById("photo_caption").innerHTML = captions[picCounter];
	}
}

function gallery(show)
{
	if(show)
	{
		document.getElementById("map_panel").style.display = "none";
		document.getElementById("photo_panel").style.display = "block";
	}
	else
	{
		document.getElementById("photo_panel").style.display = "none";
		document.getElementById("map_panel").style.display = "block";
	}
}