$(document).ready(function () {

    var camera, renderer, controls;
    var scene = new THREE.Scene();
    var frames = [];
    var dq = [0, 0, 0];
    var q = [0, 0, 0];
    var guiParams = gui();
    var t = 0;
    const dt = 0.016;


    function init() {
        setRenderer();
        frames = loadObjects(scene).slice();
        setCamera();
        setLights();
        seafloor();
        setControls();
        window.addEventListener('resize', onWindowResize, false);
        renderer.render(scene, camera);
        animate();
    }

    function seafloor() {
        var mesh, texture;
        var worldWidth = 1024, worldDepth = 1024,
        worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
        var data = generateHeight(worldWidth, worldDepth);
        var geometry = new THREE.PlaneBufferGeometry(3000, 3000, worldWidth - 1, worldDepth - 1);
        geometry.rotateX(-Math.PI / 2);
        var vertices = geometry.attributes.position.array;
        for (var i = 0, j = 0, l = vertices.length; i < l; i++, j += 3) {
            vertices[j + 1] = data[i] * 5;
        }
        texture = new THREE.CanvasTexture(generateTexture(data, worldWidth, worldDepth));
        texture.wrapS = THREE.ClampToEdgeWrapping;
        texture.wrapT = THREE.ClampToEdgeWrapping;
        mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ map: texture }));
        mesh.rotation.x = Math.PI / 2;
        mesh.position.z = -1500;
        mesh.scale.x = 20;
        mesh.scale.z = 20;
        scene.add(mesh);
    }

    function animate() {
        requestAnimationFrame(animate);
        var ROV_data = updateROV(dq, dt, t, q);
        for (var i = 0 ; i < 3 ; dq[i] = ROV_data.ddq[i] * 0.9, i++);
        for (var i = 0 ; i < 3 ; q[i] = ROV_data.angles[i] * 0.9, i++);
        //dq *= 0.5;
        rotate(q, getTheta(t));
        controls.update();
        renderer.render(scene, camera);
        t += dt;
    }
    function rotate(q, theta) {
        frames[0].rotation.x = q[0];
        frames[0].rotation.y = q[1];
        frames[0].rotation.z = q[2];

        frames[2].rotation.z = theta.th1t;
        frames[3].rotation.x = theta.th2t;
    }

    function setCamera() {
        camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 100, 50000);
        camera.position.set(5000, 5000, 0);
        camera.lookAt(0, 0, 0);
        camera.up.set(0, 0, 1);
    }

    function setRenderer() {
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x000055, 1.0);
        var container = document.getElementById("myCanvas");
        container.appendChild(renderer.domElement);
    }

    function setLights() {
        var light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
        light.castShadow = true;
        scene.add(light);

        var amblight = new THREE.AmbientLight(0x555555);
        scene.add(amblight);

    }
    function setControls() {
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.rotateSpeed = 0.5;
        controls.zoomSpeed = 2.0;
        controls.panSpeed = 5.;
        controls.minDistance = 5.0;
        controls.maxDistance = 100000;
    }

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