var dmlmyskinclockWrapperElement = document.getElementById("dml_myskinclock_wrapper"); var myskinclock_banner_cta_active = true; var myskinclockCSSid = 'myskinclockStyleSheet'; myskinclockLocation = {}; myskinclockLocation.minutesOffset = "NaN"; let sessionTimeString = (new Date()).getTime(); var myskinclock_pagehead = document.getElementsByTagName('head')[0]; var myskinclock_pagelink = document.createElement('link'); myskinclock_pagelink.id = myskinclockCSSid; myskinclock_pagelink.rel = 'stylesheet'; myskinclock_pagelink.type = 'text/css'; myskinclock_pagelink.href = 'https://myskinclock.herokuapp.com/stylesheets/style.min.css?'+sessionTimeString; myskinclock_pagelink.media = 'all'; myskinclock_pagehead.appendChild(myskinclock_pagelink); window.myskinclock_isEmbed = typeof window.myskinclock_isEmbed != "undefined" ? window.myskinclock_isEmbed : true; window.myskinclock_maxwidth = typeof window.myskinclock_maxwidth != "undefined" ? window.myskinclock_maxwidth : "100%"; window.myskinclock_maxheight = typeof window.myskinclock_maxheight != "undefined" ? window.myskinclock_maxheight : "auto"; window.myskinclock_bannerwidth= typeof window.myskinclock_bannerwidth != "undefined" ? window.myskinclock_bannerwidth : "1200px"; window.myskinclock_is12hclock = typeof window.myskinclock_is12hclock != "undefined" ? window.myskinclock_is12hclock : true; window.myskinclock_newWindowLinks = typeof window.myskinclock_newWindowLinks != "undefined" ? window.myskinclock_newWindowLinks : false; window.myskinclock_languageCode = typeof window.myskinclock_languageCode != "undefined" ? window.myskinclock_languageCode : ""; window.myskinclock_links = typeof window.myskinclock_links != "undefined" ? window.myskinclock_links : { product1: "https://www.dermalogica.com/prisma-protect-spf30/243,default,pd.html", product2: "https://www.dermalogica.com/sound-sleep-cocoon/236,default,pd.html", product3: "https://www.dermalogica.com/multi-active-toner/7,default,pd.html", product4: "https://www.dermalogica.com/barrier-defense-booster/235,default,pd.html" }; window.myskinclockAppNotBanner = false; function getEmbedHtmlData(url, callback){ let request = new XMLHttpRequest(); request.open('GET', url, true); request.onload = function() { if (request.status >= 200 && request.status < 400) { // Success! callback({"status": "success","status_code":request.status, "data" : request.responseText}); } else { // We reached our target server, but it returned an error callback({"status": "success","status_code":request.status, "data" : "We reached our target server, but it returned an error"}); } }; request.onerror = function() { // There was a connection error of some sort callback({"error": "success","status_code":request.status, "data" : "Error occured in getting html data"}); }; request.send(); } function dmlmyskinclock_getScript(source, callback) { //console.log('inside get script call'); var script = document.createElement('script'); //var prior = document.getElementsByTagName('script')[0]; script.async = 1; script.onload = function(evt) { //console.log(source ," ready state: ",evt); callback({"status":"success","message":"done"}); }; script.onerror = function(err){ console.log(err) callback({"status":"error", "message":"error in getting script " + source}); } script.src = source; dmlmyskinclockWrapperElement.appendChild(script); } function myskinclockOpenApp(){ getEmbedHtmlData('https://myskinclock.herokuapp.com/myskinclock?'+sessionTimeString, (res) => { window.data = res.data; dmlmyskinclockWrapperElement.innerHTML = res.data + dmlmyskinclockWrapperElement.innerHTML; dmlmyskinclock_getScript('https://myskinclock.herokuapp.com/script.js?'+sessionTimeString,function(){ if (window.myskinclock_isEmbed){ let myskinclockBannerElement = document.getElementById("myskinclock_cta_banner"); myskinclockBannerElement.style.opacity = 0; setTimeout(()=>{ myskinclockBannerElement.style.display = "none"; dmlmyskinclockWrapperElement.style.height = "auto"; dmlmyskinclockWrapperElement.style.maxHeight = window.myskinclock_maxheight; dmlmyskinclockWrapperElement.style.width = window.myskinclock_maxwidth; setTimeout(()=>{ if (window.myskinclock_maxheight != "auto"){ dmlmyskinclockWrapperElement.style.overflowY = "scroll"; }else{ dmlmyskinclockWrapperElement.style.maxHeight = document.getElementById("myskinclockBody").offsetHeight +"px"; } },1000); },1000) } }) }) } function myskinclockMakeBanner(){ let bannerWidth; if (window.myskinclock_bannerwidth.indexOf("%")>-1){ bannerWidth = dmlmyskinclockWrapperElement.offsetWidth * Number(window.myskinclock_bannerwidth.replace("%",""))/100; }else{ bannerWidth = Number(window.myskinclock_bannerwidth.replace("px","").replace("%","")); } let maxBannerHeight = 300; let rectInnerBannerRatio = 400/1023; let bannerHeight; let innerBannerWidth; bannerHeight = bannerWidth *rectInnerBannerRatio; if (bannerHeight > maxBannerHeight){ bannerHeight = maxBannerHeight; innerBannerWidth = 300/rectInnerBannerRatio; }else{ innerBannerWidth = bannerHeight/rectInnerBannerRatio; } if (bannerWidth>500){ dmlmyskinclockWrapperElement.innerHTML += '
'+ '

' dmlmyskinclockWrapperElement.style.maxHeight = bannerHeight + "px"; dmlmyskinclockWrapperElement.style.height = bannerHeight + "px"; let myskinclockBannerElement = document.getElementById("myskinclock_cta_banner"); dmlmyskinclockWrapperElement.style.width = bannerWidth+"px"; myskinclockBannerElement.style.height= bannerHeight+"px"; myskinclockBannerElement.style.backgroundImage = "linear-gradient(0.4turn, #9497FD 15%, #86CEFE, #BDFEE0, #FEEEA0, #FDC298)"; myskinclockBannerElement.style.backgroundSize = "cover"; document.getElementById("myskinclock_banner_inner_part").style.width= innerBannerWidth+"px"; }else{ bannerHeight = 359 * bannerWidth / 400; dmlmyskinclockWrapperElement.innerHTML += '
'+ '

'; dmlmyskinclockWrapperElement.style.maxHeight = bannerHeight + "px"; dmlmyskinclockWrapperElement.style.height = bannerHeight + "px"; let myskinclockBannerElement = document.getElementById("myskinclock_cta_banner"); dmlmyskinclockWrapperElement.style.width = bannerWidth+"px"; myskinclockBannerElement.style.height= bannerHeight+"px"; myskinclockBannerElement.style.backgroundImage = 'url(https://myskinclock.herokuapp.com/img/myskinclock-bucket-sunrise_500x500.jpg)'; myskinclockBannerElement.style.backgroundSize = "cover"; } } function mscStartSunCountDown(){ let myskinclockBannerElement; if ( dmlmyskinclockWrapperElement.offsetWidth > 400){ myskinclockBannerElement = document.getElementById("myskinclock_banner_inner_part"); }else{ myskinclockBannerElement = document.getElementById("myskinclock_cta_banner"); } let bannerHeight = myskinclockBannerElement.offsetHeight; let bannerWidth = myskinclockBannerElement.offsetWidth; let hoursEl = document.getElementById("myskinclock_banner_hours"); let minsEl = document.getElementById("myskinclock_banner_mins"); let secsEl = document.getElementById("myskinclock_banner_seconds"); document.getElementById("myskinclock_banner_mins"); document.getElementById("myskinclock_banner_seconds"); let nextTimes = calculateSunriseSunset(); let isDay = nextTimes.sunrise.hours*60 + nextTimes.sunrise.minutes > nextTimes.sunset.hours*60 + nextTimes.sunset.minutes; if (isDay){ if (bannerWidth > 500 ){ document.getElementById("myskinclock_banner_inner_part").style.backgroundImage = 'url(https://myskinclock.herokuapp.com/img/myskinclock_banner_sunset_1023x400.png)'; }else{ myskinclockBannerElement.style.backgroundImage = 'url(https://myskinclock.herokuapp.com/img/myskinclock-bucket-sunset_500x500.jpg)'; } }else{ if (dmlmyskinclockWrapperElement.offsetWidth > 500 ){ document.getElementById("myskinclock_banner_inner_part").style.backgroundImage = 'url(https://myskinclock.herokuapp.com/img/myskinclock_banner_sunrise_1023x400.png)'; }else{ myskinclockBannerElement.style.backgroundImage = 'url(https://myskinclock.herokuapp.com/img/myskinclock-bucket-sunrise_500x500.jpg)'; } } if(bannerWidth> 500){ hoursEl.style.left= (bannerWidth * 0.558) + "px"; hoursEl.style.top= (bannerHeight * 0.32) + "px"; hoursEl.style.width = (bannerWidth * 0.1) + "px"; hoursEl.style.fontSize = (bannerHeight * 0.15) + "px"; minsEl.style.left= (bannerWidth * 0.662) + "px"; minsEl.style.top= (bannerHeight * 0.32) + "px"; minsEl.style.fontSize = (bannerHeight * 0.15) + "px"; minsEl.style.width = (bannerWidth * 0.1) + "px"; secsEl.style.left= (bannerWidth * 0.76) + "px"; secsEl.style.top= (bannerHeight * 0.32) + "px"; secsEl.style.fontSize = (bannerHeight * 0.15) + "px"; secsEl.style.width = (bannerWidth * 0.1) + "px"; }else{ hoursEl.style.left= (bannerWidth * 0.21) + "px"; hoursEl.style.top= (bannerHeight * 0.39) + "px"; hoursEl.style.width = (bannerWidth * 0.16) + "px"; hoursEl.style.fontSize = (bannerHeight * 0.15) + "px"; minsEl.style.left= (bannerWidth * 0.435) + "px"; minsEl.style.top= (bannerHeight * 0.39) + "px"; minsEl.style.fontSize = (bannerHeight * 0.15) + "px"; minsEl.style.width = (bannerWidth * 0.16) + "px"; secsEl.style.left= (bannerWidth * 0.65) + "px"; secsEl.style.top= (bannerHeight * 0.39) + "px"; secsEl.style.fontSize = (bannerHeight * 0.15) + "px"; secsEl.style.width = (bannerWidth * 0.16) + "px"; } function updateBannerTime(hours,mins,secs){ document.getElementById("myskinclock_banner_hours").innerHTML=hours; if (mins< 10){ document.getElementById("myskinclock_banner_mins").innerHTML="0" + mins; }else{ document.getElementById("myskinclock_banner_mins").innerHTML=mins; } if (secs< 10){ document.getElementById("myskinclock_banner_seconds").innerHTML="0" + secs; }else{ document.getElementById("myskinclock_banner_seconds").innerHTML=secs; } } function countDownOneSec(hours,mins,secs){ if (!window.myskinclockAppNotBanner){ secs -= 1; if (secs < 0){ secs = 59; mins -= 1; if (mins < 0){ mins = 59; hours -=1; if(hours < 0){ let nextTimesNew = calculateSunriseSunset(); let isDayNew = nextTimesNew.sunrise.hours*60 + nextTimesNew.sunrise.minutes > nextTimesNew.sunset.hours*60 + nextTimesNew.sunset.minutes; if (isDayNew){ if (bannerWidth > 500 ){ document.getElementById("myskinclock_banner_inner_part").style.backgroundImage = 'url(https://myskinclock.herokuapp.com/img/myskinclock_banner_sunset_1023x400.png)'; }else{ myskinclockBannerElement.style.backgroundImage = 'url(https://myskinclock.herokuapp.com/img/myskinclock-bucket-sunset_500x500.jpg)'; } }else{ if (dmlmyskinclockWrapperElement.offsetWidth > 500 ){ document.getElementById("myskinclock_banner_inner_part").style.backgroundImage = 'url(https://myskinclock.herokuapp.com/img/myskinclock_banner_sunrise_1023x400.png)'; }else{ myskinclockBannerElement.style.backgroundImage = 'url(https://myskinclock.herokuapp.com/img/myskinclock-bucket-sunrise_500x500.jpg)'; } } if (isDayNew){ hours = nextTimesNew.sunset.hours; mins = nextTimesNew.sunset.minutes; secs = "59"; }else{ hours = nextTimesNew.sunrise.hours; mins = nextTimesNew.sunrise.minutes; secs = "59"; } updateBannerTime(hours,mins,secs); setTimeout(()=>{countDownOneSec(hours,mins,secs)},1000); } } } if (hours >= 0){ updateBannerTime(hours,mins,secs); setTimeout(()=>{countDownOneSec(hours,mins,secs)},1000); } } } let curHours,curMins,curSecs; if (isDay){ curHours = nextTimes.sunset.hours; curMins = nextTimes.sunset.minutes; curSecs = "59"; }else{ curHours = nextTimes.sunrise.hours; curMins = nextTimes.sunrise.minutes; curSecs = "59"; } updateBannerTime(curHours,curMins,curSecs); countDownOneSec(curHours,curMins,curSecs) } function changeToApp(){ if (myskinclock_banner_cta_active){ let xhr = new XMLHttpRequest(); xhr.open("GET", "https://imb-backend.herokuapp.com/myskinclock/get_location_data?source_url=" + window.location.href ); xhr.setRequestHeader('Content-Type', 'text/plain'); xhr.send(); myskinclockOpenApp() myskinclock_banner_cta_active = false; } } // global functions window.myskinclockSetCookie = (cname,cvalue, exdays)=>{ var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";"; } window.myskinclockReadCookie=(cname)=>{ let name = cname + "="; let decodedCookie = decodeURIComponent(document.cookie); let ca = decodedCookie.split(';'); for(var i = 0; i { let xhr = new XMLHttpRequest(); if (window.myskinclockAppNotBanner){ xhr.open("GET", "https://imb-backend.herokuapp.com/myskinclock/get_location_data?source_url=" + window.location.href ); }else{ xhr.open("GET", "https://imb-backend.herokuapp.com/myskinclock/get_location_data?source_url=banner_view_" + window.location.href ); } xhr.setRequestHeader('Content-Type', 'text/plain'); xhr.onreadystatechange = function(){ if(this.readyState == 4){ try{ let locationObj = JSON.parse(this.responseText); myskinclockLocation.latitude = locationObj.latitude; myskinclockLocation.longitude = locationObj.longitude; myskinclockLocation.address = locationObj.city let locString = locationObj.latitude + ","+ locationObj.longitude; let xhr2 = new XMLHttpRequest(); xhr2.open("GET", "https://myskinclock.herokuapp.com/getTimeZone?location="+locString ); xhr2.setRequestHeader('Content-Type', 'text/plain'); xhr2.onreadystatechange = function(){ if(this.readyState == 4){ let responseObj = JSON.parse(this.responseText); myskinclockLocation.minutesOffset = (responseObj.rawOffset + responseObj.dstOffset)/60; if (myskinclockLocation.address != ""){ myskinclockSetCookie("myskinclock_location",JSON.stringify(myskinclockLocation)); if (document.getElementById("myskinclock_city") != null){ document.getElementById("myskinclock_city").innerHTML = myskinclockLocation.address; } } //document.getElementById("myskinclock_location_container").style.opacity = 1; } } xhr2.send(); }catch(e){ console.log("wrong response from server - loc error:",e); } } } xhr.send(); } window.getSetRiseForDayAndCoords = (myskinclockGeoCoords, dateObj, inDays = 0)=>{ let refDate = new Date(Date.UTC(2000,0,1,0,0,0)); let curYear = dateObj.getUTCFullYear(); let curMonth = dateObj.getUTCMonth()+1; let curDay = dateObj.getUTCDate(); let curHours = dateObj.getUTCHours(); let curMinutes = dateObj.getUTCMinutes(); let curSeconds = dateObj.getUTCSeconds(); let curMilliseconds = dateObj.getUTCMilliseconds(); let julianDay = Math.floor(Math.abs(dateObj.getTime() - refDate.getTime())/86400000) + 2451545 - 0.5 + inDays ; let julianCent = (julianDay - 2451545)/36525; let meanLongSun = 280.46646 + julianCent * (36000.76983 + julianCent * 0.0003032) % 360; let meanAnomSun = 357.52911+julianCent*(35999.05029 - 0.0001537*julianCent); let eccentEarthOrbit = 0.016708634-julianCent*(0.000042037+0.0000001267*julianCent); let sunEquOfCtr = Math.sin(Math.PI/180*meanAnomSun)*(1.914602-julianCent*(0.004817+0.000014*julianCent))+ Math.sin(Math.PI/180*2*meanAnomSun)*(0.019993-0.000101*julianCent) + Math.sin(Math.PI/180*3*meanAnomSun)*0.000289; let sunTrueLong = meanLongSun + sunEquOfCtr; let sunAppLong = sunTrueLong -0.00569-0.00478*Math.sin(Math.PI/180*(125.04-1934.136*julianCent)); let obliqEcliptic = 23 + (26 + (21.448-julianCent*(46.815+julianCent*(0.00059-julianCent*0.001813)))/60)/60; let obliqCorr = obliqEcliptic + 0.00256*Math.cos(Math.PI/180*(125.04-1934.136*julianCent)); let sunDecl = 180/Math.PI * Math.asin(Math.sin(Math.PI/180*obliqCorr)*Math.sin(Math.PI/180*sunAppLong)); let varY = Math.tan(Math.PI/180*obliqCorr/2)*Math.tan(Math.PI/180*obliqCorr/2); let equTimeMins = 4*180/Math.PI * (varY * Math.sin(2*Math.PI/180*meanLongSun)-2*eccentEarthOrbit*Math.sin(Math.PI/180*meanAnomSun) + 4* eccentEarthOrbit * varY * Math.sin(Math.PI/180*meanAnomSun) * Math.cos(2*Math.PI/180 * meanLongSun) - 0.5 * varY*varY*Math.sin(4*Math.PI/180*meanLongSun) - 1.25*eccentEarthOrbit*eccentEarthOrbit*Math.sin(2*Math.PI/180*meanAnomSun) ) let haSunrise = 180/Math.PI * (Math.acos(Math.cos(Math.PI/180*90.833)/(Math.cos(Math.PI/180*myskinclockGeoCoords.latitude)*Math.cos(Math.PI/180*sunDecl)) - Math.tan(Math.PI/180*myskinclockGeoCoords.latitude)*Math.tan(Math.PI/180*sunDecl))); let solarNoon = (180 - myskinclockGeoCoords.longitude - 0.25*equTimeMins)/360 let sunRise = solarNoon - haSunrise/360; let sunSet = solarNoon + haSunrise/360; let timeTillSunrise = sunRise + inDays - curHours/24 - curMinutes/1440; let timeTillSunset = sunSet + inDays - curHours/24 - curMinutes/1440; let tillSunriseHours; let tillSunriseMinutes; let tillSunsetHours; let tillSunsetMinutes; if (timeTillSunrise >= 0){ tillSunriseHours = Math.floor(timeTillSunrise*24); tillSunriseMinutes = 60*(timeTillSunrise * 24 % 1); tillSunriseMinutes = Math.floor(tillSunriseMinutes); }else{ tillSunriseHours = Math.ceil(timeTillSunrise*24); tillSunriseMinutes = 60*(timeTillSunrise * 24 % 1); tillSunriseMinutes = Math.ceil(tillSunriseMinutes); } if (timeTillSunset >= 0){ tillSunsetHours = Math.floor(timeTillSunset*24); tillSunsetMinutes = 60*(timeTillSunset * 24 % 1); tillSunsetMinutes = Math.floor(tillSunsetMinutes); }else{ tillSunsetHours = Math.ceil(timeTillSunset*24); tillSunsetMinutes = 60*(timeTillSunset * 24 % 1); tillSunsetMinutes = Math.ceil(tillSunsetMinutes); } return {sunrise: {hours: tillSunriseHours, minutes: tillSunriseMinutes, past: timeTillSunrise < 0} , sunset: {hours: tillSunsetHours , minutes: tillSunsetMinutes, past: timeTillSunset < 0} } } window.calculateSunriseSunset = ()=>{ let curDate = new Date(); let yesterdaysTimes = getSetRiseForDayAndCoords(myskinclockLocation, curDate, -1); let todaysTimes = getSetRiseForDayAndCoords(myskinclockLocation, curDate, 0); let tomorrowsTimes = getSetRiseForDayAndCoords(myskinclockLocation, curDate, 1); let nextTimes={}; let sunriseDayIndex; let sunsetDayIndex; if (yesterdaysTimes.sunrise.past){ if (todaysTimes.sunrise.past){ nextTimes.sunrise = tomorrowsTimes.sunrise; sunriseDayIndex = 1; }else{ nextTimes.sunrise = todaysTimes.sunrise; sunriseDayIndex = 0; } }else{ nextTimes.sunrise = yesterdaysTimes.sunrise; sunriseDayIndex = -1; } if (yesterdaysTimes.sunset.past){ if (todaysTimes.sunset.past){ nextTimes.sunset = tomorrowsTimes.sunset; sunsetDayIndex = 1; }else{ nextTimes.sunset = todaysTimes.sunset; sunsetDayIndex = 0; } }else{ nextTimes.sunset = yesterdaysTimes.sunset; sunsetDayIndex = -1; } if (window.myskinclockAppNotBanner){ if (!isNaN(yesterdaysTimes.sunrise.hours) && !isNaN(yesterdaysTimes.sunrise.minutes) && !isNaN(todaysTimes.sunrise.hours) && !isNaN(todaysTimes.sunrise.minutes) && !isNaN(todaysTimes.sunset.hours) && !isNaN(todaysTimes.sunset.minutes)){ if (sunriseDayIndex == sunsetDayIndex){ myskinclockDayNightState = "night"; setMyskinclockBackground(); }else{ myskinclockDayNightState = "day"; setMyskinclockBackground(); } } } return nextTimes; } // start app/banner if (!window.myskinclock_isEmbed){ myskinclockOpenApp() }else{ myskinclockGetGeolocationFromBackend(); myskinclockMakeBanner(); var timeoutLimit = 30000; var pendingTime = 0; function mscpendingGeolocation(){ if (!isNaN(myskinclockLocation.minutesOffset)){ mscStartSunCountDown(); }else{ if (pendingTime < timeoutLimit){ setTimeout(()=>{mscpendingGeolocation()},200) pendingTime += 200; }else{ console.log("myskinclock location not found"); } } } mscpendingGeolocation(); }