let INTROKIT_HAS_EMBEDDED = false;


const styler = `
body.IntroKit_block {
  
}

#IntroKit_container {
  -webkit-text-size-adjust: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  background: none;
  line-height: 1;
  outline: none;
  -webkit-box-shadow: 0 0 0 transparent !important;
  box-shadow: 0 0 0 transparent !important;
  z-index: 2147483647;
  pointer-events: none;
  position: fixed;
  overscroll-behavior: contain;
  height: 100%;
  width: 100%;
  bottom: 0;
  left: 0;
}

#IntroKit_container:focus {
  outline: none;
}

#IntroKit_backdrop {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -o-transition: background 300ms;
  -ms-transition: background 300ms;
  transition: background 300ms;
  z-index: 2147483646;
}

#IntroKit_container #IntroKit_message {
  line-height: 70px;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Helvetica";
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  -ms-transition: 300ms;
  transition: 300ms;
  cursor: pointer;
  user-select: none;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; 
  z-index: 2147483647;
}

#IntroKit_container #IntroKit_message.clickable:active, #IntroKit_container #IntroKit_message.tapped {
  opacity: 1 !important;
}


#IntroKit_container #IntroKit_widget {
  width: 264px;
  height: 580px;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 14px;
  -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.38), 0 22px 70px 4px rgba(0,0,0,0.56);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.38), 0 22px 70px 4px rgba(0,0,0,0.56);
  border-bottom: 0px solid transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translate(0, 538px);
  -moz-transform: translate(0, 538px);
  -o-transform: translate(0, 538px);
  -ms-transform: translate(0, 538px);
  transform: translate(0, 538px);
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  -ms-transition: 300ms;
  transition: 300ms;
  pointer-events: auto;
  z-index: 2147483647;

}
#IntroKit_container #IntroKit_widget iframe {
  border: 0px;
  width: 100%;
  height: 100%;
}
#IntroKit_container.show #IntroKit_widget {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  width: 414px;
}

@media (max-width: 600px) {
  #IntroKit_container #IntroKit_widget {
    width: calc(100% - 28px) !important;
    height: calc(100% - 70px);
    -webkit-transform: translate(0, calc(100% - 42px));
    -moz-transform: translate(0, calc(100% - 42px));
    -o-transform: translate(0, calc(100% - 42px));
    -ms-transform: translate(0, calc(100% - 42px));
    transform: translate(0, calc(100% - 42px));
  }
  #IntroKit_container.show #IntroKit_backdrop {
    background: rgba(0,0,0,0.7);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    pointer-events: auto
  }
  #IntroKit_container.show #IntroKit_message {
    opacity: 0.7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    // cursor: default;
  }
  #IntroKit_container.show #IntroKit_widget {
    -webkit-transform: translate(0, 70px) false;
    -moz-transform: translate(0, 70px) false;
    -o-transform: translate(0, 70px) false;
    -ms-transform: translate(0, 70px) false;
    transform: translate(0, 70px) false;
  }
}`

