var latitude = 	[-34.6037, 35.6764,  39.9042,   34.0549,   21.3099,   -33.9221, 51.5072, 40.7128, 19.4326, 38.7223, 32.6539, 29.5926, 48.8575,38.0792, 31.8974, 33.8688, 36.2972, 43.6532, 52.5200];
var longitude = [-58.3816, 139.6500, 116.4074, -118.2426 , -157.8581, 18.4231, 0.1276, -74.0060, -99.1332, -9.1393, 51.6660, 52.5836, 2.3514, 46.2887, 54.3569, 151.2093, 59.6067, -79.3832, 13.4050];
var cityName = ['Buenos Aires', 'Tokiyo', ' Beijing', 'Los Angeles' , 'Hono Lulu', 'Cape Town', 'London', 'New York', 'Mexico City', 'Losabon', 'Isfahan', 'Shiraz', 'Paris', 'Tabriz', 'Yazd', 'Sydney', 'Mashad','Toronto', 'Berlin'];



var cityIndex = Math.floor(Math.random() * 15)
var startLng = longitude[cityIndex];
var startLat = latitude[cityIndex];
updateTimes();
var map = L.map('map').setView([35.6975, 51.3556], 7);


L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
//e.latlng.lat,e.latlng.lng

setTimeout(function(){
map.flyTo([latitude[cityIndex], longitude[cityIndex]]);
document.getElementById("cityName").innerHTML=cityName[cityIndex]},1);

