volume-visualization/static/js/threeJsHelper/src/Application.js

IPE.app = {};
IPE.helper = {};
IPE.interceptors = {};

String.prototype.endsWith = function(suffix) {
    return this.indexOf(suffix, this.length - suffix.length) !== -1;
};

Array.prototype.last = function() {
    return this[this.length-1];
}

IPE.app = {
    init : function(config) {
        var headerHeight = $('header').height();
        if($(window).height() < 500) {
            $("body").animate({ scrollTop: headerHeight }, "slow");
        }

        $.each(IPE.interceptors, function(index, interceptor) {
            interceptor.init();
        });

        Globals.init();

        IPE.app.initializeHelper();
        IPE.app.bindEvents();
        IPE.app.initData();

        // Getting info file
        $.ajax({
            url: infoUrl + config.defaultSize,
            success: function (data) {
                textureInfo = data;

                originalSizeArray[0] = textureInfo.originalSize.sizex;
                originalSizeArray[1] = textureInfo.originalSize.sizey;
                originalSizeArray[2] = textureInfo.originalSize.sizez;

                imgInfo = data.info;

                currentVolumeDimension.xmin = 0;
                currentVolumeDimension.xmax = textureInfo.originalSize.sizex;
                currentVolumeDimension.ymin = 0;
                currentVolumeDimension.ymax = textureInfo.originalSize.sizey;
                currentVolumeDimension.zmin = imgInfo.imgMin;
                currentVolumeDimension.zmax = imgInfo.imgMax;

                // downloading first image and starting
                helper.downloadImage(spriteUrl + textureInfo.sprites[0][0].$oid, 0, 0, true);

                $(document).trigger('basicsReady');
            },
            dataType: 'json'
        });


        container = document.getElementById( 'container' );
        $container = $(container);
        containerHeader = document.getElementById( 'container-header' );
        $containerHeader = $(containerHeader);
        containerOverview = document.getElementById('container-overview');
        $containerOverview = $(containerOverview);

        stats = new Stats();
        $containerHeader.children('#container-stats').append( stats.domElement );

        // until now, it has to be initialized here, needs a new internal structure
        zoomHelper = new ZoomHelper();

        $(window).on('scroll', function(e) {
            if($(this).scrollTop() >= headerHeight) {
                $container.css('position', 'relative');
                $container.css('top', $(this).scrollTop() - headerHeight);
            } else {
                $container.css('top', 0);
            }
        });
    },
    initializeHelper: function() {
        helper = new Helper();
        geometryHelper = new GeometryHelper();
        stepHelper = new StepHelper();
        overviewHelper = new OverviewHelper();
        transferHelper = new TransferHelper();
        opacityPlotter = new OpacityPlotter();
    },

    initData: function() {
        volumeId = $('#volumeId').val();

        $resSpan = $('span#currentRes');

        volumeUrl = homeUrl + 'volumes/' + volumeId + '/';
        infoUrl = volumeUrl + 'texture-info/';
        spriteUrl = volumeUrl + 'sprite/';

        waitDiv = $('div#wait');

        helper.initializeShaders(homeUrl + 'static/shaders/three-shader.vert', function(script) {
            vertexShader = script
        });
        helper.initializeShaders(homeUrl + 'static/shaders/three-shader-simple.frag', function(script) {
            fragmentSimleShader = script
        });
        helper.initializeShaders(homeUrl + 'static/shaders/three-shader.frag', function(script) {
            fragmentShader = script
        });
    },

    bindEvents : function() {
        $(document).on('firstImageOnLoad',function (e, firstImageParams){
            initTextures(imgInfo, firstImageParams, true);

            initFrameControls();

            stepHelper.initStepControls();

            initSliders();
        });

        $(document).on('imageOnLoad', function(e, imageParams) {
            initTextures(imgInfo, imageParams, false);

            if(useDownloadedTextureImmediately) {
                updateTexture();
                useDownloadedTextureImmediately = false;
                updateFrameControls();
            }
        });

        $(document).on('firstFrameSpritesCompleted', function() {
            init();

            addResolutionLinks();

            overviewHelper.initOverview(containerOverview);

            animate();
        });

        showPopup = false;
        $('#save-canvas').click(function(e, params) {
            if(params != undefined && params.source != undefined && params.source == 'animate-function') {
                window.open(params.imageUrl);
                return false;
            } else {
                saveImage = true;
                return false;
            }
        });

        $(window).on('resize', function() {
            var rendererSizeHolder = calculateWidthHeight();
            width = rendererSizeHolder.width.px;
            height = rendererSizeHolder.height.px;

            cameraRTT.aspect = width / height;
            cameraRTT.updateProjectionMatrix();

            camera.aspect = width / height;
            camera.updateProjectionMatrix();

            renderer.setSize( width, height );
            renderer.domElement.style.width = rendererSizeHolder.width.percent + '%';
            renderer.domElement.style.height = rendererSizeHolder.height.percent + '%';
        });

        $resolutionLinks.on('click', 'a', function(e) {
            e.preventDefault();
            e.stopPropagation();
            var $this = $(this);

            if($this.attr('href') == undefined) {
                return false;
            }
            requestedSize = $this.attr('data');

            $('.res-link').each(function(index, value) {
                var $value = $(value);
                $value.attr('href', '#');
            });
            $this.removeAttr('href');

            $.ajax({
                // todo test after remove of sync flag
                url: infoUrl + requestedSize,
                success: function (data) {
                    framesDownloaded = 0;
                    textures = {};
                    currentTexture = 0;

                    textureInfo = data;
                    imgInfo = data.info;
                    imgMin = imgInfo.imgMin;
                    imgMax = imgInfo.imgMax;
                    useDownloadedTextureImmediately = true;
                    helper.downloadImage(spriteUrl + textureInfo.sprites[0][0].$oid, 0, 0, false);
                    $resSpan.text(requestedSize);

                    if($('input#hide-content-small-devices').is(':visible')) {
                        $('input#hide-content-small-devices').trigger('click');
                    }
                },
                dataType: 'json'
            });

            return false;
        });

        $('div.controls').on('click', function() {
            var $this = $(this),
                bottomControlsContainer = $('div#bottom-controls-container'),
                bottomControls = $('div#bottom-controls'),
                filledById = '',
                thisControlHolder = null;

            filledById = hideBottomControlsContainer();
            if(filledById === $this.attr('id')) {
                return;
            }

            thisControlHolder = $this.children('.control-holder')[0];
            thisControlHolder = $(thisControlHolder);

            bottomControls.append(thisControlHolder.children());
            bottomControls.attr('filledBy', $this.attr('id'));
            bottomControlsContainer.removeClass('hidden');

            // inform, that it is showed
            $this.trigger('controlsShowed');
        });

        $('input#hide-bottom-controls-container').on('click', function() {
            hideBottomControlsContainer();
        });

        $('div#menu-buttons-small-devices input').on('click', function() {
            var $this = $(this),
                target = $this.attr('data'),
                $target = $('#' + target),
                $overlay = $('div#overlay-small-devices'),
                $content = $('div#content-small-devices');

            $overlay.attr('source', target);
            $content.append($target.children());
            $overlay.show();
        });

        $('input#hide-content-small-devices').on('click', function() {
            var $overlay = $('div#overlay-small-devices'),
                $content = $('div#content-small-devices'),
                source = $overlay.attr('source'),
                $source = $('#' + source);

            $overlay.hide();
            $overlay.attr('source', '');
            $source.append($content.children());
        });

        var buttonAdvCons = $('input#show-adv-con');
        buttonAdvCons.on('click', function() {
            var advCons = $('div#advanced-controls');

            if(advCons.hasClass('hidden')) {
                advCons.removeClass('hidden');
                buttonAdvCons.val('hide adv cons');

            } else {
                advCons.addClass('hidden');
                buttonAdvCons.val('show adv cons');
            }
        });
    }
}

