$(document).ready( function() {

    tabsFunctionality();
    nestedAccordionFunctionality();
    // opticalFrequencyComb();
    // demultiplexerOutputs();
    OpticalfrequencycombSeries_100();
    OpticalfrequencycombSeries_1000();
    DemuxSpectrumSeries();
    RenderIntensityChart()
    
    $(window).on('resize', function(){
        var win = $(this); //this = window
        if (win.width() <= 768) {
            console.log("<768")
        }else { /* ... */ }
    });
    
    $(document).on("click","#btnNext",function() {
        $("#setupTabs > .current").next('li').trigger('click');
    });

    $(document).on("click","#btnPrevious",function() {
        $("#setupTabs > .current").prev('li').trigger('click');
    });

    $(document).on("change","#calibration #demultiplexer1",function() {
        var id =$(this).val();
        if (id === "PPS") {
            $("#demultiplexer1Value").html('');
            $("#calibrationCFSR").html('');
            $("#demultiplexer1Value").text("Scope Detected");
            $("#calibrationCFSR").text("Pulse Repetition Rate Range (GHz)");
        }
    });

});

function opticalFrequencyComb() {
    Highcharts.chart('opticalFrequencyCombo', {
        chart: {
            type: 'column'
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Optical Frequency Comb'
        },
        xAxis: {
            title: {
                text: 'Wavelength (nm)'
            },
            categories: [
                '1549.52',
                '1550',
                '1550.48'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Power (dBm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            data: [400, 400, 400]
    
        }, {
            data: [400, 400, 400]
    
        }, {
            data: [400, 400, 400]
        },{
            data: [400, 400, 400]
        }]
    });
}

function demultiplexerOutputs() {
    Highcharts.chart('demultiplexerOutputs', {
        chart: {
            type: 'column'
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Demultiplexer outputs'
        },
        xAxis: {
            title: {
                text: 'Wavelength (nm)'
            },
            categories: [
                '1549.52 nm',
                '1550 nm',
                '1550.48'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Power (dBm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Demux 1',
            data: [200, 1000, 300]
    
        }, {
            name: 'Demux 2',
            data: [200, 1200, 250]
    
        }, {
            name: 'Demux 3',
            data: [200, 900, 250]
    
        }, {
            name: 'Demux 4',
            data: [1000, 300, 800]
    
        }]
    });
}

function OpticalfrequencycombSeries_100() {

    CallCSVData(csvPath_100).then(function (response) {
        console.log(response);
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'divOpticalfrequencycomb_100',
                type: 'line',
                zoomType: 'xy'
            },
            title: {
                text: 'Optical frequency comb - 100 points'
            },
            xAxis: {
                title: {
                    text: 'Wavelength (nm)'
                }
            },
            yAxis: {
                title: {
                    text: 'Power (dBm)'
                }
            },
            series: [{
                name: 'Optical frequency comb',
                data: response,//[[1549.608888888889, -38.90705129753387]],
                dashStyle: 'dash',
            }]
        });
    });
}
function OpticalfrequencycombSeries_1000() {

    CallCSVData(csvPath_1000).then(function (response) {
        console.log(response);
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'divOpticalfrequencycomb_1000',
                type: 'line',
                zoomType: 'xy'
            },
            title: {
                text: 'Optical frequency comb - 1000 points'
            },
            xAxis: {
                title: {
                    text: 'Wavelength (nm)'
                }
            },
            yAxis: {
                title: {
                    text: 'Power (dBm)'
                }
            },
            series: [{
                name: 'Optical frequency comb',
                //data: [[1549.608888888889, -38.90705129753387]]
                dashStyle: 'dash',
            }]
        });
    });
}    

var chartDataDemux = [];

function DemuxSpectrumSeries() {
    CallCSVData(csvPath_demux1).then(function (response) {
        chartDataDemux.push(response.slice(0,response.length-1));
        CallCSVData(csvPath_demux2).then(function (response) {
            chartDataDemux.push(response.slice(0,response.length-1));
            CallCSVData(csvPath_demux3).then(function (response) {
                chartDataDemux.push(response.slice(0,response.length-1));
                CallCSVData(csvPath_demux4).then(function (response) {
                    chartDataDemux.push(response.slice(0,response.length-1));
                    console.log(chartDataDemux);
                    RenderDemuxChart();
                });
            });
        });
    });
}

function RenderIntensityChart()
{
    Highcharts.chart('divIntensity', {
        chart: {
            type: 'heatmap',
            inverted: false,            
            zoomType: 'xy'
        },
    
        data: {
            csv: document.getElementById('csv').innerHTML
        },
    
        title: {
            text: 'Intensity Chart',
        },
    
       
    
        xAxis: {
            tickPixelInterval: 0.01,
            min: 0,
            max: 0.08
        },
    
        yAxis: {
            title: {
                text: null
            },
            labels: {
                format: '{value}'
            },
            minPadding: 0,
            maxPadding: 0,
            startOnTick: false,
            endOnTick: false,
            /* tickPositions: range(0.01,0.07,0.005), */
                     tickWidth: 0.001,
            min: 0.01,
            max: 0.09
        },
    
        colorAxis: {
            stops: [
                [0, '#0d0092'],
                [0.150, '#2432ff'], //1300
                [0.25, '#47aeff'],
                [0.375, '#62feb4'],
                [0.5, '#b2ff44'],
                [0.625, '#f9d200'],
                [0.75, '#f15204'],
                [0.8, '#b41600'],
            ],
            min: 1290,
            max: 1315
        },
        legend: {
            align: 'right',
            layout: 'vertical',
             margin: 0,
            verticalAlign: 'middle',
            y: 52,
            x:0,
            symbolHeight: 200
          },
        series: [{
                turboThreshold: 0,
            borderWidth: 0,
            rowsize: 0.002,
            colsize: 0.002, // one day
            tooltip: {
                headerFormat: 'Wavelength<br/>',
                pointFormat: '{point.x} {point.y} <br>{point.value} ℃</br>'
            }
        }]
    });
    
    function range(start, stop, step){
        if (typeof stop=='undefined'){
            // one param defined
            stop = start;
            start = 0;
        };
        if (typeof step=='undefined'){
            step = 1;
        };
        var result = [];
        for (var i=start; step>0 ? i<stop : i>stop; i+=step){
            result.push(i);
        };
        return result;
    };
    
}

function RenderDemuxChart(){
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'divDemuxSpectrum',
                type: 'line',
                zoomType: 'xy'
            },
            title: {
                text: 'Demux Spectrum'
            },
            xAxis: {
                title: {
                    text: 'Wavelength (nm)'
                }
            },
            yAxis: {
                title: {
                    text: 'Power (dBm)'
                }
            },
            series: [{
                name: 'Demux Spectrum 1',
                data: chartDataDemux[0],
                dashStyle: 'dash',
            },{
                name: 'Demux Spectrum 2',
                data: chartDataDemux[1],
                dashStyle: 'dash',
            },{
                name: 'Demux Spectrum 3',
                data: chartDataDemux[2],
                dashStyle: 'dash',
            },{
                name: 'Demux Spectrum 4',
                data: chartDataDemux[3],
                dashStyle: 'dash',
            }]
        });
}
