var Graph = (function(document, undefined) {
  function Graph(width, height) {
    this.canvas = document.createElement('canvas');
    this.canvas.width = width;
    this.canvas.height = height;
    
    this.context = this.canvas.getContext('2d');
    
    this.functions = [];
    this.domain    = {lo: -10, hi: 10, range: 20};
    this.codomain  = {lo: -10, hi: 10, range: 20};
  }
  Graph.prototype.setDomain = function(x1, x2) {
    this.domain.lo = x1;
    this.domain.hi = x2;
    this.domain.range = x2 - x1;
  }
  Graph.prototype.setCodomain = function(y1, y2) {
    this.codomain.lo = y1;
    this.codomain.hi = y2;
    this.codomain.range = y2 - y1;
  }
  /**
   * Adds a function definition to the graph, which can either be a
   * literal function or an object with `function` defined, and
   * optionally `color`, `thickness` and `step` defined too.
   *
   * @param  f literal function or function definition object with
   *           optional parameters
   * @return added function definition
   */
  Graph.prototype.addFunction = function(f, color) {
    if (typeof f === 'function') {
      f = {
        function: f,
        color: color
      };
    }
    f.color     = f.color     || '#000';
    f.thickness = f.thickness || 1;
    f.step      = f.step > 0 ? f.step : this.domain.range / this.canvas.width;
    this.functions.push(f);
    return f;
  };
  Graph.prototype.removeFunction = function(f) {
    var i = this.functions.indexOf(f);
    if (i !== -1)
      this.functions.splice(i, 1);
  };
  Graph.prototype.draw = function() {
    var canvas  = this.canvas,
        context = this.context;
    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    // draw axes
    var zero = this.pointToCanvas({x: 0, y: 0});
    context.beginPath();
    context.moveTo(0, zero.y);
    context.lineTo(canvas.width, zero.y);
    context.moveTo(zero.x, 0);
    context.lineTo(zero.x, canvas.height);
    context.lineWidth = 1;
    context.strokeStyle = '#000';
    context.stroke();
    // draw functions
    for (var i = 0; i < this.functions.length; i++) {
      var functionDefinition = this.functions[i];
          f  = functionDefinition.function,
          x  = this.domain.lo,
          y  = f(x),
          pt = this.pointToCanvas({x: x, y: y});
      context.beginPath();
      context.moveTo(pt.x, pt.y);
      do {
        x  = x + functionDefinition.step;
        y  = f(x);
        pt = this.pointToCanvas({x: x, y: y});
        context.lineTo(pt.x, pt.y);
      } while (x < this.domain.hi);
      context.lineWidth   = functionDefinition.thickness;
      context.strokeStyle = functionDefinition.color;
      context.stroke();
    }
  };
  Graph.prototype.pointToCanvas = function(pt) {
    return {
      x: (pt.x - this.domain.lo)   * this.canvas.width  / this.domain.range,
      y: (this.codomain.hi - pt.y) * this.canvas.height / this.codomain.range
    };
  };
  return Graph;
})(document);


// assumptions
// screen has 10k pixels
// for ratio = 1, font-size: 10vw fills the screen


// graphs
function ideal(ratio) {
  // this would be perfect but you can't use
  // multiplication in calc with 2 units
  // calc(10 * 1vw * 1vh)
  var vw = Math.sqrt(ratio),
      vh = Math.sqrt(1/ratio);
  
  return Math.pow(10 * vw * vh, 2);
}

function onlyVmin(ratio) {
  var vw = Math.sqrt(ratio),
      vh = Math.sqrt(1/ratio),
      vmin = Math.min(vw, vh);
  
  return Math.pow(10 * vmin, 2);
}

function vwAndVh(ratio) {
  var vw = Math.sqrt(ratio),
      vh = Math.sqrt(1/ratio);
  
  return Math.pow(5 * vw + 5 * vh, 2);
}

function all(ratio) {
  var vw = Math.sqrt(ratio),
      vh = Math.sqrt(1/ratio),
      vmin = Math.min(vw, vh);
  
  return Math.pow(4 * vw + 4 * vh + 2 * vmin, 2);
}

// draw them to a canvas graph!
var graph = new Graph(640, 640);
graph.setDomain(0, 4);
graph.setCodomain(0, 120);
graph.addFunction(ideal, '#2ecc71');
graph.addFunction(onlyVmin, '#3498db');
graph.addFunction(vwAndVh, '#3498db');
graph.addFunction({
  function: all,
  thickness: 2,
  color: '#c0392b'
});
graph.draw();

document.body.appendChild(graph.canvas);