$(document).ready(function() {
    var WIDTH = $('#floating-polies').outerWidth();
    var HEIGHT = $('#floating-polies').outerHeight();
    var showWireframe = false;
    var plane;
    var planeObject;
    var logOnce = false;
    var clock = new THREE.Clock();
    var direction = 1;
    var time = 0;
    var controls;
    var possibleFloatingTriangles = 10;

    var scene, camera, renderer, container;

    init();
    update();

    function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera( 90, WIDTH / HEIGHT, 0.1, 1000 );
        renderer = new THREE.WebGLRenderer({ antialias: true });
        container = document.getElementById("floating-polies");

        scene.background = new THREE.Color( 0xececec );

        camera.position.x = 100;
        camera.position.y = 100;
        camera.position.z = 0;

        camera.rotation.x = -100;

        controls = new THREE.OrbitControls(camera, container);

        renderer.setSize(WIDTH, HEIGHT);
        container.appendChild(renderer.domElement);

        plane = new THREE.PlaneGeometry( WIDTH, WIDTH, 10, 10 );
        planeObject = new THREE.Mesh( plane, new THREE.MeshPhongMaterial( { color: 0xF9F9F9, wireframe: showWireframe, specular: 0x0, morphTargets: true, flatShading: true } ) );

        planeObject.rotation.set(-Math.PI/2, Math.PI/2000, Math.PI); ;

        for(var i = 0; i < planeObject.geometry.vertices.length; i++) {
            var currentVertex = planeObject.geometry.vertices[i];
            currentVertex.z = Math.floor((Math.random() * 50) + 1);
        }

        var light = new THREE.DirectionalLight( 0xffffff );
        light.position.set( 0, 10, 15 ).normalize();

        scene.add(light);
        scene.add(planeObject);
        scene.add(camera);
    }

    function update() {
        requestAnimationFrame(update);

        render();
    }

    function render() {
        var numberOfTriangles = 0;
        time += clock.getDelta();

        if(time >= 3) {
            if(direction == 1) direction = 2
            else direction = 1;

            time = 0;
        }

        scene.traverse(function(node) {
            if(node instanceof THREE.Mesh && node.geometry.type === "PlaneGeometry") {
                for(var i = 0; i < node.geometry.vertices.length; i++) {
                    var currentVertex = node.geometry.vertices[i];
                    var goUp = false;

                    if(direction == 1)
                        if(i%2 == 0)
                            goUp = true;

                    if(direction == 2)
                        if(i%2 != 0)
                            goUp = true;

                    if(goUp)
                        currentVertex.z += 0.05;
                    else
                        currentVertex.z -= 0.05;
                }

                node.geometry.verticesNeedUpdate = true;
            }

            else if(node instanceof THREE.Mesh && node.geometry.type === "Geometry") {
                numberOfTriangles++;

                if(!logOnce) {
                    logOnce = true;
                    console.warn(node);
                }

                node.rotation.y = Date.now() * 0.0001 * 2.5;
            }
        });

        if(numberOfTriangles < possibleFloatingTriangles) {
            var randomIndices = [];

            while(randomIndices.length < possibleFloatingTriangles - numberOfTriangles) {
                var randomNumber = Math.ceil(Math.random()*150);
                if(randomIndices.indexOf(randomNumber) > -1) continue;
                randomIndices[randomIndices.length] = randomNumber;
            }

            scene.traverse(function(node) {
                if(numberOfTriangles >= possibleFloatingTriangles) return;

                if(node instanceof THREE.Mesh && node.geometry.type === "PlaneGeometry") {
                    for(var i = 0; i < node.geometry.faces.length; i++) {
                        if(randomIndices.indexOf(i) != -1) {
                            var currentFace = node.geometry.faces[i];
                            var triangleGeometry = new THREE.Geometry();

                            var p1 = node.geometry.vertices[currentFace.a].clone();
                            var p2 = node.geometry.vertices[currentFace.b].clone();
                            var p3 = node.geometry.vertices[currentFace.c].clone();

                            triangleGeometry.vertices.push(p1);
                            triangleGeometry.vertices.push(p2);
                            triangleGeometry.vertices.push(p3);

                            var face = new THREE.Face3(0,2,1);

                            triangleGeometry.faces.push(face);

                            var triangleMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000, wireframe: showWireframe, specular: 0x0, morphTargets: true, flatShading: true, side: THREE.DoubleSide });
                            var triangle = new THREE.Mesh(triangleGeometry, triangleMaterial);

                            triangle.rotation.set(-Math.PI/2, Math.PI/2000, Math.PI); ;

                            scene.add(triangle);
                        }
                    }
                }
            });
        }

        //camera.lookAt( scene.position );
        renderer.render(scene, camera);
    }

});