window.addEventListener("load", drawTimelineVertical);

var svgNS = "http://www.w3.org/2000/svg";

var colors = [
    "#fcc", "#cfc", "#fd9", "#9fd", "#fcf", "#bdf",
    "#ffb", "#bbf", "#9fd"
    //"#fff"
]

var length = 700;
var pWidth = 20;

function drawTimeline (evt) {
    var max = 0, min = 5000;
    
    /*
    for (var  i =0; i < timeline.periods.length; i++) {
        var period = timeline.periods[i];
        max = Math.max(max, period.end);
        min = Math.min(min, period.start);    
    }
    */
    max = timeline.max;
    min = timeline.min;
    
    var slope = length/(max-min);
    var q = -min*slope;
    
    var scale = document.querySelector("#left svg").appendChild(document.createElementNS(svgNS, "g"))
    var evts = document.querySelector("#left svg").appendChild(document.createElementNS(svgNS, "g"))
    
    var pers = document.querySelector("#left svg").appendChild(document.createElementNS(svgNS, "g"))
    
    var descs = document.querySelector("#left svg").appendChild(document.createElementNS(svgNS, "g"))
    
    pers.setAttribute("id", "periods");
    
    //meritko cas. osy
    
    var modS = min % timeline.step;
    var divS = Math.floor(min/timeline.step);
    //alert(modS + ", " + divS);
    
    var modE = max % timeline.step;
    var divE = Math.floor(max/timeline.step);
    var stepY = Math.floor(timeline.step*slope);
    
    var isOdd = true;
    var scaleY = 0;
    var actDate = min;
    
    if (modS > 0) {
        var scl = scale.appendChild(document.createElementNS(svgNS, "rect"));
        scl.setAttribute("x", 0);
        scl.setAttribute("y", scaleY);
        scl.setAttribute("width", 300);
        scl.setAttribute("height", modS*slope);
        scl.setAttribute("style", "stroke-width: 0; fill: #eee");
        isOdd = false;
         /*       
        var desc = scale.appendChild(document.createElementNS(svgNS, "text"));
        desc.appendChild(document.createTextNode(actDate));
        desc.setAttribute( "x", 2);
        var descY = Math.max(10, scaleY +3) 
        desc.setAttribute( "y", descY);
        desc.setAttribute( "style", "stroke-width: 0; fill: #666; font-size: 8px;");
        */
        actDate = divS*timeline.step;
        scaleY += modS*slope;
    }
    if (modS == 0) {
        actDate = min;
    }
    while (actDate < max) {
        var scl = scale.appendChild(document.createElementNS(svgNS, "rect"));
       
        scl.setAttribute("x", 0);
        scl.setAttribute("y", slope*actDate + q);
        scl.setAttribute("width", 300);
        scl.setAttribute("height", stepY);
        scl.setAttribute("style", "stroke-width: 0; fill: #" + ((isOdd) ? "f0f0f0" : "fff") );
        
        
         var desc = scale.appendChild(document.createElementNS(svgNS, "text"));
        desc.appendChild(document.createTextNode(actDate));
        desc.setAttribute( "x", 1);
        var descY = slope*actDate + q
        descY = Math.max(10, descY +10) 
        desc.setAttribute( "y", descY);
        desc.setAttribute( "style", "stroke-width: 0; fill: #666; font-size: 8.5px;");
        scaleY += stepY;
        
        actDate += timeline.step;
        isOdd = !isOdd;
    }
    
    if (modE > 0) {
        var scl = pers.appendChild(document.createElementNS(svgNS, "rect"));
        scl.setAttribute("x", 0);
        scl.setAttribute("y", scaleY);
        scl.setAttribute("width", 300);
        scl.setAttribute("height", modE*slope);
        scl.setAttribute("style", "stroke-width: 0; fill: #" + ((isOdd) ? "f0f0f0" : "fff") );
      
    }
    
    var posX = 30;
    for (var  i =0; i < timeline.periods.length; i++) {
        var period = timeline.periods[i];
        var per = pers.appendChild(document.createElementNS(svgNS, "rect"));
        var color = i % colors.length;
        
        var perLength = period.end-period.start;
        if (i > 0 && period.start < timeline.periods[i-1].end) {
            posX += pWidth;
        }
        var ey = slope*period.start + q
        per.setAttribute("style", "fill: " + colors[color] + "; stroke-width: 1px; stroke: #bbb;" );
        per.setAttribute("x", posX );
        per.setAttribute("y", ey );
        per.setAttribute("width", pWidth );
        per.setAttribute("height", slope*(period.end-period.start) );
        
        var desc = descs.appendChild(document.createElementNS(svgNS, "text"));
        desc.appendChild(document.createTextNode(period.title));
//        desc.setAttribute( "x", posX);
//        desc.setAttribute( "y", ey);
        desc.setAttribute( "transform", "translate(" + (posX +5)+", " + (ey +5) + ") rotate(90)");
        desc.setAttribute( "style", "stroke-width: 0; fill: #666; font-size: 10px; font-weight: bold;");
        
    }
    
    for (var i = 0; i < timeline.events.length; i++) {
        var evt = timeline.events[i];
        var ey =  slope*evt.start + q;
        
        var line = evts.appendChild(document.createElementNS(svgNS, "line"));
        line.setAttribute("x1", 30);
        line.setAttribute("x2", 125);
        line.setAttribute("y1", ey);
        line.setAttribute("y2", ey);
        line.setAttribute("style", "stroke-width: 1px; stroke: #bbb");
        
        var desc = descs.appendChild(document.createElementNS(svgNS, "text"));
        desc.appendChild(document.createTextNode(evt.start + " " +evt.title));
        desc.setAttribute( "x", 130);
        var descY = Math.max(10, ey +3) 
        desc.setAttribute( "y", descY);
        desc.setAttribute( "style", "stroke-width: 0; fill: #666; font-size: 10px;");
        
        
    }
    drawTimelineHorizontal (evt);
}

