// instructions
// drag n drop an image onto the pink canvas  --->
//
// @johnnyscript

var surfaceNets = require("surface-nets")
var ndarray = require("ndarray")
var fill = require("ndarray-fill")
var drop = require('drag-drop')

var canvas = document.createElement('canvas')
canvas.style.height = '480px'
canvas.style.width = '640px'
canvas.style.background = 'pink'
document.body.appendChild(canvas)

var QUANTASTICALLY = 3

function process (r) {
  var w = r
	q = quantize(QUANTASTICALLY)
  for (var i = 0; i < w.data.length; i += 4) {
    var v = q([r.data[i], r.data[i+1], r.data[i+2]])
    w.data[i] = v;
    w.data[i+1] = v;
    w.data[i+2] = v;
    w.data[i+3] = 255;
  }
}

drop(canvas, function(files){
  var reader = new FileReader
  var ctx = canvas.getContext('2d')
  reader.onloadend = function(){
  	var image = new Image
    image.src = reader.result
    image.onload = function(){
      var h = image.height
      var w = image.width
      canvas.width = w
      canvas.height = h
      canvas.style.width = w + 'px'
      canvas.style.height = h + 'px'
    	ctx.drawImage(image, 0, 0, w, h)
      var dat = ctx.getImageData(0, 0, w, h)
      process(dat)
      ctx.putImageData(dat, 0, 0, 0, 0, w, h)
    }
  }
  reader.readAsDataURL(files[0])
})


function quantize(x){
  var z = 255 * 3
  var q = z / x
  return function(pixels){
    var totes = pixels.reduce(function(a, e){
      return a + e
    },0)
    return Math.floor(totes / q) * q
  }
}

function quantizeColor(x){
  var z = 255
  var q = z / x
  return function(v){
    return Math.floor(v / q) * q
  }
}