var container;
var selectedUnit;
var selectedCity;


function onPageLoad(){
	
	selectedUnit = 'c';
	onChangeCity('hanoi');
}

function onChangeCity(city){
	
	selectedCity = city;
	
	var apisrc = 'http://query.yahooapis.com/v1/public/yql?q=use%20\'http%3A%2F%2Fisithackday.com%2Fweatherbadge%2Fweather.bylocation.xml\'%20as%20we%3Bselect%20*%20from%20we%20where%20location%3D%22'+selectedCity+'%22%20and%20unit%3D\''+selectedUnit+'\'&format=json&callback=showWeather';

	var s = document.createElement('script');
	s.src=apisrc;
	document.getElementsByTagName('head')[0].appendChild(s);

}

function onChangeUnit(unit){
	selectedUnit = unit;
	onChangeCity(selectedCity);
}

function showWeather(data){

	if (container==undefined){
	}
	else{
		document.getElementById("weather").removeChild(container);
	}
	var wdata = data.query.results.weather.rss.channel;
	var title = wdata.title;
	var pic = wdata.item.description.match(/src="([^"]+)".*/)[1];
	var temperature = wdata.item.condition.temp;
	var weather = wdata.item.condition.text;
	var link = wdata.link;

	var badge = '<div style="width:280px"><div style="float:left;width:140px;margin-top:5px;"><div>'+
	'<strong style="font-size:12px;font:Arial, Helvetica, sans-serif">TODAY</strong></div><div>'+
	'<div style="float:left"><img style="vertical-align:bottom" height="32" width="32" src="http://l.yimg.com/a/i/us/we/52/'+ wdata.item.condition.code +'.gif" /> </div>'+
	'<div >  <strong style="color:#00C; font-size:11px;font:Arial, Helvetica, sans-serif"><a style="font-size:26px">' + wdata.item.condition.temp+ '&deg;</a>' +'</strong><br />'+
	'</div>     <div style="font-size:11px;font:Arial, Helvetica, sans-serif;clear:both;">   ' + wdata.item.condition.text + '  </div></div></div> <div style="float:left;width:140px;margin-top:5px;"><div><strong style="font-size:12px">TOMORROW</strong></div><div>'+
	'<div style="float:left"><img style="vertical-align:bottom" height="32" width="32" src="http://l.yimg.com/a/i/us/we/52/'+ wdata.item.forecast[1].code +'.gif" /> </div><div >'+
	'<strong style="color:#00C; font-size:11px;font:Arial, Helvetica, sans-serif">hi   <a style="font-size:14px">' + wdata.item.forecast[1].high+ '&deg;</a>' +'</strong><br />'+
	'<strong style="color:#00C; font-size:11px;font:Arial, Helvetica, sans-serif">lo   <a style="font-size:14px">' + wdata.item.forecast[1].low+ '&deg;</a>' +'</strong><br />'+
	'</div><div style="font-size:11px;font:Arial, Helvetica, sans-serif;clear:both;"> ' + wdata.item.forecast[1].text + ' </div> </div></div><div style="clear:both"></div></div>';	

	container = document.createElement('div');
	container.innerHTML = badge;

	document.getElementById("weather").appendChild(container);
	
}