/*
Meteograms using Wxsim-forecast anh Highcharts javascript-package (highcharts.com)
V. 1.1, April 2010
Made by Henkka, nordicweather.net
*/

// LOOP FOR GETTING FREEZING POINT
    var below = false;
    for (var i = 0; i < tempdata.length; i++) {
    var value = tempdata[i],
        color = wxsimconf.tempcolor;
    if (value < changecolor && wxsimconf.showfreezingline) {
        color = wxsimconf.freezinglinecolor;
        var below = true;
    }
    tempdata[i] = {
        y: value,
        color: color
    }    
    }

// THE GRAPHS
var wxsim = {
/*
*************
* METEOGRAM *
*************
*/
'meteogram': {
options:{
  chart: {
    renderTo: 'meteogram',
    plotBackgroundColor: wxsimconf.bgcolor,
    margin: [50, 120, 70, 60]
  },
  title: { text: '' },
  subtitle: { text: '' },
  xAxis: {
    type: 'datetime',
    labels: {align: 'left', 
             x: 4, 
             y: -30,
             formatter: function() {
              if(wxsimconf.showdaynames) {
               var dz= new Date( );
                dz.setTime(this.value);
                var dayname = wxsimconf.days[dz.getUTCDay()];
                } else {
                var dayname = Highcharts.dateFormat('%e. %b', this.value)
                }
                return dayname;
                }
    },
    title: {
      text: 'time'
    },
    gridLineWidth: 0,
    tickColor: wxsimconf.gridcolor,
    lineColor: wxsimconf.gridcolor,
    gridLineColor: wxsimconf.gridcolor,
    alternateGridColor: wxsimconf.altnernatebgcolor,
    opposite: true
  },
  yAxis: [{ // Left axis
    labels: { style: { color: wxsimconf.tempcoloraxis } },
    title: {
      text: wxsimconf.tempname+' ('+tempunit+')',
      style: { color: wxsimconf.tempcoloraxis,font: wxsimconf.yaxistitlefont, fontWeight: "bold" },
      margin: 40
    },
    lineWidth: 1,
    tickColor: wxsimconf.gridcolor,
    lineColor: wxsimconf.gridcolor,
    gridLineColor: wxsimconf.gridcolor,
    tickWidth: 1,
    plotLines: [{
      enabled: below,
      value: changecolor,
      width: 2,
      color: wxsimconf.freezinglinecolor
      }]
  }, { // Right 1 axis
    title: {
      text: wxsimconf.precname+' ('+precunit+')',
      margin: 35,
      style: { color: wxsimconf.preccolor,font: wxsimconf.yaxistitlefont, fontWeight: "bold" }
      },
    labels: { style: { color: wxsimconf.preccolor } },
    opposite: true,
    lineWidth: 1,
    tickColor: wxsimconf.gridcolor,
    lineColor: wxsimconf.gridcolor,
    gridLineColor: wxsimconf.gridcolor,
    tickWidth: 1
  }, { // Right 2 axis
    title: {
      text: wxsimconf.baroname+' ('+barounit+')',
      margin: 40,
      style: { color: wxsimconf.barocolor,font: wxsimconf.yaxistitlefont, fontWeight: "bold" }
    },
    labels: { style: { color: wxsimconf.barocolor} },
    opposite: true,
    offset: 60,
    lineWidth: 1,
    tickColor: wxsimconf.gridcolor,
    lineColor: wxsimconf.gridcolor,
    gridLineColor: wxsimconf.gridcolor,
    tickWidth: 1
  }],
  tooltip: {
    formatter: function() {
    var unit = tempunit;
    if(this.series.name == wxsimconf.baroname) { var unit = ' '+barounit; }
    if(this.series.name == wxsimconf.precname) { var unit = ' '+precunit; }
    if(wxsimconf.showdaynames) {
    var dz= new Date( );
    dz.setTime(this.x);
    var dayname = wxsimconf.days[dz.getUTCDay()];
    } else {
    var dayname = Highcharts.dateFormat('%e. %b', this.x)
    }
    return '<b>'+ this.series.name +'</b><br/>'+dayname+', '+
    Highcharts.dateFormat('%H:%M', this.x) +': '+ this.y + unit;
    }
  },
  legend: {
    style: {
      bottom: '-2px',
      left: '100px'
    }
  },
  credits:{enabled:false},
  plotOptions: {
    spline: {
      marker: {enabled: false},
      states: {
        hover: {
          marker: {
          enabled: true,
          symbol: 'circle',
          radius: 2,
          lineWidth: 1
          }
        }
      }
    }
  },
  series: [{
    name: wxsimconf.precname, // Rain
    visible: wxsimconf.showprecip,
    color: wxsimconf.precipcolor,
    type: 'column',
    pointPadding: -0.2,
    groupPadding: 0.2,
    yAxis: 1,
    pointInterval: rstep, // 3 hours
    pointStart: Date.UTC(startyr, startmo, startda, starthr, 0, 0),
    data: totprecdata
  },{
    name: wxsimconf.tempname, // Temperature
    visible: wxsimconf.showtemp,
    color: wxsimconf.tempcolorline,
    type: 'spline',
    pointInterval: stepsec,
    pointStart: Date.UTC(startyr, startmo, startda, starthr, 0, 0),
    data: tempdata
  },{
    name: wxsimconf.chillname,  // Windchill
    visible: wxsimconf.showwchill,
    color: wxsimconf.wchillcolor,
    type: 'spline',
    lineWidth: 1,
    pointInterval: stepsec,
    pointStart: Date.UTC(startyr, startmo, startda, starthr, 0, 0),
    data: chilldata
  },{
    name: wxsimconf.heatname,  // Heatindex
    visible: wxsimconf.showheat,
    color: wxsimconf.heatcolor,
    type: 'spline',
    lineWidth: 1,
    pointInterval: stepsec,
    pointStart: Date.UTC(startyr, startmo, startda, starthr, 0, 0),
    data: heatdata
  },{
    name: wxsimconf.baroname,  // Pressure
    visible: wxsimconf.showbaro,
    color: wxsimconf.barocolor,
    type: 'spline',
    yAxis: 2,
    pointInterval: stepsec,
    pointStart: Date.UTC(startyr, startmo, startda, starthr, 0, 0),
    data: barodata
  }]
  }
},
/*
**************
* STORMGRAPH *
**************
*/
'stormgraph': {
options:{
  chart: {
    renderTo: 'stormgraph',
    plotBackgroundColor: wxsimconf.bgcolor,
    margin: [20, 120, 45, 60]
  },
  title: { text: '' },
  subtitle: { text: '' },
  xAxis: {
    type: 'datetime',
    labels: {align: 'left', 
             x: 4, 
             y: -5,
             formatter: function() {
              if(wxsimconf.showdaynames) {
               var dz= new Date( );
                dz.setTime(this.value);
                var dayname = wxsimconf.days[dz.getUTCDay()];
                } else {
                var dayname = Highcharts.dateFormat('%e. %b', this.value)
                }
                return dayname;
                }
    },
    title: {
      text: 'time'
    },
    gridLineWidth: 0,
    tickColor: wxsimconf.gridcolor,
    lineColor: wxsimconf.gridcolor,
    gridLineColor: wxsimconf.gridcolor,
    alternateGridColor: wxsimconf.altnernatebgcolor,
    opposite: true
  },
  yAxis: [{ // Left axis
    labels: { style: { color: wxsimconf.strmcolor } },
    title: {
      text: wxsimconf.stormyaxisname,
      style: { color: wxsimconf.strmcolor,font: wxsimconf.yaxistitlefont, fontWeight: "bold" },
      margin: 40
    },
    min: 0,
    max: strmmax,
    lineWidth: 1,
    tickWidth: 1,
    tickInterval: wxsimconf.strmstep,
    tickColor: wxsimconf.gridcolor,
    lineColor: wxsimconf.gridcolor,
    gridLineColor: wxsimconf.gridcolor,
    plotLines: [{
      enabled: below,
      value: changecolor,
      width: 2
      //color: '#808080'
      }]
  }, { // Right 1 axis
    title: {
      text: wxsimconf.liname,
      margin: 35,
      style: { color: wxsimconf.licolor,font: wxsimconf.yaxistitlefont, fontWeight: "bold" }
      },
    labels: { style: { color: wxsimconf.licolor } },
    opposite: true,
    lineWidth: 1,    
    min: limin,
    max: 0,
    tickWidth: 1,
    tickInterval: wxsimconf.strmstep,
    tickColor: wxsimconf.gridcolor,
    lineColor: wxsimconf.gridcolor,
    gridLineColor: wxsimconf.gridcolor,
    reversed: true
  }, { // Right 2 axis
    title: {
      text: wxsimconf.dewname+' ('+tempunit+')',
      margin: 40,
      style: { color: wxsimconf.dewcolor,font: wxsimconf.yaxistitlefont, fontWeight: "bold" }
    },
    labels: { style: { color: wxsimconf.dewcolor} },
    opposite: true,
    offset: 60,
    lineWidth: 1,
    tickColor: wxsimconf.gridcolor,
    lineColor: wxsimconf.gridcolor,
    gridLineColor: wxsimconf.gridcolor,
    tickWidth: 1
  }],
  tooltip: {
    formatter: function() {
    var unit = '';
    if(this.series.name == wxsimconf.dewname) { var unit = tempunit; }
    if(wxsimconf.showdaynames) {
    var dz= new Date( );
    dz.setTime(this.x);
    var dayname = wxsimconf.days[dz.getUTCDay()];
    } else {
    var dayname = Highcharts.dateFormat('%e. %b', this.x)
    }
    return '<b>'+ this.series.name +'</b><br/>'+dayname+', '+
    Highcharts.dateFormat('%H:%M', this.x) +': '+ this.y + unit;
    }
  },
  legend: {
    style: {
      bottom: '-2px',
      left: '100px'
    },
    labelFormatter: function() {
    if(this.name == wxsimconf.convname) { return this.name+' (0-5)'; }
    if(this.name == wxsimconf.severename) { return this.name+' (0-5)'; }
    if(this.name == wxsimconf.strmname) { return this.name+' (0-5)'; }
    else { return this.name; }
    }
  },
  credits:{enabled:false},
  plotOptions: {
    spline: {
      marker: {enabled: false},
      states: {
        hover: {
          marker: {
          enabled: true,
          symbol: 'circle',
          radius: 2,
          lineWidth: 1
          }
        }
      }
    }
  },
  series: [{
    name: wxsimconf.strmname,  // storm
    visible: wxsimconf.showstrm,
    color: wxsimconf.strmcolor,
    type: 'spline',
    //lineWidth: 1,
    pointInterval: stepsec,
    pointStart: Date.UTC(startyr, startmo, startda, starthr, 0, 0),
    data: strmdata
  },{
    name: wxsimconf.convname,  // convection
    visible: wxsimconf.showconv,
    color: wxsimconf.convcolor,
    type: 'spline',
    //lineWidth: 1,
    pointInterval: stepsec,
    pointStart: Date.UTC(startyr, startmo, startda, starthr, 0, 0),
    data: convdata
  },{
    name: wxsimconf.severename,  // severe
    visible: wxsimconf.showsevere,
    color: wxsimconf.severecolor,
    type: 'spline',
    //lineWidth: 1,
    pointInterval: stepsec,
    pointStart: Date.UTC(startyr, startmo, startda, starthr, 0, 0),
    data: sevedata
  },{
    name: wxsimconf.liname,  // Lifted
    visible: wxsimconf.showli,
    color: wxsimconf.licolor,
    yAxis: 1,
    type: 'spline',
    pointInterval: stepsec,
    pointStart: Date.UTC(startyr, startmo, startda, starthr, 0, 0),
    data: lidata
  },{
    name: wxsimconf.dewname,  // dewpoint
    color: wxsimconf.dewcolor,
    visible: wxsimconf.showdew,
    yAxis: 2,
    type: 'spline',
    pointInterval: stepsec,
    pointStart: Date.UTC(startyr, startmo, startda, starthr, 0, 0),
    data: dewdata    
  }]
  }
},
/*
**************
* SOLARGRAPH *
**************
*/
'solargraph': {
options:{
  chart: {
    renderTo: 'solargraph',
    plotBackgroundColor: wxsimconf.bgcolor,
    margin: [20, 120, 30, 60]
  },
  title: { text: '' },
  subtitle: { text: '' },
  xAxis: {
    type: 'datetime',
    labels: {align: 'left', 
             x: 4, 
             y: -5,
             formatter: function() {
              if(wxsimconf.showdaynames) {
               var dz= new Date( );
                dz.setTime(this.value);
                var dayname = wxsimconf.days[dz.getUTCDay()];
                } else {
                var dayname = Highcharts.dateFormat('%e. %b', this.value)
                }
                return dayname;
                }
    },
    title: {
      text: 'time'
    },
    gridLineWidth: 0,
    tickColor: wxsimconf.gridcolor,
    lineColor: wxsimconf.gridcolor,
    gridLineColor: wxsimconf.gridcolor,
    alternateGridColor: wxsimconf.altnernatebgcolor,
    opposite: true
  },
  yAxis: [{ // Left axis
    labels: { style: { color: wxsimconf.uvcolor } },
    title: {
      text: wxsimconf.uvname,
      style: { color: wxsimconf.uvcolor,font: wxsimconf.yaxistitlefont, fontWeight: "bold" },
      margin: 40
    },
    min: 0,
    lineWidth: 1,
    tickWidth: 1,
    tickInterval: wxsimconf.uvstep,
    tickColor: wxsimconf.gridcolor,
    lineColor: wxsimconf.gridcolor,
    gridLineColor: wxsimconf.gridcolor,
    plotLines: [{
      enabled: below,
      value: changecolor,
      width: 2
      //color: '#808080'
      }]
  }, { // Right 1 axis
    title: {
      text: wxsimconf.solarname,
      margin: 35,
      style: { color: wxsimconf.solarcolor }
      },
    labels: { style: { color: wxsimconf.solarcolor,font: wxsimconf.yaxistitlefont, fontWeight: "bold" } },
    opposite: true,
    lineWidth: 1,
    tickColor: wxsimconf.gridcolor,
    lineColor: wxsimconf.gridcolor,
    gridLineColor: wxsimconf.gridcolor,
    min: 0,
    tickWidth: 1
  }, { // Right 2 axis
    title: {
      text: wxsimconf.dewname+' ('+tempunit+')',
      margin: 40,
      style: { color: wxsimconf.dewcolor }
    },
    labels: { style: { color: wxsimconf.dewcolor} },
    opposite: true,
    offset: 60,
    lineWidth: 1,
    tickColor: wxsimconf.gridcolor,
    lineColor: wxsimconf.gridcolor,
    gridLineColor: wxsimconf.gridcolor,
    tickWidth: 1
  }],
  tooltip: {
    formatter: function() {
    var unit = '';
    if(this.series.name == wxsimconf.solarname) { var unit = ' w/m&sup2;'; }
    if(wxsimconf.showdaynames) {
    var dz= new Date( );
    dz.setTime(this.x);
    var dayname = wxsimconf.days[dz.getUTCDay()];
    } else {
    var dayname = Highcharts.dateFormat('%e. %b', this.x)
    }
    return '<b>'+ this.series.name +'</b><br/>'+dayname+', '+
    Highcharts.dateFormat('%H:%M', this.x) +': '+ this.y + unit;
    }
  },
  legend: {
    style: {
      bottom: '-2px',
      left: '100px'
    },
    labelFormatter: function() {
    if(this.name == wxsimconf.convname) { return this.name+' (0-5)'; }
    else { return this.name; }
    }
  },
  credits:{enabled:false},
  plotOptions: {
    areaspline: {
      marker: {enabled: false},
      states: {
        hover: {
          marker: {
          enabled: true,
          symbol: 'circle',
          radius: 2,
          lineWidth: 1
          }
        }
      }
    },
    area: {
      fillColor: {
            linearGradient: [0, 20, 0, 120],
            stops: uvcls
      },
      marker: {enabled: false},
      states: {
        hover: {
          marker: {
          enabled: true,
          symbol: 'circle',
          radius: 2,
          lineWidth: 1
          }
        }
      }
    }
  },
  series: [{
    name: wxsimconf.uvname,  // UV
    visible: wxsimconf.showuv,
    color: wxsimconf.uvcolor,
    type: 'area',
    //lineWidth: 1,
    pointInterval: stepsec,
    pointStart: Date.UTC(startyr, startmo, startda, starthr, 0, 0),
    data: uvdata
  },{
    name: wxsimconf.solarname,  // Solar
    visible: wxsimconf.showsolar,
    color: wxsimconf.solarcolor,
    yAxis: 1,
    type: 'areaspline',
    pointInterval: stepsec,
    pointStart: Date.UTC(startyr, startmo, startda, starthr, 0, 0),
    data: solardata
  }]
  }
}
}