/**
 * Description: WebAudio Synthesizer Tools.
 *
 * @package     midi-Synth
 * @category    module js
 * @author      Oleg Klenitsky <https://adminkov.bcr.by/midi/>
 * @copyright   2024 Oleg Klenitsky
 * @license     GPL-2.0-or-later
 */

"use strict";

var levelDefaultVolume   = 96;
var levelDefaultPithBend = 0;
var levelDefaultPanPos   = 0;
var levelDefaultExpression = 127;
var levelDefaultModulation = 0;
var levelDefaultBalance  = 0;

var ctxScaleTools;
var ctxTools;
var btnTool;

var arrScaleY_63 =[];
var arrScaleY_127 =[];
var arrScaleY_8191 =[];

function updateArrDraft(e){
	let maxTick = synth.getSongDurationTicks();
	let ppqn = synth.getPPQN();
	let posX = e.offsetX - e.offsetX%Math.round(ppqn/12/4);
	let posY = e.offsetY - e.offsetY%8 +4;
	let lengthBeat = 0;

	if("" == btnTool)return;

	if(1 == e.which){

		if(posY<12)posY  = 12;
		if(posY>140)posY = 140;

		arrDraft[posX] = {value:arrScaleY_127[posY]};

		drawArrDraft();

		//Draw scale |
	  arrTimeSignatureNoBPM.forEach(function(item, idx){
	  	let lengthMeasure = 0;
	    let countSubBeats = 0;

	    if(arrTimeSignatureNoBPM[idx+1]){
	      lengthMeasure = arrTimeSignatureNoBPM[idx+1].tick - item.tick;
	    }else{
	      lengthMeasure = maxTick - item.tick;
	      let chunk = lengthMeasure%(ppqn*4);
	      lengthMeasure = lengthMeasure - chunk + ppqn*8;
	    }
	  	if (2 == item.timeSignature[1]) lengthBeat = ppqn;
	    if (3 == item.timeSignature[1]) lengthBeat = ppqn/2;
	    if (4 == item.timeSignature[1]) lengthBeat = ppqn/4;
	    if (5 == item.timeSignature[1]) lengthBeat = ppqn/8;

	    let countSubMeasures = Math.floor(countSubBeats/item.timeSignature[0]);
	    let offset = item.tick;

	    drawToolsBeats(offset, lengthMeasure, lengthBeat);
	  });
	}
}
function drawArrDraft(){
	let step = 0;
	let posX = 0;
	let posY = 0;
	let prevY = 0;

	ctxTools.clearRect(0, 0, cnvTools.width, cnvTools.height);

	ctxTools.beginPath();
	ctxTools.strokeStyle = "#0073AA";
	ctxTools.lineWidth  = 1.0;

	let idxPrev;
	arrDraft.forEach(function(item, idx){
		posX = idx;
		posY = 140 - item.value;

		if(0 == step) {
			ctxTools.moveTo(posX, posY);
			prevY = posY;
		}
	  ctxTools.lineTo(posX, prevY);
		ctxTools.lineTo(posX, posY);
		ctxTools.arc(posX, posY, 2, 0, 2 * Math.PI);

		prevY = posY;
		step++;
	});
	ctxTools.stroke();

	if("tool1" !== btnTool && "tool2" !== btnTool && "tool5" !== btnTool && "tool6" !== btnTool){
		ctxTools.strokeStyle = "red";
		ctxTools.lineWidth  = 0.5;
	  ctxTools.beginPath();
		ctxTools.moveTo(0, 76);
		ctxTools.lineTo(cnvTools.width, 76);
		ctxTools.stroke();
	}
}
/**
 * For reference:
 * let valMSB = arrScaleY_8191[posY] >> 7 & 0x7F;
 * let valLSB = arrScaleY_8191[posY] & 0x7F;
 * arrDraft.push({posX:posX*12, param1:valLSB, param2:valMSB});
 */
