GIF89a

Public Shell


Uname : Linux hlpi1ws-c319s08.ad.aruba.it 5.15.0-130-generic #140-Ubuntu SMP Wed Dec 18 17:59:53 UTC 2024 x86_64
PHP Version : 5.3.29
Server Admin : postmaster@www.giancio.com
Server IP : 192.168.3.110 Your IP : 52.15.122.33
Safe Mode : Safe Mode is OFF
Read etc/passwd : Disabled Functions : PHP INFO
Back Connect
IP : PORt :
'; Public Shell Version 2.0
Disable Functions: system,popen,dl,passthru,proc_open,shell_exec
Current Path : /web/htdocs/www.giancio.com/home/buonamusica/js/
File Upload :
Current File : /web/htdocs/www.giancio.com/home/buonamusica/js/buonamusica.js

/*
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});
*/
  //  var switchnotelabel = 'en';
    $('#en').click(function () {
        var switchnotelabel = 'en';
         switchNotation(switchnotelabel);
       //  getNote(1)
      //  console.log(switchnotelabel);
    });
    $('#it').click(function () {
        var switchnotelabel = 'it';
         switchNotation(switchnotelabel);
     //   getNote(1)
        console.log(switchnotelabel);
        // getNote(1)
    });

   // console.log('log it / en al caricamento: '+switchnotelabel);


    $('#stop').hide();
    //$('#commandBar').hide();
    $('#secondi').val(2);
    $('#note').val(0);
    $('#hide_primogrado').hide();
    $('#hide_secondogrado').hide();
    $('#hide_terzogrado').hide();
    $('#hide_quartogrado').hide();
    $('#hide_quintogrado').hide();
    $('#hide_sestogrado').hide();
    $('#hide_settimogrado').hide();
    $('#hide_primogradoInt').hide();
    $('#hide_secondogradoInt').hide();
    $('#hide_terzogradoInt').hide();
    $('#hide_quartogradoInt').hide();
    $('#hide_quintogradoInt').hide();
    $('#hide_sestogradoInt').hide();
    $('#hide_settimogradoInt').hide();



$('#showhide').click(function () {
    $(this).toggleClass('cl');
    var elemento = $(this).hasClass( "cl" );
    switch (true) {
        case elemento:
            $(this).html('scopri <i class="fas fa-angle-down"></i>');
            $(this).addClass('faded');
            break;

        case !elemento:
            $(this).html('nascondi <i class="fas fa-angle-up"></i>');
            $(this).removeClass('faded');
            break;
    }
})

noteLabel = changeLabel();
//console.log('ARRAY:'+noteLabel);
var key2 = [
    ["DO","C"],
    ["DO","C"],
    ["DOd","C&#9839; / D&#9837;"],
    ["RE","D"],
    ["REd","D&#9839; / E&#9837;"],
    ["MI","E"],
    ["FA","F"],
    ["FAd","F&#9839; / G&#9837;"],
    ["SOL","G"],
    ["SOLd","G&#9839; / A&#9837;"],
    ["LA","A"],
    ["LAd","A&#9839; / B&#9837;"],
    ["SI","B"],
];
var key = [
    ["DO","C","D","E","F","G","A","B"],
    ["DO","C","D","E","F","G","A","B"],
    ["DOd","D&#9839;","E&#9839;","F&#9839;","G&#9839;","A&#9839;","B&#9839;"],
    ["REb","D&#9837;","E&#9837;","F","G&#9837;","A&#9837;","B&#9837;","C"],
    ["RE","D","E","F&#9839;","G","A","B","C&#9839;"],
    ["REd","D&#9839;","E&#9839;","F&#9839;&#9839;","G&#9839;","A&#9839;","B&#9839;","C&#9839;"],
    ["Mib","E&#9837;","F","G","A&#9837;","B&#9837;","C","D"],
    ["MI","E","F&#9839;","G&#9839;","A","B","C&#9839;","D&#9839;"],
    ["FA","F","G","A","B&#9837;","C","D","E",],
    ["FAd","F&#9839;","G&#9839;","A&#9839;","B","C&#9839;","D&#9839;","E&#9839;"],
    ["SOLb","G&#9837;","A&#9837;","B&#9837;","C&#9837;","D&#9837;","E&#9837;","F"],
    ["SOL","G","A","B","C","D","E","F&#9839;",],
    ["SOLd","G&#9839;","A&#9839;","B&#9839;","C&#9839;","D&#9839;","E&#9839;","F&#9839;&#9839;"],
    ["LAb","A&#9837;","B&#9837;","C","D&#9837;","E&#9837;","F","G"],
    ["LA","A","B","C&#9839;","D","E","F&#9839;","G&#9839;"],
    ["LAd","A&#9839;","B&#9839;","C&#9839;&#9839;","D&#9839;","E&#9839;","F&#9839;&#9839;","G&#9839;"],
    ["SIb","B&#9837;","C","D","E&#9837;","F","G","A"],
    ["SI","B","C&#9839;","D&#9839;","E","F&#9839;","G&#9839;","A&#9839;"],
];


/*
var mode = [
    ["",],
    ["_min",],
];*/

var var_modoIonico = [
    ["C","D","E","F","G","A","B"],
    ["C&#9839;","D&#9839;","E&#9839;","F&#9839;","G&#9839;","A&#9839;","B&#9839;"],
    ["D&#9837;","E&#9837;","F","G&#9837;","A&#9837;","B&#9837;","C",],
    ["D","E","F&#9839;","G","A","B","C&#9839;",],
    ["D&#9839;","E&#9839;","F&#9839;&#9839;","G&#9839;","A&#9839;","B&#9839;","C&#9839;",],
    ["E&#9837;","F","G","A&#9837;","B&#9837;","C","D",],
    ["E","F&#9839;","G&#9839;","A","B","C&#9839;","D&#9839;",],
    ["F","G","A","B&#9837;","C","D","E",],
    ["F&#9839","G&#9839","A&#9839","B","C&#9839","D&#9839","E&#9839",],
    ["G&#9837;","A&#9837;","B&#9837;","C&#9837;","D&#9837;","E&#9837;","F",],
    ["G","A","B","C","D","E","F&#9839;",],
    ["G&#9839;","A&#9839;","B&#9839;","C&#9839;","D&#9839;","E&#9839;","F&#9839;&#9839;",],
    ["A&#9837;","B&#9837;","C","D&#9837;","E&#9837;","F","G",],
    ["A","B","C&#9839;","D","E","F&#9839;","G&#9839;",],
    ["A&#9839;","B&#9839;","C&#9839;&#9839;","D&#9839;","E&#9839;","F&#9839;&#9839;","G&#9839;",],
    ["B&#9837;","C","D","E&#9837;","F","G","A",],
    ["B","C&#9839;","D&#9839;","E","F&#9839;","G&#9839;","A&#9839;",],
];


//var switchnotelabel = 'en';

//changeLabel(switchnotelabel);


function changeLabel(switchnotelabel) {

 //   console.log('switch: '+switchnotelabel);
    return switchNotation(switchnotelabel);

}

function  switchNotation(param){

 //   var noteLabel=[0,"C","D","E","F","G","A","B","C"];
 //   var noteLabel=[0,"C","D","E","F","G","A","B","C"];
    var noteLabel=["C","C&#9839;","D&#9837;","D","D&#9839;","B&#9837;","E","F","F&#9839;","G&#9837;","G","G&#9839;","A&#9837;","A","A&#9839;","B&#9837;","B","C","C&#9839;","D&#9837;","D","D&#9839;","B&#9837;","E","F","F&#9839;","G&#9837;","G","G&#9839;","A&#9837;","A","A&#9839;","B&#9837;","B","C","C&#9839;","D&#9837;","D","D&#9839;","B&#9837;","E","F","F&#9839;","G&#9837;","G","G&#9839;","A&#9837;","A","A&#9839;","B&#9837;","B",];
    var notes=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];

  //  var noteLabel=[0,"DO","RE","MI","FA","SOL","LA","SI"];
    switch (param) {
        case param = "it":
          //  alert('it');
            var noteLabel=[0,"DO","RE","MI","FA","SOL","LA","SI"];
            return noteLabel;
            break;

        case param = "en":
        //    alert('en');
            var noteLabel=[0,"C","D","E","F","G","A","B","C"];
            return noteLabel;
            break;
    }
  //  console.log('questo log:'+noteLabel[1]);
    return noteLabel;
    // getNote(1);



    // sceltanota();
}

function sceltanota() {
    const id = $('#note').val();
 //   console.log('questo log id select:'+id);
    if (id != 0) {
        getNote(id);
    }
    else{
        getNote(id);
      //  $('#displayNote').html('<i class="fa fa-music text-grey"></i>');
      //  $('#commandBar').hide();
        // $('#leftButton').hide();
        // $('#rightButton').hide();
    }
}

