/* Panning
*  ------------------
*  iio.js version 1.4 
*/

// define a new iio app
function Panning( app, settings ){
  
  // app settings
  var rows = 30; // number of rows/columns on the grid
  var panDistance = 100;
  var panSpeed = 8;

  // preveiw settings
  if (settings && settings.preview) {
    panDistance = 60;
  }

  // set app background color
  app.set({ color: 'black' });

  // add a grid larger than the window
  var grid = app.add( new iio.Grid({
    pos:app.center.clone(),
    width:app.width*2,
    color:'white',
    R:rows,
    C:rows,
    vel:[0,0],
  }), true);

  // color <200 cells for spatial reference
  for (var i = 0; i < 200; i++) {
    var cell = grid.cells[iio.randomInt(0, rows)][iio.randomInt(0, rows)];
    cell.color = iio.Color.random();
  }

  // draw all objects
  app.draw();

  // add a mouse move event handler to the canvas
  iio.addEvent(app.canvas, 'mousemove', function(event){
    var mousePos = app.eventVector(event);

    // set the grid velocity if the mouse position is
    // past the panning distance on the given axis
    function handlePanning(axis, gridBounds, appBound) {
      // check left/top panning
      if(mousePos[axis] < panDistance) {
        if(grid.vel[axis] === 0 && gridBounds[0] < -panDistance){
          grid.vel[axis] = panSpeed;
          app.unpause(); // start the draw loop
        }
      } 
      // check right/bottom panning
      else if(mousePos[axis] > appBound - panDistance){
        if(grid.vel[axis] === 0 && gridBounds[1] > appBound + panSpeed){
          grid.vel[axis] = -panSpeed;
          app.unpause(); // start the draw loop
        }
      } 
      // stop panning on given axis
      else {
        grid.vel[axis] = 0;
        if(grid.vel.y === 0 && grid.vel.x === 0)
          app.pause(); // cancel the draw loop
      }
    }

    // handle horizontal panning
    handlePanning('x', [grid.left(), grid.right()], app.width);
    // handle vertical padding
    handlePanning('y', [grid.top(), grid.bottom()], app.height);
  });

  // prevent panning past grid edges
  grid.onUpdate = function(){
    if(grid.left() > -panSpeed
     ||grid.right() < app.width + panSpeed)
      grid.vel.x = 0;
    if(grid.top() > -panSpeed
     ||grid.bottom() < app.height + panSpeed)
      grid.vel.y = 0;
  }

  // stop all panning
  function stopAllPanning(){
    grid.vel.x = 0;
    grid.vel.y = 0;
    app.pause(); // cancel the draw loop
  }

  // stop all panning on mouse out of canvas
  iio.addEvent(app.canvas, 'mouseout', function(event){
    stopAllPanning();
  });

  // stop all panning on mouse out of window
  iio.addEvent(window, 'mouseout', function(e){
    stopAllPanning();
  });
}

// start the app on an existing canvas
iio.start( Panning, 'canvasId' );