var uivars = {
    nodesCounter: 1,
    nextY: -100,
    nextX: 350
};

var template_mode = false;

template_mode = false;



function GetElementInsideContainer(containerID, childID) {

    var elm = document.getElementById(childID);
    var parent = elm ? elm.parentNode : {};
    return (parent.id && parent.id === containerID) ? elm : {};

} //GetElementInsideContainer




function connect2(id1, id2, lbl) {
    var myConnection = jsPlumb.connect({ source: id1, target: id2 });
    myConnection.getOverlay("label").setLabel(lbl);
}

function add2(nid, ntop, nleft, nvalue) {

    var d = document.createElement('div');
    d.id = nid;
    d.className = "w";

    d.style.top = "" + ntop + "px";
    d.style.left = "" + nleft + "px";

    d.innerHTML = nvalue + "<div class='ep'></div>";

    var p = document.getElementById('demo');
    p.appendChild(d);

    jsPlumb.draggable(nid);

    var curColourIndex = 1, maxColourIndex = 24, nextColour = function () {
        var R, G, B;
        R = parseInt(128 + Math.sin((curColourIndex * 3 + 0) * 1.3) * 128);
        G = parseInt(128 + Math.sin((curColourIndex * 3 + 1) * 1.3) * 128);
        B = parseInt(128 + Math.sin((curColourIndex * 3 + 2) * 1.3) * 128);
        curColourIndex = curColourIndex + 1;
        if (curColourIndex > maxColourIndex) curColourIndex = 1;
        return "rgb(" + R + "," + G + "," + B + ")";
    };

    var div = document.getElementById(nid);
    var i;
    for (i = 0; i < div.childNodes.length; i++) {
        var k = div.childNodes[i];
        if (k.nodeType == 1) {
            var pp = k.parentNode;
            jsPlumb.makeSource(k, {
                parent: pp,
                //anchor:"BottomCenter",
                anchor: "Continuous",
                connector: ["StateMachine", { curviness: 20 }],
                connectorStyle: { strokeStyle: nextColour(), lineWidth: 2 },
                maxConnections: 5,
                onMaxConnections: function (info, e) {
                    alert("Maximum connections (" + info.maxConnections + ") reached");
                }
            });
        }
    }

    jsPlumb.makeTarget(nid, {
        dropOptions: { hoverClass: "dragHover" },
        anchor: "Continuous",
        beforeDrop: function (params) {
            return true;
        }
    });

} //add2



function add() {
    var d = document.createElement('div');
    d.id = "new" + uivars.nodesCounter;
    d.className = "w";

    var new_c = document.getElementById('new_concept');

    // Υπολογισμός κάτω από την μπάρα προσθήκης
    var bar = document.getElementById('addBar');
    var rect = bar.getBoundingClientRect();

    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

   

    d.innerHTML = new_c.value + "<div class='ep'></div>";
    new_c.value = "";

    var p = document.getElementById('demo');
    p.appendChild(d);

    jsPlumb.draggable("new" + uivars.nodesCounter);

    var curColourIndex = 1, maxColourIndex = 24;
    function nextColour() {
        var R = parseInt(128 + Math.sin((curColourIndex * 3 + 0) * 1.3) * 128);
        var G = parseInt(128 + Math.sin((curColourIndex * 3 + 1) * 1.3) * 128);
        var B = parseInt(128 + Math.sin((curColourIndex * 3 + 2) * 1.3) * 128);
        curColourIndex++;
        if (curColourIndex > maxColourIndex) curColourIndex = 1;
        return "rgb(" + R + "," + G + "," + B + ")";
    }

    var div = document.getElementById("new" + uivars.nodesCounter);
    for (var i = 0; i < div.childNodes.length; i++) {
        var k = div.childNodes[i];
        if (k.nodeType == 1) {
            var pp = k.parentNode;
            jsPlumb.makeSource(k, {
                parent: pp,
                anchor: "Continuous",
                connector: ["StateMachine", { curviness: 20 }],
                connectorStyle: { strokeStyle: nextColour(), lineWidth: 2 },
                maxConnections: 5,
                onMaxConnections: function (info, e) {
                    alert("Maximum connections (" + info.maxConnections + ") reached");
                }
            });
        }
    }

    jsPlumb.makeTarget("new" + uivars.nodesCounter, {
        dropOptions: { hoverClass: "dragHover" },
        anchor: "Continuous",
        beforeDrop: function (params) {
            return true;
        }
    });

    uivars.nodesCounter++;
}

function removeCmapNode() {

    jsPlumb.detachAllConnections('new1');
    var d = document.getElementById('demo');
    var p = document.getElementById('new1');
    d.removeChild(p);

} //removeCmapNode


