// holds an instance of XMLHttpRequest

var xmlHttp = createXmlHttpRequestObject();
var globalAction = ""; 	// keeps track of which operation is currently being done
var globalIDNum = 0; 	// keeps track of which record ID is being operated on
var isFirstPage = true; //stores if the gallery shows first 8 photos

// creates an XMLHttpRequest instance

function createXmlHttpRequestObject()
{
	var xmlHttp;	// reference to the XMLHttpRequest object
	
	// Create the XMLHttpRequest Object for all versions of IE up to and including IE6
	try
	{
		// try to create XMLHttpRequest object
		
		xmlHttp = new XMLHttpRequest();
	}
	catch(e)
	{
		// assume IE6 or older
		
		var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP");
		
		// try every ID until on works
		
		for (var i=0; i < XmlHttpVersions.length && !xmlHttp; i++)
		{
			try
			{
				// try to create the XMLHttpRequest object
				
				xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
				
			}
			catch(e){}
		}
	}
		
	// return the created object or display an error message
		
	if(!xmlHttp)
	{
		alert("Error creating the XMLHttpRequest object.");
	}
	else
	{
		return xmlHttp;
	}
}

//get previous 8 photos
function getPrevPhotos(popertyId)
{
	//check if the gallery shows first 8 photos now
	if(isFirstPage) return;
	
	if(xmlHttp)
	{
		globalIDNum = popertyId;
		
		try
		{		
			// Connect asynchonously to the php to update database
			var method = "POST";		// Set to the method ("GET" or "POST") used to pass variables to the server-side page
			var url = "loadPictures.php";	// Set to the url of the server-side page being connected to
			var async = true;			// Setting this argument to true is the backbone of AJAX. It allows for connecting to 
				
			var params = "action=loadPrev"+"&property_id=" + popertyId; // Parameters to be passed.
			
			xmlHttp.open(method, url, async);
			xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');	// Set the Content-Type Header
			xmlHttp.onreadystatechange = refreshPictures;	// Set to the function that will handle the state change
			xmlHttp.send(params);	
		}		
		// display the error in case of failure
		catch(e)
		{
			alert("Can't connect to server:\n" + e.toString());
		}
	}
}

//get next 8 photos
function getNextPhotos(popertyId)
{
	if(xmlHttp)
	{		
		globalIDNum = popertyId;
		isFirstPage = false;
		
		try
		{		
			// Connect asynchonously to the php to update database
			var method = "POST";		// Set to the method ("GET" or "POST") used to pass variables to the server-side page
			var url = "loadPictures.php";	// Set to the url of the server-side page being connected to
			var async = true;			// Setting this argument to true is the backbone of AJAX. It allows for connecting to 
				
			var params = "action=loadNext"+"&property_id=" + popertyId; // Parameters to be passed.
			
			xmlHttp.open(method, url, async);
			xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');	// Set the Content-Type Header
			xmlHttp.onreadystatechange = refreshPictures;	// Set to the function that will handle the state change
			xmlHttp.send(params);	
		}		
		// display the error in case of failure
		catch(e)
		{
			alert("Can't connect to server:\n" + e.toString());
		}
	}
}

//show these 8 photos
function refreshPictures()
{
	// We wait until the server is ready to respond
	if(xmlHttp.readyState == 4)
	{
		// only continue if status is 200 or OK
		if(xmlHttp.status == 200)
		{
			try
			{
				var response = xmlHttp.responseText;
				var photoArr = response.split('delimiter');
				
				// Handle the server's response
				var photoBox = document.getElementById("photoBox");	
					
				photoBox.innerHTML = '<table width="100%" border="0" cellspacing="0" cellpadding="3"><tr><td>'+photoArr[0]+'</td><td>'+photoArr[1]+'</td></tr><tr><td>'+photoArr[2]+'</td><td>'+photoArr[3]+'</td></tr><tr><td>'+photoArr[4]+'</td><td>'+photoArr[5]+'</td></tr><tr><td>'+photoArr[6]+'</td><td>'+photoArr[7]+'</td></tr><tr><td align="center"><img src="images/prev.png" style="background-color:#DFDFDF;cursor:pointer;" title="Prev 8 pages" onclick="getPrevPhotos('+globalIDNum+')"/></td><td align="center"><img src="images/next.png"  style="background-color:#DFDFDF;cursor:pointer;" title="Next 8 pages" onclick="getNextPhotos('+globalIDNum+')"/></td></tr></table>';
			}
			catch(e)
			{
				// display error message
				alert("Error reading the response: " + e.toString());
			}
		}
		else
		{
			// display status message
			alert("There was a problem retrieving the data:\n" + xmlHttp.statusText);
		}
	}
}

// called to read a file from the server
function process(action,IDNum, IDNum2)
{
	// only continue if xmlHttp isn't void
	
	if(xmlHttp)
	{
		globalAction = action;				// Set the globalAction
		globalIDNum = IDNum;				// Set the globalIDNum
		globalIDNum2 = IDNum2;				// Set the globalIDNum
		// try to connect to the server
		
		
		try
		{
			
			// Change the div contents from plain text to a Select Box
			
			
			
			
			if(action == "ChangePicture")
			{
				// Connect asynchonously to the php to update database
				var method = "POST";		// Set to the method ("GET" or "POST") used to pass variables to the server-side page
				var url = "ChangePicture.php";	// Set to the url of the server-side page being connected to
				var async = true;			// Setting this argument to true is the backbone of AJAX. It allows for connecting to 
											// a server-side page for processing asynchronously.

				//var doc = document.form1; // reference the form being used
				var params = "action=" + globalAction + "&property_id=" + globalIDNum + "&seq=" + globalIDNum2; // Parameters to be passed.
			
				xmlHttp.open(method, url, async);
				xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');	// Set the Content-Type Header
				xmlHttp.onreadystatechange = handleStateChange;	// Set to the function that will handle the state change
				xmlHttp.send(params);	// Set to the parameter list (as a string) being passed to the server-side script
										// If using the "GET" method, this should be set to null.

			}
			
			
			
		}
		
		// display the error in case of failure
		catch(e)
		{
			alert("Can't connect to server:\n" + e.toString());
		}
	}
}

// function that handles the response from the HttpRequestObject
function handleStateChange()
{
	// We wait until the server is ready to respond
	if(xmlHttp.readyState == 4)
	{
		// only continue if status is 200 or OK
		if(xmlHttp.status == 200)
		{
			try
			{
				// Handle the server's response
				
				// Change the div Text to a Select Box
				
				
				if(globalAction == "ChangePicture")
				{
					var divName = document.getElementById("LoadPhoto");					
					divName.innerHTML = '<div id="LoadPhoto">' + xmlHttp.responseText + '</div>';
				}
				
				


			}
			catch(e)
			{
				// display error message
				alert("Error reading the response: " + e.toString());
			}
		}
		else
		{
			// display status message
			alert("There was a problem retrieving the data:\n" + xmlHttp.statusText);
		}
	}
}