function log(nb) {
    return Math.log(nb)/Math.LN10;
}

function drawTimelineHorizontal (evt) {
    var max = 0, min = 5000;
    
    /*
    for (var  i =0; i < timeline.periods.length; i++) {
        var period = timeline.periods[i];
        max = Math.max(max, period.end);
        min = Math.min(min, period.start);    
    }
    */
    max = timeline.max;
    min = timeline.min;
    length = 2000;
    
    var slope = length/(max-min);
    var q = -min*slope;
    
    var tl = document.querySelector(".timeline3");
    if (!tl) {
        var txt = document.getElementById("text");
        tl = txt.parentNode.insertBefore(document.createElement("nav"), txt.nextSibling);
        tl.className = "prevnext timeline3"
    }
    var scale = tl.appendChild(document.createElement("div"));
    scale.className = "scale";
    
    var evts = tl.appendChild(document.createElement("div"));
    evts.className = "evts";
    
    var pers = tl.appendChild(document.createElement("div"));
    pers.className = "pers";
    
    var descs = tl.appendChild(document.createElement("div"))
    descs.className = "descs";
    /*
    if (tl.addEventListener) {
	// IE9, Chrome, Safari, Opera
	tl.addEventListener("mousewheel", tlScroller, false);
	// Firefox
	tl.addEventListener("DOMMouseScroll", tlScroller, false);
    */

    
    
    //meritko cas. osy
    
    var modS = min % timeline.step;
    var divS = Math.floor(min/timeline.step);
    
    
    var modE = max % timeline.step;
    var divE = Math.floor(max/timeline.step);
    var stepY = Math.floor(timeline.step*slope);
    
    var isOdd = true;
    var scaleY = 0;
    var actDate = min;
    
    if (modS > 0) {
        var scl = scale.appendChild(document.createElement("div"));
        scl.style.left = 0;
        scl.style.bottom = "10px";
        scl.style.height = modS*slope + "px";
        scl.style.width = "400px";
        scl.className = "scale-odd";
        isOdd = false;
         /*       
        var desc = scale.appendChild(document.createElementNS(svgNS, "text"));
        desc.appendChild(document.createTextNode(actDate));
        desc.setAttribute( "x", 2);
        var descY = Math.max(10, scaleY +3) 
        desc.setAttribute( "y", descY);
        desc.setAttribute( "style", "stroke-width: 0; fill: #666; font-size: 8px;");
        */
        actDate = divS*timeline.step;
        scaleY += modS*slope;
    }
    if (modS == 0) {
        actDate = min;
    }
    while (actDate < max) {
        var scl = scale.appendChild(document.createElement("div"));
        scl.style.left = (slope*actDate + q) + "px";
        scl.style.bottom = "0";
        scl.style.height = "200px";
        scl.style.width = stepY + "px";
        //scl.className = "scale-odd";
        
        scl.className = (isOdd) ? "scale-odd" : "scale-even";
        
         var desc = scl.appendChild(document.createElement("div"));
        desc.appendChild(document.createTextNode(actDate));
        desc.className = "scale-desc";
        scaleY += stepY;
        
        actDate += timeline.step;
        isOdd = !isOdd;
    }
    
    if (modE > 0) {
        var scl = pers.appendChild(document.createElementNS(svgNS, "rect"));
        scl.style.top = 0;
        scl.style.left = scaleY;
        scl.style.width = modE*slope + "px";
        scl.classsName = (isOdd) ? "scale-odd" : "scale-even";
      
    }
    
    var posTime = 20;
    pWidth = 42;
    for (var  i =0; i < timeline.periods.length; i++) {
        var period = timeline.periods[i];
        var per = pers.appendChild(document.createElement("div"));
        per.className = "tl-period"
        var color = i % colors.length;
        
        var perLength = period.end-period.start;
        if (i > 0 && period.start < timeline.periods[i-1].end) {
            posTime += pWidth;
        }
        var ey = slope*period.start + q
        per.setAttribute("style", "background-color: " + colors[color] + "; border: 1px solid #bbb;" );
        per.style.bottom =  posTime + "px";
        per.style.left = ey + "px";
        per.style.width = slope*(period.end-period.start) + "px";
        per.style.height = pWidth + "px";
        
        var desc = per.appendChild(document.createElement("div"));
        desc.className = "tl-desc";
        desc.innerHTML = "<a href='#" + period.href +"'>" + period.title + "</a>";
        per.title = removeTags(period.title);
    }
    
    for (var i = 0; i < timeline.events.length; i++) {
        var evt = timeline.events[i];
        var ey =  slope*evt.start + q;
        
        var line = evts.appendChild(document.createElement("div"));
        line.className = "evt-body"
        line.setAttribute("style", "");
        line.style.left = ey + "px";
        line.style.top = "20px";
        
        var desc = line.appendChild(document.createElement("div"));
        desc.className = "evt-desc";
        desc.innerHTML = "<a href='#" + evt.href +"'>" + evt.start + " " +evt.title + "</a>";
            
        
        
    }
    
    tl.addEventListener("mousedown", tlDragStart);
    tl.addEventListener("mousemove", tlDragMove);
    tl.addEventListener("mouseup", tlDragEnd);
    tl.addEventListener("mouseout", tlDragEnd);
}

