var xhr;
function initXHR(){ 

    try {  
        xhr = new ActiveXObject('Msxml2.XMLHTTP');   
    }
    catch (e) {
        try {   
            xhr = new ActiveXObject('Microsoft.XMLHTTP');    
        }
        catch (e2) {
            try {  
                xhr = new XMLHttpRequest();     
            }
            catch (e3) {  
                xhr = false;   
            }
        }
    }
  
    xhr.onreadystatechange  = function()
    { 
        if(xhr.readyState  == 4) {
            hideErrorMessage();
            hideSuccessMessage();
            if(xhr.status  == 200) {
                parseRegistrationResponse(xhr); 
            }
            else {
                showErrorMessage('Failed to send, try again later.');
            }
        }
    }; 
}

function submitRegistration(){
    msisdn = document.getElementById("mobileNumber").value;
    if (msisdn == '') {
        hideSuccessMessage();
        showErrorMessage('The mobile number doesn\'t seem to be valid.');
    } else {    
        hideErrorMessage();
        showSuccessMessage('Submitting ...', 'block');
        // re-init on every request, seems IE (always) and FF (sometimes) have 
        // issues re-using this object. Didnt see any issues on FF (linux) ever. 
        // Dunno.
        initXHR();
        xhr.open('POST', 'https://www.sniffu.com/fb/uk/json/registerNow.do' + '?msisdn=' + msisdn);
        xhr.send(null); 
    }
}

function parseRegistrationResponse(xhr){
    var regResp = eval('(' + xhr.responseText + ')');

    if (regResp.success) {
      showSuccessMessage(regResp.message);
    } else {
      showErrorMessage(regResp.message);
    }
}

function showSuccessMessage(message) {
    showSuccessMessage(message, "success");
}

function showSuccessMessage(message, style) {
    hideErrorMessage();
    document.getElementById("success").className = style;
    document.getElementById("success").innerHTML = message;
}

function showErrorMessage (message) {
    hideSuccessMessage();
    document.getElementById("error").className = "error";
    document.getElementById("error").innerHTML = message;
}

function hideErrorMessage() {
    document.getElementById("error").className = "error hideDiv";
    document.getElementById("error").innerHTML = "";
}

function hideSuccessMessage () {
    document.getElementById("success").className = "success hideDiv";
    document.getElementById("success").innerHTML = "";
}