// countries.js
// July, 2023
// RJM Programming
// Help out countries.html and countries.php
 var pos3=0, pos4=0, tdid='', poligono, punto, coone='', prectis, dragdt=null, dropdt=null, drdpcnt=0;
 var addtable='<table border=3 style=width:80%;height:45px; id=tprogress><tr><th title=Wikipedia style="background:url(//img.icons8.com/?size=1x&id=4dfUDoIFxcGQ);background-repeat:no-repeat;background-size:contain;background-color:lightgreen;">&nbsp;</th><td id=th1>&nbsp;</td><td id=th2>&nbsp;</td><td id=th3>&nbsp;</td><td id=th4>&nbsp;</td><td id=th5>&nbsp;</td><td id=th6>&nbsp;</td><td id=th7>&nbsp;</td><td id=th8>&nbsp;</td><td id=th9>&nbsp;</td><td title="Google Maps" id=th10 style="background:url(//img.icons8.com/?size=512&amp;id=xt0xIC1nYCRm);background-repeat:no-repeat;background-size:contain;">&nbsp;</td><td id=th11>&nbsp;</td><td id=th12>&nbsp;</td><td id=th13>&nbsp;</td><td id=th14>&nbsp;</td><td id=th15>&nbsp;</td><td id=th16>&nbsp;</td><td id=th17>&nbsp;</td><td id=th18>&nbsp;</td><td id=th19>&nbsp;</td><td title="Google Earth" id=th20 style="background:url(//img.icons8.com/?size=1x&id=DDBDVu2Cg7jb);background-repeat:no-repeat;background-size:contain;">&nbsp;</td></tr></table>';

