var xmlHttp;
var requestType = "";

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}

function loadXML(url) {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}
    
function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
			showThumbnails();
        }
    }
}

function showThumbnails() {
    var xmlDoc = xmlHttp.responseXML;
    var productList = xmlDoc.getElementsByTagName("product");
    var showThumbs = '';
    for(var i = 0; i < productList.length; i++) {
        product = productList[i];
        var title = product.getElementsByTagName("title")[0].firstChild.nodeValue;
        var img = product.getElementsByTagName("img")[0].firstChild.nodeValue;
   		var medium = product.getElementsByTagName("medium")[0].firstChild.nodeValue; 	
    	var year = product.getElementsByTagName("year")[0].firstChild.nodeValue; 
 
        
		showThumbs += "<div class='thumimgcont'><a href='product.html?image=";
		showThumbs += img;
		showThumbs += "&title=";
		showThumbs += title;		
		showThumbs += "&year=";
		showThumbs += year;
		showThumbs += "&medium="; 
		showThumbs += medium;
		showThumbs +="'><img src=images/";
	    showThumbs += img;
	    showThumbs += "-sm.jpg id='image_";
	    showThumbs += i;
	    showThumbs += "' /><br><span>";
		showThumbs += title;
		showThumbs += "</span></a></div>";
    }
	document.getElementById("thumbs").innerHTML=showThumbs;
}



function showDetails(numberOfNodes) {
    var xmlDoc = xmlHttp.responseXML;
    var title = xmlDoc.getElementsByTagName("title")[numberOfNodes].firstChild.nodeValue; 
    var year = xmlDoc.getElementsByTagName("year")[numberOfNodes].firstChild.nodeValue; 
    var size = xmlDoc.getElementsByTagName("size")[numberOfNodes].firstChild.nodeValue; 
    var medium = xmlDoc.getElementsByTagName("medium")[numberOfNodes].firstChild.nodeValue; 
    var edition = xmlDoc.getElementsByTagName("edition")[numberOfNodes].firstChild.nodeValue; 
    var price = xmlDoc.getElementsByTagName("price")[numberOfNodes].firstChild.nodeValue; 
    var img = xmlDoc.getElementsByTagName("img")[numberOfNodes].firstChild.nodeValue; 
    var showImage = '';
	showImage += "<img src="
	showImage += img;
	showImage += "-sm.jpg /></div>";
    document.getElementById("title").innerHTML=title;
    document.getElementById("year").innerHTML=year;
    document.getElementById("size").innerHTML=size;
    document.getElementById("medium").innerHTML=medium;
    document.getElementById("edition").innerHTML=edition;
    document.getElementById("price").innerHTML=price;
    document.getElementById("img").innerHTML=showImage;
    var productList = xmlDoc.getElementsByTagName("product");
    for (var x = 0; x < productList.length; x++) {
		var imageID = 'image_';
		imageID += x;
		if(x==numberOfNodes){
		document.getElementById(imageID).style.border='1px solid red';
		} else {
		document.getElementById(imageID).style.border='1px solid white';
		}
    }
}