window.drawSlides = function(){
  var slides = [
    {
      id: 'intro',
      visible_threshold: 0, //Also sets pointerEvents
      visible_tmessage: 0,
      visible_calibration: 0,
      constant_model_score: 0,
    },
    {
      id: 'thresholding',
      visible_threshold: 1,
      visible_tmessage: 0,
      visible_calibration: 0,
      constant_model_score: 0,
      // target_thresholds: [0, 0.25, 0.35, 0.6, 0.7, 1]
      target_threshold: .4
    },
    {
      id: 'adjustable_thresholding',
      visible_threshold: 1,
      visible_tmessage: 1,
      visible_calibration: 0,
      constant_model_score: 0,
      target_threshold: .47
      // target_thresholds: [0, 0.25, 0.35, 0.6, 0.7, 1]
    },
    {
      id: 'calibration',
      visible_threshold: 0,
      visible_tmessage: 0,
      visible_calibration: 1,
      constant_model_score: 0,
      target_thresholds: [0, 0.2, 0.4, 0.6, 0.8, 1]
    },
    {
      id: 'adjusting_calibration',
      visible_threshold: 0,
      visible_tmessage: 0,
      visible_calibration: 1,
      constant_model_score: 0,
      target_thresholds: [0, 0.15, 0.45, 0.55, 0.83, 1]
    },
    // {
    //   id: 'improving_calibration',
    //   visible_threshold: 0,
    //   visible_calibration: 1,
    //   constant_model_score: 1,
    //   target_thresholds: [0, 0.305, 0.407, 0.503, 0.649, 1],
    // },
    {
      id: 'shifting_data',
      visible_threshold: 0,
      visible_tmessage: 0,
      visible_calibration: 1,
      constant_model_score: 1,
      filter_rain: true
    },
    {
      id: 'beyond_calibration',
      visible_threshold: 0,
      visible_tmessage: 0,
      visible_calibration: 1,
      constant_model_score: 1,
      target_thresholds: [0, .02, .04, .96, .98, 1],
    },
    
  ]

  var prevSlide = null;

  var gs = d3.graphScroll()
  .container(d3.select('#container'))
  .graph(d3.selectAll('#container #graph'))
  .eventId('uniqueId1')  // namespace for scroll and resize events
  .sections(d3.selectAll('#container #sections > div'))
  .offset(window.isMobile ? 300 : 200)
  .on('active', function(i){
    try{
      var slide = slides.slide = slides[i]

      if (!slide) return console.log(`missing slide ${i}`)

      // if(slide.id != 'slide1'){
      //   weatherGraph.prediction_sel.at({opacity:0});
      // }

      // if(slide.constant_model_score){
      //   weatherGraph.icon_sel.transition().duration(500)
      //   .at({y: constant_score})
      // }
      // else {
      //   weatherGraph.icon_sel.transition().duration(500)
      //   .at({y: d => c.y(d.h)})
      // }

      //weatherGraph.threshold_sel.classed('temp')

      var transition_duration = prevSlide ? 500 : 0;

      // Animate threshold and thresholds between slides
      var durationScale = 1
      if (prevSlide){
        durationScale = prevSlide.visible_calibration == slide.visible_calibration ? 1 : 3 
      }
      if (slide.target_thresholds){
        weatherGraph.setThresholds(slide.target_thresholds, transition_duration*durationScale)
      }
      if (slide.target_threshold){
        weatherGraph.setThreshold(slide.target_threshold, transition_duration*durationScale)
      }

      calibrationCurve.renderBuckets()
      

      weatherGraph.thresholdSel
        .st({pointerEvents: slide.visible_threshold ? 'all' : 'none'})
        .transition().duration(transition_duration)
        .st({opacity: slide.visible_threshold});

      weatherGraph.messageSel
        .transition().duration(transition_duration)
        .st({opacity: slide.visible_tmessage});

      weatherGraph.predictionSel
        .transition().duration(transition_duration)
        .at({strokeOpacity: slide.visible_threshold ? 1: 0});

      weatherGraph.weatherGroupSel
        .transition().duration(transition_duration)
        .ease(d3.easeBounce).delay((d, i) => Math.random()*transition_duration)
        .st({opacity: d => slide.filter_rain && d.is_filter ? 0 : 1})

      weatherGraph.thresholdsGroupSel
        .st({pointerEvents: slide.visible_calibration ? 'all' : 'none'})
        .transition().duration(transition_duration)
        .st({opacity: slide.visible_calibration})

      calibrationCurve.c.svg
        .transition().duration(transition_duration)
        .st({opacity: slide.visible_calibration})


      prevSlide = slide;
    } catch (e){
      console.log(e)
    }
  })

  return slides
}

if (window.init) window.init()


/*



*/