var dmliphyWrapperElement = document.getElementById("dml_iphy_wrapper");

dmliphyWrapperElement.style.transition = "all 0.5s;";

var iphy_banner_cta_active = true;

var iphyCSSid = 'iphyStyleSheet';

let sessionTimeString = (new Date()).getTime();

var iphyFlLgPp = false;

var iphy_pagehead  = document.getElementsByTagName('head')[0];
var iphy_pagelink  = document.createElement('link');
iphy_pagelink.id   = iphyCSSid;
iphy_pagelink.rel  = 'stylesheet';
iphy_pagelink.type = 'text/css';
iphy_pagelink.href = 'https://invisible-physical-production.herokuapp.com/stylesheets/style.min.css?'+sessionTimeString;
iphy_pagelink.media = 'all';
iphy_pagehead.appendChild(iphy_pagelink);

window.iphy_hasBanner = typeof window.iphy_hasBanner != "undefined" ? window.iphy_hasBanner : true;
window.iphy_isEmbed = typeof window.iphy_isEmbed != "undefined" ? window.iphy_isEmbed : true;
window.iphy_maxwidth = typeof window.iphy_maxwidth != "undefined" ? window.iphy_maxwidth : "100%";
window.iphy_maxheight = typeof window.iphy_maxheight != "undefined" ? window.iphy_maxheight : window.innerHeight +"px";
window.iphy_bannerwidth= typeof window.iphy_bannerwidth != "undefined" ? window.iphy_bannerwidth : "100%";

window.iphy_prodUrl1 = typeof window.iphy_prodUrl1 != "undefined" ? window.iphy_prodUrl1 : "";
window.iphy_prodUrl2 = typeof window.iphy_prodUrl2 != "undefined" ? window.iphy_prodUrl2 : "";

window.iphy_banner_cta_button = typeof window.iphy_banner_cta_button != "undefined" ? window.iphy_banner_cta_button : "take me to my spf plan";
window.iphy_banner_hey_text = typeof window.iphy_banner_hey_text != "undefined" ? window.iphy_banner_hey_text : "hey dermalogica,";
window.iphy_banner_show_me_text = typeof window.iphy_banner_show_me_text != "undefined" ? window.iphy_banner_show_me_text : "show me";
window.iphy_banner_dynamic_text = typeof window.iphy_banner_dynamic_text != "undefined" ? window.iphy_banner_dynamic_text : [
		"the uv index in my area",
		"blue light affects my skin",
		"how to protect my skin"
	];
window.iphy_displayTextSignup = typeof window.iphy_displayTextSignup != "undefined" ? window.iphy_displayTextSignup : true;


if (!window.iphy_isEmbed){
	window.iphy_showNavbar = true;
}
window.iphy_showNavbar = typeof window.iphy_showNavbar != "undefined" ? window.iphy_showNavbar : false;
window.iphy_showLiveChat = typeof window.iphy_showLiveChat != "undefined" ? window.iphy_showLiveChat : true;
window.iphy_forcedLanguageCode = typeof window.iphy_forcedLanguageCode != "undefined" ? window.iphy_forcedLanguageCode: "";

dmliphyWrapperElement.style.width = window.iphy_maxwidth;

function logOnLocalHostFrontEnd(inStringBefore,inVariable){
	inStringBefore = (inStringBefore === undefined) ? '' : inStringBefore;
	if (/localhost/g.test("https://invisible-physical-production.herokuapp.com") || /192\.168\.0\./g.test("https://invisible-physical-production.herokuapp.com") || /\.ngrok\.io/g.test("https://invisible-physical-production.herokuapp.com") || /facemappingconsumer-staging\.herokuapp/g.test("https://invisible-physical-production.herokuapp.com") || iphyFlLgPp){
		if (inVariable == undefined){
			console.log(inStringBefore)
		}else{
			console.log(inStringBefore, inVariable)
		}
	}
}
// GA - START

window.iphyGAsetup = false;

function iphySendGA(eventName,eventValue){
	eventValue = (eventValue == undefined) ? "" : eventValue;

	let eventLabel;
	if (typeof iphyCustomUID == "undefined"){
		eventLabel = "";
	}else{
		eventLabel = iphyCustomUID;
	}
	if (typeof window.facemap != "undefined"){
		if (typeof window.facemap.hashid != "undefined"){
			eventLabel += " - " + window.facemap.hashid;
		}
	}

	if (window.iphyGAsetup){
		if (window.ga) {
			if (eventLabel != ""){
				window.ga('iphy_gtag.send', 'event', eventName, eventValue, eventLabel); // category - action - label
			}else{
				window.ga('iphy_gtag.send', 'event', eventName, eventValue); // category - action
			}
		}else	if (window.gtag) {
			if (eventLabel != ""){
				window.gtag('event', eventValue, {event_category: eventName, event_label: eventLabel}); // action - {category - label}
			}else{
				window.gtag('event', eventName, {event_category: eventName}); // action - {category}
			}

		} else if (window._gaq) {

			window._gaq.push(['iphy_gtag._trackEvent',eventName,eventValue]); // category - action
		}
	}
}