function initTextures(imgInfo, imageParams, whileInit) {
    // set initial array to index
    if(textures[imageParams.textureIndex] == undefined
       || textures[imageParams.textureIndex] == null) {
        textures[imageParams.textureIndex] = [];
    }

    // using texture
    texture = initTexture(imageParams.texture);
    textures[imageParams.textureIndex].push(texture);

    // fetch new sprites of same time frame
    if(imageParams.spriteIndex < imgInfo.numberOfSprites - 1) {
        nextSpriteIndex = imageParams.spriteIndex + 1;
        nextSpriteId = textureInfo.sprites[imageParams.textureIndex][nextSpriteIndex].$oid
        helper.downloadImage(spriteUrl + nextSpriteId, imageParams.textureIndex, nextSpriteIndex, false);
        return;
    }

    // inform the rest, that the first frame is loaded completely
    if(whileInit && imageParams.textureIndex == 0) {
        $(document).trigger('firstFrameSpritesCompleted');
    }

    // todo some logic
    if(!imgInfo.multipleFrames) {
        currentTexture = 0;
        return;
    } else {
        var numberOfFrames = Object.keys(textureInfo.sprites).length,
            nextIndex = null,
            nextFrameName = null,
            nextFramePath = null;

        framesDownloaded++;

        if(framesDownloaded == 1) {
            currentTexture = 0;
        }

        currentMaxFrame = imgInfo.frameFrom + framesDownloaded - 1;

        if(framesDownloaded > 1) {
            // updating frame control maximums
            updateFrameControlsMaxFrame();
        }

        if(numberOfFrames == framesDownloaded) {
            return;
        } else {
            nextIndex = framesDownloaded;
            nextFrameName = textureInfo.sprites[nextIndex][0].$oid;
            var framePath = spriteUrl + nextFrameName;
            helper.downloadImage(framePath, nextIndex, false);
        }
    }
}

