// Get the data from the printer friendly version (more thin)
var url="https://magicseaweed.com/Dromi-Herzlyia-Marina-Surf-Report/4744/Print-Ready/";
let req=new Request(url);
let html=await req.loadString();

// Read the location name//
let locationTitle=html.match("<h1.*?>(.*)</h1>")[1].trim();

// Create the Widget
let widget=new ListWidget();
widget.backgroundColor=Color.blue();
let titleText=widget.addText(locationTitle);
titleText.textColor=Color.white();
titleText.font=Font.systemFont(16);
let dateText = widget.addText("");
dateText.textColor=Color.white();
dateText.font=Font.systemFont(12);
widget.addSpacer(5);
// Build the day panels
let dayPanel=widget.addStack();
dayPanel.layoutHorizontally();
var firstDayCol=dayPanel.addStack();
firstDayCol.layoutVertically();
dayPanel.addSpacer(20);
var secondDayCol=dayPanel.addStack();
secondDayCol.layoutVertically();

// Scan the table rows
let regExRow=new RegExp("<tr.*?>(.*?)</tr>","ig");
let dateTitle="";
let resultRow;
let itemCount=0;
while(resultRow=regExRow.exec(html))
{
  // Search for second day forecast -> tommorow's forecast
  if(resultRow[0].indexOf("data-forecast-day='2'")>0)
  {
    // See if we need to get the date
    if(dateTitle.length==0)
    {
      let rowDate=resultRow[0].match("data-date-anchor=\"(.*?)\"");
      if(rowDate!=null)
      {
        let dayOfWeek=rowDate[1].substr(0, rowDate[1].length-4);
        let dayOfMonth=rowDate[1].substr(dayOfWeek.length, 2);
        let monthNum=rowDate[1].substr(dayOfWeek.length+2, 2);
        dateTitle=dayOfWeek+" "+dayOfMonth+"/"+monthNum;
        dateText.text="("+dateTitle+")";
      }
    }

    // Get the first three cells of data from tbe row
    let rowData=Array(3);
    let dataIndex=0;
    let regExCell=new RegExp("<td.*?>(.*?)</td>","ig");
    let resultCell;
    while(resultCell=regExCell.exec(resultRow[1]))
    {
      let regExText=new RegExp("<.*?>(.*?)<", "ig");
      let resultText;
      while(resultText=regExText.exec(resultCell[1]))
      {
        let s=resultText[1].trim();
        if(s.length>0)
        {
          rowData[dataIndex]=s;
          dataIndex++;
          if(dataIndex>2) break;
        }
      }
      if(dataIndex>2) break;
    }
    // Check if we have data
    if(dataIndex>0)
    {
      itemCount++;
      destPanel=firstDayCol;
      if(itemCount>4)
      {
        destPanel=secondDayCol;
      }
      // The array contains the hour, and two wave's heights in meters
      let dataPanel=destPanel.addStack();
      dataPanel.layoutHorizontally();
      let hourPanel=dataPanel.addStack();
      hourPanel.size=new Size(50, -1);
      let hourText=hourPanel.addText(rowData[0]);
      hourText.textColor=Color.white();
      hourText.leftAlignText();
      hourText.font=Font.systemFont(14);
      dataPanel.addSpacer(10);
      let waveText=dataPanel.addText(rowData[1]+"-"+rowData[2]+"m");
waveText.textColor=Color.white();
waveText.font=Font.systemFont(14);
    }
  }
}

//widget.refreshAfterDate=new Date(Date.now());

if(config.runsInWidget)
{
  Script.setWidget(widget);
  Script.complete();
}
else
{
  widget.presentMedium();
}