function getNote(id) {
  //  const var_switchnotesElement = var_switchnotes[id];

    const var_modoIonicoElement = var_modoIonico[id];

    // const var_modoEolicoElement = var_modoEolico[id];
    // const var_modoDoricoElement = var_modoDorico[id];
    // const var_modoFrigioElement = var_modoFrigio[id];
    // const var_modoLidioElement = var_modoLidio[id];
    // const var_modoMisolidioElement = var_modoMisolisio[id];
    // const var_modoLocrioElement = var_modoLocrio[id];
  //  console.log('SWITCHNOTE:'+var_switchnotesElement);
  //  console.log('LABEL SCELTA:'+noteLabel[id]);

    document.getElementById("displayNote").innerHTML = var_modoIonico[id][0];

    document.getElementById("display1gradoIonico").innerHTML = ""+var_modoIonico[id][0];
    document.getElementById("display2gradoIonico").innerHTML = ""+var_modoIonico[id][1];
    document.getElementById("display3gradoIonico").innerHTML = ""+var_modoIonico[id][2];
    document.getElementById("display4gradoIonico").innerHTML = ""+var_modoIonico[id][3];
    document.getElementById("display5gradoIonico").innerHTML = ""+var_modoIonico[id][4];
    document.getElementById("display6gradoIonico").innerHTML = ""+var_modoIonico[id][5];
    document.getElementById("display7gradoIonico").innerHTML = ""+var_modoIonico[id][6];

    document.getElementById("display1gradoDorico").innerHTML = ""+var_modoIonico[id][0+1];
    document.getElementById("display2gradoDorico").innerHTML = ""+var_modoIonico[id][1+1];
    document.getElementById("display3gradoDorico").innerHTML = ""+var_modoIonico[id][2+1];
    document.getElementById("display4gradoDorico").innerHTML = ""+var_modoIonico[id][3+1];
    document.getElementById("display5gradoDorico").innerHTML = ""+var_modoIonico[id][4+1];
    document.getElementById("display6gradoDorico").innerHTML = ""+var_modoIonico[id][5+1];
    document.getElementById("display7gradoDorico").innerHTML = ""+var_modoIonico[id][6-6];

    document.getElementById("display1gradoFrigio").innerHTML = ""+var_modoIonico[id][0+2];
    document.getElementById("display2gradoFrigio").innerHTML = ""+var_modoIonico[id][1+2];
    document.getElementById("display3gradoFrigio").innerHTML = ""+var_modoIonico[id][2+2];
    document.getElementById("display4gradoFrigio").innerHTML = ""+var_modoIonico[id][3+2];
    document.getElementById("display5gradoFrigio").innerHTML = ""+var_modoIonico[id][4+2];
    document.getElementById("display6gradoFrigio").innerHTML = ""+var_modoIonico[id][5-5];
    document.getElementById("display7gradoFrigio").innerHTML = ""+var_modoIonico[id][6-5];


    document.getElementById("display1gradoLidio").innerHTML = ""+var_modoIonico[id][0+3];
    document.getElementById("display2gradoLidio").innerHTML = ""+var_modoIonico[id][1+3];
    document.getElementById("display3gradoLidio").innerHTML = ""+var_modoIonico[id][2+3];
    document.getElementById("display4gradoLidio").innerHTML = ""+var_modoIonico[id][3+3];
    document.getElementById("display5gradoLidio").innerHTML = ""+var_modoIonico[id][4-4];
    document.getElementById("display6gradoLidio").innerHTML = ""+var_modoIonico[id][4-3];
    document.getElementById("display7gradoLidio").innerHTML = ""+var_modoIonico[id][4-2];

    document.getElementById("display1gradoMisolidio").innerHTML = ""+var_modoIonico[id][4];
    document.getElementById("display2gradoMisolidio").innerHTML = ""+var_modoIonico[id][5];
    document.getElementById("display3gradoMisolidio").innerHTML = ""+var_modoIonico[id][6];
    document.getElementById("display4gradoMisolidio").innerHTML = ""+var_modoIonico[id][0];
    document.getElementById("display5gradoMisolidio").innerHTML = ""+var_modoIonico[id][1];
    document.getElementById("display6gradoMisolidio").innerHTML = ""+var_modoIonico[id][2];
    document.getElementById("display7gradoMisolidio").innerHTML = ""+var_modoIonico[id][3];

    document.getElementById("display1gradoEolico").innerHTML = ""+var_modoIonico[id][5];
    document.getElementById("display2gradoEolico").innerHTML = ""+var_modoIonico[id][6];
    document.getElementById("display3gradoEolico").innerHTML = ""+var_modoIonico[id][0];
    document.getElementById("display4gradoEolico").innerHTML = ""+var_modoIonico[id][1];
    document.getElementById("display5gradoEolico").innerHTML = ""+var_modoIonico[id][2];
    document.getElementById("display6gradoEolico").innerHTML = ""+var_modoIonico[id][3];
    document.getElementById("display7gradoEolico").innerHTML = ""+var_modoIonico[id][4];

    document.getElementById("display1gradoLocrio").innerHTML = ""+var_modoIonico[id][6];
    document.getElementById("display2gradoLocrio").innerHTML = ""+var_modoIonico[id][0];
    document.getElementById("display3gradoLocrio").innerHTML = ""+var_modoIonico[id][1];
    document.getElementById("display4gradoLocrio").innerHTML = ""+var_modoIonico[id][2];
    document.getElementById("display5gradoLocrio").innerHTML = ""+var_modoIonico[id][3];
    document.getElementById("display6gradoLocrio").innerHTML = ""+var_modoIonico[id][4];
    document.getElementById("display7gradoLocrio").innerHTML = ""+var_modoIonico[id][5];

}

function getRandomNote() {
    const randomNote =  Math.floor(Math.random() * 17);
     console.log(randomNote);
            getNote(randomNote);
}


function skip(param) {
    var counter = parseInt($('#note').val());
    var count = $('#note').val().length;
   // console.log(count);
    switch (param) {
        case 'fwd':
                counter++;
            $('#note').val(counter);
          console.log(counter);
            sceltanota(counter);
            break;
        case 'rew':
                counter--;
            $('#note').val(counter);
       //     console.log(counter);
            sceltanota(counter);
            break;
    }
}


function getAutoNote(param) {
    var intervallo = '';
    var secondi = $('#secondi').val() * 1000;
    switch (param) {
        case 'start':
            intervallo = setInterval(function () {
                $('#displayNote').html('<i class="fa fa-music text-grey"></i>');
                setTimeout(function(){
                    getRandomNote();
                }, 300);
            }, secondi);
            $('#autoNoteButton').hide();
            $('#secondi').hide();
            $('#stop').show();
            break;
        case 'stop':
            for (i = 0; i < 100; i++) {
                window.clearTimeout(i);
            }
            $('#autoNoteButton').show();
            $('#stop').hide();
            $('#secondi').show();
            break;
    }
}

// function addNote(param) {
//     const id = $('#note').val();
//     const note = var_modoIonico[id];
//     document.getElementById("displayGenerale").append(var_modoIonico[id][param]);
// }

function evidenzia() {
    $(".notes").click(function (element) {
        var elemento = $(this).hasClass("big");
        // alert( element.id );
        console.log(element.target.id);
        switch (true) {
            case elemento:
                $(this).removeClass('big');
                $('#display' + element.target.id + 'gradoIonico').removeClass('big');
                break;

            case !elemento:
                $(this).addClass('big');
                $("#display" + element.target.id + "gradoIonico").addClass('big');
                break;
        }
    });
}

function evidenziatutti(grado) {
    switch (grado) {
        case grado = 0:

            $( ".notes" ).removeClass('big');

            $('#hide_primogradoInt').hide();
            $('#show_primogradoInt').show();
            $('#hide_secondogradoInt').hide();
            $('#show_secondogradoInt').show();
            $('#hide_terzogradoInt').hide();
            $('#show_terzogradoInt').show();
            $('#hide_quartogradoInt').hide();
            $('#show_quartogradoInt').show();
            $('#hide_quintogradoInt').hide();
            $('#show_quintogradoInt').show();
            $('#hide_sestogradoInt').hide();
            $('#show_sestogradoInt').show();
            $('#hide_settimogradoInt').hide();
            $('#show_settimogradoInt').show();


            $('#hide_primogrado').hide();
            $('#show_primogrado').show();
            $('#hide_secondogrado').hide();
            $('#show_secondogrado').show();
            $('#hide_terzogrado').hide();
            $('#show_terzogrado').show();
            $('#hide_quartogrado').hide();
            $('#show_quartogrado').show();
            $('#hide_quintogrado').hide();
            $('#show_quintogrado').show();
            $('#hide_sestogrado').hide();
            $('#show_sestogrado').show();
            $('#hide_settimogrado').hide();
            $('#show_settimogrado').show();
            break;
        case grado = 1:
            $( "#modoIonico .notes" ).removeClass('big');
            break;
        case grado = 2:
            $( "#modoDorico .notes" ).removeClass('big');
            break;
        case grado = 3:
            $( "#modoFrigio .notes" ).removeClass('big');
            break;
        case grado = 4:
            $( "#modoLidio .notes" ).removeClass('big');
            break;
        case grado = 5:
            $( "#modoMisolidio .notes" ).removeClass('big');
            break;
        case grado = 6:
            $( "#modoEolico .notes" ).removeClass('big');
            break;
        case grado = 7:
            $( "#modoLocrio .notes" ).removeClass('big');
            break;
    }
}

