//===============================================================================================
// FUNCTION download_meteogram_csv
//
// Creates a comma-saparated file for download with the data (temp, rh, precip, ws, wd) for the
// currently selected ECONet station whose meteogram is displayed. Then downloads the file. 
//  Some minor broswer handling is included with the window.navigator.msSaveOrBlob.
//
// INPUTS:
//      filename ..... the name of the file to be saved (is "NAME_Meteogram.csv")
//      x_axis ....... the ob data axis (the x axis) used for the meteogram. 
//      temp ......... temperature data array
//      precip ....... precipitation data array
//      relhum ....... relative humidity data array
//      windspd ...... wind speed data array
//      winddir ...... wind direction data array
//
// OUTPUTS:
//      Returns nothing (true). It downloads a file to the user's browser.
//
// @author Rebecca Ward
// @date November 2017
//===============================================================================================
function download_meteogram_csv(filename,x_axis, temp, precip,relhum,windspd,winddir){
//function download_meteogram_csv(filename,x_axis, temp, precip,soiltemp,windspd,winddir){

    // Parse the data_json into a string:
    var text = "Ob Time,Temperature (F),Precipitation (in.),Relative Humidty (%),Wind Speed (mph),Wind Direction (deg)\n";
    //var text = "Ob Time,Temperature (F),Precipitation (in.),Soil Tempearature (F),Wind Speed (mph),Wind Direction (deg)\n";

    // Iterate through each observation (all array should be the same length) and add to csv
    for(var i=0;i<temp.length;i++){
        text += x_axis[i] + ","; // Add ob time 
        text += temp[i] + ",";   // Add temperature (F)
        text += precip[i] + ","; // Add preciptitation (in)
        text += relhum[i] +",";  // Add relative humidty (%)
        //text += soiltemp[i] +","; // Add soil temperature (F)
        text += windspd[i] + "," + winddir[i]; // Add wind speed (mph) and wind dir (deg)
        text += "\n"; // New line
    }
    
    // Blob is needed for IE/Edge
    blob = new Blob([text]);
    
    // IE/Edge and Safari want to save things this way:
    if(window.navigator.msSaveOrOpenBlob){
        window.navigator.msSaveBlob(blob,filename);
    }
    // Chrome, Mozilla do things this way (create a link to download the file, "click" the
    // link to download, then delete the element that housed the link.
    else{
        
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(text));
        element.setAttribute('download', filename);

        element.style.display = 'none';
        document.body.appendChild(element);

        element.click();

        document.body.removeChild(element);

    }

}



