<script>
  $(document).ready(function() {
    $("body").on("contextmenu", function(e) {
      return false;
    });
  });

</script>

 <div class="selector">
   <div id=SelectorText>   
   Ratios: 
   </div>
   <button class="ActiveButton" id="PureButton">Pure</button>
      <button class="OtherButton" id="ReducedButton">Reduced</button>
    </div>

<?xml version="1.0" encoding="UTF-8"?>
<svg width="100%" height="100%" viewBox="0 0 5500 5500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>06 Combined ratios</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="Rectangle" fill="#000000" x="0" y="0" width="5500" height="5500"></rect>
        <g id="Reduced" transform="translate(749.106781, 793.106781)">
            <g id="Background-R" fill="#F3722C" stroke="#F3722C" stroke-linejoin="round" stroke-width="75">
                <rect id="5/3r" x="-37.5" y="-37.5" width="1075" height="1075"></rect>
                <rect id="15/1r" x="2962.5" y="-37.5" width="1075" height="1075"></rect>
                <rect id="1/15r" x="-37.5" y="2874.5" width="1075" height="1075"></rect>
                <rect id="3/5r" x="2962.5" y="2874.5" width="1075" height="1075"></rect>
                <rect id="5/4r" x="1462.5" y="-37.5" width="1075" height="1075"></rect>
                <rect id="1/3r" x="-37.5" y="1418.5" width="1075" height="1075"></rect>
                <rect id="1/1r" x="1462.5" y="1418.5" width="1075" height="1075"></rect>
                <rect id="3/1r" x="2962.5" y="1418.5" width="1075" height="1075"></rect>
                <rect id="4/5r" x="1462.5" y="2874.5" width="1075" height="1075"></rect>
            </g>
            <g id="Text-R" transform="translate(1.393219, 7.893219)" fill="#FFFFFF" font-family="AvenirNext-Regular, Avenir Next" font-size="450" font-weight="normal">
                <text id="T15/1r">
                    <tspan x="3025.75" y="650">15/8</tspan>
                </text>
                <text id="T5/3r">
                    <tspan x="155.75" y="650">5/6</tspan>
                </text>
                <text id="T3/5r">
                    <tspan x="3155.75" y="3562">6/5</tspan>
                </text>
                <text id="T1/15r">
                    <tspan x="25.75" y="3562">8/15</tspan>
                </text>
                <text id="T9/1r">
                    <tspan x="1655.75" y="3562">4/5</tspan>
                </text>
                <text id="T3/1r">
                    <tspan x="3155.75" y="2106">3/2</tspan>
                </text>
                <text id="T1/1r">
                    <tspan x="1655.75" y="2106">1/1</tspan>
                </text>
                <text id="T1/3r">
                    <tspan x="155.75" y="2106">2/3</tspan>
                </text>
                <text id="T1/9r">
                    <tspan x="1655.75" y="650">5/4</tspan>
                </text>
            </g>
            <g id="Keys-R" fill="#000000" fill-opacity="0">
 <rect class=key id="5/6" x="-75" y="-75" width="1150" height="1150"></rect>