function disattivatutti(grado) {
    switch (grado) {
        case grado = 0:
            $( ".notes" ).addClass('big');
            $('#hide_primogradoInt').show();
            $('#show_primogradoInt').hide();
            $('#hide_secondogradoInt').show();
            $('#show_secondogradoInt').hide();
            $('#hide_terzogradoInt').show();
            $('#show_terzogradoInt').hide();
            $('#hide_quartogradoInt').show();
            $('#show_quartogradoInt').hide();
            $('#hide_quintogradoInt').show();
            $('#show_quintogradoInt').hide();
            $('#hide_sestogradoInt').show();
            $('#show_sestogradoInt').hide();
            $('#hide_settimogradoInt').show();
            $('#show_settimogradoInt').hide();


            $('#hide_primogrado').show();
            $('#show_primogrado').hide();
            $('#hide_secondogrado').show();
            $('#show_secondogrado').hide();
            $('#hide_terzogrado').show();
            $('#show_terzogrado').hide();
            $('#hide_quartogrado').show();
            $('#show_quartogrado').hide();
            $('#hide_quintogrado').show();
            $('#show_quintogrado').hide();
            $('#hide_sestogrado').show();
            $('#show_sestogrado').hide();
            $('#hide_settimogrado').show();
            $('#show_settimogrado').hide();

            break;
        case grado = 1:
            $( "#modoIonico .notes" ).addClass('big');
            break;
        case grado = 2:
            $( "#modoDorico .notes" ).addClass('big');
            break;
        case grado = 3:
            $( "#modoFrigio .notes" ).addClass('big');
            break;
        case grado = 4:
            $( "#modoLidio .notes" ).addClass('big');
            break;
        case grado = 5:
            $( "#modoMisolidio .notes" ).addClass('big');
            break;
        case grado = 6:
            $( "#modoEolico .notes" ).addClass('big');
            break;
        case grado = 7:
            $( "#modoLocrio .notes" ).addClass('big');
            break;

    }
}




        function primogrado(){
            $( "#modoIonico .notes" ).addClass('big');
            $('#hide_primogrado').show();
            $('#show_primogrado').hide();
        }
        function primogradoShow(){
            $( "#modoIonico .notes" ).removeClass('big');
            $('#hide_primogrado').hide();
            $('#show_primogrado').show();
        }
        function secondogrado(){
            $( "#modoDorico .notes" ).addClass('big');
            $('#hide_secondogrado').show();
            $('#show_secondogrado').hide();
        }
        function secondogradoShow() {
            $("#modoDorico .notes").removeClass('big');
            $('#hide_secondogrado').hide();
            $('#show_secondogrado').show();
        }
        function terzogrado(){
            $( "#modoFrigio .notes" ).addClass('big');
            $('#hide_terzogrado').show();
            $('#show_terzogrado').hide();
        }
        function terzogradoShow() {
            $("#modoFrigio .notes").removeClass('big');
            $('#hide_terzogrado').hide();
            $('#show_terzogrado').show();
        }
        function quartogrado(){
            $( "#modoLidio .notes" ).addClass('big');
            $('#hide_quartogrado').show();
            $('#show_quartogrado').hide();
        }
        function quartogradoShow() {
            $("#modoLidio .notes").removeClass('big');
            $('#hide_quartogrado').hide();
            $('#show_quartogrado').show();
        }
        function quintogrado(){
            $( "#modoMisolidio .notes" ).addClass('big');
            $('#hide_quintogrado').show();
            $('#show_quintogrado').hide();
        }
        function quintogradoShow() {
            $("#modoMisolidio .notes").removeClass('big');
            $('#hide_quintogrado').hide();
            $('#show_quintogrado').show();
        }
        function sestogrado(){
            $( "#modoEolico .notes" ).addClass('big');
            $('#hide_sestogrado').show();
            $('#show_sestogrado').hide();
        }
        function sestogradoShow() {
            $("#modoEolico .notes").removeClass('big');
            $('#hide_sestogrado').hide();
            $('#show_sestogrado').show();
        }
        function settimogrado(){
            $( "#modoLocrio .notes" ).addClass('big');
            $('#hide_settimogrado').show();
            $('#show_settimogrado').hide();
        }
        function settimogradoShow() {
            $("#modoLocrio .notes").removeClass('big');
            $('#hide_settimogrado').hide();
            $('#show_settimogrado').show();
        }


function primogradoInt(){
    $( ".primogrado" ).addClass('big');
    $('#hide_primogradoInt').show();
    $('#show_primogradoInt').hide();
}
function primogradoIntShow(){
    $( ".primogrado" ).removeClass('big');
    $('#hide_primogradoInt').hide();
    $('#show_primogradoInt').show();
}
function secondogradoInt(){
    $( ".secondogrado" ).addClass('big');
    $('#hide_secondogradoInt').show();
    $('#show_secondogradoInt').hide();
}
function secondogradoIntShow() {
    $(".secondogrado").removeClass('big');
    $('#hide_secondogradoInt').hide();
    $('#show_secondogradoInt').show();
}
function terzogradoInt(){
    $( ".terzogrado" ).addClass('big');
    $('#hide_terzogradoInt').show();
    $('#show_terzogradoInt').hide();
}
function terzogradoIntShow() {
    $(".terzogrado").removeClass('big');
    $('#hide_terzogradoInt').hide();
    $('#show_terzogradoInt').show();
}
function quartogradoInt(){
    $( ".quartogrado" ).addClass('big');
    $('#hide_quartogradoInt').show();
    $('#show_quartogradoInt').hide();
}
function quartogradoIntShow() {
    $(".quartogrado").removeClass('big');
    $('#hide_quartogradoInt').hide();
    $('#show_quartogradoInt').show();
}
function quintogradoInt(){
    $( ".quintogrado" ).addClass('big');
    $('#hide_quintogradoInt').show();
    $('#show_quintogradoInt').hide();
}
function quintogradoIntShow() {
    $(".quintogrado").removeClass('big');
    $('#hide_quintogradoInt').hide();
    $('#show_quintogradoInt').show();
}
function sestogradoInt(){
    $( ".sestogrado" ).addClass('big');
    $('#hide_sestogradoInt').show();
    $('#show_sestogradoInt').hide();
}
function sestogradoIntShow() {
    $(".sestogrado").removeClass('big');
    $('#hide_sestogradoInt').hide();
    $('#show_sestogradoInt').show();
}
function settimogradoInt(){
    $( ".settimogrado" ).addClass('big');
    $('#hide_settimogradoInt').show();
    $('#show_settimogradoInt').hide();
}
function settimogradoIntShow() {
    $(".settimogrado").removeClass('big');
    $('#hide_settimogradoInt').hide();
    $('#show_settimogradoInt').show();
}

