function login(){
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      // TODO: 3. If the response text is "invalidUserNamePassword", then we should notify
      //          the user by replacing the innerHTML of <div id="loginError"> element with
      //          "<h3>Invalid user name or password.</h3>".
      if (xmlhttp.responseText === "invalidUserNamePassword"){
          document.getElementById("loginError").innerHTML="<h3>Invalid user name or password.</h3>";
      }
       // TODO: 4. If the reponse text is not "invalidUserNamePassword", then the login is successful.
      //          We should replace the innerHTML of <div id="content"> element with responseText.

    if(xmlhttp.responseText ==="invalidUserNamePassword"){
        document.getElementById("content").innerHTML=xmlhttp.responseText;
    }
    }
  }

  // TODO: 1. Retrieve the input user name and password from the
  //          input elements with id "loginUserName" and "loginPassword".
    var userName = document.getElementById("loginUserName");
    var pw = document.getElementById("loginPassword");


  // TODO: 2. Send an HTTP GET request to retrieve handleLogin.php, which should carry 2
  //          key-value pairs corresponding to "userName" and "password".
    xmlhttp.open("GET","handleLogin.php?userName="+$_GET["userName"] "&password="+$_GET["pw"],true);
    xmlhttp.send();
}

function updateProfile(){

  // TODO: 1. Retrive the nick name, gender and brief introduction
  //          from the input elements with id "nickNameInputBox",
  //          "genderInputBox" and "briefIntroInputBox", repectively.

  var nickName = document.getElementById("nickNameInputBox");
  var gender = document.getElementById("genderInputBox");
  var briefIntro = document.getElementById("briefIntroInputBox");

  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      // TODO: 3. Replace the innerHTML of the <h3 id="heading"> element
      //          with responseText. Then set a "style" attribute
      //          in the <h3 id="heading"> element with value of "color:red;".
      //                Hint: use "setAttribute()" http://www.w3schools.com/jsref/met_element_setattribute.asp
      document.getElementById("heading").getElementsByTagName("h3").innerHTML=xmlhttp.responseText;
      document.getElementById("heading").getElementsByTagName("h3").setAttribute("style", "color: red;");
    }
  }


  // TODO: 2. Generate the HTTP GET request, carrying 3 key-value pairs corresponding to
  //          "nickName", "gender" and "briefIntro"
  xmlhttp.open("GET","handleLogin.php?nickName="+nickName.value "&gender="+gender.value"&briefIntro="+briefIntro.value,true);
  xmlhttp.send();
}

function inputCheck(){

  // TODO: Check the input gender value in the input element with ID "genderInputBox":
  //       if the input value is not "F" nor "M" nor "", show an alert box with the message "Gender should be either F or M"
  //         and refocus the cursor on the gender input box
  if(document.getElementById("genderInputBox").value !== "F" && document.getElementById("genderInputBox").value !=="M" && document.getElementById("genderInputBox").value !=="" ){
      alert("Gender should be either F or M");
    alert("Gender should be either F or M");
    document.getElementById('genderInputBox').focus();

  }



}