var asyncRequest; // variable to hold XMLHttpRequest object

     var isXML=true;
     var theContent= [];
     var theDivs = [];

        	function getElementsByAttribute(attribute, attributeValue)
	 	   	{

	 	   	  var elementArray = new Array();
	 	   	  var matchedArray = new Array();

	 	   	  if (document.all)
	 	   	  {
	 	   	    elementArray = document.all;
	 	   	  }
	 	   	  else
	 	   	  {
	 	   	    elementArray = document.getElementsByTagName("*");
	 	   	  }

	 	   	  for (var i = 0; i < elementArray.length; i++)
	 	   	  {
	 	   	    if (attribute == "class")
	 	   	    {
	 	   	      var pattern = new RegExp("(^| )" + attributeValue + "( |$)");

	 	   	      if (elementArray[i].className.match(pattern))
	 	   	      {
	 	   	        matchedArray[matchedArray.length] = elementArray[i];
	 	   	      }
	 	   	    }
	 	   	    else if (attribute == "for")
	 	   	    {
	 	   	      if (elementArray[i].getAttribute("htmlFor") || elementArray[i].getAttribute("for"))
	 	   	      {
	 	   	        if (elementArray[i].htmlFor == attributeValue)
	 	   	        {
	 	   	          matchedArray[matchedArray.length] = elementArray[i];
	 	   	        }
	 	   	      }
	 	   	    }
	 	   	    else if (elementArray[i].getAttribute(attribute) == attributeValue)
	 	   	    {
	 	   	      matchedArray[matchedArray.length] = elementArray[i];
	 	   	    }
	 	   	  }

	 	   	  return matchedArray;
	 }

	 function deHightlight()
	 {
	 var thespans=getElementsByAttribute("class","theSpans");
	 for(var i=0; i<thespans.length; i++)
	 {
	 (thespans[i]).style.background= "#FFFFFF";
	 }

}



     function getXMLHttp()
     {

	   var XMLHttp = null;
	   if (window.XMLHttpRequest)
	   {
	     try {
	       XMLHttp = new XMLHttpRequest();
	     } catch (e) { }
	   } else if(window.ActiveXObject) {
	     try {
	       XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
	     } catch (e) {
	       try {
	         XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
	       } catch (e) { }
	     }
	   }
	   return XMLHttp;
}

      // set up and send the asynchronous request.
      function getContent( theurl )
      {

         try
         {
            asyncRequest = getXMLHttp(); // create request object

            // register event handler
            asyncRequest.onreadystatechange = processResponse;
            asyncRequest.open( 'GET', theurl, true ); // prepare the request
            asyncRequest.send( null ); // send the request
         } // end try
         catch ( exception )
         {
            alert( 'Request failed.' );
         } // end catch
      } // end function getContent



      // clear the content of the box
      function clearContent()
      {
         document.getElementById( 'contentArea' ).innerHTML = '';
      } // end function clearContent





   // parses the XML response; dynamically creates a table using DOM and
   // populates it with the response data; displays the table on the page
   function processResponse()
   {
      // if request completed successfully and responseXML is non-null
      if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 &&
          isXML && asyncRequest.responseXML )
      {
         clearTable(); // prepare to display a new set of images

         // get the covers from the responseXML
         var covers = asyncRequest.responseXML.getElementsByTagName(
            "cover" )

         // get base URL for the images
         var baseUrl = asyncRequest.responseXML.getElementsByTagName(
            "baseurl" ).item( 0 ).firstChild.nodeValue;

         // get the placeholder div element named covers
         var output = document.getElementById( "covers" );

         // create a table to display the images
         var imageTable = document.createElement( 'table' );

         // create the tables body
         var tableBody = document.createElement( 'tbody' );

         var rowCount = 0; // tracks number of images in current row
         var imageRow = document.createElement( "tr" ); // create row

         // place images in row
         for ( var i = 0; i < covers.length; i++ )
         {
            var cover = covers.item( i ); // get a cover from covers array

            // get the image filename
            var image = cover.getElementsByTagName( "image" ).
               item( 0 ).firstChild.nodeValue;

            theContent[i] = siteAddr + cover.getElementsByTagName( "content" ).item( 0 ).firstChild.nodeValue;


            // create table cell and img element to display the image
            var imageCell = document.createElement( "td" );

            var theDiv = document.createElement( "div" );

            var theInner = "<span class='theSpans' style='background-color: \"#FFFFFF\";' onclick='deHightlight(); this.style.background= \"#FFFF66\";'><a href=" + baseUrl + escape( image ) + " onclick='clearContent(); getContent(\"" + theContent[i] + "\"); return false;' />" + cover.getElementsByTagName( "title" ).item( 0 ).firstChild.nodeValue + "</a></span>";

            theDiv.innerHTML = theInner;
            //////


           // var imageTag = document.createElement( "img" );


            // set img elements src attribute
           // imageTag.setAttribute( "src", baseUrl + escape( image ) );
           // imageTag.setAttribute("onmouseover", "getContent('" + theContent[i] + "')");
      		//  imageTag.setAttribute("onmouseout","clearContent()");
            imageCell.appendChild(theDiv); // place img in cell


            /////////

            imageRow.appendChild( imageCell ); // place cell in row
            rowCount++; // increment number of images in row

            // if there are 6 images in the row, append the row to
            // table and start a new row
            if ( rowCount == 6 && i + 1 < covers.length )
            {
               tableBody.appendChild( imageRow );
               imageRow = document.createElement( "tr" );
               rowCount = 0;
            } // end if statement

         } // end for statement

         tableBody.appendChild( imageRow ); // append row to table body
         imageTable.appendChild( tableBody ); // append body to table
         output.appendChild( imageTable ); // append table to covers div
      isXML = false;
      } // end if

       else
	              {
	              if( asyncRequest.readyState == 4 && asyncRequest.status == 200  && isXML == false  && asyncRequest.responseText)
	              {
	              document.getElementById( 'contentArea' ).innerHTML =
	                 asyncRequest.responseText; // places text in contentArea
	                 }
            }
   } // end function processResponse

   // deletes the data in the table.
   function clearTable()
   {
      document.getElementById( "covers" ).innerHTML = '';
   }// end function clearTable