// holds an instance of XMLHttpRequest
var xmlHttpPhotos = createXmlHttpRequestObject();
var bigImagesArray = new Array();
var photoDescriptionsArray = new Array();
var numberOfGalleryPhotos = 0;

// creates an XMLHttpRequest instance
function createXmlHttpRequestObject() 
{
  // will store the reference to the XMLHttpRequest object
  var xmlHttpPhotos;
  // this should work for all browsers except IE6 and older
  try
  {
    // try to create XMLHttpRequest object
    xmlHttpPhotos = new XMLHttpRequest();
  }
  catch(e)
  {
    // assume IE6 or older
    var XmlHttpVersions = new Array('MSXML2.xmlHttpPhotos.6.0',
                                    'MSXML2.xmlHttpPhotos.5.0',
                                    'MSXML2.xmlHttpPhotos.4.0',
                                    'MSXML2.xmlHttpPhotos.3.0',
                                    'MSXML2.XMLHTTP',
                                    'Microsoft.XMLHTTP');
    // try every prog id until one works
    for (var i=0; i<XmlHttpVersions.length && !xmlHttpPhotos; i++) 
    {
      try 
 
      { 
        // try to create XMLHttpRequest object
        xmlHttpPhotos = new ActiveXObject(XmlHttpVersions[i]);
      } 
      catch (e) {}
    }
  }
  // return the created object or display an error message
  if (!xmlHttpPhotos)
    alert("Error creating the XMLHttpRequest object.");
  else 
    return xmlHttpPhotos;
}

// read a file from the server
function displayPhotos() {
	
	var contentScroller = document.getElementById('contentscroller');
	contentScroller.innerHTML = "<div style=\"width:100%;text-align:center\"><img src=\"images/loader.gif\" alt=\"WAIT! It's loading...\" /></div>";
	
  // only continue if xmlHttp isn't void
  if (xmlHttpPhotos)
  {
    // try to connect to the server
    try
    {
	
	var theUrl = "processing/getphotos.php";
    	// initiate reading a file from the server
    	xmlHttpPhotos.open("GET", theUrl, true);
    	xmlHttpPhotos.onreadystatechange = handleRequestStateChangePhotos;
    	xmlHttpPhotos.send(null);
		
    }
    // display the error in case of failure
    catch (e)
    {
		contentScroller.innerHTML = "There was a problem loading the Gallery. Please try again later.";
      	//alert("Can't connect to server:\n" + e.toString());
    }
  }
}

// function called when the state of the HTTP request changes
function handleRequestStateChangePhotos() 
{
	var contentScroller = document.getElementById('contentscroller');
  // when readyState is 4, we are ready to read the server response
  if (xmlHttpPhotos.readyState == 4) 
  {
    // continue only if HTTP status is "OK"
    if (xmlHttpPhotos.status == 200) 
    {
      try
      {
        // do something with the response from the server
        handleServerResponsePhotos();
      }
      catch(e)
      {
        // display error message
        //alert("Error reading the response: " + e.toString());
		contentScroller.innerHTML = "There was a problem loading the Gallery. Please try again later.";
      }
    } 
    else
    {
      // display status message
     // alert("There was a problem retrieving the data:\n" +             xmlHttpPhotos.statusText);
	 	contentScroller.innerHTML = "There was a problem loading the Gallery. Please try again later.";
    }
  }
}

 
// handles the response received from the server
function handleServerResponsePhotos()
{
	pageTracker._trackPageview("/photos" );
  	// read the message from the server
  	var xmlResponsePhotos = xmlHttpPhotos.responseXML;
	if (typeof document.all == "undefined") {
		xmlResponsePhotos.normalize();
	}
	
  	// obtain the XML's document element
 	 xmlRootPhotos = xmlResponsePhotos.documentElement;  
  	// obtain arrays with manufacturer names and ids 
	var thumbsArray = xmlRootPhotos.getElementsByTagName("thumb");
	var imagesArray = xmlRootPhotos.getElementsByTagName("image");
	var descrsArray = xmlRootPhotos.getElementsByTagName("description");
  	// generate HTML output
	var htmlphotos = "";
  	// iterate through the arrays and create an HTML structure
	if(thumbsArray.length < 1) {
		htmlphotos += "There are no photos in the gallery. Come back and check later!";
	} else {
		var counter = 0;
		//create thumbs layout
		for (var i=0; i < thumbsArray.length; i++) {
			htmlphotos += "<div class=\"thumb\">";
			htmlphotos +=  "<img onclick=\"window.showPhotoPanel('" + imagesArray.item(i).firstChild.data + "', '" + counter + "');\" src=\"photos/gallery/" + thumbsArray.item(i).firstChild.data + "\" />";
			htmlphotos += "</div>";
			window.bigImagesArray[counter] = imagesArray.item(i).firstChild.data;
			window.photoDescriptionsArray[counter] = descrsArray.item(i).firstChild.data;
			counter++;
			//htmlphotos += thumbsArray.item(i).firstChild.data;
		}
		window.numberOfGalleryPhotos = thumbsArray.length;
		
	
	}

	document.getElementById('contentscroller').innerHTML = htmlphotos;
	
}