{
 
    /**s
 
     Helper widget that indicates the World coordinate axis.
 
     The helper works by tracking updates on a xeogl.Camera and orienting a gnomon accordingly.
 
     @class AxisHelper
     @constructor
     @param cfg {*} Configuration
     @param cfg.camera {xeogl.Camera} A {{#crossLink "xeogl.Camera"}}{{/crossLink}} to observe.
     @param [cfg.size] {Int16Array} Pixel dimensions of helper's canvas, [250, 250] by default.
     */
    xeogl.AxisHelper = function (cfg) {
 
        var camera = cfg.camera;
 
        if (!camera) {
            throw "Param expected: camera";
        }
 
        var size = cfg.size || [250, 250];
 
        var canvas = camera.scene.canvas;
 
        // Create canvas for this helper
 
        var canvasId = "xeogl-axisHelper-canvas-" + xeogl.math.createUUID();
        var body = document.getElementsByTagName("body")[0];
        var div = document.createElement('div');
        var style = div.style;
        style.height = size[0] + "px";
        style.width = size[1] + "px";
        style.padding = "0";
        style.margin = "0";
        style.float = "left";
        style.left = "410px";
        style.bottom = "350px";
        style.position = "absolute";
        style["z-index"] = "1000000";
        // style["background-color"] = "rgba(0,0,0,0.3)";
        div.innerHTML += '<canvas id="' + canvasId + '" style="width: ' + size[0] + 'px; height: ' + size[1] + 'px; float: left; margin: 0; padding: 0;"></canvas>';
        body.appendChild(div);
        var helperCanvas = document.getElementById(canvasId);
 
        canvas.on("boundary",
            function (boundary) {
                style.left = boundary[0] + 10 + "px";
                style.bottom = (boundary[0] + 20) + "px";
            });
 
        // The scene containing this helper
        var scene = new xeogl.Scene({
            canvas: helperCanvas,
            transparent: true
        });
 
        // Custom lights
        scene.clearLights();
 
        new xeogl.AmbientLight(scene, {
            color: [0.45, 0.45, 0.5],
            intensity: 0.9
        });
 
        new xeogl.DirLight(scene, {
            dir: [-0.5, 0.5, -0.6],
            color: [0.8, 0.8, 0.7],
            intensity: 1.0,
            space: "view"
        });
 
        new xeogl.DirLight(scene, {
            dir: [0.5, -0.5, -0.6],
            color: [0.8, 0.8, 0.8],
            intensity: 1.0,
            space: "view"
        });
 
        // Rotate helper in synch with target camera
 
        var helperCamera = scene.camera;
 
        camera.on("matrix", function () {
 
            var eye = camera.eye;
            var look = camera.look;
            var up = camera.up;
 
            var eyeLook = xeogl.math.mulVec3Scalar(xeogl.math.normalizeVec3(xeogl.math.subVec3(eye, look, [])), 22);
 
            helperCamera.look = [0, 0, 0];
            helperCamera.eye = eyeLook;
            helperCamera.up = up;
        });
 
        // ----------------- Components that are shared among more than one mesh ---------------
 
        var arrowHead = new xeogl.CylinderGeometry(scene, {
            radiusTop: 0.01,
            radiusBottom: 0.6,
            height: 1.7,
            radialSegments: 20,
            heightSegments: 1,
            openEnded: false
        });
 
        var arrowShaft = new xeogl.CylinderGeometry(scene, {
            radiusTop: 0.2,
            radiusBottom: 0.2,
            height: 4.5,
            radialSegments: 20,
            heightSegments: 1,
            openEnded: false
        });
 
        var axisMaterial = new xeogl.PhongMaterial(scene, { // Red by convention
            ambient: [0.0, 0.0, 0.0],
            specular: [.6, .6, .3],
            shininess: 80,
            lineWidth: 2
        });
 
        var xAxisMaterial = new xeogl.PhongMaterial(scene, { // Red by convention
            diffuse: [1, 0.3, 0.3],
            ambient: [0.0, 0.0, 0.0],
            specular: [.6, .6, .3],
            shininess: 80,
            lineWidth: 2
        });
 
        var xAxisLabelMaterial = new xeogl.PhongMaterial(scene, { // Red by convention
            emissive: [1, 0.3, 0.3],
            ambient: [0.0, 0.0, 0.0],
            specular: [.6, .6, .3],
            shininess: 80,
            lineWidth: 2
        });
 
        var yAxisMaterial = new xeogl.PhongMaterial(scene, { // Green by convention
            diffuse: [0.3, 1, 0.3],
            ambient: [0.0, 0.0, 0.0],
            specular: [.6, .6, .3],
            shininess: 80,
            lineWidth: 2
        });
 
        var yAxisLabelMaterial = new xeogl.PhongMaterial(scene, { // Green by convention
            emissive: [0.3, 1, 0.3],
            ambient: [0.0, 0.0, 0.0],
            specular: [.6, .6, .3],
            shininess: 80,
            lineWidth: 2
        });
 
 
        var zAxisMaterial = new xeogl.PhongMaterial(scene, { // Blue by convention
            diffuse: [0.3, 0.3, 1],
            ambient: [0.0, 0.0, 0.0],
            specular: [.6, .6, .3],
            shininess: 80,
            lineWidth: 2
        });
 
        var zAxisLabelMaterial = new xeogl.PhongMaterial(scene, {
            emissive: [0.3, 0.3, 1],
            ambient: [0.0, 0.0, 0.0],
            specular: [.6, .6, .3],
            shininess: 80,
            lineWidth: 2
        });
 
        var ballMaterial = new xeogl.PhongMaterial(scene, {
            diffuse: [0.5, 0.5, 0.5],
            ambient: [0.0, 0.0, 0.0],
            specular: [.6, .6, .3],
            shininess: 80,
            lineWidth: 2
        });
 
 
        // ----------------- Meshes ------------------------------
 
        var meshes = [
 
            // Sphere behind gnomon
 
            new xeogl.Mesh(scene, {
                geometry: new xeogl.SphereGeometry(scene, {
                    radius: 9.0,
                    heightSegments: 60,
                    widthSegments: 60
                }),
                material: new xeogl.PhongMaterial(scene, {
                    diffuse: [0.0, 0.0, 0.0],
                    emissive: [0.1, 0.1, 0.1],
                    ambient: [0.1, 0.1, 0.2],
                    specular: [0, 0, 0],
                    alpha: 0.4,
                    alphaMode: "blend",
                    frontface: "cw"
                }),
                pickable: false,
                collidable: false,
                visible: !!cfg.visible
            }),
 
            // Ball at center of axis
 
            new xeogl.Mesh(scene, {  // Arrow
                geometry: new xeogl.SphereGeometry(scene, {
                    radius: 1.0
                }),
                material: ballMaterial,
                pickable: false,
                collidable: false,
                visible: !!cfg.visible
            }),
 
            // X-axis arrow, shaft and label
 
            new xeogl.Mesh(scene, {  // Arrow
                geometry: arrowHead,
                material: xAxisMaterial,
                pickable: false,
                collidable: false,
                visible: !!cfg.visible,
                position: [-5, 0, 0],
                rotation: [0, 0, 90]
            }),
 
            new xeogl.Mesh(scene, {  // Shaft
                geometry: arrowShaft,
                material: xAxisMaterial,
                pickable: false,
                collidable: false,
                visible: !!cfg.visible,
                position: [-2, 0, 0],
                rotation: [0, 0, 90]
            }),
 
            new xeogl.Mesh(scene, {  // Label
                geometry: new xeogl.VectorTextGeometry(scene, {text: "X", size: 1.5}),
                material: xAxisLabelMaterial,
                pickable: false,
                collidable: false,
                visible: !!cfg.visible,
                position: [-7, 0, 0],
                billboard: "spherical"
            }),
 
            // Y-axis arrow, shaft and label
 
            new xeogl.Mesh(scene, {  // Arrow
                geometry: arrowHead,
                material: yAxisMaterial,
                pickable: false,
                collidable: false,
                visible: !!cfg.visible,
                position: [0, 5, 0]
            }),
 
            new xeogl.Mesh(scene, {  // Shaft
                geometry: arrowShaft,
                material: yAxisMaterial,
                pickable: false,
                collidable: false,
                visible: !!cfg.visible,
                position: [0, 2, 0]
            }),
 
            new xeogl.Mesh(scene, {  // Label
                geometry: new xeogl.VectorTextGeometry(scene, {text: "Y", size: 1.5}),
                material: yAxisLabelMaterial,
                pickable: false,
                collidable: false,
                visible: !!cfg.visible,
                position: [0, 7, 0],
                billboard: "spherical"
            }),
 
            // Z-axis arrow, shaft and label
 
            new xeogl.Mesh(scene, {  // Arrow
                geometry: arrowHead,
                material: zAxisMaterial,
                pickable: false,
                collidable: false,
                visible: !!cfg.visible,
                position: [0, 0, 5],
                rotation: [90, 0, 0]
            }),
 
            new xeogl.Mesh(scene, {  // Shaft
                geometry: arrowShaft,
                material: zAxisMaterial,
                pickable: false,
                collidable: false,
                visible: !!cfg.visible,
                position: [0, 0, 2],
                rotation: [90, 0, 0]
            }),
 
            new xeogl.Mesh(scene, {  // Label
                geometry: new xeogl.VectorTextGeometry(scene, {text: "Z", size: 1.5}),
                material: zAxisLabelMaterial,
                pickable: false,
                collidable: false,
                visible: !!cfg.visible,
                position: [0, 0, 7],
                billboard: "spherical"
            })
        ];
 
        /** Shows or hides this helper
         *
         * @param visible
         */
        this.setVisible = function (visible) {
            for (var i = 0; i < meshes.length; i++) {
                meshes[i].visible = visible;
            }
        }
    };
}