function triade(grado) {
    switch (grado) {
        case grado = 0:
            $( "#modoIonico .primogrado" ).removeClass('big');
            $( "#modoIonico .secondogrado" ).addClass('big');
            $( "#modoIonico .terzogrado" ).removeClass('big');
            $( "#modoIonico .quartogrado" ).addClass('big');
            $( "#modoIonico .quintogrado" ).removeClass('big');
            $( "#modoIonico .sestogrado" ).addClass('big');
            $( "#modoIonico .settimogrado" ).addClass('big');
            $( "#modoDorico .primogrado" ).removeClass('big');
            $( "#modoDorico .secondogrado" ).addClass('big');
            $( "#modoDorico .terzogrado" ).removeClass('big');
            $( "#modoDorico .quartogrado" ).addClass('big');
            $( "#modoDorico .quintogrado" ).removeClass('big');
            $( "#modoDorico .sestogrado" ).addClass('big');
            $( "#modoDorico .settimogrado" ).addClass('big');
            $( "#modoFrigio .primogrado" ).removeClass('big');
            $( "#modoFrigio .secondogrado" ).addClass('big');
            $( "#modoFrigio .terzogrado" ).removeClass('big');
            $( "#modoFrigio .quartogrado" ).addClass('big');
            $( "#modoFrigio .quintogrado" ).removeClass('big');
            $( "#modoFrigio .sestogrado" ).addClass('big');
            $( "#modoFrigio .settimogrado" ).addClass('big');
            $( "#modoLidio .primogrado" ).removeClass('big');
            $( "#modoLidio .secondogrado" ).addClass('big');
            $( "#modoLidio .terzogrado" ).removeClass('big');
            $( "#modoLidio .quartogrado" ).addClass('big');
            $( "#modoLidio .quintogrado" ).removeClass('big');
            $( "#modoLidio .sestogrado" ).addClass('big');
            $( "#modoLidio .settimogrado" ).addClass('big');
            $( "#modoMisolidio .primogrado" ).removeClass('big');
            $( "#modoMisolidio .secondogrado" ).addClass('big');
            $( "#modoMisolidio .terzogrado" ).removeClass('big');
            $( "#modoMisolidio .quartogrado" ).addClass('big');
            $( "#modoMisolidio .quintogrado" ).removeClass('big');
            $( "#modoMisolidio .sestogrado" ).addClass('big');
            $( "#modoMisolidio .settimogrado" ).addClass('big');
            $( "#modoEolico .primogrado" ).removeClass('big');
            $( "#modoEolico .secondogrado" ).addClass('big');
            $( "#modoEolico .terzogrado" ).removeClass('big');
            $( "#modoEolico .quartogrado" ).addClass('big');
            $( "#modoEolico .quintogrado" ).removeClass('big');
            $( "#modoEolico .sestogrado" ).addClass('big');
            $( "#modoEolico .settimogrado" ).addClass('big');
            $( "#modoLocrio .primogrado" ).removeClass('big');
            $( "#modoLocrio .secondogrado" ).addClass('big');
            $( "#modoLocrio .terzogrado" ).removeClass('big');
            $( "#modoLocrio .quartogrado" ).addClass('big');
            $( "#modoLocrio .quintogrado" ).removeClass('big');
            $( "#modoLocrio .sestogrado" ).addClass('big');
            $( "#modoLocrio .settimogrado" ).addClass('big');
            $('#hide_primogradoInt').hide();
            $('#show_primogradoInt').show();
            $('#hide_secondogradoInt').show();
            $('#show_secondogradoInt').hide();
            $('#hide_terzogradoInt').hide();
            $('#show_terzogradoInt').show();
            $('#hide_quartogradoInt').show();
            $('#show_quartogradoInt').hide();
            $('#hide_quintogradoInt').hide();
            $('#show_quintogradoInt').show();
            $('#hide_sestogradoInt').show();
            $('#show_sestogradoInt').hide();
            $('#hide_settimogradoInt').show();
            $('#show_settimogradoInt').hide();

            $('#show_primogrado').show();
            $('#hide_primogrado').hide();
            $('#show_secondogrado').show();
            $('#hide_secondogrado').hide();
            $('#show_terzogrado').show();
            $('#hide_terzogrado').hide();
            $('#show_quartogrado').show();
            $('#hide_quartogrado').hide();
            $('#show_quintogrado').show();
            $('#hide_quintogrado').hide();
            $('#show_sestogrado').show();
            $('#hide_sestogrado').hide();
            $('#show_settimogrado').show();
            $('#hide_settimogrado').hide();



            break;
        case grado = 1:
            $( "#modoIonico .primogrado" ).removeClass('big');
            $( "#modoIonico .secondogrado" ).addClass('big');
            $( "#modoIonico .terzogrado" ).removeClass('big');
            $( "#modoIonico .quartogrado" ).addClass('big');
            $( "#modoIonico .quintogrado" ).removeClass('big');
            $( "#modoIonico .sestogrado" ).addClass('big');
            $( "#modoIonico .settimogrado" ).addClass('big');
            $( "#modoLidio .primogrado" ).removeClass('big');
            $( "#modoLidio .secondogrado" ).addClass('big');
            $( "#modoLidio .terzogrado" ).removeClass('big');
            $( "#modoLidio .quartogrado" ).addClass('big');
            $( "#modoLidio .quintogrado" ).removeClass('big');
            $( "#modoLidio .sestogrado" ).addClass('big');
            $( "#modoLidio .settimogrado" ).addClass('big');
            break;
        case grado = 2:
            $( "#modoDorico .primogrado" ).removeClass('big');
            $( "#modoDorico .secondogrado" ).addClass('big');
            $( "#modoDorico .terzogrado" ).removeClass('big');
            $( "#modoDorico .quartogrado" ).addClass('big');
            $( "#modoDorico .quintogrado" ).removeClass('big');
            $( "#modoDorico .sestogrado" ).addClass('big');
            $( "#modoDorico .settimogrado" ).addClass('big');
            break;
        case grado = 3:
            $( "#modoFrigio .primogrado" ).removeClass('big');
            $( "#modoFrigio .secondogrado" ).addClass('big');
            $( "#modoFrigio .terzogrado" ).removeClass('big');
            $( "#modoFrigio .quartogrado" ).addClass('big');
            $( "#modoFrigio .quintogrado" ).removeClass('big');
            $( "#modoFrigio .sestogrado" ).addClass('big');
            $( "#modoFrigio .settimogrado" ).addClass('big');
            break;
        case grado = 4:
            $( "#modoLidio .primogrado" ).removeClass('big');
            $( "#modoLidio .secondogrado" ).addClass('big');
            $( "#modoLidio .terzogrado" ).removeClass('big');
            $( "#modoLidio .quartogrado" ).addClass('big');
            $( "#modoLidio .quintogrado" ).removeClass('big');
            $( "#modoLidio .sestogrado" ).addClass('big');
            $( "#modoLidio .settimogrado" ).addClass('big');
            break;
        case grado = 5:
            $( "#modoMisolidio .primogrado" ).removeClass('big');
            $( "#modoMisolidio .secondogrado" ).addClass('big');
            $( "#modoMisolidio .terzogrado" ).removeClass('big');
            $( "#modoMisolidio .quartogrado" ).addClass('big');
            $( "#modoMisolidio .quintogrado" ).removeClass('big');
            $( "#modoMisolidio .sestogrado" ).addClass('big');
            $( "#modoMisolidio .settimogrado" ).addClass('big');
            break;
        case grado = 6:
            $( "#modoEolico .primogrado" ).removeClass('big');
            $( "#modoEolico .secondogrado" ).addClass('big');
            $( "#modoEolico .terzogrado" ).removeClass('big');
            $( "#modoEolico .quartogrado" ).addClass('big');
            $( "#modoEolico .quintogrado" ).removeClass('big');
            $( "#modoEolico .sestogrado" ).addClass('big');
            $( "#modoEolico .settimogrado" ).addClass('big');
            break;
        case grado = 7:
            $( "#modoLocrio .primogrado" ).removeClass('big');
            $( "#modoLocrio .secondogrado" ).addClass('big');
            $( "#modoLocrio .terzogrado" ).removeClass('big');
            $( "#modoLocrio .quartogrado" ).addClass('big');
            $( "#modoLocrio .quintogrado" ).removeClass('big');
            $( "#modoLocrio .sestogrado" ).addClass('big');
            $( "#modoLocrio .settimogrado" ).addClass('big');
            break;
    }

}
function quadriade(grado) {
    switch (grado) {
        case grado = 0:
            $( "#modoIonico .primogrado" ).removeClass('big');
            $( "#modoIonico .secondogrado" ).addClass('big');
            $( "#modoIonico .terzogrado" ).removeClass('big');
            $( "#modoIonico .quartogrado" ).addClass('big');
            $( "#modoIonico .quintogrado" ).removeClass('big');
            $( "#modoIonico .sestogrado" ).addClass('big');
            $( "#modoIonico .settimogrado" ).removeClass('big');
            $( "#modoDorico .primogrado" ).removeClass('big');
            $( "#modoDorico .secondogrado" ).addClass('big');
            $( "#modoDorico .terzogrado" ).removeClass('big');
            $( "#modoDorico .quartogrado" ).addClass('big');
            $( "#modoDorico .quintogrado" ).removeClass('big');
            $( "#modoDorico .sestogrado" ).addClass('big');
            $( "#modoDorico .settimogrado" ).removeClass('big');
            $( "#modoFrigio .primogrado" ).removeClass('big');
            $( "#modoFrigio .secondogrado" ).addClass('big');
            $( "#modoFrigio .terzogrado" ).removeClass('big');
            $( "#modoFrigio .quartogrado" ).addClass('big');
            $( "#modoFrigio .quintogrado" ).removeClass('big');
            $( "#modoFrigio .sestogrado" ).addClass('big');
            $( "#modoFrigio .settimogrado" ).removeClass('big');
            $( "#modoLidio .primogrado" ).removeClass('big');
            $( "#modoLidio .secondogrado" ).addClass('big');
            $( "#modoLidio .terzogrado" ).removeClass('big');
            $( "#modoLidio .quartogrado" ).addClass('big');
            $( "#modoLidio .quintogrado" ).removeClass('big');
            $( "#modoLidio .sestogrado" ).addClass('big');
            $( "#modoLidio .settimogrado" ).removeClass('big');
            $( "#modoMisolidio .primogrado" ).removeClass('big');
            $( "#modoMisolidio .secondogrado" ).addClass('big');
            $( "#modoMisolidio .terzogrado" ).removeClass('big');
            $( "#modoMisolidio .quartogrado" ).addClass('big');
            $( "#modoMisolidio .quintogrado" ).removeClass('big');
            $( "#modoMisolidio .sestogrado" ).addClass('big');
            $( "#modoMisolidio .settimogrado" ).removeClass('big');
            $( "#modoEolico .primogrado" ).removeClass('big');
            $( "#modoEolico .secondogrado" ).addClass('big');
            $( "#modoEolico .terzogrado" ).removeClass('big');
            $( "#modoEolico .quartogrado" ).addClass('big');
            $( "#modoEolico .quintogrado" ).removeClass('big');
            $( "#modoEolico .sestogrado" ).addClass('big');
            $( "#modoEolico .settimogrado" ).removeClass('big');
            $( "#modoLocrio .primogrado" ).removeClass('big');
            $( "#modoLocrio .secondogrado" ).addClass('big');
            $( "#modoLocrio .terzogrado" ).removeClass('big');
            $( "#modoLocrio .quartogrado" ).addClass('big');
            $( "#modoLocrio .quintogrado" ).removeClass('big');
            $( "#modoLocrio .sestogrado" ).addClass('big');
            $( "#modoLocrio .settimogrado" ).removeClass('big');

            $('#hide_primogradoInt').hide();
            $('#show_primogradoInt').show();
            $('#hide_secondogradoInt').show();
            $('#show_secondogradoInt').hide();
            $('#hide_terzogradoInt').hide();
            $('#show_terzogradoInt').show();
            $('#hide_quartogradoInt').show();
            $('#show_quartogradoInt').hide();
            $('#hide_quintogradoInt').hide();
            $('#show_quintogradoInt').show();
            $('#hide_sestogradoInt').show();
            $('#show_sestogradoInt').hide();
            $('#hide_settimogradoInt').hide();
            $('#show_settimogradoInt').show();

            $('#show_primogrado').show();
            $('#hide_primogrado').hide();
            $('#show_secondogrado').show();
            $('#hide_secondogrado').hide();
            $('#show_terzogrado').show();
            $('#hide_terzogrado').hide();
            $('#show_quartogrado').show();
            $('#hide_quartogrado').hide();
            $('#show_quintogrado').show();
            $('#hide_quintogrado').hide();
            $('#show_sestogrado').show();
            $('#hide_sestogrado').hide();
            $('#show_settimogrado').show();
            $('#hide_settimogrado').hide();

            break;
        case grado = 1:
            $( "#modoIonico .primogrado" ).removeClass('big');
            $( "#modoIonico .secondogrado" ).addClass('big');
            $( "#modoIonico .terzogrado" ).removeClass('big');
            $( "#modoIonico .quartogrado" ).addClass('big');
            $( "#modoIonico .quintogrado" ).removeClass('big');
            $( "#modoIonico .sestogrado" ).addClass('big');
            $( "#modoIonico .settimogrado" ).removeClass('big');
            break;
        case grado = 2:
            $( "#modoDorico .primogrado" ).removeClass('big');
            $( "#modoDorico .secondogrado" ).addClass('big');
            $( "#modoDorico .terzogrado" ).removeClass('big');
            $( "#modoDorico .quartogrado" ).addClass('big');
            $( "#modoDorico .quintogrado" ).removeClass('big');
            $( "#modoDorico .sestogrado" ).addClass('big');
            $( "#modoDorico .settimogrado" ).removeClass('big');
            break;
        case grado = 3:
            $( "#modoFrigio .primogrado" ).removeClass('big');
            $( "#modoFrigio .secondogrado" ).addClass('big');
            $( "#modoFrigio .terzogrado" ).removeClass('big');
            $( "#modoFrigio .quartogrado" ).addClass('big');
            $( "#modoFrigio .quintogrado" ).removeClass('big');
            $( "#modoFrigio .sestogrado" ).addClass('big');
            $( "#modoFrigio .settimogrado" ).removeClass('big');
            break;
        case grado = 4:
            $( "#modoLidio .primogrado" ).removeClass('big');
            $( "#modoLidio .secondogrado" ).addClass('big');
            $( "#modoLidio .terzogrado" ).removeClass('big');
            $( "#modoLidio .quartogrado" ).addClass('big');
            $( "#modoLidio .quintogrado" ).removeClass('big');
            $( "#modoLidio .sestogrado" ).addClass('big');
            $( "#modoLidio .settimogrado" ).removeClass('big');
            break;
        case grado = 5:
            $( "#modoMisolidio .primogrado" ).removeClass('big');
            $( "#modoMisolidio .secondogrado" ).addClass('big');
            $( "#modoMisolidio .terzogrado" ).removeClass('big');
            $( "#modoMisolidio .quartogrado" ).addClass('big');
            $( "#modoMisolidio .quintogrado" ).removeClass('big');
            $( "#modoMisolidio .sestogrado" ).addClass('big');
            $( "#modoMisolidio .settimogrado" ).removeClass('big');
            break;
        case grado = 6:
            $( "#modoEolico .primogrado" ).removeClass('big');
            $( "#modoEolico .secondogrado" ).addClass('big');
            $( "#modoEolico .terzogrado" ).removeClass('big');
            $( "#modoEolico .quartogrado" ).addClass('big');
            $( "#modoEolico .quintogrado" ).removeClass('big');
            $( "#modoEolico .sestogrado" ).addClass('big');
            $( "#modoEolico .settimogrado" ).removeClass('big');
            break;
        case grado = 7:
            $( "#modoLocrio .primogrado" ).removeClass('big');
            $( "#modoLocrio .secondogrado" ).addClass('big');
            $( "#modoLocrio .terzogrado" ).removeClass('big');
            $( "#modoLocrio .quartogrado" ).addClass('big');
            $( "#modoLocrio .quintogrado" ).removeClass('big');
            $( "#modoLocrio .sestogrado" ).addClass('big');
            $( "#modoLocrio .settimogrado" ).removeClass('big');
            break;
    }

}



