var CrucialHome = (function () {

	var $fixedTopMenu = $('.fixed-top-menu');
	// var $fixedTopMenu = $('.fixed-under-menu');
	var $content = $('.content');
	var emailInputId;
  let subMenuOpen = false;
  let _hideTimer;

	function bind() {

		window.addEventListener('scroll', handleScroll);
    handleScroll();

		$('#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 .icon').on('click', toggleDropMenu);
		$('.dropmenu-container .item').on('click', toggleAccordion);

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

    $('.main-menu-item').on('mouseenter', handleMouseEnter);
    $('.main-menu-item').on('mouseleave', handleMouseLeave);
    $('.fixed-sub-menu').on('mouseenter', handleSubMenuMouseEnter);
    $('.fixed-sub-menu').on('mouseleave', handleSubMenuMouseLeave);

    document.body.addEventListener('mousedown', handleBodyClick);

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

  function handleScroll(e) {
    if (!document.getElementById('underlayment')) {
      return;
    }
    var scroll = window.scrollY;
    if(scroll >= 10) {
      $fixedTopMenu.css('display', 'flex');
      $('.hamburger .icon').css('color', '#3366CC');
    } else {
      $fixedTopMenu.css('display', 'none');
      $('.hamburger .icon').css('color', '#5DADE2');
    }
  }

  function handleBodyClick(e) {
    if (e.target.classList.contains('main-menu-item')) {
      return;
    }
    if (subMenuOpen &&
        !e.target.closest('.fixed-sub-menu')
    ) {
      hideSubMenu();
    }
  }

  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 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() {
      if ($('.dropmenu-container').is(':visible')) {
        document.querySelector('.hamburger .icon').classList.remove('fa-bars');
        document.querySelector('.hamburger .icon').classList.add('fa-times');
        document.body.style.overflow = 'hidden';
      } else {
        document.querySelector('.hamburger .icon').classList.add('fa-bars');
        document.querySelector('.hamburger .icon').classList.remove('fa-times');
        document.body.style.overflow = 'auto';
      }
    });
	}

  function toggleAccordion() {

  }

	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%2Fstickies.app%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.stickies.app/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%2Fstickies.app%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();

})();