function drawTimelineVertical (evt) {
    var max = 0, min = 5000;
    var dy = 10;
    /*
    for (var  i =0; i < timeline.periods.length; i++) {
        var period = timeline.periods[i];
        max = Math.max(max, period.end);
        min = Math.min(min, period.start);    
    }
    */
    max = timeline.max;
    min = timeline.min;
    length = timeline.length || 2000;
    
    var slope = length/(max-min);
    var q = -min*slope;
    if (timeline.type == "log") {
        slope = length/(log(Math.abs(max)) - log(Math.abs(min)));
        q = -log(Math.abs(min))*slope;
    }
    console.log("Range: " + (-log(Math.abs(max)) + log(Math.abs(min))) )
    console.log("Slope: " + slope + ", q: " + q);
    var tl = document.querySelector(".timeline4");    
    if (!tl) {
        var txt = document.getElementById("text");
        tl = txt.appendChild(document.createElement("nav"));
        tl.className = "timeline4"
    }
    
    tl.style.height = "" + length + "px";
    var scale = addChild(tl, "div", "scale");
    scale.style.height = (length + 20) + "px"
    
    var evts = tl.appendChild(document.createElement("div"));
    evts.className = "evts";
    
    var pers = tl.appendChild(document.createElement("div"));
    pers.className = "pers";
     addChild(tl, "div", "scale-back");
    var descs = tl.appendChild(document.createElement("div"))
    descs.className = "descs";
    
    
    /*
    if (tl.addEventListener) {
	// IE9, Chrome, Safari, Opera
	//tl.addEventListener("mousewheel", tlScroller, false);
	// Firefox
	//tl.addEventListener("DOMMouseScroll", tlScroller, false);
    }
    */
    
    //meritko cas. osy
    
    var modS = min % timeline.step;
    var divS = Math.floor(min/timeline.step);
    
    
    var modE = max % timeline.step;
    var divE = Math.floor(max/timeline.step);
    var stepY = Math.floor(timeline.step*slope);
    
    var isOdd = true;
    var scaleY = 0;
    var actDate = min;
    
    if (modS > 0) {
        var scl = scale.appendChild(document.createElement("div"));
        scl.style.left = 0;
        scl.style.top = "20px";
        scl.style.height = "200px";
        scl.style.width = modS*slope + "px";
        scl.className = "scale-odd";
        isOdd = false;
         /*       
        var desc = scale.appendChild(document.createElementNS(svgNS, "text"));
        desc.appendChild(document.createTextNode(actDate));
        desc.setAttribute( "x", 2);
        var descY = Math.max(10, scaleY +3) 
        desc.setAttribute( "y", descY);
        desc.setAttribute( "style", "stroke-width: 0; fill: #666; font-size: 8px;");
        */
        actDate = divS*timeline.step;
        scaleY += modS*slope;
    }
    if (modS == 0) {
        actDate = min;
    }
    while (actDate < max) {
        var scl = scale.appendChild(document.createElement("div"));
        scl.style.top = (slope*actDate + q + dy) + "px";
        scl.style.left = "0";
        scl.style.height = stepY + "px";
        //scl.style.width = "10px";
        //scl.className = "scale-odd";
        
        scl.className = "scale-grade " + ((isOdd) ? "scale-odd" : "scale-even");
        
        var desc = addChild(scl, "div", "scale-desc", Math.abs(actDate));
       
        scaleY += stepY;
        
        actDate += timeline.step;
        isOdd = !isOdd;
    }
    
    if (modE > 0) {
        var scl = pers.appendChild(document.createElementNS(svgNS, "rect"));
        scl.style.top = 0;
        scl.style.left = scaleY;
        scl.style.width = modE*slope + "px";
        scl.classsName = (isOdd) ? "scale-odd" : "scale-even";
      
    }
    
    var posTime = 20;
    pWidth = 250;
    for (var  i =0; i < timeline.periods.length; i++) {
        var period = timeline.periods[i];
        
        var trida = "tl-period";
        if (period.type) {
            trida += " " + period.type;
        }
        var per = addChild(pers, "div", trida);
        
        var color = i % colors.length;
        
        var perLength = period.end-period.start;
        if (i > 0 && period.start < timeline.periods[i-1].end) {
            posTime += pWidth;
        }
        var ey = slope*period.start + q //+ dy
                
        per.style.left =  posTime + "px";
        
        var height = Math.round(slope*(period.end - period.start)) +2;
        
        if (timeline.type == "log") {
            ey = slope*log(Math.abs(period.start)) + q;
            height = slope*(-log(Math.abs(period.start)) + log(Math.abs(period.end)) ) +2 ;
        }
        console.log("Start: " +period.start + ", end: " + period.end);
        console.log("Top: " + ey + ", height: " + height );
        
        per.style.top = ey + "px";
        per.style.height = Math.round(height) + "px";
        //per.style.backgroundColor = colors[color];
        
        var target = timeline.baseUrl + "#" + period.href;       
        addChild(per, "div", "tl-desc", "<a href='" + target +"'>" + period.title + "</a>");
        
        var dates = addChild(per, "div", "date");
        
        addChild(dates, "div", "period-start", getDate(period.start));
        addChild(dates, "div", "period-end", getDate(period.end));
        
        
        per.title = removeTags(period.title);
        
        
    }
    
    posTime = 210;
    if (timeline.people) {
        for (var  i =0; i < timeline.people.length; i++) {
        var period = timeline.people[i];
        var trida = "tl-human";
        if (period.type) {
            trida += " " + period.type;
        }
        var per = addChild(pers, "div", trida);    
      
        var color = i % colors.length;
        
        var perLength = period.end-period.start;
        if (i > 0 && period.start < timeline.people[i-1].end) {
            posTime += pWidth;
        }
        var ey = slope*period.start + q // +dy
        var height = slope*(period.end-period.start) + 2
        
        
        per.style.left =  posTime + "px";
        if (timeline.type == "log") {
            ey = slope*log(Math.abs(period.start)) + q;
            height = slope*(-log(Math.abs(period.start)) + log(Math.abs(period.end)) ) +2  ;
        }
            
        per.style.top = ey + "px";
        per.style.height = height + "px";
        //per.style.backgroundColor = colors[color];
        
           
        var dates = addChild(per, "div", "date");
        
        addChild(dates, "div", "period-start", getDate(period.start));
        addChild(dates, "div", "period-end", getDate(period.end));
            
         var target = timeline.baseUrl + "#" + period.href;        
        addChild(per, "div", "tl-desc", "<a href='" + target +"'>" + period.title + "</a>");
        
        per.title = removeTags(period.title);
        
        
    }
    }
    
    
    for (var i = 0; i < timeline.events.length; i++) {
        var evt = timeline.events[i];
        var ey =  slope*evt.start + q -6;
        
        if (timeline.type == "log") {
            ey = slope*log(Math.abs(evt.start)) + q - 6;
            
        }
        
        var trida =  "evt-body";
        if (evt.type) {
            trida += " " + evt.type;
        }
        var line = addChild(evts, "div", trida);
        
        line.setAttribute("style", "");
        line.style.top = ey + "px";
        //line.style.left = "400px";
        
        var desc = line.appendChild(document.createElement("div"));
        desc.className = "evt-desc";
        var dTime = getDate(evt.start);
        if (evt.end) {
            dTime +=  "–" + getDate(evt.end);
        }
                
        var date = addChild(desc, "div", "date");
        date.innerHTML = dTime;
        
        var target = timeline.baseUrl + "#" + evt.href;
        desc.innerHTML += "<a href='" + target +"'>" + evt.title + "</a>";
            
        
        
    }
    /*
    tl.addEventListener("mousedown", tlDragStart);
    tl.addEventListener("mousemove", tlDragMove);
    tl.addEventListener("mouseup", tlDragEnd);
    tl.addEventListener("mouseout", tlDragEnd);
    */
}