IntroKit = function () {
  const isDev = document.currentScript.getAttribute("isDev") || document.currentScript.getAttribute("isdev");
	const gymId = document.currentScript.getAttribute("gymId") || document.currentScript.getAttribute("gymid");
  const demo  = document.currentScript.getAttribute("demo") || document.currentScript.getAttribute("demo");
  const GoDaddyHack = document.currentScript.getAttribute("godaddyhack") || document.currentScript.getAttribute("godaddyhack");
  
  let docElement;

  console.log(document.currentScript, gymId)
  try {
    if (window.self !== window.top) {
      docElement = window.parent.document;
      console.log("IntroKit connected to parent frame")
    } else {
      docElement = document;
    }
  } catch (e) {
    docElement = document
  }

	if (!gymId) return console.log("IntroKit: gymId must be set");

  const detectMobile = function () {
      const toMatch = [
          /Android/i,
          /webOS/i,
          /iPhone/i,
          /iPad/i,
          /iPod/i,
          /BlackBerry/i,
          /Windows Phone/i
      ];
      
      return toMatch.some((toMatchItem) => {
          return navigator.userAgent.match(toMatchItem);
      });
  }

  if (!detectMobile() && demo === "true") return;

	// Callback Tool
	const CallbackTool = {
		actions: [],
		run: function (name, email, metadata) {
			if (window["IntroKitCallback"]) window["IntroKitCallback"](name, email, metadata);
			this.actions.map(action => action(name, email, metadata));
		}
	}

  // Bind magic for widget UI
  const bindTap = function (elementId, config) {
    const button = docElement.getElementById(elementId);
    const debug = false;
    let current = false;

    button.addEventListener("touchstart", function(e) {
        e.preventDefault();

        if (debug) console.log('touchstart')

        if (!current) {
          button.classList.add("tapped")
          
          current = {
            pageX: e.pageX,
            pageY: e.pageY
          }
          
          if (config.down) config.down()
        }

    }, false)

    button.addEventListener("touchcancel", function(e) {
        if (debug) console.log('touchcancel')
        button.classList.remove("tapped")
      if (config.cancel) config.cancel()
        current = false
    }, false)

    button.addEventListener("touchend", function(e) {
        if (debug) console.log('touchend')
        button.classList.remove("tapped")
        
        if (current && config.up) config.up();
        current = false;
    }, false)

    button.addEventListener("touchmove", function(e) {
      if (config.propagate !== false) e.preventDefault()
      if (config.propagate !== false) e.stopPropagation();

        const movementX = current && Math.abs(current.pageX - e.pageX);
        const movementY = current && Math.abs(current.pageY - e.pageY);

        if (movementX > 10 || movementY > 10) {
          if (config.cancel) config.cancel()
          button.classList.remove("tapped");
          current = false;
        }
    }, false)
  }

  const bindClick = function (elementId, config) {
    const button = docElement.getElementById(elementId);
    button.classList.add("clickable");

    button.addEventListener("click", function (e) {
      if (config.up) config.up();
    })  
  }

  const bindMagic = function (elementId, config) {
    if (detectMobile()) {
      bindTap(elementId, config)
    } else {
      bindClick(elementId, config)
    }
  }

  const bindCloseButton = function () {
    bindMagic("IntroKit_message", { up: () => IntroKit.hide() })
  }


	// UI Controls
	const UI = {
		isOpen: false,
    firstOpen: false,
		show: function () {
			this.isOpen = true;
			docElement.getElementById('IntroKit_container').className = "show";
      if (detectMobile()) docElement.body.classList.add("IntroKit_block");

      if (!this.firstOpen) {
        this.firstOpen = true;
        bindCloseButton()
      }
		},
		hide: function () {
			this.isOpen = false;
			docElement.getElementById('IntroKit_container').className = "";
      if (detectMobile()) docElement.body.classList.remove("IntroKit_block");
		},
		toggle: function () {
			this.isOpen ? UI.hide() : UI.show();
		},
		onRegistration: function (callback) {
			CallbackTool.actions.push(callback);
		}
	}

	// Let the widget handle it being toggled
  const target = parent.window || window;
	
  target.addEventListener("message", (event) => {
		const { data } = event;
		if (data.action === "toggle") UI.toggle();
		if (data.action === "signUp") CallbackTool.run(data.data.name, data.data.email, data.data.metadata);
	})

	// Append the CSS code necessary for the widget
	const appendCSS = function () {
		const cssCode = styler;

		const style = docElement.createElement("style");
		style.type = "text/css";
		style.innerHTML = cssCode;
		docElement.getElementsByTagName("head")[0].appendChild(style)
	};

	// Append the HTML code necessary for the widget
	const appendHTML = function () {
    const gymUrl = isDev ? "http://localhost:4100" : "https://embed.introkit.com"
		
    const containerCode = `
      <div id="IntroKit_backdrop">
        <div id="IntroKit_message">
          Tap Here to Close
        </div>
      </div>

			<div id="IntroKit_widget" onclick="IntroKit.show()">
				<iframe src="proxy.php?url=${gymUrl}/#/gymId=${gymId}">
					To book an intro class, please open from another browser. Powered by <a href="https://www.introkit.com/>IntroKit</a>
				</iframe>
			</div>`;

		const container = docElement.createElement("div");
		container.id = "IntroKit_container";
		container.innerHTML = containerCode;
		docElement.body.appendChild(container);
	};

	// Load the code when the window is ready
  const action = function () {
      if (!INTROKIT_HAS_EMBEDDED) {
        INTROKIT_HAS_EMBEDDED = true;
        appendCSS();
        appendHTML();
        docElement.IntroKit = UI;
      }
      
      if (GoDaddyHack) GoDaddyHack.split(",").forEach(id => {
        const element = docElement.getElementById(id);
        if (element) element.style.height = "0px"
      })
  }

  if (document.readyState !== 'loading') {
      action()
  } else {
      document.addEventListener('DOMContentLoaded', function () {
          action()
      });
  }

	// Return the UI Controls
	return UI;
}()