var dml_fmc = dml_fmc || {};

if (/localhost/g.test("https://facemapping.me") || /192\.168\.0\./g.test("https://facemapping.me") || window.location.search.indexOf('dmldbg=1') > -1 ){
  dml_fmc.logAllFlag = true;
}else{
  dml_fmc.logAllFlag = false;
}

dml_fmc.forced_language = dml_fmc.forced_language || "";
dml_fmc.addToBagFlag = false;



if (typeof window.fmc_hasBanner != 'undefined'){
  if (typeof dml_fmc.hasBanner == 'undefined'){
    dml_fmc.hasBanner = window.fmc_hasBanner;
  }
}
dml_fmc.hasBanner = typeof dml_fmc.hasBanner != 'undefined' ? dml_fmc.hasBanner : true;

if (typeof dml_fmc.bannerTexts == 'undefined'){
    if (typeof window.fmc_banner_cta_text != "undefined"){
      if (typeof window.fmc_banner_cta_button != "undefined"){
        dml_fmc.bannerTexts = {
          tagline: window.fmc_banner_cta_text,
          cta: window.fmc_banner_cta_button
        }
      }else{
        dml_fmc.bannerTexts = {
          tagline: window.fmc_banner_cta_text,
          cta: "analyze your skin"
        }
      }
    }else{
      if (typeof window.fmc_banner_cta_button != "undefined"){
        dml_fmc.bannerTexts = {
          tagline: 'want a personalized skin analysis?',
          cta: window.fmc_banner_cta_button
        }
      }
    }

}

dml_fmc.ldTms = {};

dml_fmc.bannerTexts = dml_fmc.bannerTexts || {
  tagline: "want a personalized skin analysis?",
  cta: "analyze your skin"
};

dml_fmc.widget_wrapper=document.getElementById("dml_fmc_wrapper");


dml_fmc.debug = function(inStringBefore,inVariable){
	if (  dml_fmc.logAllFlag || window.location.search.indexOf('shDbOp=1') > -1){
    inStringBefore = (inStringBefore === undefined) ? '' : inStringBefore;
		if (inVariable == undefined){
			console.log(inStringBefore)
		}else{
			console.log(inStringBefore, inVariable)
		}
	}
}


dml_fmc.isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent);
dml_fmc.isIOS = /(iPhone|iPod|iPad)/i.test(navigator.userAgent);


// timing logic
dml_fmc.ldTmStarts = {}

dml_fmc.ldTmsStart = function (ldTmId){
	dml_fmc.ldTms[ldTmId] = {
		start: Date.now(),
	}
}

dml_fmc.ldTm = function (ldTmId){
	try{
		return Date.now() - dml_fmc.ldTms[ldTmId].start;
	}catch(err){
		console.error(err);
		return -1 ;
	}
}

// GA - START

dml_fmc.GAsetup = false;


dml_fmc.sendGA4 = function(eventName,eventParameters = {}){
	if (!window.gtag) return;
	if (!dml_fmc.GAsetup) return;
	if ("G-HBP6GXC7BC"=='') return;

	const enrichedEventParams = {... eventParameters};

	try{
		Object.keys(dml_fmc.config.pageDict).forEach((pageType)=>{
			enrichedEventParams[pageType] = dml_fmc.config.pageDict[pageType];
		})
	}catch(err){console.error(err)}

	enrichedEventParams.send_to = "G-HBP6GXC7BC";

	var parametersAsString;
	try{
		parametersAsString = JSON.stringify(enrichedEventParams);
		//dml_fmc.debug("GA4: " + eventName + " - " + parametersAsString);
	}catch(err){
		console.warn("Error in GA event parameters - ",err);
		eventParameters={};
	}

	window.gtag('event', eventName, enrichedEventParams);

}

dml_fmc.sendGA4Time = function(trackingItemId, timeValue){
	try{
		dml_fmc.ldTms[trackingItemId]=timeValue;
	}catch(err){console.warn(err)}
	if (!window.gtag) return;
	if (!dml_fmc.GAsetup) return;
	if ("G-HBP6GXC7BC"=='') return;

	const eventParameters = {
		'event_category': 'Performance',
		'event_label': trackingItemId,
		'value': timeValue
	}

	eventParameters.send_to = "G-HBP6GXC7BC";

	try{
		//var parametersAsString = JSON.stringify(eventParameters);
		//dml_fmc.debug("GA4 timing: " + trackingItemId + " - " + parametersAsString);
		window.gtag('event', 'user_flow', eventParameters);
	}catch(err){
		console.warn("Error in GA event parameters for Timing event. Not sending event - ",err);
	}

}

