var CrucialHome = (function () {

	var fixedTopMenu = document.querySelector('.fixed-top-menu');
	var subPageHeader = document.querySelector('.sub-page-header');
	var subMainMenu = document.querySelector('.sub-main-menu');
	// var $fixedTopMenu = $('.fixed-under-menu');
	var $content = $('.main-menu');
	var emailInputId;
  let subMenuOpen = false;
  let _hideTimer;

	function bind() {

		$(window).scroll(function (evt) {
    	var scroll = $(window).scrollTop();
    	var contentTop = $content.position().top;

      if (subMainMenu) {
        if(scroll >= contentTop + 20) {
          subMainMenu.style.display = 'flex';
          subPageHeader.style.padding = '12px 16px';
        } else if (scroll === 0) {
          subMainMenu.style.display = 'none';
          subPageHeader.style.padding = '4px 16px';
        }
      }

		});

		$('#btn-signup-footer, #btn-signup-products').on('click', handleSignupClick);
    $('#btn-signup-front-main').on('click', processFrontSignup);
    $('#btn-signup-main').on('click', processSignup);
		$('.modal-close').on('click', hideModal);
		$('.hamburger').on('click', toggleDropMenu);
		$('.dropmenu-container .item').on('click', toggleDropMenu);
    document.getElementById('icon-close-mobile-menu').addEventListener('click', hideDropMenu);

    $('#video-intro-banner').on('click', showVideoIntro);

    if (document.getElementById('menu-item-products')) {
      $('#menu-item-products, #fixed-item-products').on('mouseenter', handleMouseEnter);
      $('#menu-item-products, #fixed-item-products').on('mouseleave', handleMouseLeave);
      $('.fixed-sub-menu').on('mouseenter', handleSubMenuMouseEnter);
      $('.fixed-sub-menu').on('mouseleave', handleSubMenuMouseLeave);
    }
    document.body.addEventListener('click', handleBodyClick);

    const url = new URL(window.location);
    const pathName = url.pathname;
    const split = pathName.split('/');
    if (split[1] === 'products') {

      if (split[2] === 'flow-writer') {
        document.getElementById(`product-menu-flowwriter`).style.fontWeight = 600;
        document.querySelector(`#product-menu-flowwriter a`).style.color = '#3366CC';
      } else {
        document.getElementById(`product-menu-${split[2]}`).style.fontWeight = 600;
        document.querySelector(`#product-menu-${split[2]} a`).style.color = '#3366CC';
      }

    }

    let currentDate = new Date();
    document.getElementById('footer-year').innerText = currentDate.getFullYear();

	}


  function handleSubMenuMouseEnter(e) {
    clearTimeout(_hideTimer);
  }

  function handleSubMenuMouseLeave(e) {
    _hideTimer = setTimeout(hideSubMenu, 500);
  }

  function handleMouseEnter(e) {
    clearTimeout(_hideTimer);
    showSubMenu(e);
  }

  function handleMouseLeave(e) {
    _hideTimer = setTimeout(hideSubMenu, 500);
  }

  function handleBodyClick(e) {
    if (subMenuOpen &&
        e.target.id !== 'item-products' &&
        e.target.id !== 'fixed-item-products' &&
        e.target.id !== 'icon-angle-products' &&
        !e.target.closest('.main-menu-item') &&
        !e.target.closest('.fixed-sub-menu')
    ) {
      hideSubMenu();
    }
  }

  function showSubMenu(e) {
    if (subMenuOpen) {
      hideSubMenu();
    }

    const id = e.currentTarget.id.split('-')[2];
    $('#fixed-sub-menu-' + id).show();
    $('#fixed-sub-menu-' + id).css(
      'top',
      e.currentTarget.offsetParent.offsetTop +
        e.currentTarget.offsetHeight +
        10 +
        'px'
    );
    $('#fixed-sub-menu-' + id).css('left', e.currentTarget.offsetLeft + 'px');
    // $('#fixed-sub-menu').css('left', e.currentTarget.offsetParent.offsetLeft - (e.currentTarget.offsetWidth / 2) + 'px');
    subMenuOpen = true;
  }

  function hideSubMenu(e) {
    $('.fixed-sub-menu').hide();
    subMenuOpen = false;
  }

	function toggleDropMenu() {
		$('.dropmenu-container').toggle(200);
	}

	function hideDropMenu() {
		$('.dropmenu-container').hide(200);
	}

	function hideModal() {
		$('.overlay, .modal').hide();
    $('#modal-content').html('');
	}

	function emailIsValid(email) {
		var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		return re.test(email);
	}

  function showVideoIntro() {
    $('.overlay, .modal').show();
    $('.modal-close').show();
    $('#modal-content').html('<iframe src="proxy.php?url=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F460044216" class="video-player" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>');
  }

  function processFrontSignup(e) {

    var emailInputId = '';

    var target = e.currentTarget;
    if (target.id === 'btn-signup-front-main') {
      emailInputId = 'email-front-main';
    }

    var dom = document.getElementById(emailInputId);

    if (!emailIsValid(dom.value)) {
      if (emailInputId === 'email-front-main') {
        $('#signup-front-main-error').css('visibility', 'visible');
      }
      document.getElementById(emailInputId).focus();
      return;
    }

    showModal('<div style="text-align:center;"><div class="spinner"></div><div style="margin-top:20px;">Working on it...</div></div>');

    var submit = submitStickiesSignupForm(document.getElementById(emailInputId).value, emailInputId);
    $.when(submit).done(function(result) {
      if (result.status === 'success') {
        showStickiesSuccessMsg();
        document.getElementById(emailInputId).value = '';
      }
    });

  }

  function showStickiesSuccessMsg() {
    var content = '<div style="width:100%;max-width:400px;text-align:center;"><div><img src="proxy.php?url=https%3A%2F%2Fcrucialhuman.com%2Fimages%2Fwhite-icon.png" style="width: 40px;opacity:0.7;" /></div>' +
      '<div style="margin-top:20px;font-size:1.2em;font-weight:600;">Thanks for joining the Stickies waitlist!</div>' +
      '<div style="margin-top:20px;line-height: 1.5em;">We are adding users and companies progressively and will notify you when access is available.</div>' +
      '<div style="margin-top:40px;">In the meantime, follow us to stay updated:</div>' +
      '<div style="margin-top:20px;"><a href="proxy.php?url=https%3A%2F%2Ftwitter.com%2Fcrucialhuman%3Fref_src%3Dtwsrc%255Etfw" class="twitter-follow-button" data-size="large" data-show-count="false">Follow @crucialhuman</a><script async src="proxy.php?url=https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js" charset="utf-8"></script></div>' +
      '<div style="margin-top:10px;"><script src="proxy.php?url=https%3A%2F%2Fplatform.linkedin.com%2Fin.js" type="text/javascript"> lang: en_US</script><script type="IN/FollowCompany" data-id="34228556"></script></div>' +
      '<div style="margin-top:40px;color:rgb(173, 172, 192);font-size:0.9em;line-height:1.7em;"><em>Sincerely,<br/>Crucial Human</em></div>' +
      '</div>';
    $('#modal-content').html(content);
    $('.modal-close').show();
  }


  function submitStickiesSignupForm(email, src) {
    var host = '/api/?ref=stickies';

    var req = $.ajax({
      url: host,
      type: 'POST',
      data: {
        email : email,
        src : src,
        url : window.location.href
      },
      dataType: 'json',
      success: function (result, status) {
        // handle errors
        if (!result || (result.status === 'error' || result.status === 'exception')) {
          throw new Error(result.message);
        }
      },
      error: function (xhr, status, code) {
        if (xhr.status === 401 || xhr.status === 403) {

        }
      }

    });

    return req;

  }

  function processSignup(e) {

    var target = e.currentTarget;
    if (target.id === 'btn-signup-now-banner') {
      emailInputId = 'signup-email-banner';
    } else if (target.id === 'btn-signup-main') {
			emailInputId = 'email-main';
    }

    var dom = document.getElementById(emailInputId);

    if (!emailIsValid(dom.value)) {
      if (emailInputId === 'signup-email-banner') {
        $('#signup-now-banner-error').css('visibility', 'visible');
      } else if (emailInputId === 'email-main') {
        $('#signup-main-error').css('visibility', 'visible');
      }
      document.getElementById(emailInputId).focus();
      return;
    }

      // otherwise, redirect user to signup form with email pre-populated
      var hash = btoa('#dashboard^' + dom.value.toLowerCase());
      window.location = '//id.crucialhuman.com/create-account?a=project&ref=sp&cu=' + hash;

  }

	function handleSignupClick(e) {
		var target = e.currentTarget;
		if (target.id === 'btn-signup-main') {
			emailInputId = 'email-main';
		} else if (target.id === 'btn-signup-footer') {
			emailInputId = 'email-footer';
		} else if (target.id === 'btn-signup-products') {
			emailInputId = 'email-products';
		}

		var dom = document.getElementById(emailInputId);

		if (!emailIsValid(dom.value)) {
			if (emailInputId === 'email-main') {
				$('#signup-main-error').css('visibility', 'visible');
			} else if (emailInputId === 'email-footer') {
				$('#signup-footer-error').css('visibility', 'visible');
			} else if (emailInputId === 'email-products') {
				$('#signup-products-error').css('visibility', 'visible');
			}
			document.getElementById(emailInputId).focus();
			return;
		}

		showModal('<div style="text-align:center;"><div class="spinner"></div><div style="margin-top:20px;">Working on it...</div></div>');

		var submit = submitSignupForm(document.getElementById(emailInputId).value, emailInputId);
		$.when(submit).done(function(result) {
			if (result.status === 'success') {
				showSuccessMsg();
				document.getElementById(emailInputId).value = '';
			}
		});

	}

	function showSuccessMsg() {
		var content = '<div style="width:100%;max-width:400px;text-align:center;"><div><img src="proxy.php?url=https%3A%2F%2Fcrucialhuman.com%2Fimages%2Fwhite-icon.png" style="width: 40px;opacity:0.7;" /></div>' +
			'<div style="margin-top:20px;font-size:1.2em;font-weight:600;">You are now signed up for Early Access!</div>' +
			'<div style="margin-top:20px;line-height: 1.5em;">We are adding users and companies progressively and will notify you when access is available.</div>' +
			'<div style="margin-top:40px;">In the meantime, follow us to stay updated:</div>' +
			'<div style="margin-top:20px;"><a href="proxy.php?url=https%3A%2F%2Ftwitter.com%2Fcrucialhuman%3Fref_src%3Dtwsrc%255Etfw" class="twitter-follow-button" data-size="large" data-show-count="false">Follow @crucialhuman</a><script async src="proxy.php?url=https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js" charset="utf-8"></script></div>' +
			'<div style="margin-top:10px;"><script src="proxy.php?url=https%3A%2F%2Fplatform.linkedin.com%2Fin.js" type="text/javascript"> lang: en_US</script><script type="IN/FollowCompany" data-id="34228556"></script></div>' +
			'<div style="margin-top:40px;color:rgb(173, 172, 192);font-size:0.9em;line-height:1.7em;"><em>Sincerely,<br/>Crucial Human</em></div>' +
			'</div>';
		$('#modal-content').html(content);
		$('.modal-close').show();
	}

	function showModal(content) {
		$('.overlay, .modal').show();
		$('#modal-content').html(content);
	}

	function submitSignupForm(email, src) {
		var host = '/api/';

		var req = $.ajax({
			url: host,
			type: 'POST',
			data: {
        email : email,
        src : src,
        url : window.location.href
      },
			dataType: 'json',
			success: function (result, status) {
				// handle errors
				if (!result || (result.status === 'error' || result.status === 'exception')) {
					throw new Error(result.message);
				}
			},
			error: function (xhr, status, code) {
				if (xhr.status === 401 || xhr.status === 403) {

				}
			}

		});

		return req;

	}

	bind();

})();