(function () {
var feature = {"geometry": {"type": "Point", "coordinates": [-81.2134708, 38.13774032]}, "_id": "3a16205e5e1010810f4bd35a3da89c59", "type": "Feature", "properties": {"metrics": {"gage_height": [{"timestamp": "2026-10-25T03:45:00.000-04:00", "value": 3.29}, {"timestamp": "2026-10-26T04:00:00.000-04:00", "value": 3.18}, {"timestamp": "2026-10-27T03:45:00.000-04:00", "value": 3.13}, {"timestamp": "2026-10-28T03:45:00.000-04:00", "value": 3.11}, {"timestamp": "2026-10-29T04:00:00.000-04:00", "value": 3.03}, {"timestamp": "2026-10-30T03:45:00.000-04:00", "value": 4.4}, {"timestamp": "2026-10-31T03:45:00.000-04:00", "value": 4.31}, {"timestamp": "2026-11-01T03:00:00.000-05:00", "value": 2.85}, {"timestamp": "2026-11-02T03:00:00.000-05:00", "value": 2.8}, {"timestamp": "2026-11-03T02:45:00.000-05:00", "value": 3.36}], "streamflow": [{"timestamp": "2026-11-02T03:00:00.000-05:00", "value": 2900}, {"timestamp": "2026-11-03T02:45:00.000-05:00", "value": 4150}], "elevation": 622, "huc": [{"code": "h05050006", "type": "hydrologic unit", "name": "Upper Kanawha"}, {"code": "h050500", "type": "hydrologic accounting unit", "name": "Kanawha"}, {"code": "h0505", "type": "hydrologic subregion", "name": "Kanawha"}, {"code": "h05", "type": "hydrologic region", "name": "Ohio"}], "water_temp": [{"timestamp": "2026-10-25T03:45:00.000-04:00", "value": 15.3}, {"timestamp": "2026-10-26T04:00:00.000-04:00", "value": 15}, {"timestamp": "2026-10-27T03:45:00.000-04:00", "value": 14.8}, {"timestamp": "2026-10-28T03:45:00.000-04:00", "value": 14.7}, {"timestamp": "2026-10-29T04:00:00.000-04:00", "value": 14.6}, {"timestamp": "2026-10-30T03:45:00.000-04:00", "value": 15.4}, {"timestamp": "2026-10-31T03:45:00.000-04:00", "value": 15.4}, {"timestamp": "2026-11-01T03:00:00.000-05:00", "value": 15.2}, {"timestamp": "2026-11-02T03:00:00.000-05:00", "value": 15.3}, {"timestamp": "2026-11-03T02:45:00.000-05:00", "value": 15.4}], "max": 111000, "average": 12514.616083598365, "min": 1230, "primary": "streamflow", "forecast": {"hourly": {"24": null, "120": null, "72": null}, "discussion": "", "last": "2026-11-03", "daily": [{"details": "Mostly clear, with a low around 49. Southeast wind around 8 mph. ", "summary": "Mostly Clear", "day": "Today", "temp": "49", "icon": "https://forecast.weather.gov/newimages/medium/nfew.png"}, {"details": "Sunny, with a high near 73. Southeast wind around 6 mph. ", "summary": "Sunny", "day": "Tuesday", "temp": "73", "icon": "https://forecast.weather.gov/newimages/medium/few.png"}, {"details": "A chance of rain before 2pm, then a chance of rain after 5pm.  Partly sunny, with a high near 71. South wind 11 to 15 mph, with gusts as high as 25 mph.  Chance of precipitation is 40%.", "summary": "Mostly Sunny then Chance Rain", "day": "Wednesday", "temp": "71", "icon": "https://forecast.weather.gov/DualImage.php?i=sct&j=ra&jp=40"}, {"details": "A 40 percent chance of rain, mainly before 1pm.  Mostly cloudy, with a high near 69.", "summary": "Chance Rain", "day": "Thursday", "temp": "69", "icon": "https://forecast.weather.gov/newimages/medium/ra40.png"}, {"details": "A 40 percent chance of rain.  Partly sunny, with a high near 67.", "summary": "Chance Rain", "day": "Friday", "temp": "67", "icon": "https://forecast.weather.gov/newimages/medium/ra40.png"}, {"details": "Partly sunny, with a high near 58.", "summary": "Partly Sunny", "day": "Saturday", "temp": "58", "icon": "https://forecast.weather.gov/newimages/medium/bkn.png"}], "discussion_loc": "RLX"}, "std_dev": 13456.110045781405}, "state": "WV", "site_id": "03193000", "title": "KANAWHA RIVER AT KANAWHA FALLS, WV"}};
var data = feature.properties.metrics;
var label_size = "18px";

if ("comparison" == "conditions"){


    var instant_data = [];

    var mycol = instant_data;
    var col_data = []
    for (var x = 1; x < mycol.length; x++){
            col_data.push([Date.parse(mycol[x][0]), parseFloat(mycol[x][1]) ])
    }
        $('#snoflo_chart').highcharts({
        exporting: {
            enabled: true
        },
        exporting: {
        buttons: {
            contextButton: {
                symbol: 'menu',
                symbolStrokeWidth: 1,
                symbolFill: '#a4edba',
                symbolStroke: '#330033'
            }
        },
            enabled: true,
            chartOptions:{
                subtitle: {
                    text:'KANAWHA RIVER AT KANAWHA FALLS, WV | USGS 03193000'
                },
                credits: {
                    text:'Provided by snoflo.org',
            text:'Provided by snoflo.org',
            href: 'http://snoflo.org',
                style: {
                    fontSize:'12px',
                    color: '#1779ba',
                },
                },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                borderRadius: 5,
                backgroundColor: 'rgba(252, 255, 197, 0.7)',
                borderWidth: 1,
                borderColor: '#AAA',
                y: -6
            },
        }
    },
            }
        },
global: {
timezoneOffset: -280
},
            title: {
                text: 'Seasonal Comparison | Kanawha River At Kanawha Falls',
                style: {
                    fontSize:'18px',
                    fontWeight: 'bold',
                },
            },
            subtitle: {
                style: {
                    fontSize:'16px',
                    fontWeight: 'bold',
                },

                text: 'Streamflow',

            },
            xAxis: {
                crosshair: true,
                type: 'datetime',
            dateTimeLabelFormats: {
                day: '%b %e'
            }
            },
            yAxis: {
                title: {
                style: {
                    fontSize:'16px',
                    fontWeight: 'bold',
                },

                text: 'Streamflow (cfs)',

                }
            },
            legend: {
                enabled: true
            },
            plotOptions: {
                areaspline:{
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [

                            [0, '#1779ba'],
                            [1, 'white'],


                        ]
                    },
                    marker: {
                        radius: 0
                    },
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 3
                        }
                    },
                    threshold: null
                }
            },
        credits: {
            text:'Provided by snoflo.org',
            href: 'http://snoflo.org',
                style: {
                    fontSize:'12px',
                    color: '#1779ba',
                },
        },

            series: [{
color: '#1779ba',

                name: 'Streamflow',
                type: 'areaspline',

                data: col_data
            }]
        });

}