dml_fmc.sendGA360 = function(eventName,eventValue){
	//dml_fmc.debug("GOOGLE ANALYTICS: ",eventName + " - " + eventValue)
	eventValue = (eventValue == undefined) ? "" : eventValue;
	if ("UA-36853599-24"=='') return;

	let eventLabel = '';

  if (typeof dml_fmc.config != 'undefined'){
    try{
      Object.keys(dml_fmc.config.pageDict).forEach(function (key,index) {
        if (index == 0){
          eventLabel += dml_fmc.config.pageDict[key];
        }else{
          eventLabel += ' - ' + dml_fmc.config.pageDict[key];
        }
      })
    }catch(err){}
  }

	if (dml_fmc.GAsetup && window.gtag){
		try{
			if (eventLabel != ""){
				window.gtag('event', eventValue, {event_category: eventName, event_label: eventLabel, send_to: "UA-36853599-24"}); // action - {category - label}
			}else{
				window.gtag('event', eventName, {event_category: eventName, send_to: "UA-36853599-24"}); // action - {category}
			}
		}catch(err){console.log(err)}
	}	
}


dml_fmc.setupGA = function(){
  if (window.gtag) {
    dml_fmc.debug("setting up GA for 'gtag'","");
    window.gtag('config', 'UA-36853599-24', { 'anonymize_ip': true, 'page_title': window.location.hostname , 'page_location': window.location.href });
	window.gtag('config', 'G-HBP6GXC7BC', { 'anonymize_ip': true, 'page_title': window.location.hostname , 'page_location': window.location.href });
  }
  dml_fmc.GAsetup = true;
}


// GA - END

dml_fmc.getEmbedHtmlData = function(url, callback){
	var request = new XMLHttpRequest();
	request.open('GET', url, true);

	request.onload = function() {
		if (request.status >= 200 && request.status < 400) {
	    callback({"status": "success","status_code":request.status, "data" : request.responseText});
	  } else {
			callback({"status": "success","status_code":request.status, "data" : "We reached our target server, but it returned an error"});
	  }
	};

	request.onerror = function() {
		callback({"error": "success","status_code":request.status, "data" : "Error occured in getting html data"});
	};
	request.send();
}

