var myDiv = document.getElementById('myDiv');
var myYear = document.getElementById('year').value;
var yaw_data = document.getElementById('yaws').value;
//var yaw_data = "&febYaw=February 27 (058)&mayYaw=May 1 (121)&junYaw=June 26 (177)&augYaw=August 29 (241)&octYaw=October 30 (303)&decYaw=December 26 (361)";
    
let months = yaw_data.split('&');


//console.log(months);
var layout = {
    title: "<b>SABER Latitude Coverage, "+myYear+"</b><br>--- Signifies Yaw",
    showlegend: false,
    //height: 600,
    //width: 470,
    annotations: [
        {
            x: 2,
            y: 83,
            xref: "x",
            yref: "y",
            yshift: "-20",
            text: "Negative (-)<br>Beta Angle",
            showarrow: false,
            align: "center",
            font: {
                size: 10,
            },
        }
    ],
    xaxis: {
      //type: 'category',
      type: "linear",
      showline: true,
      showgrid: false,
      zeroline: false,
      showticklabels: true,
      //linecolor: "rgb(204,204,204)",
      linewidth: 2,
      //autotick: false,
      //ticks: "outside",      
      tickcolor: "rgb(255,255,255)",
      tickwidth: 2,
      ticklen: 5,
      tickfont: {
        family: "Arial",
        size: 12,
        //color: "rgb(82, 82, 82)"
      },
      tickmode: "array",
      tickvals: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
      ticktext: ["","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",""],
      tickslabelpostion: "inside",
    },
    yaxis: {
      title: "<b>Latitude</b>",
      //linecolor: "rgb(204,204,204)",
      linewidth: 2,
      showgrid: false,
      zeroline: false,
      showline: true,
      ticks: "outside",
      //tickcolor: "rgb(204,204,204)",
      tickwidth: 2,
      ticklen: 5,
      tickfont: {
        family: "Arial",
        size: 12,
        //color: "rgb(82, 82, 82)",
        weight: "bold"
      },
      showticklabels: true,
      autotick: true,
      tickmode: "array",
      tickvals: ["", -90, -83, -60, -52, -30, 0, 30, 52, 60, 83, 90],
      ticktext: ["", "-90", "-83 S", "-60", "-52 S", "-30", "0", "30", "52 N", "60", "83 N", "90"]
    }    
  };
  
  var trace1 = {
    x: [0, 1, 1, 3, 3, 5, 5, 7, 7, 9, 9, 11, 11, 13],
    //offset: 0.1,
    y: [52, 52, 83, 83, 52, 52, 83, 83, 52, 52, 83, 83, 52, 52],
    type: "scatter",
    mode: "lines",
    line: {
        color: "black",
    }
  };
  
  var trace2 = {
    x: [0, 1, 1, 3, 3, 5, 5, 7, 7, 9, 9, 11, 11, 13],
    //offset: 0.1,
    y: [-83, -83, -52, -52, -83, -83, -52, -52, -83, -83, -52, -52, -83, -83],
    type: "scatter",
    mode: "lines",
    line: {
        color: "black",
    }
  };

var yaws = []
for (i = 1; i < months.length; i++) {
  const element = months[i];
  yaws.push(element.charAt(0).toUpperCase() + element.slice(1, 3)); 
} 

const xmons = {'Jan': 1,'Feb': 2,'Mar': 3,'Apr': 4,'May': 5,'Jun': 6,'Jul': 7,'Aug': 8,'Sep': 9,'Oct': 10,'Nov': 11,'Dec': 12,};
const ymons1 = {'Jan': -52,'Feb': -52,'Mar': -52,'Apr': -83,'May': -52,'Jun': -52,'Jul': -52,'Aug': -83,'Sep': -52,'Oct': -52,'Nov': -52,'Dec': -83,};
const ymons2 = {'Jan': 52,'Feb': 83,'Mar': 52,'Apr': 52,'May': 52,'Jun': 83,'Jul': 52,'Aug': 52,'Sep': 52,'Oct': 83,'Nov': 52,'Dec': 52,};

var dot = [];
for (i = 0; i < yaws.length; i++) {
  const yaw = yaws[i];
  if (Object.keys(xmons).includes(yaw)) {
    this.x = xmons[yaw];
    this.y1 = ymons1[yaw];
    this.y2 = ymons2[yaw];
    dot.push({
      x: [this.x, this.x],
      y: [this.y1, this.y2],
      mode: 'lines',
      name: 'dot',
      line: {
          dash: 'dot',
          width: 1,
          color: "black",
      }
    });
  }
}

if (dot[6] != undefined){
  var data = [trace1, trace2, dot[0], dot[1], dot[2], dot[3], dot[4], dot[5], dot[6]];
} else {
  var data = [trace1, trace2, dot[0], dot[1], dot[2], dot[3], dot[4], dot[5]]
}

Plotly.newPlot(myDiv, data, layout, {staticPlot: true});