function getDate(nb) {
    var num = parseInt(nb);
    var sgn = (num < 0) ? "-" : "";
    var affix = (num < 0) ? "&#160;av.J.C." : "";
    
    num = Math.abs(num);
        
    var numText = "" + num + affix;
    if (num > 999 && num < 1e6 && sgn == "-") {
        numText = numText.replace(/(\d)00\&/, "&#160;$100&");
    }
    
    if (num > 999999) {
        numText = "" + Math.floor(num/1e6) + "." + Math.floor((num % 1e6)/1e5) + "&#160;M.a.&#160;av.J.C.";
            }
    
    return numText;
}

function removeTags(text) {
    return text.replace(/<[^>]+>/g, "");
}


function tlDragStart(evt) {
    
    timeline.origX = evt.clientX;
    timeline.dragged = true;
    
    report("start" + timeline.origX);
}

function tlDragMove(evt) {
    if (timeline.dragged) {
        if (document.selection) {
            document.selection.empty();
        }
        else {
            window.getSelection().removeAllRanges();
        }
        var dx = evt.clientX - timeline.origX;
        report("move" + dx);
        var tl = document.querySelector(".timeline3");
        
        tl.scrollLeft -= dx;
        
        timeline.origX = evt.clientX;
    }
      
}

function tlDragEnd(evt) {
    timeline.origX = -1;
    timeline.dragged = false;
    report("end");
}


function tlScroller(evt) {
evt.preventDefault();
	// cross-browser wheel delta
	//var evt = window.event || evt; // old IE support
	var delta = Math.max(-1, Math.min(1, (evt.wheelDelta || -evt.detail)));
    
    var tl = document.querySelector(".timeline3");    
    tl.scrollLeft -= delta*60;
}

function report (text) {
    var rep =  document.getElementById("report");
   if (rep) rep.innerHTML = text;
}


function addChild(parent, childName, childClass, childContent) {
    var child = document.createElement(childName);
    if (childClass && childClass != "") {
        child.setAttribute("class", childClass);
        
    }
    
    if (childContent && childContent != "") {
        child.innerHTML = childContent;
    }
    
    parent.appendChild(child);
    return child;
}