function onMapClick(e) {

	startLng = e.latlng.lng;
	startLat = e.latlng.lat;
	document.getElementById("cityName").innerHTML = '';
	
	
	var nominatimURL = 'https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat='+startLat+'&lon='+startLng;
fetch(nominatimURL)
   .then(response => response.json())
   .then(data => {
   var cityName = '';
   if(data.address.city==null)
	{
		if(data.address.town!=null)	cityName = data.address.town;
	}
	else
	{
		cityName = data.address.city;
	}
	
		document.getElementById("cityName").innerHTML = data.address.country + ' -> ' + cityName;
   });	
	
	
	
	updateTimes();
    //alert(e.latlng.lat + "-" + e.latlng.lng);
//	map.panTo(new L.LatLng(e.latlng.lat, e.latlng.lng));
//alert(e.latlng.lat + ' ' + e.latlng.lng)
map.flyTo([e.latlng.lat, e.latlng.lng])
}
const sunposarea_width = 330;
const sunposarea_height = 100;
const sunposarea_sunSize = 40;
const sunposarea_horizonY = sunposarea_height+3;// - sunSize / 2;
const sunposarea_leftMargin = 20;
const sunposarea_rightMargin = 20;
const sunposarea_topMargin = 5;
function updateTimes()
{
	var date = new Date(); // today
	var prayTimes = new PrayTimes();
	prayTimes.setMethod('Tehran');
	//alert('http://api.timezonedb.com/v2/get-time-zone?key=LI87WADLR5CM&format=json&by=position&lat='+startLat+'&lng='+startLng);
	var nominatimURL = 'https://api.timezonedb.com/v2/get-time-zone?key=LI87WADLR5CM&format=json&by=position&lat='+startLat+'&lng='+startLng;
	fetch(nominatimURL).then(response => response.json()).then(data => {
	var gmtOffset = data.gmtOffset/3600;
	var formatted = data.formatted;
	
	//var locationNameDetails = 'Region:' + data.regionName+'<br>City : '+data.cityName + '<br>Zone Name:'+ data.zoneName;
	//document.getElementById('locationNameDetails').innerHTML = locationNameDetails;

	var times = prayTimes.getTimes(date, [startLat, startLng], gmtOffset);
	var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha', 'Midnight'];
 	var list1 = ['Azan Sobh', 'TolooE Khorshid', 'Azan zohr', '!!', 'Azan Maghrib', '!!', 'Nime Shab'];

	var html = '<table id="timetable" style="font-size:22px;">';
	html += '<tr><th colspan="2">'+ formatted + '</th></tr>';
	for(var i in list)	{
		if(list1[i]!='!!')
		{
			html += '<tr><td nowrap>'+ list1[i] + '</td>';
			html += '<td align="center" >'+ times[list[i].toLowerCase()] + '</td></tr>';
		}
		if(list1[i]=='TolooE Khorshid') locationsunrise = times[list[i].toLowerCase()];
		if(list1[i]=='Azan Maghrib') locationsunset = times[list[i].toLowerCase()];

	}
	html += '<tr><td width="150"></td><td width="150"></td></tr>';
	html += '<tr><td colspan="2"><div id="sunContainer"><img id="sun" alt="Sun"></div></td></tr></table>';
	document.getElementById('oghatTimeTable').innerHTML = html;
	
    const container = document.getElementById('sunContainer');
    const sun = document.getElementById('sun');

    const currentime = new Date(formatted);
	var localtodayYear = currentime.getFullYear();
	var localtodayMonth = currentime.getMonth() + 1;
	var localtodayDay = currentime.getDate(); // Convert today to Persian
	locationsunrise_time = locationsunrise.split(':');
	locationsunset_time = locationsunset.split(':');

    const sunrise = new Date(localtodayYear,localtodayMonth-1,localtodayDay,locationsunrise_time[0],locationsunrise_time[1]);
    const sunset = new Date(localtodayYear,localtodayMonth-1,localtodayDay,locationsunset_time[0],locationsunset_time[1]);

	if (currentime >= sunrise && currentime <= sunset) {
		container.style.backgroundColor = 'lightblue';
	} else {
		container.style.backgroundColor = 'darkblue';
	}
		
	const curvePoints = 40;
        const curveData = [];
        const midPoint = Math.floor(curvePoints / 2);

        for (let i = 0; i <= curvePoints; i++) {
            const x = (i / curvePoints) * (sunposarea_width - sunposarea_leftMargin - sunposarea_rightMargin) + sunposarea_leftMargin;
            const t = i / curvePoints;

            const curveHeight = sunposarea_height - sunposarea_topMargin - sunposarea_sunSize / 2;
            const y = sunposarea_horizonY - Math.sin(Math.PI * t) * curveHeight;

            curveData.push({x, y});
        }

        curveData.forEach(point => {
            const dot = document.createElement('div');
            dot.className = 'sunLine';
            dot.style.left = `${point.x}px`;
            dot.style.top = `${point.y}px`;
            container.appendChild(dot);
        });		
		
		
        let sunX, sunY, imageSrc;

        if (currentime < sunrise) {
            sunX = 10;
            sunY = sunposarea_horizonY-25;
            imageSrc = '/images/sun-32.png';
        } else if (currentime > sunset) {
            sunX = sunposarea_width - sunposarea_sunSize - 10;
            sunY = sunposarea_horizonY-25;
            imageSrc = '/images/sun-32.png';
        } else {
            const dayDuration = sunset - sunrise;
            const timeSinceSunrise = currentime - sunrise;
            const progress = timeSinceSunrise / dayDuration;

            const curveIndex = Math.floor(progress * (curveData.length - 1));
            const position = curveData[curveIndex];

            sunX = position.x - sunposarea_sunSize / 2;
            sunY = position.y - sunposarea_sunSize / 2;
            imageSrc = '/images/sun-32-y.png';
        }

        sun.src = imageSrc;
        sun.style.left = `${sunX}px`;
        sun.style.top = `${sunY}px`;

        if (sunY + sunposarea_sunSize > sunposarea_height) {
            const overlap = sunY + sunposarea_sunSize - sunposarea_height;
            sun.style.clipPath = `inset(0 0 ${overlap}px 0)`;
        } else {
            sun.style.clipPath = 'inset(0 0 0 0)';
        }
		
	
   })
   .catch((error) => {
  alert(error);
});
		
}
map.on('click', onMapClick);