SVGShape

/**
 * A THREE.js representation of a SVG. Can convert
 * SVG shapes into THREE.Mesh(s).
 *
 * TODO two.js integration may prove unnecessary later. Also, it's unclear how complex SVGs will look.
 *
 * Also note - things might not line up exactly, subtract 1/2 viewbox width/height from position
 * to get the proper 0,0 position
 *
 * @param shapeid id of the svg or (later on down the line)path to svg
 * @param iterations the number of vertices that make up a mesh.
 * @constructor
 * 
 * by @sortofsleepy
 */
var SVGShape = function (shapeid){

    this.id = shapeid;

    ////// SVG STUFF //////
    var two = new Two({
        type: Two.Types["canvas"],
        fullscreen: false,
        autostart: true,
        width: 200,height:200
    });
    var svg = document.getElementById(shapeid);

    this.shape = two.interpret(svg).center();

    //get the viewbox parameters
    var viewbox = svg.getAttribute("viewBox");
    viewbox = viewbox.split(' ');

    //store width and height of viewbox
    this.viewboxWidth = viewbox[2];
    this.viewboxHeight = viewbox[3];

    this._buildShape();

};


SVGShape.prototype = {

    /**
     * Extracts the vertices from the two.js shape
     *
     * TODO remove two.js dependency
     * @returns {SVGShape}
     * @private
     */
    _buildShape:function(){
        var vertices = [];
        var shape = this.shape;

        var meshes = [];
        var count = 0;
        /**
         * Loop through children which determine
         * # of geometries needed. Construct
         * geometries from their vertices.
         */
        _.each(shape.children, function(child,i,p,a) {
            var geo = new THREE.Geometry();

            var verts = [];

            _.each(child.vertices, function(v) {

                var vertex = new THREE.Vector3(v.x, v.y,0.0);
                verts.push(vertex);
            });

            var holes = [];
            geo.vertices = verts;
            var triangles = new THREE.Shape.Utils.triangulateShape(verts,holes);

            for(var i = 0;i<triangles.length;++i){
                geo.faces.push( new THREE.Face3( triangles[i][0], triangles[i][1], triangles[i][2] ));
            }

            var mat = new THREE.MeshBasicMaterial({
                color:0x000000,
                opacity:1,
                needsUpdate:true,
                transparent:true
            });


            var mesh = new THREE.Mesh(geo,mat);

            meshes.push(mesh);
            count++;
        });
        this.meshes = meshes;


        var group = new THREE.Object3D();
        for(var i = 0; i < this.meshes.length;++i){
            group.add(this.meshes[i]);
        }

        /**
         * Reposition group to center.
         * Remember, subtract 1/2 viewbox width/height
         * @type {number}
         */
        group.position.x = -Number(this.viewboxWidth / 2);
        group.position.y = -Number(this.viewboxHeight / 2);

        this.group = group;

        //setup the rest of the functionality of the object based on the SVG
        this._setupObjects();

        return this;
    },

    rotateY:function(rotation){
      this.group.rotation.y = rotation;
    },

    /**
     * Sets up the meshes as properties of SVG shape to make things easier for
     * manipulation.
     * @private
     */
    _setupObjects:function(){
        console.log("running")
        var meshLen = this.meshes.length;
        for(var i = 0; i < meshLen;++i){
            this["mesh" + i] = this.meshes[i];

            /**
             * Helper function to set mesh's material
             * @param threemat some kind of THREE.Material to use
             */
            this["setMesh" + i + "Material" ] = function(threemat){
                this.meshes[i].material = threemat;
            }

            /**
             * Helper function to set the new position of the mesh
             * @param x the new x value
             * @param y the new y value
             * @param z the new z value
             */
            this["setMesh" + i + "Position"] = function(x,y,z){
                this.meshes[i].position.x = x;
                this.meshes[i].position.y = y;
                this.meshes[i].position.z = z;
            };

            /**
             * Helper function to set mesh rotation
             * @param x the new x rotation
             * @param y the new y rotation
             * @param z the new z rotation
             */
            this["setMesh" + i + "Rotation"] = function(x,y,z){
                this.meshes[i].rotation.x = x;
                this.meshes[i].rotation.y = y;
                this.meshes[i].rotation.z = z;
            }

        }
    },

    /**
     * adds mesh(or group of meshes) to scene
     * @param scene
     */
    addTo:function(scene){
        scene.add(this.group);
    }
};