/* Just stuff for generating a SINGLE tree */
var canvas = document.createElement('canvas'),
  context = canvas.getContext('2d'),
  height = canvas.height = 64,
  width = canvas.width = 64,
  bcontext = document.getCSSCanvasContext("2d", "trees", width, height); // this is where we defined the CSSCanvasContext and the DOM identifier
var trunk = [];
var branches = [];
var density = 35;
var branch_length = 28;
var max_height = height - 4;
var segment_length = 10;
var jitter = 1;
var start = {
  x: width / 2,
  y: height
};

var segment_count = max_height / segment_length | 0;

init();

function init() {
  trunk = [];
  branches = [];
  context.clearRect(0, 0, width, height);
  for (var i = 0; i < segment_count; i++) {
    trunk.push({
      x: start.x + (Math.random() * (jitter * 2) - jitter),
      y: height - segment_length * i,
      t: segment_count - i + 1
    });
    for (var j = 0; j < density; j++) {
      branches.push({
        x: start.x + (Math.random() * (trunk[i].t * 2) - trunk[i].t),
        y: height - segment_length * i + (Math.random() * (segment_length * 2) - segment_length),
        l: branch_length / (segment_count / (trunk[i].t - 1)) + (Math.random() * (jitter * 2) - jitter),
        a: Math.random() > .5 ? 0 + (Math.random() * (jitter * 16) - jitter) : -180 + (Math.random() * (jitter * -16) - jitter)
      });
    }
  }
  context.strokeStyle = '#49311c';
  rendertrunk();
  context.strokeStyle = '#266A2E';
  context.lineWidth = 1;
  renderbranches();
}



function rendertrunk() {
  context.beginPath();
  context.moveTo(start.x, start.y);
  for (var i = 0; i < segment_count; i++) {
    context.lineTo(trunk[i].x, trunk[i].y);
    context.lineWidth = trunk[i].t;
    context.stroke();
  }
  context.closePath();
}


function renderbranches() {
  for (var i = 0, l = branches.length; i < l; i++) {
    context.beginPath();
    context.moveTo(branches[i].x, branches[i].y);
    var ex = branches[i].x + branches[i].l * Math.cos(branches[i].a * (Math.PI / 180));
    var ey = branches[i].y + branches[i].l * Math.sin(branches[i].a * (Math.PI / 180));
    context.lineTo(ex, ey);
    context.stroke();
    context.closePath();
  }
  // draw the canvas to the CSSCanvasContext
  bcontext.drawImage(canvas, 0, 0);
}