function updateArrTool(){
	//Преобразование arrDraft
	let arr = [];
	arrDraft.forEach(function(item, idx){
		if("tool3" == btnTool){ //PitchBend
			let valMSB = item.value;
			let valLSB = 0;
			arr.push({posX:idx*12, param1:valLSB, param2:valMSB});
		}else{
			arr.push({posX:idx*12, value:item.value});
		}
	});

	switch(btnTool){
	  case "tool1":
	  	arrVelocity[selTrackNum] = arr;
	  	updateVelocity();
	  	break;
	  case "tool2":
	  	arrVolume[selTrackNum] = arr;
	  	break;
	  case "tool3":
	  	arrPitchBend[selTrackNum] = arr;
	  	break;
	  case "tool4":
	  	arrPanpos[selTrackNum] = arr;
	  	break;
	  case "tool5":
	  	arrExpression[selTrackNum] = arr;
	  	break;
	  case "tool6":
	  	arrModulation[selTrackNum] = arr;
	  	break;
	  case "tool7":
	  	arrSoftPedal[selTrackNum] = arr;
	  	break;
	  case "tool8":
	  	arrSostenuto[selTrackNum] = arr;
			break;
		case "tool9":
	  	arrSustain[selTrackNum] = arr;
	  	break;
	  case "tool10":
	  	arrBalance[selTrackNum] = arr;
			break;
	}
	changedData = true;
}
/**
 * clearArrTool  which right mouse button
 *
 * @param  {[type]} e [description]
 */
function clearArrTool(e){
	changedData = true;

	e.preventDefault();

	switch(btnTool){
	  case "tool1":
	  	arrVelocity[selTrackNum] = [];
	  	drawTools("tool1");
	  	break;
	  case "tool2":
	  	arrVolume[selTrackNum] = [];
	  	drawTools("tool2");
	  	break;
	  case "tool3":
	  	arrPitchBend[selTrackNum] = [];
	  	drawTools("tool3");
	  	break;
	  case "tool4":
	  	arrPanpos[selTrackNum] = [];
	  	drawTools("tool4");
	  	break;
	  case "tool5":
	  	arrExpression[selTrackNum] = [];
	  	drawTools("tool5");
	  	break;
	  case "tool6":
	  	arrModulation[selTrackNum] = [];
	  	drawTools("tool6");
	  	break;
	  case "tool7":
	  	arrSoftPedal[selTrackNum] = [];
	  	drawTools("tool7");
	  	break;
	  case "tool8":
	  	arrSostenuto[selTrackNum] = [];
	  	drawTools("tool8");
			break;
		case "tool9":
			arrSustain[selTrackNum] = [];
	  	drawTools("tool9");
	  	break;
	  case "tool10":
	  	arrBalance[selTrackNum] = [];
	  	drawTools("tool10");
			break;
	}
}
/**
 * [drawTools description]
 * @param  {[type]} id [description]
 */
