// Function to show square bin statistics
function show_square_bin_statistics(event) {
  let oevent = event || window.event
  if (document.all) {
    oevent.cancelBubble = true
  } else {
    oevent.stopPropagation()
  }
  if (document.getElementById('div_explain_square_bin_statistics').style.display === 'none' || document.getElementById('div_explain_square_bin_statistics').style.display === '') {
    document.getElementById('div_explain_square_bin_statistics').style.display = 'block'
  } else {
    document.getElementById('div_explain_square_bin_statistics').style.display = 'none'
  }
}
document.onclick = function () {
  document.getElementById('div_explain_square_bin_statistics').style.display = 'none'
}
document.getElementById('div_explain_square_bin_statistics').onclick = function (event) {
  let oevent = event || window.event
  oevent.stopPropagation()
}

function show_square_bin_marker(event) {
  console.log('ggoddd')
  let oevent = event || window.event
  if (document.all) {
    oevent.cancelBubble = true
  } else {
    oevent.stopPropagation()
  }
  if (document.getElementById('div_explain_marker').style.display === 'none' || document.getElementById('div_explain_marker').style.display === '') {
    document.getElementById('div_explain_marker').style.display = 'block'
  } else {
    document.getElementById('div_explain_marker').style.display = 'none'
  }
}
document.onclick = function () {
  document.getElementById('div_explain_marker').style.display = 'none'
}
document.getElementById('div_explain_marker').onclick = function (event) {
  let oevent = event || window.event
  oevent.stopPropagation()
}

function show_square_bin_marker_otherbin(event) {
  console.log('ggoddd')
  let oevent = event || window.event
  if (document.all) {
    oevent.cancelBubble = true
  } else {
    oevent.stopPropagation()
  }
  if (document.getElementById('div_explain_marker_otherbin').style.display === 'none' || document.getElementById('div_explain_marker_otherbin').style.display === '') {
    console.log('none')
    document.getElementById('div_explain_marker_otherbin').style.display = 'block'
  } else {
    console.log('to none')
    document.getElementById('div_explain_marker_otherbin').style.display = 'none'
    
  }
}
document.onclick = function () {
  document.getElementById('div_explain_marker_otherbin').style.display = 'none'
}
document.getElementById('div_explain_marker_otherbin').onclick = function (event) {
  let oevent = event || window.event
  oevent.stopPropagation()
}

// Function to show bin 20
function show_bin20 (event) {
  let oevent = event || window.event
  if (document.all) {
      oevent.cancelBubble = true
  } else {
      oevent.stopPropagation()
  }
  if (document.getElementById('div_explain_bin20').style.display === 'none' || document.getElementById('div_explain_bin20').style.display === '') {
      document.getElementById('div_explain_bin20').style.display = 'block'
  } else {
      document.getElementById('div_explain_bin20').style.display = 'none'
  }
}
document.onclick = function () {
  document.getElementById('div_explain_bin20').style.display = 'none'
}
document.getElementById('div_explain_bin20').onclick = function (event) {
  let oevent = event || window.event
  oevent.stopPropagation()
}
// Function to show bin 50
function show_bin50(event) {
  let oevent = event || window.event
  if (document.all) {
    oevent.cancelBubble = true
  } else {
    oevent.stopPropagation()
  }
  if (document.getElementById('div_explain_bin50').style.display === 'none' || document.getElementById('div_explain_bin50').style.display === '') {
    document.getElementById('div_explain_bin50').style.display = 'block'
  } else {
    document.getElementById('div_explain_bin50').style.display = 'none'
  }
}
document.onclick = function () {
  document.getElementById('div_explain_bin50').style.display = 'none'
}
document.getElementById('div_explain_bin50').onclick = function (event) {
  let oevent = event || window.event
  oevent.stopPropagation()
}

