// shim layer with setTimeout fallback (Paul Irish)

window.requestAnimFrame = (function(){

    return  window.requestAnimationFrame       ||

            window.webkitRequestAnimationFrame ||

            window.mozRequestAnimationFrame    ||

            window.oRequestAnimationFrame      ||

            window.msRequestAnimationFrame     ||

            function( callback ){

              window.setTimeout(callback, 1000 / 60);

            };

  })();

  // Based on http://www.dgp.toronto.edu/people/stam/reality/Research/pdf/GDC03.pdf

  var NavierStokes = function(settings){

      this.init(settings);

  };

  NavierStokes.prototype = {

          init : function(settings){

           var defaultSettings = {

                    resolution     : 64,

                    iterations     : 10,

                    fract          : 1/4,

                    diffusion      : 1,

                    gridmodify     : 0,

                    dt             : 0.1,

                    callbackUser : function(D, U, V, size){},

                    callbackDisplay : function(D, U, V, size){}

            };

            if (this.settings === undefined){

                  this.settings = defaultSettings;

            }

            this._mergeRecursive(this.settings, settings);

            this.rows                 =    this.settings.resolution      + 2;

            this.arraySize            =   (this.settings.resolution+2)*(this.settings.resolution+2);

            this.U          = new Float32Array(this.arraySize);

            this.V          = new Float32Array(this.arraySize);

            this.D          = new Float32Array(this.arraySize);

            this.U_prev     = new Float32Array(this.arraySize);

            this.V_prev     = new Float32Array(this.arraySize);

            this.D_prev     = new Float32Array(this.arraySize);

            this.NullArray  = new Float32Array(this.arraySize);

            // Precalculate lookup table for 2D > 1D array.

            this.IX = new Array(this.rows);

            for (var i = 0; i < this.rows; i++){

                this.IX[i] = new Array(this.rows);

                for (var b = 0; b < this.rows; b++){

                    this.IX[i][b] = i+b*this.rows;

                }

            }

            // Init all Arrays.

            for (i = 0; i < this.arraySize; i++){

                this.D_prev[i] = this.U_prev[i] = this.V_prev[i] = this.D[i] = this.U[i] = this.V[i] = this.NullArray[i] = 0.0;

            }

            //Init some vars based on the Resolution settings:

            this.calculateSettings();

          },

          clear : function(){

              this.D.set(this.NullArray);

              this.U.set(this.NullArray);

              this.V.set(this.NullArray);

          },

          // Getter Setter

          getResolution : function(){

              return this.settings.resolution;

          },

          getSettings : function(){

              return this.settings;

          },

          update : function(){

               // Add user Action

              this.userAction();

              // Cals velosity & density

              this.vel_step  (this.U, this.V, this.U_prev, this.V_prev, this.settings.dt );

              this.dens_step (this.D, this.D_prev, this.U, this.V, this.settings.dt );

              this.settings.callbackDisplay(this.D, this.U, this.V, this.settings.resolution);

          },

          calculateSettings : function(){

              this.centerPos = (-0.5/this.settings.resolution) * (1 + this.settings.gridmodify);

              this.scale = this.settings.resolution * 0.5;

              this.dt0 = this.settings.dt * this.settings.resolution;

              this.p5 = this.settings.resolution + 0.5;

          },

          userAction : function (){

              this.D_prev.set(this.NullArray);

              this.U_prev.set(this.NullArray);

              this.V_prev.set(this.NullArray);

              this.settings.callbackUser(this.D_prev, this.U_prev, this.V_prev, this.settings.resolution);

          },

          vel_step : function (u, v, u0,  v0, dt ){

              var tmp;

              this.add_source(u, u0, dt );

              this.add_source(v, v0, dt );

              tmp = u0;

              u0 = u;

              u = tmp;

              this.diffuse ( 1, u, u0, dt );

              tmp = v0;

              v0 = v;

              v = tmp;

              this.diffuse ( 2, v, v0, dt );

              this.project(u, v, u0, v0);

              tmp = u0;

              u0 = u;

              u = tmp;

              tmp = v0;

              v0 = v;

              v = tmp;

              this.advect(1, u, u0, u0, v0, dt);

              this.advect(2, v, v0, u0, v0, dt);

              this.project(u, v, u0, v0 );

          },

          dens_step : function (x, x0, u, v,  dt){

              var tmp;

              this.add_source (x, x0, dt);

              //SWAP ( x0, x );

              this.diffuse (0, x0, x,  dt );

              //SWAP ( x0, x );

              this.advect ( 0, x, x0, u, v, dt );

          },

          add_source : function (x, s, dt){

              for (var i=0; i<this.arraySize ; i++ ){

                  x[i] += dt * s[i];

              }

          },

          diffuse : function (b,  x,  x0,  dt){

              for (var i=1; i < this.arraySize;i++){

                  x[i] = x0[i]*this.settings.diffusion;

              }

              this.set_bnd(b, x);

           },

          project : function ( u, v, p, div )  {

              var i, k,prevRow, thisRow, nextValue, nextRow, to, lastRow;

              for (i = 1 ; i <= this.settings.resolution; i++ ){

                  prevRow   = this.IX[0][i-1];

                  thisRow   = this.IX[0][i];

                  nextRow   = this.IX[0][i+1];

                  valueBefore  = thisRow - 1;

                  valueNext    = thisRow + 1;

                  to = this.settings.resolution + valueNext;

                  for (k = valueNext; k < to; k++ ) {

                      p[k] = 0;

                      div[k] = (u[++valueNext] - u[++valueBefore] + v[++nextRow] - v[++prevRow]) * this.centerPos;

                  }

              }

              this.set_bnd(0, div);

              this.set_bnd(0, p);

              for (k=0 ; k<this.settings.iterations; k++) {

                  for (j=1 ; j<=this.settings.resolution; j++) {

                      lastRow = this.IX[0][j-1];

                      thisRow = this.IX[0][j];

                      nextRow = this.IX[0][j+1];

                      prevX = p[thisRow];

                      thisRow++;

                      for (i=1; i<=this.settings.resolution; i++){

                          p[thisRow] = prevX = (div[thisRow] + p[++lastRow] + p[++thisRow] + p[++nextRow] + prevX ) * this.settings.fract;

                      }

                  }

                  this.set_bnd(0, p);

              }

              for (j = 1; j <=  this.settings.resolution; j++ ) {

                  lastRow =  this.IX[0][j-1];

                  thisRow =  this.IX[0][j];

                  nextRow =  this.IX[0][j+1];

                  valueBefore  = thisRow - 1;

                  valueNext    = thisRow + 1;

                  for (i = 1; i <=  this.settings.resolution; i++) {

                      u[++thisRow] -= this.scale * (p[++valueNext] - p[++valueBefore]);

                      v[thisRow]   -= this.scale * (p[++nextRow]   - p[++lastRow]);

                  }

              }

              this.set_bnd(1, u);

              this.set_bnd(2, v);

          },

          advect : function (b, d, d0, u, v, dt ){

              var to;

              for (var j = 1; j<= this.settings.resolution; j++) {

                  var pos = j * this.rows;

                  for (var k = 1; k <= this.settings.resolution; k++) {

                      var x = k - this.dt0 * u[++pos];

                      var y = j - this.dt0 * v[pos];

                      if (x < 0.5) x = 0.5

                      if (x > this.p5) x = this.p5;

                      var i0 = x | 0;

                      var i1 = i0 + 1;

                      if (y < 0.5) y = 0.5

                      if (y > this.p5) y = this.p5;

                      var j0 = y | 0;

                      var j1 = j0 + 1;

                      var s1 = x - i0;

                      var s0 = 1 - s1;

                      var t1 = y - j0;

                      var t0 = 1 - t1;

                      var toR1 = this.IX[0][j0];

                      var toR2 = this.IX[0][j1];

                      d[pos] = s0 * (t0 * d0[i0 + toR1] + t1 * d0[i0 + toR2]) + s1 * (t0 * d0[i1 + toR1] + t1 * d0[i1 + toR2]);

                  }

              }

              this.set_bnd(b, d);

          },

          // Calculate Boundary's

          set_bnd : function (b, x ){

              var i, j;

              switch (b){

                  case 1 :

                      for (i = 1; i <= this.settings.resolution; i++) {

                          x[i] =  x[i + this.rows];

                          x[this.IX[i][(this.settings.resolution+1)]] = x[this.IX[i][(this.settings.resolution)]];

                          x[this.IX[0][i]] = -x[this.IX[1][i]];

                          x[this.IX[(this.settings.resolution+1)][i]] = -x[this.IX[(this.settings.resolution)][i]];

                      }

                      break;

                  case 2 :

                     for ( i = 1; i <= this.settings.resolution; i++) {

                          x[i] = -x[i + this.rows];

                          x[this.IX[i][(this.settings.resolution+1)]] = -x[this.IX[i][(this.settings.resolution)]];

                          x[this.IX[0][i]]                                            =  x[this.IX[1][i]];

                          x[this.IX[(this.settings.resolution+1)][i]] =  x[this.IX[(this.settings.resolution)][i]];

                      }

                      break;

                  default :

                      for ( i = 1; i <= this.settings.resolution; i++) {

                          x[i] =  x[i + this.rows];

                          x[this.IX[i][(this.settings.resolution+1)]]       =   x[this.IX[i][(this.settings.resolution)]];

                          x[this.IX[0][i]]                                                        =   x[this.IX[1][i]];

                          x[this.IX[(this.settings.resolution+1)][i]]       =   x[this.IX[(this.settings.resolution)][i]];

                      }

              }

                          // Boundes of the Canvas

              var topPos                                    = this.IX[0][this.settings.resolution+1];

              x[0]                                            = (x[1] + x[this.rows]) / 2;

              x[topPos]                                       = (x[1 + topPos] + x[this.IX[this.settings.resolution][0]]) / 2;

              x[(this.settings.resolution+1)]           = (x[this.settings.resolution] + x[(this.settings.resolution + 1) + this.rows]) / 2;

              x[(this.settings.resolution+1)+topPos]    = (x[this.settings.resolution + topPos] + x[this.IX[this.settings.resolution+1][this.settings.resolution]]);

          },

          // Merge Settings.

           _mergeRecursive : function(obj1, obj2) {

                for (var p in obj2) {

                    if ( obj2[p].constructor==Object ) {

                      obj1[p] = this._mergeRecursive(obj1[p], obj2[p]);

                    } else {

                      obj1[p] = obj2[p];

                    }

                }

                return obj1;

          }

  };

  var Display = function(canvas){

    this.colorFunctions = {

        "BW"  : this.calcColorBW ,

        "Color": this.calcColor,

        "User" : this.calcUserColor

    };

    this.currColorFunc = "BW";

    this.canvas = canvas;

    this.context = canvas.getContext("2d", {alpha : false});

    this.supportImageData = !!this.context.getImageData;

    this.colorUser = {

        R : 0,

        G : 255,

        B : 0

    }

  };

  Display.prototype = {

              init : function (res){

                  this.calcResolution = res;

                  this.imageData = null;

                  this.showColors = false;

                              this.line = null;

              },

              density : function(D, U, V){

                  var r,g,b, x, y, d;

                  if (this.supportImageData){

                      // Get Image Data

                      if (this.imageData  === null){

                          this.imageData = this.context.getImageData(0, 0, this.calcResolution, this.calcResolution);

                      }

                      for (x = 0; x < this.calcResolution; x++) {

                          for (y = 0; y < this.calcResolution; y++){

                              var posC = (x + y * this.calcResolution) * 4;

                                    var pos = fluid.IX[x][y];

                              var cArray = this.colorFunctions[this.currColorFunc].call(this, D, U, V, pos);

                              this.imageData.data[posC]     = cArray[0]; // R

                              this.imageData.data[posC + 1] = cArray[1]; // G

                              this.imageData.data[posC + 2] = cArray[2]; // B

                              this.imageData.data[posC + 3] = 255; //A

                          }

                      }

                      this.context.putImageData(this.imageData, 0, 0);

                  }else{

                      // Slow fallback for oldie

                      for (x = 0; x < this.calcResolution; x++) {

                          for (y = 0; y < this.calcResolution; y++) {

                              var pos = fluid.IX[x][y];

                              var c =(D[pos] / 2);

                              this.context.setFillColor(c , c, c , 1);

                              this.context.fillRect(x, y, 1, 1);

                          }

                      }

                  }

                // Draw the line for creating an Emitter

                if (this.line != null){

                  this.context.beginPath();

                              this.context.lineWidth = 1;

                  this.context.strokeStyle  = "rgb(255,255,255)";

                  this.context.moveTo(this.line[0][0],this.line[0][1]);

                  this.context.lineTo(this.line[1][0],this.line[1][1]);

                      this.context.stroke();

                }

              },

              setColorFunction: function(colorFuncName){

                this.currColorFunc = "BW";

              },

              calcColorBW : function(D, U, V, pos){

                  var bw = (D[pos] * 255 / 6) | 0;

                  return [bw, bw, bw];

              },

              calcColor : function(D, U, V, pos){

                  var r =  Math.abs((U[pos] * 1300 )   | 0);

                  var b =  Math.abs((V[pos] * 1300 )   | 0);

                  var g = (D[pos] * 255 / 6) | 0;

                  return [r, g, b];

              },

             calcUserColor : function(D, U, V, pos){

                  var r =  Math.abs((U[pos] *500* this.colorUser.R)   | 0);

                  var g = (D[pos] *  this.colorUser.G) | 0;

                  var b =  Math.abs((V[pos] *500* this.colorUser.B )   | 0);

                  return [r, g, b];

              },

              drawLine : function (a0, a1, scale){

                      var l0 = [a0[0]*scale, a0[1]*scale];

                      var l1 = [a1[0]*scale, a1[1]*scale];

                      this.line = [l0, l1];

              },

              removeLine : function(){this.line = null},

    };

