var renderer, scene, camera;

var bbox = [[
    -77.0, 38.90813299596715
], [
    // -76.999, 38.89103282648857
    -76.9968, 38.89003282648857
]];

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var projection = d3.geo.mercator()
    .scale(1607068)
    .translate([343719.2947389238, 188761.96895978847]);

var connection = iD.Connection();
connection.bboxFromAPI(bbox, function(graph) {

    var buildings = _.filter(graph.entities, function(e) {
        return e.type == 'way' && e.tags.building && e.tags.building == 'yes';
    }).map(function(b) {
        return graph.fetch(b.id);
    });

    var polygons = buildings.map(function(b) {
        return b.nodes.map(function(n) {
            return projection([n.lon, n.lat]);
        });
    });

    function setup() {
        //renderer = new THREE.CanvasRenderer();
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(960, 500);
        document.body.appendChild(renderer.domElement);

        scene = new THREE.Scene();

        parent = new THREE.Object3D();
        parent.position.y = 0;
        scene.add(parent);

        camera = new THREE.PerspectiveCamera(
            35,             // Field of view
            960 / 500,      // Aspect ratio
            0.1,            // Near plane
            10000           // Far plane
        );
        camera.position.set(-15, 10, 10);
        camera.lookAt(scene.position);

        scene.add(camera);

        function addGeometry(geometry, color, x, y, z, rx, ry, rz, s) {
            // 3d shape
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [
                new THREE.MeshLambertMaterial({
                    color: color,
                    opacity: 0.7,
                    transparent: true
                }), new THREE.MeshBasicMaterial({
                color: 0x000000,
                wireframe: true
            })]);
            mesh.position.set(x, y, z);
            mesh.rotation.set(rx, ry, rz);
            mesh.scale.set(s, s, s);
            if (geometry.debug) mesh.add(geometry.debug);
            parent.add(mesh);
        }

        var extrudeSettings = { amount: 1,  bevelEnabled: false, steps: 1 };
        var m2 = Math.PI/2;

        polygons.map(function(p) {
            var building = new THREE.Shape();
            building.moveTo(p[0][0], p[0][1]);
            for (var i = 1; i < p.length; i++) {
                building.lineTo(p[i][0], p[i][1]);
            }
            var be = building.extrude(extrudeSettings);
            addGeometry(be, 0xff1111, 0, 0, 0, -m2, 0, 0, 1);
        });

        var light = new THREE.PointLight(0xFFFF00);
        light.position.set(10, 0, 10);
        scene.add(light);

        renderer.render(scene, camera);
    }

    var targetRotation = 0, targetRotationX = 0;

    function render() {
        parent.rotation.y += (targetRotation - parent.rotation.y) * 0.005;
        parent.rotation.z += (targetRotationX - parent.rotation.z) * 0.005;
        renderer.render(scene, camera);
    }

    document.body.onmousemove = function() {
        mouseX = (event.clientX - windowHalfX) * 0.05;
        targetRotation = mouseX;
        targetRotationX = (event.clientY - windowHalfY) * 0.05;
    };

    function animate() {
        window.requestAnimationFrame(animate);
        render();
    }

    function onDocumentMouseWheel( event ) {
        // WebKit
        if ( event.wheelDeltaY ) {
            camera.fov -= event.wheelDeltaY * 0.05;
            // Opera / Explorer 9
        } else if ( event.wheelDelta ) {
            camera.fov -= event.wheelDelta * 0.05;
            // Firefox
        } else if ( event.detail ) {
            camera.fov -= event.detail * 0.05;
        }
        camera.updateProjectionMatrix();
    }

    document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

    setup();
    animate();
});