function drawTools(id){
	let maxTick = synth.getSongDurationTicks();
	let ppqn = synth.getPPQN();
	let lengthBeat = 0;

	arrDraft = [];

	div_cnvTools.scrollLeft = subwin_part2.scrollLeft;

	if(undefined !== btnTool && id == btnTool){
		btnsSwitch(btnTool);
	}else{
		btnsSwitch(id);
	}

	cnvTools.width = (Math.round((maxTick+ppqn)/12))*scale; //длинна в тиках / 12тиков на 1px
  cnvTools.style.width = cnvTools.width + "px";

	//Clear canvas
  ctxScaleTools.clearRect(0, 0, cnvScaleTools.width, cnvScaleTools.height);
  //Clear canvas
  ctxTools.clearRect(0, 0, cnvTools.width, cnvTools.height);

  ctxScaleTools.font = "bold 12px serif";
  ctxScaleTools.fillStyle = "black";
  ctxScaleTools.textAlign = "right";

  switch(id){
	  case "tool1":
	  case "tool2":
	  case "tool5":
	  case "tool6":
	  	//Velocity, Volume, Expression, Modulation
	  	ctxScaleTools.fillText(127, 33, 16);
	  	ctxScaleTools.fillText(96, 33, 48);
	  	ctxScaleTools.fillText(64, 33, 80);
	  	ctxScaleTools.fillText(32, 33, 112);
	  	ctxScaleTools.fillText(0, 33, 144);
	  	break;
	  case "tool4":
	  case "tool10":
	  	//Panpos, Balance
	  	ctxScaleTools.fillText(127, 33, 16);
	  	ctxScaleTools.fillText(96, 33, 48);
	  	ctxScaleTools.fillText(64, 33, 80);
	  	ctxScaleTools.fillText(32, 33, 112);
	  	ctxScaleTools.fillText(0, 33, 144);
	  	ctxTools.strokeStyle = "red";
			ctxTools.lineWidth  = 0.5;
		  ctxTools.beginPath();
	  	ctxTools.moveTo(0, 76);
	  	ctxTools.lineTo(cnvTools.width, 76);
	  	ctxTools.stroke()
	  	break;
	  case "tool3":
	  	//PitchBend
	  	ctxScaleTools.fillText(8191, 33, 16);
	  	ctxScaleTools.fillText(4096, 33, 48);
	  	ctxScaleTools.fillText(0, 33, 80);
	  	ctxScaleTools.fillText(-4096, 33, 112);
	  	ctxScaleTools.fillText(-8191, 33, 144);
	  	ctxTools.strokeStyle = "red";
			ctxTools.lineWidth  = 0.5;
		  ctxTools.beginPath();
	  	ctxTools.moveTo(0, 76);
	  	ctxTools.lineTo(cnvTools.width, 76);
	  	ctxTools.stroke()
	  	break;
	  case "tool7":
	  case "tool8":
	  case "tool9":
	  	//SoftPedal, Sostenuto, Sustain
	  	ctxScaleTools.fillText("On", 33, 16);
	  	ctxScaleTools.fillText("0", 33, 80);
	  	ctxTools.strokeStyle = "red";
			ctxTools.lineWidth  = 0.5;
		  ctxTools.beginPath();
	  	ctxTools.moveTo(0, 76);
	  	ctxTools.lineTo(cnvTools.width, 76);
	  	ctxScaleTools.fillText("Off", 33, 144);
	  	ctxTools.stroke();
	  	break;
	  case "tool?":
	  	//
	  	ctxScaleTools.fillText(64, 33, 16);
	  	ctxScaleTools.fillText(32, 33, 48);
	  	ctxScaleTools.fillText(0, 33, 80);
	  	ctxScaleTools.fillText(-32, 33, 112);
	  	ctxScaleTools.fillText(-64, 33, 144);
	  	break;
	}

	ctxScaleTools.strokeStyle = "black";
	ctxScaleTools.lineWidth  = 0.5;
  ctxScaleTools.beginPath();

  //---------------------------
  ctxScaleTools.moveTo(39, 12);  arrScaleY_127[12]=127; arrScaleY_8191[12]=0;
  ctxScaleTools.lineTo(34, 12);

  ctxScaleTools.moveTo(39, 20);  arrScaleY_127[20]=120; arrScaleY_8191[20]=-1024;
  ctxScaleTools.lineTo(37, 20);

  ctxScaleTools.moveTo(39, 28);  arrScaleY_127[28]=112; arrScaleY_8191[28]=-2048;
  ctxScaleTools.lineTo(37, 28);

  ctxScaleTools.moveTo(39, 36);  arrScaleY_127[36]=104; arrScaleY_8191[36]=-3072;
  ctxScaleTools.lineTo(37, 36);
  //---------------------------
  ctxScaleTools.moveTo(39, 44);  arrScaleY_127[44]=96;  arrScaleY_8191[44]=-4096;
  ctxScaleTools.lineTo(34, 44);

  ctxScaleTools.moveTo(39, 52);  arrScaleY_127[52]=88;  arrScaleY_8191[52]=-5120;
  ctxScaleTools.lineTo(37, 52);

  ctxScaleTools.moveTo(39, 60);  arrScaleY_127[60]=80;  arrScaleY_8191[60]=-6144;
  ctxScaleTools.lineTo(37, 60);

  ctxScaleTools.moveTo(39, 68);  arrScaleY_127[68]=72;  arrScaleY_8191[68]=-7168;
  ctxScaleTools.lineTo(37, 68);
  //---------------------------
  ctxScaleTools.moveTo(39, 76);  arrScaleY_127[76]=64;  arrScaleY_8191[76]=-8192;//0
  ctxScaleTools.lineTo(34, 76);

  ctxScaleTools.moveTo(39, 84);  arrScaleY_127[84]=56;  arrScaleY_8191[84]=-9216;
  ctxScaleTools.lineTo(37, 84);

  ctxScaleTools.moveTo(39, 92);  arrScaleY_127[92]=48;  arrScaleY_8191[92]=-10240;
  ctxScaleTools.lineTo(37, 92);

  ctxScaleTools.moveTo(39, 100); arrScaleY_127[100]=40;  arrScaleY_8191[100]=-11264;
  ctxScaleTools.lineTo(37, 100);
  //---------------------------
  ctxScaleTools.moveTo(39, 108); arrScaleY_127[108]=32;  arrScaleY_8191[108]=-12288;
  ctxScaleTools.lineTo(34, 108);

  ctxScaleTools.moveTo(39, 116); arrScaleY_127[116]=24;  arrScaleY_8191[116]=-13312;
  ctxScaleTools.lineTo(37, 116);

  ctxScaleTools.moveTo(39, 124); arrScaleY_127[124]=16;  arrScaleY_8191[124]=-14336;
  ctxScaleTools.lineTo(37, 124);

  ctxScaleTools.moveTo(39, 132); arrScaleY_127[132]=8;   arrScaleY_8191[132]=-15360;
  ctxScaleTools.lineTo(37, 132);

  ctxScaleTools.moveTo(39, 140); arrScaleY_127[140]=0;   arrScaleY_8191[140]=-16384;
  ctxScaleTools.lineTo(34, 140);

  ctxScaleTools.stroke();

	if("" == selTrackNum) {
		drawWarningMsg();
		return;
	}

  //Draw scale |
  arrTimeSignatureNoBPM.forEach(function(item, idx){
  	let lengthMeasure = 0;
    let countSubBeats = 0;

    if(arrTimeSignatureNoBPM[idx+1]){
      lengthMeasure = arrTimeSignatureNoBPM[idx+1].tick - item.tick;
    }else{
      lengthMeasure = maxTick - item.tick;
      let chunk = lengthMeasure%(ppqn*4);
      lengthMeasure = lengthMeasure - chunk + ppqn*8;
    }
  	if (2 == item.timeSignature[1]) lengthBeat = ppqn;
    if (3 == item.timeSignature[1]) lengthBeat = ppqn/2;
    if (4 == item.timeSignature[1]) lengthBeat = ppqn/4;
    if (5 == item.timeSignature[1]) lengthBeat = ppqn/8;

    let countSubMeasures = Math.floor(countSubBeats/item.timeSignature[0]);
    let offset = item.tick;

    drawToolsBeats(offset, lengthMeasure, lengthBeat);
  });

  ctxTools.strokeStyle = "black";
	ctxTools.lineWidth  = 1.0;

	switch(id){
		case "tool1":
			prepareArrDraft(arrVelocity[selTrackNum]);
			drawVelocity();
	  	break;
	  case "tool2":
	  	prepareArrDraft(arrVolume[selTrackNum]);
	  	drawVolume();
	  	break;
	  case "tool3":
	  	prepareArrDraft(arrPitchBend[selTrackNum]);
	  	drawPitchBend();
	  	break;
	  case "tool4":
	  	prepareArrDraft(arrPanpos[selTrackNum]);
	  	drawPanpos();
	  	break;
	  case "tool5":
	  	prepareArrDraft(arrExpression[selTrackNum]);
	  	drawExpression();
	  	break;
	  case "tool6":
	  	prepareArrDraft(arrModulation[selTrackNum]);
	  	drawModulation();
	  	break;
	  case "tool7":
	  	prepareArrDraft(arrSoftPedal[selTrackNum]);
	  	drawSoftPedal();
	  	break;
	  case "tool8":
	  	prepareArrDraft(arrSostenuto[selTrackNum]);
	  	drawSostenuto();
	  	break;
	  case "tool9":
	  	prepareArrDraft(arrSustain[selTrackNum]);
	  	drawSustain();
	  	break;
	  case "tool10":
	  	prepareArrDraft(arrBalance[selTrackNum]);
	  	drawBalance();
	  	break;
	}
}
function prepareArrDraft(arr){
	let posX;

	arr.forEach(function(item, idx){
		posX = item.posX/12;
		if("tool3" == btnTool){ //PitchBend
			arrDraft[posX] = {value:item.param2};
		}else{
			arrDraft[posX] = {value:item.value};
		}
	});
}
function drawToolsBeats(offset, lengthMeasure, lengthBeat){
	ctxTools.strokeStyle = "#AAAAAA";
  for(let i=0; i<lengthMeasure; i+= lengthBeat) {
    ctxTools.beginPath();
    ctxTools.moveTo(Math.round((offset+i)/12)*scale, 0); 							 //little measures
    ctxTools.lineTo(Math.round((offset+i)/12)*scale, cnvTools.height); //little measures
    ctxTools.stroke();
  }
}
function drawWarningMsg(){
	ctxTools.font = "bold 24px serif";
  ctxTools.fillStyle = "red";
  ctxTools.textAlign = "center";
  ctxTools.fillText("no selected track", 350, 60);
}
/**
 * [drawBalance description]
 */