<rect class=key id="15/8" x="2925" y="-75" width="1150" height="1150"></rect>
<rect class=key id="8/15" x="-75" y="2837" width="1150" height="1150"></rect>
<rect class=key id="6/5" x="2925" y="2837" width="1150" height="1150"></rect>
<rect class=key id="5/4" x="1425" y="-75" width="1150" height="1150"></rect>
<rect class=key id="2/3" x="-75" y="1381" width="1150" height="1150"></rect>
<rect class=key id="10/10" x="1425" y="1381" width="1150" height="1150"></rect>
<rect class=key id="3/2" x="2925" y="1381" width="1150" height="1150"></rect>
<rect class=key id="4/5" x="1425" y="2837" width="1150" height="1150"></rect>
            </g>
        </g>
        <g id="Pure" transform="translate(749.106781, 793.000000)">
            <g id="Background-P" transform="translate(0.000000, 0.106781)" fill="#4D908E" stroke="#4D908E" stroke-linejoin="round" stroke-width="75">
                <rect id="5/3p" x="-37.5" y="-37.5" width="1075" height="1075"></rect>
                <rect id="15/1p" x="2962.5" y="-37.5" width="1075" height="1075"></rect>
                <rect id="1/15p" x="-37.5" y="2874.5" width="1075" height="1075"></rect>
                <rect id="3/5p" x="2962.5" y="2874.5" width="1075" height="1075"></rect>
                <rect id="5/1p" x="1462.5" y="-37.5" width="1075" height="1075"></rect>
                <rect id="1/3p" x="-37.5" y="1418.5" width="1075" height="1075"></rect>
                <rect id="1/1p" x="1462.5" y="1418.5" width="1075" height="1075"></rect>
                <rect id="3/1p" x="2962.5" y="1418.5" width="1075" height="1075"></rect>
                <rect id="1/5p" x="1462.5" y="2875.5" width="1075" height="1075"></rect>
            </g>
            <g id="Text-P" transform="translate(2.393219, 0.000000)" fill="#FFFFFF" font-family="AvenirNext-Regular, Avenir Next" font-size="450" font-weight="normal">
                <text id="T15/1">
                    <tspan x="3025.75" y="650">15/1</tspan>
                </text>
                <text id="T5/3">
                    <tspan x="155.75" y="650">5/3</tspan>
                </text>
                <text id="T3/5">
                    <tspan x="3155.75" y="3562">3/5</tspan>
                </text>
                <text id="T1/15">
                    <tspan x="25.75" y="3562">1/15</tspan>
                </text>
                <text id="T9/1">
                    <tspan x="1655.75" y="3562">1/5</tspan>
                </text>
                <text id="T3/1">
                    <tspan x="3155.75" y="2106">3/1</tspan>
                </text>
                <text id="T1/1">
                    <tspan x="1655.75" y="2106">1/1</tspan>
                </text>
                <text id="T1/3">
                    <tspan x="155.75" y="2106">1/3</tspan>
                </text>
                <text id="T1/9">
                    <tspan x="1655.75" y="650">5/1</tspan>
                </text>
            </g>
            <g id="Keys-P" transform="translate(0.000000, 0.106781)" fill="#000000" fill-opacity="0">
<rect class=key id="5/3" x="-75" y="-75" width="1150" height="1150"></rect>
<rect class=key id="15/1" x="2925" y="-75" width="1150" height="1150"></rect>
<rect class=key id="1/15" x="-75" y="2837" width="1150" height="1150"></rect>
<rect class=key id="3/5" x="2925" y="2837" width="1150" height="1150"></rect>
<rect class=key id="5/1" x="1425" y="-75" width="1150" height="1150"></rect>
<rect class=key id="1/3" x="-75" y="1381" width="1150" height="1150"></rect>
<rect class=key id="1/1" x="1425" y="1381" width="1150" height="1150"></rect>
<rect class=key id="3/1" x="2925" y="1381" width="1150" height="1150"></rect>
<rect class=key id="1/5" x="1425" y="2838" width="1150" height="1150"></rect>
            </g>
        </g>
    </g>
</svg>

body {
  background-color: #000000;
  font-family: Avenir next;
  font-size: 100%;
  user-select: none;
  touch-action: none;
}

svg{
  display:block;
  position: absolute;
  z-index:0;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  touch-action: none;
  background-color: #000000;
}


