queue()
    .defer(loadImage, "motley.jpg")
    .await(ready);

function loadImage(src, cb) {
    var img = new Image();
    img.src = src;
    img.onload = function() {
        cb(null, img);
    };
    img.onerror = function() {
        cb('IMAGE ERROR', null);
    };
}

function ready(error, img){
    var c = conteoColores(img);
    var w = c.w;
    var h = c.h;
    var colorescontados = c.col;
    var colorespartidos = particionColores(colorescontados);
    var colorespromediados = colorespartidos.map(promedioColores);
    var root = {"name": "root", "children": colorespromediados};
    var width = 900;
    var height = 900 * h / w;
    var treemap = d3.layout.treemap()
        .size([width, height])
        .sticky(true)
        .value(function(d){return d.value;});
    var div = d3.select("#treemap").append("div")
        .style("position", "relative")
        .style("width", width + "px")
        .style("height", height + "px");
    var node = div.datum(root).selectAll(".node")
        .data(treemap.nodes)
        .enter().append("div")
        .attr("class", "node")
        .call(position)
        .style("background", function(d) { return d.children ? null : d.name; });
}

function position() {
  this.style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}

function promedioColores(listacolores){
    var p = listacolores.map(extraerPesos).reduce(sumaPesos);
    var colorprom = listacolores.map(colorPesado).reduce(sumaVectores);
    colorprom = colorprom.map(function(c){
        return Math.floor(c/p);
    });
    var colhex = d3.rgb(colorprom[0], colorprom[1], colorprom[2]).toString();
    return {"name": colhex, "value": p};
}

function particionColores(c){
    var nodos = [c];
    for(var i=0; i<8; i++){
        var colorplane = i % 3;
        var nuevosnodos = [];
        for(var j=0; j<nodos.length; j++){
            var nodo = nodos[j];
            nodo.sort(function(a,b){
                return a.rgb[colorplane] - b.rgb[colorplane];
            });
            var m = nodo.length;
            var half = Math.floor(m/2);
            var nodoizq = nodo.slice(0, half);
            var nododer = nodo.slice(half, m);
            nuevosnodos.push(nodoizq, nododer);
        }
        nodos = nuevosnodos;
    }
    return nodos;
}

function sumaVectores(a,b){
    var output = a;
    for(i = 0 ; i < a.length; i++){
        output[i] += b[i];
    }
    return output;
}

function colorPesado(a){
    return a.rgb.map(function(c){
        return c * a.valor;
    });
}

function extraerPesos(a){
    return a.valor;
}

function sumaPesos(a, b){
    return a + b;
}

function conteoColores(img){
    var context = document.getElementById('canvas').getContext('2d');

    var c = d3.select("#canvas")
        .attr("width", img.width)
        .attr("height", img.height);

    context.drawImage(img, 0, 0, img.width, img.height);

    var w = img.width;
    var h = img.height;
    var esp;
    
    var colores = d3.map();
    if (w >= h){
        esp = Math.floor(h / 150);
    }
    else{
        esp = Math.floor(w / 150);
    }

    for(var i=0;i< Math.floor(w/esp);i++){
        for(var j=0; j< Math.floor(h/esp); j++){
            var punto = [esp * i, esp * j];
            var colorrgb = context.getImageData(punto[0], punto[1], 1, 1).data;
            var col = d3.rgb(colorrgb[0], colorrgb[1], colorrgb[2]).toString();
            var color = [colorrgb[0], colorrgb[1], colorrgb[2]];
            var entry = colores.get(col) || {"rgb": color, "valor": 0};
            entry.valor++;
            colores.set(col, entry);
        }
    }

    return {"w": w, "h": h, "col": colores.values()};
}