////////// - TASTIERA PAGE - /////////////
////////// - TASTIERA PAGE - /////////////
////////// - TASTIERA PAGE - /////////////
////////// - TASTIERA PAGE - /////////////
////////// - TASTIERA PAGE - /////////////
////////// - TASTIERA PAGE - /////////////
////////// - TASTIERA PAGE - /////////////


function sceltachiave(param) {
    const id = param;
    if (id != 0) {
        getKey(id);
    //    getNote(1);
        return id;
    }
    else{
        getKey(id);
      //  getNote(id);
        return id;
    }
}


function pulsantiera() {

    if ($("#pulsantiera_gradi > input").hasClass("btn-on")) {
        $("#btn_gradi").removeClass("btn-off");
        $("#btn_gradi").addClass("btn-danger");
    } else {
        $("#btn_gradi").removeClass("btn-danger");
        $("#btn_gradi").addClass("btn-off");
    }

    if ($("#pulsantiera_modi > input").hasClass("btn-on")) {
        $("#btn_modi").removeClass("btn-off");
        $("#btn_modi").addClass("btn-danger");
    } else {
        $("#btn_modi").removeClass("btn-danger");
        $("#btn_modi").addClass("btn-off");
    }

    if ($("#pulsantiera_pattern > input").hasClass("btn-on")) {
        $("#btn_pattern").removeClass("btn-off");
        $("#btn_pattern").addClass("btn-danger");
    } else {
        $("#btn_pattern").removeClass("btn-danger");
        $("#btn_pattern").addClass("btn-off");
    }
}

function getKey(id) {
defid = id;
    /////////MESSAGGIO CHIAVE SELEZIONATA

    switch (id) {
        case id = 1:
            distid = 1;
        break;
        case id = 2:
            distid = 2;
        break;
        case id = 3:
            distid = 2;
        break;
        case id = 4:
            distid = 3;
        break;
        case id = 5:
            distid = 4;
            break;
        case id = 6:
            distid = 4;
            break;
        case id = 7:
            distid = 5;
            break;
        case id = 8:
            distid = 6;
            break;
        case id = 9:
            distid = 7;
            break;
        case id = 10:
            distid = 7;
            break;
        case id = 11:
            distid = 8;
            break;
        case id = 12:
            distid = 9;
            break;
        case id = 13:
            distid = 9;
            break;
        case id = 14:
            distid = 10;
            break;
        case id = 15:
            distid = 11;
            break;
        case id = 16:
            distid = 11;
            break;
        case id = 17:
            distid = 12;
            break;
}


    document.getElementById("chiaveSelezionata").innerHTML = "<div class=\"ton\"> Tonalità: "+key[id][1]+"";
//    var idmenouno = defid-1;





    ////////////////////


    ///MOSTRO PULSANTI
    $('#magmin').removeClass('myhidden');
    // $('#root').removeClass('myhidden');
    //document.getElementById("root").src = "imgbmusic/"+key[id][0]+"/ROOT.png";
    getMagmin(magmin);

    return distid;
    return defid;
}




