var running = false;
var h, mu, g, l1, l2, x;
var requestAnimFrame =
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  function(callback, element) {
    setTimeout(callback, 50);
  };

var $swinger,
  $unswinger,
  $swingerstring,
  $unswingerstring,
  $warning,
  trajectory,
  trajectorycontext;
var dragging = false;

function init(vol) {
  x = [Math.PI / 2, Math.PI / 2, 0, 0]; //t1, t2, pt1, pt2
  h = 0.001;
  g = 20;
  var z = (100 - vol) / 300;
  l2 = vol * (1 - z);
  l1 = vol * (1 + z);
  mu = 1;
  $swinger.css({ transform: "scale(" + Math.pow(mu / (1 + mu), 1 / 3) + ")" });
  $swingerstring.css({ height: l2 + "px" });
  $unswingerstring.css({ height: l1 + "px" });
  trajectorycontext.clearRect(0, 0, 1000, 600);
  position();
}

window.onload = function() {
  $vol = $('#vol');
  ($swinger = $("#swinger")), ($unswinger = $("#unswinger"));
  ($swingerstring = $("#swingerstring")), ($unswingerstring = $(
    "#unswingerstring"
  ));
  $unswingerstring.css({ top: "210px", left: "500px" });
  trajectory = $("#trajectory")[0];
  trajectorycontext = trajectory.getContext("2d");
  var graphpaper = $("#graphpaper")[0];
  graphpapercontext = graphpaper.getContext("2d");
  graphpapercontext.clearRect(0, 0, 1000, 600);
  for (var j = 10; j < 700; j += 10) {
    graphpapercontext.beginPath();
    graphpapercontext.arc(500, 210, j, 0, Math.PI * 2);
    graphpapercontext.strokeStyle = "black";
    graphpapercontext.stroke();
  }
  init(0);
  run();
  $('#dragger').mousedown(function(e) {
    running = false;
    dragging = true;
    $("#graphpaper").css({ opacity: "0.0" });
  }).mousemove(function(e) {
    if (dragging) {
      console.log(e);
      var zxcv = (e.offsetX - 500) / 2;
      if (zxcv < 0) zxcv = 0;
      if (zxcv > 100) zxcv = 100;
      init(zxcv);
    }
  }).mouseup(function(e) {
    console.log(e);
    var zxcv = (e.offsetX - 500) / 2;
    if (zxcv < 0) zxcv = 0;
    if (zxcv > 100) zxcv = 100;
    if (zxcv > 10) {
      $("#graphpaper").css({ opacity: "0.5" });
    }
    init(zxcv);
    running = true;
    dragging = false;
  });
};

function run() {
  if (running) {
    var c0 = Math.cos(x[0]), s0 = Math.sin(x[0]);
    var c1 = Math.cos(x[1]), s1 = Math.sin(x[1]);
    var X = 500 + l1 * s0 + l2 * s1,
      Y = 210 + l1 * c0 + l2 * c1;
    for (var j = 0; j < 100 && running; j++) {
      trajectorycontext.beginPath();
      trajectorycontext.moveTo(X, Y);
      rk4();
      var c0 = Math.cos(x[0]), s0 = Math.sin(x[0]);
      var c1 = Math.cos(x[1]), s1 = Math.sin(x[1]);
      X = 500 + l1 * s0 + l2 * s1;
      Y = 210 + l1 * c0 + l2 * c1;
      trajectorycontext.lineTo(X, Y);
      trajectorycontext.strokeStyle = "#58f";
      trajectorycontext.stroke();
    }
    position();
  }
  requestAnimFrame(run);
}

function position() {
  var c0 = Math.cos(x[0]), s0 = Math.sin(x[0]);
  var c1 = Math.cos(x[1]), s1 = Math.sin(x[1]);
  var X = 500 + l1 * s0 + l2 * s1;
  var Y = 210 + l1 * c0 + l2 * c1;
  $swinger.css({ top: Y + "px", left: X + "px" });
  $swingerstring.css({
    top: 210 + l1 * c0 + "px",
    left: 500 + l1 * s0 + "px",
    transform: "rotate(" + -x[1] * 180 / Math.PI + "deg)"
  });
  $unswinger.css({
    top: 210 + l1 * c0 + "px",
    left: 500 + l1 * s0 + "px"
  });
  $unswingerstring.css({
    transform: "rotate(" + -x[0] * 180 / Math.PI + "deg)"
  });
  $vol.text(~~(Math.sqrt((X-500)*(X-500)+ (Y-210)*(Y-210))/2));
}

function derivatives(y, dy) {
  // equations of motion obtained from http://scienceworld.wolfram.com/physics/DoublePendulum.html
  var tt = y[0] - y[1],
    sintt = Math.sin(tt),
    costt = Math.cos(tt),
    c1 = y[2] * y[3] * sintt / (l1 * l2 * (1 + mu * Math.pow(sintt, 2))),
    c2 =
      (l2 * l2 * mu * Math.pow(y[2], 2) +
        l1 * l1 * (1 + mu) * Math.pow(y[3], 2) -
        l1 * l2 * mu * y[2] * y[3] * costt) *
      Math.sin(2 * tt) /
      (2 * l1 * l1 * l2 * l2 * Math.pow(1 + mu * Math.pow(sintt, 2), 2));

  dy[0] =
    (l2 * y[2] - l1 * y[3] * costt) /
    (l1 * l1 * l2 * (1 + mu * Math.pow(sintt, 2))); //t1
  dy[1] =
    (l1 * (1 + mu) * y[3] - l2 * mu * y[2] * costt) /
    (l1 * l2 * l2 * mu * (1 + mu * Math.pow(sintt, 2))); //t2
  dy[2] = -(1 + mu) * g * l1 * Math.sin(y[0]) - c1 + c2; // pt1
  dy[3] = -mu * g * l2 * Math.sin(y[1]) + c1 - c2; //pt2
}
var dx = [0, 0, 0, 0],
  yt = [0, 0, 0, 0],
  dyt = [0, 0, 0, 0],
  dym = [0, 0, 0, 0];
function rk4() {
  derivatives(x, dx); // k1
  for (var i = 0; i < 4; i++) {
    yt[i] = x[i] + h / 2 * dx[i];
  }
  derivatives(yt, dyt); // k2
  for (var i = 0; i < 4; i++) {
    yt[i] = x[i] + h / 2 * dyt[i];
  }
  derivatives(yt, dym); // k3
  for (var i = 0; i < 4; i++) {
    yt[i] = x[i] + h * dym[i];
    dym[i] += dyt[i];
  }
  derivatives(yt, dyt); // k4
  for (var i = 0; i < 4; i++) {
    x[i] += h / 6 * (dx[i] + dyt[i] + 2 * dym[i]);
  }
}