function initTexture(texture) {
    texture.magFilter = THREE.LinearFilter;
    texture.minFilter = THREE.LinearFilter;
    texture.needsUpdate = true;

    return texture;
}

function getCurrentTexture() {
    return textures[currentTexture];
}

function useFrameControls() {
    return (imgInfo.multipleFrames && (imgInfo.frameTo - imgInfo.frameFrom) != 0);
}

function initFrameControls() {
    if(!useFrameControls()) {
        return;
    }

    $('#frame-controls').removeClass('hidden');

    var $frameSlider = $('#frame-slider'),
        $playButton = $('#frame-play'),
        $pauseButton = $('#frame-pause'),
        $currentFrameInput = $('#currentFrame'),
        playId = $playButton.attr('id'),
        pauseId = $pauseButton.attr('id'),
        minFrame = imgInfo.frameFrom;

    $currentFrameInput.val(minFrame);
    var play = function() {
        if(Object.keys(textures).length == 1) {
            console.warn('only one texture loaded, can not play yet');
            return;
        }
        $playButton.addClass('hidden');
        $pauseButton.removeClass('hidden');
        playFrames = true;
        $frameSlider.slider({disabled: true});
        $currentFrameInput.prop('disabled', true);
    }
    var pause = function() {
        $playButton.removeClass('hidden');
        $pauseButton.addClass('hidden');
        playFrames = false;
        $frameSlider.slider({disabled: false});
        $currentFrameInput.prop('disabled', false);
    }

    $('.frame-button').click(function() {
        var $this = $(this),
            thisId = $this.attr('id');
        if(thisId == playId) {
            play();
        } else if(thisId == pauseId) {
            pause();
        }

    });

    $(document).on('zoomActionFinished', function(e, params) {
        zoomedIn = params.zoomAction == 'zoomIn';
        if(zoomedIn) {
            pause();
            currentTexture = minFrame + params.textureNumber;
            updateFrameControls();
            $frameSlider.slider({disabled: true});
            $currentFrameInput.prop('disabled', true);
            $playButton.prop('disabled', true);
            $pauseButton.prop('disabled', true);
        } else {
            $frameSlider.slider({disabled: false});
            $currentFrameInput.prop('disabled', false);
            $playButton.prop('disabled', false);
            $pauseButton.prop('disabled', false);
        }
    });

    $frameSlider.slider(
        {
            min: minFrame,
            max: currentMaxFrame,
            slide: function( event, ui ) {
                currentTexture = ui.value - minFrame;
                updateTexture();
                $currentFrameInput.val(ui.value);
            }
        }
    );

    $currentFrameInput.change(function() {
        var value = parseInt($(this).val());
        if(value  >= imgInfo.frameFrom && currentMaxFrame >= value) {
            currentTexture = value - minFrame;
            updateTexture();
            $frameSlider.slider('value', value);
        } else {
            $(this).val($frameSlider.slider('value'));
        }

    });
}

