// initialize XMLHttpRequest object
var xmlobj=null;
var loaded=false;
var pics=new Array();

//initializes XmlHTTPRequest object. For AJAX
function sendRequest(file){
    // check for existing requests
    if(xmlobj != null && xmlobj.readyState != 0&&xmlobj.readyState != 4){
        xmlobj.abort();
    }
 	if (window.XMLHttpRequest) { // Mozilla, Safari, ...
		xmlobj = new XMLHttpRequest();
		xmlobj.overrideMimeType('text/xml');
	} else if (window.ActiveXObject) { // IE
		//try to get the most modern implementation
		var list = ["Microsoft.XmlHttp", "MSXML2.XmlHttp","MSXML2.XmlHttp.3.0","MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.5.0"];
		var ok = false;
		var i = 5;
		while (i>=0 && ok == false)
		{
			try
			{
				xmlobj = new ActiveXObject(list[i]);
				ok = true;
			}
			catch (e)
			{}
			i--;
		}
	}
	if (!xmlobj) {
		alert('Giving up:( Cannot create an XMLHTTP instance');
		return false;
	}
    
	// assign state handler
    xmlobj.onreadystatechange = function(){
        stateChecker();
    }
    // open socket connection
    xmlobj.open('GET',file,true);
    // send request
    xmlobj.send(null);
}

// check request status
function stateChecker(){
    // if request is completed

	if(xmlobj.readyState==4){
        preloadImages();
	    displayImage(0);
	    loaded = true;
	}
}

// preload images
function preloadImages(){
    // get image collection
	var xml = xmlobj.responseXML;
	if (!xml || !xml.documentElement)
	{
		//IE doesn't always see the response correctly
		//this fixes the problem
		if (window.ActiveXObject)
		{
			xml = new ActiveXObject("MSXML2.DOMDocument");
			xml.loadXML(xmlobj.responseText);
		}
	}
    var imgcol = xml.getElementsByTagName('image');
    for(var i=0; i<imgcol.length; i++){
        // preload images
        pics[i] = new Image();
        pics[i].src = imgcol[i].firstChild.nodeValue + '.jpg';
    }
} 

//display the image with a given id
function displayImage(elemid){
    var cdiv = document.getElementById('container');
    if(!cdiv)
	{
		createImageContainer()
	};
    var newpic = pics[elemid];
    var oldpic = document.getElementById('largepic');
    if(!oldpic){return};
    oldpic.setAttribute('src',newpic.src);
}

//creates the tag/container that will hold the image displayed on the screen
function createImageContainer(){
    // create image container
    var cdiv = document.createElement('div');
    cdiv.setAttribute('id','container');
    cdiv.style.position = "absolute";
    cdiv.style.left = "400px";
    cdiv.style.top = "200px";
    cdiv.style.border = "1px solid black";
   
    var img = document.createElement('img');
    img.setAttribute('width','285');
    img.setAttribute('height','220');
    img.setAttribute('id','largepic');
    cdiv.appendChild(img);
    document.getElementsByTagName('body')[0].appendChild(cdiv);
}

//called when the page is first loaded
function run(){
	if (!loaded){
		sendRequest('images.xml');
	}
(this.id)
}