var yp = new Array();
var idx = 0;

function weather_badge (nws_id, div_name) {

    var callback_obj = "yp[" + idx + "]";

    var url = "http://pipes.yahoo.com/pipes/pipe.run?" 
	+ "&_id=CI6HgSh43BGP8nmJouNLYQ" 
	+ "&textinput1=" + nws_id
	+ "&_run=1" 
	+ "&_render=json";
  
    yp[idx] = new YPipesWeather (url, div_name, callback_obj);
    yp[idx].requestJSON ();
    idx++;
}

// The YPipesWeather constructor

function YPipesWeather (ypipes_url, div_name, obj_name) {
  this.url = ypipes_url + "&_callback=" + obj_name + ".jsonHandler";
  this.div_name = div_name;
}

// The requestJSON method: it builds the script tag 
// that launches our request to the Yahoo! server.

YPipesWeather.prototype.requestJSON = function () {

  // Dynamically create a script tag.  This initiates 
  // a request to the Yahoo! server.

  var head = document.getElementsByTagName("head").item(0);
  var script = document.createElement ("script");
  script.src = this.url;
  head.appendChild (script);
}

// The jsonHandler method: this is our callback function.
// It's called when the JSON is returned to our browser
// from Yahoo!.

YPipesWeather.prototype.jsonHandler = function (json) {
  var div = document.getElementById (this.div_name);

  var weather = json.value.items[0];

  var html = "";

  html += "<center>\n";
  html += '<table cellspacing="0" cellpadding="0" border="0">';
  html += '<tr><td colspan="2" align="left" valign="middle" height="16" style="font-size: 12px; font-weight:bold;">';
  html += '<span style="color:#333333;">Currently in San Francisco, CA</span></td></tr>';
  html += '<tr><td colspan="2" valign="top" height="18" class="obstime">' + weather.observation_time + '</span></td></tr>';
  html += '<tr><td width="90" align="left" style="font-size:11px; color:#333333;" valign="top">'
  html += "<img border='1' src='" + weather.icon_url_base + weather.icon_url_name + "' style='margin-bottom:0px'></td>";
  html += '<td width="155" align="left" valign="middle">';
  html += '<span style="font-size:18px; font-weight:bold; color:#333333">' + weather.temp_f + "&#176;F</span><br>";
  html += '<span style="font-size:12px;">(' + weather.temp_c + '&#176;C)</span><br></td></tr>';
  
  html += '<tr><td align="left" valign="top"><span style="font-size: 11px; font-weight:bold;color:#333333">' + weather.weather + '</span></td><td><span style="font-size: 12px;">';
  html += '<a href="http://www.wrh.noaa.gov/forecast/MapClick.php?site=MTR&llon=-122.576247&rlon=-121.746247&tlat=38.057084&blat=37.227084&smap=1&mp=0&map.x=34&map.y=77" target="_blank">NOAA Forecast</a>';
  html += '</span><br><br></td></tr>';
  
  html += '<tr class="wbadge"><td>Dew Point:</td> <td>' + weather.dewpoint_f + "&#176;F (" + weather.dewpoint_c + "&#176;C)</td></tr>";
  html += '<tr class="wbadge"><td>Humidity:</td> <td>' + weather.relative_humidity + "%</td></tr>";
  html += '<tr class="wbadge"><td>Pressure:</td> <td>' + weather.pressure_string + "</td></tr>";
  html += '<tr class="wbadge"><td valign="top" colspan="2">Wind ' + weather.wind_string + "</td></tr>";

  html += '<tr class="wbadge"><td align="left" colspan="2" style="font-size:11px; font-weight:bold;"><br>Check out &nbsp;<a href="http://iwindsurf.com" target="_blank">iWindSurf.com!</a><br>';
  html += 'And, more at &nbsp;<a href="http://www.sailflow.com/windandwhere.iws?regionID=222&siteID=334" target="_blank">SailFlow.com</a></td></tr>';
  html += '</table>';

  html += "</center>";

  div.innerHTML = html;

}