var mailIsValid = false;

setTimeout(function () {
  $('#box_1').addClass('active');
}, 1000);

setTimeout(function () {
  $('#habbo').addClass('dance');
}, 1000);

setTimeout(function () {
  $('#box_1').removeClass('active');
}, 2500);

setTimeout(function () {
  $('#box_2').addClass('active');
}, 3500);

setTimeout(function () {
  $('#room_2').addClass('active');
}, 4000);

setTimeout(function () {
  $('#room_1').removeClass('active');
}, 4500);

setTimeout(function () {
  $('#room_3').addClass('active');
}, 5000);

setTimeout(function () {
  $('#box_2').removeClass('active');
}, 7000);

setTimeout(function () {
  $('#box_3').addClass('active');
}, 8000);

setTimeout(function () {
  $('#furni').addClass('active');
}, 9000);

setTimeout(function () {
  $('#box_3').removeClass('active');
}, 14500);

setTimeout(function () {
  $('#box_4').addClass('active');
}, 15500);

setTimeout(function () {
  $('#friends').addClass('active');
}, 16000);

function changeAvatar(value) {
  if (value.length > 2) {
    $.ajax({
      type: "POST",
      url: "/api/login/look",
      data: "username=" + value,
      success: function (response) {
        var jsonObj = jQuery.parseJSON(response);
        if (jsonObj.valid == 'false') {
          $("#imager").css("background-image", "url(/web-gallery/index/images/ghost.png");
        }
        else {
          $("#imager").css("background-image", "url(https://data.sunnieday.nl/sunnie-imaging/avatars/" + jsonObj.response + "&action=std&direction=3&head_direction=3&img_format=png&gesture=spk&headonly=0&size=b");
        }
      }
    });
  }
  else {
    $("#imager").css("background-image", "url(/web-gallery/index/images/ghost.png");
  }
}

function isEmail(email) {
  var regex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
  return regex.test(email);
}

function validateRegisterEmail(value) {
  if (isEmail(value)) {
    if (value.length > 2) {
      $.ajax({
        type: "POST",
        url: "/api/login/mail",
        data: "mail=" + value,
        success: function (response) {
          var jsonObj = jQuery.parseJSON(response);
          if (jsonObj.valid == 'false') {
            $('#reg-mail').addClass("error");
            $('#mail-error-block').removeClass("hidden_item");
            mailIsValid = false;
          }
          else {
            $('#reg-mail').removeClass("error");
            $('#reg-mail').addClass("check");
            $('#mail-error-block').addClass("hidden_item");
            mailIsValid = true;
          }
        }
      });
    }
    else {
      $('#reg-mail').addClass("error");
    }
  }
  else {
    $('#reg-mail').removeClass("check");
    mailIsValid = false;
  }
}

