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

// define a new iio app
BezierCurves = function(app, settings) {

  // padding from edge of view
  var padding = app.width/10;
  var radius = app.width/40;
  var lineWidth = app.width/40;
  
  // set app color
  var color = iio.Color.white();

  // if not in preview mode
  if( !settings || (settings && !settings.preview) ){

    // set color to random
    color = iio.Color.random();

    // set inverse as app background
    app.set({ color:iio.Color.invert(color) });

    // add instructions
    app.add(new iio.Text({
      pos: [app.center.x, 40],
      text: 'click and hold to drag handles',
      color: color,
      size: 18,
    }));
  } 

  // add bezier curve
  var line = app.add(new iio.Line({
    color: color,
    width: lineWidth,
    vs:[
      [ padding, padding ],
      [ app.width-padding, app.height-padding ]
    ],
    bezier: [
      [ app.width-padding*2, padding*2 ],
      [ padding*2 ,app.height-padding*2 ]
    ]
  }));

  // drag selected on mouse move
  var selected;
  app.canvas.addEventListener('mousemove', function(event){
    if(selected) {
      selected.pos.set(app.eventVector(event));
      app.draw();
    }
  });

  // common handle properties
  var common = {
    lineWidth: 4,
    outline: color,
    // select on mouse down
    onMouseDown: function(obj){ 
      selected = obj;
    },
    // deselect on mouse up
    onMouseUp: function(obj){
      selected = undefined;
    },
  }

  // add pairs of handles
  for (var i=0; i<2; i++) {
    app.add(new iio.Ellipse(common,{
      pos: line.vs[i],
      radius: radius*2,
    }));
    app.add(new iio.Ellipse(common,{
      pos: line.bezier[i],
      radius: radius,
    }));
    // add line to connect handles
    app.add(new iio.Line({
      color: color,
      width: 2,
      vs:[ line.vs[i], line.bezier[i] ],
    }));
  }
}

// start the app fullscreen
iio.start( BezierCurves );