function updateFrameControlsMaxFrame() {
    if(!useFrameControls()) {
        return;
    }

    var $frameSlider = $('#frame-slider');

    $frameSlider.slider('option', 'max', currentMaxFrame);
}

function updateFrameControls() {
    if(!useFrameControls()) {
        return;
    }

    var $frameSlider = $('#frame-slider'),
        $currentFrameInput = $('#currentFrame'),
        minFrame = imgInfo.frameFrom,
        value = currentTexture + minFrame;


    $frameSlider.slider('value', value);
    $currentFrameInput.val(value);
}


function init() {
    $statsDom = $(stats.domElement);

    rendererSizeHolder = calculateWidthHeight();

    width = rendererSizeHolder.width.px;
    height = rendererSizeHolder.height.px;

    //width = window.innerWidth;
    //height = window.innerHeight;

    camera = new THREE.PerspectiveCamera( 45, width / height, .1, 1000 );
    camera.position.z = 2;

    cameraRTT = new THREE.PerspectiveCamera( 45, width / height, .1, 1000 );
    cameraRTT.position.z = 2;

    scene = new THREE.Scene();
    sceneRTT = new THREE.Scene();

    rtTexture = new THREE.WebGLRenderTarget( width, height, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat } );

    var geometry = geometryHelper.createBoxGeometry(originalDimension);

    var attributes = {
        frontColor: {type: 'c', value: [] }
    }

    material = new THREE.ShaderMaterial({
        attributes: attributes,
        vertexShader: vertexShader,
        fragmentShader: fragmentSimleShader,
        side: THREE.FrontSide
    });

    var spriteMaps = getCurrentTexture();

    var transferImageData = transferHelper.getCurrentTransferFunction();
    var transferTexture = new THREE.Texture(transferImageData);
    transferTexture.needsUpdate = true;

    var uniforms = {
        tBackground: {type: 't', value: rtTexture},
        tvSlices: {type: 'tv', value: spriteMaps},
        tTransfer: { type: 't', value: transferTexture},
        steps: {type: 'f', value: 100},
        numberOfSlices: {type: 'f', value: imgInfo.numberOfSlices },
        numberOfSprites: {type: 'f', value: imgInfo.numberOfSprites },
        slicesPerSprite: {type: 'f', value: imgInfo.slicesPerSprite },
        slicesOverX: {type: 'f', value: imgInfo.slicesOverX },
        slicesOverY: {type: 'f', value: imgInfo.slicesOverY },
    };

    materialScreen = new THREE.ShaderMaterial({
        attributes: attributes,
        uniforms: uniforms,
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
        side: THREE.BackSide,
        transparent: true
    });


    backgroundBox = new THREE.Mesh(geometry, material);
    sceneRTT.add(backgroundBox);

    frontBox = new THREE.Mesh(geometry, materialScreen);//
    scene.add(frontBox);
    objectsToIntersect.push(frontBox);

    translateBoxes(-0.5, -0.5, -0.5);
    rotateBoxesY(Math.PI);
    rotateBoxesZ(Math.PI);

    //renderer = new THREE.WebGLRenderer( {  antialias: false, alpha: true });
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.domElement.style.width = rendererSizeHolder.width.percent + '%';
    renderer.domElement.style.height = rendererSizeHolder.height.percent + '%';
    renderer.setClearColor(0xffffff, 1);
    container.appendChild(renderer.domElement);

    maximumTextureSize = renderer.context.getParameter(renderer.context.MAX_TEXTURE_SIZE);
    // we have to take an power of 2 less
    maximumTextureSize /= 2;

    $canvas = $('canvas', $container);

    controls1 = new THREE.OrbitControls( camera, renderer.domElement );
    controls1.damping = 0.2;

    controls2 = new THREE.OrbitControls( cameraRTT, renderer.domElement );
    controls2.damping = 0.2;

    rendererContext = renderer.context;

    raycaster = new THREE.Raycaster();
}

