var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xeeeeee, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
var webglContainer = document.getElementById('webgl-container');
webglContainer.appendChild(renderer.domElement);
// camera controls
var camControls = new THREE.OrbitControls(camera, renderer.domElement);
camControls.damping = 0.2;
camControls.addEventListener('change', render);
// window resize handler
window.addEventListener('resize', onWindowResize, false);

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

var axes = new THREE.AxisHelper(20);
scene.add(axes);
var grid = new THREE.GridHelper(40, 1);
// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(80, 80, 10, 10);
var planeMaterial = new THREE.MeshLambertMaterial({
    color: 0xffffff
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = -0.05;
plane.position.z = 0;
scene.add(plane);
// ---- 3D CONTENT CREATION -----------------------------------------------------

var mesh;
var mat = new THREE.MeshLambertMaterial({color: document.getElementById('mesh-color').value});
var loader = new THREE.OBJLoader();
var geometryParts = [];

function loadAndAddMesh(partName, x, y, z) {
    loader.load('assets/'+partName+'.obj', function (geometry, materials) {
        console.log(geometry);
        console.log(materials);

        geometry.name = partName;

        geometry.traverse(function (child) {
            if (child instanceof THREE.Mesh) {
                // apply custom material
                child.material = mat;
            }
        });
        geometry.updateFromColorPicker = function () {
            var newMat = new THREE.MeshLambertMaterial({color: document.getElementById('mesh-color').value});
            geometry.traverse(function (child) {
                if (child instanceof THREE.Mesh) {
                    // apply custom material
                    child.material = newMat;
                }
            });
        }
        geometry.position.x = x;
        geometry.position.y = y;
        geometry.position.z = z;
        geometry.scale.set(1, 1, 1);
        geometryParts[geometry.name] = geometry;

        var partSelector = document.getElementById("partSelector");
        var option = document.createElement("option");
        option.text = geometry.name;
        partSelector.add(option);

        scene.add(geometry);
    });
}


loadAndAddMesh('head',0,0,0);
loadAndAddMesh('base',0,0,0);
loadAndAddMesh('arm',0,0,0);
loadAndAddMesh('arm',0,0,0);
loadAndAddMesh('leg',0,0,0);
loadAndAddMesh('leg',0,0,0);

// ---- END OF 3D CONTENT CREATION ---------------------------------------------

// position and point the camera to the center of the scene
camera.position.x = -35;
camera.position.y = 40;
camera.position.z = 60;
camera.lookAt(scene.position);
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
// add spotlight
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-80, 70, 90);
scene.add(spotLight);
// add GUI control elements
var guiControls = new function () {
    this.showAxes = true;
    this.showGrid = false;
    this.showPlane = true;
    this.asWireframes = false;
    this.animated = true;
    this.withShadow = false;
    this.withFog = false;
}

var gui = new dat.GUI({
    autoPlace: false
});
var guiContainer = document.getElementById('gui-container');
guiContainer.appendChild(gui.domElement);
gui.add(guiControls, 'showAxes').onChange(function (e) {
    showAxes = e;
    if (showAxes) {
        scene.add(axes);
    } else {
        scene.remove(axes);
    }
    render();
});
gui.add(guiControls, 'showGrid').onChange(function (e) {
    showGrid = e;
    if (showGrid) {
        scene.add(grid);
    } else {
        scene.remove(grid);
    }
    render();
});
gui.add(guiControls, 'showPlane').onChange(function (e) {
    showPlane = e;
    if (showPlane) {
        scene.add(plane);
    } else {
        scene.remove(plane);
    }
    render();
});
gui.add(guiControls, 'asWireframes').onChange(function (e) {
    asWireframes = e;
    // TODO: for all material.wireframe = asWireframes;
    mat.wireframe = asWireframes;
    render();
});
gui.open();
// init and call render function
function render() {

    renderer.render(scene, camera);
}
initAnim(true);
initShadow(false);
initFog(false);
render();
setShadow(false);
setFog(false);
animate();
// animate the 3D objects
function initAnim(value) {
    if (value) {
        gui.add(guiControls, 'animated').onChange(function (e) {
            animated = e;
            if (animated)
                animate();
        });
    }
}

var step = 0;
var scalingStep = 0;
function animate() {
    if (guiControls.animated) {
        // DO ANIMATING 3D ELEMENTS

        // request re-rendering
        requestAnimationFrame(animate);
    }
    render();
}

// shadow cast on plane
function initShadow(value) {
    // SET receiveShadow AND castShadow FLAGS OF 3D ELEMENTS WITH SHADOW
    plane.receiveShadow = value;
    spotLight.castShadow = value;
    renderer.shadowMapEnabled = value;
    if (value) {
        gui.add(guiControls, 'withShadow').onChange(function (e) {
            withShadow = e;
            setShadow(withShadow);
        });
    }
}

function setShadow(value) {
    if (value) {
        renderer.shadowMapAutoUpdate = true;
    } else {
        renderer.shadowMapAutoUpdate = false;
        renderer.clearTarget(spotLight.shadowMap);
    }
    render();
}

// fog
var fog;
function initFog(value) {
    if (value) {
        fog = new THREE.Fog(0xeeeeee, 0.0000001, 150);
        scene.fog = fog;
        gui.add(guiControls, 'withFog').onChange(function (e) {
            withFog = e;
            setFog(withFog);
        });
    }
}

function setFog(value) {
    if (!fog)
        return;
    if (value) {
        fog.near = 0.000000001;
        fog.far = 150;
    } else {
        fog.near = 8000;
        fog.far = 8000;
    }
    render();
}

function updateColorChoice() {
    var index = document.getElementById('partSelector').value;
    console.log(index);
    console.log(geometryParts);
    geometryParts[index].updateFromColorPicker();
}