if ("comparison" == "history"){
try{

if (data.snow_report.length > 90){
    var historical_days = 90;
} else {
    var historical_days = 0;

}

    var high_series = [{
            name: 'Snowpack',
            type: 'areaspline',
            yAxis: 1,
            lineWidth: 2,
            data: [],
            tooltip: {
                valueSuffix: '"'
            },
            color: Highcharts.getOptions().colors[0],
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            },
            zIndex: 3,



        }, {
            name: 'Recent Snowfall',
            type: 'column',
            yAxis: 1,
            data: [],
            tooltip: {
                valueSuffix: '"'
            },
            zIndex: 3,
            color: Highcharts.getOptions().colors[0]

        },{
            name: 'Snow Water Equivalent',
            type: 'spline',
            yAxis: 2,
            data: [],
            tooltip: {
                valueSuffix: '%'
            },
            zIndex: 1,
            lineWidth: 2,
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            },
            color: Highcharts.getOptions().colors[5]

        }, {
            name: 'Temperature',
            type: 'spline',
            dashStyle: 'shortdot',
            yAxis: 0,
            data: [],
            tooltip: {
                valueSuffix: ' °F'
            },
            lineWidth: 2,
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            },
            zIndex: 2,
            color: Highcharts.getOptions().colors[3]
        }]