// var poligono = [[2,9],[8,6],[12,10],[15,2],[10,4],[5,1]];
// var punto = [6, 5];
  
 function pointInPolygon(polygon, point) { // thanks to https://community.appinventor.mit.edu/t/geofence-check-if-a-point-is-inside-a-polygon-javascript-map/57091
    var odd = false;
    for (var i = 0, j = polygon.length - 1; i < polygon.length; i++) {
        if (((polygon[i][1] > point[1]) !== (polygon[j][1] > point[1])) 
            && (point[0] < ((polygon[j][0] - polygon[i][0]) * (point[1] - polygon[i][1]) / (polygon[j][1] - polygon[i][1]) + polygon[i][0]))) {
            odd = !odd;
        }
        j = i;
    }
    return odd;
 }

 function andlaterstill() {
  if (9 == 6) { // temporary
  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 getprectis() {
    if (window.opener) {
       if (window.opener.document.getElementsByTagName('body')[0]) {
           return window.opener.document.body.getBoundingClientRect();
       } else if (window.parent) {
         if (parent.document.getElementsByTagName('body')[0]) {
           return parent.document.body.getBoundingClientRect();
         }
       }
    } else if (window.parent) {
         if (parent.document.getElementsByTagName('body')[0]) {
           return parent.document.body.getBoundingClientRect();
         }
    }
    return null;
 }

 
 function wod(ididea) {
    if (window.opener) {
       if (window.opener.document.getElementsByTagName(ididea)[0]) {
           return window.opener.document.getElementsByTagName(ididea)[0];
       } else if (window.parent) {
         if (parent.document.getElementsByTagName(ididea)[0]) {
           return parent.document.getElementsByTagName(ididea)[0];
         }
       }
    } else if (window.parent) {
         if (parent.document.getElementsByTagName(ididea)[0]) {
           return parent.document.getElementsByTagName(ididea)[0];
         }
    }
    return null;
 }
 
 function ccit() {
     var divs, esot=[], bodyois=null;
     if (window.opener) {
       if (window.opener.document.getElementsByTagName('body')[0]) {
          bodyois=window.opener.document.getElementsByTagName('body')[0];
          divs=window.opener.document.getElementsByTagName('div');
       } else if (window.parent) {
         if (parent.document.getElementsByTagName('body')[0]) {
           bodyois=parent.document.getElementsByTagName('body')[0];
           divs=parent.document.getElementsByTagName('div');
         }
       }
    } else if (window.parent) {
         if (parent.document.getElementsByTagName('body')[0]) {
           bodyois=parent.document.getElementsByTagName('body')[0];
           divs=parent.document.getElementsByTagName('div');
         }
    }
  
  
  for (var ii=0; ii<divs.length; ii++) {
      if (divs[ii].outerHTML.split('>')[0].indexOf(' title=' + String.fromCharCode(34) + coone) != -1) {
       divs[ii].innerHTML=divs[ii].innerHTML.replace('z-index:24;', 'z-index:123;').replace('lime;', 'rgba(200,200,200,0.3);');
       divs[ii].name='d' + tdid.replace(/\ /g, '_');
      }    
  }
}

 function cntdrdp() {
   drdpcnt++;
   if (parent.document.getElementById('th' + drdpcnt)) {
      parent.document.getElementById('th' + drdpcnt).style.backgroundColor='lightgreen';
      setTimeout(cntdrdp, 1000);
   }
 }
 
 function andqlater() {
  //alert('HeRe');
  tdid='';
  var ppig='[]', coo='', coos=[], ip=0;
  var squares; //=window.opener.document.getElementsByTagName('area');
  
    if (window.opener) {
       if (window.opener.document.getElementsByTagName('body')[0]) {
          squares=window.opener.document.getElementsByTagName('area');
       } else if (window.parent) {
         if (parent.document.getElementsByTagName('body')[0]) {
           squares=parent.document.getElementsByTagName('area');
         }
       }
    } else if (window.parent) {
         if (parent.document.getElementsByTagName('body')[0]) {
           squares=parent.document.getElementsByTagName('area');
         }
    }
  
  
  
  for (var ii=1; ii<=squares.length; ii++) {
     ppig='[]';
     coos=squares[eval(-1 + ii)].coords.replace(/\ /g,',').split(',');
     ppig='[[' + coos[0] + ',' + coos[1] + ']]';
     for (ip=2; ip<coos.length; ip+=2) {
        ppig=ppig.replace(']]', '],[' + coos[ip] + ',' + coos[eval(1 + ip)] + ']]');
        poligono=eval(ppig);
        //alert('' + punto);
        if (pointInPolygon(poligono, punto)) { 
          tdid='' + squares[eval(-1 + ii)].getAttribute('data-cname'); 
          coone=('' + squares[eval(-1 + ii)].coords).split(' ')[0];
          setTimeout(ccit, 2000);
          console.log('tdid=' + tdid + ' and coone=' + coone);  
    if (window.opener) {
       if (window.opener.document.getElementsByTagName('body')[0]) {
          window.focus();
          if (window.opener.document.URL.indexOf('/regions.') != -1) {
          document.getElementById('myh1').innerHTML='<iframe style="width:100%;height:800px;" src="/PHP/tz_places.php?place=&latitude=' + encodeURIComponent('' + window.opener.derivethislat(pos4)) + '&longitude=' + encodeURIComponent('' + window.opener.derivethislong(pos3)) + '&ntztontz=y' + '"></iframe>';
          } else {
          document.getElementById('myh1').innerHTML='<iframe style="width:100%;height:800px;" src="//wikipedia.org/wiki/' + encodeURIComponent(tdid.replace(/\ /g,'_')) + '"></iframe>'; 
          }
          if (eval(dropdt - dragdt) >= 10000) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { 
           window.open('//maps.google.com/maps?z=15&t=m&q=loc:' + window.opener.derivethislat(pos4) + ',' + ('+' + window.opener.derivethislong(pos3)).replace('+-','-'),'_blank'); //,'top=210,left=' + eval(-380 + screen.width) + ',width=350,height=570');
} else {
           window.open('//maps.google.com/maps?z=15&t=m&q=loc:' + window.opener.derivethislat(pos4) + ',' + ('+' + window.opener.derivethislong(pos3)).replace('+-','-'),'_blank','top=210,left=' + eval(-380 + screen.width) + ',width=350,height=570');
}
          }
          if (eval(dropdt - dragdt) >= 20000) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { 
           window.open('//earth.google.com/web/search/' + window.opener.derivethislat(pos4) + ',' + ('+' + window.opener.derivethislong(pos3)).replace('+-','-'),'_blank'); //,'top=240,left=' + eval(-410 + screen.width) + ',width=350,height=540');
} else {
           window.open('//earth.google.com/web/search/' + window.opener.derivethislat(pos4) + ',' + ('+' + window.opener.derivethislong(pos3)).replace('+-','-'),'_blank','top=240,left=' + eval(-410 + screen.width) + ',width=350,height=540');
}
          }
       } else if (window.parent) {
         if (parent.document.getElementsByTagName('body')[0]) {
           if (parent.document.URL.indexOf('/regions.') != -1) {
           window.open('/PHP/tz_places.php?place=&latitude=' + encodeURIComponent('' + parent.derivethislat(pos4)) + '&longitude=' + encodeURIComponent('' + parent.derivethislong(pos3)) + '&ntztontz=y','_blank','top=180,left=' + eval(-350 + screen.width) + ',width=350,height=600');
           } else {
           window.open('//wikipedia.org/wiki/' + encodeURIComponent(tdid.replace(/\ /g,'_')),'_blank','top=180,left=' + eval(-350 + screen.width) + ',width=350,height=600');
           }
          if (eval(dropdt - dragdt) >= 5000) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { 
           window.open('//maps.google.com/maps?z=15&t=m&q=loc:' + parent.derivethislat(pos4) + ',' + ('+' + parent.derivethislong(pos3)).replace('+-','-'),'_blank'); //,'top=210,left=' + eval(-380 + screen.width) + ',width=350,height=570');
} else {
           window.open('//maps.google.com/maps?z=15&t=m&q=loc:' + parent.derivethislat(pos4) + ',' + ('+' + parent.derivethislong(pos3)).replace('+-','-'),'_blank','top=210,left=' + eval(-380 + screen.width) + ',width=350,height=570');
}
          }
          if (eval(dropdt - dragdt) >= 20000) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { 
           window.open('//earth.google.com/web/search/' + parent.derivethislat(pos4) + ',' + ('+' + parent.derivethislong(pos3)).replace('+-','-'),'_blank'); //,'top=240,left=' + eval(-410 + screen.width) + ',width=350,height=540');
} else {
           window.open('//earth.google.com/web/search/' + parent.derivethislat(pos4) + ',' + ('+' + parent.derivethislong(pos3)).replace('+-','-'),'_blank','top=240,left=' + eval(-410 + screen.width) + ',width=350,height=540');
}
          }
         }
       }
    } else if (window.parent) {
         if (parent.document.getElementsByTagName('body')[0]) {
           if (parent.document.URL.indexOf('/regions.') != -1) {
           window.open('/PHP/tz_places.php?place=&latitude=' + encodeURIComponent('' + parent.derivethislat(pos4)) + '&longitude=' + encodeURIComponent('' + parent.derivethislong(pos3)) + '&ntztontz=y','_blank','top=180,left=' + eval(-350 + screen.width) + ',width=350,height=600');
           } else {
           window.open('//wikipedia.org/wiki/' + encodeURIComponent(tdid.replace(/\ /g,'_')),'_blank','top=180,left=' + eval(-350 + screen.width) + ',width=350,height=600');
           }
          if (eval(dropdt - dragdt) >= 10000) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { 
           window.open('//maps.google.com/maps?z=15&t=m&q=loc:' + parent.derivethislat(pos4) + ',' + ('+' + parent.derivethislong(pos3)).replace('+-','-'),'_blank'); //,'top=210,left=' + eval(-380 + screen.width) + ',width=350,height=570');
} else {
           window.open('//maps.google.com/maps?z=15&t=m&q=loc:' + parent.derivethislat(pos4) + ',' + ('+' + parent.derivethislong(pos3)).replace('+-','-'),'_blank','top=210,left=' + eval(-380 + screen.width) + ',width=350,height=570');
}
          }
          if (eval(dropdt - dragdt) >= 20000) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { 
           window.open('//earth.google.com/web/search/' + parent.derivethislat(pos4) + ',' + ('+' + parent.derivethislong(pos3)).replace('+-','-'),'_blank'); //,'top=240,left=' + eval(-410 + screen.width) + ',width=350,height=540');
} else {
           window.open('//earth.google.com/web/search/' + parent.derivethislat(pos4) + ',' + ('+' + parent.derivethislong(pos3)).replace('+-','-'),'_blank','top=240,left=' + eval(-410 + screen.width) + ',width=350,height=540');
}
          }
         }
    }
          return tdid; 
        }
     }
  }
  console.log('tdid=' + tdid);
  //setTimeout(andlaterstill, 100);
  return '';
 }

  window.addEventListener("DOMContentLoaded", () => {
const source = document.querySelector("#mg");
if (source.title.indexOf('ong drag') == -1) {
   source.title+=' ... long drag (eg. more than 10 seconds) also opens a Google Maps webpage ... very long drag (eg. more than 20 seconds) also opens a Google Earth webpage';
}
console.log('source.id=' + source.id);
//if (!navigator.userAgent.match(/iPad/i)) {
source.addEventListener("dragstart", (ev) => {
  dragdt=(new Date());
    if (window.opener) {
       if (window.opener.document.getElementsByTagName('body')[0]) {
  if (window.opener.document.getElementById('iftr')) {
    window.opener.document.getElementById('iftr').scrolling='yes';
  }
  if (window.opener.document.getElementById('ifxtr')) {
    window.opener.document.getElementById('ifxtr').scrolling='yes';
  }
  window.opener.document.getElementById('myh4').innerHTML=addtable;
       } else if (window.parent) {
         if (parent.document.getElementsByTagName('body')[0]) {
  if (parent.document.getElementById('iftr')) {
    parent.document.getElementById('iftr').scrolling='yes';
  }
  if (parent.document.getElementById('ifxtr')) {
    parent.document.getElementById('ifxtr').scrolling='yes';
  }
  parent.document.getElementById('myh4').innerHTML=addtable;
         }
       }
    } else if (window.parent) {
         if (parent.document.getElementsByTagName('body')[0]) {
  if (parent.document.getElementById('iftr')) {
    parent.document.getElementById('iftr').scrolling='yes';
  }
  if (parent.document.getElementById('ifxtr')) {
    parent.document.getElementById('ifxtr').scrolling='yes';
  }
  parent.document.getElementById('myh4').innerHTML=addtable;
         }
    }
    drdpcnt=0;
    setTimeout(cntdrdp, 1000);
  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 = wod('body'); //window.opener.document.getElementsByTagName('body')[0];
target.id='usemap';
//if (!navigator.userAgent.match(/iPad/i)) {
console.log('target.id=' + target.id);
target.addEventListener("dragover", (ev) => {
  console.log("dragOver");
  ev.preventDefault();
});
target.addEventListener("drop", (ev) => {
  console.log("Drop");
  dropdt=(new Date());
    if (window.opener) {
       if (window.opener.document.getElementsByTagName('body')[0]) {
  window.opener.document.getElementById('myh4').innerHTML='';
       } else if (window.parent) {
         if (parent.document.getElementsByTagName('body')[0]) {
  parent.document.getElementById('myh4').innerHTML='';
         }
       }
    } else if (window.parent) {
         if (parent.document.getElementsByTagName('body')[0]) {
  parent.document.getElementById('myh4').innerHTML='';
         }
    }
  ev.preventDefault();
  // Get the data, which is the id of the source element
  const data = ev.dataTransfer.getData("text");
  const source = document.getElementById(data);
  
       var prectis=getprectis();
   
       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 (1 == 1) { //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);
       }
       
       prectis=getprectis();
     
       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);
       }
       //alert('[' + pos3 + ',' + pos4 + ']');
       var wop=0;
    if (window.opener) {
       if (window.opener.document.getElementsByTagName('body')[0]) {
          window.opener.derivethislong(pos3);
          window.opener.derivethislat(pos4);
          wop=window.opener.getzoom();
       } else if (window.parent) {
         if (parent.document.getElementsByTagName('body')[0]) {
           parent.derivethislong(pos3);
           parent.derivethislat(pos4);
           wop=parent.getzoom();
         }
       }
    } else if (window.parent) {
         if (parent.document.getElementsByTagName('body')[0]) {
           parent.derivethislong(pos3);
           parent.derivethislat(pos4);
           wop=parent.getzoom();
         }
    }
    
    //pos3+=eval(wop * prectis.left);
    //pos4+=eval(wop * prectis.top);
      var xwop='1';
    
       console.log('prectis.left/top=' + prectis.left + '/' + prectis.top);
    
       //punto=eval('[' + eval(eval('' + pos3) / eval('' + wop)) + ',' + eval(eval('' + pos4) / eval('' + wop)) + ']');

       punto=eval('[' + eval(eval(-prectis.left * eval('' + wop) + eval('' + pos3)) / eval('' + wop)) + ',' + eval(eval(-prectis.top * eval('' + wop) + eval('' + pos4)) / eval('' + wop)) + ']');

       console.log(punto);
       andqlater();

});
//}

//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);