Highlight specific instruments and Undo button

[super_nova]

Copy-Paste this code into your javascript console and tataaa

Code:

$("#toolbar_element").append("<div class='spacer'></div>");
//PIANO-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_piano' instState='on' title='Toggle Piano'></div>");
$("#toggle_piano").css('background-image', 'url(' + "https://lh5.googleusercontent.com/-ofLsSfSsE10/AAAAAAAAAAI/AAAAAAAAABQ/ff9Z8hwloy4/photo.jpg?sz=50" + ')');
$("#toggle_piano").css('background-size', 'cover');
$("#toggle_piano").append("<div id='tgpn_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");

$("#toggle_piano").click(function() {
    
    var instState = $( this ).attr( "instState" );
    //alert(instState);
    if( instState == "on" )
    {
        $( this ).attr( "instState", "off" );
        $(".instrument0").hide();
        $("#tgpn_active").css("visibility", "visible");
        //alert("k");
    }
    else
    {
        $( this ).attr( "instState", "on" );
        $(".instrument0").show();
        $("#tgpn_active").css("visibility", "hidden");
    }
});
//ACOUSTIC GUITAR-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_acguitar' instState='on' title='Toggle Acoustic Guitar'></div>");
$("#toggle_acguitar").css('background-image', 'url(' + "https://lh4.googleusercontent.com/-uD0lTHLIZPM/AAAAAAAAAAI/AAAAAAAAAFI/OZa6FJXzpoY/photo.jpg?sz=50" + ')');
$("#toggle_acguitar").css('background-size', 'cover');
$("#toggle_acguitar").append("<div id='tgag_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");

$("#toggle_acguitar").click(function() {
    
    var instState = $( this ).attr( "instState" );
    //alert(instState);
    if( instState == "on" )
    {
        $( this ).attr( "instState", "off" );
        $(".instrument1").hide();
        $("#tgag_active").css("visibility", "visible");
        //alert("k");
    }
    else
    {
        $( this ).attr( "instState", "on" );
        $(".instrument1").show();
        $("#tgag_active").css("visibility", "hidden");
    }
});
//PERCUSSION-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_perc' instState='on' title='Toggle Percussion'></div>");
$("#toggle_perc").css('background-image', 'url(' + "https://lh5.googleusercontent.com/-wtdHSCdm2Gk/AAAAAAAAAAI/AAAAAAAAAEk/ae172QD66oo/photo.jpg?sz=50" + ')');
$("#toggle_perc").css('background-size', 'cover');
$("#toggle_perc").append("<div id='tgpc_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");

$("#toggle_perc").click(function() {
    
    var instState = $( this ).attr( "instState" );
    //alert(instState);
    if( instState == "on" )
    {
        $( this ).attr( "instState", "off" );
        $(".instrument2").hide();
        $("#tgpc_active").css("visibility", "visible");
        //alert("k");
    }
    else
    {
        $( this ).attr( "instState", "on" );
        $(".instrument2").show();
        $("#tgpc_active").css("visibility", "hidden");
    }
});
//SMOOTH SYNTH-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_smsynth' instState='on' title='Toggle Smooth Synth'></div>");
$("#toggle_smsynth").css('background-image', 'url(' + "http://betaman.persiangig.com/eXe%20cutive/synth/u22rl.png" + ')');
$("#toggle_smsynth").css('background-size', 'cover');
$("#toggle_smsynth").append("<div id='tgss_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");

$("#toggle_smsynth").click(function() {
    
    var instState = $( this ).attr( "instState" );
    //alert(instState);
    if( instState == "on" )
    {
        $( this ).attr( "instState", "off" );
        $(".instrument3").hide();
        $("#tgss_active").css("visibility", "visible");
        //alert("k");
    }
    else
    {
        $( this ).attr( "instState", "on" );
        $(".instrument3").show();
        $("#tgss_active").css("visibility", "hidden");
    }
});
//ELECTRIC GUITAR-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_elguitar' instState='on' title='Toggle Electric Guitar'></div>");
$("#toggle_elguitar").css('background-image', 'url(' + "https://cdn0.iconfinder.com/data/icons/icons-unleashed-vol1/256/-guitar.png" + ')');
$("#toggle_elguitar").css('background-size', 'cover');
$("#toggle_elguitar").append("<div id='tgeg_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");

$("#toggle_elguitar").click(function() {
    
    var instState = $( this ).attr( "instState" );
    //alert(instState);
    if( instState == "on" )
    {
        $( this ).attr( "instState", "off" );
        $(".instrument4").hide();
        $("#tgeg_active").css("visibility", "visible");
        //alert("k");
    }
    else
    {
        $( this ).attr( "instState", "on" );
        $(".instrument4").show();
        $("#tgeg_active").css("visibility", "hidden");
    }
});
//BASS GUITAR-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_bsguitar' instState='on' title='Toggle Bass'></div>");
$("#toggle_bsguitar").css('background-image', 'url(' + "http://www.gingermusiccompany.com/admin/uploaded_images/image/bassiconhqcl5.png" + ')');
$("#toggle_bsguitar").css('background-size', 'cover');
$("#toggle_bsguitar").append("<div id='tgbg_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");

$("#toggle_bsguitar").click(function() {
    
    var instState = $( this ).attr( "instState" );
    //alert(instState);
    if( instState == "on" )
    {
        $( this ).attr( "instState", "off" );
        $(".instrument5").hide();
        $("#tgbg_active").css("visibility", "visible");
        //alert("k");
    }
    else
    {
        $( this ).attr( "instState", "on" );
        $(".instrument5").show();
        $("#tgbg_active").css("visibility", "hidden");
    }
});
//SYNTH PLUCK-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_synthpl' instState='on' title='Toggle Synth Pluck'></div>");
$("#toggle_synthpl").css('background-image', 'url(' + "http://ipadloops.com/wp-content/uploads/2011/11/Nlog-Synth-Icon-150x150.jpg" + ')');
$("#toggle_synthpl").css('background-size', 'cover');
$("#toggle_synthpl").append("<div id='tgsp_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");

$("#toggle_synthpl").click(function() {
    
    var instState = $( this ).attr( "instState" );
    //alert(instState);
    if( instState == "on" )
    {
        $( this ).attr( "instState", "off" );
        $(".instrument6").hide();
        $("#tgsp_active").css("visibility", "visible");
        //alert("k");
    }
    else
    {
        $( this ).attr( "instState", "on" );
        $(".instrument6").show();
        $("#tgsp_active").css("visibility", "hidden");
    }
});
//SCI-FI-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_scifi' instState='on' title='Toggle Synth Pluck'></div>");
$("#toggle_scifi").css('background-image', 'url(' + "https://cdn2.iconfinder.com/data/icons/inverticons-stroke-vol-2/32/space_ship_ufo_aliens_transport-128.png" + ')');
$("#toggle_scifi").css('background-size', 'cover');
$("#toggle_scifi").append("<div id='tgsf_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");

$("#toggle_scifi").click(function() {
    
    var instState = $( this ).attr( "instState" );
    //alert(instState);
    if( instState == "on" )
    {
        $( this ).attr( "instState", "off" );
        $(".instrument7").hide();
        $("#tgsf_active").css("visibility", "visible");
        //alert("k");
    }
    else
    {
        $( this ).attr( "instState", "on" );
        $(".instrument7").show();
        $("#tgsf_active").css("visibility", "hidden");
    }
});