$(document).ready(function() {



  var win = $(window),
      htmlEl = $('html'),
      bodyEl = $('body'),
      overlayEl = $('#overlay');

  bodyEl.delegate('.button', 'mousedown', function(e) {
    e.preventDefault();
  });

  overlayEl.bind('click', function(e) {
    if ($(e.target).hasClass('overlay-wrap')) hideDialog();
  });



  /* ------------------------------------------------------------------------- */




  var htmlElClasses = htmlEl.attr('class'),
      browserNotSupportedDialogEl = $('#browser-not-supported-dialog');
      browserNotSupportedProceedButtonEl = browserNotSupportedDialogEl.find('.button');

  if (!~htmlElClasses.indexOf('js rgba multiplebgs backgroundsize borderradius boxshadow textshadow opacity cssgradients csstransitions fontface')) {
    clearAnim();
    bodyEl.children().addClass('hidden');
    showDialog(browserNotSupportedDialogEl);

    browserNotSupportedProceedButtonEl.click(function(e) {
      bodyEl.children().removeClass('hidden');
      hideDialog(browserNotSupportedDialogEl);
    });
  }



  /* ------------------------------------------------------------------------- */



  var scriptsEl = $('#scripts'),
      testEl = $('<div style="height: 0.1em">').appendTo(scriptsEl),
      testElHeight = testEl.height();

  testEl.remove();

  if (testElHeight > 1) {
    htmlEl.addClass('pixel-tweak');
  }



  /* ------------------------------------------------------------------------- */



  var video1 = new MediaElementPlayer('#how-to-get-started-video-1'),
      video2 = new MediaElementPlayer('#how-to-get-started-video-2'),
      video3 = new MediaElementPlayer('#how-to-get-started-video-3');
  
  function resetVideos(video) {
    video1.pause();
    video2.pause();
    video3.pause();
  };

  var videoContainers = $('.mejs-container'),
      isfullScreenVideoActive = false;

  setInterval(function() {
    if (videoContainers.hasClass('mejs-container-fullscreen') && !bodyEl.hasClass('full-screen-video-active')) {
      bodyEl.addClass('full-screen-video-active');
      isfullScreenVideoActive = true;
    } else if (!videoContainers.hasClass('mejs-container-fullscreen') && bodyEl.hasClass('full-screen-video-active')) {
      bodyEl.removeClass('full-screen-video-active');
    };
  }, 4);



  /* ------------------------------------------------------------------------- */



  var animTimeout,
      animCycle = 0,
      anims = {
        0: {
          classes: 'start-anims',
          duration: 0
        },
        1: {
          classes: 'header-bg-fade-in',
          duration: 400,
          removeClasses: ''
        },
        2: {
          classes: 'header-call-out-title-fade-in',
          duration: 0,
          removeClasses: ''
        },
        3: {
          classes: 'header-call-out-sub-title-1-fade-in',
          duration: 0,
          removeClasses: ''
        },
        4: {
          classes: 'header-call-out-sub-title-2-fade-in',
          duration: 1500,
          removeClasses: ''
        },
        5: {
          classes: 'header-nav-fade-in',
          duration: 100,
          removeClasses: ''
        },
        6: {
          classes: 'bar-fade-in',
          duration: 50,
          removeClasses: ''
        },
        7: {
          classes: 'learn-more-fade-in',
          duration: 50,
          removeClasses: ''
        },
        8: {
          classes: 'content-fade-in',
          duration: 1200,
          removeClasses: ''
        },
        9: {
          classes: 'anims-done',
          duration: 0
        },
        'length': 10
      };

  function cycleAnim() {
    var anim = anims[animCycle];

    clearTimeout(animTimeout);
    bodyEl.removeClass(anim.removeClasses);
    bodyEl.addClass(anim.classes);

    animTimeout = setTimeout(function() {
      if (animCycle !== anims.length) {
        cycleAnim();
      } else {
        onScroll();
      }
    }, anim.duration);

    animCycle++;
  };

  setTimeout(function() {
    var scrollTop = window.scrollY;
  
    if (scrollTop === 0) {
      cycleAnim();
      bodyEl.addClass('animating');
    } else {
      onScroll();
      bodyEl.addClass('anims-done');
      bodyEl.removeClass('no-anim');
    }
  }, 100)

  function clearAnim() {
    clearTimeout(animTimeout);
    bodyEl.removeClass();
    bodyEl.addClass('anims-done');
  }



  /* ------------------------------------------------------------------------- */



  var headerNavEl = $('#header-nav'),
      learnMoreEl = $('#learn-more'),
      learnMoreElHeight = learnMoreEl.height(),
      learnMoreElTopPos = learnMoreEl.offset().top,
      learnMoreElBottomPos = learnMoreElHeight + learnMoreElTopPos;

  function onScroll(e) {
    var scrollTop = window.scrollY;

    if (bodyEl.hasClass('animating') && scrollTop !== 0) {
      clearAnim();
    }

    var headerNavElHeight = headerNavEl.height(),
        learnMoreFloatStart = learnMoreElBottomPos - headerNavElHeight;

    if (scrollTop > 1 && !bodyEl.hasClass('header-nav-floating')) {
      bodyEl.addClass('header-nav-floating');
    }

    if (scrollTop <= 1 && bodyEl.hasClass('header-nav-floating')) {
      bodyEl.removeClass('header-nav-floating');
    }

    if (scrollTop > learnMoreFloatStart && !bodyEl.hasClass('learn-more-nav-floating')) {
      bodyEl.addClass('learn-more-nav-floating');
    }

    if (scrollTop <= learnMoreFloatStart && bodyEl.hasClass('learn-more-nav-floating')) {
      bodyEl.removeClass('learn-more-nav-floating');
    }
  };

  win.bind('scroll', onScroll);



  /* ------------------------------------------------------------------------- */



  var thePlatformVisualNav = $('#the-platform-visual-nav'),
      thePlatformVisual = $('#the-platform-visual');

  function isMouseOut(scope, toEl) {
    var el = $(scope),
        elId = el.attr('id'),
        parentEl = $(toEl).parent(),
        parentElId = parentEl.attr('id');

    if (scope !== toEl && parentElId !== elId) {
      return true;
    }

    return false;
  }

  function togglePlatformVisual(type, elClass) {
    if (type === 'mouseover' && !thePlatformVisual.hasClass(elClass)) {
      thePlatformVisualNav.addClass(elClass);
      thePlatformVisual.addClass(elClass);
    } else if (type === 'mouseout') {
      thePlatformVisualNav.removeClass(elClass);
      thePlatformVisual.removeClass(elClass);
    }
  };

  $('#the-platform-visual-disc-hover, #the-platform-visual-nodes-hover, #the-platform-visual-clouds-hover').each(function(i, el) {
    var el = $(el),
        elClass = el.attr('id').replace('-hover', '-active');

    el.bind('mouseover', function(e) {
      togglePlatformVisual(e.type, elClass);
    });
    el.bind('mouseout', function(e) {
      if (isMouseOut(this, e.toElement)) togglePlatformVisual(e.type, elClass);
    });
  })



  /* ------------------------------------------------------------------------- */



  var howToGetStartedEls = $('#how-to-get-started-steps, #how-to-get-started-description, #how-to-get-started-videos');

  howToGetStartedEls.delegate('.step-label, .step-circle', 'click', function(e) {
    var elClasses = $(e.currentTarget).attr('class');

    resetVideos();

    if (~elClasses.indexOf('step-1')) {
      howToGetStartedEls.attr('class', 'step-1');
      howToGetStartedNextButtonEl.removeClass('hidden');
      howToGetStartedRestartButtonEl.addClass('hidden');
    } else if (~elClasses.indexOf('step-2')) {
      howToGetStartedEls.attr('class', 'step-2');
      howToGetStartedNextButtonEl.removeClass('hidden');
      howToGetStartedRestartButtonEl.addClass('hidden');
    } else if (~elClasses.indexOf('step-3')) {
      howToGetStartedEls.attr('class', 'step-3');
      howToGetStartedNextButtonEl.addClass('hidden');
      howToGetStartedRestartButtonEl.removeClass('hidden');
    }
  });

  var howToGetStartedNextButtonEl = $('#how-to-get-started-next-button'),
      howToGetStartedRestartButtonEl = $('#how-to-get-started-restart-button');

  howToGetStartedNextButtonEl.bind('click', function(e) {
    var elClasses = $(howToGetStartedEls).attr('class');

    resetVideos();

    if (~elClasses.indexOf('step-1')) {
      howToGetStartedEls.attr('class', 'step-2');
      howToGetStartedNextButtonEl.removeClass('hidden');
      howToGetStartedRestartButtonEl.addClass('hidden');
    } else if (~elClasses.indexOf('step-2')) {
      howToGetStartedEls.attr('class', 'step-3');
      howToGetStartedNextButtonEl.addClass('hidden');
      howToGetStartedRestartButtonEl.removeClass('hidden');
    } else if (~elClasses.indexOf('step-3')) {
      howToGetStartedEls.attr('class', 'step-1');
      howToGetStartedNextButtonEl.removeClass('hidden');
      howToGetStartedRestartButtonEl.addClass('hidden');
    }
  });

  howToGetStartedRestartButtonEl.bind('click', function(e) {
      howToGetStartedEls.attr('class', 'step-1');
      howToGetStartedNextButtonEl.removeClass('hidden');
      howToGetStartedRestartButtonEl.addClass('hidden');
  });



  /* ------------------------------------------------------------------------- */



  var signingupDialogEl = $('#signing-up-dialog'),
      signupDialogEl = $('#sign-up-dialog'),
      signupConfirmDialogEl = $('#sign-up-confirm-dialog'),
      questionairDialogEl = $('#questionair-dialog');

  var signupForm1El = $('#sign-up-form-1'),
      signupForm2El = $('#sign-up-form-2'),
      questionairFormEl = $('#questionair-form'),
      errorMessagesListEl = $('#sign-up-error-messages');

  var userName, email, usage;

  signupForm1El.delegate('.button.submit', 'click', function(e) {
    showDialog(questionairDialogEl);
  });
  signupForm1El.submit(function(e) {
    showDialog(questionairDialogEl);
    e.preventDefault();
  })

  questionairFormEl.delegate('.button.submit', 'click', function(e) {
    submitQuestionair();
    submitSignup();
  });
  questionairFormEl.submit(function(e) {
    submitQuestionair();
    submitSignup();
  });

  signupForm2El.delegate('.button.submit', 'click', function(e) {
    submitSignup(signupForm2El);
  });
  signupForm2El.submit(function(e) {
    submitSignup(signupForm2El);
    e.preventDefault();
  })

  $('form').keypress(function(e) {
    if (e.keyCode === 13) { // Enter key
      if (this.id === 'sign-up-form-1') {
        showDialog(questionairDialogEl);
      } else if (this.id === 'sign-up-form-2') {
        submitSignup(this);
      }
      // else if (this.id === 'questionair-form') {
      //   submitQuestionair();
      //   submitSignup();
      // }
    }
  });

  signupConfirmDialogEl.delegate('.button.close', 'click', function(e) {
    hideDialog(signupConfirmDialogEl);
  });

  function submitQuestionair() {
    usage = questionairFormEl.find('textarea').val();
  };

  function submitSignup(formEl, err) {
    var myEmail = formEl ? signupForm2El.find('.sign-up-email-2').val() : signupForm1El.find('.sign-up-email-1').val(),
        myUsage = usage,
        myUserName = formEl ? signupForm2El.find('.sign-up-user-name-2').val() : signupForm1El.find('.sign-up-user-name-1').val();

    if (!formEl) {
      signupForm2El.find('.sign-up-email-2').val(myEmail);
      signupForm2El.find('.sign-up-user-name-2').val(myUserName);
    }

    if (isValidUsername(myUserName) && isValidEmail(myEmail)) {
      showDialog(signingupDialogEl);

      function onError(jqXHR, textStatus, errorThrown) {
        setTimeout(function(){
          showDialog(signupDialogEl);
          setErrors(textStatus);
        }, 750);
      }

      function onSuccess(data, textStatus, jqXHR) {
        function onSuccess(data, textStatus, jqXHR) {
          showDialog(signupConfirmDialogEl);
          signupForm1El.find('.sign-up-email-1').val('');
          signupForm1El.find('.sign-up-user-name-1').val('');
          questionairFormEl.find('textarea').val('');
          signupForm2El.find('.sign-up-email-2').val('');
          signupForm2El.find('.sign-up-user-name-2').val('');
          $('#top').focus();
        };

        if (!data.available) {
          onError(undefined, 'User name already taken. Please try another user name.')
          return;
        };

        submitData({
          email: myEmail,
          error: onError,
          success: onSuccess,
          usage: myUsage,
          userName: myUserName,
        });
      };

      isUniqueUsername({
        error: onError,
        userName: myUserName,
        success: onSuccess
      });

    } else {
      showDialog(signupDialogEl);
      setErrors(undefined, isValidUsername(myUserName), isValidEmail(myEmail));
    }
  }

  function isValidUsername(userName) {
    return /^[A-Za-z0-9]{3,20}$/i.test(userName);
  };

  function isValidEmail(email) {
    return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(email);
  };

  function isUniqueUsername(options) {
    $.ajax({
      contentType: 'application/json',
      dataType: 'json',
      error: options.error,
      success: options.success,
      type: 'GET',
      url: '/api/users/' + options.userName + '/available'
    });
  };

  function setErrors(err, userNameErr, emailErr) {
    errorMessagesListEl.children().remove();

    if (err && err === 'error') {
      errorMessagesListEl.append('<li>Something went wrong on our side. Please try again.</li>');
    } else if (err) {
      errorMessagesListEl.append('<li>' + err + '</li>');
    } else {
      if (!userNameErr) {
        errorMessagesListEl.append('<li>User name is not valid.</li>');
      }

      if (!emailErr) {
        errorMessagesListEl.append('<li>E-mail address is not valid.</li>');
      }
    }
  };

  function submitData(options) {
    $.ajax({
      contentType: 'application/json',
      data: JSON.stringify({"username": options.userName, "email": options.email, "usage": options.usage}),
      dataType: 'json',
      error: options.error,
      processData: false,
      success: options.success,
      type: 'POST',
      url: '/api/users/' + options.userName + '/'
    });
  }



  /* ------------------------------------------------------------------------- */



  function showDialog(dialogEl) {
    clearAnim();

    var scrollTop = window.scrollY;

    bodyEl.addClass('blocked');
    overlayEl.css('top', scrollTop);
    overlayEl.removeClass('hidden');

    $('.dialog').addClass('hidden');

    dialogEl.removeClass('hidden');
    var focusEl = $(dialogEl.find('input, textarea')[0]);
    focusEl.val(focusEl.val());
    focusEl.focus();
  }
  
  function hideDialog(dialogEl) {
    bodyEl.removeClass('blocked');
    overlayEl.addClass('hidden');

    if (dialogEl) {
      dialogEl.addClass('hidden');
    } else {
      $('.dialog').addClass('hidden');
    }
  }



});