function drawBalance(){
	let maxTick = synth.getSongDurationTicks();
	let step = 0;
	let posX = 0;
	let posY = 0;
	let prevY = 0;

	if(undefined == arrBalance[selTrackNum])return;

	arrBalance[selTrackNum].forEach(function(item, idx){
		posX = item.posX/12;
		posY = 140 - item.value;

		if(0 == step) {
			ctxTools.moveTo(posX, posY);
			prevY = posY;
		}
	  ctxTools.lineTo(posX, prevY);
		ctxTools.lineTo(posX, posY);
		ctxTools.arc(posX, posY, 2, 0, 2 * Math.PI);

		prevY = posY;
		step++;
	});
	if(0 !== arrBalance[selTrackNum].length) ctxTools.lineTo(maxTick/12, posY);

	ctxTools.stroke();
}
/**
 * [drawSustain description]
 */
function drawSustain(){
	let maxTick = synth.getSongDurationTicks();
	let step = 0;
	let posX = 0;
	let posY = 0;
	let prevY = 0;

	if(undefined == arrSustain[selTrackNum])return;

	arrSustain[selTrackNum].forEach(function(item, idx){
		posX = item.posX/12;
		posY = 140 - item.value;

		if(0 == step) {
			ctxTools.moveTo(posX, posY);
			prevY = posY;
		}
	  ctxTools.lineTo(posX, prevY);
		ctxTools.lineTo(posX, posY);
		ctxTools.arc(posX, posY, 2, 0, 2 * Math.PI);

		prevY = posY;
		step++;
	});
	if(0 !== arrSustain[selTrackNum].length) ctxTools.lineTo(maxTick/12, posY);

	ctxTools.stroke();
}
/**
 * [drawSostenuto description]
 * @return {[type]} [description]
 */
