/*
		<div id="AQPWidget">
			<div class="title">Extended Forecast</div>
			<div class="day"><span>Wednesday 1/6</span><img src="img/widget/Green.png" /></div><div class="day"><span>Thursday 1/5</span><img src="img/widget/Yellow.png"/></div>
			<div class="legend"><img src="img/widget/Legend.png" alt="Green (Good), Moderate (Yellow), Unhealthy for Sensitive Groups (Orange), Unhealthy (Red)" /></div>
		</div>
*/
var AQPWidget1 = "#AQPWidget";
var AQPWidget2 = "#AQPWidgetPM25";

var color = {
	"Good" : "green",
	"Moderate" : "yellow",
	"Unhealthy for Sensitive Groups" : "orange",
	"Unhealthy" : "red"
};		
	function condition(val) {
		r = 'Good';
		if (val > 50) {
			r = 'Moderate';
			if (val > 100) {
				r = 'Unhealthy for Sensitive Groups';
				if (val > 150) {
					r = 'Unhealthy';
				}
			}
		}
		return r;
	}
	
	function parse(data, offsetDay, type) {
		if (data[offsetDay] === null) return null;
		var c = condition(data[offsetDay][type]);
		return {'date':data[offsetDay].date, 'condition':c, 'color':color[c]};
	}
	
	function append(AQPWidget,day,i) {
		//day.date = (new Date(day.date)).formatDate('l n/j');
		if (day !== null) {
		$(AQPWidget).find('.body .day').eq(i).find('.date').fadeIn('slow',function() {$(this).text(day.date);});
		$(AQPWidget).find('.body .day').eq(i).find('.condition').fadeIn('slow',function() {$(this).attr({'src':'img/widget/' + day.color + '.png','alt':day.condition})});
		$('#centerWrapper').equalHeight();
		}
	}
	
	function create(AQPWidget, t) {
		$(AQPWidget).append($('<div>').addClass('title').text('Extended Forecast'));
		$(t).each(function() {$(AQPWidget).append($('<div>').addClass('body'));});
		$(AQPWidget).append($('<div>').addClass('legend').html('<img width="364" height="15" src="img/widget/Legend.png" alt="Green (Good), Moderate (Yellow), Unhealthy for Sensitive Groups (Orange), Unhealthy (Red)" />'));
		
		$(AQPWidget).find('.body').each(function(i) {$(this).append($('<div>').addClass('day')
		.html($('<span>').addClass('date').text(t[i])))});

		//first day
		$(AQPWidget).find('.body').append($('<div>').addClass('day')
		.html($('<span>').addClass('date').text('Loading...'))
		.append($('<img/>').addClass('condition').attr({'src':'img/widget/loading.png','alt':'Loading','width':36,'height':36})));
		
		//second time
		$(AQPWidget).find('.body').append($('<div>').addClass('day')
		.html($('<span>').addClass('date').text('Loading...'))
		.append($('<img/>').addClass('condition').attr({'src':'img/widget/loading.png','alt':'Loading','width':36,'height':36})));

	}
	
	$(document).ready(function() {
		create(AQPWidget1,['Ozone','PM2.5']);
		
		$.getJSON('forecastXML.asp', function(data) {
			append(AQPWidget1,parse(data,0,'ozone'),1);
			append(AQPWidget1,parse(data,1,'ozone'),2);
			append(AQPWidget1,parse(data,0,'pm25'),4);
			append(AQPWidget1,parse(data,1,'pm25'),5);
		});
	});