volume-visualization/static/js/threeJsHelper/dist/threeJsHelper.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);

        statsHelper = new StatsHelper($containerHeader.children('#container-stats'));

        // 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 = IPE.util.buildUrl('volumes/' + volumeId + '/');
        infoUrl = volumeUrl + 'texture-info/';
        spriteUrl = volumeUrl + 'sprite/';

        waitDiv = $('div#wait');

        helper.initializeShaders(IPE.util.buildUrl('static/shaders/three-shader.vert'), function(script) {
            vertexShader = script
        });
        helper.initializeShaders(IPE.util.buildUrl('static/shaders/three-shader-simple.frag'), function(script) {
            fragmentSimleShader = script
        });
        helper.initializeShaders(IPE.util.buildUrl('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, whileInit);
        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() {
    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, currentVolumeDimension);

    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);
    rotateBoxesX(Math.PI / -2);
    //rotateBoxesY(Math.PI);
    //rotateBoxesZ(Math.PI);

    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);

    statsHelper.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, currentVolumeDimension);
    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() {
    $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>  ');
    });
}
;var volumeId;
var stats, container, $container, containerHeader, $containerHeader, $canvas, cameraRTT, camera, sceneRTT, scene, renderer, controls, controls2;
var maximumTextureSize;
var containerOverview, $containerOverview;
var $resSpan;
var $resolutionLinks;
var raycaster;
var width, height;
var steps, adjustSteps;
var rtTexture, material;

var backgroundBox, frontBox;
var objectsToIntersect = [];
var minGray = 5, maxGray = 255;
var originalDimension,
    zoomedDimension,
    currentDimension,
    originalVolumeDimension,
    zoomedVolumeDimension,
    currentVolumeDimension,
    volumeUrl,
    infoUrl,
    spriteUrl,
    imgInfo = null,
    textureInfo = null,
    originalSizeArray = Array(3),
    zoomedInfo,
    rotationMatrix;

var textures = {},
    currentTexture = 0,
    useDownloadedTextureImmediately = false,
    textureTimestamp = (new Date()).getTime(),
    playFrames = false,
    currentMaxFrame = 0;

var framesDownloaded = 0,
    cachedImages = {};

var vertexShader = null,
    fragmentSimleShader = null,
    fragmentShader = null;

var intersectCubes = [],
    intersectCubesTimeStamps = []
    nextCubeDeletionTimeStamp = null,
    zoomedIn = false;

var helper,
    geometryHelper,
    stepHelper,
    overviewHelper,
    transferHelper,
    zoomHelper,
    opacityPlotter,
    statsHelper;

var waitDiv;
var saveImage = false;

// prefetch first image to cache it
var progressContainer,
    imageProgress,
    progressSpan;

var Globals = (function() {
    return {
        init: function() {
            originalDimension = new GeometryDimension();
            zoomedDimension = new GeometryDimension();
            currentDimension = originalDimension;
            originalVolumeDimension = new VolumeDimension();
            zoomedVolumeDimension = new VolumeDimension();
            currentVolumeDimension = originalVolumeDimension;
            $resolutionLinks = $('#resolution-links');
        }
    }
}());
;var GeometryHelper = function() {
    return {
        createBoxGeometry: function(dimension, volumeDimension) {
            var vertexPos = [
                //front face first
                [dimension.xmin, dimension.ymin, dimension.zmax],
                [dimension.xmax, dimension.ymin, dimension.zmax],
                [dimension.xmax, dimension.ymax, dimension.zmax],
                //front face second
                [dimension.xmin, dimension.ymin, dimension.zmax],
                [dimension.xmax, dimension.ymax, dimension.zmax],
                [dimension.xmin, dimension.ymax, dimension.zmax],

                // back face first
                [dimension.xmin, dimension.ymin, dimension.zmin],
                [dimension.xmin, dimension.ymax, dimension.zmin],
                [dimension.xmax, dimension.ymax, dimension.zmin],
                // back face second
                [dimension.xmin, dimension.ymin, dimension.zmin],
                [dimension.xmax, dimension.ymax, dimension.zmin],
                [dimension.xmax, dimension.ymin, dimension.zmin],

                // top face first
                [dimension.xmin, dimension.ymax, dimension.zmin],
                [dimension.xmin, dimension.ymax, dimension.zmax],
                [dimension.xmax, dimension.ymax, dimension.zmax],
                // top face second
                [dimension.xmin, dimension.ymax, dimension.zmin],
                [dimension.xmax, dimension.ymax, dimension.zmax],
                [dimension.xmax, dimension.ymax, dimension.zmin],

                // bottom face first
                [dimension.xmin, dimension.ymin, dimension.zmin],
                [dimension.xmax, dimension.ymin, dimension.zmin],
                [dimension.xmax, dimension.ymin, dimension.zmax],
                // bottom face second
                [dimension.xmin, dimension.ymin, dimension.zmin],
                [dimension.xmax, dimension.ymin, dimension.zmax],
                [dimension.xmin, dimension.ymin, dimension.zmax],

                // right face first
                [dimension.xmax, dimension.ymin, dimension.zmin],
                [dimension.xmax, dimension.ymax, dimension.zmin],
                [dimension.xmax, dimension.ymax, dimension.zmax],
                // right face second
                [dimension.xmax, dimension.ymin, dimension.zmin],
                [dimension.xmax, dimension.ymax, dimension.zmax],
                [dimension.xmax, dimension.ymin, dimension.zmax],

                // left face first
                [dimension.xmin, dimension.ymin, dimension.zmin],
                [dimension.xmin, dimension.ymin, dimension.zmax],
                [dimension.xmin, dimension.ymax, dimension.zmax],
                // left face second
                [dimension.xmin, dimension.ymin, dimension.zmin],
                [dimension.xmin, dimension.ymax, dimension.zmax],
                [dimension.xmin, dimension.ymax, dimension.zmin]
            ];

            var positions = [];
            var colors = [];

            for(var i = 0; i < vertexPos.length; i++) {
                var backCounter = vertexPos.length - 1 - i,
                    x = vertexPos[backCounter][0],
                    y = vertexPos[backCounter][1],
                    z = vertexPos[backCounter][2];

                positions.push(x);
                positions.push(y);
                positions.push(z * volumeDimension.getZStretchFactor());

                colors.push(x);
                colors.push(y);
                colors.push(z);
                colors.push(1.0);
            }

            var geometry = new THREE.BufferGeometry();
            var bufferPositions = new Float32Array(positions);
            geometry.addAttribute( 'position', new THREE.BufferAttribute( bufferPositions, 3 ) );
            geometry.addAttribute( 'frontColor', new THREE.BufferAttribute(new Float32Array(colors), 4));
            geometry.computeBoundingSphere();

            return geometry;
        }
    }
}

var GeometryDimension = function() {
    this.xmin = 0.005;
    this.xmax = 0.995;
    this.ymin = 0.005;
    this.ymax = 0.995;
    this.zmin = 0.005;
    this.zmax = 0.995;
}