function drawSostenuto(){
	let maxTick = synth.getSongDurationTicks();
	let step = 0;
	let posX = 0;
	let posY = 0;
	let prevY = 0;

	if(undefined == arrSostenuto[selTrackNum])return;

	arrSostenuto[selTrackNum].forEach(function(item, idx){
		posX = item.posX/12;
		posY = 140 - item.value;

		if(0 == step) {
			ctxTools.moveTo(posX, posY);
			prevY = posY;
		}
	  ctxTools.lineTo(posX, prevY);
		ctxTools.lineTo(posX, posY);
		ctxTools.arc(posX, posY, 2, 0, 2 * Math.PI);

		prevY = posY;
		step++;
	});
	if(0 !== arrSostenuto[selTrackNum].length) ctxTools.lineTo(maxTick/12, posY);

	ctxTools.stroke();
}
/**
 * [drawSoftPedal description]
 * @return {[type]} [description]
 */
function drawSoftPedal(){
	let maxTick = synth.getSongDurationTicks();
	let step = 0;
	let posX = 0;
	let posY = 0;
	let prevY = 0;

	if(undefined == arrSoftPedal[selTrackNum])return;

	arrSoftPedal[selTrackNum].forEach(function(item, idx){
		posX = item.posX/12;
		posY = 140 - item.value;

		if(0 == step) {
			ctxTools.moveTo(posX, posY);
			prevY = posY;
		}
	  ctxTools.lineTo(posX, prevY);
		ctxTools.lineTo(posX, posY);
		ctxTools.arc(posX, posY, 2, 0, 2 * Math.PI);

		prevY = posY;
		step++;
	});
	if(0 !== arrSoftPedal[selTrackNum].length) ctxTools.lineTo(maxTick/12, posY);

	ctxTools.stroke();
}
/**
 * [drawModulation description]
 */