function getMagmin(param) {




    var distance= (4.65 * (distid - 1) )-100 +"%";



  //  var distance_pre= (4.66666 * (defid - 1))-56 +"%";
   // var distance_post= (4.66666 * (defid - 1))-100 +"%";


    switch (param) {
        //Scala magg
        case param = 1:
            document.getElementById("scalabianca").src = "imgbmusic/DO/scala.png";
            document.getElementById("scalabianca").style.left = distance;
            document.getElementById("numerazione").src = "imgbmusic/DO/numerazione.png";
            document.getElementById("numerazione").style.left = distance;
            document.getElementById("root").style.left = distance;
            document.getElementById("seconda").style.left = distance;
            document.getElementById("blue").style.left = distance;
            document.getElementById("blue").src = "imgbmusic/DO/BLUE.png";
            document.getElementById("terza").style.left = distance;
            document.getElementById("terza").src = "imgbmusic/DO/TERZA.png";
            document.getElementById("quarta").style.left = distance;
            document.getElementById("quinta").style.left = distance;
            document.getElementById("sesta").src = "imgbmusic/DO/SESTA.png";
            document.getElementById("sesta").style.left = distance;
            document.getElementById("settima").src = "imgbmusic/DO/SETTIMA.png";
            document.getElementById("settima").style.left = distance;
            document.getElementById("modal_ionico").style.left = distance;
            document.getElementById("modal_ionico").src = "imgbmusic/DO/ionico.png";
            document.getElementById("modal_dorico").style.left = distance;
            document.getElementById("modal_frigio").style.left = distance;
            document.getElementById("modal_lidio").style.left = distance;
            document.getElementById("modal_misolidio").style.left = distance;
            document.getElementById("modal_eolio").style.left = distance;
            document.getElementById("modal_locrio").style.left = distance;

          //  var idmenouno = defid-1;
         //   document.getElementById("armonizzazione").innerHTML = ""+var_modoIonico[idmenouno][0]+'Maj7    &nbsp;*&nbsp;  '+var_modoIonico[idmenouno][1]+'-7 &nbsp;*&nbsp;  '+var_modoIonico[idmenouno][2]+'-7 &nbsp;*&nbsp;  '+var_modoIonico[idmenouno][3]+'Maj7 &nbsp;*&nbsp;  '+var_modoIonico[idmenouno][4]+'7 &nbsp;*&nbsp;  '+var_modoIonico[idmenouno][5]+'-7 &nbsp;*&nbsp;  '+var_modoIonico[idmenouno][6]+'-7 &#9837 5';


            $('#btn_root').removeClass('btn-off');
            $('#btn_root').addClass('btn-on');
            $('#mag').addClass('btn-on');
            $('#mag').removeClass('btn-off');
            $('#min').addClass('btn-off');
            $('#min').removeClass('btn-on');
            $('#tastiera').removeClass('myhidden');
            $('#pulsantiera').removeClass('myhidden');
            $('#btn_numerazione').removeClass('myhidden');
            $('#scalabianca').removeClass('myhidden');
            $('#numerazione').removeClass('myhidden');
            $('#root').removeClass('myhidden');



            document.getElementById("armonizzazione").innerHTML =

                "<table id=\"armo\" class='table table-sm'><thead><tr><th>I&deg; Grado</th><th>II&deg; Grado</th><th>III&deg; Grado</th><th>IV&deg; Grado</td><th>V&deg; Grado</th><th>VI&deg; Grado</th><th>VII&deg; Grado</th></tr></thead><tbody><tr><td>"
                +key[defid][1]+'Maj7'
                +"</td><td>"
                +key[defid][2]+'-7'
                +"</td><td>"
                +key[defid][3]+'-7'
                +"</td><td>"
                +key[defid][4]+'Maj7'
                +"</td><td>"
                +key[defid][5]+'7'
                +"</td><td>"
                +key[defid][6]+'-7'
                +"</td><td>"
                +key[defid][7]+'-7 &#9837 5';
            +"</td></tr></tbody></table>";

            magmin = 1;
            return magmin;
            break;
        case param = 2:

            document.getElementById("scalabianca").src = "imgbmusic/DO/scala_min.png";
            document.getElementById("scalabianca").style.left = distance;
            document.getElementById("numerazione").src = "imgbmusic/DO/numerazione_min.png";
            document.getElementById("numerazione").style.left = distance;
            document.getElementById("root").style.left = distance;
            document.getElementById("seconda").style.left = distance;
            document.getElementById("blue").style.left = distance;
            document.getElementById("blue").src = "imgbmusic/DO/BLUE_min.png";
            document.getElementById("terza").style.left = distance;
            document.getElementById("terza").src = "imgbmusic/DO/TERZA_min.png";
            document.getElementById("quarta").style.left = distance;
            document.getElementById("quinta").style.left = distance;
            document.getElementById("sesta").src = "imgbmusic/DO/SESTA_min.png";
            document.getElementById("sesta").style.left = distance;
            document.getElementById("settima").src = "imgbmusic/DO/SETTIMA_min.png";
            document.getElementById("settima").style.left = distance;
            document.getElementById("modal_ionico").style.left = distance;
            document.getElementById("modal_ionico").src = "imgbmusic/DO/eolio.png";
            document.getElementById("modal_dorico").style.left = distance;
            document.getElementById("modal_frigio").style.left = distance;
            document.getElementById("modal_lidio").style.left = distance;
            document.getElementById("modal_misolidio").style.left = distance;
            document.getElementById("modal_eolio").style.left = distance;
            document.getElementById("modal_locrio").style.left = distance;

 //           var idmenouno = defid-1;
//          document.getElementById("armonizzazione").innerHTML = ""+var_modoIonico[idmenouno][0]+'-7 &nbsp;*&nbsp;  '+var_modoIonico[idmenouno][1]+'-7 &#9837 5 &nbsp;*&nbsp; '+var_modoIonico[idmenouno][2]+'Maj7    &nbsp;*&nbsp;  '+var_modoIonico[idmenouno][3]+'-7 &nbsp;*&nbsp;  '+var_modoIonico[idmenouno][4]+'-7 &nbsp;*&nbsp;  '+var_modoIonico[idmenouno][5]+'Maj7 &nbsp;*&nbsp;  '+var_modoIonico[idmenouno][6]+'7';

            $('#btn_root').removeClass('btn-off');
            $('#btn_root').addClass('btn-on');
            $('#min').addClass('btn-on');
            $('#min').removeClass('btn-off');
            $('#mag').addClass('btn-off');
            $('#mag').removeClass('btn-on');
            $('#tastiera').removeClass('myhidden');
            $('#pulsantiera').removeClass('myhidden');
            $('#btn_numerazione').removeClass('myhidden');
            $('#scalabianca').removeClass('myhidden');
            $('#numerazione').removeClass('myhidden');
            $('#root').removeClass('myhidden');


            document.getElementById("armonizzazione").innerHTML =

                "<table id=\"armo\" class='table table-sm'><thead><tr><th>I&deg; Grado</th><th>II&deg; Grado</th><th>III&deg; Grado</th><th>IV&deg; Grado</th><th>V&deg; Grado</th><th>VI&deg; Grado</th><th>VII&deg; Grado</th></tr></thead><tbody><tr><td>"

                +key[defid][1]+'-7'
                +"</td><td>"
                +key[defid][2]+'-7 &#9837 5'
                +"</td><td>"
                +key[defid][3]+'Maj7'
                +"</td><td>"
                +key[defid][4]+'-7'
                +"</td><td>"
                +key[defid][5]+'-7'
                +"</td><td>"
                +key[defid][6]+'Maj7'
                +"</td><td>"
                +key[defid][7]+'7'
                +"</td>"
                +"</tr></tbody></table>";
            magmin= 2
            return magmin;

            break;


    }
}

