// this will store all the weather data
let w;
let clearSky = '#098fe8';
let overcastSky = '#bad1e3';
let backgroundcolor;
let layer;

//images - made in illustrator
let clotheslayer1;
let clotheslayer2;
let clotheslayer3;
let clotheslayer4;

let clothes;

function load(){
clotheslayer1 = loadImage('warmweatherclothes.png');
clotheslayer2 = loadImage('midweatherclothes.png');
clotheslayer3 = loadImage('chillyweatherclothes.png');
clotheslayer4 = loadImage('winterweatherclothes.png');
}


function setup() {
size(375, 667);
//w = requestWeather(42.36031, -71.09414);
w = requestWeather(30.2672,-97.7431);
}


function draw() {

fill('black');
noStroke();
textAlign(CENTER);
textSize(14);

if (w.ready) {
let cloudpercent = w.getCloudCover();
let currentemp = w.getTemperature();
backgroundcolor = lerpColor(clearSky, overcastSky, cloudpercent);
clear(backgroundcolor);
drawWeather();


} else {
// if the forecast isn't ready yet, show a message at the bottom of the screen
drawMessage("Loading...");
}
}


// show a message at the bottom of the screen
function drawMessage(what) {
text(what, width/2, 20);
}


function drawWeather() {
// when was this forecast updated?
let forecastTime = w.getTime();
fill('white');

// show the time at the bottom of the screen
//drawMessage(forecastTime.hourMinuteLong());



FashionAdvice();

// draw the chart of temperatures
drawTemperatures();
let windspeed = w.getWindSpeed();
// stop animating




if (windspeed !=0){
let direction = w.getWindDirection();
//let direction = 50
//let direction = 0;
push();
scale(.6);
translate(105, 60); // half of 200x300, and negative so it will center everything at 0,0
// your drawing commands
push();
translate(width/2,150);
rectMode(CENTER);
let amount = 5;
let speed = 0.15;
let sway = amount * sin(frameCount * speed);
rotate(radians(direction + sway));
drawHair();

//drawWindBlowing();
pop();
drawHead();
pop();
}
//rect(width/2, 500,300, 100);
textSize(30);
fill('white');
// get the temperature, round it, and add the degree symbol
let readout = formatDegrees(w.getTemperature());
// show the temperature in degrees
text(readout+ " " + formatText(w.getConditionText()), width/2, 235);
textSize(17);
text(nfd(windspeed, 1) + " mph", width/2, 255);
drawMessage(forecastTime.hourMinuteLong());


}


function drawTemperatures() {
let temps = w.getTemperature('hours'); // provides hours for the next 10 days
let times = w.getTime('hours');

const count = 24; // we'll use 24 hours
const start = w.nearestOffset('hours'); // find the nearest hour
temps = temps.slice(start, start + count); // grab the next 24 temperatures
times = times.slice(start, start + count); // and the times for those temps

stroke('white');
strokeWeight(8);
strokeCap(SQUARE);

fill('black');
textSize(12);
// text("jacket needed", 300, 440);
// fill('white');
//text("jacket not needed", 300,455);
fill("#21508f");
let minTemp = min(temps);
let maxTemp = max(temps);
// subtract 10 so that the lowest number isn't zero
let lowTemp = roundDown(minTemp) - 10;
let highTemp = roundUp(maxTemp);

let chartLeft = 40;
let chartRight = width - chartLeft;
let chartTop = 260;
let chartBottom = 370;


for (let i = 0; i < count; i++) {
let x = remap(i, 0, count-1, chartLeft, chartRight);
let y = remap(temps[i], lowTemp, highTemp, chartBottom, chartTop);
// if (temps[i] < 50){
stroke("#21508f");
line(x, y, x, chartBottom);
noStroke;
rectMode(CENTER);


rectMode(CORNER);
fill('white');
noStroke();
rect(20, 375, 335, 2);
noStroke();

// draw the hour for every third hour
if (i % 3 == 0) {
text(times[i].hourShort(), x, chartBottom + 20);
}

// if this is the min or max temp, draw it
if (temps[i] == minTemp || temps[i] == maxTemp) {
text(formatDegrees(temps[i]), x, y - 12);
}

}

}