function newViewPort() {

    const CONSOLE_LOG = true;

    let ANIMATION_INCREMENT = 0.25;
    const TOP_MARGIN = 15 + TOP_SPACE_HEIGHT;
    const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT;
    const LEFT_MARGIN = 50;
    const RIGHT_MARGIN = 50;
    const MIN_ZOOM_LEVEL = -28.25

    let thisObject = {
        visibleArea: undefined,
        eventHandler: undefined,
        zoomTargetLevel:undefined,
        zoomLevel: undefined,   
        mousePosition: undefined,
        newZoomLevel: newZoomLevel,
        applyZoom: applyZoom,
        isMinZoom: isMinZoom,
        zoomFontSize: zoomFontSize,
        zoomThisPoint: zoomThisPoint,
        unzoomThisPoint: unzoomThisPoint,
        isThisPointVisible: isThisPointVisible, 
        fitIntoVisibleArea: fitIntoVisibleArea,
        displace: displace,
        displaceTarget: displaceTarget,
        animate: animate,
        draw: draw,
        raiseEvents: raiseEvents, 
        initialize: initialize
    };

    let increment = 0.035;

    var offset = {
        x: 0,
        y: 0
    }; 

    var targetOffset = {
        x: 0,
        y: 0
    };

    let offsetIncrement = {
        x: 0,
        y: 0
    }; 

   thisObject.mousePosition = { 
        x: 0,
        y: 0
    }; 

   thisObject.eventHandler = newEventHandler();

   return thisObject;

   function initialize() {

       thisObject.visibleArea = {
           topLeft: { x: LEFT_MARGIN, y: TOP_MARGIN },
           topRight: { x: browserCanvas.width - RIGHT_MARGIN , y: TOP_MARGIN },
           bottomRight: { x: browserCanvas.width - RIGHT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN},
           bottomLeft: { x: LEFT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN}
       };  
   }

   function raiseEvents() {

       let event = {
           newOffset: offset
       };

       thisObject.eventHandler.raiseEvent("Offset Changed", event);

   }

   function animate() {

       if (thisObject.zoomLevel < thisObject.zoomTargetLevel) {
           if (thisObject.zoomTargetLevel - thisObject.zoomLevel < ANIMATION_INCREMENT) {
               ANIMATION_INCREMENT = Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel);
           }
           thisObject.zoomLevel = thisObject.zoomLevel + ANIMATION_INCREMENT;
           changeZoom(thisObject.zoomLevel - ANIMATION_INCREMENT, thisObject.zoomLevel);
       }

       if (thisObject.zoomLevel > thisObject.zoomTargetLevel) {
           if (thisObject.zoomLevel - thisObject.zoomTargetLevel < ANIMATION_INCREMENT) {
               ANIMATION_INCREMENT = Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel);
           } 
           thisObject.zoomLevel = thisObject.zoomLevel - ANIMATION_INCREMENT;
           changeZoom(thisObject.zoomLevel + ANIMATION_INCREMENT, thisObject.zoomLevel);
       }

 /*
       if (offsetIncrement.x !== 0) {

           if (Math.trunc(Math.abs(targetOffset.x - offset.x) * 1000) >= Math.trunc(Math.abs(offsetIncrement.x) * 1000)) {
               offset.x = offset.x + offsetIncrement.x;
           } else {
               offsetIncrement.x = 0;
           }
       }
*/       

       if (offsetIncrement.y !== 0) {

           if (Math.trunc(Math.abs(targetOffset.y - offset.y) * 1000) >= Math.trunc(Math.abs(offsetIncrement.y) * 1000)) {
               offset.y = offset.y + offsetIncrement.y;

               //console.log("offset.y changed to " + offset.y)

           } else {
               offsetIncrement.y = 0;
           }
       }

       
   }

   function displace(displaceVector) {

       offset.x = offset.x + displaceVector.x;
       offset.y = offset.y + displaceVector.y;

       let event = {
           newOffset: offset
       };

       thisObject.eventHandler.raiseEvent("Offset Changed", event);

       //console.log("displace produced new Offset x = " + offset.x + " y = " + offset.y);

   }

   function displaceTarget(displaceVector) {


       targetOffset.x = targetOffset.x + displaceVector.x;
       targetOffset.y = targetOffset.y + displaceVector.y;

       
       offsetIncrement = {
           x: (targetOffset.x - offset.x) / 10,
           y: (targetOffset.y - offset.y) / 10
       };

       //console.log("displaceTarget x = " + targetOffset.x + " y = " + targetOffset.y);

   }

   function newZoomLevel(level) {

       thisObject.zoomTargetLevel = level;
       thisObject.zoomLevel = level;

       ANIMATION_INCREMENT = Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) / 3;

       let event = {
           newLevel: thisObject.zoomTargetLevel,
           newOffset: offset,
           type: undefined
       };

       thisObject.eventHandler.raiseEvent("Zoom Changed", event);

       return true;
   }

   function isMinZoom() {
       /* returns true is we are currently at the min zoom level. */

       if (thisObject.zoomTargetLevel === MIN_ZOOM_LEVEL) { return true; } else { return false;}

   }

    function applyZoom(amount) {

        //console.log("applyZoom amount: " + amount);

        if (amount > 0) {
             

            if (thisObject.zoomTargetLevel > -5) {
                amount = amount * 2;
            }

            if (thisObject.zoomTargetLevel > 10) {
                amount = amount * 3;
            }

            if (thisObject.zoomTargetLevel > 15) {
                amount = amount * 4;
            } 
        }

        if (amount < 0) {

            if (thisObject.zoomTargetLevel > -4) {
                amount = amount * 2;
            }

            if (thisObject.zoomTargetLevel > 13) {
                amount = amount * 3;
            }

            if (thisObject.zoomTargetLevel > 19) {
                amount = amount * 4;
            }
        }

        if (thisObject.zoomTargetLevel + amount > 1000) {
            return false;
        }

        if (thisObject.zoomTargetLevel <= -27 && amount < 0) {
            amount = amount / 4;
        }

        if (thisObject.zoomTargetLevel < -27 && amount > 0) {
            amount = amount / 4;
        }

        if (thisObject.zoomTargetLevel + amount < MIN_ZOOM_LEVEL) {
            return false;
        }

        thisObject.zoomTargetLevel = thisObject.zoomTargetLevel + amount;

        ANIMATION_INCREMENT = Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) / 3;

        let event = {
            newLevel: thisObject.zoomTargetLevel,
            newOffset: offset,
            type: undefined
        };

        if (amount > 0) {
            event.type = "Zoom In";
        } else {
            event.type = "Zoom Out";
        }

        thisObject.eventHandler.raiseEvent("Zoom Changed", event);

        return true;
   }


    function changeZoom(oldLevel, newLevel) {

        let mouseNoZoom = unzoomThisPoint(thisObject.mousePosition, oldLevel);
        let newMouse = zoomThisPoint(mouseNoZoom, newLevel);

        offset.x = offset.x - newMouse.x + thisObject.mousePosition.x;
        offset.y = offset.y - newMouse.y + thisObject.mousePosition.y;

        targetOffset.x = offset.x
        targetOffset.y = offset.y ;

        offsetIncrement = {
            x: 0,
            y: 0
        };

    }


    function zoomFontSize(baseSize, level) {

        let zoomFactor = increment; // + increment * thisObject.zoomLevel / 100;

        if (level === undefined) {

            baseSize = baseSize * (1 + zoomFactor * thisObject.zoomLevel);

        } else {

            baseSize = baseSize * (1 + zoomFactor * level);

        }

        return baseSize;
    }

    function fitIntoVisibleArea(point) {


        /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */

        if (point.x > thisObject.visibleArea.bottomRight.x + 1) {
            point.x = thisObject.visibleArea.bottomRight.x + 1;
        }

        if (point.x < thisObject.visibleArea.topLeft.x - 1) {
            point.x = thisObject.visibleArea.topLeft.x - 1;
        }

        if (point.y > thisObject.visibleArea.bottomRight.y + 1) {
            point.y = thisObject.visibleArea.bottomRight.y + 1;
        }

        if (point.y < thisObject.visibleArea.topLeft.y - 1) {
            point.y = thisObject.visibleArea.topLeft.y - 1;
        }

        return point;
    }


    function zoomThisPoint(point, level) {

        let zoomFactor = increment; // + increment * thisObject.zoomLevel / 100;

        if (level === undefined) {

            point.x = point.x * (1 + zoomFactor * thisObject.zoomLevel) + offset.x;
            point.y = point.y * (1 + zoomFactor * thisObject.zoomLevel) + offset.y;

        } else {

            point.x = point.x * (1 + zoomFactor * level) + offset.x;
            point.y = point.y * (1 + zoomFactor * level) + offset.y;

        }

        return point;
    }

    function unzoomThisPoint(pointWithZoom, level) {

        let pointWithoutZoom;
        let zoomFactor = increment; // + increment * thisObject.zoomLevel / 100;

        if (level === undefined) {

            pointWithoutZoom = {
                x: (pointWithZoom.x - offset.x) / (1 + zoomFactor * thisObject.zoomLevel),
                y: (pointWithZoom.y - offset.y) / (1 + zoomFactor * thisObject.zoomLevel)
            };

        } else {

            pointWithoutZoom = {
                x: (pointWithZoom.x - offset.x) / (1 + zoomFactor * level),
                y: (pointWithZoom.y - offset.y) / (1 + zoomFactor * level)
            };

        }
        return pointWithoutZoom;

    }




    function isThisPointVisible(point) {

        if (visibleArea === undefined) {

            getVisibleArea();

        }

        if (point.x < visibleArea.topLeft.x || point.x > visibleArea.bottomRight.x || point.y < visibleArea.topLeft.y || point.y > visibleArea.bottomRight.y) {
            return false;
        } else {
            return true;
        }

    }


    function draw() {
/*
        drawGrid(10);
        drawGrid(1);
        drawGrid(0.1);
*/
    }

    function drawGrid(step) {

        let squareWidth = (thisObject.visibleArea.bottomRight.x - thisObject.visibleArea.bottomLeft.x) / step;
        squareWidth = squareWidth + squareWidth * increment * thisObject.zoomLevel;

        let startingX = offset.x - Math.trunc(offset.x / squareWidth) * squareWidth;
        let startingY = offset.y - Math.trunc(offset.y / squareWidth) * squareWidth;
        let lineWidth = 10 / step + 10 / step * increment * thisObject.zoomLevel;

        if (lineWidth < 0.5) {
            return;
        }

        if (lineWidth > 2) {
            lineWidth = 2;
        }

        browserCanvasContext.beginPath();

        for (var i = startingX; i < thisObject.visibleArea.bottomRight.x; i = i + squareWidth) {

            for (var j = startingY; j < thisObject.visibleArea.bottomRight.y; j = j + squareWidth) {

                let point1 = {
                    x: thisObject.visibleArea.bottomLeft.x,
                    y: j
                };

                let point2 = {
                    x: thisObject.visibleArea.bottomRight.x,
                    y: j
                };

                browserCanvasContext.moveTo(point1.x, point1.y);
                browserCanvasContext.lineTo(point2.x, point2.y);
            }

            let point3 = {
                x: i,
                y: thisObject.visibleArea.topLeft.y
            };

            let point4 = {
                x: i,
                y: thisObject.visibleArea.bottomLeft.y
            };

            browserCanvasContext.moveTo(point3.x, point3.y);
            browserCanvasContext.lineTo(point4.x, point4.y);
        }
        browserCanvasContext.closePath();
        browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.' + Math.trunc(lineWidth + 1) + ')';

        browserCanvasContext.lineWidth = lineWidth;
        
        browserCanvasContext.stroke();
    }

}