// JavaScript Document

var myRequest = getXMLHttpRequest();

function getXMLHttpRequest() {
	var request = new XMLHttpRequest();
	return request;
}
function Sresetnavs(){
	document.getElementById('drawingnavlist').innerHTML='';
	document.getElementById('printnavlist').innerHTML='';
	document.getElementById('sitespecnavlist').innerHTML='';
	var printlink=document.getElementById('printlink');
	printlink.setAttribute("style", "");
	var drawinglink=document.getElementById('drawinglink');
	drawinglink.setAttribute("style", "");
		document.getElementById('ImgOverview').innerHTML='<div align="center" style="height:477px; width:615px;"></div>';
	document.getElementById('ImgDesc').innerHTML='';
	document.getElementById('fullLink').style.display='none';
	document.getElementById('detaillink').style.display='none';
	document.getElementById('ImgDetail').style.display='none';
	document.getElementById('ImgOverview').style.display='block';
	document.getElementById('video').style.display='block';
	
}


function ScallAjax(url) {
	myRequest.open("GET", url, true);
	myRequest.onreadystatechange = ShandleAjaxResponse;
	myRequest.send (null);
	new Schangecolor();
	new Sresetnavs();
	document.getElementById('ImgOverview').innerHTML='<div align="left" style="margin-left:30px"><img src="images/sitespec_1.jpg" width="615" height="477" id="largeimg"></div>'
	document.getElementById('ImgDetail').innerHTML='<div align="left" style="margin-left:30px"><img src="images/detail/sitespec_det_1.jpg" width="615" height="477" id="detailimg"></div>'
	new hideDetail();
	myDesc=descriptionNodeList[0].firstChild.nodeValue;
	document.getElementById('ImgDesc').innerHTML='<h2>'+myDesc+'</h2>';
	var newlink=document.getElementById('1')
	document.getElementById('1').setAttribute("style","background-color:#000000; color:#ffffff");
	
	
	
}

function SgetImage(imageNumber){
	
	
	for(var g=1; g<idNodeList.length+1; g++){
			document.getElementById(g).setAttribute("style","background-color:#ffffff; color:#000000");
			//alert(document.getElementById(g));
		
			document.getElementById('video').setAttribute("style", "display:none");
			
	}
		
	document.getElementById('ImgOverview').innerHTML='<div "left" style="margin-left:30px;"><img src="images/sitespec_'+imageNumber+'.jpg" width="615" height="477" id="largeimg"></div>'
	document.getElementById('ImgDetail').innerHTML='<div "left" style="margin-left:30px;"><img src="images/detail/sitespec_det_'+imageNumber+'.jpg" width="615" height="477" id="detailimg"></div>'
	myDesc=descriptionNodeList[imageNumber-1].firstChild.nodeValue;
	document.getElementById('ImgDesc').innerHTML='<h2>'+myDesc+'</h2>';
	new hideDetail();
	var active=imageNumber;
	var activelink=document.getElementById(imageNumber)
	activelink.setAttribute("style","background-color:#000000; color:#ffffff");
	activelink.setAttribute("class","active");
	//alert (imageNumber);
	if (imageNumber==1){
	document.getElementById('video').setAttribute("style", "display:block");

  }
  

}

function ShandleAjaxResponse() {
	if (myRequest.readyState == 4) {
		if (myRequest.status == 200) {
			xmlResponse =  myRequest.responseXML;
			//document.getElementById('navarea').innerHTML =  myRequest.responseText;
			idNodeList = xmlResponse.getElementsByTagName('id');
			descriptionNodeList = xmlResponse.getElementsByTagName('Desc');
			//document.getElementById('total').innerHTML=idNodeList.length;
			//document.getElementById('description').innerHTML =  descriptionNodeList[0].firstChild.nodeValue + ' (' + idNodeList[0].firstChild.nodeValue + ')';
			new SBuildNav();
			
		} else {
			alert ('An error occurred: ' + myRequest.statusText);
		}
	}
}

function Schangecolor(){
	var sitespeclink=document.getElementById('sitespeclink');
	sitespeclink.setAttribute("style", "color:#000000");
	//document.getElementById('sitespecnav_label').innerHTML='<span style="color:#000000">sitespec</span>';	
}


function SBuildNav(){
	var sitespecHTML='';
	for(var i=0; i<idNodeList.length; i++){
	var idValue=idNodeList[i].firstChild.nodeValue;
	descriptionNodeList = xmlResponse.getElementsByTagName('Desc');
	descValue=descriptionNodeList[i].firstChild.nodeValue;
		sitespecHTML=sitespecHTML+'<span class="navitem" id=sitespec_nav_'+i+'><a href="#" id='+idValue+' onClick=SgetImage('+idValue+');>'+idValue+'</a></span>';
		
	//alert (idNodeList[i].firstChild.nodeValue);
	
	//Set the descriptions
	//alert (descValue);
	var elem = document.createElement("img");
	elem.setAttribute("src", "images/sitespec_"+idValue+".jpg");
	elem.setAttribute("height", "477");
	elem.setAttribute("width", "615");
	elem.setAttribute("Id", "large"+idValue);
	
	//document.getElementById('ImgOverview').appendChild(elem);
	//document.getElementById("large"+idValue).style.display='none';
	
	
	}
	document.getElementById('sitespecnavlist').innerHTML=sitespecHTML;
	
	

}
function getDetail(){
	document.getElementById('ImgOverview').style.display='none';
	document.getElementById('ImgDetail').style.display='block';
	document.getElementById('fullLink').style.display='block';
	document.getElementById('detaillink').style.display='none';
	}
	
function hideDetail(){
	document.getElementById('ImgOverview').style.display='block';
	document.getElementById('ImgDetail').style.display='none';
	document.getElementById('fullLink').style.display='none';
	document.getElementById('detaillink').style.display='block';
	}