function Terrain(width,height) {
  //reference for local functions
  var _this = this;
  //precalculations and settings
  this.width = width-1 || 512;
  this.height = height-1 || this.width;
  
  this.rough = 255;
  this.passSize = 32;
  //contains all point data .. will be filled into a 2d array
  this.points = [];
  
  //local point Constructor
  function Point(x, y) {
    this.x = x;
    this.y = y;
    
    this.z = 0;
    
    if(Math.random()>.3) {
      this.z = Math.abs(Math.sin(x*y)*_this.rough);
    }
  }
  
  //get the value of a point at world-wrapped x,y
  this.getPoint = function(x, y) {
    x = (x+this.width)%this.width,
    y = (y+this.height)%this.height;
    
    return this.points[x][y].z;
  };
  
  //set the value of a point at world-wrapped x,y
  this.setPoint = function(x, y, value) {
    x = (x+this.width)%this.width,
    y = (y+this.height)%this.height;
    
    this.points[x][y].z = value;
  };
  
  //get values of points from 4 corners of a square around point based on size, assign the point average of their values + another value
  this.pointFromSquare = function(x, y, size, value) {
    var hs = size / 2,
        // a   b
        //   x
        // c   d
        a = this.getPoint(x - hs, y - hs),
        b = this.getPoint(x + hs, y - hs),
        c = this.getPoint(x - hs, y + hs),
        d = this.getPoint(x + hs, y + hs);

    this.setPoint(x, y, (a + b + c + d) / 4 + value);
  };
  
  //get values of points from 4 corners of a diamond around point based on size, assignt he point average of their values + another value
  this.pointFromDiamond = function(x, y, size, value) {
    var hs = size / 2,
        //   c
        //a  x  b
        //   d
        a = this.getPoint(x - hs, y),
        b = this.getPoint(x + hs, y),
        c = this.getPoint(x, y - hs),
        d = this.getPoint(x, y + hs);

    this.setPoint(x, y, (a + b + c + d) / 4 + value);
  };
  
  //do a full pass with both diamond and squares
  this.diamondSquare = function(stepSize, scale) {
    var halfStep = stepSize / 2;

    for(var y = halfStep; y < this.height + halfStep; y += stepSize)
    {
      for(var x = halfStep; x < this.width + halfStep; x += stepSize)
      {
        this.pointFromSquare(x, y, stepSize, Math.random() * scale);
      }
    }

    for(var y = 0; y < this.height; y += stepSize)
    {
      for(var x = 0; x < this.width; x += stepSize)
      {
        this.pointFromDiamond(x + halfStep, y, stepSize, Math.random() * scale);
        this.pointFromDiamond(x, y + halfStep, stepSize, Math.random() * scale);
      }
    }
  };
  
  //create/refresh the 2d array structure and seed random z values
  this.seed = function(newWidth, newHeight) {
    newWidth = newWidth-1 || this.width;
    newHeight = newHeight-1 || this.height;
    
    for(var x = 0; x < newWidth; x++) {
      for(var y = 0; y < newHeight; y++) {
        if(!this.points[x]) {
          this.points.push([]);
        }
        
        if(!this.points[x][y]) {
          this.points[x].push(new Point(x,y));
        }
        else {
          this.setPoint(x,y, Math.random()*this.rough);
        }
      }
    }
  };
  
  //invoke immediately so we have placeholder data
  this.seed();
  
  this.smoothTerrain = function() {
    var sampleSize = this.passSize,
        scaleFactor = 1;
    
    while(sampleSize > 1) {
      this.diamondSquare(sampleSize,scaleFactor);
      
      sampleSize /= 2;
      scaleFactor /= 2;
    }
  };
  
  //invoke immediately so we have wrapped smooth terrain
  this.smoothTerrain();
  
  this.passSize = 128;
  this.smoothTerrain();
  
  this.makeGraphicHeightMap = function() {
    var canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d");

    canvas.width = this.width;
    canvas.height = this.height;

    ctx.fillStyle = "#000";
    ctx.fillRect(0,0,canvas.width, canvas.height);

    var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
    
    for(var x in this.points) {
      var col = this.points[x];

      for(var y in col) {
        var lum = col[y].z;


        //convert to 16 colors
        lum = (Math.floor((lum/255)*16)/16)*255;
        var dataPos = x*this.height*4 + y*4;
        imgData.data[dataPos] = lum;
        imgData.data[dataPos+1] = lum;
        imgData.data[dataPos+2] = lum;

      }
    }

    ctx.putImageData(imgData,0,0);

    return canvas;
  };
}



var output = document.getElementById("output"),
    regen = document.getElementById("regen"),
    canvas = document.body.appendChild(document.createElement("canvas")),
    ctx = canvas.getContext("2d");

function draw() {
  var startTime,
      terrainTime,
      renderTime,
      drawTime,
      terrain,
      terrainGraphic;
  
  startTime = new Date();
  
  terrainTime = new Date();
  terrain = new Terrain();  
  terrainTime = ((new Date())-terrainTime)/1000;
  
  renderTime = new Date();
  terrainGraphic = terrain.makeGraphicHeightMap();
  renderTime = ((new Date())-renderTime)/1000;
  
  drawTime = new Date();
  canvas.width = terrainGraphic.width*2;
  canvas.height = terrainGraphic.height*2;
  for(var x = 0; x <= 1; x++) {
    for(var y = 0; y <=1; y++) {
      ctx.drawImage(terrainGraphic, x*terrainGraphic.width, y*terrainGraphic.height);
    }
  }
  ctx.fillStyle = "rgba(0,0,0,.75";
  ctx.fillRect(0,0,canvas.width,canvas.height/4);
  ctx.fillRect(0,canvas.height/4,canvas.width/4, canvas.height/2);  
  ctx.fillRect(canvas.width-canvas.width/4,canvas.height/4,canvas.width/4, canvas.height/2);
  ctx.fillRect(0,canvas.height-canvas.height/4,canvas.width,canvas.height/4);
  ctx.strokeStyle = "rgba(255,255,255,0.15";
  ctx.beginPath();
  ctx.moveTo(canvas.width/4, canvas.height/4);
  ctx.lineTo(canvas.width-canvas.width/4, canvas.height/4);
  ctx.lineTo(canvas.width-canvas.width/4, canvas.height-canvas.height/4);
  ctx.lineTo(canvas.width/4, canvas.height-canvas.height/4);
  ctx.closePath();
  ctx.stroke();
  ctx.strokeStyle = "rgba(255,255,255,0.025";
  ctx.beginPath();
  ctx.moveTo(canvas.width/2, 0);
  ctx.lineTo(canvas.width/2, canvas.height);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(0, canvas.height/2);
  ctx.lineTo(canvas.width, canvas.height/2);
  ctx.stroke();
  
  drawTime = ((new Date)-drawTime)/1000;
  
  startTime = ((new Date())-startTime)/1000;
  output.innerHTML = terrainTime +"/s to generate. "+ renderTime +"/s to render. "+ drawTime +"/s to draw grid. "+ startTime +"/s Overall.";
  console.log(terrain);
}

regen.innerHTML = "Regenerate";

regen.addEventListener("mousedown", function() {
  regen.innerHTML = "Please wait...";
});

regen.addEventListener("mouseup", function() {
  draw();
  regen.innerHTML = "Regenerate";
}, false);

draw();