var timelineDummyInterval;
var currentYear = new Date().getFullYear();
var MAX_TIME_TILL_NOT_WORKING_ANYMORE = 0; //deactivated due to missleading results (wished by Focht)
function makeTimelineDummy(data, id) {

    var yearMax = 2022;
    var yearMin = 1400;
    var paths = {};
    var collectText = [];
    var collectPath = [];
    var radiusHead = 5;  
    var pixelPerCharacter = 6;
    //var strokeWidth = 1;
    var heightLegend = 20;
/*
    var fillColor = "#58ACFA";

    var timeStartYear;
    var timeEndYear;

    var preferredHeight = $("#" + id).height() - heightLegend;
*/
    var timeWidth = $("#" + id).width();

    var lowerBorder = Math.floor(yearMin / 10) * 10;
    var upperBorder = Math.ceil(yearMax / 10) * 10;

    var pixelPerYear = timeWidth / (upperBorder - lowerBorder + 10);

    var timeHeight = 300;
    $("#" + id).height(timeHeight);

    $("#timeline").empty();
    var timePaper = Raphael(document.getElementById("timeline"), timeWidth, timeHeight);

    //LEGEND START
    //############    

    var showHundredYears = (pixelPerCharacter * 5 * (upperBorder - lowerBorder) / 100 < timeWidth) ? true : false;
    var showFiftyYears = (pixelPerCharacter * 5 * (upperBorder - lowerBorder) / 50 < timeWidth) ? true : false;
    var showTenYears = (pixelPerCharacter * 5 * (upperBorder - lowerBorder) / 10 < timeWidth) ? true : false;

    for (var i = lowerBorder + 10; i <= upperBorder - 10; i += 10) //+10 -10 for making last and first one invisible
    {
        var x = (i - lowerBorder) * pixelPerYear;
        if (i % 100 == 0 && showHundredYears) {
            collectText.push([x, timeHeight - heightLegend / 2, i, { "font-size": 12 }]);
            collectPath.push(["M" + x + " 0 l0 " + (timeHeight - heightLegend), { "stroke-dasharray": "--", "stroke-width": 1 }]);
        } else if (showFiftyYears && i % 50 == 0) {
            collectText.push([x, timeHeight - heightLegend / 2, i, { "font-size": 11 }]);
            collectPath.push(["M" + x + " 0 l0 " + (timeHeight - heightLegend), { "stroke-dasharray": "--", "stroke-width": 0.5 }]);
        } else if (showTenYears) {
            collectText.push([x, timeHeight - heightLegend / 2, i, { "font-size": 10 }]);
            collectPath.push(["M" + x + " 0 l0 " + (timeHeight - heightLegend), { "stroke-dasharray": "--", "stroke-width": 0.2 }]);
        }
    }
    //LEGEND END
    //############



    for (key in collectText) {
        timePaper.text(collectText[key][0], collectText[key][1], collectText[key][2]).attr(collectText[key][3]);
    }

    for (key in collectPath) {
        timePaper.path(collectPath[key][0]).attr(collectPath[key][1]);
    }

    var randomIndex = 0;

    addRandomTimelineFeature();
    timelineDummyInterval = window.setInterval(addRandomTimelineFeature, 1000);

    var timeSelection = timePaper.path("M0 0 L0 0");

    function addRandomTimelineFeature() {
        randomIndex++;
        makeArrow((timeWidth / 3) + (randomIndex * pixelPerYear * 10) + Math.random() * 10 * pixelPerYear, 300 - radiusHead * (randomIndex + 1) * 2, radiusHead, 186 + (Math.random() * 100), "genau", "genau", { "stroke-width": 1, "fill": "#58ACFA", "key": "dummy" + randomIndex }, [1653, 1720]);
    }


    var start = 75; // x
    var height = 75; //y

    function buildExactLeft(height, dist) {
        return [
            [0, -2 * height],
            [0, 0]
        ];
    }

    function buildExactRight(height, dist) {
        return [
            [0, 2 * height],
            [0, 0]
        ];
    }

    function buildNoData(height, dist) {
        return buildExactRight(height, dist); //[[dist/4, 0], [-dist/4, 2*height]];
    }

    function makeArrow(start, startY, height, dist, left, right, attr, text) {
        var leftGeo = "";
        var rightGeo = "";

        var tmpHeight = timeHeight - (startY + height);

        leftGeo = buildExactLeft(height, dist);

        rightGeo = buildExactRight(height, dist);

        var buildArray = [
            [start, startY - 2 * height, dist, 0]
        ]
        for (var key in rightGeo) {
            buildArray.push(rightGeo[key]);
        }
        buildArray.push([-dist, 0]);


        for (var key in leftGeo) {
            buildArray.push(leftGeo[key]);
        }

        text = [
            start + length / 2., startY, text
        ];

        buildPath(buildArray, attr, text);
    }

    function buildPath(buildArray, attr, text) {
        var path = "M" + buildArray[0][0] + " " + buildArray[0][1] + " l" + buildArray[0][2] + " " + buildArray[0][3] + " ";

        for (var i = 1; i < buildArray.length; i++) {
            path += buildArray[i][0] + " " + buildArray[i][1] + " ";
        }

        var path = timePaper.path(path).attr(attr);
        
        $(path).attr("key", attr["key"]);

        paths[attr["key"]] = path;
    }    
}

