if (($('#model-container').length) && (!$('#pagearea').length)) {


    var container = document.getElementById('model-container');

    var
        //width  = window.innerWidth,
        //	height = window.innerHeight,
        width = $('#model-container').outerWidth(),
        height = $('#model-container').outerHeight(),
        scene,
        camera,
        renderer,
        url,
        loader,
        object;

    window.addEventListener('resize', function(ev) {
        width = $('#model-container').outerWidth();
        height = $('#model-container').outerHeight();
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
        renderer.setSize(width, height);
        console.log(width + ' / ' + height);
    });

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(30, width / height, 1, 2000);
    camera.position.set(-1, 0.8, -1.6);


    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
    });
    renderer.setSize(width, height);

    //document.body.appendChild( renderer.domElement );
    container.appendChild(renderer.domElement);
    /*
    controls = new THREE.TrackballControls( camera );
    controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;
    controls.noZoom = false;
    controls.noPan = false;
    controls.staticMoving = true;
    controls.dynamicDampingFactor = 0.3;
    controls.keys = [ 65, 83, 68 ];
    
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.55;
    controls.enableZoom = true;
    */



    //var ambientLight = new THREE.AmbientLight( 0xffffff )
    //scene.add( ambientLight );

    /*
    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 0, 10, 0 ).normalize();
    scene.add( directionalLight );
    */
    var ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
    scene.add(ambientLight);

    var pointLight = new THREE.PointLight(0xffffff, 0.8);
    camera.add(pointLight);
    scene.add(camera);

    //scene.add( new THREE.GridHelper( 5, 1 ) );

    var loader = new THREE.ObjectLoader();

    loader.load(
        // resource URL
        "/abc/JC2T-120-30-2.json?123",

        // onLoad callback
        // Here the loaded data is assumed to be an object
        function(object) {
            // Add the loaded object to the scene
            scene.add(object);
            //object.position.y = - 0.14;


            animate();
        },

        // onProgress callback
        function(xhr) {
            $('.progress-bar').css('width', (xhr.loaded / xhr.total * 100) + '%').text(Math.round(xhr.loaded / xhr.total * 100) + '%');
            if (xhr.loaded == xhr.total) {
                $('.progress').fadeOut(2000);
            }
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },

        // onError callback
        function(err) {
            console.error('An error happened');
        }
    );


    function animate() {

        requestAnimationFrame(animate);
        //controls.update();
        render();

    }

    function render() {
        renderer.render(scene, camera);
    }

    CameraControls.install({
        THREE: THREE
    });

    const clock = new THREE.Clock();
    var cameraControls = new CameraControls(camera, renderer.domElement);

    (function anim() {

        // snip
        const delta = clock.getDelta();
        const isControlsUpdated = cameraControls.update(delta);

        requestAnimationFrame(anim);

        if (isControlsUpdated) {

            renderer.render(scene, camera);

        }
    })();


    const target = $('#model-container')[0]; // Get DOM element from jQuery collection

    $('.fullscreen').on('click', () => {
        if (screenfull.enabled) {
            screenfull.toggle(target);
        }
    });
}