function rotateBoxesX(radian) {
    rotationMatrix = new THREE.Matrix4().makeRotationX(radian);
    rotateBoxes(rotationMatrix);
}

function rotateBoxesY(radian) {
    rotationMatrix = new THREE.Matrix4().makeRotationY(radian);
    rotateBoxes(rotationMatrix);
}

function rotateBoxesZ(radian) {
    rotationMatrix = new THREE.Matrix4().makeRotationZ(radian);
    rotateBoxes(rotationMatrix);
}

function rotateBoxes(matrix) {
    backgroundBox.applyMatrix(rotationMatrix);
    frontBox.applyMatrix(rotationMatrix);
}

function translateBoxes(x, y, z) {
    translationMatrix = new THREE.Matrix4().makeTranslation(x, y, z);
    backgroundBox.applyMatrix(translationMatrix);
    frontBox.applyMatrix(translationMatrix);
}

function initSliders() {
    initLayerSliders();

    // init gray value slider
    GenericSlider.initSlider(
        slider = $( "#gray-slider" ),
        sliderInputs = $('input.gray'),
        minGray,
        maxGray,
        function(values) {
            $(document).trigger(
                'opacityBordersChanged',
                {
                    minGray: values[0],
                    maxGray : values[1]
                }
            );
        }
    );

    $('#gray-slider-container').on('controlsShowed', function() {
        var values = $("#gray-slider").slider('values');
        $(document).trigger('opacityBordersChanged', { minGray: values[0], maxGray: values[1] });
    });

    GenericSlider.initSimpleSlider(
        slider = $('#background-slider'),
        sliderInput = $('#background-input'),
        startVal = 255,
        0,
        255,
        function(value) {
            var colorFloat = calculateGrayFloat(value);
            renderer.setClearColor(
                new THREE.Color(colorFloat, colorFloat, colorFloat),
                1
            );
        }
    );
}

