/* Format page styles */
body {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1;
}
button {
    background-color: #ddd;
    border: 1px solid #bbb;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    padding: 3px 5px;
}
button:hover {
    background-color: #eee;
}
button:focus,
button:active {
    outline: 2px solid #1E88E5;
}
code {
    background-color: #eee;
    padding: 2px 3px;
}
p {
    line-height: 1.5rem;
}
.container {
    margin: 10px auto;
    width: 80vw;
}
@media (min-width: 1200px) {
    .container {
        width: 1000px;
    }
}
.alert {
    margin-bottom: 20px;
    padding: 10px;
}
.alert.info {
    background-color: #80DEEA;
}
.alert.error {
    background-color: #f00;
    color: #fff;
}
/* End format page styles */

let alertPlaceholder = document.getElementById('alertPlaceholder');
let geolocationResult = document.getElementById('geolocationResult');
if('geolocation' in navigator) {
    // if geolocation is supported.
    let alertGeolocation = '<div class="alert info">Geolocation is available.<br>เบราว์เซอร์นี้รองรับ Geolocation.</div>';
    alertPlaceholder.insertAdjacentHTML('beforeend', alertGeolocation);

    // request for location.
    requestLocation();
} else {
    // if geolocation is NOT supported.
    let alertGeolocation = '<div class="alert error">Geolocation is NOT available.<br>เบราว์เซอร์นี้ไม่รองรับ Geolocation.</div>';
    alertPlaceholder.insertAdjacentHTML('beforeend', alertGeolocation);
}

// listen on click request location button.
document.getElementById('request-location').addEventListener('click', (e) => {
    e.preventDefault();
    requestLocation();
});


/**
 * Request location
 *
 * @link https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition `getCurrentPosition()` parameters.
 */
function requestLocation() {
    let options = {
        enableHighAccuracy: true
    };
    navigator.geolocation.getCurrentPosition(showPosition, showError, options);
}


/**
 * Show position
 */
function showPosition(position) {
    let coords = position.coords;

    // clear previous result.
    alertPlaceholder.innerHTML = '';
    geolocationResult.innerHTML = '';

    console.log('allowed.', position);
    geolocationResult.insertAdjacentHTML('beforeend', '<p>You have given permission to access the location.<br>คุณได้อนุญาตให้เข้าถึงตำแหน่งแล้ว.</p>');

    let coordsHTML = '<p>';
    for (const property in coords) {
        coordsHTML += '<code>position.coords.' + property + '</code>: ';
        coordsHTML += coords[property];
        coordsHTML += '<br>';
    }
    coordsHTML += '</p>';
    coordsHTML += '<p><a href="https://www.google.com/maps/search/?api=1&query=' + coords.latitude + '%2c' + coords.longitude + '" target="_blank" onclick="window.open(\'https://www.google.com/maps/search/?api=1&query=' + coords.latitude + '%2c' + coords.longitude + '\'); return false;">Search on Google Maps. ค้นหาบน Google Maps.</a><br>Please shift+click on the link above to prevent &quot;Blocked page&quot; by Google.<br>โปรดกด Shift แล้วคลิกที่ลิ้งค์ด้านบนเพื่อป้องกันการบล็อคโดย Google.</p>';
    geolocationResult.insertAdjacentHTML('beforeend', coordsHTML);
    
    geolocationResult.insertAdjacentHTML('beforeend', '<p><code>position.timestamp</code>: ' + position.timestamp + '</p>');
}


/**
 * Show errors
 */
function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      alertPlaceholder.insertAdjacentHTML('beforeend', '<div class="alert error">User denied the request for Geolocation. ผู้ใช้ปฏิเสธคำขอ Geolocation.</div>');
      break;
    case error.POSITION_UNAVAILABLE:
      alertPlaceholder.insertAdjacentHTML('beforeend', '<div class="alert error">Location information is unavailable. ข้อมูลตำแหน่งไม่สามารถใช้ได้.</div>');
      break;
    case error.TIMEOUT:
      alertPlaceholder.insertAdjacentHTML('beforeend', '<div class="alert error">The request to get user location timed out. คำขอรับตำแหน่งของผู้ใช้หมดเวลา.</div>');
      break;
    case error.UNKNOWN_ERROR:
      
      alertPlaceholder.insertAdjacentHTML('beforeend', '<div class="alert error">An unknown error occurred. เกิดข้อผิดพลาดที่ไม่รู้จัก.</div>');
      break;
  }
}