var high_dates = []

    for (var x = data.snow_report.length - 90; x < data.snow_report.length; x++){
          var current_snowfall = data.snow_report[x].snowfall;
          if (current_snowfall < 0){
              current_snowfall = 0;
          }
          var current_base = data.snow_report[x].base;
          var current_swe = data.snow_report[x].swe;
          try{
              var formula = ((parseFloat(current_swe) / parseFloat(current_base)) * 100).toFixed(2);
              current_swe = formula;
          } catch(err){
              current_swe = 0
          }
          var current_at = Math.round(data.snow_report[x].air_temp);
          var current_date = Date.parse(data.snow_report[x].date);
          if (parseFloat(current_swe) <= 100 && parseFloat(current_snowfall) >= 0 && parseFloat(current_snowfall) < 30 && current_date && parseFloat(current_base) > 0 && parseFloat(current_at) >= 0 && parseFloat(current_swe) >= 0 ){
              high_series[0].data.push([current_date, parseFloat(current_base)])
              high_series[1].data.push([current_date, parseFloat(current_snowfall)])
              high_series[2].data.push([current_date, parseFloat(current_swe)])
              high_series[3].data.push([current_date, parseFloat(current_at)])
              high_dates.push(current_date)
          }

    }


    var snow_history = $('#snoflo_chart').highcharts({
        exporting: {
        buttons: {
            contextButton: {
                symbol: 'menu',
                symbolStrokeWidth: 1,
                symbolFill: '#a4edba',
                symbolStroke: '#330033'
            }
        },
            enabled: true,
            chartOptions:{
                subtitle: {
                    text:'KANAWHA RIVER AT KANAWHA FALLS, WV | USGS 03193000'
                },
                credits: {
                    text:'provided by snoflo.org',
            text:'Provided by snoflo.org',
            href: 'http://snoflo.org',
                style: {
                    fontSize:'12px',
                    color: '#1779ba',
                },
                },
         rangeSelector: {
                enabled: false,
        },
            }
        },
        chart: {
            zoomType: 'x',
        events: {
            load: function() {
//                this.renderer.image('http://snoflo.org/static/images/logo_snoflo_hydroanalytics.png', 80, 70, 40, 40)
//                    .add();
            }
        },
        },
            rangeSelector: {

                allButtonsEnabled: true,
                selected: 0,
enabled: true,
            },
        title: {
            text: "Seasonal Comparison | Kanawha River At Kanawha Falls",
            align: 'center',
      style: {
            color: '',
      }
        },
        subtitle: {
            align: 'left',
      style: {
            color: 'lightgrey',
      },
            text: ''
        },
  global: {
    useUTC: false
  },
        credits: {
            text: '',
            //href: 'http://snoflo.org',
            href: 'http://snoflo.org',
            text:'Provided by snoflo.org',
            href: 'http://snoflo.org',
                style: {
                    fontSize:'12px',
                    color: '#1779ba',
                },
        },
        xAxis: [{
            crosshair: true,
            type: 'datetime',

    labels: {
enabled: true,
                    style: {fontSize: "14px",
                    color: 'grey',
                    weight: 'bold',},
    },
            dateTimeLabelFormats: {
                day: '%b %e'
            }
            //categories: high_dates
        }],
            plotOptions: {
                areaspline: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°F',
                style: {
                    color: Highcharts.getOptions().colors[3]
                }
            },
            title: {
                text: '',
                style: {
                    fontSize: label_size,
                    color: 'grey',
                    weight: 'bold',
                    color: Highcharts.getOptions().colors[3]
                }
            },

            opposite: true

        }, { // Secondary yAxis
            gridLineWidth: 0,
            title: {
                text: 'Flow',
                style: {
                    fontSize: label_size,
                    color: 'grey',
                    weight: 'bold',
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} "',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            }

        }, { // Tertiary yAxis
            gridLineWidth: 0,
            title: {
                text: '',
                style: {
                    fontSize: label_size,
                    color: 'grey',
                    weight: 'bold',
                    color: Highcharts.getOptions().colors[5]
                }
            },
            labels: {
                format: '{value}% swe',
                style: {
                    color: Highcharts.getOptions().colors[5]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            enabled: true,
        },
        series: high_series,
    });
var d = new Date();




} catch (err){
   var historical_days = 0;
    var high_series = [{
            name: 'Streamflow',
            type: 'areaspline',
            yAxis: 1,
            data: [],
            tooltip: {
                valueSuffix: 'cfs'
            },
            color: Highcharts.getOptions().colors[0],
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            },
            zIndex: 3,



        }, {
            name: 'Gage Height',
            type: 'spline',
            yAxis: 2,
            data: [],
            tooltip: {
                valueSuffix: 'ft'
            },
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            },
            zIndex: 1,
            color: Highcharts.getOptions().colors[5]

        },{
            name: 'Water Temp',
            type: 'spline',
            dashStyle: 'shortdot',
            yAxis: 0,
            data: [],
            tooltip: {
                valueSuffix: ' °C'
            },
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            },
            zIndex: 2,
            color: Highcharts.getOptions().colors[3]
        }]