var VolumeDimension = function() {
    this.xmin;
    this.xmax;
    this.ymin;
    this.ymax;
    this.zmin;
    this.zmax;
    return {
        getZStretchFactor: function() {
            return (this.zmax - this.zmin + 1) / (this.xmax - this.xmin);
        }
    }
}
;var Helper = function() {
    var messagePopup = $('#popup'),
        popupVisible = messagePopup.hasClass('hidden'),
        progressContainer = $('#progress-container'),
        imageProgress = $('#image-progress'),
        progressSpan = $('#texturePath');

    return {
        initializeShaders: function(url, callback) {
            $.ajax({
                url: url,
                error: function() {
                    console.error('failed to load shader file from: ' + url);
                },
                success: callback
            });
        },

        downloadImage: function (texturePath, textureIndex, spriteIndex, whileInit) {
            me = this;
            onProgressHolder = me.showProgress(texturePath);
            if(!texturePath.endsWith('/')) {
                texturePath += '/';
            }

            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open('GET', texturePath, true);
            xmlHttp.onprogress = onProgressHolder.onProgressFunction;
            xmlHttp.onload = function(e) {
                var blob = new Blob([xmlHttp.response], {
                    type: this.getResponseHeader('content-type')
                });

                var blobSrc = window.URL.createObjectURL(blob);

                var image = new Image();
                var texture = new THREE.Texture(image);

                image.onload = function() {
                    me.hideProgress();

                    texture.needsUpdate = true;
                    var params = {
                        textureIndex: textureIndex,
                        spriteIndex: spriteIndex,
                        texture: texture
                    };

                    if(textureIndex == 0 && whileInit) {
                        $(document).trigger('firstImageOnLoad', params);
                    } else {
                        $(document).trigger('imageOnLoad', params);
                    }
                }

                image.src = blobSrc;
            };

            xmlHttp.responseType = 'blob';
            xmlHttp.send();
        },

        showProgress: function(texturePath) {
            progressContainer.removeClass('hidden');
            progressSpan.text(texturePath);

            return {
                onProgressFunction: function(e) {
                    if (e.lengthComputable) {
                        value = Math.floor(e.loaded / e.total * 100);
                        imageProgress.val(value);
                    }
                }
            }
        },

        hideProgress: function() {
            imageProgress.val(0);
            progressSpan.text('');
            progressContainer.addClass('hidden');
        },

        displayMessage: function(message, fadeOutAutomatically, callback, timeout) {
            var me = this;
            messagePopup.html(message);
            messagePopup.show();

            if(fadeOutAutomatically) {
                this.fadeoutMessage(callback, timeout);
            }
        },

        fadeoutMessage: function(callback, timeout) {
            if(timeout == undefined) {
                timeout = 0;
            }

            setTimeout(function() {
                messagePopup.fadeOut(400, function() {
                    $(this).html('');
                    if(callback) {
                        callback();
                    }
                });
            }, timeout);

        }


    };
}
;var OpacityPlotter = function() {
    // we have 255 colors
    var coordinateLength = 255;

    // set with respect on plotter height
    var height = 40;

    // array for holding the x coordinates
    var coordinates = Array(coordinateLength);

    // array for holding the y coordinates values elementOf [0, height]
    var linePosition = Array(coordinateLength);

    // array holding the resulting opacities, that will be generated
    // of line position, values elementof [0, 255]
    var opacities = Array(coordinateLength);

    for(counter = 0; counter < coordinateLength; counter++) {
        coordinates[counter] = counter;
        linePosition[counter] = 0;
        opacities[counter] = 255;
    }

    var stage = new Kinetic.Stage({
        container : 'opacity-plot',
        width : coordinateLength,
        height: height
    });

    var layer = new Kinetic.Layer();
    var rect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: stage.getWidth(),
        height: stage.getHeight(),
        fill: '#cccccc'
    });
    layer.add(rect);

    var spline = new Kinetic.Line({
        points: getResultingPoints(),
        stroke: 'red',
        strokeWidth: 3,
        lineCap: 'round'
    });
    layer.add(spline);

    stage.add(layer);

    stage.on("mousedown", function() {
        processEvent();
    });

    stage.on("mousemove", function(e) {
        if(e.evt.which == 1) {
            processEvent();
        }
    });

    $('#transfer-function-definition').on('controlsShowed', function() {
        populateOpacities();
    });

    $('input#opacity-visible').on('click', function() {
        setToFixedValue(255);
    });

    $('input#opacity-invisible').on('click', function() {
        setToFixedValue(0);
    });

    function setToFixedValue(value) {
        var opacityValue = value;
        var yValue = height - ((value / 255) * height)
        for(counter = 0; counter < opacities.length; counter++) {
            opacities[counter] = opacityValue ;
            linePosition[counter] = yValue;
        }
        populateOpacities();

        spline.setPoints(getResultingPoints());
        layer.draw();
    }

    function populateOpacities() {
        $(document).trigger('opacityChanged', { opacities: opacities.slice() });
    }

    function processEvent() {
        var mousePosition = stage.getPointerPosition();
        calculateOpacities(mousePosition);

        spline.setPoints(getResultingPoints());
        layer.draw();
    }

    function calculateOpacities(mousePosition) {
        // Set area of click to this value
        var xMin = (mousePosition.x - 2 >= 0) ? mousePosition.x - 2 : 0;
        var xMax = (mousePosition.x + 2 <= 255) ? mousePosition.x + 2 : 255;

        var opacityValue = (height - mousePosition.y) / height;
        opacityValue *= 255;

        for(counter = xMin; counter <= xMax; counter++) {
            linePosition[counter] = mousePosition.y;
            opacities[counter] = opacityValue;
        }

        populateOpacities();
    }


    function getResultingPoints() {
        return combineArrays(coordinates, linePosition);
    }

    function combineArrays(array1, array2) {
        return $.map(array1, function(v, i) { return [v, array2[i]]; });
    }
}
;var StatsHelper = function(parentElement) {
    if(IPE.environment != 'dev') {
        // fill parentElement with emptyness
        parentElement.append('&nbsp;');
        // we don't want to do display anything
        // in production
        return {
            update: function() {}
        };

    }

    var stats = new Stats();
    var parentElement = parentElement;
    parentElement.append(stats.domElement);

    return {
        update: function() {
            stats.update();
        }
    }

};
;var StepHelper = function() {
    // default is the step 100
    currentStepIndex = 2;
    // steps just defined
    availableSteps = [10, 20, 50, 80, 100, 150, 200];

    return {
        decreaseSteps: function() {
            var currentStepIndex = this.determineCurrentStepIndex();

            if(currentStepIndex > 0) {
                this.updateStepValue(availableSteps[currentStepIndex - 1], true);
            }
        },

        increaseSteps: function() {
            var currentStepIndex = this.determineCurrentStepIndex();

            if(currentStepIndex > -1 && currentStepIndex < availableSteps.length - 1) {
                this.updateStepValue(availableSteps[currentStepIndex + 1], true);
            }
        },

        determineCurrentStepIndex: function() {
            var minDeviation = null,
                minDeviationIndex;

            // first we have to find an appropiate predefined stepValue for input stepvalue
            for(var index = 0; index < availableSteps.length; index++) {
                deviation = Math.abs(steps - availableSteps[index]);
                if(minDeviation == null || deviation < minDeviation) {
                    minDeviation = deviation;
                    minDeviationIndex = index;
                }
            }

            if(minDeviation !== null) {
                return minDeviationIndex;
            } else {
                return -1;
            }
        },

        updateStepValue: function(stepValue, updateInputField) {
            steps = stepValue;
            materialScreen.uniforms.steps.value = steps;
            if(updateInputField) {
                $('#steps').val(stepValue);
            }
        },

        initStepControls: function() {
            var me = this,
                stepsInput = $('#steps'),
                stepsAdjustInput = $('#steps-adjust');

            steps = stepsInput.val();
            stepsInput.change(function() {
                steps = stepsInput.val();
                me.updateStepValue(steps, false);
            });

            adjustSteps = stepsAdjustInput.is(':checked');

            stepsAdjustInput.change(function() {
                adjustSteps = $(this).is(':checked');
                if(adjustSteps) {
                    stepsInput.prop('disabled', true);
                } else {
                    stepsInput.prop('disabled', false);
                }
            });
        }

    };
};
;var TransferHelper = function() {
    var me = this,
        changed = false,
        canvas = document.getElementById('transfer-function'),
        $canvas = $(canvas),
        context = canvas.getContext('2d'),
        hiddenCanvas = document.getElementById('hidden-transfer'),
        hiddenContext = hiddenCanvas.getContext('2d'),
        transferSpanHolder = $('#transfer-span-holder'),
        transfer = $('#transfer'),
        disabled = true,
        handles = $('span.transfer'),
        $standardTf = $('img#standard-tf').get(0),
        offsetLeft = {
            blue: 0,
            turquois: 0.25,
            green: 0.5,
            orange: 0.75,
            red: 1
        },
        colorCodes = {
            blue: '#0000FF',
            turquois: '#00FFFF',
            green: '#00FF00',
            orange: '#FFFF00',
            red: '#FF0000'
        },
        opacities = Array(255);

    //black values are disabled defaultly
    opacities[0] = 0;
    for(counter = 0; counter < opacities.length; counter++) {
        opacities[counter] = 255;
        if (counter <= minGray) {
            opacities[counter] = 0;
        }
    }


    $('input#toggle-transfer').on('click', function() {
        if(disabled) {
            enableTransferFunction();
        } else {
            disableTransferFunction();
        }
    });

    var getOffsetLeft = function() {
        return transfer.offset().left - transfer.parent().offset().left;
    }

    var removePxOffString = function(str) {
        return parseInt(str.replace('px', ''));
    }

    var updateGradient = function() {
        // Create gradient

        var grd = context.createLinearGradient(0,0,255,0);

        $.each(handles, function(index, value) {
            var $value = $(value),
                colorName = $value.attr('color'),
                colorOffsetLeft = offsetLeft[colorName],
                colorCode = colorCodes[colorName];

            grd.addColorStop(colorOffsetLeft, colorCode);
        });
        // Fill with gradient
        context.fillStyle = grd;
        context.fillRect(0,0,255, 10);

        applyOpacities();

        changed = true;
    };

    var applyOpacities = function() {
        var imageData = context.getImageData(0, 0, 255, 1),
            data = imageData.data;

        for(counter = 0; counter < opacities.length; counter++) {
            data[(counter * 4) + 3] = opacities[counter];
        }

        hiddenContext.putImageData(imageData, 0, 0, 0, 0, 255, 1);
    }

    var updateHandlePosition = function(element) {
        var colorLeft = removePxOffString($(element).css('left')) - getOffsetLeft(),
            colorOffsetLeft = colorLeft / $canvas.width(),
            colorName = $(element).attr('color');

        if(colorOffsetLeft > 1.0) {
            colorOffsetLeft = 1.0;
        }
        if(colorOffsetLeft < 0.0) {
            colorOffsetLeft = 0.0;
        }
        offsetLeft[colorName] = colorOffsetLeft;
        updateGradient();
    };

    var enableTransferFunction = function() {
        $.each(handles, function(index, value) {
            var $value = $(value),
                colorName = $value.attr('color'),
                colorOffsetLeft = offsetLeft[colorName],
                colorLeft = getOffsetLeft() + ($canvas.width() * colorOffsetLeft),
                colorCode = colorCodes[colorName];

            $value.css({left: colorLeft, 'background-color': colorCode });
            $(value).draggable({
                containment: '#transfer-span-holder',
                scroll: false,
                axis: 'x',
                cursor: "crosshair",
                stop: function() {
                    updateHandlePosition(this);
                },
                drag: function() {
                    updateHandlePosition(this);
                }
            });
        });

        showHandles();
        updateGradient();
        disabled = false;
    };

    var disableTransferFunction = function() {
        context.drawImage($standardTf, 0, 0, 255, 10);
        applyOpacities();
        hideHandles();
        disabled = true;
        changed = true;
    };

    var showHandles = function() {
        $.each(handles, function(index, value) {
            $(value).removeClass('hidden');
        });
    };

    var hideHandles = function() {
        $.each(handles, function(index, value) {
            $(value).addClass('hidden');
        });
    };


    //canvas.setAttribute('width', $canvas.width());
    //canvas.setAttribute('height', $canvas.height());
    disableTransferFunction();

    $(document).on('opacityChanged', function(e, params) {
        if(params != undefined && params.opacities != undefined) {
            opacities = params.opacities;
            applyOpacities();
            changed = true;
        }
    });

    $(document).on('opacityBordersChanged', function(e, params) {
        var minGray = 0,
            maxGray = 255;

        if(params != undefined && params.minGray != undefined && params.maxGray != undefined) {
            minGray = params.minGray;
            maxGray = params.maxGray;

            for(counter = 0; counter < 255; counter++) {
                var opacity = 255;
                if(counter < minGray || counter > maxGray) {
                    opacity = 1;
                }
                opacities[counter] = opacity;
            }

            applyOpacities();
            changed = true;
        }
    });

    return {
        transferFunctionChanged : function() {
            return changed;
        },

        getCurrentTransferFunction : function() {
            changed = false;
            return hiddenContext.getImageData(0, 0, 255, 1);
        }
    };
}
;var OverviewHelper = function() {
    var sceneOveriew, rendererOverview, cameraOverview, innerCubeOverview;

    //private method
    var addInnerCubeOverView = function(x, y, z) {
        var innerCubeGeometry = new THREE.BoxGeometry( x, y, z );
        var innerCubeMaterial = new THREE.MeshBasicMaterial( {color: 0xaaaaaa} );
        innerCubeOverview = new THREE.Mesh( innerCubeGeometry, innerCubeMaterial );
        sceneOverview.add( innerCubeOverview );
    }

    var initiateEventListener = function(containerOverviewElement) {
        // change overview box
        $(document).on('zoomActionFinished', function(e, params) {

            zoomedIn = params.zoomAction == 'zoomIn' || zoomedInfo != null;
            sceneOverview.remove(innerCubeOverview);

            if(zoomedIn) {
                xWidth = zoomedInfo.dimension.xywidth / textureInfo.originalSize.sizex;
                yWidth = zoomedInfo.dimension.xywidth / textureInfo.originalSize.sizey;
                zWidth = zoomedInfo.numberOfSlices / textureInfo.originalSize.sizez;

                xOffset = zoomedInfo.dimension.xmin / textureInfo.originalSize.sizex;
                yOffset = zoomedInfo.dimension.ymin / textureInfo.originalSize.sizey;
                zOffset = zoomedInfo.dimension.zmin / textureInfo.originalSize.sizez;

                addInnerCubeOverView(xWidth, yWidth, zWidth);

                // main cube was rotated around x axis, so have to swap y and z coordinates
                // for the overview
                innerCubeOverview.position.x = -0.5 + xOffset + xWidth / 2;
                innerCubeOverview.position.y = (-0.5 + zOffset + zWidth / 2);
                innerCubeOverview.position.z = (-0.5 + yOffset + yWidth / 2) * -1;
                //innerCubeOverview.applyMatrix((new THREE.Matrix4()).makeRotationX(Math.PI / -2))
            } else {
                addInnerCubeOverView(1,1,1);
            }
        });
        var headerHeight = $('header').height();
        $(window).on('scroll', function(e) {
            $containerOverviewElement = $(containerOverviewElement)
            if($(this).scrollTop() >= headerHeight) {
                $containerOverviewElement.css('position', 'relative');
                $containerOverviewElement.css('top', $(this).scrollTop() - headerHeight);
            } else {
                $containerOverviewElement.css('top', 0);
            }
        });
    }

    var addTextsToScene = function() {
        var shapeParameters = {font: 'helvetiker', size: 0.2, height: 0.05},
            shape = new THREE.TextGeometry("0", shapeParameters),
            wrapper = new THREE.MeshBasicMaterial({color: 0x000000}),
            words = new THREE.Mesh(shape, wrapper);

        words.position.x = -0.6;
        words.position.y = -0.6;
        words.position.z = 0.52;
        sceneOverview.add(words);
    }

    var addCubeEdges = function() {
        // fix for cube
        var numberOfEdges = 12;
        var xColorEdge = new THREE.Color(1,0,0);
        var yColorEdge = new THREE.Color(0,1,0);
        var zColorEdge = new THREE.Color(0,0,1);

        var geometry = new THREE.BufferGeometry();
        var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });

        var colors = new Float32Array( numberOfEdges * 2 * 3 );
        var positions = new Float32Array([
            // edges in x direction
            // front face
            -0.5, -0.5, -0.5,  0.5, -0.5, -0.5,
            -0.5,  0.5, -0.5,  0.5,  0.5, -0.5,
            // back face
            -0.5, -0.5,  0.5,  0.5, -0.5,  0.5,
            -0.5,  0.5,  0.5,  0.5,  0.5,  0.5,

            // edges in y direction
            // front face
            -0.5, -0.5, -0.5, -0.5,  0.5, -0.5,
             0.5, -0.5, -0.5,  0.5,  0.5, -0.5,
            // back face
            -0.5, -0.5,  0.5, -0.5,  0.5,  0.5,
             0.5, -0.5,  0.5,  0.5,  0.5,  0.5,

            // edges in z direction
            // left side
            -0.5, -0.5, -0.5, -0.5, -0.5,  0.5,
            -0.5,  0.5, -0.5, -0.5,  0.5,  0.5,
            // right side
             0.5, -0.5, -0.5,  0.5, -0.5,  0.5,
             0.5,  0.5, -0.5,  0.5,  0.5,  0.5
        ]);

        for(edgeCounter = 0; edgeCounter < 12 * 2; edgeCounter++) {
            var colorToUse = null
            if(edgeCounter <= 7) {
                colorToUse = xColorEdge;
            } else if(edgeCounter <= 15) {
                colorToUse = zColorEdge;
            } else {
                colorToUse = yColorEdge;
            }

            colors[edgeCounter * 3 + 0] = colorToUse.r;
            colors[edgeCounter * 3 + 1] = colorToUse.g;
            colors[edgeCounter * 3 + 2] = colorToUse.b;
        }

        geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
        geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );

        var lines = new THREE.Line( geometry, material, THREE.LinePieces );
        sceneOverview.add( lines );
    }

    return {
        initOverview: function(containerOverviewElement) {
            sceneOverview = new THREE.Scene();
            cameraOverview = new THREE.PerspectiveCamera( 45, 150 / 150, .1, 1000 );
            cameraOverview.position.z = 2;

            var cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
            var cubeMaterial = new THREE.MeshBasicMaterial( {color: 0x000000} );
            var cubeOverview = new THREE.Mesh( cubeGeometry, cubeMaterial );
            var edgesHelper = new THREE.EdgesHelper(cubeOverview, 0x000000);
            edgesHelper.material.linewidth = 2;
            //sceneOverview.add( edgesHelper );

            addInnerCubeOverView(1,1,1);
            addCubeEdges();
            addTextsToScene();

            rendererOverview = new THREE.WebGLRenderer();
            rendererOverview.setSize(200, 200);
            rendererOverview.setClearColor(0xffffff, 1);
            containerOverviewElement.appendChild(rendererOverview.domElement);

            initiateEventListener(containerOverviewElement);
        },

        updateCameraPosition: function(position) {
            cameraPoint.normalize().multiplyScalar(4);
            cameraPoint = sceneOverview.position.clone().add(cameraPoint);

            cameraOverview.position.x = cameraPoint.x;
            cameraOverview.position.y = cameraPoint.y;
            cameraOverview.position.z = cameraPoint.z;
            cameraOverview.lookAt(sceneOverview.position);
        },

        render: function() {

            rendererOverview.render(sceneOverview, cameraOverview);
        }
    }
}
;var VolumeFace = function(orientation, direction) {
    this.orientation = orientation;
    this.direction = direction;
}