function iphySendPageViewGA(pagePath){
	if (window.iphyGAsetup){
		if (window.ga) {
			logOnLocalHostFrontEnd("GOOGLE ANALYTICS: ga pageview event will be send");
			window.ga('iphy_gtag.set', 'page', pagePath);
			window.ga('iphy_gtag.send', 'pageview');
		}else	if (window.gtag) {
			logOnLocalHostFrontEnd("GOOGLE ANALYTICS: gtag pageview event will be send");
			window.gtag('config', "UA-36853599-24", {"page_title": window.location.hostname, "page_path": pagePath});
		} else if (window._gaq) {
			logOnLocalHostFrontEnd("GOOGLE ANALYTICS: _gaq pageview event will be send");
			window._gaq.push(['iphy_gtag._trackPageview',pagePath]);
		}
	}
}

function iphySetupGA(){
	let pageTitle ="not found";
	pageTitle = window.location.hostname;
	if (window.ga) {
		logOnLocalHostFrontEnd("setting up GA for 'ga'","");
		window.ga('create', 'UA-36853599-35', 'auto', 'iphy_gtag');
		window.ga('iphy_gtag.set','anonymizeIp', true);
		window.ga('iphy_gtag.send','pageview',window.location.href);
	}else if (window.gtag) {
		logOnLocalHostFrontEnd("setting up GA for 'gtag'","");
    window.gtag('config', 'UA-36853599-35', { 'anonymize_ip': true, 'page_title': pageTitle , 'page_location': window.location.href });
  } else if (window._gaq) {
		logOnLocalHostFrontEnd("setting up GA for '_gaq'","");
    window._gaq.push(['iphy_gtag._setAccount','UA-36853599-35'],['iphy_gtag._trackPageview']);
	}
	window.iphyGAsetup = true;
}


// GA - END

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 dmliphy_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.setAttribute('type','text/javascript');

		script.src = source;
		dmliphyWrapperElement.appendChild(script);


}

function dmliphy_getScript_withAttributes(source, attributeObj, 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.setAttribute('type','text/javascript');
		try{
			Object.keys(attributeObj).forEach( function(attrKey){
				script.setAttribute(attrKey,attributeObj[attrKey]);
			});

		}catch(err){
			console.log(err);
		}

		script.src = source;
		dmliphyWrapperElement.appendChild(script);


}


function iphyOpenApp(){

	let gaTimer = 100;
	let gacheckinterval = setInterval(function(){
		if (window.ga){
			logOnLocalHostFrontEnd("GA AVAILABLE - "+ gaTimer/1000 + "s","");
			clearInterval(gacheckinterval);
			iphySetupGA();
		}else{
			if (gaTimer > 10000){
				logOnLocalHostFrontEnd("GA NOT AVAILABLE - "+ gaTimer/1000 + "s","");
				clearInterval(gacheckinterval);
			}
			gaTimer += 100;
		}
	},100)

	if (navigator.appName == 'Microsoft Internet Explorer' ||  !!(navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/rv:11/))){
		setTimeout(function(){iphySendGA("openApp","Browser Not Supported");},2000);
		//alert("We don't currently support this browser. Please reopen this page in a different browser.")
		if (!window.iphy_isEmbed){
			dmliphyWrapperElement.style.height = "100vh";
		}
		dmliphyWrapperElement.innerHTML = '<div id="iphy_browser_not_sup_wrapper"><div id="iphy_browser_error_image"><img src="https://invisible-physical-production.herokuapp.com/img/iphy_face_error.svg"/></div><p>We don\'t currently support this browser. Please reopen this page in a different browser, such as <a href="https://www.google.com/chrome/" target="_blank">Chrome</a>.</p></div>';
		dmliphyWrapperElement.style.background = "url('https://invisible-physical-production.herokuapp.com/img/screen2-bg.png') no-repeat center center";
		dmliphyWrapperElement.style.backgroundSize= "cover";
	}else{
		setTimeout(function(){iphySendGA("openApp","loading full script");},2000);
		getEmbedHtmlData('https://invisible-physical-production.herokuapp.com/iphy?'+sessionTimeString, function(res)  {
			window.data = res.data;
			if (window.iphy_isEmbed && window.iphy_hasBanner){
				let iphyBannerElement = document.getElementById("iphy_cta_banner");
				iphyBannerElement.style.opacity = 0;

				setTimeout(function(){
					dmliphyWrapperElement.innerHTML = res.data + dmliphyWrapperElement.innerHTML;
					document.getElementById("iphy_body").style.height=window.iphy_maxheight;

					document.getElementById("iphy_cta_banner").style.display = "none";
					//dmliphyWrapperElement.style.maxHeight = window.iphy_maxheight;
					dmliphyWrapperElement.style.width = window.iphy_maxwidth;
					//dmliphyWrapperElement.style.height = window.iphy_maxheight;
					//dmliphyWrapperElement.style.maxHeight = window.iphy_maxheight;

					dmliphyWrapperElement.style.height = "auto";

					document.getElementById("iphy_body").style.height = "auto";

					dmliphy_getScript('https://invisible-physical-production.herokuapp.com/script.js?'+sessionTimeString,function(){
						document.getElementById("iphy_body").style.opacity = 1;
						//dmliphy_getScript_withAttributes("https://consent.cookiebot.com/uc.js",{"data-cbid":"9a0e10ab-b363-4aea-857e-5dedb771dc33", "id":"Cookiebot"},function(resCookieBot){})
					});

				},500)


			}else{
				dmliphyWrapperElement.innerHTML = res.data + dmliphyWrapperElement.innerHTML;
				document.getElementById("iphy_body").style.height="auto";
				dmliphyWrapperElement.style.height = "auto";


				//let heightLimit= Math.min(screen.availHeight,screen.height );

				/*if (document.getElementById("iphy_body").offsetHeight > heightLimit){
					document.getElementById("iphy_body").style.height = heightLimit + "px";
				}*/

				dmliphy_getScript('https://invisible-physical-production.herokuapp.com/script.js?'+sessionTimeString,function(){
					document.getElementById("iphy_body").style.opacity = 1;
				});

			}



		})

	}

}

