var cubeItems = 17 + 1;
var cubeSpace = 7;
var cubeRatio = 4;
var cubeSize = cubeSpace / cubeRatio;
var margin = -cubeSpace * (cubeItems - 1) / 2;
var colorStep = 255 / (cubeItems - 1);
var r = colorStep * 256 * 256;
var g = colorStep * 256;
var b = colorStep;

var maxSpeed = 3;
var maxSpeedSq = Math.pow(maxSpeed, 2);
var meshes = null;

var container, stats;

var camera, controls, scene, renderer;

var axisX = new THREE.Vector3(1, 0, 0);
var axisY = new THREE.Vector3(0, 1, 0);
var axisZ = new THREE.Vector3(0, 0, 1);
var angleX = -Math.PI / 4;
var angleY = -Math.PI / 4;
var angleZ = Math.atan(Math.sqrt(2) / 2);

init();

function move(p, t) {
    var distance = p.distanceToSquared(t);
    var isTooFar = distance > maxSpeedSq;

    if (isTooFar) {
        var step = new THREE.Vector3()
            .subVectors(t, p)
            .setLength(maxSpeed);
        p.add(step);
        return false;
    } else {
        p.copy(t);
        return true;
    }
}

function animate() {
    render();
    meshes.forEach(function (mesh) {
        var data = mesh.userData;
        if (data.targetReached) {
            return;
        }
        var p = mesh.position;
        var t = data.target;

        data.targetReached = move(p, t);
        mesh.updateMatrix();

    });
    stats.update();
    controls.update();
    requestAnimationFrame(animate);
}

function numberToHex(i) {
    var pad = "000000";
    var s = i.toString(16);
    return '#' + pad.substring(0, pad.length - s.length) + s
}

function calcLabTarget(rgb) {
    var lab = d3.lab(rgb);
    return new THREE.Vector3(
        (lab.b),
        -100 + 2 * lab.l,
        (lab.a)
    );
}

function setLabTarget(mesh) {
    mesh.userData.targetReached = false;
    mesh.userData.target = calcLabTarget(mesh.userData.color);
}

function calcHslTarget(rgb) {
    var hsl = d3.hsl(rgb);
    if (isNaN(hsl.s)) hsl.s = 0;
    if (isNaN(hsl.h)) hsl.h = 0;
    hsl.h -= 45;
    var rad = Math.PI * hsl.h / 180;
    return new THREE.Vector3(
        hsl.s * 100,
        -100 + 200 * hsl.l,
        0
    )
        .applyAxisAngle(axisY, rad);
}
function setHslTarget(mesh) {
    mesh.userData.targetReached = false;
    mesh.userData.target = calcHslTarget(mesh.userData.color);
}

function rgbTransform(x) {
    return margin + cubeSpace * x / colorStep;
}
function calcRgbTarget(rgb) {
    return new THREE.Vector3(
        rgbTransform(rgb.r),
        rgbTransform(rgb.g),
        rgbTransform(rgb.b)
    )
        .applyAxisAngle(axisX, angleX)
        .applyAxisAngle(axisZ, angleZ)
        .applyAxisAngle(axisY, angleY)

}
function setRgbTarget(mesh) {
    mesh.userData.targetReached = false;
    mesh.userData.target = calcRgbTarget(mesh.userData.color);
}

function setPosition(vector, values) {
    Object.keys(values).forEach(function (k) {
        vector[k] = values[k];
    });
}

function init() {
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;

    controls = new THREE.OrbitControls(camera);

    scene = new THREE.Scene();

    // world
    var cube = new THREE.SphereGeometry(cubeSize);
    var material = new THREE.MeshBasicMaterial({shading: THREE.FlatShading});

    for (var x = 0; x < cubeItems; x++) {
        for (var y = 0; y < cubeItems; y++) {
            for (var z = 0; z < cubeItems; z++) {
                var rgbInt = x * r + y * g + b * z;
                var color = d3.rgb(numberToHex(rgbInt));

                var m = material.clone();
                m.color = new THREE.Color(rgbInt);
                var mesh = new THREE.Mesh(cube, m);

                mesh.userData = {color: color};
                setRgbTarget(mesh);

                scene.add(mesh);

                mesh.matrixAutoUpdate = false;
                setPosition(mesh.position, mesh.userData.target);
                mesh.updateMatrix();
            }
        }
    }

    meshes = scene.children.filter(function (o) {
        return o instanceof THREE.Mesh;
    });

    // renderer

    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setClearColor(0x808080);
    renderer.setSize(window.innerWidth, window.innerHeight);

    container = document.getElementById('container');
    container.appendChild(renderer.domElement);

    stats = new Stats();
    var statsStyle = stats.domElement.style;
    statsStyle.position = 'absolute';
    statsStyle.top = '0px';
    statsStyle.zIndex = 100;
    container.appendChild(stats.domElement);

    window.addEventListener('resize', onWindowResize, false);

    animate();
}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
}

function render() {
    renderer.render(scene, camera);
}