var veri = new Veri();
 
veri.setup({
    controls: "auto",
    vrEnabled: true,
    stereoscopic: "left-to-right",
    initializeCanvas: true,
    camera: {
        fov: 90,          // wider -> narrower  (10..100)
        aspect: window.innerWidth / window.innerHeight,
        near: 0.1,
        far: 1000
    },
    renderer: {
        width: window.innerWidth,
        height: window.innerHeight
    },
    light: {
        position: Veri.vec3(2, 2, 2)
    }
});
 
veri.start();

veri.setup({
 
    // controls:
    // "auto" will auto-detect.  Can be set to "device", "mouse"
    controls: "auto",     // auto-detect
 
    // vrEnabled:
    // if set to true, and VR hardware is found, then the
    // the video is rendered on the VR hardware, using WebVR
    vrEnabled: true,
 
    // polyfillWebVR:
    // if set to true, WebVR is poly-filled-in
    // to control from URL query string, set this to
    // !!window.location.search.match("polyfill")
    polyfillWebVR: false,
 
    // stereoscopic:
    // can be set to "side-by-side" if the eye frames
    // are next to each other, or "top-to-bottom"
    // monoscopic videos don't set this.
    stereoscopic: "side-by-side",
 
    // debug:  (OPTIONAL)
    // here you can request display of axis or fps
    debug: {
        showAxis: false,
        showFPS: false
    },
 
    // camera:
    // position and camera settings.  For more information refer to THREEjs.
    // camera direction is only relevant when vrEnabled is false.  When it is
    // set to true the vr-input device controls already provide a direction.
    camera: {
        pos: Veri.vec3(0, 0, 0),
        fov: 35,          // wider -> narrower  (10..100)
        aspect: window.innerWidth / window.innerHeight,
        near: 0.1,
        far: 1000,
        direction: Veri.vec3(0, 0, -1) // the lookAt vector3
    },
 
    // Animated Crosshairs
    //
    // provide a list of targets that the crosshairs can activate
    // each target must have a name and direction.  The direction is
    // specified using Veri.rot3 (syntactic sugar for THREE.Euler),
    // reduced to theta (vertical angle) and phi (horizontal angle)
    //
    // hitRadius - radians offset which is considered
    //     part of the target
    //
    // hitTime - time in milliseconds until the target is considered "clicked"
    //
    // sprite - optional sprite for animation.  Must be a "power-of-two" image,
    //     meaning the width and height must be powers of two, though not necessarily
    //     identical to each other. Includes attributes:
    //     src - url
    //     columns, rows - columns and rows in the sprite
    //     count - number of actual images in the sprite.
    //     objWidth, objHeight - size of invisible rectangle used to project the sprite.
    //     width, height - if the images are not exact fractions of the sprite
    //            width and height, specify them here.
    //
    //     If sprite is not specified
    //     then a small ring is used to indicate selection progress
    //
    // Note: use the event emitter to determine crosshairs state.
    crosshairs: {
        type: "animated-crosshairs",
        debug: false,
        targets: [ {
            name: "play",
            direction: Veri.rot3(0, -100)
        }, {
            name: "stop",
            direction: Veri.rot3(0, -80)
        }],
        hitRadius: 10,
        hitTime: 6000,
        sprite: {
            src: "../resources/sprite/circle.png",
            distance: 300,
            columns: 8,
            rows: 8,
            count: 60,
            objWidth: 60,
            objHeight: 60,
            width: 60,
            height: 60
        }
    },
 
    // Animated buttons
    //
    // Rather than having an animated crosshairs, in this case the
    // buttons themselves start animating when a static crosshairs enters
    // the button area.
    //
    // Provide a list of animated targets that the crosshairs can activate.
    // Each target must have a name and direction, a hitRadius, a hitTime,
    // and the corresponding sprite descriptor.  The sprite has its own
    // direction but it typically matches the target.
    //
    // sprite - describe the actual crosshairs image.  Not really a sprite
    //
    // Note: use the event emitter to determine crosshairs state.
    crosshairs: {
        type: "animated-buttons",
        debug: false,
        targets: [{
            name: "start",
            direction: Veri.rot3(0, -100),
            hitRadius: 16,
            hitTime: 6000,
            sprite: {
                // same as above, but also include a direction
                direction: Veri.rot3(0, -100)
            }
        }],
        sprite: {
            src: "resources/img/crosshairs.png",
            distance: 380,
            objWidth: 50,
            objHeight: 50,
            columns: 1,
            rows: 1,
            count: 1
        }
    },
 
    // renderer:
    // specify width and height
    renderer: {
        width: window.innerWidth,
        height: window.innerHeight
    },
 
    // sphere360: (OPTIONAL)
    // specify parameters for the rendering sphere.  
    sphere360: {
        radius: 500,
        hide: false
    },
 
    // audio: (OPTIONAL)
    // supports both positional and ambisonic audio encoded in B-format
    // attributes:
    //     src: url of the source audio file
    //     type: can be "positional" or "ambisonic"
    //     positional: provide a position vector (for positional type)
    audio: {
        type: "positional",
        src: "https://upload.wikimedia.org/wikipedia/commons/2/2a/20091104_Alisa_Weilerstein_and_Jason_Yoder_-_Saint_Sa%C3%ABns%27_The_Swan.ogg",
        position: Veri.vec3(0, 0, -10)
    }
 
    // objects: (OPTIONAL)
    // specify a dictionary of objects which should be rendered.  These typically
    // would be the buttons that the user can click or tap on.  Each object should
    // provide:
    //     resource: a relative path for the OBJ file
    //     movesWithCamera: true if the object must remain fixed in the camera's frame
    //         as the camera moves about
    //     position: if the object does not move with the camera, this is a fixed
    //         position in the scene space.  If it does move with the camera, this
    //         becomes a 3-vector relative to the camera.
    //     color: provide a hex color
    //     handler: function that should be called when the object is clicked.  The name
    //         of the object will be passed to the handler, so the same handler can be
    //         specified on all of the objects if desired.
    objects: {
        stopButton: {
            resource: 'resources/obj/s-stop.obj',
            position: Veri.vec3(-1, 0, -5),
            color: 0xc8955c,
            movesWithCamera: false,
            handler: clickHandler  
        },
        goButton: {
            resource: 'resources/obj/s-rev-fwd.obj',
            position: Veri.vec3(1, 0, -5),
            color: 0xc8955c,
            movesWithCamera: false,
            handler: clickHandler
        }
    },
 
    // light: (OPTIONAL)
    // this is only needed if objects are provided, to light up those objects.
    light: {
        position: Veri.vec3(2, 2, 2)
    }
});

veri.on('click', function(objName) {
        console.log('you clicked on ' + objName);
});

veri.on('frame', function(camera) {
    var directionOnXZPlane = camera.projectOnPlane(Veri.vec3(0, 1, 0));
    var quaternion = (new THREE.Quaternion()).setFromUnitVectors(cameraCenter, directionOnXZPlane);
    var euler = (new THREE.Euler()).setFromQuaternion(quaternion);
    var angle = euler.y;
});

veri.on('ready', function(objName) {
    console.log('vr setup complete');
});

veri.on('targetEnter', function(target) {
    console.log('looking at ' + target);
});

veri.on('targetExit', function(target) {
    console.log('no longer looking at ' + target);
});
 

veri.on('targetStay', function(target) {
    console.log('still looking at ' + target);
});

veri.on('targetSelected', function(target) {
        console.log('crosshairs selected target: ' + target);
});