function drawModulation(){
	let maxTick = synth.getSongDurationTicks();
	let step = 0;
	let posX = 0;
	let posY = 0;
	let prevY = 0;

	if(undefined == arrModulation[selTrackNum])return;

	arrModulation[selTrackNum].forEach(function(item, idx){
		posX = item.posX/12;
		posY = 140 - item.value;

		if(0 == step) {
			ctxTools.moveTo(posX, posY);
			prevY = posY;
		}
	  ctxTools.lineTo(posX, prevY);
		ctxTools.lineTo(posX, posY);
		ctxTools.arc(posX, posY, 2, 0, 2 * Math.PI);

		prevY = posY;
		step++;
	});
	if(0 !== arrModulation[selTrackNum].length) ctxTools.lineTo(maxTick/12, posY);

	ctxTools.stroke();
}
/**
 * [drawExpression description]
 */
function drawExpression(){
	let maxTick = synth.getSongDurationTicks();
	let step = 0;
	let posX = 0;
	let posY = 0;
	let prevY = 0;

	if(undefined == arrExpression[selTrackNum])return;

	arrExpression[selTrackNum].forEach(function(item, idx){
		posX = item.posX/12;
		posY = 140 - item.value;

		if(0 == step) {
			ctxTools.moveTo(posX, posY);
			prevY = posY;
		}
	  ctxTools.lineTo(posX, prevY);
		ctxTools.lineTo(posX, posY);
		ctxTools.arc(posX, posY, 2, 0, 2 * Math.PI);

		prevY = posY;
		step++;
	});
	if(0 !== arrExpression[selTrackNum].length) ctxTools.lineTo(maxTick/12, posY);

	ctxTools.stroke();
}
/**
 * [drawPanpos description]
 */
function drawPanpos(){
	let maxTick = synth.getSongDurationTicks();
	let step = 0;
	let posX = 0;
	let posY = 0;
	let prevY = 0;

	if(undefined == arrPanpos[selTrackNum])return;

	arrPanpos[selTrackNum].forEach(function(item, idx){
		posX = item.posX/12;
		posY = 140 - item.value;

		if(0 == step) {
			ctxTools.moveTo(posX, posY);
			prevY = posY;
		}
	  ctxTools.lineTo(posX, prevY);
		ctxTools.lineTo(posX, posY);
		ctxTools.arc(posX, posY, 2, 0, 2 * Math.PI);

		prevY = posY;
		step++;
	});
	if(0 !== arrPanpos[selTrackNum].length) ctxTools.lineTo(maxTick/12, posY);

	ctxTools.stroke();
}

/**
 * [drawPitchBend description]
 * unit - tick.
 */