function initLayerSliders() {
    // init xlayer slider
    GenericSlider.initSlider(
        $( "#xlayer-slider" ),
        sliderInputs = $('input.xlayer'),
        currentVolumeDimension.xmin,
        currentVolumeDimension.xmax,
        function(values) {
            dimMin = currentVolumeDimension.xmin;
            dimMax = currentVolumeDimension.xmax;
            currentDimension.xmin = calculateLayerFloat(values[0], dimMin, dimMax);
            currentDimension.xmax = calculateLayerFloat(values[1], dimMin, dimMax);
            updateCubeLayers(currentDimension);
        },
        function() {
            values = Array(2);
            values[0] = calculateLayerInt(currentDimension.xmin, currentVolumeDimension.xmin, currentVolumeDimension.xmax );
            values[1] = calculateLayerInt(currentDimension.xmax, currentVolumeDimension.xmin, currentVolumeDimension.xmax );

            return values;
        }
    );
    // init ylayer slider
    GenericSlider.initSlider(
        $( "#ylayer-slider" ),
        sliderInputs = $('input.ylayer'),
        currentVolumeDimension.ymin,
        currentVolumeDimension.ymax,
        function(values) {
            dimMin = currentVolumeDimension.ymin;
            dimMax = currentVolumeDimension.ymax;
            currentDimension.ymin = calculateLayerFloat(values[0], dimMin, dimMax);
            currentDimension.ymax = calculateLayerFloat(values[1], dimMin, dimMax);
            updateCubeLayers(currentDimension);
        },
        function() {
            values = Array(2);
            values[0] = calculateLayerInt(currentDimension.ymin, currentVolumeDimension.ymin, currentVolumeDimension.ymax );
            values[1] = calculateLayerInt(currentDimension.ymax, currentVolumeDimension.ymin, currentVolumeDimension.ymax );

            return values;
        }
    );
    // init zlayer slider
    GenericSlider.initSlider(
        $( "#zlayer-slider" ),
        sliderInputs = $('input.zlayer'),
        currentVolumeDimension.zmin,
        currentVolumeDimension.zmax,
        function(values) {
            dimMin = currentVolumeDimension.zmin;
            dimMax = currentVolumeDimension.zmax;
            currentDimension.zmin = calculateLayerFloat(values[0], dimMin, dimMax),
                currentDimension.zmax = calculateLayerFloat(values[1], dimMin, dimMax);
            updateCubeLayers(currentDimension);
        },
        function() {
            values = Array(2);
            values[0] = calculateLayerInt(currentDimension.zmin, currentVolumeDimension.zmin, currentVolumeDimension.zmax );
            values[1] = calculateLayerInt(currentDimension.zmax, currentVolumeDimension.zmin, currentVolumeDimension.zmax );

            return values;
        }
    );
}

function repositionLayerSliders() {
    initLayerSliders();

    $.each($('.slider.layer'), function(index, value) {
        $(value).trigger('reposition');
    });
    updateCubeLayers(currentDimension);
}

var prevTime = Date.now();
var fps = 0;
var frames = 0;


function animate() {
    requestAnimationFrame( animate );


    $container.trigger('animation');

    var numberOfTextures = Object.keys(textures).length;
    var now = Date.now();
    frames++;

    if(now > prevTime + 1000) {
        fps = (frames * 1000) / (now - prevTime);
        if(adjustSteps) {
            if(fps < 10) {
                stepHelper.decreaseSteps();
            } else if(fps > 15) {
                stepHelper.increaseSteps();
            }
        }

        prevTime = now;
        frames = 0;
    }

    if(playFrames && numberOfTextures > 1) {

        var timeStamp = (new Date()).getTime();
        if(timeStamp - textureTimestamp > 400) {
            currentTexture++;
            if(currentTexture >= numberOfTextures) {
                currentTexture = 0;
            }

            updateTexture();
            textureTimestamp = timeStamp;
            updateFrameControls();
        }
    }

    if(nextCubeDeletionTimeStamp == null && intersectCubesTimeStamps.length != 0) {
        nextCubeDeletionTimeStamp = intersectCubesTimeStamps.shift();
    }

    if((Date.now() - nextCubeDeletionTimeStamp) > 1500) {
        cubeToDelete = intersectCubes.shift();
        scene.remove(cubeToDelete);

        nextCubeDeletionTimeStamp = null;
    }

    if(transferHelper.transferFunctionChanged()) {
        var transfer = new THREE.Texture(transferHelper.getCurrentTransferFunction());
        transfer.needsUpdate = true;
        materialScreen.uniforms.tTransfer.value = transfer;
    }

    cameraPoint = camera.position.clone();
    overviewHelper.updateCameraPosition(cameraPoint);

    stats.update();
    controls1.update();
    controls2.update();

    render();
    if(saveImage) {
        $('#save-canvas').trigger('click', { source: 'animate-function', imageUrl: renderer.domElement.toDataURL() });
        saveImage = false;
    }


}