/* Portrait orientation */
/*
@media screen and (orientation: portrait) {
button{
  display: block;
  position: absolute;
  background-color:#000000;
  font-family: avenir next;
  border-radius: 2px;
  border-width: 2px;
  border-style: solid;
  user-select: none;
  height: 7%;
  width: 17%;
  right: 2%;
  z-index: 3;
  font-size: 2vw
}
}
*/
/* Landscape orientation */
/*@media screen and (orientation: landscape) {*/
button{
  display: block;
  position: absolute;
  background-color:#000000;
  font-family: avenir next;
  border-radius: 4px;
  border-width: 2px;
  border-style: solid;
  user-select: none;
  height: 8%;
  width: 16%;
  right: 2%;
  z-index: 3;
  font-size: 2.5vw
}
/*}*/

.ActiveButton {
  color: #000000;
  background-color: #577590;
  border-color: #577590;
}

.OtherButton {
  color: #577590;
  background-color: #000000;
  border-color: #577590;
}

#PureButton {
  top: 37.5%;
  left: 10%
}

#ReducedButton{
  top: 52.5%;
  left: 10%
}

#SelectorText{
  display: none;
  position: absolute;
  left: 5%;
  top: 8%;
  color: #ffffff;
  z-index: 5
}

// General

console.clear(); 

var elem = document.documentElement;


const baseFreq = 220
var root = baseFreq
var transpose=0
var voice = 0
var maxVoices = 4
var KeyArray = []
let index

//*** initialize tone.js synth ***

     // core synthesizer
const voice1 = new Tone.Synth({oscillator: {type:"triangle"},
  envelope: { attack : 0.05, decay : 3.50, sustain : 0, release : 3.5}, 
  volume: -6});

const voice2 = new Tone.Synth({oscillator: {type:"triangle"},
  envelope: { attack : 0.05, decay : 3.50, sustain : 0, release : 3.5}, 
  volume: -6});

const voice3 = new Tone.Synth({oscillator: {type:"triangle"},
  envelope: { attack : 0.05, decay : 3.50, sustain : 0, release : 3.5}, 
  volume: -6});

const voice4 = new Tone.Synth({oscillator: {type:"triangle"},
  envelope: { attack : 0.05, decay : 3.50, sustain : 0, release : 3.5}, 
  volume: -6});

const synth = [voice1, voice2, voice3, voice4]



const reverb = new Tone.Reverb({wet:0.5}).toDestination();

Tone.connect(voice1, reverb);
Tone.connect(voice2, reverb);
Tone.connect(voice3, reverb);
Tone.connect(voice4, reverb);


      
// Interaction mode

let isTouchDevice
var interaction = 'click'

if ((navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)){isTouchDevice = true}
else {isTouchDevice = false}
    
if (isTouchDevice) {interaction = 'touchstart'}



// Make array of key elements by id

for(var i=0, n=document.getElementsByClassName("key"); i<n.length; i++) {
   KeyArray.push(n[i].id);
   };



// Trigger notes

//Tone.Transport.start()

function triggerNoteOnOff() {
  
  var index = math.eval(this.id)
 
synth[voice].triggerAttackRelease(root*index, "32n");
  
if (voice >= (maxVoices-1)){voice = 0}
else {voice ++}
 
  this.style.fillOpacity=0.5

  const key = this.id;

 function resetOpacity(key){
document.getElementById(key).style.fillOpacity=0}

  setTimeout(function(){resetOpacity(key)}, 200)
  
}
  
  for (const KeyValue of KeyArray) {
    document.getElementById(KeyValue).addEventListener(interaction, triggerNoteOnOff)
  }



document.getElementById("PureButton").addEventListener('click', function() {
  document.getElementById("Reduced").style.display="none"
  document.getElementById("Pure").style.display="block"
  document.getElementById("PureButton").className = "ActiveButton";
  document.getElementById("ReducedButton").className = "OtherButton";
})

document.getElementById("ReducedButton").addEventListener('click', function() {
  document.getElementById("Pure").style.display="none"
  document.getElementById("Reduced").style.display="block"
  document.getElementById("ReducedButton").className = "ActiveButton";
  document.getElementById("PureButton").className = "OtherButton";
})