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);

var containerWidth = webglContainer.clientWidth;
var containerHeight = webglContainer.clientHeight;

// 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 mech = new THREE.Object3D();
var mechMaterialColor = 0xa65e00;

var base_x = 0;
var base_y = 10;
var base_z = 0;
var partPositions = [];

partPositions['torso'] = {x: base_x, y: base_y, z: base_z};
partPositions['head'] = {x: base_x, y: base_y + 2.3, z: base_z};
partPositions['base'] = {x: base_x, y: base_y - 2.75, z: base_z};
partPositions['arm_left'] = {x: base_x + 2.7, y: base_y - 0.5, z: base_z};
partPositions['arm_right'] = {x: base_x - 2.7, y: base_y - 0.5, z: base_z};
partPositions['leg_left'] = {x: base_x + 1.7, y: base_y - 6.5, z: base_z};
partPositions['leg_right'] = {x: base_x - 1.7, y: base_y - 6.5, z: base_z};


function loadMech()
{

    loadMechPart('torso', false);
    loadMechPart('head', false);
    loadMechPart('base', false);
    loadMechPart('arm_right', true);
    loadMechPart('leg_right', true);
    loadMechPart('arm_left', false);
    loadMechPart('leg_left', false);


}





function loadMechPart(part, mirrored)
{
    var mat;

    var loader = new THREE.OBJLoader();
    loader.load('assets/' + part + '.obj', function (geometry, materials) {


        var childTraverser;
        var updaterFunction;
        if (mirrored == true) // blender does silly shit with face order when mirroring.
        {
            childTraverser = function (child) {
                if (child instanceof THREE.Mesh) {
                    var mat = new THREE.MeshPhongMaterial({color: mechMaterialColor});
                    child.material = mat;
                    child.material.side = THREE.BackSide;//dafuq
                    child.elementsNeedUpdate = true;
                    console.log("inverted called");
                }
            }

            updaterFunction = function () {
                mechMaterialColor = document.getElementById('mesh-color').value;
                newMat = new THREE.MeshPhongMaterial({color: mechMaterialColor, shading: THREE.FlatShading});
                newMat.side = THREE.BackSide;
                geometry.traverse(function (child) {
                    if (child instanceof THREE.Mesh) {
                        // apply custom material
                        child.material = newMat;
                    }
                });
            }

        } else {
            childTraverser = function (child) {
                if (child instanceof THREE.Mesh) {
                    var mat = new THREE.MeshPhongMaterial({color: mechMaterialColor});
                    child.material = mat;
                    child.material.side = THREE.FrontSide;
                }
            }

            updaterFunction = function () {
                mechMaterialColor = document.getElementById('mesh-color').value;
                newMat = new THREE.MeshPhongMaterial({color: mechMaterialColor, shading: THREE.FlatShading});
                newMat.shininess = 100;
                geometry.traverse(function (child) {
                    if (child instanceof THREE.Mesh) {
                        // apply custom material
                        child.material = newMat;
                    }
                });
            }
        }

        geometry.traverse(childTraverser);
        geometry.updateFromColorPicker = updaterFunction;

        geometry.name = part;
        geometry.position.x = partPositions[part].x;
        geometry.position.y = partPositions[part].y;
        geometry.position.z = partPositions[part].z;

        geometry.scale.set(1, 1, 1);

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

        mech.add(geometry);



    });

}

loadMech();
scene.add(mech);

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

// position and point the camera to the center of the scene

function initCamera()
{
    camera.position.x = 4.5;
    camera.position.y = 8;
    camera.position.z = 17;
    camera.rotation.x = -0.1;
    camera.rotation.y = 0.52;
    camera.rotation.z = 0.05;

}

initCamera();


projector = new THREE.Projector();
mouseVector = new THREE.Vector3();

window.addEventListener('mousemove', onMouseMove, false);


// 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);
spotLight.position.set(-80, 70, 90);
spotLight.castShadow = true;
spotLight.intensity = 1.5;
spotLight.exponent = 5;
spotLight.rotation.set( 0, Math.PI, 0 );
spotLight.target= mech;
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);
    /*
     console.log("camera.position.x: ", camera.position.x);
     console.log("camera.position.y: ", camera.position.y);
     console.log("camera.position.z: ", camera.position.z);
     console.log("camera.rotation.x: ", camera.rotation.x);
     console.log("camera.rotation.y: ", camera.rotation.y);
     console.log("camera.rotation.z: ", camera.rotation.z);
     */

}
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 onMouseMove(e) {

    mouseVector.x = 2 * (e.clientX / containerWidth) - 1;
    mouseVector.y = 1 - 2 * (e.clientY / containerHeight);

    var raycaster = projector.pickingRay(mouseVector.clone(), camera),
            intersects = raycaster.intersectObjects(mech.children, true);

    mech.children.forEach(function (part) {

        part.children.forEach(function (child) {
            child.material.color.setRGB(1, 1, 1);
        });
    });

    for (var i = 0; i < intersects.length; i++) {
        var intersection = intersects[ i ],
                obj = intersection.object;
        console.log(obj.name);
        obj.material.color.setRGB(1.0, 0, 0);
    }


}

function updateColorChoice() {
    var index = document.getElementById('partSelector').value;
    console.log(mech.children);
    mech.getObjectByName(index, false).updateFromColorPicker();
}