var parametro = {
    interlinea: 8 // 1/4 * altezza della pentagramma
    // è l'unità fondamentale
};
var variabile = {
    x: null,
    altezza: 9 * parametro.interlinea,
    profondità: 3 * parametro.interlinea,
    svg: null
};
var ns = { //spazio dei nomi
    svg: "http://www.w3.org/2000/svg",
    html: "http://www.w3.org/1999/xhtml",
    xlink: "http://www.w3.org/1999/xlink"
};
var segno = {
    chiave: {
        Sol: "&",
        Fa: "?",
        Do: "B"
    },
    alterazione: {
        doppio_bemolle: "\u00ba",
        bemolle: "b",
        bequadro: "n",
        diesis: "#",
        doppio_diesis: "\u00dc"
    },
    nota: {
        semibreve: "w",
        minima: "h",
        semiminima: "q",
        croma: "e",
        semicroma: "x",
        biscroma: "r",
        semibiscroma: "\u00c6",
        quintupla: "" //"\u008c" DOES NOT WORK (C1 range)
    },
    pausa: {
        semibreve: "\u00b7",
        minima: "\u00ee",
        semiminima: "\u00ce",
        croma: "\u00e4",
        semicroma: "\u00c5",
        biscroma: "\u00a8",
        semibiscroma: "\u00f4",
        quintupla: "\u00e5" // detta anche: fusa
    },
    dinamica: {
        piano: "p"
        //piano, forte, mezzopiano, &c.
    },
    stanghetta: {
        sottile: 'l'
        // grossa
    }
};
function stampo(segno, linea, dx) {
    //window.console.log("segno: " + segno);
    var text = document.createElementNS(ns.svg, "text");
    text.appendChild(document.createTextNode(segno));
    text.setAttribute("x", variabile.x);
    text.setAttribute("y", -linea * parametro.interlinea);
    variabile.svg.appendChild(text);
    //window.console.log("segno: " + text.getComputedTextLength ());
    //variabile.x += text.getComputedTextLength ();
    variabile.x += dx;
}
function armatura1(alterazione, pos) {
    var ε = (alterazione == "b" ? -1 : +1);
    //window.console.log((pos+1*ε));
    stampo(alterazione, pos, 10);
    //stampo('_', pos-1.5*ε, 0);
    stampo(alterazione, pos-1.5*ε, 10);
    stampo(alterazione, pos+0.5*ε , 10);
    stampo(alterazione, pos-1*ε, 10);
    stampo(alterazione, pos+1*ε, 10);
    stampo(alterazione, pos-0.5*ε, 10);
    stampo(alterazione, pos+1.5*ε, 10);
    variabile.x+=15;
}
function armatura2(alterazione, pos) {
    var ε = (alterazione == "b" ? -1 : +1);
    //window.console.log((pos+1*ε));
    stampo(alterazione, pos, 10);
    stampo(alterazione, pos-1.5*ε, 10);
    stampo(alterazione, pos+0.5*ε , 10);
    stampo(alterazione, pos-1*ε, 10);
    stampo(alterazione, pos-2.5*ε, 10);
    stampo(alterazione, pos-0.5*ε, 10);
    stampo(alterazione, pos-2*ε, 10);
    variabile.x+=15;
}
function armatura3(alterazione, pos) {
    var ε = (alterazione == "b" ? -1 : +1);
    //window.console.log((pos+1*ε));
    stampo(alterazione, pos, 10);
    stampo(alterazione, pos+2*ε, 10);
    stampo(alterazione, pos+0.5*ε , 10);
    stampo(alterazione, pos+2.5*ε, 10);
    stampo(alterazione, pos+1*ε, 10);
    stampo(alterazione, pos+3*ε, 10);
    stampo(alterazione, pos+1.5*ε, 10);
    variabile.x+=15;
}
var ELTS = document.getElementsByClassName("musica");
for (var i = 0; i < ELTS.length; i++) {
    //var ELT = document.getElementsByClassName("musica")[0];
    //var STR = ELT.innerHTML;
    var STR = ELTS[i].innerText;
    ELTS[i].innerHTML = "";  // display bugs med SVG og tekst i samme elt...
    variabile.x = 15;
    variabile.svg = document.createElementNS(ns.svg, "svg");
    var TOK = STR.split(/\s+/);
    //for (var i in TOK)
    for (var j = 0; j < TOK.length; j++)
    {
        //document.write('"' + TOK[i] + '"');
        //window.console.log(i + ' "' + TOK[i] + '"');
        //stampo(segno.chiave.Sol, 0, 40);
        switch (TOK[j]) {
        case "chiave":
            j++;
            //window.console.log('""' + TOK[i] + '""');
            switch (TOK[j]) {
            case "francese": // violino francese
                stampo(segno.chiave.Sol, 1-1, 40);
                break;
            case "violino":
                stampo(segno.chiave.Sol, 2-1, 40);
                break;
            case "soprano":
                stampo(segno.chiave.Do, 1-2, 40);
                break;
            case "mezzosoprano":
                stampo(segno.chiave.Do, 2-2, 40);
                break;
            case "contralto":
                stampo(segno.chiave.Do, 3-2, 40);
                break;
            case "tenore":
                stampo(segno.chiave.Do, 4-2, 40);
                break;
            case "baritono":
                stampo(segno.chiave.Fa, 3-3, 40);
                break;
            case "basso":
                stampo(segno.chiave.Fa, 4-3, 40);
                break;
            case "profondo": // basso profondo
                stampo(segno.chiave.Fa, 5-3, 40);
                break;
            default:
                //window.console.log("Chiave " + TOK[j] + " ?");
                break;            
            }
            break;
        case "armatura1":
            j += 2;
            armatura1(TOK[j-1], parseFloat(TOK[j]));
            break;
        case "armatura2":
            j += 2;
            armatura2(TOK[j-1], parseFloat(TOK[j]));
            break;
        case "armatura3":
            j += 2;
            armatura3(TOK[j-1], parseFloat(TOK[j]));
            break;
        default:
            break;
        }
        
    }
    variabile.svg.setAttribute("width", variabile.x + "px");
    variabile.svg.setAttribute("height", variabile.profondità + variabile.altezza + "px");
    //window.console.log(variabile.profondità + variabile.altezza + "px");
    //window.console.log(0 + " " + -variabile.altezza + " " + variabile.x + " " + (variabile.profondità + variabile.altezza));
    variabile.svg.setAttribute("viewBox", 0 + " " + -variabile.altezza + " " + variabile.x + " " + (variabile.profondità + variabile.altezza));
    //<line class="pentagramma" x1="10" y1="-32" x2="400" y2="-32"/>
    for (var j = 1; j <= 5; j++) {
        var linea = document.createElementNS(ns.svg, "line");
        linea.setAttribute("class", "pentagramma");
        linea.setAttribute("x1", 0);
        linea.setAttribute("x2", variabile.x);
        linea.setAttribute("y1", -j * parametro.interlinea);
        linea.setAttribute("y2", -j * parametro.interlinea);
        variabile.svg.appendChild(linea);
    }
    //alert(i);
    ELTS[i].appendChild(variabile.svg);
}
//variabile.svg = document.getElementById("q");