$(function sli() {
/*
 $( "#id_nowcast" ).val( {{prev_forc}});
    */
    var newdata={{exp_y_TS}};
    var i;



    series=[{name:'Red',data:{{y_TS}},
                marker:{symbol:'square'},lineWidth:2,dashStyle:'Solid',color:'#FF0055',type: 'line'},
                   {name:'Purple',data:{{x1_TS}},
                marker:{symbol:'circle'},lineWidth:2,dashStyle:'Solid',color:'#330099',type: 'line',},
           {name:'Light blue',data:{{x2_TS}}
                ,marker:{symbol:'circle'},lineWidth:2,dashStyle:'Solid',color:'#0099FF'},
          {name:'Your past predictions of Red',data:{{past_exp_y_TS}},marker:{symbol:'diamond', radius: 4},lineWidth:0,enableMouseTracking: false,dashStyle:'Solid',color:'#bf0000', states: {
                hover: {
                    lineWidthPlus: 0
                }
            }},
          {name:'Your current predictions of Red',data:newdata.slice(0,{{tomorrow_ind}}+1),marker:{symbol:'diamond', radius: 7},lineWidth:0,dashStyle:'Solid',color:'#FF0000', states: {
                hover: {
                    lineWidthPlus: 0
                }
            }, draggableY: true},
                  ] ;



    var charto
    $(document).ready(function() {
        charto = new Highcharts.Chart({
        chart: {
                renderTo: 'chart_outp',
                backgroundColor: null,
                animation:false,
                events: {
                    click: function (e) {
                    // find the clicked values and the series
                    var x = Math.round(e.xAxis[0].value),
                        y = Math.round(e.yAxis[0].value),
                        series = this.series[4];
                    console.log(x,y);
                    console.log(series);
                    console.log(newdata[{{tomorrow_ind}}]);

                    if (x=={{now}} && newdata[{{tomorrow_ind}} -1]==null){
                        console.log(newdata[{{tomorrow_ind}}]);
                        // Add it
                        series.addPoint([x, y]);
                        newdata[{{tomorrow_ind}}-1]=y
                         $( "#id_nowcast" ).val( y);
                             document.getElementById("nwc").innerHTML = y;
                        }
                    if (x=={{tomorrow}} && newdata[{{tomorrow_ind}}]==null){
                        console.log(newdata[{{tomorrow_ind}}]);
                        // Add it
                        series.addPoint([x, y]);
                        newdata[{{tomorrow_ind}}]=y
                        $( "#id_forecast" ).val(y);
                        document.getElementById("frc").innerHTML = y;
                        }

            }
        }
            },
        title: {
            text: '',
        },
		plotOptions: {
            series: {
                pointStart: -59,
				pointInterval: 1,
				point: {
                events: {

                    drag: function (e) {
                        // Returning false stops the drag and drops. Example:
                        /*
                        if (e.newY > 300) {
                            this.y = 300;
                            return false;
                        }
                        */
                         console.log(e.x,{{now}})
                         if(e.x=={{now}}){
                         $( "#id_nowcast" ).val( Highcharts.numberFormat(e.y, 0));
                             document.getElementById("nwc").innerHTML = Highcharts.numberFormat(e.y, 0);
                   }
                            else{
                         $( "#id_forecast" ).val( Highcharts.numberFormat(e.y, 0));
                            document.getElementById("frc").innerHTML = Highcharts.numberFormat(e.y, 0);
                            }

                    },

                }
            },
				stickyTracking: false,
				dragDrop: {
				   draggableY: true
				   }
            }
		},
        xAxis: {
            allowDecimals: false,
            endOnTick: false,
            max: {{t_max}},
            min: {{t_min}},
            plotLines: [{
                color: 'gray', // Color value
                dashStyle: 'dash', // Style of the plot line. Default to solid
                value: 0, // Value of where the line will appear
                width: 1, // Width of the line
            },{
                color: 'rgba(35, 204, 88, 0.5)', // Color value
                dashStyle: 'solid', // Style of the plot line. Default to solid
                value: {{now}}, // Value of where the line will appear
                width: 15, // Width of the line
            },{
                color: 'rgba(35, 204, 88, 0.5)', // Color value
                dashStyle: 'solid', // Style of the plot line. Default to solid
                value: {{tomorrow}}, // Value of where the line will appear
                width: 15, // Width of the line
            }],
        },
         yAxis: [{
            title: {
                text: ''
            },
            minPadding: 0.0,
            maxPadding: 0.0,
            Softmax: 150,
            softMin: {{y_y_min}},
            plotLines: [{
                value: 0,
                width: 2,
                color: '#808080'
            }],
            opposite:false
        }],
        tooltip: {
            shared: true,
            valueDecimals:0,
             headerFormat: '<span style="font-size: 10px"> Periode {point.key}</span><br/>',
        },
          credits: {
                enabled: false
        },
                colors: ['#F5B7B1','#DAF7A6','#2ecc71','black','#a569bd'],
        exporting: {
                enabled: false
        },

            series: series,



        });
    });







/*

  $( "#slider-vertical" ).slider({
      orientation: "vertical",
      range: "min",
      min: -400,
      max:400,
      step: 1,
      value: newdata[{{now_ind}}],
      slide: function( event, ui ) {
        $( "#id_nowcast" ).val( ui.value );
        newdata[{{now_ind}}]=ui.value
        charto.series[4].setData (newdata.slice(0,{{tomorrow_ind}}+1));
        $(this).find('.ui-slider-handle').text(ui.value);
             },
        create: function(event, ui) {
            var v=$(this).slider('value');
            $(this).find('.ui-slider-handle').text(v);
             document.getElementById("nwc").innerHTML = v;
            }

    });
    $(  "#id_nowcast"  ).val( $( "#slider-vertical" ).slider( "value" ) );


    $( "#slider-vertical2" ).slider({
      orientation: "vertical",
      range: "min",
      min: -400,
      max: 400,
      step: 1,
      value: newdata[{{tomorrow_ind}}],
      slide: function( event, ui ) {
        $( "#id_forecast" ).val( ui.value );
        newdata[{{tomorrow_ind}}]=ui.value
        charto.series[4].setData (newdata.slice(0,{{tomorrow_ind}}+1));
        $(this).find('.ui-slider-handle').text(ui.value);
        document.getElementById("nwc").innerHTML = "ui.value";
             },
        create: function(event, ui) {
            var v=$(this).slider('value');
            $(this).find('.ui-slider-handle').text(v);
            }
    });
    $(  "#id_forecast"  ).val( $( "#slider-vertical2" ).slider( "value" ) );

*/



/*

jQuery("#reset").click(function () {
 $("#slider-vertical").slider('value', {{prev_forc}});
  $("#slider-vertical").find('.ui-slider-handle').text({{prev_forc}});
  newdata[{{now}}]={{prev_forc}};
  $("#slider-vertical2").slider('value', 0);
  $("#slider-vertical2").find('.ui-slider-handle').text(0);
  newdata[{{tomorrow}}]=0;


 $( "#id_nowcast" ).val( {{prev_forc}});
 $( "#id_forecast" ).val( 0);

  charto.series[4].setData (newdata.slice(0,{{tomorrow}}+1));


 	});
*/





});