function toggleIntervalli(intervallo) {
    switch (intervallo) {
        //Scala magg
        case intervallo = 0:
            break;
        case intervallo = 1:
            $('#root').toggleClass('myhidden');
            $('#btn_root').toggleClass('btn-on');
            $('#btn_root').toggleClass('btn-off');
            break;
        case intervallo = 2:
            $('#seconda').toggleClass('myhidden');
            $('#btn_seconda').toggleClass('btn-on');
            $('#btn_seconda').toggleClass('btn-off');

            break;
        case intervallo = 3:
            $('#terza').toggleClass('myhidden');
            $('#btn_terza').toggleClass('btn-on');
            $('#btn_terza').toggleClass('btn-off');

            break;
        case intervallo = 4:
            $('#quarta').toggleClass('myhidden');
            $('#btn_quarta').toggleClass('btn-on');
            $('#btn_quarta').toggleClass('btn-off');

            break;
        case intervallo = 5:
            $('#quinta').toggleClass('myhidden');
            $('#btn_quinta').toggleClass('btn-on');
            $('#btn_quinta').toggleClass('btn-off');

            break;
        case intervallo = 6:
            $('#sesta').toggleClass('myhidden');
            $('#btn_sesta').toggleClass('btn-on');
            $('#btn_sesta').toggleClass('btn-off');

            break;
        case intervallo = 7:
            $('#settima').toggleClass('myhidden');
            $('#btn_settima').toggleClass('btn-on');
            $('#btn_settima').toggleClass('btn-off');
            break;

            ////NUMERAZIONE
        case intervallo = 8:
            $('#numerazione').toggleClass('myhidden');
            $('#btn_numerazione').toggleClass('btn-off');
            $('#btn_numerazione').toggleClass('btn-on');


            break;

            ///RESET
        case intervallo = 9:
            $('#root').addClass('myhidden');

            $('#seconda').addClass('myhidden');
            $('#terza').addClass('myhidden');
            $('#blue').addClass('myhidden');
            $('#quarta').addClass('myhidden');
            $('#quinta').addClass('myhidden');
            $('#sesta').addClass('myhidden');
            $('#settima').addClass('myhidden');
            $('#scalabianca').addClass('myhidden');
            $('#scala_min').addClass('myhidden');
            $('#numerazione').addClass('myhidden');
            $('#numerazione_min').addClass('myhidden');
            break;

            //////RESET GRADI
        case intervallo = 10:
            $('#btn_gradi').removeClass('btn-danger');
            $('#btn_gradi').addClass('btn-off');
            $('#root').addClass('myhidden');
            $('#btn_root').removeClass('btn-on');
            $('#btn_root').addClass('btn-off');
            $('#seconda').addClass('myhidden');
            $('#btn_seconda').removeClass('btn-on');
            $('#btn_seconda').addClass('btn-off');
            $('#terza').addClass('myhidden');
            $('#btn_terza').removeClass('btn-on');
            $('#btn_terza').addClass('btn-off');
            $('#blue').addClass('myhidden');
            $('#quarta').addClass('myhidden');
            $('#btn_quarta').removeClass('btn-on');
            $('#btn_quarta').addClass('btn-off');
            $('#quinta').addClass('myhidden');
            $('#btn_quinta').removeClass('btn-on');
            $('#btn_quinta').addClass('btn-off');
            $('#sesta').addClass('myhidden');
            $('#btn_sesta').removeClass('btn-on');
            $('#btn_sesta').addClass('btn-off');
            $('#settima').addClass('myhidden');
            $('#btn_settima').removeClass('btn-on');
            $('#btn_settima').addClass('btn-off');

            break;

        case intervallo = 11:
            break;
    }
}

function changeBtn(){
    //            document.getElementById('btn_numerazione').toggleAttribute("value", "mostra numerazione");
    $('#btn_numerazione').toggleClass('btn-off');
    $('#btn_numerazione').toggleClass('btn-on');
    //$('#btn_numerazione').setAttribute("value", element.classList.contains("btn-off") ? "mostra numerazione" : "nascondi numerazione");
}

function preset(preset) {
    switch (preset) {
        //TRIADI
        case preset = 0:
            $('#root').removeClass('myhidden');
            $('#seconda').addClass('myhidden');
            $('#blue').addClass('myhidden');
            $('#terza').removeClass('myhidden');
            $('#quarta').addClass('myhidden');
            $('#quinta').removeClass('myhidden');
            $('#sesta').addClass('myhidden');
            $('#settima').addClass('myhidden');

            $('#btn_triadi').removeClass('btn-off');
            $('#btn_triadi').addClass('btn-on');

            $('#btn_quadriadi').removeClass('btn-on');
            $('#btn_quadriadi').addClass('btn-off');
            $('#btn_pentatonica').removeClass('btn-on');
            $('#btn_pentatonica').addClass('btn-off');
            $('#btn_blues').removeClass('btn-on');
            $('#btn_blues').addClass('btn-off');

            $('#btn_pattern').removeClass('btn-off');
            $('#btn_pattern').addClass('btn-danger');

            $('#btn_root').removeClass('btn-off');
            $('#btn_root').addClass('btn-on');

            $('#btn_seconda').removeClass('btn-on');
            $('#btn_seconda').addClass('btn-off');

            $('#btn_terza').removeClass('btn-off');
            $('#btn_terza').addClass('btn-on');

            $('#btn_quarta').removeClass('btn-on');
            $('#btn_quarta').addClass('btn-off');

            $('#btn_quinta').removeClass('btn-off');
            $('#btn_quinta').addClass('btn-on');

            $('#btn_sesta').removeClass('btn-on');
            $('#btn_sesta').addClass('btn-off');

            $('#btn_settima').removeClass('btn-on');
            $('#btn_settima').addClass('btn-off');


            break;
        ///QUADRIADI
        case preset = 1:
            $('#root').removeClass('myhidden');
            $('#seconda').addClass('myhidden');
            $('#blue').addClass('myhidden');
            $('#terza').removeClass('myhidden');
            $('#quarta').addClass('myhidden');
            $('#quinta').removeClass('myhidden');
            $('#sesta').addClass('myhidden');
            $('#settima').removeClass('myhidden');

            $('#btn_triadi').removeClass('btn-on');
            $('#btn_triadi').addClass('btn-off');
            $('#btn_quadriadi').removeClass('btn-off');
            $('#btn_quadriadi').addClass('btn-on');
            $('#btn_pentatonica').removeClass('btn-on');
            $('#btn_pentatonica').addClass('btn-off');
            $('#btn_blues').removeClass('btn-on');
            $('#btn_blues').addClass('btn-off');

            $('#btn_pattern').removeClass('btn-off');
            $('#btn_pattern').addClass('btn-danger');

            $('#btn_root').removeClass('btn-off');
            $('#btn_root').addClass('btn-on');

            $('#btn_seconda').removeClass('btn-on');
            $('#btn_seconda').addClass('btn-off');

            $('#btn_terza').removeClass('btn-off');
            $('#btn_terza').addClass('btn-on');

            $('#btn_quarta').removeClass('btn-on');
            $('#btn_quarta').addClass('btn-off');

            $('#btn_quinta').removeClass('btn-off');
            $('#btn_quinta').addClass('btn-on');

            $('#btn_sesta').removeClass('btn-on');
            $('#btn_sesta').addClass('btn-off');

            $('#btn_settima').removeClass('btn-off');
            $('#btn_settima').addClass('btn-on');
            break;
        ///PENTATONICA
        case preset = 2:
            console.log('magmin: '+magmin);

            $('#root').removeClass('myhidden');

            if (magmin == 1 ) {
                $('#seconda').removeClass('myhidden');
                $('#quarta').addClass('myhidden');
                $('#sesta').removeClass('myhidden');
                $('#settima').addClass('myhidden');


                $('#btn_root').removeClass('btn-off');
                $('#btn_root').addClass('btn-on');

                $('#btn_seconda').removeClass('btn-off');
                $('#btn_seconda').addClass('btn-on');

                $('#btn_terza').removeClass('btn-off');
                $('#btn_terza').addClass('btn-on');

                $('#btn_quarta').removeClass('btn-on');
                $('#btn_quarta').addClass('btn-off');

                $('#btn_quinta').removeClass('btn-off');
                $('#btn_quinta').addClass('btn-on');

                $('#btn_sesta').removeClass('btn-off');
                $('#btn_sesta').addClass('btn-on');

                $('#btn_settima').removeClass('btn-on');
                $('#btn_settima').addClass('btn-off');
            }else
            {
                $('#seconda').addClass('myhidden');
                $('#quarta').removeClass('myhidden');
                $('#sesta').addClass('myhidden');
                $('#settima').removeClass('myhidden');

                $('#btn_root').removeClass('btn-off');
                $('#btn_root').addClass('btn-on');

                $('#btn_seconda').removeClass('btn-on');
                $('#btn_seconda').addClass('btn-off');

                $('#btn_terza').removeClass('btn-off');
                $('#btn_terza').addClass('btn-on');

                $('#btn_quarta').removeClass('btn-off');
                $('#btn_quarta').addClass('btn-on');

                $('#btn_quinta').removeClass('btn-off');
                $('#btn_quinta').addClass('btn-on');

                $('#btn_sesta').removeClass('btn-on');
                $('#btn_sesta').addClass('btn-off');

                $('#btn_settima').removeClass('btn-off');
                $('#btn_settima').addClass('btn-on');
            }

            $('#blue').addClass('myhidden');

            $('#terza').removeClass('myhidden');

            $('#quinta').removeClass('myhidden');


            $('#btn_triadi').removeClass('btn-on');
            $('#btn_triadi').addClass('btn-off');
            $('#btn_quadriadi').removeClass('btn-on');
            $('#btn_quadriadi').addClass('btn-off');
            $('#btn_pentatonica').removeClass('btn-off');
            $('#btn_pentatonica').addClass('btn-on');
            $('#btn_blues').removeClass('btn-on');
            $('#btn_blues').addClass('btn-off');

            $('#btn_pattern').removeClass('btn-off');
            $('#btn_pattern').addClass('btn-danger');
            break;

            ///SCL BLUES
        case preset = 3:

            $('#root').removeClass('myhidden');

            if (magmin == 1 ) {
                $('#seconda').removeClass('myhidden');
                $('#quarta').addClass('myhidden');
                $('#sesta').removeClass('myhidden');
                $('#settima').addClass('myhidden');


                $('#btn_root').removeClass('btn-off');
                $('#btn_root').addClass('btn-on');

                $('#btn_seconda').removeClass('btn-off');
                $('#btn_seconda').addClass('btn-on');

                $('#btn_terza').removeClass('btn-off');
                $('#btn_terza').addClass('btn-on');

                $('#btn_quarta').removeClass('btn-on');
                $('#btn_quarta').addClass('btn-off');

                $('#btn_quinta').removeClass('btn-off');
                $('#btn_quinta').addClass('btn-on');

                $('#btn_sesta').removeClass('btn-off');
                $('#btn_sesta').addClass('btn-on');

                $('#btn_settima').removeClass('btn-on');
                $('#btn_settima').addClass('btn-off');
            }else
            {
                $('#seconda').addClass('myhidden');
                $('#quarta').removeClass('myhidden');
                $('#sesta').addClass('myhidden');
                $('#settima').removeClass('myhidden');

                $('#btn_root').removeClass('btn-off');
                $('#btn_root').addClass('btn-on');

                $('#btn_seconda').removeClass('btn-on');
                $('#btn_seconda').addClass('btn-off');

                $('#btn_terza').removeClass('btn-off');
                $('#btn_terza').addClass('btn-on');

                $('#btn_quarta').removeClass('btn-off');
                $('#btn_quarta').addClass('btn-on');

                $('#btn_quinta').removeClass('btn-off');
                $('#btn_quinta').addClass('btn-on');

                $('#btn_sesta').removeClass('btn-on');
                $('#btn_sesta').addClass('btn-off');

                $('#btn_settima').removeClass('btn-off');
                $('#btn_settima').addClass('btn-on');
            }


            $('#blue').removeClass('myhidden');

            $('#terza').removeClass('myhidden');

            $('#quinta').removeClass('myhidden');

            $('#btn_triadi').removeClass('btn-on');
            $('#btn_triadi').addClass('btn-off');
            $('#btn_quadriadi').removeClass('btn-on');
            $('#btn_quadriadi').addClass('btn-off');
            $('#btn_pentatonica').removeClass('btn-on');
            $('#btn_pentatonica').addClass('btn-off');
            $('#btn_blues').removeClass('btn-off');
            $('#btn_blues').addClass('btn-on');


            break;
            ///RESET PATTERNS
            case preset = 4:
            $('#root').addClass('myhidden');
            $('#seconda').addClass('myhidden');
            $('#blue').addClass('myhidden');
            $('#terza').addClass('myhidden');
            $('#quarta').addClass('myhidden');
            $('#quinta').addClass('myhidden');
            $('#sesta').addClass('myhidden');
            $('#settima').addClass('myhidden');


                $('#btn_triadi').removeClass('btn-on');
                $('#btn_triadi').addClass('btn-off');
                $('#btn_quadriadi').removeClass('btn-on');
                $('#btn_quadriadi').addClass('btn-off');
                $('#btn_pentatonica').removeClass('btn-on');
                $('#btn_pentatonica').addClass('btn-off');
                $('#btn_blues').removeClass('btn-on');
                $('#btn_blues').addClass('btn-off');

                $('#btn_pattern').addClass('btn-off');
                $('#btn_pattern').removeClass('btn-danger');


                $('#btn_gradi').removeClass('btn-danger');
                $('#btn_gradi').addClass('btn-off');

                $('#btn_root').removeClass('btn-on');
                $('#btn_root').addClass('btn-off');

                $('#btn_seconda').removeClass('btn-on');
                $('#btn_seconda').addClass('btn-off');

                $('#btn_terza').removeClass('btn-on');
                $('#btn_terza').addClass('btn-off');

                $('#btn_quarta').removeClass('btn-on');
                $('#btn_quarta').addClass('btn-off');

                $('#btn_quinta').removeClass('btn-on');
                $('#btn_quinta').addClass('btn-off');

                $('#btn_sesta').removeClass('btn-on');
                $('#btn_sesta').addClass('btn-off');

                $('#btn_settima').removeClass('btn-on');
                $('#btn_settima').addClass('btn-off');

                break;
    }
}


