$( document ).on('ready', function() {
    $("#registerButton").on('click',function(){
      var fName, lName, email, userName, password, gender;

          fName = $('#firstName').val();
          lName = $('#lastName').val();
          email = $('#userEmail').val();
          userName = $('#userName').val();
          password = $('#userPassword').val();
          gender = $("input[name=gender]:checked").val();

        if(fName=="") {
          $("#firstName").next().show();
        }else{
           $("#firstName").next().hide();
        }
        if(lName=="") {
          $("#lastName").next().show();
        } else {
            $("#lastName").next().hide();
        }
        if(email=="") {
          $("#userEmail").next().show();
        }else{
           $("#userEmail").next().hide();
        }
        if(userName=="") {
          $("#userName").next().show();
        }else{
           $("#userName").next().hide();
        }
        if(password=="") {
          $("#userPassword").next().show();
        } else {
            $("#userPassword").next().hide();
        }
        if(gender==undefined) {
          $("input[name=gender]").next().next().show();
        }else{
           $("input[name=gender]").next().next().hide();
        }

    	if (fName!="" &&lName!="" && userName!="" && password!="" && email!=""){
    		if(gender!=undefined){

          var jsonObject = {
              'email' : email,
              'userPassword' : password,
              'userFirstName' : fName,
              'userLastName' : lName,
              'userName' : userName,
              'userGender' : gender,
              'action' : 'REGISTER'
          };
          $.ajax({
              type: 'POST',
              url: '../data/applicationLayer.php',
              dataType: 'json',
              data: jsonObject,
              headers: {'Content-Type': 'application/x-www-form-urlencoded'},
              success: function(jsonData) {
                console.log(jsonData);
                alert("Welcome " + fName + " " + lName);
                window.location.href = "home.html";
              },
              error: function(errorMsg){
                  alert(errorMsg.statusText);
              }
          });
    		} else {
    			alert("Gender radio button is required.")
    		}
  		} else {
  			alert("Please fill all the fields.")
  		}
    })

    $("#cancelButton").on('click',function(){
    	window.location.href = "login.html";
    })
});