dml_fmc.getScript = function(source, callback) {
    var script = document.createElement('script');
    script.async = 1;

    script.onload = function(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;
		dml_fmc.widget_wrapper.appendChild(script);


}

dml_fmc.getScript_withAttributes = function(source, attributeObj, callback) {
    var script = document.createElement('script');
    script.async = 1;

    script.onload = function(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;
		dml_fmc.widget_wrapper.appendChild(script);


}


dml_fmc.openApp = function(){
	dml_fmc.openAppTS = Date.now();
  if (dml_fmc.widget_wrapper.querySelector(`#fmc_body`) != null ) return;

	var gaTimer = 100;
	var checkForWindowGA = true;
	var gacheckinterval = setInterval(function(){
		if (window.gtag){
			dml_fmc.debug("GA AVAILABLE - "+ gaTimer/1000 + "s","");
			clearInterval(gacheckinterval);
			dml_fmc.setupGA();
		}else{
			if (checkForWindowGA){
				if (window.ga){
					checkForWindowGA = false;
					console.log("found ga but not gtag - adding gtag library");
					dml_fmc.getScript("https://www.googletagmanager.com/gtag/js?id=UA-36853599-24",function(res){

						window.dataLayer = window.dataLayer || [];
					  window.gtag = function(){dataLayer.push(arguments);}
					  gtag('js', new Date());

					});
				}
			}
			if (gaTimer > 20000){
				dml_fmc.debug("GA NOT AVAILABLE - "+ gaTimer/1000 + "s");
				clearInterval(gacheckinterval);
			}
			gaTimer += 100;
		}
	},100)

  if (document.getElementById("fmc_banner_container")){
    document.getElementById("fmc_banner_container").style.display="none"
  }


	if (navigator.appName == 'Microsoft Internet Explorer' ||  !!(navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/rv:11/))){
		setTimeout(function(){dml_fmc.sendGA360("open app","Browser Not Supported")},2000);
		setTimeout(function(){dml_fmc.sendGA4("user_flow",{
			user_flow : "Browser Not Supported",
			page_location: window.location.hostname,
			page_path: window.location.pathname,
			page_title: document.title
		})},2000);
		//alert("We don't currently support this browser. Please reopen this page in a different browser.")
		if (dml_fmc.widgetMaxHeight != undefined){
			dml_fmc.widget_wrapper.style.height = dml_fmc.widgetMaxHeight;
		}else{
			dml_fmc.widget_wrapper.style.height = window.innerHeight + "px";
		}

		dml_fmc.widget_wrapper.innerHTML = '<div id="dml_browser_not_sup_wrapper" style="background-color: grey"><div id="dml_browser_error_image"><img src="https://facemapping.me/img/pwrbrt_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>' + dml_fmc.widget_wrapper.innerHTML;

		if (dml_fmc.widget_wrapper.offsetWidth >= 768){
			dml_fmc.widget_wrapper.style.background = "url('https://facemapping.me/img/pwrbrt_onboarding_bg_desktop.jpg') no-repeat center center";
		}else{
			dml_fmc.widget_wrapper.style.background = "url('https://facemapping.me/img/pwrbrt_onboarding_mobile_bg.jpg') no-repeat center center";
		}
		dml_fmc.widget_wrapper.style.backgroundSize= "cover";


	}else{

    var sessionTimeString = (new Date()).getTime();
    var cssId = 'fmcStyleSheet';
    var pagelink  = document.createElement('link');
    pagelink.id   = cssId;
    pagelink.rel  = 'stylesheet';
    pagelink.type = 'text/css';
    pagelink.href = 'https://facemapping.me/css/styles.min.css?'+sessionTimeString;
    pagelink.media = 'all';
    dml_fmc.widget_wrapper.appendChild(pagelink);


		setTimeout(function(){dml_fmc.sendGA360("openApp","loading full script")},2000);
		setTimeout(function(){dml_fmc.sendGA4("user_flow",{
			user_flow : "loading full script",
			page_location: window.location.hostname,
			page_path: window.location.pathname,
			page_title: document.title
		})},2000);

		var loadEmbedHTMLStartTime = Date.now();
		dml_fmc.getEmbedHtmlData('https://facemapping.me/widget?'+sessionTimeString, function(res)  {
			var loadEmbedHTMLTime = Date.now() - loadEmbedHTMLStartTime;
			setTimeout(function(){dml_fmc.sendGA4Time('embed_html' , loadEmbedHTMLTime)},2000);
			

			dml_fmc.widget_wrapper.innerHTML = res.data + dml_fmc.widget_wrapper.innerHTML;

			var loadFullScriptStartTime = Date.now();
			dml_fmc.getScript('https://facemapping.me/script.js?'+sessionTimeString,function(){
				dml_fmc.sendGA4Time('full_script' , Date.now() - loadFullScriptStartTime);
			});


			try{
				var loadHotJarStartTime = Date.now();
				dml_fmc.getScript('https://facemapping.me/js/hotjar.js?'+sessionTimeString,function(){
					dml_fmc.debug("added htjar");
					dml_fmc.sendGA4Time('hotjar' , Date.now() - loadHotJarStartTime);
				});
			}catch(err){}


			if (dml_fmc.widgetMaxHeight != undefined){
				dml_fmc.widget_wrapper.style.height = dml_fmc.widgetMaxHeight;
				console.log('preset max height - ', dml_fmc.widgetMaxHeight);
			}else{
				dml_fmc.widget_wrapper.style.height = window.innerHeight + "px";
				console.log('use just window inner height');
			}

			dml_fmc.body = dml_fmc.widget_wrapper.querySelector(`#fmc_body`);
			window.addEventListener('resize',dml_fmc.resizeWrapper);


		})

	}

}

dml_fmc.resizeWrapper = function (){
  dml_fmc.debug('calling resize wrapper');
  if (dml_fmc.widget_wrapper.style.height != "auto"){
	if (dml_fmc.widgetMaxHeight != undefined){
		dml_fmc.widget_wrapper.style.height = dml_fmc.widgetMaxHeight;
		dml_fmc.body.style.height = dml_fmc.widgetMaxHeight;
		console.log('preset max height - ', dml_fmc.widgetMaxHeight);
	}else{
		dml_fmc.widget_wrapper.style.height = window.innerHeight + "px";
		dml_fmc.body.style.height = window.innerHeight + "px";
	}
  }
}

dml_fmc.makeBanner = function(){

  if (dml_fmc.widget_wrapper.querySelector(`#fmc_banner_container`) != null ) return;

  dml_fmc.widget_wrapper.innerHTML = "<div id='fmc_banner_container' onclick='dml_fmc.openApp();'></div>" + dml_fmc.widget_wrapper.innerHTML;

  var bannerEl = document.getElementById("fmc_banner_container");

  bannerEl.style.opacity = 0;

  var sessionTimeString = (new Date()).getTime();
  var cssId = 'fmcBannerStyleSheet';
  var bannerStyle  = document.createElement('link');
  bannerStyle.id   = cssId;
  bannerStyle.rel  = 'stylesheet';
  bannerStyle.type = 'text/css';
  bannerStyle.href = 'https://facemapping.me/css/banner.min.css?'+sessionTimeString;
  bannerStyle.media = 'all';
  bannerEl.appendChild(bannerStyle);

  var bannerContent = document.createElement('div');
  bannerContent.id = "fmc_banner_inner_part";

  bannerContent.innerHTML += `<div id="fmc_banner_content"><div id="fmc_banner_logo"></div>` +
    `<p id="fmc_banner_cta_text">${dml_fmc.bannerTexts.tagline}</p>` +
    `<div id="fmc_banner_content_seperator"><div></div></div>` +
    `<p id="fmc_banner_cta_button">${dml_fmc.bannerTexts.cta}</p></div>`;





  bannerEl.appendChild(bannerContent);

  function updateBannerClassDueWith(){

    document.getElementById("fmc_banner_container").style.backgroundPosition = "center";

    if (dml_fmc.widget_wrapper.offsetWidth >= 768){
      document.getElementById("fmc_banner_container").classList.remove('dml_768');

      let bannerHeight = Math.max(250,Math.min(350,dml_fmc.widget_wrapper.offsetWidth * 0.2));

      document.getElementById("fmc_banner_inner_part").style.height = `250px`;

      document.getElementById("fmc_banner_container").style.height = `250px`;

      document.getElementById("fmc_banner_inner_part").style.backgroundPosition = `30% center, right bottom`;

    }else{
      document.getElementById("fmc_banner_container").classList.add('dml_768');
      document.getElementById("fmc_banner_inner_part").style.height = `${Math.round(0.8* dml_fmc.widget_wrapper.offsetWidth)}px`;
      document.getElementById("fmc_banner_container").style.height = `${Math.round(0.8* dml_fmc.widget_wrapper.offsetWidth)}px`;
      document.getElementById("fmc_banner_inner_part").style.backgroundPosition = `right -${Math.round(0.6* dml_fmc.widget_wrapper.offsetWidth)}px center`;
    }

  }

  if (dml_fmc.widget_wrapper.offsetWidth < 1){
    dmlWrapperDisplayedInterval = setInterval(()=>{
  		if (dml_fmc.widget_wrapper.offsetWidth > 0){
  			clearInterval(dmlWrapperDisplayedInterval);
  			updateBannerClassDueWith()
        setTimeout(function(){
          bannerEl.style.opacity = 1;
        },500)
  		}
  	},200)
  }else{
    updateBannerClassDueWith();
    setTimeout(function(){
      bannerEl.style.opacity = 1;
    },500)
  }



  window.addEventListener("resize",updateBannerClassDueWith);

}






// start app/banner

if (dml_fmc.hasBanner && window.location.hostname.indexOf('ulta.com') < 0){
  dml_fmc.makeBanner()
}else{
  dml_fmc.openApp()
}