var DOT_SIZE = 16;
var X_START_POS = 0;
var Y_START_POS = 0;

// ‥‥‥‥‥‥‥‥‥‥‥‥‥□□□
// ‥‥‥‥‥‥〓〓〓〓〓‥‥□□□
// ‥‥‥‥‥〓〓〓〓〓〓〓〓〓□□
// ‥‥‥‥‥■■■□□■□‥■■■
// ‥‥‥‥■□■□□□■□□■■■
// ‥‥‥‥■□■■□□□■□□□■
// ‥‥‥‥■■□□□□■■■■■‥
// ‥‥‥‥‥‥□□□□□□□■‥‥
// ‥‥■■■■■〓■■■〓■‥‥‥
// ‥■■■■■■■〓■■■〓‥‥■
// □□■■■■■■〓〓〓〓〓‥‥■
// □□□‥〓〓■〓〓□〓〓□〓■■
// ‥□‥■〓〓〓〓〓〓〓〓〓〓■■
// ‥‥■■■〓〓〓〓〓〓〓〓〓■■
// ‥■■■〓〓〓〓〓〓〓‥‥‥‥‥
// ‥■‥‥〓〓〓〓‥‥‥‥‥‥‥‥
var dataSet = [
    "BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BG","BG","BG",
    "BK","BK","BK","BK","BK","BK","RD","RD","RD","RD","RD","BK","BK","BG","BG","BG",
    "BK","BK","BK","BK","BK","RD","RD","RD","RD","RD","RD","RD","RD","RD","BG","BG",
    "BK","BK","BK","BK","BK","BR","BR","BR","BG","BG","BR","BG","BK","RD","RD","RD",
    "BK","BK","BK","BK","BR","BG","BR","BG","BG","BG","BR","BG","BG","RD","RD","RD",
    "BK","BK","BK","BK","BR","BG","BR","BR","BG","BG","BG","BR","BG","BG","BG","RD",
    "BK","BK","BK","BK","BR","BR","BG","BG","BG","BG","BR","BR","BR","BR","RD","BK",
    "BK","BK","BK","BK","BK","BK","BG","BG","BG","BG","BG","BG","BG","RD","BK","BK",
    "BK","BK","RD","RD","RD","RD","RD","BL","RD","RD","RD","BL","RD","BK","BK","BK",
    "BK","RD","RD","RD","RD","RD","RD","RD","BL","RD","RD","RD","BL","BK","BK","BR",
    "BG","BG","RD","RD","RD","RD","RD","RD","BL","BL","BL","BL","BL","BK","BK","BR",
    "BG","BG","BG","BK","BL","BL","RD","BL","BL","YL","BL","BL","YL","BL","BR","BR",
    "BK","BG","BK","BR","BL","BL","BL","BL","BL","BL","BL","BL","BL","BL","BR","BR",
    "BK","BK","BR","BR","BR","BL","BL","BL","BL","BL","BL","BL","BL","BL","BR","BR",
    "BK","BR","BR","BR","BL","BL","BL","BL","BL","BL","BL","BK","BK","BK","BK","BK",
    "BK","BR","BK","BK","BL","BL","BL","BL","BK","BK","BK","BK","BK","BK","BK","BK"
];

function getRgbColor(colorType)
{
    var colorHash = {
        //"BK":"#000000", // black
        "BK":"#DCAA6B", // cardbord color
        "WH":"#FFFFFF", // white
        "BG":"#FFCCCC", // beige
        "BR":"#800000", // brown
        "RD":"#FF0000", // red
        "YL":"#FFFF00", // yellow
        "GN":"#00FF00", // green
        "WT":"#00FFFF", // water
        "BL":"#0000FF", // blue
        "PR":"#800080"  // purple
    };
    return colorHash[colorType];
}

// three var
var camera, scene, light, renderer, container, center;
var meshs = [];
var geoBox, geoSphere;
var matBox, matSphere, matBoxSleep, matSphereSleep;

var camPos = { horizontal: 40, vertical: 60, distance: 400, automove: false };
var mouse = { ox:0, oy:0, h:0, v:0, mx:0, my:0, down:false, over:false, moving:true };

//oimo var
var world;
var G = -10, nG = -10;
var wakeup = false;
var bodys = [];

