$(function() {
  'use strict';

  var addExploreVis = function(data, elm, size) {
    var dim = Math.max(elm.width(), elm.height()) + size*2;
    var chart = function(percent) {
      var chart = d4.baseChart({
        config: {
          axes: {
            x: {
              scale: 'linear'
            },
            y: {
              scale: 'linear'
            },
            z: {
              scale: 'linear'
            }
          }
        }
      })
        .mixin([{
          'name': 'circles',
          'feature': d4.features.circleSeries
        }])
        .margin({
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        })
        .x(function(x) {
          x.key('x');
        })
        .y(function(y) {
          y.key('y');
        })
        .z(function(z) {
          z.key('value');
        })
        .outerWidth(dim)
        .outerHeight(dim)
        .using('circles', function(circles) {
          circles
            .r(function(d) {
              var mod = 1;
              if(percent > 0.95){
                mod = 1.4;
              }
              if(d[this.z.$key]-d.rng > (1.0 - percent)) {
                return this.z(size*percent*mod);
              }
            })
            .cx(function(d, i) {
              var shift = 0.50;
              if (i % 2 > 0) {
                shift = -0.50;
              }
              return this.x(d[this.x.$key]) + (size * shift) + Math.random();
            })
            .cy(function(d, i) {
              var shift = -0.004;
              if (i % 2 > 0) {
                shift = 0;
              }
              return this.y(d[this.y.$key]) + (size * shift) + Math.random();
            });
        });

      d3.select(elm[0])
        .datum(data)
        .call(chart);
    };
    return chart;
  };

  var windowHeight = $(window).innerHeight();
  var controller = new ScrollMagic.Controller({
    globalSceneOptions: {
      triggerHook: 'onLeave'
    }
  });

  new ScrollMagic.Scene({
    triggerElement: $('#begin')[0]
  })
    .setPin($('#begin')[0])
    //.addIndicators()
    .addTo(controller);

  var data = [];
  var frequency = 1;
  var amplitude = 0.7;
  var steps = 30;
  var value;

  for (var x = Math.PI / steps; x <= Math.PI; x += Math.PI / steps) {
    for (var y = Math.PI / steps; y <= Math.PI; y += Math.PI / steps) {
      value = Math.min(Math.sin(frequency * x) * amplitude, Math.sin(frequency * y) * amplitude);
      data.push({
        y: y,
        value: value,
        rng: Math.random()/8,
        x: x
      });
    }
  }
  data.pop(); //remove the last item which is out of the step cycle.

  var size = Math.max($('#explore').width(), $('#explore').height()) / (data.length / 14);
  $('#explore_visualization').width($('#explore').width()+size*2);
  $('#explore_visualization').height($('#explore').height());
  $('#explore_visualization')[0].style['margin-left'] = -(size*1.5)+'px';
  var chartFunct = addExploreVis(data, $('#explore_visualization'), size);
  new ScrollMagic.Scene({
    triggerElement: $('#explore')[0],
    duration: windowHeight * 6.5
  })
    .setPin($('#explore')[0])
    //.addIndicators()
    .addTo(controller)
    .on('update', function(event) {
      chartFunct(event.scrollPos*1.3 / event.endPos);
    }).on('start', function() {
      chartFunct(0);
    });

  new ScrollMagic.Scene({
    triggerElement: $('#end')[0]
  })
    .setPin($('#end')[0])
    //.addIndicators()
    .addTo(controller);
});