//*
var console = function() {
    return({
        log: function(msg) {
          consoleDiv = document.getElementById('console');
          para = document.createElement('p');
          text = document.createTextNode(msg);
          para.appendChild(text);
          consoleDiv.appendChild(para);
        }
    });
}();
//*/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = document.getElementById('myImg');
var myData;
var particles = [];
var pCount = 0;
var skip = 2;
var nParticles = 0;
var distRepulsion = 3000;
var cycleDist = 0;
var isDemo = true;
var rectCanvas;
var mouseX;
var mouseY;
var dirMouse = 1;



  
  this.repulse = function(cx,cy){
    var dx = (cx-this.currentX);
    var dy = (cy-this.currentY);
    var dist = Math.pow(dx,2) + Math.pow(dy,2);
    if (dist < distRepulsion){
      this.vx += -dx*.02;
      this.vy += -dy*.02;
    }else{
      this.vx += (this.initX - this.currentX)*.1;
      this.vy += (this.initY - this.currentY)*.1;
    }
    this.vx*=.85;
    this.vy*=.85;
    
    if (Math.abs(this.vx)<.1 && Math.abs(this.yv)<.1){
      this.vx = this.vy = 0;
      this.currentX = this.initX;
      this.currentY = this.initY;
      this.inplace = true;
    }else{
    	this.currentX = Math.round(this.currentX+this.vx);
    	this.currentY = Math.round(this.currentY+this.vy); 
      this.inplace = false;
    }
  }
}

window.onload = function() {
  document.onmousemove = handleMouseMove;
  context.drawImage(img, 0, 0 );
	myData = context.getImageData(0, 0, img.width, img.height);
  parseImage();
  rectCanvas = canvas.getBoundingClientRect();
	mouseX=0;
	mouseY=0;
  requestAnimationFrame(loop);
};


function handleMouseMove(event){
  
  if (!isDemo){
  	mouseX = event.clientX - rectCanvas.left;
  	mouseY = event.clientY - rectCanvas.top;  
  }
}

function parseImage(){
  var pix = myData.data;
	var n = pix.length;
  for (var i = 0 ; i < n; i += (4*skip)) {
  	if (pix[i+3] > 100){
    	var particle = new Particle(pCount%canvas.width, 			Math.floor(pCount/canvas.width),pCount);
    	particles.push(particle);
    }
    pCount+=skip;
	}
 nParticles = particles.length;
}

function loop() {
  cycleDist += .1;
  distRepulsion = 2500 + Math.sin(cycleDist)*1000; 
  var newData = context.createImageData(canvas.width, canvas.height);
  var needRender = false;
  
  if (isDemo){
    mouseX += dirMouse*2;
    mouseY += 2;
    if (mouseX > canvas.width){
      dirMouse = -1;
      mouseX = canvas.width;
    }
    if (mouseY > canvas.height){
      isDemo = false;
    }
  }
  
  for (var i=0; i<nParticles; i++ ){
   var p = particles[i];
    p.repulse(mouseX,mouseY);
    if (!p.inplace){
    	var pos = ((p.currentY*canvas.width)+p.currentX)*4;
      newData.data[pos] += 196;
      newData.data[pos+1] += 154;
      newData.data[pos+2] += 108;
      newData.data[pos+3] += 255;
      needRender = true;  
    }   
  }  
  if (needRender) { 
    context.putImageData(newData,0,0);
  }
  requestAnimationFrame(loop);
};