var fps=0, time, time_prev=0, fpsint = 0;
var ToRad = Math.PI / 180;
var type=2;

function init() {

    // three init
    renderer = new THREE.WebGLRenderer({
        precision: "mediump",
        antialias: false,
        clearColor: 0x585858,
        clearAlpha: 0
    });
    renderer.setClearColor(0x000, 1);
    renderer.setSize(window.innerWidth, window.innerHeight);

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

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(0, 150, 300);
    center = new THREE.Vector3();
    camera.lookAt(center);

    scene = new THREE.Scene();

    //scene.add( new THREE.AmbientLight( 0x383838 ) );

    light = new THREE.DirectionalLight(0xffffff, 1.3);
    light.position.set(0.3, 1, 0.5);
    scene.add(light);

    //add ground mesh
    var mat = new THREE.MeshLambertMaterial({
        color: 0x151515
    });
    var geo0 = new THREE.CubeGeometry(100, 40, 400);
    var geo1 = new THREE.CubeGeometry(400, 40, 400);

    var mground1 = new THREE.Mesh(geo1, mat);
    mground1.position.y = -50;
    scene.add(mground1);

    geoSphere = new THREE.SphereGeometry(1, 20, 10);
    geoBox = new THREE.CubeGeometry(1, 1, 1);

    matSphere = new THREE.MeshLambertMaterial({
        map: basicTexture(0),
        name: 'sph'
    });
    matBox = new THREE.MeshLambertMaterial({
        map: basicTexture(2),
        name: 'box'
    });
    matSphereSleep = new THREE.MeshLambertMaterial({
        map: basicTexture(1),
        name: 'ssph'
    });
    matBoxSleep = new THREE.MeshLambertMaterial({
        map: basicTexture(3),
        name: 'sbox'
    });

    // oimo init
    world = new OIMO.World();
    populate(1);

    // loop
    setInterval(loop, 1000 / 60);

    // events
    window.addEventListener('resize', onWindowResize, false);
    container.addEventListener('mousemove', onMouseMove, false);
    container.addEventListener('mousedown', onMouseDown, false);
    container.addEventListener('mouseout', onMouseUp, false);
    container.addEventListener('mouseup', onMouseUp, false);
    container.addEventListener('mousewheel', onMouseWheel, false);
    container.addEventListener('DOMMouseScroll', onMouseWheel, false); // firefox

}

function populate(n) {

    //var max = document.getElementById("MaxNumber").value;
    var max = 256;

    if (n === 1) {
        type = 1;
    } else if (n === 2) {
        type = 2;
    } else if (n === 3) {
        type = 3;
    }

    // reset old
    clearMesh();
    world.clear();

    //add ground
    //    var ground = new OIMO.Body({size:[100, 40, 400], pos:[0,-20,0], world:world});
    var ground2 = new OIMO.Body({
        size: [400, 40, 400],
        pos: [0, -50, 0],
        world: world
    });

    //add object
    var w = DOT_SIZE * 0.2;
    var h = DOT_SIZE * 1.5;
    var d = DOT_SIZE;

    var color;
    var i;
    for (var x = 0; x < 16; x++) {
        for (var z = 0; z < 16; z++) {
            i = x + (z) * 16;
            color = getRgbColor(dataSet[i]);
            y = 0;
            bodys[i] = new OIMO.Body({
                type: 'box',
                size: [w, h, d],
                pos: [-120 + x * DOT_SIZE, y * DOT_SIZE, -120 + z * DOT_SIZE * 1.2],
                move: true,
                world: world
            });
            var material = new THREE.MeshLambertMaterial({
                color: color
            });
            meshs[i] = new THREE.Mesh(geoBox, material);
            meshs[i].scale.set(w, h, d);
            scene.add(meshs[i]);
        }
    }
    var size = bodys.length;
    for (i = 0; i < 16; i++) {
        w = DOT_SIZE;
        h = DOT_SIZE;
        d = DOT_SIZE;
        x = 0;
        y = 2;
        z = i;
        bodys[size + i] = new OIMO.Body({
            type: 'box',
            size: [w, h, d],
            pos: [-125 + x * DOT_SIZE, y * DOT_SIZE, -120 + z * DOT_SIZE * 1.2],
            move: true,
            world: world
        });
        var material = new THREE.MeshLambertMaterial({
            color: "#f00"
        });
        meshs[size + i] = new THREE.Mesh(geoBox, material);
        meshs[size + i].scale.set(w, h, d);
        scene.add(meshs[size + i]);
    }
}

