/*
 * Javascript pour creer dynamiquement du svg sur la page html a partir d'un tableau de points 2D
 */

//function include(fileName) {
//    document.write("<script type='text/javascript' src='" + fileName + "'></script>");
//}
//include('js/drawSvg.js');

var container = document.getElementById('noodle');

var svgNS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svg.setAttribute("version", "1.1");

//taille du <svg>
var tailleCarre = 500;
svg.setAttribute("width", 500);
svg.setAttribute("height", 500);

//var viewbox = 500;

if (screen.height > 500 && screen.width > 500) {

    svg.setAttribute("width", 500);
    svg.setAttribute("height", 500);
}
else if (screen.height > 300 && screen.width > 300) {
//    viewbox = 300;
//    tailleCarre = 300;
    svg.setAttribute("width", 300);
    svg.setAttribute("height", 300);
}
else {
//    viewbox = 200;
//    tailleCarre = 200;
    svg.setAttribute("width", 200);
    svg.setAttribute("height", 200);
}

svg.setAttribute("viewBox", "0 0 " + tailleCarre + " " + tailleCarre);

var NB_POINTS = 12;

$("head").append('<script type="text/javascript" src="./js/draw/scale.js"></script>');
$("head").append('<script type="text/javascript" src="./js/draw/path.js"></script>');

/*
 * dots : le tableau a 1D de coord de points (x1, y1, x2, y2, ...)
 * forme : la forme a dessiner 
 */
function init(dots, forme, palette, axes) {

    $("head").append('<script type="text/javascript" src="./js/draw/' + forme + '.js"></script>');

//    if (forme.slice(0, 8) === "pastille") {
//        var couleurs = palette;
//
//        forme = "pastille";
//    }

    //arrow pour indiquer le sens de la figure
    if (axes) {
        createArrow();
    }
    //appelle de la fonction pour dessiner, voir fichier draw.js
//    window[forme](dots, couleurs);
    draw(dots, palette);

    container.appendChild(svg);

}

/*
 * repaire pour orienter la figure
 */
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);

}