// Allies in adversity
// Shipping map behaviour

shipDetails();
attachEventListener(window, "load", shipDetails, false);


addLoadListener(insertDiv);

//Insert the necessary nodes into the DOM
function insertDiv() {
	// Work out where in the DOM the object is
	var insert=document.getElementById("shipmap");
	var table=insert.getElementsByTagName("table");
	//In this case we will assume there is only 1 table in the ID shipmap
	
	// Insert the DIV for shipdetails
	var divShipDetails=document.createElement("div");
	insert.insertBefore(divShipDetails,table[0]);
	divShipDetails.setAttribute("id","shipdetails");

// Insert the DIV for shipsinkmap
	var divShipSinkMap=document.createElement("div");
	insert.insertBefore(divShipSinkMap,table[0]);
	divShipSinkMap.setAttribute("id","shipsinkmap");
}





function shipDetails()
{
	if(!document.getElementsByTagName) return false;
	var links = document.getElementsByTagName("a");
	for (var k=0; k<links.length; k++) 
	{
		if (links[k].className == "ship") 
		{
			//Trigger if the user hovers over the link
			links[k].onmouseover = function() 
			{
				ajaxRead(this.getAttribute("id"));
				return false;
			}
			//Trigger if the user is using the keyboard to navigate
			links[k].onfocus = function() 
			{
				ajaxRead(this.getAttribute("id"));
				return false;
			}
			//Trigger if the user clicks on the link
			links[k].onclick = function() 
			{
				ajaxRead(this.getAttribute("id"));
				return false;
			}
		}
	}
}



function ajaxRead(file) {
	var xmlObj = null;
	if(window.XMLHttpRequest) {
		xmlObj = new XMLHttpRequest();
  }
	else if(window.ActiveXObject) {
  	xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
  } 
	else {
  	return;
  }
  xmlObj.onreadystatechange = function() {
  	if(xmlObj.readyState == 4) {
    	processXML(xmlObj.responseXML);
		}
	}
	xmlObj.open('get','/alliesinadversity/seafaring/data.asp?id='+file.replace("ship",""),true);
  xmlObj.send(null);
}


// This is writing it using innerHTML
// It should be updated to use DOM 
function processXML(obj) {
	//Create the XHTML for the table
	var dataArray = obj.getElementsByTagName('shipdetail')[0].childNodes;
	var dataArrayLen = dataArray.length;
	var insertData = '<table><caption>Ship details</caption>';
	for (var i=0; i<dataArrayLen; i++) {
		if(dataArray[i].tagName) {
			insertData += '<tr><th>' + dataArray[i].tagName + '</th><td>' + dataArray[i].getAttribute('detail') + '</td></tr>';
		}
	}
	insertData += '</table>';
	document.getElementById('shipdetails').innerHTML = insertData;
	
	//Create the XHTML for the image
	var dataArray2 = obj.getElementsByTagName('mapref')[0].childNodes;
	var dataArrayLen2 = dataArray2.length;
	var insertData2 = '';
	for (var i=0; i<dataArrayLen2; i++) {
		if(dataArray2[i].tagName) {
			insertData2 += '<img src="/alliesinadversity/images/shipmaps/' + dataArray2[i].getAttribute('detail') + '.gif" height="180" width="354" alt="Map showing where the ' + dataArray[1].getAttribute('detail') + ' was sunk" />';
		}
	}
	document.getElementById('shipsinkmap').innerHTML = insertData2;
}