function iphyMakeBanner(){


	let maxBannerHeight = 300;
	let bannerHeight = 300;


	dmliphyWrapperElement.innerHTML += '<div id="iphy_cta_banner" style="color: white;" onclick="changeToApp();">'+
		'<div id="iphy_banner_inner_part">'+
			'<div id="iphy_banner_content">'+
				'<p id="iphy_banner_hey_text">' + window.iphy_banner_hey_text + '</p>'+
				'<p id="iphy_banner_show_me_text">' + window.iphy_banner_show_me_text + '</p><p id="iphy_banner_dynamic_text">' + window.iphy_banner_dynamic_text[0] + '</p>'+
				'<p id="iphy_banner_cta_button">' + window.iphy_banner_cta_button + '</p>'+
				'<div id="iphy_banner_phone_img"></div>'
			'</div>'+
		'</div></div>';

  if (document.getElementById("iphy_banner_content").offsetWidth < 700){
		document.getElementById("iphy_banner_inner_part").classList.add("iphy_banner_700");
		bannerHeight = 400;
		maxBannerHeight = 400;
	}

	if (document.getElementById("iphy_cta_banner").offsetWidth < 500){
		let scaleFact = document.getElementById("iphy_cta_banner").offsetWidth / 500;
		document.getElementById("iphy_banner_content").style.transform = 'scale('+scaleFact+')';
		bannerHeight = 400*scaleFact;
		maxBannerHeight = 400*scaleFact;
		document.getElementById("iphy_banner_content").style.marginLeft = Math.round(document.getElementById("iphy_cta_banner").offsetWidth /25) + "px";
	}


	setTimeout(()=>{

		try{
			let showMeWidth = document.getElementById("iphy_banner_show_me_text").offsetWidth;
			let showMeHeight = document.getElementById("iphy_banner_show_me_text").offsetHeight;
			let dynTextPos = showMeWidth + Math.round(0.8*showMeHeight);
			document.getElementById("iphy_banner_dynamic_text").style.transition = "0.5s opacity";
			document.getElementById("iphy_banner_dynamic_text").style.left = dynTextPos + "px";
			document.getElementById("iphy_banner_dynamic_text").style.opacity = 1;
		}catch(err){

		}
	},1000)


	let curTextIndex = 0;
	let dynamicInterval = setInterval(()=>{
		let dynTextEl = document.getElementById("iphy_banner_dynamic_text");
		if (dynTextEl != undefined){
			curTextIndex++;
			if (curTextIndex >= iphy_banner_dynamic_text.length){
				curTextIndex = 0;
			}
			dynTextEl.style.opacity = 0;
			setTimeout(()=>{
				try{
					dynTextEl.innerHTML = iphy_banner_dynamic_text[curTextIndex];
				}catch(err){}
			},500);
			setTimeout(()=>{
				try{
					dynTextEl.style.opacity = 1;
				}catch(err){}
			},1000);

		}else{
			clearInterval(dynamicInterval);
		}
	},8000)

	dmliphyWrapperElement.style.height  = bannerHeight + "px";
	let iphyBannerElement = document.getElementById("iphy_cta_banner");
	iphyBannerElement.style.width = "100%";
	iphyBannerElement.style.height= bannerHeight+"px";




}



function changeToApp(){
	if (iphy_banner_cta_active){

		iphyOpenApp()
		iphy_banner_cta_active = false;
	}
}


// global functions


window.iphySetCookie = function(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.iphyReadCookie= function(cname){
	let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
    	c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

// start app/banner

if (window.location.search.indexOf("iphy_hid") > -1){
	window.iphy_hasBanner = false;
}


if (!window.iphy_isEmbed || !window.iphy_hasBanner ){
	iphyOpenApp()

}else{
	iphyMakeBanner();
}