function drawPitchBend(){
	let maxTick = synth.getSongDurationTicks();
	let step = 0;
	let posX = 0;
	let posY = 0;
	let prevY = 0;

	if(undefined == arrPitchBend[selTrackNum])return;

	arrPitchBend[selTrackNum].forEach(function(item, idx){
		posX = item.posX/12;
		posY = 140 - item.param2;

		if(0 == step){
			ctxTools.moveTo(posX, posY);
			prevY = posY;
		}
	  ctxTools.lineTo(posX, prevY);
		ctxTools.lineTo(posX, posY);
		ctxTools.arc(posX, posY, 2, 0, 2 * Math.PI);

		prevY = posY;
		step++;
	});
	if(0 !== arrPitchBend[selTrackNum].length) ctxTools.lineTo(maxTick/12, posY);

	ctxTools.stroke();
}
/**
 * [drawVolume description]
 * unit - tick.
 */
function drawVolume(){
	let maxTick = synth.getSongDurationTicks();
	let step = 0;
	let posX = 0;
	let posY = 0;
	let prevY = 0;

	if(undefined == arrVolume[selTrackNum])return;

	arrVolume[selTrackNum].forEach(function(item, idx){
		posX = item.posX/12;
		posY = 140 - item.value;

		if(0 == step) {
			ctxTools.moveTo(posX, posY);
			prevY = posY;
		}
	  ctxTools.lineTo(posX, prevY);
		ctxTools.lineTo(posX, posY);
		ctxTools.arc(posX, posY, 2, 0, 2 * Math.PI);

		prevY = posY;
		step++;
	});
	if(0 !== arrVolume[selTrackNum].length) ctxTools.lineTo(maxTick/12, posY);

	ctxTools.stroke();
}
/**
 * [drawVelocity description]
 * unit - px.
 */
function drawVelocity(){
	let allNotes = document.querySelector("#svg_body_part2");
	let selNotes = allNotes.querySelectorAll(`[trk='${selTrackNum}']`);
	let posX;
	let posY;

	//рисуем график.
	selNotes.forEach(function(note, idx){
		if("rect" == note.nodeName) posX = parseInt(note.attributes.x.value)*scale;
		if("circle" == note.nodeName) posX = parseInt(note.attributes.cx.value)*scale;
		if(0 == idx){
			posY = 140 - parseInt(note.attributes.velocity.value);
			ctxTools.moveTo(posX, posY);
			ctxTools.arc(posX, posY, 2, 0, 2 * Math.PI);
		}
		ctxTools.lineTo(posX, posY);
		posY = 140 - parseInt(note.attributes.velocity.value);
	  ctxTools.lineTo(posX, posY);
	  ctxTools.arc(posX, posY, 2, 0, 2 * Math.PI);

	  arrVelocity[posX] = parseInt(note.attributes.velocity.value);
	});
	ctxTools.stroke();
}
function updateVelocity(){
	let allNotes = document.querySelector("#svg_body_part2");
	let selNotes = allNotes.querySelectorAll(`[trk='${selTrackNum}']`);

	let notePosX;
	let noteVel;

	selNotes.forEach(function(note, idx){
		if("rect" == note.nodeName) notePosX = parseInt(note.attributes.x.value)*12;
		if("circle" == note.nodeName) notePosX = parseInt(note.attributes.cx.value)*12;

    for(let i=0; i<arrVelocity[selTrackNum].length; i++) {
    	if(notePosX == arrVelocity[selTrackNum][i].posX){
    		note.setAttribute("velocity", arrVelocity[selTrackNum][i].value);
    		break;
    	}
    	if(notePosX > arrVelocity[selTrackNum][i].posX){
    		noteVel = arrVelocity[selTrackNum][i].value;
    	}else{
    		note.setAttribute("velocity", noteVel);
    		break;
    	}
    }
	});
}
/**
 * [btnsSwitch description]
 * @param  {[type]} id [description]
 */
function btnsSwitch(id){
	let btns = document.getElementById("btns_tools").childNodes;

	btnTool = id;

	btns.forEach(function(btn, idx){
		if(id == btn.id){
			btn.style.boxShadow =
		"inset -2px -2px 3px rgba(200, 200, 200, .6),inset 2px 2px 3px rgba(0, 0, 0, .6)";
		}else{
			btn.style.boxShadow =
		"inset 2px 2px 3px rgba(255, 255, 255, .6),inset -2px -2px 3px rgba(0, 0, 0, .6)";
		}
	});
}