function modali(modale) {
    switch (modale) {
        case modale = 0:
            $('#modal_ionico').addClass('myhidden');
            $('#modal_dorico').addClass('myhidden');
            $('#modal_frigio').addClass('myhidden');
            $('#modal_lidio').addClass('myhidden');
            $('#modal_misolidio').addClass('myhidden');
            $('#modal_eolio').addClass('myhidden');
            $('#modal_locrio').addClass('myhidden');

            $('#btn_modi').removeClass('btn-danger');
            $('#btn_modi').addClass('btn-off');
            $('#btn_ionico').removeClass('btn-on');
            $('#btn_ionico').addClass('btn-off');
            $('#btn_dorico').removeClass('btn-on');
            $('#btn_dorico').addClass('btn-off');
            $('#btn_frigio').removeClass('btn-on');
            $('#btn_frigio').addClass('btn-off');
            $('#btn_lidio').removeClass('btn-on');
            $('#btn_lidio').addClass('btn-off');
            $('#btn_misolidio').removeClass('btn-on');
            $('#btn_misolidio').addClass('btn-off');
            $('#btn_eolio').removeClass('btn-on');
            $('#btn_eolio').addClass('btn-off');
            $('#btn_locrio').removeClass('btn-on');
            $('#btn_locrio').addClass('btn-off');
            break;
        case modale = 1:
            $('#modal_ionico').toggleClass('myhidden');

            $('#btn_ionico').toggleClass('btn-on');
            $('#btn_ionico').toggleClass('btn-off');
            $('#btn_modi').removeClass('btn-off');
            $('#btn_modi').addClass('btn-danger');
            break;
        case modale = 2:
            $('#modal_dorico').toggleClass('myhidden');

            $('#btn_dorico').toggleClass('btn-on');
            $('#btn_dorico').toggleClass('btn-off');
            $('#btn_modi').removeClass('btn-off');
            $('#btn_modi').addClass('btn-danger');
            break;
        case modale = 3:
            $('#modal_frigio').toggleClass('myhidden');

            $('#btn_frigio').toggleClass('btn-on');
            $('#btn_frigio').toggleClass('btn-off');
            $('#btn_modi').removeClass('btn-off');
            $('#btn_modi').addClass('btn-danger');
            break;
        case modale = 4:
            $('#modal_lidio').toggleClass('myhidden');

            $('#btn_lidio').toggleClass('btn-on');
            $('#btn_lidio').toggleClass('btn-off');
            $('#btn_modi').removeClass('btn-off');
            $('#btn_modi').addClass('btn-danger');
            break;
        case modale = 5:
            $('#modal_misolidio').toggleClass('myhidden');

            $('#btn_misolidio').toggleClass('btn-on');
            $('#btn_misolidio').toggleClass('btn-off');
            $('#btn_modi').removeClass('btn-off');
            $('#btn_modi').addClass('btn-danger');
            break;
        case modale = 6:
            $('#modal_eolio').toggleClass('myhidden');

            $('#btn_eolio').toggleClass('btn-on');
            $('#btn_eolio').toggleClass('btn-off');
            $('#btn_modi').removeClass('btn-off');
            $('#btn_modi').addClass('btn-danger')
            break;
        case modale = 7:
            $('#modal_locrio').toggleClass('myhidden');

            $('#btn_locrio').toggleClass('btn-on');
            $('#btn_locrio').toggleClass('btn-off');
            $('#btn_modi').removeClass('btn-off');
            $('#btn_modi').addClass('btn-danger')
            break;
    }
}



////// FULL SCREEN
if(document.fullscreenEnabled || document.webkitFullscreenEnabled) {
    const toggleBtn = document.querySelector('.js-toggle-fullscreen-btn');

    const styleEl = document.createElement('link');
    styleEl.setAttribute('rel', 'stylesheet');
    styleEl.setAttribute('href', 'https://codepen.io/tiggr/pen/poJoLyW.css');
    styleEl.addEventListener('load', function() {
        toggleBtn.hidden = false;
    });
    document.head.appendChild(styleEl);

    toggleBtn.addEventListener('click', function() {
        if(document.fullscreen) {
            document.exitFullscreen();
        } else if(document.webkitFullscreenElement) {
            document.webkitCancelFullScreen()
        } else if(document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
        } else {
            document.documentElement.webkitRequestFullScreen();
        }
    });

    document.addEventListener('fullscreenchange', handleFullscreen);
    document.addEventListener('webkitfullscreenchange', handleFullscreen);


    function handleFullscreen() {
        if(document.fullscreen || document.webkitFullscreenElement) {
            toggleBtn.classList.add('on');
            toggleBtn.setAttribute('aria-label', 'Exit fullscreen mode');
        } else {
            toggleBtn.classList.remove('on');
            toggleBtn.setAttribute('aria-label', 'Enter fullscreen mode');
        }
    }
}

Public Shell Version 2.0