var picArray = new Array();
var widthArray = new Array();
var heightArray = new Array();
var captionArray = new Array();
var titleArray = new Array();
var idArray = new Array();
var commentArray = new Array();

var pic;
var width;
var height;
var caption;
var title;
var comment;
var id;

var img="";

var xmlHttp = createXmlHttpRequestObject(); 




function createXmlHttpRequestObject() 
{	
  var xmlHttp;
  if(window.ActiveXObject)
  {
    try
    {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e) 
    {
      xmlHttp = false;
    }
  }
  else
  {
    try 
    {
      xmlHttp = new XMLHttpRequest();
    }
    catch (e) 
    {
      xmlHttp = false;
    }
  }
  if (!xmlHttp) 
    alert("Error creating the XMLHttpRequest object.");
  else 
    return xmlHttp;
}



function process()
{
  if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
  { 
	send="javascript/random_pic.php";
    xmlHttp.open("GET",send, true);  
    xmlHttp.onreadystatechange = handleServerResponse;
    xmlHttp.send(null);
  }
  else
    setTimeout('process()', 1000);
}

// executed automatically when a message is received from the server
function handleServerResponse() 
{	
   if (xmlHttp.readyState == 4) 
  {
    if (xmlHttp.status == 200) 
    {  
      xmlResponse = xmlHttp.responseXML;
      xmlDocumentElement = xmlResponse.documentElement;
      picArray=xmlDocumentElement.getElementsByTagName("picture");
      widthArray=xmlDocumentElement.getElementsByTagName("width");      
      heightArray=xmlDocumentElement.getElementsByTagName("height");
      captionArray=xmlDocumentElement.getElementsByTagName("caption");
      titleArray=xmlDocumentElement.getElementsByTagName("title");
      idArray=xmlDocumentElement.getElementsByTagName("id");
      commentArray=xmlDocumentElement.getElementsByTagName("comment");
      display();
    } 
    else 
    {
      alert("There was a problem accessing the server: " + xmlHttp.statusText);
    }
  }
}


function display(){
	pic=picArray.item(0).firstChild.data;
	width=widthArray.item(0).firstChild.data;
	height=heightArray.item(0).firstChild.data;
	caption=captionArray.item(0).firstChild.data;
	title=titleArray.item(0).firstChild.data;
	id=idArray.item(0).firstChild.data;
	comment=commentArray.item(0).firstChild.data;
	var picDiv=document.getElementById("pic");
	img='<a style="color: blue;" href="http://www.sfcityguides.org/public_guidelines.html?article='+id+'&submitted=TRUE&srch_text=&submitted2=&topic='+comment+'"> '+'<img style="vertical-align: middle;" src="images/guidelines/'+pic+'" alt="" border="0" width="'+width+' height="'+height+'" /></a>'+'<p style="color: olive;">'+caption+' - From the article:<a style="color: blue;" href="http://www.sfcityguides.org/public_guidelines.html?article='+id+'&submitted=TRUE&srch_text=&submitted2=&topic='+comment+'"> '+title+'</a></p>';
	picDiv.innerHTML=img;	
	setTimeout("process()",10000);
}