(function () {

    var itm = this.itm;

    // itm.RailComponent = itm.Class({
    // init: function(param) {
    // }
    // });

    itm.RailView = itm.Class({

        nameColorMap: {
            SCHWARZ: "#000000",
            GRAU: "#808080",
            WEISS: "#ffffff",
            WEIß: "#ffffff",
            ROT: "#ff0000",
            BLAU: "#0000ff",
            GELB: "yellow"
        },

        init: function (param) {
            this.canvasId = param.canvasId || "";
            this.width = param.width || 5000;
            this.height = param.height || 2000;
            this.square = param.square || 1;

            fabric.Group.prototype.hasBorders = false;
            fabric.Group.prototype.hasControls = false;

            this.canvas = param.canvas || new fabric.Canvas(this.canvasId, {
                width: this.width,
                height: this.height,
                selectionColor: 'rgba(0,255,0,0.3)',
                selectionBorderColor: 'red',
                selectionLineWidth: 5,
                allowTouchScrolling: true,
                preserveObjectStacking: true,
                renderOnAddRemove: false
            });

            var self = this;

            var selectionCreated = false;
            // for multiple selection
            this.canvas.on('selection:created', function (e) {
                // //console.log("selection:created");
                self.getSelectedBlocks(e);
                self.selectionCreated = true;
            });
            // single selection
            this.canvas.on('object:selected', function (e) {
                // //console.log("object:selected");
                //self.canvas.deactivateAll().renderAll();
                self.getSelectedBlocks(e);
                self.selectionCreated = true;
            });
            this.canvas.on('selection:cleared', function (e) {
                // //console.log("selection:cleared");
                self.getSelectedBlocks(e);
            });

            this.canvas.on('mouse:down', function (e) {
                //console.log("mouse:down");
                if (!self.selectionCreated &&
                    ((self.canvas.getActiveGroup() && self.canvas.getActiveGroup() == e.target)
                        || self.canvas.getActiveObject() && self.canvas.getActiveObject() == e.target)) {
                    self.canvas.deactivateAll().renderAll();
                    self.getSelectedBlocks(null);
                }
                self.selectionCreated = false;
                //self.canvas.sendToBack(this.rail);
            });

            this.canvas.on('mouse:up', function (e) {
                //console.log("mouse:down");
                self.selectionCreated = false;
            });

            this.updateURL = param.updateURL || "rest/vis";

            this.scale = param.scale || 1.0;

            // {"matno": imgObj}
            this.imageCache = {}

            // the factor for calc block [mm] to img [px]
            // px = imageScaleFactor * mm
            // the image width are 50px, the block is 5mm wide
            this.imageScaleFactor = 10;

            this.tempOffset = 0;
            this.boreDiameterScaled = 0;
            this.boreSlotScaled = 0;
            this.tempCliplength = 0;
            this.cliplength = 0;

            // the rail backend data structure
            // this is updated on every server call
            this.rail = null;

            // this.canvas.setBackgroundColor("#fff");
            // this.makeGraphPaper({
            // square: this.square,
            // width: this.width,
            // height: this.height
            // });

            // this.canvas.setBackgroundImage('images/graphPaper.png');
            // this.canvas.backgroundColor = new fabric.Pattern({source: "images/graphPaper.png"})
            /*this.canvas.setBackgroundColor({
                source: "resources/images/graphPaper.png",
                repeat: 'repeat'
            });*/

            // the start position of the rail (measured from upper left corner)
            this.railStartX = 50;

            // TODO calc bounding box to determine the correct distance to canvas top
            this.railStartY = 1000;

            // the distance of the first block from left rail start
            //this.rightOffset = 20; // mm

            // the distance of the last block from right rail end
            //this.leftOffset = 20; // mm

            // the length of the rail
            this.railLength = 0; // mm

            this.showBores = false;

            var self = this;

            // $(this.canvas.wrapperEl).on('mousewheel', function(e) {
            //
            // // var target = canvas.findTarget(e);
            // var delta = 0.1;
            // if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta > 0) {
            // // this is IE
            // delta = 0.1;
            // } else if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta < 0) {
            // delta = -0.1;
            // } else {
            // // this is firefox
            // if (e.originalEvent.detail > 0) {
            // delta = 0.1;
            // } else {
            // delta = -0.1;
            // }
            // }
            //
            // if ((self.scale > 1.5 && delta > 0) || (self.scale < 0.5 && delta < 0)) {
            // return;
            // }
            //
            // self.scale = self.scale + delta;
            // //console.log("delta: " + delta + " scale: " + self.scale);
            //
            // self.zoomIt(1 + delta);
            // });

        },
        setScale: function (scale) {
            this.scale = scale;
        },
        /**
         * Setting the minimal distance of the first terminal block from the beginning of the rail. The value ist
         * specified in mm.
         */
        setLeftOffset: function (offset) {
            //this.leftOffset = offset;
        },
        /**
         * Setting the minimal distance of the last terminal block from the end of the rail. The value ist specified in
         * mm.
         */
        setRightOffset: function (offset) {
            //this.rightOffset = offset;
        },
        /**
         * Getting the ids of all selected blocks. returns an array of all selected ids.
         */
        getSelectedBlocksId: function () {

            var result = [];
            if (this.rail != null) {
                for (var index = 0; index < this.rail.allBlocks().length; index++) {
                    var block = this.rail.allBlocks()[index];
                    if (block.selected == true) {
                        result.push(block.id);
                    }
                }
            }

            return result;
        },
        /**
         * getting the block by id
         */
        getBlockById: function (id) {

            var block = null;
            for (var index = 0; index < this.rail.allBlocks().length; index++) {
                var tmpBlock = this.rail.allBlocks()[index];
                if (tmpBlock.id == id) {
                    block = tmpBlock;
                    break;
                }
            }
            return block;
        },
        /**
         * Setting the selected flag of the blocks of the rail.
         */
        setSelectedBlocksId: function (ids) {

            for (var index = 0; index < this.rail.allBlocks().length; index++) {
                var block = this.rail.allBlocks()[index];
                var id = block.id;
                if (ids.indexOf(id) > -1) {
                    block.selected = true;
                } else {
                    block.selected = false;
                }
            }
        },
        /**
         * getting all blocks on the right side of the given block
         */
        getBlocksOnRight: function (b) {

            var rightBlocks = [];
            for (var index = 0; index < this.rail.allBlocks().length; index++) {
                var block = this.rail.allBlocks()[index];
                if (block.id == b.id) {
                    rightBlocks = this.rail.allBlocks().slice(index + 1);
                    break;
                }
            }
            return rightBlocks;
        },
        /**
         * getting all the jumper
         *
         * @return {jumperModelId: [{"jumperPositionModel": model, "block": block}, { ...}]}
         */
        getJumper: function () {

            var jumper = {};

            for (var index = 0; index < this.rail.allBlocks().length; index++) {
                var block = this.rail.allBlocks()[index];

                for (var j = 0; j < block.jumperPositionModels.length; j++) {
                    var jumperPositionModel = block.jumperPositionModels[j];
                    if (jumperPositionModel.jumperModel != null) {
                        var id = jumperPositionModel.jumperModel.id;

                        jumper[id] = jumper[id] || [];
                        var o = {
                            "jumperPositionModel": jumperPositionModel,
                            "block": block
                        }
                        jumper[id].push(o);
                    }
                }
            }

            return jumper;
        },
        /**
         * remove block from rail and
         */
        removeBlockFromRail: function (block) {

            var index = this.rail.allBlocks().indexOf(block);
            this.rail.allBlocks().splice(index, 1);
        },
        updateImageCache: function (rail) {

            var self = this;

            var returnDfd = $.Deferred();

            var dfdArray = [];

            function callbackFor(dfd, matno, overlap, storageLocation, blockWidth, blockHeight) {
                return function (oImg) {
                    //console.log("oImg: ", oImg);

                    if (oImg._element !== null) {
                        oImg.set("matno", matno);
                        oImg.set("overlap", overlap);
                        oImg.set("storageLocation", storageLocation);

                        // setting standard options for single terminal blocks
                        oImg.borderColor = "#6C0";
                        // moved to zoom
                        // oImg.borderScaleFactor = 1 / 7; // border width 7
                        oImg.hasControls = false;
                        oImg.lockMovementX = true;
                        oImg.lockMovementY = true;
                        oImg.borderOpacityWhenMoving = 1;
                        oImg.originX = "center";
                        oImg.originY = "center";

                        if (blockWidth != null) {
                            oImg.set({
                                width: blockWidth * self.imageScaleFactor,
                                height: blockHeight * self.imageScaleFactor
                            });
                        }

                        self.imageCache[matno] = oImg;
                        //console.log(matno + " put to cache with overlap " + overlap);
                    } else {
                        //console.log("image for matno: " + matno + " not found.");
                    }
                    dfd.resolve();
                };
            }

            function getImage(block) {

                // TODO check for accessory model also
                if (block.endPlate) {
                    getImage(block.endPlate);
                }

                var materialNumber = block.materialNumber;
                var overlap = block.overlap;
                var storageLocation = block.storageLocation;

                var id = block.id;

                if (materialNumber in self.imageCache) {
                    //console.log("image for matno: " + materialNumber + " already cached.");
                    materialNumber = null;
                }

                if (materialNumber) {
                    //console.log("load image for matno: " + materialNumber);

                    // put the material number to the cache to signal that it is already in work
                    self.imageCache[materialNumber] = null;

                    var dfd = $.Deferred();
                    dfdArray.push(dfd.promise());
                    fabric.Image.fromURL("media/topview/" + materialNumber + ".gif", callbackFor(dfd, materialNumber, overlap, storageLocation, block.width, block.deepth));
                }
            }

            // cache the "placeholder" image
            getImage({
                materialNumber: "placeholder",
                overlap: 10
            });

            this.rail.allBlocks().forEach(getImage);

            //console.log("dfdArray length: " + dfdArray.length);

            $.when.apply($, dfdArray).done(function () {
                //console.log("---> dfdArray: resolved. Do also resolve returnDfd.");
                returnDfd.resolve();
            });

            //console.log("return returnDfd");
            return returnDfd.promise();
        },
        update: function () {
            // check what is already shown on the canvas

            var self = this;
            blockAll();

            // get the rail model
            $.ajax({
                dataType: "json",
                url: this.updateURL,
                cache: false
            }).done(function (rail) {
                //console.log("rail: ", rail);

                rail.allBlocks = function () {
                    var allBlocks = new Array();
                    allBlocks.push(this.leftOffsetBlock);
                    allBlocks = allBlocks.concat(this.blocks);
                    allBlocks.push(this.rightOffsetBlock);

                    return allBlocks;
                }
                // update the rail attribute
                self.rail = rail;

                self.updateImageCache(rail).done(function () {

                    //console.log("updateImageCache done");

                    // Get selectedBlocks before clearing
                    var selectedBlockIds = self.getSelectedBlocksId();
                    self.canvas.clear().renderAll();
                    // reset zoom
                    // self.canvas.setHeight(self.height);
                    // self.canvas.setWidth(self.width);

                    var highestHeight = 0;
                    for (var index = 0; index < self.rail.allBlocks().length; index++) {
                        var block = self.rail.allBlocks()[index];
                        var cachedImage = self.imageCache[block.materialNumber];
                        if (block["@type"] != "spaceBlock"
                            && block["@type"] != "customObject"
                            && cachedImage != null) {
                            var imgHeight = cachedImage.height;
                            if (imgHeight > highestHeight) {
                                highestHeight = imgHeight;
                            }
                        }
                    }
                    self.railStartY = highestHeight;

                    // Content height defined in initLayout.js
                    if (self.railStartY * self.scale < contentHeight / 2) {
                        self.railStartY = contentHeight / 2 / self.scale;
                    }

                    // replaced by background image
                    // self.makeGraphPaper();

                    self.drawRail(rail);

                    if (!self.showBores) {
                        var positionOnRail = self.railStartX; // + self.leftOffset * self.imageScaleFactor;

                        var selectedImgObj = [];
                        for (var index = 0; index < self.rail.allBlocks().length; index++) {
                            var block = self.rail.allBlocks()[index];
                            var cachedImage = self.imageCache[block.materialNumber];
                            var endplate = block.endPlate

                            // check for an endplate on the rotated block
                            if (endplate && block.rotated) {

                                endplate.rotated = block.rotated;
                                // place endplate on the left
                                positionOnRail += self.placeImageObj(self.imageCache[endplate.materialNumber], positionOnRail, endplate);
                            }

                            positionOnRail += self.placeImageObj(cachedImage, positionOnRail, block);
                            // check for marking
                            self.placeMarking(block);
                            self.placeLel(block); // Leiter Einführhilfe
                            self.placeCover(block); // Abdeckungen
                            if (block.rotated) {
                                self.placeRotateInfo(block); // Abdeckungen
                            }

                            // check for an endplate
                            if (endplate && !block.rotated) {
                                // place endplate on the right
                                positionOnRail += self.placeImageObj(self.imageCache[endplate.materialNumber], positionOnRail, endplate);
                            }

                            if (selectedBlockIds.indexOf(block.id) > -1) {
                                selectedImgObj.push(block.imgObj);
                            }
                        }


                        //self.canvas.setHeight(self.railStartY * 2);
                        //self.canvas.setWidth(canvasWidth);

                        self.placeJumper();
                    }

                    // restore zoom
                    self.zoomIt(self.scale, self.canvas, self.scale);

                    if (selectedImgObj != null) {
                        if (selectedImgObj.length == 1) {
                            self.canvas.setActiveObject(selectedImgObj[0]);
                        } else if (selectedImgObj.length > 1) {
                            var group = new fabric.Group(selectedImgObj, {canvas: self.canvas});
                            group.addWithUpdate();
                            group.saveCoords();
                            self.canvas.setActiveGroup(group);
                            self.canvas.renderAll();
                        }
                    }

                    self.getBoundingBox(self.canvas);

                    // center the drawing if padding is not sufficient
                    // self.canvas.absolutePan(new fabric.Point(0, -50));
                    // self.canvas.setZoom(0.6);

                    // Center rail
                    centerActiveMountingRail();

                    unblockAll();
                });
            });
        },
        calcRailLength: function (rail) {

            //console.log("calcRailLength");

            var result = {};

            if (rail.fixedLength) {
                result.length = rail.length;
                return result;
            }

            var len = 0;
            //Changed to SpaceBlock
            //len += this.leftOffset;
            //len += this.rightOffset;

            for (var index = 0; index < this.rail.allBlocks().length; index++) {
                var block = this.rail.allBlocks()[index];

                // check for spaceBlock and customObject
                // check if this block is an "SpaceBlockModel"
                if (block["@type"] == "spaceBlock"
                    || block["@type"] == "customObject") {
                    len += block.width;
                } else {
                    var img = this.imageCache[block.materialNumber];
                    if (img == null) {
                        img = this.imageCache["placeholder"];
                        if (img == null) {
                            break;
                        }
                    }
                    len += img.width / this.imageScaleFactor;

                    // check if there are an endplate
                    if (block.endPlate) {
                        img = this.imageCache[block.endPlate.materialNumber];
                        if (img == null) {
                            img = this.imageCache["placeholder"];
                        }
                        len += img.width / this.imageScaleFactor;
                    }
                }
            }

            result.length = len;

            //console.log("calcRailLength: ", result);

            return result;
        },
        drawRail: function (rail) {

            var hasBore = rail.lochung;
            var railWidth = 35;
            var topIndent = 5;
            var bottomIndent = 5;

            if (rail.form && rail.form.length > 0) {
                railWidth = parseFloat(rail.form.replace("TS ", ""));
            }
            if (rail.topIndent) {
                topIndent = rail.topIndent;
            }
            if (rail.bottomIndent) {
                bottomIndent = rail.bottomIndent;
            }

            var fill = "lightgrey";
            var stroke = "black";

            // check if we had a rail at all
            if (rail.materialNumber && rail.materialNumber.length > 0) {
                // var railParameter = railParameterMap[rail.materialNumber];
                // if (!railParameter) {
                // throw ("Rail with materialNumber " + rail.materialNumber + " is not defined.");
                // }

                this.railLength = this.calcRailLength(rail).length;

                // all values in mm
                // var innerWidth = railWidth - topIndent - bottomIndent;

                // working with rect and circle
                var railRect = new fabric.Rect({
                    id: rail.id,
                    fill: fill,
                    stroke: stroke,
                    selectable: false,

                    left: this.railStartX,
                    top: this.railStartY - railWidth * this.imageScaleFactor / 2,
                    width: this.railLength * this.imageScaleFactor,
                    height: railWidth * this.imageScaleFactor
                    //notTransparentable: true,
                });
                railRect.set("matno", rail.materialNumber);
                railRect.set("railRect", true);
                this.canvas.add(railRect);

                // top Line
                var line = new fabric.Line([this.railStartX, this.railStartY - (railWidth / 2 - topIndent) * this.imageScaleFactor,
                    this.railStartX + this.railLength * this.imageScaleFactor,
                    this.railStartY - (railWidth / 2 - topIndent) * this.imageScaleFactor], {
                    fill: fill,
                    stroke: stroke,
                    strokeWidth: 3,
                    selectable: false

                    //notTransparentable: true,
                });
                line.set("matno", rail.materialNumber);
                this.canvas.add(line);

                // bottom Line
                line = new fabric.Line([this.railStartX, this.railStartY + (railWidth / 2 - bottomIndent) * this.imageScaleFactor,
                    this.railStartX + this.railLength * this.imageScaleFactor,
                    this.railStartY + (railWidth / 2 - bottomIndent) * this.imageScaleFactor], {
                    fill: fill,
                    stroke: stroke,
                    strokeWidth: 3,
                    selectable: false

                    //notTransparentable: true,
                });
                line.set("matno", rail.materialNumber);
                line.set("railBottomLine", true);
                this.canvas.add(line);

                if (hasBore) {
                    // bore
                    var boreDiameter = rail.boreModel.boreDiameter;
                    var boreSlotLength = rail.boreModel.boreSlotLength;
                    var boreDistance = rail.boreModel.boreDistance;

                    // draw the bore
                    if (boreDiameter > 0) {

                        var boreStartOffset = (rail.firstBoreLength - (boreDiameter + boreSlotLength)) * this.imageScaleFactor; // px
                        var boreCount = this.railLength / boreDistance; // mm
                        var leftPos = this.railStartX + boreStartOffset; // px
                        var topPos = this.railStartY - boreDiameter / 2 * this.imageScaleFactor; // px
                        while (leftPos < this.railStartX + this.railLength * this.imageScaleFactor) {
                            var circle = new fabric.Circle({
                                radius: boreDiameter / 2 * this.imageScaleFactor,
                                left: leftPos,
                                top: topPos,
                                stroke: "black",
                                fill: "rgba(255, 255, 255, 1)",

                                notTransparentable: true
                            });
                            // this.canvas.add(circle);

                            boreDiameterScaled = boreDiameter / 2 * this.imageScaleFactor;
                            boreSlotScaled = boreSlotLength * this.imageScaleFactor;
                            var path = new fabric.Path("M 0 0 l " + boreSlotScaled + " 0 a " + boreDiameterScaled + " " + boreDiameterScaled + " 0 1,1 0 " + 2 * boreDiameterScaled + " l -" + boreSlotScaled + " 0 a " + boreDiameterScaled + " "
                                + boreDiameterScaled + " 0 1,1 0 -" + 2 * boreDiameterScaled);

                            path.set({
                                left: leftPos,
                                top: topPos,
                                selectable: false,
                                stroke: "black",
                                // fill: "none"
                                fill: "rgba(255, 255, 255, 1)",
                                // fill: "transparent",

                                notTransparentable: true
                            });

                            if (this.railStartX > leftPos) {
                                tempCliplength = rail.firstBoreLength * this.imageScaleFactor;
                                tempOffset = 0 - (rail.firstBoreLength - (boreDiameter + boreSlotLength) / 2) * this.imageScaleFactor;
                                path.clipTo = function (ctx) {
                                    ctx.rect(tempOffset, -boreDiameterScaled - 1, tempCliplength + 1, 2 * boreDiameterScaled + 1);
                                }
                            } else if (leftPos + (boreDiameter + boreSlotLength) * this.imageScaleFactor > this.railStartX + this.railLength * this.imageScaleFactor) {
                                // This is the last bore. If this does not fit to the rail we have to clip the bore.
                                cliplength = this.railLength * this.imageScaleFactor - (leftPos - this.railStartX);
                                path.clipTo = function (ctx) {
                                    // Height and Width +1 for the border
                                    ctx.rect(-boreDiameterScaled - boreSlotScaled / 2 - 1, -boreDiameterScaled - 1, cliplength + 1, 2 * boreDiameterScaled + 1);
                                }
                            }
                            path.set("matno", rail.materialNumber);
                            path.set("elementType", "bore");
                            this.canvas.add(path);

                            // var circle = new fabric.Circle({
                            // radius: options.boreDiameter / 2,
                            // left: leftPos,
                            // top: topPos,
                            // stroke: "black",
                            // fill: "rgba(255, 255, 255, 1)"
                            // });
                            // this.canvas.add(circle);
                            //
                            // if (options.boreSlotLength > 0) {
                            // var circle = new fabric.Circle({
                            // radius: options.boreDiameter / 2,
                            // left: leftPos + options.boreSlotLength * this.imageScaleFactor,
                            // top: topPos,
                            // stroke: "black",
                            // fill: "rgba(255, 255, 255, 1)"
                            // });
                            // this.canvas.add(circle);
                            //
                            // var rect = new fabric.Rect({
                            // fill: "rgba(255, 255, 255, 1)",
                            // stroke: "black",
                            // selectable: false,
                            //
                            // left: leftPos + options.boreDiameter / 2,
                            // top: topPos,
                            // width: options.boreSlotLength * this.imageScaleFactor,
                            // height: options.boreDiameter,
                            // });
                            // this.canvas.add(rect);
                            // }

                            boreCount--;
                            leftPos += boreDistance * this.imageScaleFactor;
                        }
                    }
                }

                var boreStartOffset = 0;
                for (var i = 0; i < rail.boreModels.length; i++) {
                    var bore = rail.boreModels[i];

                    var d = bore.boreDiameter * this.imageScaleFactor
                    var r = d / 2;
                    var l = bore.boreSlotLength * this.imageScaleFactor;

                    boreStartOffset = bore.boreDistance * this.imageScaleFactor;
                    var leftPos = this.railStartX + boreStartOffset - ((d + l) / 2); // px
                    var topPos = this.railStartY - bore.boreDiameter / 2 * this.imageScaleFactor; // px

                    var path = new fabric.Path("M 0 0 l " + l + " 0 a " + r + " " + r + " 0 1,1 0 " + 2 * r + " l -" + l + " 0 a " + r + " "
                        + r + " 0 1,1 0 -" + 2 * r);
                    path.set({
                        left: leftPos,
                        top: topPos,
                        selectable: false,
                        stroke: "black",
                        // fill: "none"
                        fill: "rgba(255, 255, 255, 1)",
                        // fill: "transparent",

                        notTransparentable: true
                    });

                    if (this.railLength * this.imageScaleFactor - (leftPos - this.railStartX) < 2 * r + l) {
                        // This is the last bore. If this does not fit to the rail we have to clip the bore.
                        cliplength = this.railLength * this.imageScaleFactor - (leftPos - this.railStartX);
                        path.clipTo = function (ctx) {
                            ctx.rect(-r - l / 2, -r, cliplength, 2 * r);
                        }
                    }
                    path.set("matno", rail.materialNumber);
                    path.set("elementType", "bore");
                    this.canvas.add(path);
                }
                this.drawLineal(25);
            } else {
                // no material number. show placeholder
                this.railLength = this.calcRailLength(rail).length;

                // all values in mm
                railWidth = railWidth || 35;
                var innerWidth = 27;

                fill = "#62CE00";
                stroke = "black";

                // TODO define eplan to draw rail placeholder
                if (false) {
                    var railRect = new fabric.Rect({
                        fill: fill,
                        stroke: stroke,
                        selectable: false,

                        left: this.railStartX,
                        top: this.railStartY - railWidth * this.imageScaleFactor / 2,
                        width: this.railLength * this.imageScaleFactor,
                        height: railWidth * this.imageScaleFactor,

                        notTransparentable: true
                    });
                    this.canvas.add(railRect);

                    // the light edges
                    var line = new fabric.Line([this.railStartX, this.railStartY - (railWidth / 2 - topIndent) * this.imageScaleFactor,
                        this.railStartX + this.railLength * this.imageScaleFactor,
                        this.railStartY - (railWidth / 2 - topIndent) * this.imageScaleFactor], {
                        fill: fill,
                        stroke: stroke,
                        strokeWidth: 3,
                        selectable: false,

                        notTransparentable: true
                    });
                    this.canvas.add(line);

                    line = new fabric.Line([this.railStartX, this.railStartY + (railWidth / 2 - bottomIndent) * this.imageScaleFactor,
                        this.railStartX + this.railLength * this.imageScaleFactor,
                        this.railStartY + (railWidth / 2 - bottomIndent) * this.imageScaleFactor], {
                        fill: fill,
                        stroke: stroke,
                        strokeWidth: 3,
                        selectable: false,

                        notTransparentable: true
                    });
                    this.canvas.add(line);

                    this.drawLineal(25);
                }
            }
        },
        /**
         * Draws the graph on the paper
         *
         * @param canvas
         *            the fabric canvas
         * @param square
         *            Size of the squares in px
         */
        makeGraphPaper: function (options) {

            //console.log("start makeGraphPaper")
            options = options || {};

            options.square = options.square || this.square; // in mm
            options.fill = options.fill || "lightgrey";
            options.stroke = options.stroke || "lightgrey";

            options.width = options.width || this.canvas.getWidth();
            options.height = options.height || this.canvas.getHeight();

            // the horizontal lines
            for (var y = options.square * 5; y < options.height; y += options.square * this.imageScaleFactor) {

                var line = new fabric.Line([0, y, options.width, y], {
                    fill: options.fill,
                    stroke: options.stroke,
                    selectable: false
                });
                this.canvas.add(line);
            }

            // the vertical lines
            for (var x = options.square * 5; x < options.width; x += options.square * this.imageScaleFactor) {

                var line = new fabric.Line([x, 0, x, options.height], {
                    fill: options.fill,
                    stroke: options.stroke,
                    selectable: false
                });
                this.canvas.add(line);
            }
            //console.log("end makeGraphPaper")
        },
        drawLineal: function (top) {
            var fill = "lightgrey";
            var stroke = "black";

            // Round up
            var linealLength = this.railLength * this.imageScaleFactor;
            linealLength = Math.ceil(linealLength / (5 * this.imageScaleFactor)) * 5 * (this.imageScaleFactor);

            var linealGroup = new fabric.Group([], {
                originX: "center",
                originY: "center",
                selectable: false,
                evented: false,
                top: top,
                left: this.railStartX
            });
            linealGroup.name = 'lineal';

//        	var lineal = new fabric.Line([this.railStartX, top,
//        	                              this.railStartX + this.railLength * this.imageScaleFactor,
//        	                              top], {
            var lineal = new fabric.Line([0,
                0,
                linealLength,
                0], {
                fill: fill,
                stroke: stroke,
                strokeWidth: 3,
                selectable: false
            });
            linealGroup.add(lineal);

            var markText = new fabric.Text('mm', {
                fontSize: 14,
                fontFamily: "Arial",
                fontWeight: "bold",
                fill: "black",
                originX: "center",
                originY: "center",
                left: -25,
                top: 20,
                width: 20,
                height: 20
            });

            linealGroup.add(markText);

            // the vertical lines
            var i = 0;
            for (var x = 0; x <= linealLength; x += this.square * this.imageScaleFactor) {
                var strokeWidth = 2;
                if (i % 5 == 0) {
                    strokeWidth = 3;

                    // Text
                    var markText = new fabric.Text('' + i, {
                        fontSize: 14,
                        fontFamily: "Arial",
                        fill: "black",
                        originX: "center",
                        originY: "center",
                        left: x,
                        top: 20,
                        width: 20,
                        height: 20
                    });

                    linealGroup.add(markText);
                }

                var line = new fabric.Line([x, 0, x, 10], {
                    fill: fill,
                    stroke: stroke,
                    strokeWidth: strokeWidth,
                    selectable: false
                });
                linealGroup.add(line);
                i++;
            }

            this.canvas.add(linealGroup);
        },
        findImageByMatnoAndLeft: function (matno, left) {
            var object = null;
            var objects = this.canvas.getObjects();

            for (var i = 0, len = this.canvas.size(); i < len; i++) {
                if (objects[i].get("matno") && objects[i].get("matno") === matno) {
                    object = objects[i];
                    break;
                }
            }
            return object;
        },
        /**
         * setup the jumper of the rail
         */
        placeJumper: function () {

            var jumpers = this.getJumper();
            //console.log("jumpers: ", jumpers);

            for (var jumperId in jumpers) {
                if (jumpers.hasOwnProperty(jumperId)) {
                    this.placeJumperById(jumperId, jumpers)
                }
            }
        },
        placeJumperById: function (jumperId, jumpers) {
            var firstPos = null;
            var lastPos = null;

            var blocks = jumpers[jumperId];

            for (var index = 0; index < blocks.length; index++) {
                var block = blocks[index];
                var imgObj = this.findImageById(block.block.id);

                if (index != blocks.length - 1) {
                    block.hasJumperToRight = true;
                }

                var xPosition = block.jumperPositionModel.xPosition;
                var yPosition = block.jumperPositionModel.yPosition;

                var gTop = imgObj.top - imgObj.height / 2 - (yPosition - block.block.overlap) * this.imageScaleFactor;
                if (!isNaN(imgObj.originalTop)) {
                    gTop = imgObj.originalTop - imgObj.height / 2 - (yPosition - block.block.overlap) * this.imageScaleFactor;
                }

                if (block.block.rotated) {
                    // TODO calc pos
                    gTop = imgObj.top + imgObj.height / 2 + (yPosition - block.block.overlap) * this.imageScaleFactor;
                }

                var gLeft = imgObj.left - imgObj.width / 2 - xPosition * this.imageScaleFactor;
                if (!isNaN(imgObj.originalLeft)) {
                    gLeft = imgObj.originalLeft;
                }

                if (firstPos == null) {
                    firstPos = {
                        "top": gTop,
                        "left": gLeft
                    };
                    lastPos = {
                        "top": gTop,
                        "left": gLeft
                    };
                }
                lastPos.top = gTop;
                lastPos.left = gLeft;

                if (block.jumperPositionModel.jumpered) {
                    // this is the jumper
                    var markRect = new fabric.Rect({
                        id: jumperId,
                        fill: "black",
                        stroke: "white",
                        strokeWidth: 3,
                        width: 25,
                        height: 25,
                        // opacity: 0.8, // debug only
                        originX: "center",
                        originY: "center",
                        selectable: false,
                        evented: false,
                        left: gLeft,
                        top: gTop
                    });
                    this.canvas.add(markRect);
                }
            }
            // this is the black line if it's notched
            var jumperRect = new fabric.Rect({
                id: jumperId,
                fill: "black",
                // stroke: "white",
                // strokeWidth: 3,
                width: lastPos.left - firstPos.left,
                height: 7,
                // opacity: 0.8, // debug only
                originX: "left",
                originY: "center",
                selectable: false,
                evented: false,
                left: firstPos.left,
                top: firstPos.top
            });
            this.canvas.add(jumperRect);
        },
        placeMarking: function (block) {
            var countSameY = 0;
            var tempY = null;
            // Count markings sideBySide
            for (var index = 0; index < block.markingPositionModels.length; index++) {
                yPos = block.markingPositionModels[index].yPosition;
                if (tempY == null) {
                    tempY = yPos;
                    countSameY++;
                } else if (tempY == yPos) {
                    countSameY++;
                }
            }

            for (var index = 0; index < block.markingPositionModels.length; index++) {
                var markingPosition = block.markingPositionModels[index];
                var marking = markingPosition.markingModel;
                if (marking != null && marking.value && marking.value.length > 0) {

                    //console.log("marking: ", marking);

                    var imgObj = this.findImageById(block.id);
                    //console.log("block imgObj: ", imgObj);

                    // label got the clamp width
                    var width = imgObj.width;
                    var height = 8 * this.imageScaleFactor;

                    if (block.materialNumber != null && block.materialNumber != undefined) {
                        if (block.materialNumber.lastIndexOf('69.920.1053.0', 0) === 0) {
                            width = width * 2;
                            height = height * 4;
                        } else if (block.materialNumber.lastIndexOf('69.920.1253.0', 0) === 0) {
                            height = height * 4;
                        }
                    }

                    var markRect = new fabric.Rect({
                        fill: this.nameColorMap[marking.color.toUpperCase()], //"white", // marking.color this is the german color name
                        stroke: "black",
                        width: width / countSameY,
                        height: height,
                        // opacity: 0.8, // debug only
                        originX: "center",
                        originY: "center"
                    });
                    // Text
                    var fontSize = {
                        1: 36,
                        2: 34,
                        3: 28,
                        4: 21,
                        5: 17,
                        6: 14,
                        7: 12,
                        8: 10,
                        9: 8,
                        10: 8,
                        20: 8
                    }
                    if (block.materialNumber != null && block.materialNumber != undefined) {
                        if (block.materialNumber.lastIndexOf('69.920.1053.0', 0) === 0) {
                            fontSize = {
                                1: 36,
                                2: 34,
                                3: 28,
                                4: 21,
                                5: 27,
                                6: 24,
                                7: 24,
                                8: 24,
                                9: 24,
                                10: 24,
                                11: 20,
                                12: 20,
                                13: 20,
                                14: 20,
                                15: 20,
                                16: 20,
                                17: 16,
                                18: 16,
                                19: 16,
                                20: 16
                            }
                        }
                    }

                    var markText = new fabric.Text(marking.value, {
                        fontSize: 40, //fontSize[marking.value.length],
                        fontFamily: "DIN1451",
                        angle: marking.angle,
                        fill: "black",
                        originX: "center",
                        originY: "center",
                    });

                    var scaleFactor = markRect.width * 0.8 / markText.width;
                    if (marking.angle == 90 || marking.angle == 270) {
                        scaleFactor = markRect.height * 0.8 / markText.width;
                    }

                    markText.scaleX = (scaleFactor > 1 ? 1 : scaleFactor);
                    markText.scaleY = (scaleFactor > 1 ? 1 : scaleFactor);
                    var gTop = imgObj.top - imgObj.height / 2 - (markingPosition.yPosition - block.overlap) * this.imageScaleFactor;
                    //console.log(gTop);
                    //console.log("Top: " + imgObj.top + " Height: " + imgObj.height + " MarkingPos: " + markingPosition.yPosition + " Overlap: " + block.overlap + " Scale: " + this.imageScaleFactor);

                    var gLeft = imgObj.left - imgObj.width / 2 - markingPosition.xPosition * this.imageScaleFactor;
                    if (!isNaN(imgObj.originalLeft)) {
                        gLeft = imgObj.originalLeft;
                    }
                    var gAngle = 0;

                    if (block.rotated) {
                        // TODO calc pos
                        gTop = imgObj.top + imgObj.height / 2 + (markingPosition.yPosition - block.overlap) * this.imageScaleFactor;
                        gAngle = 180;
                        // this.imageScaleFactor;
                    }

                    if (block.materialNumber != null && block.materialNumber != undefined) {
                        if (block.materialNumber.lastIndexOf('69.920.1053.0', 0) === 0) {
                            gLeft = gLeft - width / 4;
                        }
                    }

                    var markGroup = new fabric.Group([markRect, markText], {
                        id: marking.id,
                        originX: "center",
                        originY: "center",
                        selectable: false,
                        evented: false,
                        left: gLeft,
                        top: gTop,
                        angle: gAngle
                    });

                    // this.canvas.add(markText);
                    this.canvas.add(markGroup);
                    // markText.bringToFront();

                    if (markGroup.top - markGroup.height / 2 < imgObj.top - imgObj.height / 2
                        || markGroup.top + markGroup.height / 2 > imgObj.top + imgObj.height / 2) {
                        imgObj.padding = 20;
                    }
                }
            }
        },
        placeLel: function (block) {

            for (var index = 0; index < block.lelPositionModels.length; index++) {
                var lelpos = block.lelPositionModels[index];
                if (lelpos.lelModel) {

                    //console.log("lelpos: ", lelpos);

                    var lelModel = lelpos.lelModel;

                    var imgObj = this.findImageById(block.id);
                    //console.log("block imgObj: ", imgObj);

                    // label got the clamp width
                    var width = imgObj.width;
                    var height = 8 * this.imageScaleFactor;

                    var lelRect = new fabric.Rect({
                        fill: this.nameColorMap[lelModel.color.toUpperCase()],
                        stroke: "white",
                        strokeWidth: 1,
                        width: 48,
                        height: 48,
                        //opacity: 0.8, // debug only
                        originX: "center",
                        originY: "center"
                    });
                    var lelCircle = new fabric.Circle({
                        fill: "black",
                        stroke: "white",
                        strokeWidth: 1,
                        radius: 15,
                        opacity: 0.8, // debug only
                        originX: "center",
                        originY: "center"
                    });

                    var gTop = imgObj.top - imgObj.height / 2 - (lelpos.yPosition - block.overlap) * this.imageScaleFactor;
                    var gLeft = imgObj.left; // + lel.xPosition * this.imageScaleFactor,
                    if (!isNaN(imgObj.originalLeft)) {
                        gLeft = imgObj.originalLeft;
                    }
                    var gAngle = 0;

                    if (block.rotated) {
                        // TODO calc pos
                        gTop = imgObj.top + imgObj.height / 2 + (lelpos.yPosition - block.overlap) * this.imageScaleFactor;
                        gAngle = 180;
                    }

                    var lelGroup = new fabric.Group([lelRect, lelCircle], {
                        id: lelModel.id,
                        originX: "center",
                        originY: "center",
                        selectable: false,
                        evented: false,
                        left: gLeft,
                        top: gTop,
                        angle: gAngle
                    });

                    // this.canvas.add(markText);
                    this.canvas.add(lelGroup);
                    // markText.bringToFront();
                }
            }
        },
        placeCover: function (block) {

            for (var index = 0; index < block.coverPositionModels.length; index++) {
                var coverpos = block.coverPositionModels[index];
                if (coverpos.coverModel) {

                    //console.log("coverpos: ", coverpos);

                    var coverModel = coverpos.coverModel;

                    var imgObj = this.findImageById(block.id);
                    //console.log("block imgObj: ", imgObj);

                    // label got the clamp width
                    var width = imgObj.width - 10;
                    var height = 8 * this.imageScaleFactor;

                    var coverRect = new fabric.Rect({
                        //fill: this.nameColorMap[coverModel.color],
                        fill: "yellow",
                        stroke: "black",
                        strokeWidth: 1,
                        width: width,
                        height: width,
                        //opacity: 0.8, // debug only
                        originX: "center",
                        originY: "center"
                    });

                    var coverTri = new fabric.Triangle({
                        //fill: this.nameColorMap[coverModel.color],
                        fill: "yellow",
                        stroke: "black",
                        strokeWidth: 1,
                        width: width * 0.8,
                        height: width * 0.8,
                        //opacity: 0.8, // debug only
                        originX: "center",
                        originY: "center"
                    });

                    var coverText = new fabric.Text('\u21AF', {
                        fontSize: width * 0.5,
                        fontFamily: "Arial",
                        //fill: "black",
                        originX: "center",
                        originY: "center",
                        top: width * 0.15
                    });

                    var gTop = imgObj.top - imgObj.height / 2 - (coverpos.yPosition - block.overlap) * this.imageScaleFactor;
                    var gLeft = imgObj.left; // + lel.xPosition * this.imageScaleFactor,
                    if (!isNaN(imgObj.originalLeft)) {
                        gLeft = imgObj.originalLeft;
                    }
                    var gAngle = 0;
                    if (block.rotated) {
                        // TODO calc pos
                        gTop = imgObj.top + imgObj.height / 2 + (coverpos.yPosition - block.overlap) * this.imageScaleFactor;
                        gAngle = 180;
                        // this.imageScaleFactor;
                    }


                    var coverGroup = new fabric.Group([coverRect, coverTri, coverText], {
                        id: coverModel.id,
                        originX: "center",
                        originY: "center",
                        selectable: false,
                        evented: false,
                        left: gLeft,
                        top: gTop,
                        angle: gAngle
                    });

                    // this.canvas.add(markText);
                    this.canvas.add(coverGroup);
                    // markText.bringToFront();
                }
            }
        },
        placeRotateInfo: function (block) {
            var imgObj = this.findImageById(block.id);
            //console.log("block imgObj: ", imgObj);

            // label got the clamp width
            var width = imgObj.width - 10;
            var height = 8 * this.imageScaleFactor;

            var coverRect = new fabric.Rect({
                //fill: this.nameColorMap[coverModel.color],
                fill: "yellow",
                stroke: "black",
                strokeWidth: 1,
                width: width,
                height: width,
                //opacity: 0.8, // debug only
                originX: "center",
                originY: "center"
            });

            var coverText = new fabric.Text('\uF021', {
                fontSize: 25,
                fontFamily: "FontAwesome",
                //fill: "black",
                originX: "center",
                originY: "center",
                top: width * 0.15
            });

            var gLeft = imgObj.left; // + lel.xPosition * this.imageScaleFactor,
            if (!isNaN(imgObj.originalLeft)) {
                gLeft = imgObj.originalLeft;
            }

            var coverGroup = new fabric.Group([coverText], {
                id: 'RotateInfo_' + block.id,
                originX: "center",
                originY: "center",
                selectable: false,
                evented: false,
                left: gLeft,
                top: 300,
                name: "ignoreInZoom",
                angle: 0
            });

            // this.canvas.add(markText);
            this.canvas.add(coverGroup);
        },
        placeImageObj: function (cacheImgObj, left, block) {

            // check if this block is an "SpaceBlockModel"
            if (block["@type"] == "spaceBlock") {
                // in this case we do not place an image
                // create transparent block
                var rectHeight = block.height; // mm
                var spaceRect = new fabric.Rect({
                    fill: "transparent",
                    stroke: "transparent",

                    borderColor: "#6C0",
                    borderScaleFactor: 1 / 7, // border width 7
                    hasControls: false,
                    lockMovementX: true,
                    lockMovementY: true,
                    borderOpacityWhenMoving: 1,
                    originX: "center",
                    originY: "center",

                    left: left + block.width * this.imageScaleFactor / 2,
                    top: this.railStartY, // - rectHeight * this.imageScaleFactor / 2,
                    width: block.width * this.imageScaleFactor,
                    rawWidth: block.width,
                    height: rectHeight * this.imageScaleFactor,
                    id: block.id,
                    name: "spaceBlock"
                });

                // TRA: Save object for reselect in update method
                block.imgObj = spaceRect;
                this.canvas.add(spaceRect);

                // Add comment to space block
                if (block.comment && block.comment != null) {
                    var comment = new fabric.Rect({
                        originX: "center",
                        originY: "center",
                        left: spaceRect.left,
                        top: spaceRect.top + spaceRect.height / 2 + 5 * this.imageScaleFactor,
                        width: 0,
                        height: 0,
                        name: "comment",
                        id: "comment_" + block.id
                    });
                    this.canvas.add(comment);
                }

                return block.width * this.imageScaleFactor;
            } else if (block["@type"] == "customObject") {
                // in this case we do not place an image
                var rectHeight = block.deepth; // mm
                var spaceRect = new fabric.Rect({
                    fill: block.color,
                    stroke: "black",

                    borderColor: "#6C0",
                    borderScaleFactor: 1 / 7, // border width 7
                    hasControls: false,
                    lockMovementX: true,
                    lockMovementY: true,
                    borderOpacityWhenMoving: 1,
                    originX: "center",
                    originY: "center",

                    left: left + block.width * this.imageScaleFactor / 2,
                    top: this.railStartY, // - rectHeight * this.imageScaleFactor / 2,
                    width: block.width * this.imageScaleFactor,
                    rawWidth: block.width,
                    height: rectHeight * this.imageScaleFactor,
                    id: block.id,
                    name: "customObject"
                });

                var railWidth = 35;
                spaceRect.setTop(this.railStartY - railWidth * this.imageScaleFactor / 2 - block.overlap * this.imageScaleFactor + spaceRect.height / 2);
                if (block.rotated) {
                    spaceRect.rotated = true;
                    spaceRect.setTop(this.railStartY - spaceRect.height + railWidth * this.imageScaleFactor / 2 + block.overlap * this.imageScaleFactor
                        + spaceRect.height / 2);
                    spaceRect.setAngle(180);
                }

                // TRA: Save object for reselect in update method
                block.imgObj = spaceRect;
                this.canvas.add(spaceRect);

                var fontcolor = 'black';
                if (block.color == 'black') {
                    fontcolor = 'white';
                }
                var markText = new fabric.Text(block.favoriteCustomerMaterialNumber, {
                    hasControls: false,
                    lockMovementX: true,
                    lockMovementY: true,
                    fontSize: 100,
                    selectable: false,
                    evented: false,
                    fill: fontcolor,
                    left: spaceRect.left,
                    top: spaceRect.top,
                    originX: "center",
                    originY: "center",
                    angle: 90
                });
                var scaleFactor = spaceRect.height * 0.8 / markText.width;
                markText.scaleX = (scaleFactor > 1 ? 1 : scaleFactor);
                markText.scaleY = (scaleFactor > 1 ? 1 : scaleFactor);
                this.canvas.add(markText);

                return block.width * this.imageScaleFactor;
            }

            if (cacheImgObj == null) {
                cacheImgObj = this.imageCache["placeholder"];
                if (cacheImgObj == null) {
                    return 10 * this.imageScaleFactor;
                }
            }
            // if this image is already placed on the canvas
            var cachedMatno = cacheImgObj.get("matno");
            var cachedOverlap = cacheImgObj.get("overlap");
            if (cachedMatno) {
                var placedImage = this.findImageByMatnoAndLeft(cachedMatno);
                if (placedImage) {
                    if (placedImage.left == left) {
                        return left;
                    }
                }
            }
            var imgObj = fabric.util.object.clone(cacheImgObj);
            if (block.materialType == 'AccessoryEndPlate') {
                imgObj.selectable = false;
                imgObj.name = 'endPlate';
            } else if (block.materialType == 'AccessoryPartition') {
                imgObj.selectable = false;
                imgObj.name = 'partitionPlate';
            }
            left = left || 150;
            rotated = block.rotated;
            var imageWidth = 0;
            var self = this;

            // //console.log("imgObj: " + imgObj + " left: " + left);

            imageWidth = imgObj.width;
            imageHeight = imgObj.height;
            // //console.log("imgObj: " + imgObj + " set imageWidth: " + imageWidth);

            // if (self.scale != 1) {
            // // oImg.resizeFilters.push(new
            // // fabric.Image.filters.Resize({
            // // resizeType : 'sliceHack'
            // // }));
            // imgObj.scale(self.scale);
            // }

            // TODO get this from configuration
            var railWidth = 35;
            imgObj.setTop(this.railStartY - railWidth * this.imageScaleFactor / 2 - cachedOverlap * this.imageScaleFactor + imageHeight / 2);
            imgObj.left = left + imageWidth / 2;
            imgObj.set("id", block.id)
            if (rotated) {
                imgObj.rotated = true;
                imgObj.setTop(this.railStartY - imageHeight + railWidth * this.imageScaleFactor / 2 + cachedOverlap * this.imageScaleFactor
                    + imageHeight / 2);
                imgObj.setAngle(180);
            }

            // TRA: Save object for reselect in update method
            block.imgObj = imgObj;
            self.canvas.add(imgObj);

            if (block.comment && block.comment != null) {
                var comment = new fabric.Rect({
                    originX: "center",
                    originY: "center",
                    left: imgObj.left,
                    top: imgObj.top + imgObj.height / 2 + 5 * this.imageScaleFactor,
                    width: 0,
                    height: 0,
                    name: "comment",
                    id: "comment_" + block.id
                });
                self.canvas.add(comment);
            }
            // this.canvas.renderAll()

            // TRA: disable select, because
            // it throws slect event and delete other selections
            //if (block.selected == true) {
            //self.canvas.setActiveObject(imgObj);
            //}
            // //console.log("imageName: " + imgObj + " overlap: " + cachedOverlap + " return imageWidth: " + imageWidth);
            return imageWidth;
        },
        /**
         * This function is called if an image on the canvas gets selected or deselected. It collect all fabric objects
         * that are active (selected) and returns a list of all selected ids.
         */
        getSelectedBlocks: function (e) {

            // array of id object (for primefaces)
            var selectedIds = [];

            // id strings only
            var selectedIdsArray = [];

            if (e && e.target) {
                if (e.target._objects) {
                    for (var index = 0; index < e.target._objects.length; index++) {
                        var selObj = e.target._objects[index];
                        var item = {
                            name: 'selectedBlockIds',
                            value: selObj.get("id")
                        };
                        selectedIds.push(item);
                        selectedIdsArray.push(selObj.get("id"))
                        // selObj.bringToFront();
                    }
                } else {
                    var selObj = e.target;
                    var item = {
                        name: 'selectedBlockIds',
                        value: selObj.get("id")
                    };
                    selectedIds.push(item);
                    selectedIdsArray.push(selObj.get("id"))
                    // selObj.bringToFront();
                }
            }

            //console.log("selectedIdsArray: ", selectedIdsArray);

            this.setSelectedBlocksId(selectedIdsArray);
            // update server side selection list
            setSelectedBlocks(selectedIds);
        },
        /**
         * zooming from xhtml slider
         *
         * @param sliderValue
         *            The sliderValues are 0, 25, 50, 75, 100
         */
        zoom: function (sliderValue) {
            //console.log("new zoom: ", sliderValue);
            var self = this;
            var z = 1; // doing nothing

            switch (sliderValue) {
                case "100":
                    z = 1.5;
                    break;
                case "75":
                    z = 1;
                    break;
                case "50":
                    z = 0.75;
                    break;
                case "25":
                    z = 0.5;
                    break;
                case "0": // TODO calc bounding box to show all
                    z = 0.4;
                    break;
            }

            var factor = 1.0 / self.scale; // results in scale 1
            factor = factor * z;
            this.scale = z;
            this.zoomIt(factor, self.canvas, self.scale);
        },
        zoomIt: function (factor, actualCanvas, scaleOfCanvas) {

            var smallestTop;
            var highestBottom;
            var group = actualCanvas.getActiveGroup();

            if (actualCanvas == undefined) {
                actualCanvas = this.canvas;
            }
            if (scaleOfCanvas == undefined) {
                scaleOfCanvas = this.scale;
            }
            if (group != null) {
                group.addWithUpdate();
                group.saveCoords();
            }

            var objects = actualCanvas.getObjects();
            for (var i in objects) {
                if (objects[i].name == 'lineal' || objects[i].name == 'ignoreInZoom') {
                    continue;
                } else if (group == null || !group.contains(objects[i])) {
                    var tempTop = (objects[i].top * factor) - (objects[i].height / 2 * scaleOfCanvas);
                    var tempBottom = tempTop + objects[i].height * scaleOfCanvas;
                    if (!smallestTop || smallestTop > tempTop) {
                        smallestTop = tempTop;
                    }
                    if (!highestBottom || highestBottom < tempBottom) {
                        highestBottom = tempBottom;
                    }
                    //console.log("Object - " + objects[i].top + " - " + tempTop + " - " + tempBottom + " - " + (objects[i].height));
                } else if (group != null && group.contains(objects[i])) {
                    var tempTop = (objects[i].originalTop * factor) - (objects[i].height / 2 * scaleOfCanvas);
                    var tempBottom = tempTop + objects[i].height * scaleOfCanvas;
                    if (!smallestTop || smallestTop > tempTop) {
                        smallestTop = tempTop;
                    }
                    if (!highestBottom || highestBottom < tempBottom) {
                        highestBottom = tempBottom;
                    }

                    //console.log("Group - " + objects[i].originalTop + " - " + tempTop + " - " + tempBottom + " - " + (objects[i].height));
                }
            }

            var topMargin = 100;
            var moveFactor = smallestTop - (topMargin * scaleOfCanvas);
            //console.log(moveFactor);

            var canvasHeight = highestBottom - smallestTop + (topMargin * 2 * scaleOfCanvas);

            if (canvasHeight < $(".ui-tabs-panel[aria-hidden=false] .container-rail").outerHeight()) {
                var fillPixel = $(".ui-tabs-panel[aria-hidden=false] .container-rail").outerHeight() - canvasHeight;
                moveFactor = moveFactor - fillPixel / 2;
                canvasHeight = $(".ui-tabs-panel[aria-hidden=false] .container-rail").outerHeight();
            }

            var canvasWidth = (this.railLength * this.imageScaleFactor) * scaleOfCanvas + 2 * this.railStartX;
            if (canvasWidth < $(".ui-tabs-panel[aria-hidden=false] .container-rail").outerWidth()) {
                canvasWidth = $(".ui-tabs-panel[aria-hidden=false] .container-rail").outerWidth();
            }

            actualCanvas.setHeight(canvasHeight);
            actualCanvas.setWidth(canvasWidth);

            if (this.moveFactor == null) {
                this.moveFactor = moveFactor;
            }
            // if (canvas.backgroundImage) {
            // // Need
            // to scale background images as well
            // var bi = canvas.backgroundImage;
            // bi.width = bi.width * factor;
            // bi.height = bi.height * factor;
            // }

            for (var i = objects.length - 1; i >= 0; i--) {
                if (group == null || !group.contains(objects[i])) {
                    var scaleX = objects[i].scaleX;
                    var scaleY = objects[i].scaleY;
                    var left = objects[i].left;
                    var top = objects[i].top;

                    var tempScaleX = scaleX * factor;
                    var tempScaleY = scaleY * factor;
                    var tempLeft = left * factor;
                    var tempTop = top * factor;

                    objects[i].scaleX = tempScaleX;
                    objects[i].scaleY = tempScaleY;
                    objects[i].left = tempLeft;

                    if (objects[i].name == 'lineal') {
                        objects[i].top = smallestTop - moveFactor - (50 * scaleOfCanvas);
                    } else if (objects[i].name == 'ignoreInZoom') {
                        objects[i].top = smallestTop - moveFactor - (75 * scaleOfCanvas);
                    } else {
                        objects[i].top = tempTop - moveFactor;
                    }

                    //console.log(objects[i].name);
                    if (objects[i].name == 'comment') {
                        $('.' + objects[i].id).css("visibility", "visible");
                        $('.' + objects[i].id).css("top", (objects[i].top) + "px");
                        $('.' + objects[i].id).css("left", (objects[i].left - 17) + "px");
                    }
                }

                objects[i].borderScaleFactor = 1 / 10 / scaleOfCanvas;
                objects[i].setCoords();
            }

            /*
            if(this.showBores) {
                for (var i = objects.length-1; i>=0; i--) {
                    if (objects[i].notTransparentable) {
                        actualCanvas.bringToFront(objects[i]);

                    } else {
                        if (this.showBores) {
                            objects[i].opacity = 0.2;
                        } else {
                            objects[i].opacity = 1.0;
                        }
                    }
                }
            } else {
                for (var i in objects) {
                    if (objects[i].notTransparentable) {
                        actualCanvas.moveTo(objects[i], 3);

                    } else {
                        if (this.showBores) {
                            objects[i].opacity = 0.2;
                        } else {
                            objects[i].opacity = 1.0;
                        }
                    }
                }
            }*/


            if (group != null) {
                var scaleX = group.scaleX;
                var scaleY = group.scaleY;
                var left = group.left;
                var top = group.top;

                var tempScaleX = scaleX * factor;
                var tempScaleY = scaleY * factor;
                var tempLeft = left * factor;
                var tempTop = top * factor - moveFactor;

                group.scaleX = tempScaleX;
                group.scaleY = tempScaleY;
                group.left = tempLeft;
                group.top = tempTop;

                //group.setCoords();
            }

            actualCanvas.renderAll();
            actualCanvas.calcOffset();
        },
        toggleShowBores: function (showBores) {
            if (showBores != null) {
                this.showBores = showBores;
            } else if (this.showBores) {
                this.showBores = false;
            } else {
                this.showBores = true;
            }

            updateActiveMountingRail();
        },
        findImageById: function (id) {
            var object = {};
            var objects = this.canvas.getObjects();

            for (var i = 0, len = this.canvas.size(); i < len; i++) {
                if (objects[i].get("id") && objects[i].get("id") === id) {
                    object = objects[i];
                    break;
                }
            }
            return object;
        },
        findImagesById: function (id) {
            var object = [];
            var objects = this.canvas.getObjects();

            for (var i = 0, len = this.canvas.size(); i < len; i++) {
                if (objects[i].get("id") && objects[i].get("id") === id) {
                    object.push(objects[i]);
                }
            }
            return object;
        },
        rotateSelectedBlock: function () {

            var selectedIds = this.getSelectedBlocksId();

            var self = this;

            for (var i = 0; i < selectedIds.length; i++) {
                // rotate the first selected
                var imgObj = this.findImageById(selectedIds[i]);
                var angle = imgObj.angle;
                if (angle == 180) {
                    angle = 0;
                } else {
                    angle = 180;
                }

                // calc new image top
                // var imageWidth = imgObj.width / this.scale;
                // var imageHeight = imgObj.height / this.scale;
                var imageTopPos = imgObj.getTop();

                var newTop = 2 * this.railStartY * this.scale - imageTopPos;

                var scaleX = imgObj.get("scaleX");
                var scaleY = imgObj.get("scaleY");
                imgObj.animate({
                    'scaleX': scaleX * 1.2,
                    'scaleY': scaleY * 1.2
                }, {
                    duration: 300,
                    onChange: self.canvas.renderAll.bind(this.canvas),
                    onComplete: function () {
                        //console.log("onComplete scale * 1.2");
                        imgObj.animate({
                            'angle': angle
                        }, {
                            duration: 1000,
                            onChange: self.canvas.renderAll.bind(self.canvas),
                            easing: fabric.util.ease.easeOutBack,
                            onComplete: function () {
                                // scale back
                                //console.log("onComplete 'angle': " + angle);
                                imgObj.animate({
                                    'scaleX': scaleX,
                                    'scaleY': scaleY,
                                    top: newTop
                                }, {
                                    duration: 200,
                                    onChange: self.canvas.renderAll.bind(self.canvas)
                                });
                            }
                        });
                    }
                });
            }

            //console.log("rotateSelectedBlock: ", selectedIds);
        },
        /**
         * remove the selected block and do the animation
         */
        removeSelectedBlock: function () {
            var selectedIds = this.getSelectedBlocksId();
            //console.log("removeSelectedBlock: ", selectedIds);

            var self = this;

            /**
             * this function moves all specified blocks in sequence
             */
            function moveBlocks(blocks, index, moveWidth) {

                if (index < blocks.length) {

                    var block = blocks[index];
                    var imgObj = self.findImageById(block.id);
                    // var imageWidth = imgObj.width * self.scale;
                    var left = imgObj.left;
                    var newLeft = left - moveWidth;

                    imgObj.animate({
                        "left": newLeft
                    }, {
                        duration: 200,
                        onChange: self.canvas.renderAll.bind(self.canvas),
                        // easing: fabric.util.ease.easeOutElastic,
                        onComplete: function () {
                            moveBlocks(blocks, index + 1, moveWidth);
                        }
                    });

                    // check if there is an endPlate
                    if (block.endPlate) {
                        imgObjEndPlate = self.findImageById(block.endPlate.id);
                        imgObjEndPlate.animate({
                            "left": "-=" + moveWidth
                        }, {
                            duration: 200
                        });
                    }
                }
            }

            if (selectedIds.length > 0) {

                if (selectedIds.length > 1) {
                    var imgObjs = [];
                    for (var index = 0; index < selectedIds.length; index++) {
                        imgObjs.push(this.findImageById(selectedIds[index]))
                    }
                    var group = new fabric.Group(imgObjs);
                    group.animate({
                        'opacity': 0
                    }, {
                        duration: 500,
                        onChange: this.canvas.renderAll.bind(this.canvas),
                        onComplete: function () {
                            self.update();
                        }
                    });
                } else {
                    // remove the first selected
                    var selId = selectedIds[0];
                    var imgObj = this.findImageById(selId);
                    var block = this.getBlockById(selId)
                    var blocksToMove = this.getBlocksOnRight(block)

                    imgObj.animate({
                        'opacity': 0
                    }, {
                        duration: 500,
                        onChange: this.canvas.renderAll.bind(this.canvas),
                        onComplete: function () {

                            // do the animation of the blocks on the right
                            var widthToMove = imgObj.width * self.scale

                            self.canvas.remove(imgObj);

                            // check if there are an endPlate
                            if (block.endPlate) {
                                imgObjEndPlate = self.findImageById(block.endPlate.id);
                                widthToMove += imgObjEndPlate.width * self.scale;

                                self.canvas.remove(imgObjEndPlate);
                            }

                            // animate only if there are not too many block
                            //if (blocksToMove.length < 12) {
                            //    moveBlocks(blocksToMove, 0, widthToMove);
                            //    self.removeBlockFromRail(block);
                            //} else {
                            //    self.update();
                            //}
                        }
                    });
                }
            }
        },
        copySelectedBlock: function () {
            var selectedIds = this.getSelectedBlocksId();
            //console.log("copySelectedBlock: ", selectedIds);

            var self = this;

            if (selectedIds.length > 0) {
                // remove the first selected
                var selId = selectedIds[0];
                var selImgObj = this.findImageById(selId);
                var block = this.getBlockById(selId)
                var blocksToMove = this.getBlocksOnRight(block)

                var widthToMove = selImgObj.width * self.scale

                for (var index = 0; index < blocksToMove.length; index++) {
                    var block = blocksToMove[index];
                    var imgObj = self.findImageById(block.id);
                    imgObj.left += widthToMove;

                    // check if there is an endPlate
                    if (block.endPlate) {
                        imgObjEndPlate = self.findImageById(block.endPlate.id);
                        imgObjEndPlate.left += widthToMove;
                    }
                }

                var newImgObj = fabric.util.object.clone(selImgObj);
                newImgObj.left += widthToMove;
                newImgObj.opacity = 0;
                this.canvas.add(newImgObj);

                this.canvas.renderAll();

                newImgObj.animate({
                    'opacity': 1
                }, {
                    duration: 500,
                    onChange: this.canvas.renderAll.bind(this.canvas),
                    onComplete: function () {
                        // TODO consider updating the also the block array not only the image
                        self.update();
                    }
                });
            }
        },
        updateRailPosition: function () {

            var bbox = this.getBoundingBox(this.canvas);

            var bb = this.canvas.viewportTransform;
            //console.log("canvas: ", bb)

            var p = new fabric.Point(10 - bbox.left, 50 - bbox.top);
            this.canvas.absolutePan(p);
            // this.canvas.relativePan(p);

        },
        getBoundingBox: function (cvs) {

            var bbox = {
                left: 1000,
                top: 1000,
                right: -1000,
                bottom: -1000
            };

            cvs.forEachObject(function (obj) {

                var bb = obj.getBoundingRect();
                // //console.log("bb: ", bb);

                if (bbox.left > bb.left) {
                    bbox.left = bb.left;
                }
                if (bbox.top > bb.top) {
                    bbox.top = bb.top;
                }
                if (bbox.right - bbox.left < bb.width) {
                    bbox.right = bbox.left + bb.width;
                }
                if (bbox.bottom - bbox.top < bb.height) {
                    bbox.bottom = bbox.top + bb.height;
                }
                // //console.log("bbox: ", bbox);

            });

            // debug only
            //cvs.contextContainer.strokeStyle = '#555';
            //this.canvas.contextContainer.strokeRect(bbox.left, bbox.top, bbox.right - bbox.left, bbox.bottom - bbox.top);
            return bbox;
        },
        /**
         * This function is called by the GUI to position the flyout menu.
         */
        getAbsoluteBoundingBoxOfSelectedBlock: function () {

            var selectedIds = this.getSelectedBlocksId();
            //console.log("getAbsoluteBoundingBoxOfSelectedBlock: ", selectedIds);

            var result = {
                left: 100,
                top: 100,
                right: 200,
                bottom: 200
            };

            var self = this;

            if (selectedIds.length > 0) {
                var selGroup = this.canvas.getActiveGroup();
                if (selGroup) {
                    //console.log("getAbsoluteBoundingBoxOfSelectedBlock: group selection");

                    // the selection group is already scaled
                    var imageWidth = selGroup.width * selGroup.scaleX;
                    var imageHeight = selGroup.height * selGroup.scaleY;


                    var left = selGroup.left;// - imageWidth / 2; // + this.canvas._offset.left;
                    var top = selGroup.top;// - imageHeight / 2; // + this.canvas._offset.top;

                    var right = left + imageWidth;
                    var bottom = top + imageHeight;

                    result = {
                        left: left,
                        top: top,
                        right: right,
                        bottom: bottom
                    };

                    //console.log("getAbsoluteBoundingBoxOfSelectedBlock result: ", result.left, result.right, result.top, result.bottom);

                } else {
                    var imgObj = this.findImageById(selectedIds[0]);
                    //console.log("getAbsoluteBoundingBoxOfSelectedBlock using id: ", selectedIds[0]);

                    var imageWidth = imgObj.width * this.scale;
                    var imageHeight = imgObj.height * this.scale;

                    // because originY == center
                    var left = imgObj.left - imageWidth / 2; // + this.canvas._offset.left;

                    // because originY == center
                    var top = imgObj.top - imageHeight / 2; // + this.canvas._offset.top;

                    var right = left + imageWidth;
                    var bottom = top + imageHeight;

                    result = {
                        left: left,
                        top: top,
                        right: right,
                        bottom: bottom
                    };
                    //console.log("getAbsoluteBoundingBoxOfSelectedBlock result: ", result.left, result.right, result.top, result.bottom);
                }
            }

            return result;
        },
        /**
         * Draw a dimension line
         * Returns a list of objects.
         * These objects should be added to the canvas by the caller
         *
         * @param cvs
         * @param params
         */
        drawDimensionLine: function (param) {

            var lines = [];
            // startX: obj.left,
            // startY: obj.top,
            // orientation: "horizontal",
            // distance: 100,
            // endX: obj.left + obj.width,
            // endY: obj.top,
            // text: "martin"

            if (param.orientation == "horizontal") {

                // helper lines
                var points = [param.startX, param.startY, param.startX, param.startY + param.distance];

                var line = new fabric.Line(points, {
                    fill: "black",
                    stroke: "black",
                    strokeWidth: 3,
                    selectable: false
                });
                lines.push(line);

                points = [param.endX, param.endY, param.endX, param.endY + param.distance];

                line = new fabric.Line(points, {
                    fill: "black",
                    stroke: "black",
                    strokeWidth: 3,
                    selectable: false
                });
                lines.push(line);

                // Dimension line with arrows
                var triangleWidth = 16;
                var triangleHeight = 14;
                var extend = 0;

                // Extend very short lines
                if ((param.endX - param.startX) / this.imageScaleFactor < 6) {
                    extend = 50;
                }

                points = [(param.startX - extend) + triangleWidth, param.startY + param.distance, (param.endX + extend) - triangleWidth, param.endY + param.distance];

                line = new fabric.Line(points, {
                    fill: "black",
                    stroke: "black",
                    strokeWidth: 3,
                    selectable: false
                });
                lines.push(line);

                // Swap arrows for short lines
                var startXNew = param.startX;
                var endXNew = param.endX;

                if ((param.endX - param.startX) / this.imageScaleFactor < 6) {
                    startXNew = param.endX;
                    endXNew = param.startX;
                }

                // Left arrow
                var triangle = new fabric.Triangle({
                    angle: 270,
                    fill: "black",
                    top: param.endY + param.distance + 9,
                    left: startXNew + 3,
                    height: triangleWidth, // In fact width (angle)
                    width: triangleHeight, // In fact height (angle)
                    selectable: false
                });
                lines.push(triangle);

                // Right arrow
                var triangle = new fabric.Triangle({
                    angle: 90,
                    fill: "black",
                    top: param.endY + (param.distance - 6),
                    left: endXNew,
                    height: triangleWidth, // In fact width (angle)
                    width: triangleHeight, // In fact height (angle)
                    selectable: false
                });
                lines.push(triangle);

                if (param.text != undefined) {
                    //console.log("64830263: " + param.text);
                    debugger;
                    var dimensionText = new fabric.Text(param.text, {
                        fontSize: param.fontSize,
                        fontFamily: "Arial",
                        fontWeight: "bold",
                        fill: "black",
                        originX: "center",
                        originY: "center",
                        left: (param.startX + param.endX) / 2,
                        top: param.startY + param.distance - 14,
                        angle: 0
                    });
                    lines.push(dimensionText);
                }
            } else if (param.orientation == "vertical") {
                // helper lines
                var points = [param.startX, param.startY, param.startX + param.distance, param.startY];

                var line = new fabric.Line(points, {
                    fill: "black",
                    stroke: "black",
                    strokeWidth: 3,
                    selectable: false
                });
                lines.push(line);

                points = [param.endX, param.endY, param.endX + param.distance, param.endY];

                line = new fabric.Line(points, {
                    fill: "black",
                    stroke: "black",
                    strokeWidth: 3,
                    selectable: false
                });
                lines.push(line);

                // Dimension line with arrows
                var triangleWidth = 16;
                var triangleHeight = 14;
                var adjust = -2; // Half line thickness
                var extend = 0;

                // Extend very short lines
                if ((param.startY - param.endY) / this.imageScaleFactor < 6) {
                    extend = 50;
                }

                points = [param.startX + param.distance + adjust,
                    param.startY - triangleWidth + extend,
                    param.endX + param.distance + adjust,
                    param.endY + triangleWidth - extend];

                line = new fabric.Line(points, {
                    fill: "black",
                    stroke: "black",
                    strokeWidth: 3,
                    selectable: false
                });
                lines.push(line);

                // Swap arrows for short lines
                var startYNew = param.startY;
                var endYNew = param.endY;

                if ((param.startY - param.endY) / this.imageScaleFactor < 6) {
                    startYNew = param.endY;
                    endYNew = param.startY;
                }

                // Upper arrow
                var triangle = new fabric.Triangle({
                    angle: 180,
                    fill: "black",
                    top: startYNew,
                    left: param.endX + param.distance + (triangleWidth / 2 - 1),
                    height: triangleWidth, // In fact width (angle)
                    width: triangleHeight, // In fact height (angle)
                    selectable: false
                });
                lines.push(triangle);

                // Lower arrow
                var triangle = new fabric.Triangle({
                    angle: 0,
                    fill: "black",
                    top: endYNew,
                    left: param.endX + param.distance - (triangleWidth / 2),
                    height: triangleWidth, // In fact width (angle)
                    width: triangleHeight, // In fact height (angle)
                    selectable: false
                });
                lines.push(triangle);

                //console.log("34596720: " + param.text);
                if (param.text != undefined) {
                    var dimensionText = new fabric.Text(param.text, {
                        fontSize: param.fontSize,
                        fontFamily: "Arial",
                        fontWeight: "bold",
                        fill: "black",
                        originX: "center",
                        originY: "center",
                        left: param.endX + param.distance - 12,
                        top: (param.startY + param.endY) / 2,
                        angle: 270
                    });
                    lines.push(dimensionText);
                }
            }

            return lines;
        },

        drawGrayHelperLine: function (param) {
            var lines = [];
            var points = [param.startX, param.startY, param.endX, param.endY];

            var vLine = new fabric.Line(points, {
                fill: "LightGray",
                stroke: "LightGray",
                strokeWidth: 3,
                selectable: false,
                name: 'grayHelperLine'
            });

            lines.push(vLine);

            return lines;
        },

        drawPositionNumber: function (param) {
            var lines = [];

            var posNumberText = new fabric.Text(param.posText, {
                fontSize: param.fontSize,
                fontFamily: "Arial",
                fontWeight: "bold",
                fill: "black",
                originX: "center",
                originY: "center",
                left: param.startX,
                top: param.startY
            });

            lines.push(posNumberText);
            return lines;
        },

        // Rotate whole canvas 270 degrees
        rotateCanvas: function (cloneCanvas) {

            // Rotate each object by the same angle
            var canvasCenter = new fabric.Point(cloneCanvas.width / 2, cloneCanvas.height / 2);
            var rads = 4.71239; // degrees in radians
            cloneCanvas.getObjects().forEach(function (obj) {
                var objectOrigin = new fabric.Point(obj.left, obj.top);
                var new_loc = fabric.util.rotatePoint(objectOrigin, canvasCenter, rads);
                obj.top = new_loc.y;
                obj.left = new_loc.x;
                obj.angle += 270;
            });

            // Adapt width and height
            var newHeight = cloneCanvas.getWidth();
            cloneCanvas.setWidth(cloneCanvas.getHeight() + 10);
            cloneCanvas.setHeight(newHeight);

            // Rearrange object positions
            var xDiff;
            var yDiff;
            for (var i = 0; i < cloneCanvas.getObjects().length; i++) {
                // Arrange positions relative to ZPos object
                var obj = cloneCanvas.getObjects()[i];
                if (obj.get('type') === 'text' && obj.getText() === 'ZPos.') {
                    xDiff = obj.left - 15;
                    yDiff = newHeight - obj.top - 120;
                    break;
                }
            }

            cloneCanvas.getObjects().forEach(function (obj) {
                if (xDiff != null && yDiff != null) {
                    obj.left = obj.left - xDiff;
                    obj.top = obj.top + yDiff;
                }
            });

            return cloneCanvas;
        },

        // Get right offset block on canvas
        getRightOffsetBlock: function (objects) {
            var rightOffsetBlock = null;

            for (var i = objects.length - 1; i >= 0; i--) {
                rightOffsetBlock = objects[i];
                var objName = rightOffsetBlock.get("name");
                if (objName != undefined && objName == 'spaceBlock') {
                    break;
                }
            }
            return rightOffsetBlock;
        },
        downloadRailImage: function () {
            var self = this;

            this.canvas.clone(function (cloneCanvas) {
                var factor = 1.0 / self.scale;

                if (self.showBores) {
                    self.addBlocksToCloneCanvas(cloneCanvas);
                } else {
                    self.zoomIt(factor, cloneCanvas, 1);
                }

                var ua = window.navigator.userAgent;
                var msie = ua.indexOf("MSIE ");
                var trident = ua.indexOf('Trident/');
                var edge = ua.indexOf('Edge/');

                if (msie > 0 || trident > 0 || edge > 0) {
                    // IE Browser, here the download process must be different
                    var blob = cloneCanvas.getElement().msToBlob();
                    window.navigator.msSaveBlob(blob, $('.js-mainmenu-settings-button')[0].text + '__' + self.rail.mountingRailName + '.png');
                } else {
                    var dataURL = cloneCanvas.getElement().toDataURL('image/png');
                    dataURL = dataURL.replace(/^data:image\/[^;]/, 'data:application/octet-stream');

                    var a = document.createElement('a');
                    a.href = dataURL;
                    a.download = $('.js-mainmenu-settings-button')[0].text + '__' + self.rail.mountingRailName + '.png';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                }
            });
        },

        // TODO: Das ist ein Workaround, die Update Methode sollte geaendert werden und an dieser Stele benutzt werden
        addBlocksToCloneCanvas: function (cloneCanvas) {
            this.showBores = false;
            var tempCanvas = this.canvas;
            this.canvas = cloneCanvas;

            this.canvas.clear().renderAll();
            // reset zoom
            // self.canvas.setHeight(self.height);
            // self.canvas.setWidth(self.width);

            var highestHeight = 0;
            for (var index = 0; index < this.rail.allBlocks().length; index++) {
                var block = this.rail.allBlocks()[index];
                var cachedImage = this.imageCache[block.materialNumber];
                if (block["@type"] != "spaceBlock"
                    && block["@type"] != "customObject"
                    && cachedImage != null) {
                    var imgHeight = cachedImage.height;
                    if (imgHeight > highestHeight) {
                        highestHeight = imgHeight;
                    }
                }
            }
            this.railStartY = highestHeight;

            // Content height defined in initLayout.js
            if (this.railStartY * this.scale < contentHeight / 2) {
                this.railStartY = contentHeight / 2 / this.scale;
            }

            // replaced by background image
            // self.makeGraphPaper();

            this.drawRail(this.rail);

            if (!this.showBores) {
                var positionOnRail = this.railStartX; // + self.leftOffset * self.imageScaleFactor;

                var selectedImgObj = [];
                for (var index = 0; index < this.rail.allBlocks().length; index++) {
                    var block = this.rail.allBlocks()[index];
                    var cachedImage = this.imageCache[block.materialNumber];
                    var endplate = block.endPlate

                    // check for an endplate on the rotated block
                    if (endplate && block.rotated) {

                        endplate.rotated = block.rotated;
                        // place endplate on the left
                        positionOnRail += this.placeImageObj(this.imageCache[endplate.materialNumber], positionOnRail, endplate);
                    }

                    positionOnRail += this.placeImageObj(cachedImage, positionOnRail, block);
                    // check for marking
                    this.placeMarking(block);
                    this.placeLel(block); // Leiter Einführhilfe
                    this.placeCover(block); // Abdeckungen

                    // check for an endplate
                    if (endplate && !block.rotated) {
                        // place endplate on the right
                        positionOnRail += this.placeImageObj(this.imageCache[endplate.materialNumber], positionOnRail, endplate);
                    }


                }


                //self.canvas.setHeight(self.railStartY * 2);
                //self.canvas.setWidth(canvasWidth);

                this.placeJumper();
            }

            // restore zoom
            this.zoomIt(this.scale, this.canvas, this.scale);


            this.showBores = true;
            this.canvas = tempCanvas;
        },

        /**
         * upload the mounting drawings to the "generatePartsList" function
         *
         * The drawings are cloned from the
         */
        uploadRailImage: function (sendToShop) {

            var start = new Date().getTime();
            var self = this;

            this.canvas.clone(function (cloneCanvas) {
                var factor = 1.0 / self.scale;

                if (self.showBores) {
                    self.addBlocksToCloneCanvas(cloneCanvas);
                    self.zoomIt(factor, cloneCanvas, 1);
                } else {
                    self.zoomIt(factor, cloneCanvas, 1);
                }

                var end = new Date().getTime();
                //console.log("Time zoom: ", end - start);

                cloneCanvas.renderOnAddRemove = false;
                cloneCanvas.selection = false;

                var bb = self.getBoundingBox(cloneCanvas);
                var bottom = bb.bottom;
                var topOffsetTurnedNums = 25;
                var topOffset = 440 + topOffsetTurnedNums;
                cloneCanvas.setHeight(cloneCanvas.height + 900);
                cloneCanvas.calcOffset();

                // remove background (make it transparent)
                cloneCanvas.setBackgroundColor("white");

                var writingToAdd = [];
                var firstObjOnRail;
                var lastObjOnRail;
                var objLineal;
                var objPos = 1;
                var prevMatNo = null;
                var numBracketTerminals = 1;
                var lastObj = null;
                var isLastObjEndPlate = false;
                var railObjRect = null;
                var overallFontSize = 24;

                // rail material number
                var railMatno = "";
                if (self.rail != null) {
                    if (self.rail.materialNumber && self.rail.materialNumber.length > 0) {
                        railMatno = self.rail.materialNumber;
                    }
                }
                // add additional drawing info
                var objects = cloneCanvas.getObjects();
                var rightOffsetBlock = self.getRightOffsetBlock(objects);

                var end = new Date().getTime();
                //console.log("Time before iteration: ", end - start);

                for (var i = 0; i < objects.length; i++) {
                    var obj = objects[i];
                    obj.set("top", obj.get('top') + topOffset); // Shift all objects
                    obj.setCoords();

                    if (obj.elementType == 'bore') {
                        cloneCanvas.moveTo(obj, 3);
                    }
                    //obj.opacity = 1.0;

                    // draw gray helper line
                    if (i + 1 < objects.length) {
                        var nextObjOnRail = objects[i + 1];
                        var nextObjMatno = nextObjOnRail.get("matno");
                        var nextObjName = nextObjOnRail.get("name");

                        if ((nextObjMatno != undefined && nextObjMatno != railMatno)
                            || (nextObjName != undefined && nextObjName == 'spaceBlock' && nextObjOnRail != rightOffsetBlock)) {
                            writingToAdd = writingToAdd.concat(self.drawGrayHelperLine({
                                startX: nextObjOnRail.left - (nextObjOnRail.width / 2),
                                startY: 0,
                                endX: nextObjOnRail.left - (nextObjOnRail.width / 2),
                                endY: bottom + 1060
                            }));
                        }
                    }

                    if (obj != undefined) {
                        var objMatno = obj.get("matno");
                        var objStorageLocation = obj.get("storageLocation");
                        var width = obj.width;

                        // draw material number, position number and gray helper lines
                        if (objMatno != undefined) {
                            if (objMatno === railMatno) {
                                var railRect = obj.get("railRect");

                                if (railRect == true) {
                                    railObjRect = obj;
                                }

                                continue;
                            } else if (firstObjOnRail == undefined) {
                                firstObjOnRail = obj;
                            } else {
                                lastObjOnRail = obj;
                            }

                            var topDist;
                            if (objPos % 2 == 1) {
                                topDist = 50;
                            } else {
                                topDist = 30;
                            }

                            // draw position number
                            writingToAdd = writingToAdd.concat(self.drawPositionNumber({
                                startX: obj.left + 2,
                                startY: topDist,
                                fontSize: overallFontSize,
                                posText: "" + objPos++
                            }));

                            var objName = obj.get("name");
                            var isEndplate = false;
                            if (objName != undefined && objName == 'endPlate') {
                                isEndplate = true;
                            }

                            if (prevMatNo != null && prevMatNo === objMatno && isEndplate == false) {
                                numBracketTerminals++;

                                // same material number, so draw bracket
                                var objPrev = objects[i - 1];
                                var points = [objPrev.left, bottom + topOffset + 247, obj.left, bottom + topOffset + 247];
                                var hLine = new fabric.Line(points, {
                                    fill: "black",
                                    stroke: "black",
                                    strokeWidth: 3,
                                    selectable: false
                                });
                                writingToAdd.push(hLine);

                                // close bracket, if this is the last object with the same material number
                                for (var j = i + 1; j < objects.length; j++) {
                                    var nextObj = objects[j];
                                    if (nextObj != undefined) {
                                        var nextMatno = nextObj.get("matno");
                                        if (nextMatno != undefined) {
                                            if (objMatno != nextMatno) {
                                                var points = [obj.left - 3, bottom + topOffset + 230, obj.left - 3, bottom + topOffset + 247];
                                                var vLine = new fabric.Line(points, {
                                                    fill: "black",
                                                    stroke: "black",
                                                    strokeWidth: 3,
                                                    selectable: false
                                                });
                                                writingToAdd.push(vLine);

                                                // draw number of identical terminals inside the bracket
                                                if (lastObj != null) {
                                                    var topPosMatNo = bottom + topOffset + 437;
                                                    var materialNumberText = new fabric.Text(numBracketTerminals + " x", {
                                                        fontSize: overallFontSize,
                                                        fontFamily: "Arial",
                                                        fontWeight: "bold",
                                                        fill: "black",
                                                        originX: "center",
                                                        originY: "center",
                                                        left: lastObj.left + 4,
                                                        top: topPosMatNo + 5,
                                                        angle: 270
                                                    });
                                                    writingToAdd.push(materialNumberText);
                                                    numBracketTerminals = 1;
                                                    lastObj = null;
                                                }
                                            }
                                            break;
                                        }
                                    }
                                }
                            } else {
                                var topRotatedSymbol = bottom + topOffset + 470;
                                var topPosMatNo = bottom + topOffset + 340;
                                var topPosStorageLocation = bottom + topOffset + 545;
                                var topPosMarker = bottom + topOffset + 230;
                                var shiftPosMatNo = 0;

                                // Swap matNo position for end plates
                                if (isEndplate) {
                                    topRotatedSymbol = 165 + topOffsetTurnedNums;
                                    topPosMarker = 375 + topOffsetTurnedNums;
                                    topPosMatNo = 277 + topOffsetTurnedNums;
                                    topPosStorageLocation = 100 + topOffsetTurnedNums;

                                    if (isLastObjEndPlate) {
                                        shiftPosMatNo = 15;
                                    }
                                }

                                lastObj = obj;

                                //console.log("objStorageLocation ", objStorageLocation);
                                // draw storage location
                                if (objStorageLocation != null) {
                                    objStorageLocation = objStorageLocation.trim();
                                    var storageLocationText = new fabric.Text(objStorageLocation, {
                                        fontSize: width <= 15 ? overallFontSize - 5 : overallFontSize,
                                        fontFamily: "Arial",
                                        fontWeight: "bold",
                                        fill: "black",
                                        originX: "center",
                                        originY: "center",
                                        left: obj.left + shiftPosMatNo + 4,
                                        top: width <= 15 ? topPosStorageLocation + 10 : topPosStorageLocation,
                                        angle: 270
                                    });
                                    writingToAdd.push(storageLocationText);
                                }
                                // draw material number
                                var materialNumberText = new fabric.Text(objMatno, {
                                    fontSize: width <= 15 ? overallFontSize - 5 : overallFontSize,
                                    fontFamily: "Arial",
                                    fontWeight: "bold",
                                    fill: "black",
                                    originX: "center",
                                    originY: "center",
                                    left: obj.left + shiftPosMatNo + 4,
                                    top: topPosMatNo,
                                    angle: 270
                                });
                                writingToAdd.push(materialNumberText);

                                // draw marker or open bracket
                                var points = [obj.left, topPosMarker, obj.left, topPosMarker + 17];
                                var vLine = new fabric.Line(points, {
                                    fill: "black",
                                    stroke: "black",
                                    strokeWidth: 3,
                                    selectable: false
                                });
                                writingToAdd.push(vLine);

                                // draw rotated symbol
                                var objRotated = obj.get("rotated");
                                if (objRotated != undefined && objRotated == true) {
                                    // Create half circle
                                    var circle = new fabric.Circle({
                                        radius: 10,
                                        left: obj.left - 10 + shiftPosMatNo,
                                        top: topRotatedSymbol,
                                        angle: 0,
                                        startAngle: 180,
                                        endAngle: Math.PI,
                                        stroke: '#000',
                                        strokeWidth: 3,
                                        fill: '',
                                        selectable: false
                                    });
                                    writingToAdd.push(circle);

                                    // Add arrow
                                    var triangle = new fabric.Triangle({
                                        angle: Math.PI,
                                        fill: "black",
                                        top: topRotatedSymbol + 2,
                                        left: obj.left - 13 + shiftPosMatNo,
                                        height: 10,
                                        width: 10,
                                        selectable: false
                                    });
                                    writingToAdd.push(triangle);
                                }
                            }

                            prevMatNo = objMatno;
                            isLastObjEndPlate = isEndplate;
                        } else {
                            // get ruler object and remove it later on from canvas
                            var objName = obj.get("name");
                            if (objName != undefined && objName == 'lineal') {
                                objLineal = obj;
                            }

                            // draw dimension line for empty spaces, except for right offset block
                            if (objName != undefined && objName == 'spaceBlock' && obj != rightOffsetBlock) {
                                // draw position title
                                if (objPos == 1) {
                                    topDist = 20;
                                    writingToAdd = writingToAdd.concat(self.drawPositionNumber({
                                        startX: obj.left + 2,
                                        startY: topDist,
                                        fontSize: overallFontSize,
                                        posText: "ZPos."
                                    }));
                                }

                                // draw position number
                                var topDist;
                                if (objPos % 2 == 1) {
                                    topDist = 50;
                                } else {
                                    topDist = 30;
                                }
                                writingToAdd = writingToAdd.concat(self.drawPositionNumber({
                                    startX: obj.left + 2,
                                    startY: topDist,
                                    fontSize: overallFontSize,
                                    posText: "" + objPos++
                                }));

                                // draw dimension line
                                writingToAdd = writingToAdd.concat(self.drawDimensionLine({
                                    startX: obj.left - (obj.width / 2),
                                    startY: railObjRect.top,
                                    orientation: "horizontal",
                                    distance: -230,
                                    endX: obj.left + obj.width - (obj.width / 2),
                                    endY: railObjRect.top,
                                    fontSize: overallFontSize,
                                    text: "" + obj.rawWidth.toFixed(1)
                                }));

                                // previous material is now a space block without material number
                                prevMatNo = null;
                            }
                        }
                    }
                }

                var end = new Date().getTime();
                //console.log("Time after iteration: ", end - start);

                // draw position line on top (ZPos)
                var points = [20, 65, cloneCanvas.width - 20, 65];
                var posLine = new fabric.Line(points, {
                    fill: "black",
                    stroke: "black",
                    strokeWidth: 3,
                    selectable: false
                });
                writingToAdd.push(posLine);

                // draw dimension line from first object to last object on rail
                if (firstObjOnRail != undefined) {
                    if (lastObjOnRail == undefined) {
                        lastObjOnRail = firstObjOnRail;
                    }

                    var pixelsMoveToLeft = 60;
                    writingToAdd = writingToAdd.concat(self.drawDimensionLine({
                        startX: firstObjOnRail.left - (firstObjOnRail.width / 2),
                        startY: railObjRect.top - pixelsMoveToLeft,
                        orientation: "horizontal",
                        distance: -270,
                        endX: lastObjOnRail.left + lastObjOnRail.width - (lastObjOnRail.width / 2),
                        endY: railObjRect.top - pixelsMoveToLeft,
                        fontSize: overallFontSize,
                        //text: "" + self.railLength.toFixed(1)
                        // -1 damit der ersten Pixel des neuen Elements nicht mitgezählt wird
                        text: "" + (((lastObjOnRail.left + lastObjOnRail.width - (lastObjOnRail.width / 2)) - (firstObjOnRail.left - (firstObjOnRail.width / 2))) / self.imageScaleFactor).toFixed(1)
                    }));
                }
                // draw dimension line for whole rail
                writingToAdd = writingToAdd.concat(self.drawDimensionLine({
                    startX: railObjRect.left,
                    startY: railObjRect.top + 150,
                    orientation: "horizontal",
                    distance: bb.bottom - railObjRect.top + topOffset + 50,
                    endX: railObjRect.left + railObjRect.width,
                    endY: railObjRect.top + 150,
                    fontSize: overallFontSize,
                    text: "" + self.railLength.toFixed(1)
                }));

                var end = new Date().getTime();
                //console.log("Time after draw overall lines: ", end - start);

                // Add objects to canvas
                for (var i = 0; i < writingToAdd.length; i++) {
                    cloneCanvas.add(writingToAdd[i]);

                    // Gray helper lines are always behind other canvas objects
                    if (writingToAdd[i].name == 'grayHelperLine') {
                        cloneCanvas.sendToBack(writingToAdd[i]);
                    }
                }

                var end = new Date().getTime();
                //console.log("Time after add all to canvas: ", end - start);

                cloneCanvas.remove(objLineal);

                //cloneCanvas = self.rotateCanvas(cloneCanvas); // Rotate whole canvas 270 degrees
                cloneCanvas.renderAll();

                var end = new Date().getTime();
                //console.log("Time after render: ", end - start);


                var dataURL = cloneCanvas.getElement().toDataURL('image/jpeg', 0.5);


                var end = new Date().getTime();
                //console.log("Time after data url: ", end - start);

                // remove all objects but rail for second drawing
                var objectsToDelete = [];
                for (var i = 0; i < objects.length; i++) {
                    var obj = objects[i];
                    if (obj != undefined) {
                        var objMatno = obj.get("matno");
                        if (objMatno != railMatno) {
                            objectsToDelete.push(obj);
                        }
                    }
                }

                for (var i = 0; i < objectsToDelete.length; i++) {
                    cloneCanvas.remove(objectsToDelete[i]);
                }

                // Draw dimension lines between bores on the blank rail
                writingToAdd = [];
                var boreHoles = [];
                var objBottomLine;
                var basicLineDistance = 230;

                // Draw dimension line for whole rail and collect bore objects
                for (var i = 0; i < objects.length; i++) {
                    var obj = objects[i];

                    if (obj != undefined) {
                        var railBottomLine = obj.get("railBottomLine")
                        var type = obj.get("elementType");

                        // Draw dimension line for whole rail
                        if (railBottomLine == true) {
                            //console.log("74650145: " + self.railLength + " - " + self.railLength.toFixed(1));
                            objBottomLine = obj;
                            writingToAdd = writingToAdd.concat(self.drawDimensionLine({
                                startX: obj.left,
                                startY: railObjRect.top,
                                orientation: "horizontal",
                                distance: -220,
                                endX: obj.left + obj.width,
                                endY: railObjRect.top,
                                fontSize: overallFontSize,
                                text: "" + self.railLength.toFixed(1)
                            }));
                        }
                        // Collect bore objects
                        else if (type === "bore") {
                            boreHoles.push(obj);
                        }
                    }
                }

                // Sort bores by position on rail
                boreHoles.sort(function (a, b) {
                    return a.left - b.left;
                });

                // Draw further dimension lines and bore diameters
                var isContinuousBores = self.rail.lochung;
                for (var i = 0; i < boreHoles.length; i++) {
                    var obj1 = boreHoles[i];
                    var boreDiameter = Math.round((obj1.width / self.imageScaleFactor) * 100) / 100;

                    // Show bore height and diameter for first bore
                    if (isContinuousBores && i == 0) {
                        // Height
                        writingToAdd = writingToAdd.concat(self.drawDimensionLine({
                            startX: objBottomLine.left,
                            startY: obj1.top + obj1.height,
                            orientation: "vertical",
                            distance: -25,
                            endX: objBottomLine.left,
                            endY: obj1.top,
                            fontSize: overallFontSize,
                            text: "" + (Math.round((obj1.height / self.imageScaleFactor) * 100) / 100).toFixed(1)
                        }));

                        // Diameter
                        var firstBoreDiameter = Math.round((((obj1.left + obj1.width) - objBottomLine.left) / self.imageScaleFactor) * 100) / 100;
                        if (firstBoreDiameter > 0) {
                            writingToAdd = writingToAdd.concat(self.drawDimensionLine({
                                startX: objBottomLine.left,
                                startY: obj1.top + obj1.height / 2,
                                orientation: "horizontal",
                                distance: 210,
                                endX: obj1.left + obj1.width,
                                endY: obj1.top + obj1.height / 2,
                                fontSize: overallFontSize,
                                text: "" + firstBoreDiameter.toFixed(1)
                            }));
                        }
                    }

                    // Show bore diameter
                    if ((isContinuousBores && i == 1) || !isContinuousBores) {
                        writingToAdd = writingToAdd.concat(self.drawDimensionLine({
                            startX: obj1.left - 2,
                            startY: obj1.top + obj1.height / 2,
                            orientation: "horizontal",
                            distance: 210,
                            endX: obj1.left + obj1.width,
                            endY: obj1.top + obj1.height / 2,
                            fontSize: overallFontSize,
                            text: "" + (Math.round((obj1.width / self.imageScaleFactor) * 100) / 100).toFixed(1)
                        }));
                    }

                    // Dimension line for distance to first bore
                    if ((isContinuousBores && i == 1) || (!isContinuousBores && i == 0)) {
                        var distanceToRailTop = (obj1.top - railObjRect.top) - basicLineDistance;

                        writingToAdd = writingToAdd.concat(self.drawDimensionLine({
                            startX: objBottomLine.left,
                            startY: railObjRect.top,
                            orientation: "horizontal",
                            distance: distanceToRailTop,
                            endX: obj1.left + (obj1.width / 2),
                            endY: railObjRect.top,
                            fontSize: overallFontSize,
                            text: "" + (Math.round((((obj1.left + obj1.width / 2) - railObjRect.left) / self.imageScaleFactor) * 100) / 100).toFixed(1)
                        }));
                    }

                    // Dimension lines between bores
                    if (i + 1 < boreHoles.length) {
                        var obj2 = boreHoles[i + 1];
                        var topPos;

                        if (obj1.top < obj2.top) {
                            topPos = obj1.top;
                        } else {
                            topPos = obj2.top;
                        }

                        if ((isContinuousBores && i == 1) || (!isContinuousBores)) {
                            writingToAdd = writingToAdd.concat(self.drawDimensionLine({
                                startX: obj1.left + (obj1.width / 2),
                                startY: topPos,
                                orientation: "horizontal",
                                distance: -1 * basicLineDistance,
                                endX: obj2.left + (obj2.width / 2),
                                endY: topPos,
                                fontSize: overallFontSize,
                                text: "" + (Math.round((((obj2.left + obj2.width / 2) - (obj1.left + obj1.width / 2)) / self.imageScaleFactor) * 100) / 100).toFixed(1)
                            }));
                        }
                    }
                }

                for (var i = 0; i < writingToAdd.length; i++) {
                    cloneCanvas.add(writingToAdd[i]);
                }

                cloneCanvas.renderAll();

                var end = new Date().getTime();
                //console.log("Time after second rail: ", end - start);

                var dataURLRail = cloneCanvas.getElement().toDataURL('image/jpeg', 0.5);

                if (sendToShop == 1) {
                    setDataURLsForShop([{name: "dataURL", value: dataURL},
                        {name: "dataURLRail", value: dataURLRail},
                        {name: "dataRailID", value: (self.canvasId).replace("idRail", "")}]);
                } else {
                    generatePartsList([{name: "dataURL", value: dataURL}, {name: "dataURLRail", value: dataURLRail}]);
                }

                var end = new Date().getTime();
                //console.log("Time generate parts list: ", end - start);

                // TODO remove this test code
                // $.ajax({
                //     url: "rest/vis/uploadImage",
                //     type: "POST",
                //     // contentType: "application/json",
                //     data: {
                //         "dataURL": dataURL,
                //         "id": "1"
                //     }
                // }).done(function (data) {
                //     //console.log("data: ", data);
                // });
            }, ["matno", "storageLocation", "railRect", "railBottomLine", "name", "rotated", "rawWidth", "elementType"]);
        }
    });
})();