function updateTexture(textures) {
    if(textures == undefined || textures == null) {
        textures = getCurrentTexture();
    }
    $.each(textures, function(index, texture) {
        value.needsUpdate = true;
    });

    materialScreen.uniforms.tvSlices.value = textures;
}

function render() {
    renderer.clear();

    renderer.context.clearDepth(-50.0);
    renderer.context.depthFunc(renderer.context.GEQUAL);
    renderer.render(sceneRTT, cameraRTT, rtTexture, true);

    renderer.context.clearDepth(50.0);
    renderer.context.depthFunc(renderer.context.LEQUAL);
    renderer.render(scene, camera);

    overviewHelper.render();
}


function updateCubeLayers(geometryDimension) {
    var geometry = geometryHelper.createBoxGeometry(geometryDimension);
    var colorArray = geometry.attributes.frontColor.array,
        positionArray = geometry.attributes.position.array;

    frontBox.geometry.attributes.frontColor.array = colorArray;
    frontBox.geometry.attributes.frontColor.needsUpdate = true;
    frontBox.geometry.attributes.position.array = positionArray;
    frontBox.geometry.attributes.position.needsUpdate = true;
}

// invert function of calculateLayerFloat
function calculateLayerInt(position, dimMin, dimMax) {
    if(position <= 0.005) {
        return dimMin;
    }
    if(position >= 0.995) {
        return dimMax;
    }
    value = Math.round(position * (dimMax - dimMin) + dimMin);
    return value;
}

// calculate the float value for a layer input integer
// 150 of [0, 299] will be 0.5
function calculateLayerFloat(value, dimMin, dimMax) {
    var floatVal = (value - dimMin) / (dimMax - dimMin);

    if (floatVal == 0) {
        return 0.005;
    }
    if (floatVal == 1) {
        return 0.995;
    }

    return floatVal;
}

function calculateGrayFloat(value) {
    return value / 255.0;
}

function distance (v1, v2) {
    dx = v1.x - v2.x;
    dy = v1.y - v2.y;
    dz = v1.z - v2.z;

    return Math.sqrt(dx*dx+dy*dy+dz*dz);
}

function calculateWidthHeight() {
    downScaleFactor = 0.66;
    valueholder = {
        height: {},
        width: {}
    }
    containerHeight = $container.height();
    volumeInfoHeight = $('#volume-information').height();
    headerHeight = $('header').height();
    valueholder.height.px = (containerHeight - volumeInfoHeight) * downScaleFactor;
    volumeInfoHeightPercent = Math.floor(volumeInfoHeight / containerHeight * 100);
    valueholder.height.percent = 100 - volumeInfoHeightPercent;

    valueholder.width.px = $container.width() * downScaleFactor;
    valueholder.width.percent = 100;

    return valueholder;
}

function hideBottomControlsContainer() {
    var bottomControlsContainer = $('div#bottom-controls-container'),
        bottomControls = $('div#bottom-controls'),
        filledById = bottomControls.attr('filledBy'),
        filledBy = $('#' + filledById);

    // writing data back to original, because append MOVES the children
    if(filledBy.length == 1) {
        filledBy = $(filledBy[0]);
        filledByControlHolder = filledBy.children('.control-holder')[0];
        $(filledByControlHolder).append(bottomControls.children());
    }

    bottomControls.attr('filledBy', '');
    bottomControlsContainer.addClass('hidden');

    return filledById;
}

function addResolutionLinks() {
    console.log('addResolutionLinks');
    $resSpan.text(config.defaultSize);
    textureSizes = config.textureSizes;
    textureSizes.forEach(function(size) {
        if(size > maximumTextureSize) {
            return;
        }

        href = size == config.defaultSize ? '' : 'href="#"';

        $resolutionLinks.append('<a '+href+' class="res-link" data="'+size+'">'+size+'</a>  ');
    });
}