var high_dates = []


    var historical_days = 0;
    for (var x = data.streamflow.length - 90; x < data.streamflow.length; x++){
          var current_snowfall = data.streamflow[x].value;
          if (current_snowfall < 0){
              current_snowfall = 0;
          }
          var current_date = Date.parse(data.streamflow[x].timestamp);
          if (current_snowfall >=0 && current_snowfall < 1000000){
              high_series[0].data.push([current_date, parseFloat(current_snowfall)])
          }
    }
    var historical_days = 0;
    for (var x = historical_days; x < data.gage_height.length; x++){
          var current_snowfall = data.gage_height[x].value;
          if (current_snowfall < 0){
              current_snowfall = 0;
          }
          if (current_snowfall >=0){
          var current_date = Date.parse((data.gage_height[x].timestamp));
              high_series[1].data.push([current_date, parseFloat(current_snowfall)])
          }
    }
    var historical_days = 0;
    for (var x = historical_days; x < data.water_temp.length; x++){
          var current_snowfall = data.water_temp[x].value;
          if (current_snowfall < 0){
              current_snowfall = 0;
          }
          if (current_snowfall >=0){
          var current_date = Date.parse((data.water_temp[x].timestamp));
              high_series[2].data.push([current_date, parseFloat(current_snowfall)])
          }
    }



    var flow_history = $('#snoflo_chart').highcharts({
        exporting: {
            enabled: true,
        buttons: {
            contextButton: {
                symbol: 'menu',
                symbolStrokeWidth: 1,
                symbolFill: '#a4edba',
                symbolStroke: '#330033'
            }
        },
            chartOptions:{
                subtitle: {
                    text:'Kanawha River At Kanawha Falls, Wv | USGS 03193000'
                },
                credits: {
                    text:'provided by snoflo.org',
            text:'Provided by snoflo.org',
            href: 'http://snoflo.org',
                style: {
                    fontSize:'12px',
                    color: '#1779ba',
                },
                },
         rangeSelector: {
                enabled: false,
        },
            }
        },
        chart: {
            zoomType: 'x'
        },
         rangeSelector: {
                allButtonsEnabled: true,
                selected: 0,
                enabled: true,
        },
        title: {
            text: "Seasonal Comparison | Kanawha River At Kanawha Falls",
            align: '',
      style: {
            color: '',
      }
        },
        subtitle: {
            align: 'left',
      style: {
            color: 'lightgrey',
      },
            text: ''
        },
        credits: {
            text: '',
            //href: 'http://snoflo.org',
            href: 'http://snoflo.org',
            text:'Provided by snoflo.org',
            href: 'http://snoflo.org',
                style: {
                    fontSize:'12px',
                    color: '#1779ba',
                },
        },
        xAxis: [{
            crosshair: true,
    type: 'datetime',

    labels: {
enabled: true,
                style: {
                    fontSize:'14px',
                    fontWeight: 'bold',
                },
    },
            dateTimeLabelFormats: {
                day: '%b %e'
            }
            //categories: high_dates
        }],
            plotOptions: {
                areaspline: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[3]
                }
            },
            title: {
                text: '',
                style: {
                    fontSize:'16px',
                    fontWeight: 'bold',
                    color: Highcharts.getOptions().colors[3]
                }
            },

            opposite: true

        }, { // Secondary yAxis
            gridLineWidth: 1,
            title: {
                text: 'Streamflow',
                style: {
                    fontSize:'16px',
                    fontWeight: 'bold',
                    color: Highcharts.getOptions().colors[0]
                }
            },
            type: 'logarithmic',
            labels: {
                format: '{value} cfs',
                align: 'left',
                x: 3,
                y: -2,
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            }

        }, { // Tertiary yAxis
            gridLineWidth: 0,
            title: {
                text: '',
                style: {
                    fontSize:'16px',
                    fontWeight: 'bold',
                    color: Highcharts.getOptions().colors[5]
                }
            },
            labels: {
                format: '{value} ft',
                style: {
                    color: Highcharts.getOptions().colors[5]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
enabled: true,
        },
        series: high_series,
    });
}



}

