// JavaScript Document
var req;
var url = "proxy.php?proxy_url=http%3A%2F%2Fforecast.weather.gov%2FMapClick.php%3FCityName%3DGolden%26state%3DCO%26site%3DBOU%26textField1%3D39.7389%26textField2%3D-105.215%26e%3D0%26TextType%3D3";

function getForecast() {
 
   if (typeof XMLHttpRequest != "undefined") {
       req = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
       req = new ActiveXObject("Microsoft.XMLHTTP");
   }
  
   req.open("GET", url, true);
   req.onreadystatechange = callback;
   req.send(null);
}

function callback() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            // update the HTML DOM based on whether or not message is valid
			hide("loading");		
			writeXMLData(req.responseXML)
        }
    }
}

/* Show/hide element functions */
function show(id) {
	var element = document.getElementById(id);
	element.style.visibility = "visible";
}

function hide(id) {
	var element = document.getElementById(id);
	element.style.visibility = "hidden";
	element.style.display = "none";
}


function writeXMLData(xdoc){
	  show("forecast");
      var days = xdoc.getElementsByTagName("valid");
	  var iconLocation = xdoc.getElementsByTagName("icon-location");
	  var forecastText = xdoc.getElementsByTagName("text");
	  var icon = xdoc.getElementsByTagName("image");
	  var creationTime =  xdoc.getElementsByTagName("creationTime");
	  document.getElementById("lastUpdate").innerHTML= "Last Updated: " + creationTime[0].firstChild.nodeValue ;

      for(var i = 0; i < days.length; i++){
		 var icon_dayId = "icon_day_" + i;
		 document.getElementById(icon_dayId).innerHTML= "<img src='" + iconLocation[0].firstChild.nodeValue + "/" + icon[i].firstChild.nodeValue + "'>";
		 var forecast_dayId = "forecast_day_" + i;
		 document.getElementById(forecast_dayId).innerHTML= "<b>" + days[i].firstChild.nodeValue  + "</b><br>" + forecastText[i].firstChild.nodeValue;
		 
      }
	  document.getElementById("forecast").style.visibility = "visible";
	  hide("loading");
   }