var user = {

    displaySize : 500,

    canvas : null,

    canvasOffset : null,

    scale : 0,

    mouseStart: [],

    mouseEnd  : [],

    mouseLeftDown : false,

    mousePath : [],

    mouseRightDown : false,

    mouseRightStart : [],

    forceEmitters : [],

    insertedDensity : 50,

    init : function(canvas){

        this.canvas = $(canvas);

        this.canvasOffset = this.canvas.offset();

        var that = this;

        window.ontouchend = window.onmouseup   = function(e){that.handleInputEnd(e);};

        canvas.ontouchstart = canvas.onmousedown = function(e){that.handleInput(e);};

        canvas.ontouchmove = canvas.onmousemove = function(e){that.handleInputMove(e);};

        canvas.oncontextmenu = function(e){e.preventDefault();};

    },

    interact : function(D, U, V, size){

        var x, y, pos, i ;

        if (this.mouseLeftDown){

            var dx =  this.mouseStart[0] -  this.mouseEnd[0];

            var dy =  this.mouseStart[1] -  this.mouseEnd[1];

            var mousePathLength = Math.sqrt(dx * dx + dy * dy) | 0;

            mousePathLength = (mousePathLength < 1) ? 1 : mousePathLength;

            for ( i = 0; i < mousePathLength; i++) {

                                  x = (((this.mouseStart[0]  - (i / mousePathLength) * dx)) * this.scale) | 0;

                                  y = (((this.mouseStart[1]  - (i / mousePathLength) * dy)) * this.scale) | 0;

                                  pos = fluid.IX[x][y];

                                  U[pos] = -dx / 6;

                                  V[pos] = -dy / 6;

                                  D[pos] = this.insertedDensity;

                               }

                              this.mouseStart[0] = this.mouseEnd[0];

                              this.mouseStart[1] = this.mouseEnd[1];

                      }

                      for (i = 0;i<this.forceEmitters.length;i++){

                                  var posDir = this.forceEmitters[i];

                              var pos = fluid.IX[posDir[0]*this.scale | 0][posDir[1]*this.scale | 0];

                              U[pos] = posDir[2];

                              V[pos] = posDir[3];

                      }

              },

              initFluidWithResolution : function(){

                      fluid.init();

                    this.setCanvasSize(fluid.settings.resolution);

                    display.init(fluid.settings.resolution);

              },

              clearDisplay : function(){

                  fluid.clear();

                  this.forceEmitters = [];

              },

              setDisplay : function(e){

                var displaySize = parseInt(e);

                if (displaySize === 0){ // 1:1

                  this.setDisplaySize(fluid.getSettings().resolution);

                }else{

                  this.setDisplaySize(displaySize);

                }

              },

              setCanvasSize : function(size){

                  this.canvas.attr("width", size);

                  this.canvas.attr("height", size);

                  this.calculateScale();

              },

                  setDisplaySize : function(size){

                      $('#wrapper').width(size);

                      this.canvas.width(size);

                      this.canvas.height(size);

                  this.calculateScale();

              },

              calculateScale : function(){

                  this.scale = fluid.getResolution() / this.canvas.width();

                  this.canvasOffset = this.canvas.offset();

              },

              handleInput : function(e){

                  if (e.type === "touchstart"){

                      this.mouseLeftDown = true;

                      this.mouseEnd  = this.mouseStart = [e.pageX - this.canvasOffset.left, e.pageY - this.canvasOffset.top];

                  }else if (e.button !== undefined){

                    var mPos = this.getMousePositon(e);

                    if (e.button == 0){

                        this.mouseLeftDown = true;

                          this.mouseEnd  = this.mouseStart =  mPos;

                      }else if (e.button == 2){

                          this.mouseRightDown  = true;

                          this.mouseRightStart = mPos;

                    }

                  }

                  e.preventDefault();

              },

              handleInputMove : function(e){

                  var mPos = this.getMousePositon(e);

                  if (this.mouseLeftDown){

                      if (e.type === "touchmove"){

                          this.mouseEnd = [e.pageX - this.canvasOffset.left, e.pageY - this.canvasOffset.top];

                      }else{

                          this.mouseEnd = mPos;

                      }

                  }

                  if (this.mouseRightDown){

                          display.drawLine(this.mouseRightStart, mPos, this.scale);

                  }

              },

              handleInputEnd : function(e){

                      this.mouseLeftDown = false;

                  if (this.mouseRightDown){

                      this.mouseRightDown = false;

                      var endPos = this.getMousePositon(e);

                      var x = this.mouseRightStart[0];

                      var y = this.mouseRightStart[1];

                      var dx = -(x - endPos[0]) / 10;

                      var dy = -(y - endPos[1]) / 10;

                          this.forceEmitters.push([x, y, dx, dy]);

                      display.removeLine();

                  }

            },

            getMousePositon : function (e){

              var mouseX, mouseY;