$(function(){
  window.requestAnimFrame = (function(callback) {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
  function(callback) {
    window.setTimeout(callback, 1000 / 60);
  };
})();
var conditionMet = false;
var i = 0;
var count = 0;
var previousScroll = 0;

contentPos = $("#canvas").offset().top;

$("#canvas").click(function(){
  count++;
  if(count == 3) {
    conditionMet = true;
  }
  //$("#canvas h3").replaceWith("<h3>Proceed!</h3>");
})

$(window).scroll(function (e) {

  var currentScroll = $(this).scrollTop();
  if (currentScroll > previousScroll && conditionMet != true && currentScroll >= contentPos) {
    $(this).scrollTop(contentPos);
  }
  previousScroll = currentScroll;
});


var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.lineWidth=120;
ctx.strokeStyle = "#FFC2CE";

var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isDown=false;
var points=[];
var minPoint=0;
var PI2=Math.PI*2
var radius=20;
var fps = 20;
var lastTime=0;

animate();

function animate() {
  setTimeout(function() {
    requestAnimFrame(animate);
      // draw a polyline using the saved points array
      // but start later in the array each animation loop
      if(minPoint<=points.length){
        ctx.clearRect(0,0,canvas.width,canvas.height)
        ctx.beginPath();
        ctx.moveTo(points[minPoint].x,points[minPoint.y]);
        for(var i=minPoint+1;i<points.length;i++){
          var pt=points[i];
          ctx.lineTo(pt.x,pt.y);
        }
        ctx.stroke();
        minPoint++;
      }
    }, 1400 / fps);
  }

  function handleMouseDown(e){
    isDown=true;
  }

  function handleMouseUp(e){
    isDown=false;
  }

  function handleMouseOut(e){
    isDown=false;
  }

  function handleMouseMove(e){
    if(!isDown){return;}
    mouseX=parseInt(e.clientX-offsetX);
    mouseY=parseInt(e.clientY-offsetY+previousScroll);
    // accumulate points for the polyline but throttle 
    // the capture to prevent clustering of points
    if(Date.now()-lastTime>20){
      points.push({x:mouseX,y:mouseY});
      lastTime=Date.now();
    }
  }

  $("#canvas").mousedown(function(e){handleMouseDown(e);});
  $("#canvas").mousemove(function(e){handleMouseMove(e);});
  $("#canvas").mouseup(function(e){handleMouseUp(e);});
  $("#canvas").mouseout(function(e){handleMouseOut(e);});
	
$("#canvas").on("vmousedown", function(e){handleMouseDown(e);});
$("#canvas").on("vmousemove", function(e){handleMouseMove(e);});
$("#canvas").on("vmouseup", function(e){handleMouseUp(e);});
$("#canvas").on("vmouseout", function(e){handleMouseOut(e);});