function clearMesh() {
    var i = meshs.length;
    while (i--) {
        scene.remove(meshs[i]);
    }
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

// MAIN LOOP
function loop() {

    world.step();

    var p, r, m, x, y, z;
    var mtx = new THREE.Matrix4();
    var i = bodys.length;
    var mesh;
    wakeup = false;

    if (G !== nG) {
        wakeup = true;
        G = nG;
    }

    while (i--) {
        var body = bodys[i].body;
        mesh = meshs[i];
        if (wakeup) bodys[i].body.awake();
        if (!body.sleeping) {
            m = body.getMatrix();
            mtx.fromArray(m);
            mesh.position.setFromMatrixPosition(mtx);
            mesh.rotation.setFromRotationMatrix(mtx);

            // change material
            if (mesh.material.name === 'sbox') mesh.material = matBox;
            if (mesh.material.name === 'ssph') mesh.material = matSphere;
        } else {
            if (mesh.material.name === 'box') mesh.material = matBoxSleep;
            if (mesh.material.name === 'sph') mesh.material = matSphereSleep;
        }
    }

    renderer.render(scene, camera);
}

function moveCamera() {
    camera.position.copy(Orbit(center, camPos.horizontal, camPos.vertical, camPos.distance));
    camera.lookAt(center);
}

function gravity(g) {
    nG = document.getElementById("gravity").value;
    world.gravity = new OIMO.Vec3(0, nG, 0);
}

// TEXTURE
function basicTexture(n) {
    var canvas = document.createElement('canvas');
    canvas.width = canvas.height = 64;
    var ctx = canvas.getContext('2d');
    var colors = [];
    if (n === 0) { // sphere
        colors[0] = "#58AA80";
        colors[1] = "#58FFAA";
    }
    if (n === 1) { // sphere sleep
        colors[0] = "#383838";
        colors[1] = "#38AA80";
    }
    if (n === 2) { // box
        colors[0] = "#AA8058";
        colors[1] = "#FFAA58";
    }
    if (n === 3) { // box sleep
        colors[0] = "#383838";
        colors[1] = "#AA8038";
    }
    ctx.fillStyle = colors[0];
    ctx.fillRect(0, 0, 64, 64);
    ctx.fillStyle = colors[1];
    ctx.fillRect(0, 0, 32, 32);
    ctx.fillRect(32, 32, 32, 32);

    var tx = new THREE.Texture(canvas);
    tx.needsUpdate = true;
    return tx;
}

// MATH
function Orbit(origine, horizontal, vertical, distance) {
    var p = new THREE.Vector3();
    var phi = vertical * ToRad;
    var theta = horizontal * ToRad;
    p.x = (distance * Math.sin(phi) * Math.cos(theta)) + origine.x;
    p.z = (distance * Math.sin(phi) * Math.sin(theta)) + origine.z;
    p.y = (distance * Math.cos(phi)) + origine.y;
    return p;
}

// MOUSE 
function onMouseDown(e) {
    e.preventDefault();
    mouse.ox = e.clientX;
    mouse.oy = e.clientY;
    mouse.h = camPos.horizontal;
    mouse.v = camPos.vertical;
    mouse.down = true;
}

function onMouseUp(e) {
    mouse.down = false;
    document.body.style.cursor = 'auto';
}

function onMouseMove(e) {
    e.preventDefault();
    if (mouse.down) {
        document.body.style.cursor = 'move';
        camPos.horizontal = ((e.clientX - mouse.ox) * 0.3) + mouse.h;
        camPos.vertical = (-(e.clientY - mouse.oy) * 0.3) + mouse.v;
        moveCamera();
    }
}

function onMouseWheel(e) {
    var delta = 0;
    if (e.wheelDeltaY) {
        delta = e.wheelDeltaY * 0.01;
    } else if (e.wheelDelta) {
        delta = e.wheelDelta * 0.05;
    } else if (e.detail) {
        delta = -e.detail * 1.0;
    }
    camPos.distance -= (delta * 10);
    moveCamera();
}

init();