VolumeFace.prototype = {
    constructor: VolumeFace,
    orientation: 0,
    direction: 0,

    getAxisOfNaviation: function() {
        var axis = {
                plane: {
                    ver: null,
                    hor: null
                },
                slider: null
            };

        if(this.orientation == VolumeFaceOrientation.XY) {
            axis.plane.ver = new Orientation(Axis.Y);
            axis.plane.hor = new Orientation(Axis.X);
            axis.slider = new Orientation(Axis.Z);
        } else if(this.orientation == VolumeFaceOrientation.YZ) {
            axis.plane.ver = new Orientation(Axis.Z);
            axis.plane.hor = new Orientation(Axis.Y);
            axis.slider = new Orientation(Axis.X);
        } else if(this.orientation == VolumeFaceOrientation.XZ) {
            axis.plane.ver = new Orientation(Axis.Z);
            axis.plane.hor = new Orientation(Axis.X);
            axis.slider = new Orientation(Axis.Y);
        }

        return axis;
    },

    getIdentifier: function() {
        return this.orientation + '-' + this.direction;
    }

};

var VolumeFaceOrientation = {
    XY: 0,
    XZ: 1,
    YZ: 2
}

var VolumeFaceDirection = {
    FRONT: 0,
    BACK: 1
}

function determineVolumeFace(cubeFaceNormal) {
    var orientation, direction;
    if(cubeFaceNormal.x != 0) {
        orientation = VolumeFaceOrientation.YZ;
        direction = determineFaceOrientation(cubeFaceNormal.x);
    } else if(cubeFaceNormal.y != 0) {
        orientation = VolumeFaceOrientation.XZ;
        direction = determineFaceOrientation(cubeFaceNormal.y);
    } else if(cubeFaceNormal.z != 0) {
        orientation = VolumeFaceOrientation.XY;
        direction = determineFaceOrientation(cubeFaceNormal.z);
    }
    return new VolumeFace(orientation, direction);
}

