/*
 * Fichier contenant les fonctions pour dessiner des elements svg sur la page html
 * Appele par svgNoodle.js
 */

NB_POINTS = 12;

/*
 * creation d'un path (courbe) svg
 * @param {type} x
 * @param {type} y
 * @param {type} id
 */
function createPath(id, d, width, couleur) {
    //"d" ressemble a : "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041"

    newpath = document.createElementNS(svgNS, "path");
    newpath.setAttributeNS(null, "id", id);
    newpath.setAttributeNS(null, "d", d);
    newpath.setAttributeNS(null, "stroke", couleur);
    newpath.setAttributeNS(null, "stroke-width", width);
    newpath.setAttributeNS(null, "opacity", 1);
    newpath.setAttributeNS(null, "fill", "none");

    svg.appendChild(newpath);

    return newpath;
}

/*
 * creation d'un cercle svg
 */
function createCircle(x, y, couleur, id) {

    var rayon = 15;

// x * tailleCarre / 15 pour avoir des points entre 0 et taille de la div
// laisse une marge de la taille du rayon pour que les cercles ne depassent pas
    x = scale(x, rayon);
    y = scale(y, rayon);

    y = tailleCarre - y; //pour placer comme avec threeNoodle  

    var myCircle = document.createElementNS(svgNS, "circle"); //to create a circle. for rectangle use "rectangle"
    myCircle.setAttributeNS(null, "id", id);
    myCircle.setAttributeNS(null, "cx", x);
    myCircle.setAttributeNS(null, "cy", y);
    myCircle.setAttributeNS(null, "r", rayon);
    myCircle.setAttributeNS(null, "fill", couleur);
    myCircle.setAttributeNS(null, "stroke", "none");

    svg.appendChild(myCircle);
}

function createArrow() {
    //constructeur
    var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
    var marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
    marker.setAttribute('id', 'triangle');
    marker.setAttribute('viewBox', '0 0 10 10');
    marker.setAttribute('refX', '0');
    marker.setAttribute('refY', '5');
    marker.setAttribute('markerUnits', 'strokeWidth');
    marker.setAttribute('markerWidth', '3');
    marker.setAttribute('markerHeight', '3');
    marker.setAttribute('orient', 'auto');
    //tete de fleche
    var newpath = document.createElementNS(svgNS, "path");
    newpath.setAttributeNS(null, "d", "M 0 0 L 10 5 L 0 10 z");
    newpath.setAttributeNS(null, "fill", "red");
    marker.appendChild(newpath);

    //path fleche
    var path = createPath('fleche1', 'M 20 20 l 100 0', 6, 'red');
    path.setAttributeNS(null, 'marker-end', 'url(#triangle)');
    var path2 = createPath('fleche1', 'M 20 20 l 0 100', 6, 'red');
    path2.setAttributeNS(null, 'marker-end', 'url(#triangle)');

    svg.appendChild(defs);
    defs.appendChild(marker);

}

/*
 * adapte a la taille de la div
 * incorrect ? lineto pas point mais vecteur
 */
function scale(val, marge) {
//    alert(val);
    
    var res = Math.round(val * tailleCarre / 15);

    if (res <= marge) {
//        res += marge + 1;
        res = marge + Math.round(res/12) + 1;
    }
    else if (res >= tailleCarre - marge) {
//        res -= marge + 1;
        res = (tailleCarre - marge) - Math.round(res/12) - 1;
    }

    return res;

}

/*
 * Dessine un path noir et courbe qui passe par tous les points 
 */
function line(dots, couleurs) {
    var width = 3; //epaisseur du trait

    var d = "M " + scale(dots[0], width) + "," + scale(dots[1], width) + " C"; //point de depart
    var counter = 2;
    for (var i = 0; i < NB_POINTS; i++) {
        d += " " + scale(dots[counter - 2], width) / 2 + "," + scale(dots[counter - 1], width) / 2; //courbure
        d += " " + scale(dots[counter - 1], width) + "," + scale(dots[counter - 2], width); //courbure
        d += " " + scale(dots[counter], width) + "," + scale(dots[counter + 1], width); //next point

        counter += 2;
    }
    createPath(0, d, width, "black");
}

/*
 * Dessine des cercles de couleurs differentes
 */
function pastille(dots, couleurs) {
    var counter = 0;
    var icouleur = 0; //indice pour le tableau couleurs
    for (var i = 0; i < NB_POINTS; i++) {
        if (icouleur >= couleurs.length) {
            icouleur = 0;
        }

        createCircle(dots[counter], dots[counter + 1], couleurs[icouleur++], i);
        counter += 2;
    }
}

/*
 * Dessine des paths reliant chaque point d'une couleur et referme la figure
 */
function gribouillis(dots, couleurs) {
    var width = 6;
    var couleurs = ["#3C61A6", "#AD519A", "#BF2130", "#DE703C", "#F9C34A", "#8FB65A", "#3C61A6", "#AD519A", "#BF2130", "#DE703C", "#F9C34A", "#8FB65A", "#3C61A6", "#AD519A", "#BF2130", "#DE703C", "#F9C34A", "#8FB65A"];
    var d = "";

    var counter = 0;
    for (var i = 0; i < NB_POINTS - 1; i++) {
        //point lineto prochain point
        d = "M " + scale(dots[counter], width) + "," + scale(dots[counter + 1], width) + " l " + (scale(dots[counter + 2], width) - scale(dots[counter], width)) + "," + (scale(dots[counter + 3], width) - scale(dots[counter + 1], width));
        createPath(i, d, width, couleurs[i]);
        counter += 2;
    }
    //la dernier ligne revient sur le dernier point
    d = "M " + scale(dots[2 * NB_POINTS - 2], width) + "," + scale(dots[2 * NB_POINTS - 1], width) + " l " + (scale(dots[0], width) - scale(dots[2 * NB_POINTS - 2], width)) + "," + (scale(dots[1], width) - scale(dots[2 * NB_POINTS - 1], width));
    createPath(NB_POINTS - 1, d, width, "black");
}

/*
 * Dessine des traits dont le premier point est place en x,y 
 * Les vecteurs sont calcules pour que les traits aient la meme taille, selon des angles choisis fixes 
 */
function mikado(dots, couleurs) {
    
    var rayon = 200; //taille des vecteurs
    var width = 6;
    //en radian
    var angles = [0, 0.2, 0.8, 1, 1.3, 1.5, 3, 3.5, 3.9, 4.5, 4.8, 5];

    var counter = 0;
    for (var i = 0; i < NB_POINTS; i++) {
        //calculs vecteurs
        var vx = rayon * Math.cos(angles[i]);
        var vy = rayon * Math.sin(angles[i]);

        var d = "M " + scale(dots[counter], rayon) + "," + scale(dots[counter + 1], rayon) + " l " + vx + "," + vy;
//var d = "M " + dots[counter] + "," + dots[counter + 1] + " l " + vx + "," + vy;
        createPath(i, d, width, "black");

        counter += 2;
    }

}