if ("comparison" == "forecast"){


function Meteogram(xml, container) {
    this.symbols = [];
    this.symbolNames = [];
    this.precipitations = [];
    this.windDirections = [];
    this.windDirectionNames = [];
    this.windSpeeds = [];
    this.windSpeedNames = [];
    this.temperatures = [];
    this.pressures = [];

    // Initialize
    this.xml = xml;
    this.container = container;

    // Run
    this.parseYrData();
}

Meteogram.prototype.getSymbolSprites = function (symbolSize) {
    return {
        '01d': {
            x: 0,
            y: 0
        },
        '01n': {
            x: symbolSize,
            y: 0
        },
        '16': {
            x: 2 * symbolSize,
            y: 0
        },
        '02d': {
            x: 0,
            y: symbolSize
        },
        '02n': {
            x: symbolSize,
            y: symbolSize
        },
        '03d': {
            x: 0,
            y: 2 * symbolSize
        },
        '03n': {
            x: symbolSize,
            y: 2 * symbolSize
        },
        '17': {
            x: 2 * symbolSize,
            y: 2 * symbolSize
        },
        '04': {
            x: 0,
            y: 3 * symbolSize
        },
        '05d': {
            x: 0,
            y: 4 * symbolSize
        },
        '05n': {
            x: symbolSize,
            y: 4 * symbolSize
        },
        '18': {
            x: 2 * symbolSize,
            y: 4 * symbolSize
        },
        '06d': {
            x: 0,
            y: 5 * symbolSize
        },
        '06n': {
            x: symbolSize,
            y: 5 * symbolSize
        },
        '07d': {
            x: 0,
            y: 6 * symbolSize
        },
        '07n': {
            x: symbolSize,
            y: 6 * symbolSize
        },
        '08d': {
            x: 0,
            y: 7 * symbolSize
        },
        '08n': {
            x: symbolSize,
            y: 7 * symbolSize
        },
        '19': {
            x: 2 * symbolSize,
            y: 7 * symbolSize
        },
        '09': {
            x: 0,
            y: 8 * symbolSize
        },
        '10': {
            x: 0,
            y: 9 * symbolSize
        },
        '11': {
            x: 0,
            y: 10 * symbolSize
        },
        '12': {
            x: 0,
            y: 11 * symbolSize
        },
        '13': {
            x: 0,
            y: 12 * symbolSize
        },
        '14': {
            x: 0,
            y: 13 * symbolSize
        },
        '15': {
            x: 0,
            y: 14 * symbolSize
        },
        '20d': {
            x: 0,
            y: 15 * symbolSize
        },
        '20n': {
            x: symbolSize,
            y: 15 * symbolSize
        },
        '20m': {
            x: 2 * symbolSize,
            y: 15 * symbolSize
        },
        '21d': {
            x: 0,
            y: 16 * symbolSize
        },
        '21n': {
            x: symbolSize,
            y: 16 * symbolSize
        },
        '21m': {
            x: 2 * symbolSize,
            y: 16 * symbolSize
        },
        '22': {
            x: 0,
            y: 17 * symbolSize
        },
        '23': {
            x: 0,
            y: 18 * symbolSize
        }
    };
};


/**
 * Function to smooth the temperature line. The original data provides only whole degrees,
 * which makes the line graph look jagged. So we apply a running mean on it, but preserve
 * the unaltered value in the tooltip.
 */
Meteogram.prototype.smoothLine = function (data) {
    var i = data.length,
        sum,
        value;

    while (i--) {
        data[i].value = value = data[i].y; // preserve value for tooltip

        // Set the smoothed value to the average of the closest points, but don't allow
        // it to differ more than 0.5 degrees from the given value
        sum = (data[i - 1] || data[i]).y + value + (data[i + 1] || data[i]).y;
        data[i].y = Math.max(value - 0.5, Math.min(sum / 3, value + 0.5));
    }
};

/**
 * Callback function that is called from Highcharts on hovering each point and returns
 * HTML for the tooltip.
 */
Meteogram.prototype.tooltipFormatter = function (tooltip) {

    // Create the header with reference to the time interval
    var index = tooltip.points[0].point.index,
        ret = '<small>' + Highcharts.dateFormat('%A, %b %e, %H:%M', tooltip.x) + '-' +
            Highcharts.dateFormat('%H:%M', tooltip.points[0].point.to) + '</small><br>';

    // Symbol text
    ret += '<b>' + this.symbolNames[index] + '</b>';

    ret += '<table>';

    // Add all series
    Highcharts.each(tooltip.points, function (point) {
        var series = point.series;
        ret += '<tr><td><span style="color:' + series.color + '">\u25CF</span> ' + series.name +
            ': </td><td style="white-space:nowrap">' + Highcharts.pick(point.point.value, point.y) +
            series.options.tooltip.valueSuffix + '</td></tr>';
    });

    // Add wind
    ret += '<tr><td style="vertical-align: top">\u25CF Wind</td><td style="white-space:nowrap">' + this.windDirectionNames[index] +
        '°<br>' + this.windSpeedNames[index] + ' (' +
        Highcharts.numberFormat(this.windSpeeds[index], 1) + ' mph)</td></tr>';

    // Close
    ret += '</table>';


    return ret;
};

/**
 * Draw the weather symbols on top of the temperature series. The symbols are sprites of a single
 * file, defined in the getSymbolSprites function above.
 */
Meteogram.prototype.drawWeatherSymbols = function (chart) {
    var meteogram = this,
        symbolSprites = this.getSymbolSprites(30);

    $.each(chart.series[0].data, function (i, point) {
        var sprite,
            group;

        if (meteogram.resolution > 36e5 || i % 2 === 0) {

            sprite = symbolSprites[meteogram.symbols[i]];
            if (sprite) {

                // Create a group element that is positioned and clipped at 30 pixels width and height
                group = chart.renderer.g()
                    .attr({
                        translateX: point.plotX + chart.plotLeft - 15,
                        translateY: point.plotY + chart.plotTop - 30,
                        zIndex: 5
                    })
                    .clip(chart.renderer.clipRect(0, 0, 30, 30))
                    .add();

                // Position the image inside it at the sprite position
                chart.renderer.image(
                    'https://www.highcharts.com/samples/graphics/meteogram-symbols-30px.png',
                    -sprite.x,
                    -sprite.y,
                    90,
                    570
                )
                    .add(group);
            }
        }
    });
};

/**
 * Create wind speed symbols for the Beaufort wind scale. The symbols are rotated
 * around the zero centerpoint.
 */
Meteogram.prototype.windArrow = function (name) {
    var level,
        path;

    // The stem and the arrow head
    path = [
        'M', 0, 7, // base of arrow
        'L', -1.5, 7,
        0, 10,
        1.5, 7,
        0, 7,
        0, -10 // top
    ];

    level = $.inArray(name, ['Calm', 'Light air', 'Light breeze', 'Gentle breeze', 'Moderate breeze',
        'Fresh breeze', 'Strong breeze', 'Near gale', 'Gale', 'Strong gale', 'Storm',
        'Violent storm', 'Hurricane']);

    if (level === 0) {
        path = [];
    }

    if (level === 2) {
        path.push('M', 0, -8, 'L', 4, -8); // short line
    } else if (level >= 3) {
        path.push(0, -10, 7, -10); // long line
    }

    if (level === 4) {
        path.push('M', 0, -7, 'L', 4, -7);
    } else if (level >= 5) {
        path.push('M', 0, -7, 'L', 7, -7);
    }

    if (level === 5) {
        path.push('M', 0, -4, 'L', 4, -4);
    } else if (level >= 6) {
        path.push('M', 0, -4, 'L', 7, -4);
    }

    if (level === 7) {
        path.push('M', 0, -1, 'L', 4, -1);
    } else if (level >= 8) {
        path.push('M', 0, -1, 'L', 7, -1);
    }

    return path;
};

///**
// * Draw the wind arrows. Each arrow path is generated by the windArrow function above.
// */
//Meteogram.prototype.drawWindArrows = function (chart) {
//    var meteogram = this;
//
//    $.each(chart.series[0].data, function (i, point) {
//        var arrow, x, y;
//
//        if (meteogram.resolution > 36e5 || i % 2 === 0) {
//
//            // Draw the wind arrows
//            x = point.plotX + chart.plotLeft + 0;
//            y = 340;
//            if (meteogram.windSpeedNames[i] === 'Calm') {
//                arrow = chart.renderer.circle(x, y, 10).attr({
//                    fill: 'none'
//                });
//            } else {
//                arrow = chart.renderer.path(
//                    meteogram.windArrow(meteogram.windSpeedNames[i])
//                ).attr({
//                    rotation: parseInt(meteogram.windDirections[i], 10),
//                    translateX: x, // rotation center
//                    translateY: y // rotation center
//                });
//            }
//            arrow.attr({
//                stroke: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
//                'stroke-width': 1.5,
//                zIndex: 5
//            })
//            .add();
//
//        }
//    });
//};
//
///**
// * Draw blocks around wind arrows, below the plot area
// */
//Meteogram.prototype.drawBlocksForWindArrows = function (chart) {
//    var xAxis = chart.xAxis[0],
//        x,
//        pos,
//        max,
//        isLong,
//        isLast,
//        i;
//
//    for (pos = xAxis.min, max = xAxis.max, i = 0; pos <= max + 36e5; pos += 36e5, i += 1) {
//
//        // Get the X position
//        isLast = pos === max + 36e5;
//        x = Math.round(xAxis.toPixels(pos)) + (isLast ? 0.5 : -0.5);
//
//        // Draw the vertical dividers and ticks
//        if (this.resolution > 36e5) {
//            isLong = pos % this.resolution === 0;
//        } else {
//            isLong = i % 2 === 0;
//        }
//        chart.renderer.path(['M', x, chart.plotTop + chart.plotHeight + (isLong ? 0 : 28),
//            'L', x, chart.plotTop + chart.plotHeight + 32, 'Z'])
//            .attr({
//                'stroke': chart.options.chart.plotBorderColor,
//                'stroke-width': 1
//            })
//            .add();
//    }
//};


Meteogram.prototype.getChartOptions = function () {
    var meteogram = this;

    return {
        chart: {
            renderTo: this.container,
            marginBottom: 80,
            marginRight: 25,
            marginLeft: 25,
            marginTop: 20,
            //height: 500,
            plotBorderWidth: 1,

        /*
            events: {
            load: function() {
//                this.renderer.image('http://snoflo.org:5984/sentimap_icons/general/snoflo_error.png', 00, 00, 80, 60)
//                    .add();
            }
        },
        */
        events: {
            load: function() {
//                this.renderer.image('http://snoflo.org/static/images/logo_snoflo_hydroanalytics.png', 30, 25, 40, 40)
//                    .add();
            }
        },

        },

        title: {
            text: "",
            align: 'left',
      style: {
            color: 'lightgrey',
      }
        },
        credits: {
            text: '',
            href: 'http://snoflo.org',
            text:'Provided by snoflo.org',
            href: 'http://snoflo.org',
                style: {
                    fontSize:'12px',
                    color: '#1779ba',
                },
            position: {
                x: -20
            }
        },

  global: {
    useUTC: false
  },

        tooltip: {
            shared: true,
            useHTML: true,
            formatter: function () {
                return meteogram.tooltipFormatter(this);
            }
        },

        xAxis: [{ // Bottom X axis
            type: 'datetime',
            title: {
                text: "Seasonal Comparison | Kanawha River At Kanawha Falls",
                style: {
                    fontSize: '18px',
                    fontWeight: 'bold',
                },
            },
            labels: {
enabled:false,
                format: '{value:%H}'
            }
        }, { // Top X axis
            linkedTo: 0,
            type: 'datetime',
            tickInterval: 24 * 3600 * 1000,
            labels: {
                format: '{value:<span style="font-size: 16px; font-weight: bold">%a</span> %b %e}',
                align: 'left',
                x: 3,
                y: -5
            },
            opposite: true,
            tickLength: 20,
            gridLineWidth: 0
        }],

        yAxis: [{ // temperature axis
            title: {
                text: "Air Temp (F)",
            },
            labels: {
                format: '{value}°',
                style: {
                    fontSize: '10px',
                    fontWeight: 'bold',
                    color: 'grey',
                },
                x: 25,
                y: -2,
                align: 'right',
            },
            plotLines: [{ // zero plane
                value: 32,
                color: '#BBBBBB',
                width: 2,
                dashStyle: 'shortdot',
                zIndex: 2
            }],
            showLastLabel: false,
            // Custom positioner to provide even temperature ticks from top down
            tickPositioner: function () {
                var max = Math.ceil(this.max) + 1,
                    pos = max - 12, // start
                    ret;

                if (pos < this.min) {
                    ret = [];
                    while (pos <= max) {
                        ret.push(pos += 1);
                    }
                } // else return undefined and go auto

                return ret;

            },
            maxPadding: 0.3,
            tickInterval: 1,
            gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || 'white'

        }, { // precipitation axis
            title: {
                text: null
            },
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
            tickLength: 0

        }, { // Air pressure
            allowDecimals: false,
            title: { // Title on top of axis
//                text: 'hPa',
                text: 'Humidity (%)',
//                offset: 0,
//                align: 'low',
//                rotation: 0,
            },
            labels: {
                    format: '{value}%',
                style: {
                    fontSize: '10px',
                    fontWeight: 'bold',
                    color: 'grey',
                },
                x: -3,
                y: -2,
                align: 'right',
            },
            gridLineWidth: 0,
            opposite: true,
            showFirstLabel: false,
            showLastLabel: false,
        }],

        legend: {
            enabled: true
        },

        plotOptions: {
            series: {
                pointPlacement: 'between'
            }
        },


        series: [{
            name: 'Temperature',
            data: this.temperatures,
            type: 'spline',
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            },
            tooltip: {
                valueSuffix: '°F'
            },
            zIndex: 1,
            color: '#FF3333',
            threshold: 32,
            negativeColor: '#FF3333'
        }, {
//            name: 'Precipitation',
            name: 'Snow',
            data: this.precipitations,
            type: 'column',
//            color: '#68CFE8',
            color: 'lightblue',
            yAxis: 1,
            groupPadding: 0,
            pointPadding: 0,
            borderWidth: 0,
            shadow: false,
            dataLabels: {
                enabled: true,
                formatter: function () {
                    if (this.y > 0) {
                        return this.y+'"';
                    }
                },
                style: {
                    fontSize: '10px'
                }
            },
            tooltip: {
                valueSuffix: '"'
            }
        }, {
//            name: 'Air pressure',
            name: 'Humidity',
            color: 'grey',
            data: this.pressures,
            marker: {
                enabled: false
            },
            shadow: false,
            tooltip: {
  //              valueSuffix: ' hPa'
                valueSuffix: '  %'
            },
            dashStyle: 'shortdot',
            yAxis: 2
        }]
    };
};

