// countries.js
// July, 2023
// RJM Programming
// Help out countries.html and countries.php
 var pos3=0, pos4=0, tdid='';

 
 function andlaterstill() {
  if (tdid != '') {
    document.getElementById(tdid).innerHTML=document.getElementById(tdid).innerHTML.substring(0,1);
  } else if (document.getElementById('mytable').innerHTML.indexOf(clonedatatwo) != '') {
    document.getElementById('myh1').innerHTML=document.getElementById('myh1').innerHTML.split('</table>')[0] + '</table>';
  } 
  if (document.getElementsByTagName('div')[0].innerHTML.indexOf(clonedatatwo) != -1) {
    document.getElementsByTagName('div')[0].innerHTML=document.getElementsByTagName('div')[0].innerHTML.replace(clonedatatwo,'');
  } else if (document.getElementsByTagName('div')[0].innerHTML.indexOf(clonedatatwo.replace('dragging','')) != -1) {
    document.getElementsByTagName('div')[0].innerHTML=document.getElementsByTagName('div')[0].innerHTML.replace(clonedatatwo.replace('dragging',''),'');
  } else if (document.body.innerHTML.split('<table')[0].indexOf(clonedatatwo.replace('dragging','')) != -1) {
    document.body.innerHTML=document.body.innerHTML.replace(document.body.innerHTML.split('<table')[0], document.body.innerHTML.split('<table')[0].replace(clonedatatwo.replace('dragging',''),''));
  } else if (document.body.innerHTML.split('<table')[0].indexOf(clonedatatwo) != -1) {
    document.body.innerHTML=document.body.innerHTML.replace(document.body.innerHTML.split('<table')[0], document.body.innerHTML.split('<table')[0].replace(clonedatatwo,''));
  }
  tdid='';
 }
 
 function andqlater() {
  //alert('HeRe');
  var squares=document.getElementsByTagName('svg');
  
  for (var ii=1; ii<=9; ii++) {
    if (squares[eval(-1 + ii)].innerHTML.indexOf('<') != -1) {
      tdid='' + squares[eval(-1 + ii)].id;
    }
  }
  console.log('tdid=' + tdid);
  setTimeout(andlaterstill, 100);
 }

  window.addEventListener("DOMContentLoaded", () => {
const source = document.querySelector("#mg");
console.log('source.id=' + source.id);
source.addEventListener("dragstart", (ev) => {
  console.log("dragStart");
  // Change the source element's background color
  // to show that drag has started
  ev.currentTarget.classList.add("dragging");
  // Clear the drag data cache (for all formats/types)
  ev.dataTransfer.clearData();
  // Set the drag's format and data.
  // Use the event target's id for the data
  ev.dataTransfer.setData("text/plain", ev.target.id);
  //ev.dataTransfer.setData("text/html", ev.target.outerHTML);
});
source.addEventListener("dragend", (ev) =>
  ev.target.classList.remove("dragging")
);

const target = document.querySelector("#myh1");
console.log('target.id=' + target.id);
target.addEventListener("dragover", (ev) => {
  console.log("dragOver");
  ev.preventDefault();
});
target.addEventListener("drop", (ev) => {
  console.log("Drop");
  ev.preventDefault();
  // Get the data, which is the id of the source element
  const data = ev.dataTransfer.getData("text");
  const source = document.getElementById(data);
   
       console.log('' + ev.target.id);
       if (!document.getElementById('callback')) { 
       if (('' + ev.target.id).substring(0,2) == 'im') {
         score+=eval(ev.target.innerHTML.substring(0,1));
       }
       } else if (document.getElementById('callback')) {
         secs++;
         if (('' + ev.target.getAttribute('data-answer')) == ('' + document.getElementById('mg').getAttribute('data-answer'))) {
           score++;
           document.getElementById('score').innerHTML='Score: ' + score + '/' + secs + '';
         } else {
           document.getElementById('score').innerHTML='Score: ' + score + '/' + secs + '';
           alert('Correct answer was ' + document.getElementById('mg').getAttribute('data-answer'));
         }
         location.href=document.getElementById('callback').value + '?score=' + score + '&secs=' + secs;
       }
       if (1 == 2) {
         //clonedatatwo=document.getElementById('source').outerHTML;
         //document.getElementById('mytable').innerHTML=document.getElementById('mytable').innerHTML.replace(clonedatatwo, '');
         //ev.target.innerHTML=ev.target.innerHTML.substring(0,1) + clonedatatwo;
       } else if ((9 == 9 || ('' + ev.target.id).substring(0,2) == 'im')) { 
         //clonedatatwo=document.getElementById('source').outerHTML;
         andqlater(); 
         //document.getElementById('mytable').innerHTML=document.getElementById('mytable').innerHTML.replace(clonedatatwo, '');
         //ev.target.innerHTML=ev.target.innerHTML.substring(0,1) + clonedatatwo;
         //document.getElementById('myh1').appendChild(source);
         //if (('' + ev.target.id).substring(0,2) != 'im') {
         //document.getElementById('myh1').insertAdjacentHTML('beforeend', clonedatatwo);
         //} else {
         //ev.target.insertAdjacentHTML('beforeend', clonedatatwo);
         //}
       } else {      
         ev.target.appendChild(source);
       }
     
       if (ev.touches) {
       if (ev.touches[0].pageX) {
       pos3 = ev.touches[0].pageX;
       pos4 = ev.touches[0].pageY;
       } else {
       pos3 = ev.touches[0].clientX;
       pos4 = ev.touches[0].clientY;
       }
       console.log('pos3 = ' + pos3 + ',pos4 = ' + pos4);
       } else if (ev.clientX || ev.clientY) {
        pos3 = ev.clientX;
        pos4 = ev.clientY;
       console.log('pos3 = ' + pos3 + ' ,pos4 = ' + pos4);
       } else {
        pos3 = ev.pageX;
        pos4 = ev.pageY;
       console.log('pos3 = ' + pos3 + ', pos4 = ' + pos4);
       }

});

//const reset = document.querySelector("#reset");
//reset.addEventListener("click", () => document.location.reload());

});


 function dragorig() {
   if (document.getElementById('mg')) {
     document.getElementById('mg').draggable='true';
   } else {
     setTimeout(dragorig, 5000);   
   }
 }
 
// setTimeout(dragorig, 5000);