// Function to show bin 1
// function show_bin1 (event) {
//     let oevent = event || window.event
//     if (document.all) {
//         oevent.cancelBubble = true
//     } else {
//         oevent.stopPropagation()
//     }
//     if (document.getElementById('div_explain_bin1').style.display === 'none' || document.getElementById('div_explain_bin1').style.display === '') {
//         document.getElementById('div_explain_bin1').style.display = 'block'
//     } else {
//         document.getElementById('div_explain_bin1').style.display = 'none'
//     }
// }
// document.onclick = function () {
//     document.getElementById('div_explain_bin1').style.display = 'none'
// }
// document.getElementById('div_explain_bin1').onclick = function (event) {
//     let oevent = event || window.event
//     oevent.stopPropagation()
// }






// Function to show clustering square bin
function show_clustering_square_bin(event) {
  let oevent = event || window.event
  if (document.all) {
    oevent.cancelBubble = true
  } else {
    oevent.stopPropagation()
  }
  if (document.getElementById('div_explain_clustering_square_bin').style.display === 'none' || document.getElementById('div_explain_clustering_square_bin').style.display === '') {
    document.getElementById('div_explain_clustering_square_bin').style.display = 'block'
  } else {
    document.getElementById('div_explain_clustering_square_bin').style.display = 'none'
  }
}
document.onclick = function () {
  document.getElementById('div_explain_clustering_square_bin').style.display = 'none'
}
document.getElementById('div_explain_clustering_square_bin').onclick = function (event) {
  let oevent = event || window.event
  oevent.stopPropagation()
}

function show_clustering_square_bin_otherbin(event) {
  let oevent = event || window.event
  if (document.all) {
    oevent.cancelBubble = true
  } else {
    oevent.stopPropagation()
  }
  if (document.getElementById('div_explain_clustering_square_bin_otherbin').style.display === 'none' || document.getElementById('div_explain_clustering_square_bin').style.display === '') {
    document.getElementById('div_explain_clustering_square_bin_otherbin').style.display = 'block'
  } else {
    document.getElementById('div_explain_clustering_square_bin_otherbin').style.display = 'none'
  }
}
document.onclick = function () {
  document.getElementById('div_explain_clustering_square_bin_otherbin').style.display = 'none'
}
document.getElementById('div_explain_clustering_square_bin_otherbin').onclick = function (event) {
  let oevent = event || window.event
  oevent.stopPropagation()
}
// Function to show clustering square bin
function show_clustering_square_bin50 (event) {
  let oevent = event || window.event
  if (document.all) {
      oevent.cancelBubble = true
  } else {
      oevent.stopPropagation()
  }
  if (document.getElementById('div_explain_clustering_square_bin50').style.display === 'none' || document.getElementById('div_explain_clustering_square_bin50').style.display === '') {
      document.getElementById('div_explain_clustering_square_bin50').style.display = 'block'
  } else {
      document.getElementById('div_explain_clustering_square_bin50').style.display = 'none'
  }
}
document.onclick = function () {
  document.getElementById('div_explain_clustering_square_bin50').style.display = 'none'
}
document.getElementById('div_explain_clustering_square_bin50').onclick = function (event) {
  let oevent = event || window.event
  oevent.stopPropagation()
}
// Function to plot cluster square bin
function cluster_ssdna() {
  var update = {
      'marker.opacity': 0,
  };
  Plotly.restyle(divCluster_bin20, update);    
  document.getElementById('range_cluster_bin20').value = 0;
}

// Function to plot cluster square bin ssDNA
function cluster() {
  var update = {
      'marker.opacity': 1,
  };
  Plotly.restyle(divCluster_bin20, update);
  document.getElementById('range_cluster_bin20').value = 1;
}

// Function to plot cluster square bin
function cluster_ssdna_bin50() {
var update = {
    'marker.opacity': 0,
};
Plotly.restyle(divCluster_bin50, update);    
document.getElementById('range_cluster_bin50').value = 0;
}

// Function to plot cluster square bin ssDNA
function cluster_bin50() {
var update = {
    'marker.opacity': 1,
};
Plotly.restyle(divCluster_bin50, update);
document.getElementById('range_cluster_bin50').value = 1;
}


 