/**
 * Post-process the chart from the callback function, the second argument to Highcharts.Chart.
 */
Meteogram.prototype.onChartLoad = function (chart) {

    this.drawWeatherSymbols(chart);
//    this.drawWindArrows(chart);
//    this.drawBlocksForWindArrows(chart);

};

/**
 * Create the chart. This function is called async when the data file is loaded and parsed.
 */
Meteogram.prototype.createChart = function () {
    var meteogram = this;
    this.chart = new Highcharts.Chart(this.getChartOptions(), function (chart) {
        meteogram.onChartLoad(chart);
    });
};

/**
 * Handle the data. This part of the code is not Highcharts specific, but deals with yr.no's
 * specific data format
 */
Meteogram.prototype.parseYrData = function () {

    var meteogram = this,
        xml = this.xml,
        pointStart;

    if (!xml || !xml.forecast) {
        $('#loading').html('<i class="fa fa-frown-o"></i> Failed loading data, please try again later');
        return;
    }

    // The returned xml variable is a JavaScript representation of the provided XML,
    // generated on the server by running PHP simple_load_xml and converting it to
    // JavaScript by json_encode.
    $.each(xml.forecast.tabular.time, function (i, time) {
        // Get the times - only Safari can't parse ISO8601 so we need to do some replacements
        var from = time['@attributes'].from + ' UTC',
            to = time['@attributes'].to + ' UTC';

        from = from.replace(/-/g, '/').replace('T', ' ');
        from = Date.parse(from);
        to = to.replace(/-/g, '/').replace('T', ' ');
        to = Date.parse(to);

        if (to > pointStart + 4 * 24 * 36e5) {
            return;
        }

        // If it is more than an hour between points, show all symbols
        if (i === 0) {
            meteogram.resolution = to - from;
        }

        // Populate the parallel arrays
        meteogram.symbols.push(time.symbol['@attributes']['var'].match(/[0-9]{2}[dnm]?/)[0]); // eslint-disable-line dot-notation
        meteogram.symbolNames.push(time.symbol['@attributes'].name);

        meteogram.temperatures.push({
            x: from,
            y: parseInt(time.temperature['@attributes'].value, 10),
            // custom options used in the tooltip formatter
            to: to,
            index: i
        });

        meteogram.precipitations.push({
            x: from,
            y: parseFloat(time.precipitation['@attributes'].value)
        });
        meteogram.windDirections.push(parseFloat(time.windDirection['@attributes'].deg));
        meteogram.windDirectionNames.push(time.windDirection['@attributes'].name);
        meteogram.windSpeeds.push(parseFloat(time.windSpeed['@attributes'].mps));
        meteogram.windSpeedNames.push(time.windSpeed['@attributes'].name);

        meteogram.pressures.push({
            x: from,
            y: parseFloat(time.pressure['@attributes'].value)
        });

        if (i === 0) {
            pointStart = (from + to) / 2;
        }
    });

    // Smooth the line
    this.smoothLine(this.temperatures);

    // Create the chart when the data is loaded
    this.createChart();
};
// End of the Meteogram protype



$(function () { // On DOM ready...

       xml = {"credit": {"link": {"@attributes": {"url": "", "text": ""}}}, "location": {"country": "", "type": "", "name": ""}, "forecast": {"tabular": {"time": []}}};
       window.meteogram = new Meteogram(xml, 'snoflo_chart');

});


}



}());