function determineFaceOrientation(normalComp) {
    return normalComp > 0 ? VolumeFaceDirection.FRONT : VolumeFaceDirection.BACK;
}


function isFrontFace(orientation, direction) {
    return orientation == VolumeFaceOrientation.XY
           && direction == VolumeFaceDirection.FRONT;
}

function isBackFace(orientation, direction) {
    return orientation == VolumeFaceOrientation.XY
           && direction == VolumeFaceDirection.BACK;
}

function isLeftFace(orientation, direction) {
    return orientation == VolumeFaceOrientation.YZ
           && direction == VolumeFaceDirection.FRONT;
}

function isRightFace(orientation, direction) {
    return orientation == VolumeFaceOrientation.YZ
           && direction == VolumeFaceDirection.BACK;
}

function isTopFace(orientation, direction) {
    return orientation == VolumeFaceOrientation.XZ
           && direction == VolumeFaceDirection.FRONT;
}

function isBottomFace(orientation, direction) {
    return orientation == VolumeFaceOrientation.XZ
           && direction == VolumeFaceDirection.BACK;
}
;var ZoomHelper = function() {
    var navigationPlaneHorLabel = $('#navigation-plane-hor-label'),
        navigationPlaneVerLabel = $('#navigation-plane-ver-label'),
        navigationSliderLabel = $('#navigation-slider-label'),
        zoomStatus = $('#zoom-status'),
        zoomInButton = $('input#zoomin'),
        zoomOutButton = $('input#zoomout'),
        navigationPlane = $('div#navigation-plane'),
        navigationPlaneParent = navigationPlane.parent(),
        navigationSlider = $('div#navigation-slider'),
        navigationSliderParent = navigationSlider.parent(),
        displayTimestamp = null,
        planeOrientation = {
            ver: new Orientation(Axis.Y, OffsetTo.LEFT),
            hor: new Orientation(Axis.X, OffsetTo.TOP),
            direction: VolumeFaceDirection.BACK,
            orientation: VolumeFaceOrientation.XY
        },
        sliderOrientation = {axis: new Orientation(Axis.Z, OffsetTo.TOP) },
        zoomedIn,
        zoomedInfoArray = {
            dimension: Array(3),
            offset: Array(3)
        },
        oldZoomedInfos = [];

    var lastExecutionTime = Date.now();
    // adjust navigation related navigations
    $container.on('animation', function() {
        determineAxisLabels();
        determinePlanePosition();
        determineSliderPosition();
    });

    // one has to press ctrl AND alt while clicking
    $container.on('click', 'canvas', function(event){
        event.stopPropagation();
        event.preventDefault();

        // keyboard shortcut activated or button zoom in pressed before?
        if((event.ctrlKey == false || event.altKey == false)
           && !zoomInActivated) {
            return;
        }

        var mouseX = ( (event.clientX - $canvas.offset().left)  / ($canvas.width())  ) * 2 - 1,
            mouseY = - ( (event.clientY - $canvas.offset().top) / ($canvas.height()) ) * 2 + 1;

        var vector = new THREE.Vector3( mouseX, mouseY, camera.near);

        vector = vector.unproject( camera );

        var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

        var intersects = raycaster.intersectObjects( [frontBox] );

        if(intersects.length > 0) {
            if(!handleZoomStatus(true)) {
                return false;
            }

            var intersect = intersects[0],
                point = intersect.point;

            var geometry = new THREE.BoxGeometry( 0.1, 0.1, 0.1 );

            var material = new THREE.MeshBasicMaterial( {
                color: new THREE.Color( 0xaaaaaa ),
                opacity: 0.3
            });

            mesh = new THREE.Mesh( geometry, material );
            mesh.position.x = point.x;
            mesh.position.y = point.y;
            mesh.position.z = point.z;
            scene.add(mesh);
            intersectCubes[intersectCubes.length] = mesh;
            intersectCubesTimeStamps[intersectCubesTimeStamps.length] = Date.now();

            var realPoint = point.clone();
            getSubvolume(point, false, 'zoomIn', false);
        }


    });

    function getSubvolume(realPoint, alreadyTranslated, zoomAction, sameDepth, fromDraggable) {
        if(alreadyTranslated == undefined || !alreadyTranslated) {
            realPoint = realPoint.applyMatrix4((new THREE.Matrix4).makeRotationX(Math.PI / -2));
            // retranslate the point into original position beginning from 0,0,0
            realPoint.add(new THREE.Vector3(0.5, 0.5, 0.5));
        }

        volumePointArray = realPoint.toArray();

        var processingUrl = IPE.util.buildUrl('volumes/' + volumeId + '/processing/sub/');
        $.each(volumePointArray, function(index, value) {
            dimWidth = null;

            // have to decide, whether we in zoomed in or zoomed out status
            if(zoomedInfo == undefined || zoomedInfo == null || fromDraggable) {
                if(index == 0) {
                    dimWidth = textureInfo.originalSize.sizex;
                } else if(index == 1) {
                    dimWidth = textureInfo.originalSize.sizey;
                } else {
                    dimWidth = textureInfo.originalSize.sizez;
                }
            } else {
                if(index < 2) {
                    dimWidth = zoomedInfo.dimension.xywidth;
                } else {
                    dimWidth = zoomedInfo.numberOfSlices;
                }
            }
            value *= dimWidth;
            // due to interpolation algorithm, we had to rotate the whole cube, that it matches
            // the display of imagej
            // so we have to map the current pointer values to the real volume values
            // but only for the y and z direction --> the x direction is all right
            if(index > 0) {
                value = dimWidth - value;
            }

            if(!fromDraggable && zoomedInfo) {
                if(index == 0) {
                    value = value + zoomedInfo.dimension.xmin;
                } else if(index == 1) {
                    value = value + zoomedInfo.dimension.ymin;
                } else {
                    value = value + zoomedInfo.dimension.zmin;
                }
            }

            value = Math.floor(value);
            volumePointArray[index] = value;
            processingUrl += value + '/';
        });

        frameNumber = imgInfo.frameFrom + currentTexture;

        processingUrl += frameNumber + '/';

        depth = 1;
        if(zoomAction == 'zoomIn') {
            if(zoomedInfo != null){
                if(sameDepth) {
                    depth = zoomedInfo.depth;
                } else {
                    depth = zoomedInfo.depth + 1;
                }
            }
        } else if(zoomAction == 'zoomOut') {
            if(zoomedInfo.depth > 1) {
                depth = zoomedInfo.depth - 1;
            }
        }

        while(oldZoomedInfos.length > 0
              && oldZoomedInfos.last().zoomedInfo.depth >= depth)
        {
            oldZoomedInfos.pop();
        }

        processingUrl += depth + '/';

        $.ajax({
            url: processingUrl,
            success: function(data) {
                var available = false;
                var availableTestCounter = 0;
                zoomedInfo = data;
                oldZoomedInfos.push({
                    point: realPoint,
                    translated: true,
                    zoomedInfo: zoomedInfo
                });

                // this function is called recursive by the settimeout statement
                availableTest = function() {
                    $.ajax({
                        url: IPE.util.buildUrl('volumes/' + volumeId + '/processing/sprite/' + zoomedInfo.spriteId + '/available/'),
                        success: function(data) {
                            available = data.available;
                        },
                        dataType: 'json',
                        async: false
                    });

                    if(available) {
                        // subvolume available: fetch it
                        fetchSubVolume(zoomAction);
                    } else if(availableTestCounter < 80) {
                        // abort condition not reached --> try again
                        setTimeout(availableTest, 500);
                        availableTestCounter++;
                    } else {
                        oldZoomedInfos.pop();
                        // abort condition reached --> error handling
                        $(document).trigger('zoomActionFinished', { zoomAction: zoomAction, error: true });
                    }
                };
                setTimeout(availableTest, 500);
            },
            dataType: 'json',
            async: true,
            error: function(data) {
                helper.displayMessage('Sorry, an error occured during processing zoom', true, null, 2500);
            }
        });
    };

    var fetchSubVolume = function(zoomAction) {
        imageSrc = IPE.util.buildUrl('volumes/' + volumeId + '/processing/sprite/' + zoomedInfo.spriteId + '/show/');

        var image = new Image();
        var texture = initTexture(new THREE.Texture(image));

        image.onload = function() {

            materialScreen.uniforms.numberOfSlices.value = zoomedInfo.numberOfSlices;
            materialScreen.uniforms.numberOfSlices.needsupdate = true;
            materialScreen.uniforms.slicesOverX.value = zoomedInfo.slicesOverX;
            materialScreen.uniforms.slicesOverX.needsUpdate = true;
            materialScreen.uniforms.slicesOverY.value = zoomedInfo.slicesOverY;
            materialScreen.uniforms.slicesOverY.needsUpdate = true;
            materialScreen.uniforms.numberOfSprites.value = 1;
            materialScreen.uniforms.numberOfSprites.needsUpdate = true;
            materialScreen.uniforms.slicesPerSprite.value = zoomedInfo.numberOfSlices;
            materialScreen.uniforms.slicesPerSprite.needsUpdate = true;

            updateTexture([texture]);

            zoomedVolumeDimension.xmin = zoomedInfo.dimension.xmin;
            zoomedVolumeDimension.xmax = zoomedInfo.dimension.xmin + zoomedInfo.dimension.xywidth - 1;
            zoomedVolumeDimension.ymin = zoomedInfo.dimension.ymin;
            zoomedVolumeDimension.ymax = zoomedInfo.dimension.ymin + zoomedInfo.dimension.xywidth - 1;
            zoomedVolumeDimension.zmin = zoomedInfo.dimension.zmin;
            zoomedVolumeDimension.zmax = zoomedInfo.dimension.zmin + zoomedInfo.numberOfSlices - 1;

            originalVolumeDimension = currentVolumeDimension;
            originalDimension = currentDimension;

            currentVolumeDimension = zoomedVolumeDimension;

            repositionLayerSliders();

            $(document).trigger('zoomActionFinished', {
                zoomAction: zoomAction, textureNumber: frameNumber
            });
        }

        image.src = imageSrc;
    };

    $container.on('contextmenu', function(event){
        if(event.ctrlKey == false) {
            return;
        }

        if(event.altKey == false) {
            return;
        }

        if(!handleZoomStatus(false)) {
            return false;
        }

        return zoomOut();
    });


    function zoomOut() {
        currentZoomPoint = oldZoomedInfos.pop().point;
        if(oldZoomedInfos.length > 0) {
            // using the current point to get a new subvolume
            getSubvolume(currentZoomPoint, true, 'zoomOut', true);
            return false;
        }
        else
        {
            zoomedInfo = null;

            materialScreen.uniforms.numberOfSlices.value = textureInfo.info.numberOfSlices;
            materialScreen.uniforms.numberOfSlices.needsupdate = true;
            materialScreen.uniforms.slicesOverX.value = textureInfo.info.slicesOverX;
            materialScreen.uniforms.slicesOverX.needsUpdate = true;
            materialScreen.uniforms.slicesOverY.value = textureInfo.info.slicesOverY;
            materialScreen.uniforms.slicesOverY.needsUpdate = true;
            materialScreen.uniforms.numberOfSprites.value = imgInfo.numberOfSprites;
            materialScreen.uniforms.numberOfSprites.needsUpdate = true;
            materialScreen.uniforms.slicesPerSprite.value = imgInfo.slicesPerSprite;
            materialScreen.uniforms.slicesPerSprite.needsUpdate = true;

            updateTexture();

            currentVolumeDimension = originalVolumeDimension;
            currentDimension = originalDimension;

            repositionLayerSliders();
        }

        $(document).trigger('zoomActionFinished', {
            zoomAction: 'zoomOut'
        });

        return false;
    }

    function zoomInAllowed() {
        return !zoomedIn || zoomedInfo.dimension.xywidth > 300;
    }

    /**
    * return: procceed or not
    */
    function handleZoomStatus(zoomIn) {
        zoomInButton.removeClass('red');
        zoomInActivated = false;

        if(zoomIn && !zoomInAllowed()) {
            return false;
        } else if(!zoomIn && !zoomedIn) {
            return false;
        }

        waitDiv.removeClass('hidden');

        displayMessage = zoomIn ? 'Generating zoomed subvolume, please wait a moment' : 'Zooming out';
        helper.displayMessage(displayMessage);
        displayTimestamp = Date.now();

        return true;
    }

    // general function to disable stuff like messages etc.
    $(document).on('zoomActionFinished', function(e, params) {
        zoomedIn = zoomedInfo != null;

        timeout = 2000 - (Date.now() - displayTimestamp);
        if(timeout < 0) {
            timeout = 0;
        }
        helper.fadeoutMessage(null, timeout);

        zoomedStatusText = '';
        if(zoomedIn) {
            zoomStatus.addClass('green-background');
            zoomedStatusText = 'zoomed in';

            $.each($('.res-link'), function(index, value) {
                $(value).addClass('disabled');
            });

            if(zoomedInfo.dimension.xywidth <= 300) {
                zoomInButton.prop('disabled', true);
            }
        } else {
            zoomStatus.removeClass('green-background');
            zoomedStatusText = 'zoomed out';

            if(params.error) {
                errorMessage = 'Error during subvolume generation - zoomed out again';
                helper.displayMessage(errorMessage, true, null, 5000);
            }

            $.each($('.res-link'), function(index, value) {
                $(value).removeClass('disabled');
            });

            zoomInButton.prop('disabled', false);
        }

        zoomStatus.html(zoomedStatusText);
        waitDiv.addClass('hidden');
    });

    // draggable related stuff
    // TODO for multilevel zooming
    $(document).on('zoomActionFinished', function(e, params) {

        zoomedIn = zoomedInfo != null;

        if(zoomedIn) {
            zoomedInfoArray.offset[Axis.X] = zoomedVolumeDimension.xmin;
            zoomedInfoArray.offset[Axis.Y] = zoomedVolumeDimension.ymin;
            zoomedInfoArray.offset[Axis.Z] = zoomedVolumeDimension.zmin;

            zoomedInfoArray.dimension[Axis.X] = zoomedInfo.dimension.xywidth;
            zoomedInfoArray.dimension[Axis.Y] = zoomedInfo.dimension.xywidth;
            zoomedInfoArray.dimension[Axis.Z] = zoomedInfo.numberOfSlices;
        } else {
            navigationPlane.hide();
            navigationPlaneParent.removeClass('white');

            navigationSlider.hide();
            navigationSliderParent.removeClass('white');
        }

        navigationPlane.removeClass('no-pos-set');
        navigationSlider.removeClass('no-pos-set');
    });

    navigationPlane.draggable({
        containment: '#navigation-plane-container',
        scroll: false,
        stop: function() {
            zoomedDraggableChanged();
        }
    });

    navigationSlider.draggable({
        containment: '#navigation-slider-container',
        scroll: false,
        stop: function() {
            zoomedDraggableChanged();
        }
    });


    function zoomedDraggableChanged() {
        waitDiv.removeClass('hidden');
        var planeWidthHalf = navigationPlane.width() / 2,
            planeHeightHalf = navigationPlane.height() / 2,
            planeOffsetLeft = navigationPlane.offset().left - navigationPlaneParent.offset().left - 1,
            planeOffsetTop = navigationPlane.offset().top - navigationPlaneParent.offset().top - 1,

            sliderHeightHalf = navigationSlider.height() / 2,
            sliderOffsetTop = navigationSlider.offset().top - navigationSliderParent.offset().top - 1,
            orientation = planeOrientation.orientation,
            direction = planeOrientation.direction;


        // set correct border values due to messure errors
        if(planeOffsetLeft < 0) {
            planeOffsetLeft = 0;
        } else if(planeOffsetLeft > navigationPlaneParent.width() - navigationPlane.width()) {
            planeOffsetLeft = navigationPlaneParent.width() - navigationPlane.width();
        }

        if(planeOffsetTop < 0) {
            planeOffsetTop = 0;
        } else if(planeOffsetTop > navigationPlaneParent.height() - navigationPlane.height()) {
            planeOffsetTop = navigationPlaneParent.height() - navigationPlane.height();
        }

        if(sliderOffsetTop < 0) {
            sliderOffsetTop = 0;
        } else if(sliderOffsetTop > navigationSliderParent.height() - navigationSlider.height()) {
            sliderOffsetTop = navigationSliderParent.height() - navigationSlider.height();
        }

        planeOffsetLeft = planeOffsetLeft + planeWidthHalf;
        planeOffsetTop = planeOffsetTop + planeHeightHalf;
        sliderOffsetTop = sliderOffsetTop + sliderHeightHalf;

        horAxis = planeOrientation.hor.axis;
        verAxis = planeOrientation.ver.axis;

        pointAsArray = Array(3);

        pointAsArray[horAxis] = planeOffsetLeft / navigationPlaneParent.width();
        pointAsArray[verAxis] = planeOffsetTop / navigationPlaneParent.height();

        /*if(planeOrientation.direction == VolumeFaceDirection.BACK) {
            pointAsArray[horAxis] = 1.0 - pointAsArray[horAxis];
        } else if(planeOrientation.orientation == VolumeFaceOrientation.XZ) {
            pointAsArray[horAxis] = 1.0 - pointAsArray[horAxis];
        }*/
        if((planeOrientation.orientation == VolumeFaceOrientation.XY
            && planeOrientation.direction == VolumeFaceDirection.BACK)
           || (planeOrientation.orientation == VolumeFaceOrientation.YZ
            && planeOrientation.direction == VolumeFaceDirection.BACK)
           || (planeOrientation.orientation == VolumeFaceOrientation.XZ
            && planeOrientation.direction == VolumeFaceDirection.BACK)) {

            pointAsArray[horAxis] = 1.0 - pointAsArray[horAxis];
        }

        pointAsArray[sliderOrientation.axis] = sliderOffsetTop / navigationSliderParent.height();

        /*if((sliderOrientation.axis == Axis.Z
            && planeOrientation.direction == VolumeFaceDirection.FRONT)
           || (sliderOrientation.axis == Axis.Y
            && planeOrientation.direction == VolumeFaceDirection.FRONT)
           || (sliderOrientation.axis == Axis.X
            && planeOrientation.direction == VolumeFaceDirection.BACK)) {

            pointAsArray[sliderOrientation.axis] = 1.0 - pointAsArray[sliderOrientation.axis];
        }*/

        if((sliderOrientation.axis == Axis.X
            && planeOrientation.direction == VolumeFaceDirection.FRONT)
            || (sliderOrientation.axis == Axis.Y
            && planeOrientation.direction == VolumeFaceDirection.BACK)
            || (sliderOrientation.axis == Axis.Z
            && planeOrientation.direction == VolumeFaceDirection.BACK)) {

            pointAsArray[sliderOrientation.axis] = 1.0 - pointAsArray[sliderOrientation.axis];
        }

        point = new THREE.Vector3(pointAsArray[0], pointAsArray[1], pointAsArray[2]);

        getSubvolume(point, true, 'zoomIn', true, true);
    };

    var zoomInActivated = false;
    zoomInButton.on('click', function() {
        zoomInActivated = !zoomInActivated;

        if(zoomInActivated) {
            $(this).addClass('red');
        } else {
            $(this).removeClass('red');
        }
    });

    zoomOutButton.on('click', function() {
        zoomInButton.removeClass('red');

        if(!handleZoomStatus(false)) {
            return false;
        }

        return zoomOut();
    });

    function determineAxisLabels() {
        if(Date.now() - lastExecutionTime > 100) {
            var lookAtVector = new THREE.Vector3(0,0, -1);
            lookAtVector.applyQuaternion(camera.quaternion);

            xIterator = -0.4;
            yIterator = -0.4;
            facesIntersect = {};
            interSectStartingPoint = new THREE.Vector3(xIterator, yIterator, camera.near);
            for(xIterator = -0.4; xIterator <= 0.4; xIterator += 0.2) {
                for(yIterator = -0.4; yIterator <= 0.4; yIterator += 0.2) {
                    interSectStartingPoint.x = xIterator;
                    interSectStartingPoint.y = yIterator;


                    vector = interSectStartingPoint.unproject( camera );

                    var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

                    var intersects = raycaster.intersectObjects( [frontBox] );

                    if(intersects.length > 0) {
                        var intersect = intersects[0],
                            point = intersect.point,
                            face = intersect.face,
                            faceObject = determineVolumeFace(face.normal),
                            faceIdent = faceObject.getIdentifier();
                            alreadyAdded = Object.keys(facesIntersect).indexOf(faceIdent) >= 0;

                        if(alreadyAdded) {
                            facesIntersect[faceIdent].count++;
                        } else {
                            facesIntersect[faceIdent] = { faceObject: faceObject, count: 1};
                        }
                    }
                }
            }

            frontFace = { count: 0 };
            for(faceIdent in facesIntersect) {
                if(facesIntersect[faceIdent].count > frontFace.count) {
                    frontFace = facesIntersect[faceIdent];
                }
            }

            if(frontFace.faceObject != undefined) {
                volumeFace = frontFace.faceObject;

                axisOfNaviation = volumeFace.getAxisOfNaviation();

                planeOrientation = axisOfNaviation.plane;
                planeOrientation.hor.offsetTo = OffsetTo.LEFT;
                planeOrientation.ver.offsetTo = OffsetTo.TOP;
                planeOrientation.direction = volumeFace.direction;
                planeOrientation.orientation = volumeFace.orientation;

                sliderOrientation = axisOfNaviation.slider;
                sliderOrientation.offsetTo = OffsetTo.TOP;

                navigationPlaneHorLabel.html(planeOrientation.hor.getLabel());
                navigationPlaneVerLabel.html(planeOrientation.ver.getLabel());
                navigationSliderLabel.html(sliderOrientation.getLabel());
            }

            lastExecutionTime = Date.now();
        }
    }

    function determinePlanePosition() {
        if(!zoomedIn) {
            return;
        }

        if(navigationPlane.hasClass('ui-draggable-dragging')
          || navigationPlane.hasClass('no-pos-set')) {
            navigationPlane.addClass('no-pos-set');
            return;
        }

        horAxis = planeOrientation.hor.axis;
        verAxis = planeOrientation.ver.axis;

        planeRelativeX = navigationPlaneParent.width() / originalSizeArray[horAxis];
        planeRelativeY = navigationPlaneParent.height() / originalSizeArray[verAxis];

        planeWidth = planeRelativeX * zoomedInfoArray.dimension[horAxis];
        planeHeight = planeRelativeY * zoomedInfoArray.dimension[verAxis];

        planeWidth = Math.ceil(planeWidth);
        planeHeight = Math.ceil(planeHeight);

        planeOffsetLeft = zoomedInfoArray.offset[horAxis] * planeRelativeX;
        if((planeOrientation.direction == VolumeFaceDirection.BACK
            && planeOrientation.orientation == VolumeFaceOrientation.XZ)
           || (planeOrientation.direction == VolumeFaceDirection.FRONT
              && planeOrientation.orientation == VolumeFaceOrientation.YZ)) {

            planeOffsetLeft = navigationPlaneParent.width() - (planeOffsetLeft + navigationPlane.width());
        }

        planeOffsetTop = zoomedInfoArray.offset[verAxis] * planeRelativeY;
        if(planeOrientation.orientation == VolumeFaceOrientation.XZ
            || planeOrientation.orientation == VolumeFaceOrientation.YZ){

            planeOffsetTop = navigationPlaneParent.height() - (planeOffsetTop + navigationPlane.height());
        }

        navigationPlane.css({
            'top': planeOffsetTop + 'px',
            'left' : planeOffsetLeft + 'px',
            'width': planeWidth + 'px',
            'height': planeHeight + 'px'
        });

        navigationPlane.show();
        navigationPlaneParent.addClass('white');
    }

    function determineSliderPosition() {
        if(!zoomedIn) {
            return;
        }

        if(navigationSlider.hasClass('ui-draggable-dragging')
          || navigationSlider.hasClass('no-pos-set')) {
            navigationSlider.addClass('no-pos-set');
            return;
        }

        sliderRelative = navigationSliderParent.height() / originalSizeArray[sliderOrientation.axis];
        sliderOffsetTop = zoomedInfoArray.offset[sliderOrientation.axis] * sliderRelative;

        sliderHeight = Math.ceil(sliderRelative * zoomedInfoArray.dimension[sliderOrientation.axis]);

        if(planeOrientation.direction == VolumeFaceDirection.FRONT) {
            sliderOffsetTop = navigationSliderParent.height() - (navigationSlider.height() + sliderOffsetTop);
        }

        navigationSlider.css({
            'top': sliderOffsetTop + 'px',
            'height': sliderHeight + 'px'
        });

        navigationSlider.show();
        navigationSliderParent.addClass('white');
    }
};

