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