function validateUsername(value) {
  var filter = /[^-a-zA-Z0-9_.:=#!,?@]/i;
  if (value.length >= 3 && value.length <= 25) {
    if (!filter.test(value)) {

      $.ajax({
        type: "POST",
        url: "/api/login/username",
        data: "username=" + value,
        success: function (response) {
          var jsonObj = jQuery.parseJSON(response);
          if (jsonObj.valid == 'false') {
            $('#reg-username').addClass("error");
          }
          else {
            $('#reg-username').removeClass("error");
            $('#reg-username').addClass("check");
          }
        }
      });
    }
    else {
      $('#reg-username').addClass("error");
    }
  }
  else {
    $('#reg-username').addClass("error");
  }
}

$('#volgende-wachtwoord').click(function () {
  var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

  var email = $("#reg-mail").val();
  var dag = $("#geboortedag option:selected").val();
  var maand = $("#geboortemaand option:selected").val();
  var jaar = $("#geboortejaar option:selected").val();

  if (email == "") {
    $('#page1_alert').addClass('alert-danger').html("Oeps! Je bent je e-mailadres vergeten!").fadeIn('slow').delay(3000).fadeOut('slow');
    $('#reg-mail').addClass("error");
  }
  else if (dag == "" || maand == "" || jaar == "") {
    $('#page1_alert').addClass('alert-danger').html("Oeps! Je bent je geboortedatum vergeten!").fadeIn('slow').delay(3000).fadeOut('slow');
  }

  else if (!mailIsValid) {
    $('#page1_alert').addClass('alert-danger').html("Oeps! Gebruik alsjeblieft een geldige e-mailadres!").fadeIn('slow').delay(3000).fadeOut('slow');
    $('#reg-mail').addClass("error");
  }
  else {
    $("#stap2").show();
    $("#stap1").animate({opacity: 0}, {
      step: function (now, mx) {
        scale = 1 - (1 - now) * 0.2;
        left = (now * 50) + "%";
        opacity = 1 - now;
        $("#stap1").css({
          'position': 'absolute'
        });
        $("#stap2").css({'left': left, 'opacity': opacity});
      },
      duration: 800,
      complete: function () {
        $("#stap1").hide();
      },
      easing: 'easeInOutBack'
    });
  }
});

$('#volgende-look').click(function () {
  var password = $("#reg-password").val();
  var passwordRepeat = $("#reg-password-repeat").val();

  if (password == "" || passwordRepeat == "") {
    $('#page2_alert').addClass('alert-danger').html("Vergeet niet alle velden in te vullen!").fadeIn('slow').delay(3000).fadeOut('slow');
  }
  else if (password.length < 6) {
    $('#page2_alert').addClass('alert-danger').html("Je wachtwoord moet meer dan 6 tekens lang zijn en letters en cijfers bevatten.").fadeIn('slow').delay(3000).fadeOut('slow');
  }
  else if (password != passwordRepeat) {
    $('#page2_alert').addClass('alert-danger').html("Je wachtwoorden komen niet overeen!").fadeIn('slow').delay(3000).fadeOut('slow');
  }
  else {
    $("#stap3").show();
    $("#stap2").animate({opacity: 0}, {
      step: function (now, mx) {
        scale = 1 - (1 - now) * 0.2;
        left = (now * 50) + "%";
        opacity = 1 - now;
        $("#stap2").css({
          'position': 'absolute'
        });
        $("#stap3").css({'left': left, 'opacity': opacity});
      },
      duration: 800,
      complete: function () {
        $("#stap2").hide();
      },
      easing: 'easeInOutBack'
    });
  }

});

$('#volgende-tos').click(function () {
  $("#stap4").show();
  $("#stap3").animate({opacity: 0}, {
    step: function (now, mx) {
      scale = 1 - (1 - now) * 0.2;
      left = (now * 50) + "%";
      opacity = 1 - now;
      $("#stap3").css({
        'position': 'absolute'
      });
      $("#stap4").css({'left': left, 'opacity': opacity});
    },
    duration: 800,
    complete: function () {
      $("#stap3").hide();
    },
    easing: 'easeInOutBack'
  });
});

$('#vorige-stap1').click(function () {
  $("#stap1").show();
  $("#stap2").animate({opacity: 0}, {
    step: function (now, mx) {
      scale = 0.8 + (1 - now) * 0.2;
      left = ((1 - now) * 50) + "%";
      opacity = 1 - now;
      $("#stap2").css({'left': left});
      $("#stap1").css({'opacity': opacity});
    },
    duration: 800,
    complete: function () {
      $("#stap2").hide();
      animating = false;
    },
    easing: 'easeInOutBack'
  });
});

$('#vorige-stap2').click(function () {
  $("#stap2").show();
  $("#stap3").animate({opacity: 0}, {
    step: function (now, mx) {
      scale = 0.8 + (1 - now) * 0.2;
      left = ((1 - now) * 50) + "%";
      opacity = 1 - now;
      $("#stap3").css({'left': left});
      $("#stap2").css({'opacity': opacity});
    },
    duration: 800,
    complete: function () {
      $("#stap3").hide();
      animating = false;
    },
    easing: 'easeInOutBack'
  });
});

$('#vorige-stap3').click(function () {
  $("#stap3").show();
  $("#stap4").animate({opacity: 0}, {
    step: function (now, mx) {
      scale = 0.8 + (1 - now) * 0.2;
      left = ((1 - now) * 50) + "%";
      opacity = 1 - now;
      $("#stap4").css({'left': left});
      $("#stap3").css({'opacity': opacity});
    },
    duration: 800,
    complete: function () {
      $("#stap4").hide();
      animating = false;
    },
    easing: 'easeInOutBack'
  });
});

function returnSunnie(value, field) {
  if (value != 4) {
    $("#stap" + value).show();
    $("#stap4").animate({opacity: 0}, {
      step: function (now, mx) {
        scale = 0.8 + (1 - now) * 0.2;
        left = ((1 - now) * 50) + "%";
        opacity = 1 - now;
        $("#stap4").css({'left': left});
        $("#stap" + value).css({'opacity': opacity});
      },
      duration: 800,
      complete: function () {
        $("#stap4").hide();
        animating = false;
      },
      easing: 'easeInOutBack'
    });
  }
  if (field != 'none') {
    $('#reg-' + field).addClass("error");
  }
}
// Forgot password

$('#open_forgot').click(function () {
  $('#forgot_password').addClass('active');
});


$('.close_forgot').click(function (event) {
  $('#forgot_password').removeClass('active');
  event.preventDefault();
});


// Register

$('.signup').click(function () {
  $('#register').addClass('active');
  $('#login').removeClass('active');
});

$('.signin').click(function () {
  $('#register').removeClass('active');
  $('#login').addClass('active');
});

$('#signup-cancel').click(function () {
  $('#register').removeClass('active');
  $('#login').addClass('active');
});


// Select
(function () {
  [].slice.call(document.querySelectorAll('select.cs-select')).forEach(function (el) {
    new SelectFx(el);
  });
})();


var registerStyle = $(".roundedStyle").children("img").attr("alt");
var selectedlook = 'hr-115-45.hd-180-1.ch-3111-81-1408.lg-275-1408';
var selectedSlot = '1-sunnie-hoofd-m';
$(".roundedStyle").click(function () {
  $(".roundedStyle").each(function () {
    $(this).removeClass("active")
  });
  $(this).addClass("active");
  registerStyle = $(this).children("img").attr("alt");
  selectedlook = $(this).children("img").data("look");
  selectedSlot = $(this).children("img").data("slot");

  $("#sunnielook-voorbeeld").attr("src", "https://www.sunnieday.nl/images/looks/index/" + selectedSlot + "-big.png");

});

$("#log-mail, #log-password").keypress(function (event) {
  if (13 == event.which) {
    event.preventDefault();
    $("#doLogin").trigger("click");
  }
});
$("#forgot-mail").keypress(function (event) {
  if (13 == event.which) {
    event.preventDefault();
    $("#doForgot").trigger("click");
  }
});
$("#reg-username").keypress(function (event) {
  if (13 == event.which) {
    event.preventDefault();
    $("#doRegister").trigger("click");
  }
});

/* Menu Mobile */
$(".burger").click(function () {
  $(".menu_mobile_content, .burger").toggleClass("active");
});

$("#doLogin").click(function (event) {
  var mail = $("#log-mail").val();
  var password = $("#log-password").val();
  if (0 == mail.length || 0 == password.length) {
    $(".alert").addClass("alert-danger").html("<b>Oeps!</b> Vergeet niet alle velden in te vullen!").fadeIn("slow").delay(1E3).fadeOut("slow");
  } else {
    $.ajax({
      type: "POST",
      url: "/login/do",
      data: {'log-mail': mail, 'log-password': password},
      success: function (response) {
        var jsonObj = jQuery.parseJSON(response);
        if (jsonObj.valid == 'false') {
          $('.alert').addClass('alert-danger').html(jsonObj.response).fadeIn('slow').delay(3000).fadeOut('slow');
        }
        else {
          if ($('.alert').hasClass('alert-danger')) {
            $('.alert').removeClass('alert-danger');
          }
          $('.alert').addClass('alert-success').html(jsonObj.response).fadeIn('slow').delay(1000).fadeOut('slow');
          window.location.href = '/me';
        }
      }
    });
  }
  event.preventDefault();

});

$('#doRegister').click(function () {
  var username = $("#reg-username").val();
  var mail = $("#reg-mail").val();
  var password = $("#reg-password").val();
  var bthDay = $("#geboortedag").val();
  var bthMonth = $("#geboortemaand").val();
  var bthYear = $("#geboortejaar").val();
  var security = grecaptcha.getResponse();
  var terms = $('#accept-terms').is(':checked');
  grecaptcha.reset();

  $('#page4_alert').addClass('alert-warning').html('We controleren je registratie. Een ogenblik geduld alstublieft!').fadeIn('slow');

  $.ajax({
    type: "POST",
    url: "/account/register",
    data: {username: username, email: mail, password: password, 'bth-day': bthDay, 'bth-month': bthMonth, 'bth-year': bthYear, 'look': selectedSlot, 'captcha': security, 'source': 'web', rules: terms },
    success: function (response) {

      if ($('.alert').hasClass('alert-warning')) {
        $('.alert').removeClass('alert-warning');
      }

      if (!response.data.valid) {
        $('#page' + response.data.return + '_alert').addClass('alert-danger').html(response.data.message).delay(5000).fadeOut('slow');
        returnSunnie(response.data.return, response.data.field);
      }
      else {
        if ($('.alert').hasClass('alert-danger')) {
          $('.alert').removeClass('alert-danger');
        }

        if ($('.alert').hasClass('alert-warning')) {
          $('.alert').removeClass('alert-warning');
        }

        $('.alert').addClass('alert-success').html(response.data.message).delay(1000).fadeOut('slow');
        window.location.href = '/me';
      }
    }
  });
});


$(document).ready(function () {
  $.ajax({
    url: "/api/online",
    success: function (a) {
      $(".online").html(a.data.online + " spelers online!")
    }
  });
});

$('#doforgot').click(function () {
  event.preventDefault();
});


$("#doForgot").click(function (event) {
  var mail = $("#forgot-mail").val();
  $("#forget_alert").addClass("alert-danger").html("We controleren de gegevens. Een ogenblik geduld alstublieft!").fadeIn("slow");
  if (0 == mail.length) {
    $("#forget_alert").addClass("alert-danger").html("<b>Oeps!</b> Vergeet niet alle velden in te vullen!").fadeIn("slow").delay(1E3).fadeOut("slow");
  } else {
    $.ajax({
      type: "POST",
      url: "/api/login/resetpassword",
      data: {mail: mail},
      success: function (response) {
        $("#forget_alert").addClass("alert-danger").html("We controleren de gegevens. Een ogenblik geduld alstublieft!").fadeIn("slow");

        if (!response.data.valid) {
          $("#forget_alert").addClass("alert-danger").html(response.data.response).fadeIn("slow").delay(2000).fadeOut("slow");
        }
        else {

          if ($("#forget_alert").hasClass("alert-danger")) {
            $("#forget_alert").removeClass("alert-danger");
          }

          $("#forget_alert").addClass("alert-success").html(response.data.response).fadeIn("slow");
          $("#doForgot").html("Je kunt over 10 seconden weer een mail sturen!").delay(10000).prop("disabled", true);

          if ($("#doForgot").hasClass("customGreenButton")) {
            $("#doForgot").removeClass("customGreenButton");
            $("#doForgot").addClass("customRedButton");
          }

          setTimeout(function () {
            $("#doForgot").html("Stuur opnieuw een mail!").delay(10000).prop("disabled", false);
            if ($("#doForgot").hasClass("customRedButton")) {
              $("#doForgot").removeClass("customRedButton");
              $("#doForgot").addClass("customGreenButton");
            }
          }, 10000);

        }
      }
    });
  }
  event.preventDefault();
});

function redirectToMePage() {
  window.location.href = 'https://sunnieday.nl/me';
}

$('.close_facebook').click(function (event) {
  $('#oauth_login').removeClass('active');
  event.preventDefault();
});

$('#loginFacebook').click(function (event) {
  $('#oauth_login').addClass('active');
  facebookLogin();
  event.preventDefault();
});

var loginTimer;

function facebookLogin() {
  var timeleft = 15;
  loginTimer = setInterval(function(){

    $('#facebook_login_status').css('text-align','center');
    $('#facebook_login_buttons').hide();
    $('#facebook_login_loading').show();

    --timeleft;

    if(timeleft > 10){
      $('#facebook_login_status').html("Een ogenblik geduld...");
    }
    else {
      $('#facebook_login_status').html("Een ogenblik geduld... Inloggen via Facebook duurt langer dan verwacht. ");
    }

    if(timeleft <= 0){
      $('#facebook_login_status').html("Op dit moment is inloggen via Facebook niet beschikbaar. Je kunt nog wel via een e-mailadres een account aanmaken en spelen zonder Facebook! <br/><br/>Neem contact op met de Sunnieday helpdesk voor meer informatie!").css('text-align','left');
      $('#facebook_login_buttons').show();
      $('#facebook_login_loading').hide();
      clearInterval(loginTimer);
    }
  },1000);

  FB.login(function (response) {
    if (response.authResponse) {
      getFacebookData();
    } else {
      $('#facebook_login_status').html("Op dit moment is inloggen via Facebook niet beschikbaar. Je kunt nog wel via een e-mailadres een account aanmaken en spelen zonder Facebook! <br/><br/>Neem contact op met de Sunnieday helpdesk voor meer informatie!").css('text-align','left');
      $('#facebook_login_buttons').show();
      $('#facebook_login_loading').hide();
      clearInterval(loginTimer);
    }
  }, {scope: 'email'});
}

function getFacebookData(){
  FB.api('/me', {locale: 'nl_NL', fields: 'id,name,email'},
    function (response) {
      $.ajax({
        type: "POST",
        url: "/api/facebook/callback",
        data: {response: response},
        success: function (response) {
          if(response.data.valid){
            clearInterval(loginTimer);
            window.location.href = '/me';
          }
          else {
            clearInterval(loginTimer);
            $('#facebook_login_status').html(response.data.message).css('text-align','left');
            $('#facebook_login_buttons').show();
            $('#facebook_login_loading').hide();
          }
        }
      });
    });
}