<div id="app">
	<label>Latitude <input v-model="latitude"></label>
	<label>Longitude <input v-model="longitude"></label>
	<br /><br />
	<label>Time Zone <select v-model="tz">
		<option value="-12">(GMT -12:00) Eniwetok, Kwajalein</option>
		<option value="-11">(GMT -11:00) Midway Island, Samoa</option>
		<option value="-10">(GMT -10:00) Hawaii</option>
		<option value="-9.5">(GMT -9:30) Taiohae</option>
		<option value="-9">(GMT -9:00) Alaska</option>
		<option value="-8">(GMT -8:00) Pacific Time (US &amp; Canada)</option>
		<option value="-7">(GMT -7:00) Mountain Time (US &amp; Canada)</option>
		<option value="-6">(GMT -6:00) Central Time (US &amp; Canada), Mexico City</option>
		<option value="-5">(GMT -5:00) Eastern Time (US &amp; Canada), Bogota, Lima</option>
		<option value="-4.5">(GMT -4:30) Caracas</option>
		<option value="-4">(GMT -4:00) Atlantic Time (Canada), Caracas, La Paz</option>
		<option value="-3.5">(GMT -3:30) Newfoundland</option>
		<option value="-3">(GMT -3:00) Brazil, Buenos Aires, Georgetown</option>
		<option value="-2">(GMT -2:00) Mid-Atlantic</option>
		<option value="-1">(GMT -1:00) Azores, Cape Verde Islands</option>
		<option value="0">(GMT) Western Europe Time, London, Lisbon, Casablanca</option>
		<option value="1">(GMT +1:00) Brussels, Copenhagen, Madrid, Paris</option>
		<option value="2">(GMT +2:00) Kaliningrad, South Africa</option>
		<option value="3">(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg</option>
		<option value="3.5">(GMT +3:30) Tehran</option>
		<option value="4">(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi</option>
		<option value="4.5">(GMT +4:30) Kabul</option>
		<option value="5">(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent</option>
		<option value="5.5">(GMT +5:30) Bombay, Calcutta, Madras, New Delhi</option>
		<option value="5.75">(GMT +5:45) Kathmandu, Pokhara</option>
		<option value="6">(GMT +6:00) Almaty, Dhaka, Colombo</option>
		<option value="6.5">(GMT +6:30) Yangon, Mandalay</option>
		<option value="7">(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
		<option value="8">(GMT +8:00) Beijing, Perth, Singapore, Hong Kong</option>
		<option value="8.75">(GMT +8:45) Eucla</option>
		<option value="9">(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk</option>
		<option value="9">(GMT +9:30) Adelaide, Darwin</option>
		<option value="10">(GMT +10:00) Eastern Australia, Guam, Vladivostok</option>
		<option value="10">(GMT +10:30) Lord Howe Island</option>
		<option value="11">(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
		<option value="11.5">(GMT +11:30) Norfolk Island</option>
		<option value="12">(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
		<option value="12.75">(GMT +12:45) Chatham Islands</option>
		<option value="13">(GMT +13:00) Apia, Nukualofa</option>
		<option value="14">(GMT +14:00) Line Islands, Tokelau</option>
	</select>
	<br /><br />
	<label>Sunrise <input v-model="sunrise"></label>
	<label>Sunset <input v-model="sunset"></label>
</div>

new Vue({
  el: "#app",
  data() {
    return {
			latitude: null,
			longitude: null,
			tz: null,
			sunriseHour: null,
			sunriseMin: null,
			sunsetHour: null,
			sunsetMin: null
    };
  },
	methods: {
		sunTimes: function(lat, lng, tz) {
			var d = new Date();
			var radians = Math.PI / 180.0;
			var degrees = 180.0 / Math.PI;

			var a = Math.floor((14 - (d.getMonth() + 1.0)) / 12)
			var y = d.getFullYear() + 4800 - a;
			var m = (d.getMonth() + 1) + 12 * a - 3;
			var j_day = d.getDate() + Math.floor((153 * m + 2)/5) + 365 * y + Math.floor(y/4) - Math.floor(y/100) + Math.floor(y/400) - 32045;
			var n_star = j_day - 2451545.0009 - lng / 360.0;
			var n = Math.floor(n_star + 0.5);
			var solar_noon = 2451545.0009 - lng / 360.0 + n;
			var M = 356.0470 + 0.9856002585 * n;
			var C = 1.9148 * Math.sin( M * radians ) + 0.02 * Math.sin( 2 * M * radians ) + 0.0003 * Math.sin( 3 * M * radians );
			var L = ( M + 102.9372 + C + 180 ) % 360;
			var j_transit = solar_noon + 0.0053 * Math.sin( M * radians) - 0.0069 * Math.sin( 2 * L * radians );
			var D = Math.asin( Math.sin( L * radians ) * Math.sin( 23.45 * radians ) ) * degrees;
			var cos_omega = ( Math.sin(-0.83 * radians) - Math.sin( lat * radians ) * Math.sin( D * radians ) ) / ( Math.cos( lat * radians ) * Math.cos( D * radians ) );

			// sun never rises
			if( cos_omega > 1)
				return [null, -1];

			// sun never sets
			if( cos_omega < -1 )
				return [-1, null];

			// get Julian dates of sunrise/sunset
			var omega = Math.acos( cos_omega ) * degrees;
			var j_set = j_transit + omega / 360.0;
			var j_rise = j_transit - omega / 360.0;

			/*
				* get sunrise and sunset times in UTC
				* Check section "Finding Julian date given Julian day number and time of
				*  day" on wikipedia for where the extra "+ 12" comes from.
				*/
			var utc_time_set = 24 * (j_set - j_day) + 12;
			var utc_time_rise = 24 * (j_rise - j_day) + 12;
			var tz_offset = tz === undefined ? -1 * d.getTimezoneOffset() / 60 : tz;
			var local_rise = (utc_time_rise + tz_offset) % 24;
			var local_set = (utc_time_set + tz_offset) % 24;
			return [local_rise, local_set];
		},
		geolocation: function() {
      if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(this.storeLatLong);
			} else {
				console.log("Geolocation is not supported by this browser.");
			}
    },
		storeLatLong: function(position) {
			this.latitude = position.coords.latitude;
			this.longitude = position.coords.longitude;
			// An offset is not the same as a timezone, but YOLO
			let offset = -(new Date().getTimezoneOffset() / 60);
			this.tz = offset;
			let suntimes = this.sunTimes(this.latitude,this.longitude,this.tz);
			// This sunrise / sunset times come out of sunTimes() as a number.  We need to convert it to a time.
			this.sunriseHour = Math.floor(suntimes[0]);
			this.sunriseMin = (suntimes[0] - Math.floor(suntimes[0])) * 60;
			this.sunsetHour = Math.floor(suntimes[1]);
			this.sunsetMin = (suntimes[1] - Math.floor(suntimes[1])) * 60;
		},
		
	},
  mounted() {
    this.geolocation();
  },
  computed: {
    sunrise() {
			// Uses sunriseHour and sunriseMin to create a time
			if(this.sunriseHour == null)
				return null;
			else
      	return this.sunriseHour + ":" + this.sunriseMin;
    },
    sunset() {
			// Uses sunsetHour and sunsetMin to create a time
			if(this.sunsetHour == null)
				return null;
			else
      	return this.sunsetHour + ":" + this.sunsetMin;
    }
  }
});