//===============================================================================================
// FUNCTION addMeteogram
//
// Creates a meteogram containing observations over the precending 48 hours
//
// INPUTS:
//      station ... the 4-digit ID of the ECONet station whose meteogram we're creating
//
// OUTPUTS:
//      true... a meteogram.
//
// @authors Rebecca Ward, Corey Davis, Sean Heuser
//===============================================================================================
function addMeteogram(station){
    // Don't actually need this...can just do relative because in same directory
    var protocol = window.location.protocol;
    var host = window.location.host;

    //var url_start = protocol+"//"+host+"//products/homepage_conditions/getMeteogramData.php";
    var url_start = "/dev/homepage_conditions/getMeteogramData.php";
    var url = url_start+"?station=" + station;

    var daysOfWeek = ['Sun','Mon','Tues','Wed','Thurs','Fri','Sat'];
    var monthsOfYear = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

    if(url){
        var xmlhttp;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else{// code for IE5, IE6
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                var responseText = xmlhttp.responseText;
                var station_info = JSON.parse(responseText);

                var obtime = [];
                var obhours = [];
                var topaxis = [];

                var temp = [];
                var windspd = [];
                var winddir = [];
                var precip = [];
                var relhum = [];
                //var soiltemp = [];

                for (var i=0; i<station_info.length; i++) {
		    //console.log(station_info[i]);
                    var obtime_raw = station_info[i]['ob'];
                    var obtime_year  = parseInt(obtime_raw.substring(0, 4), 10);
                    var obtime_month = parseInt(obtime_raw.substring(5, 7), 10) - 1;
                    var obtime_day   = parseInt(obtime_raw.substring(8, 10), 10);
                    var obtime_hour  = parseInt(obtime_raw.substring(11, 13), 10);
                    var obtime_mins  = parseInt(obtime_raw.substring(14, 16), 10);
                    var obtime_secs  = parseInt(obtime_raw.substring(17, 19), 10);
                    var obtime_date = new Date(obtime_year, obtime_month, obtime_day, obtime_hour, obtime_mins, obtime_secs);

                    //Used to populate bottom X axis times
                    var ob_hours = obtime_date.getHours();
                    if (ob_hours < '10'){
                        ob_hours = "0"+ob_hours;
                    }

                    var WeekDay = daysOfWeek[obtime_date.getDay()] + ", "
                    var CalDay = "<b>" + monthsOfYear[obtime_date.getMonth()] + " " + obtime_date.getDate() + "</b>";
                    if (obtime_date.getHours() >= 0 && obtime_date.getHours() < 2) {
                    //if (obtime_date.getHours() >= 0 && obtime_date.getHours() < 1) {
                        topaxis.push(CalDay);
                    } else {
                        topaxis.push(' ');
                    }

                    obtime.push(obtime_date);
                    obhours.push(ob_hours);
                    temp.push(station_info[i]['temp']);
                    windspd.push(station_info[i]['ws']);
                    winddir.push(station_info[i]['wd']);
                    precip.push(station_info[i]['precip']);
                    relhum.push(station_info[i]['rh']);
                    //soiltemp.push(station_info[i]['stemp']);
                }

                // Set the export options for the meteogram.
                // First, remove any options to export as a CSV, XLS, or data table.
                meteogram_menu_buttons = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
                for (var key in meteogram_menu_buttons) {
                    if (meteogram_menu_buttons[key]['textKey'] == 'downloadCSV' || meteogram_menu_buttons[key]['textKey'] == 'downloadXLS' || meteogram_menu_buttons[key]['textKey'] == 'viewData') {
                        delete meteogram_menu_buttons[key];
                    }
                }
			
                // Build and return the HighCharts options structure
                getChartOptions = function(){
                    var meteogram = this;

                    return{
                        chart: {
                            renderTo: this.cc_meteogram,
                            marginLeft: 70,
                            marginRight: 70,
                            marginTop: 100,
                            plotBorderWidth: 1,
                            //width: 938,
                            //height: 360,
                            alignTicks: false,
                            style: {
                                fontFamily: 'Lato, Arial, Helvetica, sans-serif'
                            }
                        },

                        title: {
                            text: this.getTitle(station),
                            align: 'center'
                        },

                        subtitle: {
                            text: this.getSubTitle(),
                            align: 'center',
                            useHTML: true
                        },

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

                        exporting: {
                            buttons: {
                                contextButton: {
                                    menuItems: Highcharts.defaultOptions.exporting.buttons.contextButton.menuItems.concat([{
                                        text: 'Download CSV',
                                        onclick: function() {
                                            out_csv_name = station+"_Meteogram.csv";
                                            download_meteogram_csv(out_csv_name,obtime, temp, precip,relhum,windspd,winddir);
                                            //download_meteogram_csv(out_csv_name,obtime,temp,precip,soiltemp,windspd,winddir);
                                        }
                                    }])
                                }
                            },

                            chartOptions: {
                                chart: {
                                    events: {
                                        load: function(chart){
                                            // Add SCO cloud logo:
                                            var logo_url = protocol+"//"+host+"/images/sco_cloud_logo_small.png";
                                            chart.target.renderer.image(logo_url,5,316,60,42).add();
                                            //chart.target.renderer.image(logo_url,520,280,49,34).add();
                                        }
                                    }
                                }
                            }

                        },

                        xAxis: [
                        { //bottom X axis
                            type: 'categories',
                            categories: obtime,
                            tickLength: 0,
                            gridLineWidth: 1,
                            gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || '#F0F0F0',
                            startOnTick: false,
                            endOnTick: false,
                            minPadding: 0,
                            maxPadding: 0,
                            offset: 30,
                            showLastLabel: true,
                            labels: {
                                formatter: function(){
                                    var time_label = "";
                                    var ob = Date.parse(this.value);
                                    var ob_date = new Date(ob);
                                    var ob_hour = ob_date.getHours();

                                    if (ob_hour == 0)
                                        time_label = "12a";
                                    else if (ob_hour > 12)
                                        time_label = (ob_hour - 12) + "p";
                                    else if (ob_hour == 12)
                                        time_label = "12p";
                                    else
                                        time_label = (ob_hour + 0) + "a";
                                    return time_label;
                                }
                            }
                        }, 
                        { // Top X axis
                            linkedTo: 0,
                            type: 'categories',
                            categories: topaxis,
                            labels: {
                                autoRotation: false,
                                align: 'left',
                                x: 3,
                                y: -20
                            },
                            opposite: true,
                            tickLength: 0,
                            gridLineWidth: 1
                        }],
                        yAxis: [
                        { // temperature axis (if air and soil used, change labels)
                            title: {
                                text: 'Air Temperature',
                                //text: 'Temperature (Red - Air, Green - Soil)',	//If both parameters are used
                                offset: 0,
                                align: 'middle',
                                rotation: 270,
                                style: {
                                    fontSize: '10px',
                                    color: '#ff0000' // Make axis title red (Only if Air Temp is used, otherwise, leave it black)
                                },
                                textAlign: 'center',
                                x: -40
                            },
                            labels: {
                                format: '{value}°F',
                                style: {
                                    fontSize: '10px',
                                },
                                x: -3
                             },
                            //plotLines: [{ // zero plane
                            //    value: 0,
                            //    color: '#BBBBBB',
                            //    width: 1,
                            //    zIndex: 2
                            //}],
                            maxPadding: 0.3,
                            gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || '#F0F0F0'

                        },
                        { // precipitation axis
                            title:{
                                text:null
                            },
                            labels:{
                                enabled: false
                            },
                            gridLineWidth: 0,	
                            tickLength: 0
                        },
                        { // Relative Humidity axis
                            min: 0,
                            max: 100,
                            tickInterval: 25,
                            allowDecimals: false,
                            title: {
                                text: 'Relative Humidity',
                                offset: 0,
                                align: 'middle',
                                rotation: 90,
                                style: {
                                    fontSize: '10px',
                                    color: '#118723' // Makes RH title green
                                },
                                textAlign: 'center',
                                x: 30
                            },
                            labels: {
                                format: '{value}%',
                                style: {
                                    fontSize: '8px',
                                },
                                y: 2,
                                x: 3
                            },
                            gridLineWidth: 0,
                            opposite: true,
                            showLastLabel: true
                        }], // end of all Y-axis definitions

                        legend: {
                            enabled: false
                        },

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

                        series: [
                        { // Temperature
                            name: 'Temperature',
                            data: temp,
                            type: 'spline',
                            marker: {
                                enabled: false,
                                states: {
                                    hover: {
                                        enabled: true
                                    }
                                }
                            },
                            tooltip: {
                                valueSuffix: '&deg;F'
                            },
                            zIndex: 1,
                            color: '#FF3333',
                            //negativeColor: '#48AFE8'
                        },
                        { //Precipitation
                            name: 'Precipitation',
                            data: precip,
                            type: 'column',
                            color: '#68CFE8',
                            yAxis: 1,
                            groupPadding: 0,
                            pointPadding: 0,
                            borderWidth: 0,
                            shadow: false,
                            dataLabels: {
                                enabled: true,
                                formatter: function() {
                                   if(this.y>0){
                                        return this.y;
                                    }
                                },
                                style: {
                                    fontSize: '8px'
                                }
                            },
                            tooltip: {
                                valueSuffix: ' in.'
                            }
                        },{ // Relative Humidty or Soil Temperature
                            name: 'Relative Humidity',
                            //name: 'Soil Temperature',
                            color: '#118723', // Makes RH title green
                            data: relhum,
                            marker: {
                                enabled: false
                            },
                            shadow: false,
                            tooltip: {
                                //valueSuffix: '&deg;F'
				valueSuffix: '%'
                            },
                            dashStyle: 'shortdot',
                            yAxis: 2
                        },
                        {  // Wind Speed (is hidden)
                            name: 'Wind Speed',
                            visible: false,
                            data: windspd
                        },
                        { // Wind direction (is hidden)
                            name: 'Wind Direction',
                            visible: false,
                            data: winddir
                        }]		
                    };
                }; // End Meteogram.prototype.getchartOptions

				
                // Post-process the chart from the callback function, the second argument to Highcharts.Chart.
                onChartLoad = function(chart) {
                    this.drawWindArrowsMeteogram(chart);
                    this.drawBlocksForWindArrows(chart);

                    chart.renderer.html("<DIV class=\"cc_tooltip\"><P><SPAN class=\"cc_tooltip_content\">Wind vectors show both the wind speed and direction. The speed is represented by the number of full barbs (10 mph) and half barbs (5 mph) at the end of each vector.<BR><BR><IMG src=\"/dev/homepage_conditions/wind_barb.png\" style=\"float: right;\">The vectors point away from the wind direction. In the example to the right, the vector points from east to west, indicating an easterly wind with a speed of 25 mph.</SPAN></P></DIV>", -4, 268).add();
		
                    // Add SCO Cloud Logo
                   // var logo_url = protocol+"//"+host+"/images/sco_cloud_logo_small.png";
                    //chart.renderer.image(logo_url,5,316,60,42).add();

                }; //End Meteogram.prototype.onChartLoad

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

                }; //End Meteogram.prototype.createChart
                createChart();

			} // End xmlhttp request		
		}	
	
		xmlhttp.open("GET",url,true);
		xmlhttp.send();

	}
}