function makeTimeline(data, id, needLegend = false, dateTypes = [], isSingle = true) {
    if (timelineDummyInterval !== undefined){
        clearInterval(timelineDummyInterval);
    }

    var yearMax = -1;
    var yearMin = 10000;
    var paths = {};
    var collectArrows = []; //Collecting all arrows that shall be painted. Calculate them and determine needed height, then create the paper and paint them
    var collectText = [];
    var collectPath = [];
    var radiusHead; //will be determined later 
    var pixelPerCharacter = 6;
    var strokeWidth = 1;
    var heightLegend = 20;

    var fillColor = "#58ACFA";
    var dragColor = "#58ACFA";
    var alpha = 0.1; //opacitiy for non wirkung

    var timeDrag = false;
    var timeDragStart;
    var timeDragStartYear;
    var timeSelectionLeftToRight = false; //If selection is asc or desc
    var timeSelectionIds = [];
    var timeStartYear;
    var timeEndYear;

    for (var i = 0; i < data.length; i++) {
        var singleData = data[i];
        //F13 Geburt, F14 Tod, F17 erste Erwähnung F18 letzte Erwähnung
        if (!(singleData["F13"] || singleData["F17"] || singleData["F14"] || singleData["F18"])) {
            data.splice(i, 1);
            i--;
            continue;
        }
		
        var dateStartTmp = getDateBorder(data[i], "min");
        var dateStart = dateStartTmp[1];
        var uncertaintyLeft = dateStartTmp[0];

        var dateEndTmp = getDateBorder(data[i], "max");
        var dateEnd = dateEndTmp[1];
        var uncertaintyRight = dateEndTmp[0];

        if (dateStart === false) {
            dateStart = dateEnd;
            uncertaintyLeft = "vor";
        }
        if (dateEnd === false) {
            if (data[i]["F17"]){
                dateEnd = data[i]["F17"];
            } else {
                dateEnd = dateStart;
            }
            uncertaintyRight = "nach";
        }

        if (singleData["F14"] == "" && singleData["F18"] == "" ) {
            uncertaintyRight = "nach";
			if(currentYear - dateStart < MAX_TIME_TILL_NOT_WORKING_ANYMORE) 
			{
				dateEnd = currentYear;
			}
        }
		
		if(singleData["F13"] == "" && singleData["F14"] == "" && singleData["F18"] == "" && singleData["F17"] != "")
		{
			switch(uncertaintyLeft)
			{
				case "vor":
					uncertaintyRight = "ellipticalRight";
					break;
				case "um":
					uncertaintyRight = "ellipticalRight";
					break;
				case "nach":
					uncertaintyRight = "ellipticalRight";
					break;
				default:
					uncertaintyRight = "ellipticalRight";
					uncertaintyLeft  = "ellipticalLeft";
			}
		}

        if (!isNaN(dateStart)) //Needed to prevent data errors from crashing timeline
        {
            yearMin = Math.min(yearMin, dateStart);
            data[i].dateStart = dateStart;
            data[i].uncertaintyLeft = uncertaintyLeft;
        } else {
            dateStart = dateStart.replace(/[^0-9]+/g, "").substring(0, 4);
            yearMin = Math.min(yearMin, dateStart);
            data[i].dateStart = dateStart;
            data[i].uncertaintyLeft = uncertaintyLeft;
        }

        if (!isNaN(dateEnd)) {
            yearMax = Math.max(yearMax, dateEnd);
            data[i].dateEnd = dateEnd;
            data[i].uncertaintyRight = uncertaintyRight;
        } else {
            dateEnd = dateEnd.replace(/[^0-9]+/g, "").substring(0,4);
            yearMax = Math.max(yearMax, dateEnd);
            data[i].dateEnd = dateEnd;
            data[i].uncertaintyRight = uncertaintyRight;
        }

        if( data[i]["F17"] !== ""){
            data[i].workStart = data[i]["F17"];
        } else {
            data[i].workStart = dateStart;
        }
        if( data[i]["F18"] !== ""){
            data[i].workEnd = data[i]["F18"];
        } else {
            data[i].workEnd = dateEnd;
        }
    }

    //Version for faster right to left interaction
    var endSortedData = Array.from(data);
    endSortedData.sort(function(a, b) {
        return a.dateEnd - b.dateEnd;
    });

    data.sort(function(a, b) {
        return a.dateStart - b.dateStart;
    });

    //DETERMINE RADIUS HEAD START
    var yearCount = {};
    var yearCountMax = 0;
    var highestUsedPixel = 0; //determined later on
    for (var key in data) {
        for (var i = data[key].dateStart; i <= data[key].dateEnd; ++i) {
            yearCount[i] = yearCount[i] ? ++yearCount[i] : 1;
            yearCountMax = Math.max(yearCountMax, yearCount[i]);
        }
    }

    var preferredHeight = $("#" + id).height() - heightLegend;
    var radiusHeadCalculated = ((preferredHeight / yearCountMax) - strokeWidth * 2) / 2; //strokeWidth: The size of a path is radiusHead+strokeWidth. Substract strokewidth while calculating to correctly calculate the needed size
    radiusHead = Math.floor(radiusHeadCalculated);
    radiusHead = Math.max(radiusHead, 1);
    radiusHead = Math.min(radiusHead, 10);

    if ($("#" + id).width() === null) {
        return;
    }

    var timeWidth = $("#" + id).width();
    var drawWidth = $("#" + id).width();
    
    if (needLegend && dateTypes.length > 0){
        var longesttype = dateTypes.slice(0, MAX_NUMBER_OF_COLORS).map(e => { return e["type"]; }).reduce(function (a, b) { return a.length > b.length ? a : b; });
        longesttype = longesttype ? longesttype : "";
        drawWidth -= 40 + 5 * longesttype.length;
    }
    //DETERMINE RADIUS HEAD END


    //USED SPACE START
    //############
    var usedSpace = {};

    for (var i = 0; i < drawWidth; ++i) {
        usedSpace[i] = {};
    }

    /*
    for(var i = 0; i < timeWidth; ++i)
    {
        for(var j = 0; j < timeHeight; ++j)
        {
            if(usedSpace[i] === undefined)
            {
                usedSpace[i] = {};
            }
            
            usedSpace[i][j] = false;
        }
    }*/

    var typeObject = {};

    //USED SPACE END
    //############

    var lowerBorder = Math.floor(yearMin / 10) * 10;
    var upperBorder = Math.ceil(yearMax / 10) * 10;
    //   var pixelPerYear = timeWidth / (yearMax - yearMin);
    var pixelPerYear = drawWidth / (upperBorder - lowerBorder + 10);

    //TIME DATA START
    //############
    for (var key in data) {
        var xPos = Math.round((data[key]["dateStart"] - lowerBorder) * pixelPerYear);
        var text = [data[key]["dateStart"], data[key]["dateEnd"], String(data[key]["workStart"]), String(data[key]["workEnd"]), data[key]["Art"] ]; 
        var length = Math.round((data[key].dateEnd - data[key].dateStart) * pixelPerYear);
        var yPos = findEmptyHeight(xPos, 0, 0, length);
        if (type = data[key]["Art"]) {
            var index = typesOfPlaces[activeTab].indexOf(type);
            if (index > MAX_NUMBER_OF_COLORS ){ //we only have MAX_NUMBER_OF_COLORS +1 colors
                index = MAX_NUMBER_OF_COLORS ;
            }
            if (index >= 0) {
                fillColor = tabsArray[index][3].substring(0, tabsArray[index][3].indexOf("\/\/")).replace("0.", "1.");
            } else {
                typesOfPlaces[activeTab].push(type);
                synTypeOfPlaces[activeTab].push(type);
                index = typesOfPlaces[activeTab].indexOf(type);
                if (index > MAX_NUMBER_OF_COLORS ){
                    index = MAX_NUMBER_OF_COLORS ;
                }
                fillColor = tabsArray[index][3].substring(0, tabsArray[index][3].indexOf("\/\/")).replace("0.", "1.");
            }
        }
        //yPos is from y=0 upwards. Needs still to be translated down to heightMax as Raphael.js has inverted y-coordinates (after determining the actual height)
        var attr = { "stroke-width": strokeWidth, "fill": fillColor, "fill-opacity": alpha, "key": data[key]["F41"] };
        //für baccae einzelansicht ->leitet auf eventa weiter
        if (isSingle && data[key]["eventID"] !== undefined) {
            attr["key"] = data[key]["eventID"];
        }
        collectArrows.push([xPos, yPos, radiusHead, length, data[key].uncertaintyLeft, data[key].uncertaintyRight, attr, text]);
    }

    //TIME DATA END
    //############
    //Musici uses Blue - use Startpage color for other tabs
    if (activeTab !== 0){
        dragColor = tabsArray[activeTab][3].substring(0, tabsArray[activeTab][3].indexOf("\/\/"));
    }

    timeHeight = highestUsedPixel + heightLegend + radiusHead * 2; //radiusHead as padding

    if (needLegend) {
        //Adjust legend heigth in case of a bigger legend 
        if ( timeHeight < Math.min(20 * dateTypes.length + 20, 20 * (MAX_NUMBER_OF_COLORS +1) + 20) ) {
            timeHeight = Math.min(20 * dateTypes.length + 20, 20 * (MAX_NUMBER_OF_COLORS +1) + 20);
        }
    }
    $("#" + id).height(timeHeight);

    $("#timeline").empty();
    
    var timePaper = Raphael(document.getElementById("timeline"), timeWidth, timeHeight);

    var legendWidth = 16;
    //IN CASE OF EXTRA LEGEND
    if (needLegend) {
        var lastY = timeHeight -20 - Math.min(dateTypes.length-1, MAX_NUMBER_OF_COLORS  ) * 20;
        for (var i = dateTypes.length-1; i >= 0; i--) {
            var legendEntry;
            var index = typesOfPlaces[activeTab].indexOf(dateTypes[i]["type"]);
            
            if (index <= MAX_NUMBER_OF_COLORS ){ //we only have MAX_NUMBER_OF_COLORS +1 colors
                var legendcolor = tabsArray[index][3].substring(0, tabsArray[index][3].indexOf("\/\/"));//.replace("0.", "1.");
                var legendX = drawWidth + 5;
                var legendY = timeHeight -20 - Math.min(MAX_NUMBER_OF_COLORS - i, dateTypes.length -1 - i ) * 20;
                
                if (index == MAX_NUMBER_OF_COLORS  ) { //case for sonstige
                        legendEntry = timePaper.rect(legendX, legendY, legendWidth, legendWidth).attr({fill: legendcolor, opacitiy: 1, "fill-opacity": 1 }); //circle(circleX, circleY , 8).
                        legendEntry.data("text", "Sonstige");
                        timePaper.text( legendX + 20, legendY + legendWidth/2, "Sonstige").attr({'text-anchor': 'start'});; 
                } else {
                    legendEntry = timePaper.rect(legendX, legendY, legendWidth, legendWidth).attr({fill: legendcolor, opacitiy: 1, "fill-opacity": 1 }); //circle(circleX, circleY , 8).
                    legendEntry.data("text", dateTypes[i]["type"]);
                    timePaper.text( legendX + 20, legendY + legendWidth/2, dateTypes[i]["type"]).attr({'text-anchor': 'start'});; 
                }

                if (legendEntry !== undefined) {
                    //if legend is clickable add class
                    if (!isSingle) {
                        legendEntry.node.setAttribute("class", "legendTimeline");
                    }
                    legendEntry.mouseover(function() {
                        $(".legend" + this.data("text")).attr({ "stroke-width": 4, "stroke-opacity": 0.6 });
                    });
                    legendEntry.mouseout(function() {
                        $(".legend" + this.data("text")).attr({ "stroke-width": 1, "stroke-opacity": 1 });
                    });
                    //einzelansicht nicht klickbar
                    if (!isSingle) {
                        legendEntry.click(function() {
                            $(".legend" + this.data("text")).each( function() {
                                timeSelectionIds.push($(this).attr("class").split(" ")[0].split("newPath")[1]);
                            });
                            filterResultElements(timeSelectionIds);
                        });
                    }
                }
            } 
        }
        timePaper.path("M" + drawWidth + " " + (lastY - legendWidth/2 ) + " l0 " + timeHeight +  "M" + drawWidth + " " + (lastY - legendWidth/2) +"H" +  $("#" + id).width()  );
    }
    //END


    //LEGEND START
    //############    

    var showHundredYears = (pixelPerCharacter * 5 * (upperBorder - lowerBorder) / 100 < timeWidth) ? true : false;
    var showFiftyYears = (pixelPerCharacter * 5 * (upperBorder - lowerBorder) / 50 < timeWidth) ? true : false;
    var showTenYears = (pixelPerCharacter * 5 * (upperBorder - lowerBorder) / 10 < timeWidth) ? true : false;

    for (var i = lowerBorder + 10; i <= upperBorder - 10; i += 10) //+10 -10 for making last and first one invisible
    {
        var x = (i - lowerBorder) * pixelPerYear;
        if (i % 100 == 0 && showHundredYears) {
            collectText.push([x, timeHeight - heightLegend / 2, i, { "font-size": 12 }]);
            collectPath.push(["M" + x + " 0 l0 " + (timeHeight - heightLegend), { "stroke-dasharray": "--", "stroke-width": 1 }]);
        } else if (showFiftyYears && i % 50 == 0) {
            collectText.push([x, timeHeight - heightLegend / 2, i, { "font-size": 11 }]);
            collectPath.push(["M" + x + " 0 l0 " + (timeHeight - heightLegend), { "stroke-dasharray": "--", "stroke-width": 0.5 }]);
        } else if (showTenYears) {
            collectText.push([x, timeHeight - heightLegend / 2, i, { "font-size": 10 }]);
            collectPath.push(["M" + x + " 0 l0 " + (timeHeight - heightLegend), { "stroke-dasharray": "--", "stroke-width": 0.2 }]);
        }
    }
    if (collectText.length === 0){
        for (var i = lowerBorder + 1 ; i <= upperBorder -1; i++) {
            var x = (i - lowerBorder) * pixelPerYear;
            collectText.push([ x, timeHeight - heightLegend / 2, i, { "font-size": 10 }]);
            collectPath.push(["M" + x + " 0 l0 " + (timeHeight - heightLegend), { "stroke-dasharray": "--", "stroke-width": 0.2 }])
        }
    }
    //LEGEND END
    //############



    for (key in collectText) {
        timePaper.text(collectText[key][0], collectText[key][1], collectText[key][2]).attr(collectText[key][3]);
    }

    for (key in collectPath) {
        timePaper.path(collectPath[key][0]).attr(collectPath[key][1]);
    }
    for (var key in collectArrows) {
        //Lebenszeitraum
        if (activeTab === 0){
            makeArrow(collectArrows[key][0], collectArrows[key][1] + timeHeight - heightLegend, collectArrows[key][2], collectArrows[key][3], collectArrows[key][4], collectArrows[key][5], collectArrows[key][6], collectArrows[key][7], false);
        }
        //Wirkungszeitraum
        var text = collectArrows[key][7];
        var left = "genau";
        var right = "genau";

        if (text[2].indexOf("um") != -1){
            left = "um";
        }
        if (text[3].indexOf("um") != -1){
            right = "um";
        }
        if (text[2].indexOf("vor") != -1){
            left = "vor";
        }
        if (text[3].indexOf("vor") != -1){
            right = "vor";
        }
        if (text[2].indexOf("nach") != -1 || collectArrows[key][4].indexOf("nach") != -1  ){
            left = "nach";
        }
        if (text[3].indexOf("nach") != -1 || collectArrows[key][5].indexOf("nach") != -1 ){
            right = "nach";
        }
        if(isNaN(text[2])){
            text[2] = text[2].replace(/\D/g,'').substring(0,4);
        }
        if(isNaN(text[3])){
            text[3] = text[3].replace(/\D/g,'').substring(0,4);
        }
        makeArrow(collectArrows[key][0], collectArrows[key][1] + timeHeight - heightLegend, collectArrows[key][2], collectArrows[key][3], left, right, collectArrows[key][6], text, true);
    }

    var timeSelection = timePaper.path("M0 0 L0 0");

    $("#" + id).on("mousedown", function(event) {
        timeDrag = true;
        timeDragStart = event.pageX - $(this).offset().left;
        timeDragStartYear = Math.round(timeDragStart / pixelPerYear + yearMin);
    });

    $("#" + id).on("mouseup", function(event) {
        timeDrag = false;
        timeStartYear = Math.round(timeDragStart / pixelPerYear + yearMin);
        timeEndYear = Math.round(xPos / pixelPerYear + yearMin);
        if (timeStartYear > timeEndYear) {
            var tmp = timeStartYear;
            timeStartYear = timeEndYear;
            timeEndYear = tmp;
        }

        if (timeSelectionIds.length > 0) {
            filterResultElements(timeSelectionIds);
        }

        timeSelectionLeftToRight = false;
    });

    $("#" + id).on("mousemove", function(event) {
        if (timeDrag) {
            var xPos = event.pageX - $(this).offset().left;
            var xPosYear = Math.round(xPos / pixelPerYear + yearMin) - Number(yearMin.toString().split('').pop()); //there were some errors when yearMin != lowerbound
            if (xPos > timeDragStart) {
                timeSelectionLeftToRight = true;
            } else {
                timeSelectionLeftToRight = false;
            }
            timeStartYear = Math.round(timeDragStart / pixelPerYear + yearMin) - Number(yearMin.toString().split('').pop());
            if (timeSelectionLeftToRight) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].dateStart > xPosYear) {
                        var id = data[i]["F41"];
                        var index = -1;
                        for (var key in timeSelectionIds) {
                            if (timeSelectionIds[key] === id) {
                                index = key;
                            }
                        }
                        if (index !== -1) {
                            timeSelectionIds.splice(index, 1);
                        } else {
                            break;
                        }
                    }
                    //BeforeStart || In
                    if ((data[i].dateStart >= timeStartYear && data[i].dateStart <= xPosYear) || (data[i].dateStart <= timeStartYear && data[i].dateEnd >= timeStartYear)) {
                        var id = data[i]["F41"];
                        var found = false;
                        for (var key in timeSelectionIds) {
                            if (timeSelectionIds[key] === id) {
                                found = true;
                            }
                        }
                        if (!found) {
                            timeSelectionIds.push(data[i]["F41"]);
                        }
                    }
                }
            } else { //Selection Right to left
                for (var i = endSortedData.length - 1; i >= 0; i--) {
                    if (endSortedData[i].dateEnd < xPosYear) {
                        var id = endSortedData[i]["F41"];
                        var index = -1;
                        for (var key in timeSelectionIds) {
                            if (timeSelectionIds[key] === id) {
                                index = key;
                            }
                        }
                        if (index !== -1) {
                            timeSelectionIds.splice(index, 1);
                        } else {
                            break;
                        }
                    }
                    //AfterEnd || In
                    if ((endSortedData[i].dateEnd <= timeStartYear && endSortedData[i].dateEnd >= xPosYear) || (endSortedData[i].dateStart <= timeStartYear && endSortedData[i].dateEnd >= timeStartYear)) {
                        var id = endSortedData[i]["F41"];
                        var found = false;
                        for (var key in timeSelectionIds) {
                            if (timeSelectionIds[key] === id) {
                                found = true;
                            }
                        }
                        if (!found) {
                            timeSelectionIds.push(endSortedData[i]["F41"]);
                        }
                    }
                }
            }
            timeSelection.remove();
            timeSelection = timePaper.path("M" + timeDragStart + " 0L" + timeDragStart + " " + timeHeight + " " + xPos + " " + timeHeight + " " + xPos + " 0").attr({ "fill": dragColor, "opacity": 0.3 });
        }
    });




    //DEBUG
    /*
    for(var key in usedSpace) {
        for(var key2 in usedSpace[key]) {
            if(usedSpace[key][key2] == 1) {
                timePaper.rect(key, Number(timeHeight) + Number(key2) - 10 - Number(heightLegend), 1,1);
            }
        }
    }*/

    function getDateBorder(singleData, type) {
        if (type === "max") {
            if (!singleData["F14"] || !singleData["F18"]) {
                var tmpResult = getDateAndBorder(singleData["F14"]);
                if (tmpResult[0])
                    return tmpResult
                else
                    return getDateAndBorder(singleData["F18"]);
            } else {
                var a = getDateAndBorder(singleData["F14"]);
                var b = getDateAndBorder(singleData["F18"]);
                if (a[1] > b[1])
                    return a;
                else
                    return b;
            }
        } else {
            if (!singleData["F13"] || !singleData["F17"]) {
                var tmpResult = getDateAndBorder(singleData["F13"]);
                if (tmpResult[0])
                    return tmpResult;
                else
                    return getDateAndBorder(singleData["F17"]);
            } else {
                var a = getDateAndBorder(singleData["F13"]);
                var b = getDateAndBorder(singleData["F17"]);
                if (a[1] < b[1])
                    return a;
                else
                    return b;
            }
        }
    }

    function getDateAndBorder(dateString) {
        if (!dateString)
            return [false, false];
        else if (dateString.length === 0) //would throw an undefined exception for tabs without F14 or F13 
            return [false, false];

        var returnArray = [];

        var tokens = dateString.match(/(\w+|\d+)+/g);

        if (isNaN(tokens[0])) {
            returnArray = [tokens[0], Number(tokens[1])];
        } else {
            returnArray.push("genau");
            returnArray.push(Number(tokens[0]));
        }

        return returnArray;
    }

    //Caution! We want to determine the needed height. Thus we have no hight given to start with. Raphael.JS has an inverse y-axis, thus if we want to paint something on the bottom line it should be at y heightMax (which is unknown at this point)
    //         For this we set the default height to 0 (in raphael.js it is the topmost position) and determine unused space in negative direction. This results in negative positions, which have to be negated before painting 
    function findEmptyHeight(start, heightPin, count, length) {
        var pixelAreEmpty = true;
        var breaking = false;

        for (var i = 0; i <= length; i++) // <= to account 0-length glyphs (only one edge is given)
        {
            for (var j = -radiusHead; j < radiusHead; j++) {

                if (typeof usedSpace[start + i][heightPin + j] === "undefined") {
                    usedSpace[start + i][heightPin + j] = 0;
                }
                if (usedSpace[start + i][heightPin + j] == 1) {
                    pixelAreEmpty = false;
                    breaking = true;
                    break;
                }
            }
            if (breaking) {
                break;
            }
        }
        if (count > 50) {
            console.log("ERROR, no position found after 50 iterations. Aborting!");
            return -10;
        }

        if (!pixelAreEmpty) {
            var newHeight = heightPin - radiusHead;

            return findEmptyHeight(start, newHeight, count++, length);
        } else {
            //declare space as being used
            for (var i = start - 3; i <= start + length + 3; ++i) //6 pixel to account for edge glyphs
            {
                for (var j = heightPin - radiusHead; j <= heightPin /*+ radiusHead*/ ; ++j) {
                    if (!usedSpace[i]) {
                       // console.log("Warning. tried to paint outside painting area! " + i + " . " + j);
                        break;
                    }
                    usedSpace[i][j] = 1;
                }
            }

            highestUsedPixel = Math.max(highestUsedPixel, Math.abs(heightPin - 2 * radiusHead)); //Determine if the height of the div should be corrected after painting.

            return heightPin; //Flip the y-coordinates. We determined the height inverse (as we did not had a fixed height and raphael.js' inverse y position)
        }
    }



    var start = 75; // x
    var height = 75; //y

    function buildBeforeLeft(height, dist) {
        var x = height - (height / 2);
        return [
            [-x, -height],
            [x, -height]
        ];
    }

    function buildBeforeRight(height, dist) {
        var x = height - (height / 2);
        return [
            [-x, +height],
            [x, +height]
        ];
        /*
        dist -= 10; //give more space for labels
        return [[-dist/2,  height], [ dist/2,  height]];*/
    }

    function buildAfterRight(height, dist) {
        var x = height - (height / 2);
        return [
            [x, height],
            [-x, height]
        ];
    }

    function buildAfterLeft(height, dist) {
        var x = height/2.;
        return [
            [x, -height],
            [-x, -height]
        ];
        /*
        dist -= 10;
        return [[ dist/2, -height], [-dist/2, -height]];*/
    }

    function buildExactLeft(height, dist) {
        return [
            [0, -2 * height],
            [0, 0]
        ];
    }

    function buildExactRight(height, dist) {
        return [
            [0, 2 * height],
            [0, 0]
        ];
    }
	/*
	function buildNoDataRight(height, dist) {
        return [
			[dist*2, height/2],
			[-2*dist, height]
        ];
	}*/

    function buildNoData(height, dist) {
       // return buildNoDataRight(height, dist);
		return buildExactRight(height, dist); //[[dist/4, 0], [-dist/4, 2*height]];
    }

    function buildAroundRight(height) {
        return [
            [-height / 4, height / 4],
            [+height / 2, height / 4],
            [-height / 2, height / 4],
            [+height / 2, height / 4],
            [-height / 2, height / 4],
            [+height / 2, height / 4],
            [-height / 2, height / 4],
            [+height / 4, height / 4]
        ];
    }

    function buildAroundLeft(height) {
        return [
            [+height / 4, -height / 4],
            [-height / 2, -height / 4],
            [+height / 2, -height / 4],
            [-height / 2, -height / 4],
            [+height / 2, -height / 4],
            [-height / 2, -height / 4],
            [+height / 2, -height / 4],
            [-height / 4, -height / 4]
        ];
    }
	
	function buildEllipticalLeft(height)
	{
		return [0, 0];/*[
			[0, 0+"q-50 50 0 "+height]
		];*/
	}
	
	function buildEllipticalRight(height)
	{
		return [
			[0, 0+"q"+(height/2.)+" "+(height)+" 0 "+(2*height)]
		];	
	}

    function makeArrow(start, startY, height, dist, left, right, attr, text, isSecond) {
        var leftGeo = "";
        var rightGeo = "";

        var tmpHeight = timeHeight - (startY + height);
        // var legs = [[start-dist, startY+height, 0, tmpHeight],[2*dist, 0], [0, -tmpHeight]];
        switch (left) {
            case "vor":
                leftGeo = buildBeforeLeft(height, dist);
                break;
            case "nach":
                leftGeo = buildAfterLeft(height, dist);
                break;
            case "genau":
                leftGeo = buildExactLeft(height, dist);
                break;
            case "um":
                leftGeo = buildAroundLeft(height);
                break;
			case "ellipticalLeft":
				leftGeo = buildEllipticalLeft(height);
				break;
        }
		
        switch (right) {
            case "vor":
                rightGeo = buildBeforeRight(height, dist);
                break;
            case "nach":
                rightGeo = buildAfterRight(height, dist);
                break;
            case "genau":
                rightGeo = buildExactRight(height, dist);
                break;
            case "nodata":
                rightGeo = buildNoData(height, dist);
                break;
            case "um":
                rightGeo = buildAroundRight(height);
                break;
			case "ellipticalRight":
				rightGeo = buildEllipticalRight(height);
				break;
        }

        var buildArray = [
            [start, startY - 2 * height, dist, 0]
        ]
        for (var key in rightGeo) {
            buildArray.push(rightGeo[key]);
        }
        buildArray.push([-dist, 0]);


        for (var key in leftGeo) {
            buildArray.push(leftGeo[key]);
        }
        text = {
            "x": start + length / 2., 
            "y": startY, 
            "text": [ Number(text[0]), Number(text[1]) ],
            "work": [ Number(text[2]), Number(text[3]) ],
            "type": text[4]
        };
        var aroundRight = false;
        if (right === "um"){
            aroundRight = true;
        }
        buildPath(buildArray, attr, text, isSecond, aroundRight);
    }

    function buildPath(buildArray, attr, text, isSecond, aroundRight) {
        var texts = text["text"];
        var zeitraum = "Lebenszeitraum:";
        if (isSecond){
            if (activeTab === 0 ) {
                zeitraum = "Wirkungszeitraum:";
            } else if ( (activeTab === 5 || activeTab === 2) && text["type"]){
                zeitraum = text["type"] + ":";
            } else {
                 zeitraum = "";
            }
            texts = text["work"];
            attr["fill-opacity"] = 1;       
            attr["stroke-width"] = 1;
            var startDiff = text["work"][0]- text["text"][0];
            var endDiff = text["text"][1] - text["work"][1];
            if (aroundRight) {
                buildArray[9][0] += endDiff * pixelPerYear + startDiff * pixelPerYear;   
            } else {
                buildArray[3][0] += endDiff * pixelPerYear + startDiff * pixelPerYear;   
            }
            var path = "M" + (buildArray[0][0] + (startDiff * pixelPerYear )) + " " + buildArray[0][1] + " l" + (buildArray[0][2] - endDiff * pixelPerYear - startDiff * pixelPerYear) + " " + buildArray[0][3] + " ";
        } else {
            attr["stroke-width"] = 0.5;
            var path = "M" + buildArray[0][0] + " " + buildArray[0][1] + " l" + buildArray[0][2] + " " + buildArray[0][3] + " ";
        }
        for (var i = 1; i < buildArray.length-1; i++) {
            path += buildArray[i][0] + " " + buildArray[i][1] + " ";
        }
        path += "Z";

        var path = timePaper.path(path).attr(attr);
        $(path).attr("key", attr["key"]);

        //Problem die Sucheart (Einfache Suche) verschwindet aus der URL - war aber von Focht explizit gewünscht
        //path.attr("href", buildURLPath("search", activeTab, [{attribute: "mxp", value:  attr["key"] }]) );
        
        //buildSelectedURLPath braucht passendes Format für beliebig viele Suchanfragen
        /*var searchParams = window.location.href.split("?")[1];
        path.attr("href", buildSelectedURLPath( {"attribute": searchParams.split("=")[0], "value":searchParams.split("=")[1]}, activeTab, attr["key"]));*/

        if (!isSecond){
            path.node.setAttribute("class", "path");
            path.node.setAttribute("id", "path" + attr["key"]);   
        } else {
            path.node.setAttribute("class", "newPath" + attr["key"]); 
            if (text["type"] !== undefined) {
                //case for sonstige
                if (attr["fill"] === tabsArray[MAX_NUMBER_OF_COLORS][3].substring(0, tabsArray[MAX_NUMBER_OF_COLORS][3].indexOf("\/\/")).replace("0.", "1.") ){
                    path.node.setAttribute("class", "newPath" + attr["key"] + " legendSonstige");
                } else {
                    path.node.setAttribute("class", "newPath" + attr["key"] + " legend" + text["type"]);
                }
                
            }    
        }

        paths[attr["key"]] = path;

        texts = texts.filter(function(item, pos) {
            return texts.indexOf(item) == pos;
        });

        path.mouseover(function() {
            this.attr({ "stroke-width": 4, "stroke-opacity": 0.6 });
            highlightResultElements([this["key"]]);

            var content = zeitraum + " " + texts.join(" - ");
            toolTip_mouseover_timeline(content);
        });

        path.mouseout(function() {
            
            if (this.node.classList.contains("newPath" + attr["key"])){
                this.attr({ "stroke-width": 1, "stroke-opacity": 1 });   
            } else {
                this.attr({ "stroke-width": 0.5, "stroke-opacity": 1 });  
            }
            highlightResultElements([]);
            toolTip_mouseout();
        });

        path.mousemove(function(event) {
            //-20 because it is the normal distance between timeline and the resultcontent
            toolTip_mousemove_timeline(event.layerX, event.layerY + (this.paper.canvas.parentNode.offsetTop - 20) );
        });
        path.click(function() {
            filterResultElements([this["key"]]);
        });
    }
}