$(function sli() {
    var newdata={{exp_y_TS}};
    var i;
    newdata.push(0);



    series=[{name:'y',data:{{y_TS}},
                marker:{symbol:'circle'},lineWidth:3,dashStyle:'Solid',color:'#FF00FF',type: 'line'},
                 {name:'Your Output Forecasts',data:newdata.slice(0,{{tomorrow}}+1),marker:{symbol:'circle'},lineWidth:3,dashStyle:'Solid',color:'#FF0000',draggableY: true}
                  ] ;



    var charto
    $(document).ready(function() {
        charto = new Highcharts.Chart({
        chart: {
                renderTo: 'chart_outp',
                backgroundColor: null,
                animation:false
            },
        title: {
            text: '',
        },
		plotOptions: {
            series: {
                pointStart: 0,
				pointInterval: 1,
				stickyTracking: false,
				dragDrop: {
				   draggableY: true
				   }
            }
		},
        xAxis: {
            allowDecimals: false,
            max: {{t_max}},
            min: {{t_min}},
            plotLines: [{
                color: 'red', // 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: 'gray', // Color value
                dashStyle: 'dash', // Style of the plot line. Default to solid
                value: {{now}}, // Value of where the line will appear
                width: 1, // Width of the line
            }],
        },
         yAxis: [{
            title: {
                text: ''
            },
             labels: {
    formatter: function() {
       return this.value+" %";
    }
  },
            softMax: {{y_y_max}},
            softMin: {{y_y_min}},
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            opposite:false
        }],
        tooltip: {
            shared: true,
            valueDecimals:2,
            valueSuffix: ' %',
            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}}],
      slide: function( event, ui ) {
        $( "#id_nowcast" ).val( ui.value );
        newdata[{{now}}]=ui.value
        charto.series[1].setData (newdata.slice(0,{{tomorrow}}+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+'%');
            }

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


    $( "#slider-vertical2" ).slider({
      orientation: "vertical",
      range: "min",
      min: -400,
      max: 400,
      step: 1,
      value: newdata[{{tomorrow}}],
      slide: function( event, ui ) {
        $( "#id_forecast" ).val( ui.value );
        newdata[{{tomorrow}}]=ui.value
        charto.series[1].setData (newdata.slice(0,{{tomorrow}}+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+'%');
            }
    });
    $(  "#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[{{tomorrow}}]={{prev_forc}};
  $("#slider-vertical2").slider('value', 0);
  $("#slider-vertical2").find('.ui-slider-handle').text(0);
  newdata[{{tomorrow}}+1]=0;


 $( "#id_guess_y1" ).val( {{prev_forc}});
 $( "#id_guess_y2" ).val( 0);




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

 	});





});