function radToDeg(rad) {
    return rad * 180 / Math.PI;
}






;var Orientation = function(axis, offsetTo) {
    this._axis = axis;
    this._offsetTo = null;
}

Orientation.prototype = {
    constructor: Orientation,

    getLabel: function() {
        switch(this._axis) {
            case(Axis.X):
                return 'x-axis';
            case(Axis.Y):
                return 'y-axis';
            case(Axis.Z):
                return 'z-axis';
        }
    },

    get axis() {
        return this._axis;
    },

    get offsetTo() {
        return this._offsetTo;
    },

    set offsetTo(value) {
        this._offsetTo = value;
    }
}

var Axis = {
    X: 0,
    Y: 1,
    Z: 2
}

var OffsetTo = {
    TOP: 0,
    LEFT: 1,
    BOTTOM: 2,
    RIGHT: 3
}
;IPE.interceptors.SendInterceptor = (function() {
    return {
        init: function() {
            $(document).ajaxSend(function (e, xhr, settings) {
                if(settings.url.indexOf('/static/') === -1) {
                    if(!settings.url.endsWith('/')) {
                       settings.url += '/';
                    }
                }
            });
        }
    };
}())
;var NavigationPlane = function(element, horizontalLabel, verticalLabel) {
    this._element = element;
    this._parent = element.parent();
    this._horizontalLabel = horizontalLabel;
    this._verticalLabel = verticalLabel;

    this._zoomedInfoArray = null;
    this._volumeFace = null;
}

NavigationPlane.prototype = {
    constructor: NavigationPlane,

    set zoomedInfoArray(value) {
        this._zoomedInfoArray = value;
    },

    set volumeFace(value) {
        this._volumeFace = value;
    },





}
;