function template3() {
    template_mode = true;
    var d = document.getElementById('demo');
    while (d.hasChildNodes()) {
        if (d.lastChild.id !== undefined) {
            if (d.lastChild.id.substring(0, 2) == "id" || d.lastChild.id.substring(0, 2) == "ne") {
                console.log(d.lastChild.id);
                jsPlumb.removeAllEndpoints(d.lastChild.id);
            }
        }
        d.removeChild(d.lastChild);
    }

    //	function add2( nid, ntop, nleft, nvalue ) 
    // add2Responsive('id1', 100, 650, 'μαγειρεύουμε .');
    // add2Responsive('id2', 200, 650, 'καθαρίζουμε .');
    // add2Responsive('id3', 300, 650, 'κόβουμε .');
    // add2Responsive('id4', 400, 650, 'μιλάμε με κάποιον ή κάποια .');
    // add2Responsive('id5', 500, 650, 'βάφουμε ή ζωγραφίζουμε .');
    // add2Responsive('id6', 600, 650, 'γράφουμε .');
    // add2Responsive('id7', 580, 40, 'Με το πινέλο .');
    // add2Responsive('id8', 180, 40, 'Με την κατσαρόλα .');
    // add2Responsive('id9', 380, 40, 'Με το τηλέφωνο .');
    // add2Responsive('id10', 480, 40, 'Με το μολύβι .');
    // add2Responsive('id11', 80, 40, 'Με το ψαλίδι .');
    // add2Responsive('id12', 280, 40, 'Με τη σκούπα .');

    const isMobile = window.innerWidth <= 768;

	if (isMobile) {
		add2Responsive('id1', 0.09, 0.4, 'μαγειρεύουμε .');
        add2Responsive('id2', 0.27, 0.38, 'καθαρίζουμε .');
        add2Responsive('id3', 0.42, 0.5, 'κόβουμε .');
        add2Responsive('id4', 0.8, 0.35, 'μιλάμε με κάποιον ή κάποια .');
        add2Responsive('id5', 0.65, 0.35, 'βάφουμε ή ζωγραφίζουμε .');
        add2Responsive('id6', 0.52, 0.5, 'γράφουμε .');
        add2Responsive('id7', 0.01, 0.01, 'Με το πινέλο .');
        add2Responsive('id8', 0.18, 0.01, 'Με την κατσαρόλα .');
        add2Responsive('id9', 0.35, 0.01, 'Με το τηλέφωνο .');
        add2Responsive('id10', 0.55, 0.01, 'Με το μολύβι .');
        add2Responsive('id11', 0.45, 0.01, 'Με το ψαλίδι .');
        add2Responsive('id12', 0.75, 0.01, 'Με τη σκούπα .');
	} else {
		add2Responsive('id1', 0.01, 0.35, 'μαγειρεύουμε .');
        add2Responsive('id2', 0.15, 0.35, 'καθαρίζουμε .');
        add2Responsive('id3', 0.3, 0.35, 'κόβουμε .');
        add2Responsive('id4', 0.45, 0.35, 'μιλάμε με κάποιον ή κάποια .');
        add2Responsive('id5', 0.6, 0.35, 'βάφουμε ή ζωγραφίζουμε .');
        add2Responsive('id6', 0.75, 0.35, 'γράφουμε .');
        add2Responsive('id7', 0.01, 0.01, 'Με το πινέλο .');
        add2Responsive('id8', 0.15, 0.01, 'Με την κατσαρόλα .');
        add2Responsive('id9', 0.3, 0.01, 'Με το τηλέφωνο .');
        add2Responsive('id10', 0.45, 0.01, 'Με το μολύβι .');
        add2Responsive('id11', 0.75, 0.01, 'Με το ψαλίδι .');
        add2Responsive('id12', 0.6, 0.01, 'Με τη σκούπα .');
	}  
  

    template_mode = false;
}

function add2Responsive(nid, ntopRatio, nleftRatio, nvalue, inputText) {
    const ntop = window.innerHeight * ntopRatio;
    const nleft = window.innerWidth * nleftRatio;
    add2(nid, ntop, nleft, nvalue, inputText);
}

$(document).ready(function () {

    var conn2;

    $("#droppable").droppable({
        drop: function (event, ui) {

            var did = $(ui.draggable).attr("id");
            jsPlumb.detachAllConnections(did);
            var d = document.getElementById('demo');
            var p = document.getElementById(did);
            d.removeChild(p);
        }
    });



    $("#btnShowSimple").click(function (e) {
        ShowDialog(false);
        e.preventDefault();
    });

    $("#btnShowModal").click(function (e) {
        ShowDialog(true);
        e.preventDefault();
    });

    $("#btnClose").click(function (e) {
        HideDialog();
        e.preventDefault();
    });

    $("#btnSubmit").click(function (e) {
        var brand = $("#brands input:radio:checked").val();
        uivars.link_text = "brand";
        //$("#output").html("<b>Your favorite mobile brand: </b>" + brand);
        HideDialog();
        e.preventDefault();
    });

    template3();

});

function ShowDialog(modal) {

    $("#overlay").show();
    $("#dialog").fadeIn(300);

    if (modal) {
        $("#overlay").unbind("click");
    }
    else {
        $("#overlay").click(function (e) {
            HideDialog();
        });
    }

}

function HideDialog() {

    $("#overlay").hide();
    $("#dialog").fadeOut(300);
    conn2.connection.getOverlay("label").setLabel($("#link_text").val());
    $("#link_text").val("");

} 