var ProcessingElements = "<div class = 'center'><center>"
        + "<div id = 'rotatingDiv' class = 'HVCenterContainer circle rotate' style = 'box-shadow: 0 1px 6px rgba(0,0,0,0.52), 0 1px 4px rgba(0,0,0,0.24); display: block'> </div>"
        + "<div id = 'percentageDiv' class = 'HVCenterContainer' style = 'width: 98%; display: none'>"
        + "<div id = 'percentage' class = 'CenterContainer circle' style = 'color: darkblue' ></div>"
        + "</div><div id = 'messageDiv' style = 'width: 98%; margin-top: 20px; display: none'>"
        + "<div id = 'message' class = 'CenterContainer roundcorners' style = 'padding:2px;"
        + "width: fit-content; text-align: center; background-color: lightcyan'>"
        + "</div></div></center></div>";

// line 3,5 none, 

/*  NOT USED - This method gets the current location of this machine through 
 * navigator object and passes it to showThisLocation() where further
 * processing with this location can be carried out. */
function getLocations() {
 if (navigator.geolocation) {
  // timeout at 10000 milliseconds (10 seconds)
  var options = {timeout: 5000};
  navigator.geolocation.getCurrentPosition
          (showThisLocation, errorHandler, options);
 } else {
  alert("Sorry, browser does not support geolocation!");
 }
}

/* NOT USED - Called from getLocations() to set the current location as center on 
 * the with the marker (School bus image)*/
function showThisLocation(position) {
 /* To get actual location of this machine */
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;
 document.getElementById("latlong").value = latitude + "," + longitude;
}

function errorHandler(err) {
 alert("Kindly allow this page to access your location in order to proceed");
 if (err.code === 1) {
  document.getElementById("latlong").value = null;
  // alert("Error: Location Access is denied. Kindly enable location access!");
 } else if (err.code === 2) {
  document.getElementById("latlong").value = null;
//  alert("Error: Location is unavailable. Location is needed to proceed");
 }
}

function setLocalStorage(state) {
 if (typeof (Storage) !== 'undefined') {
  //  alert("Browser support local storage");
  localStorage.proceed = state;
 } else {
  alert("Browser does not support local storage");
 }
}

function getLocalStorage() {
 if (typeof (Storage) !== 'undefined') {
  return localStorage.proceed;
 } else {
  alert("Browser does not support local storage");
 }
}


/* Extracts and returns maximum number of days in this month of this date */
function getMaxDays(DTSTRING) {
 var DT = new Date(DTSTRING);
 var lastDay = new Date(DT.getFullYear(), DT.getMonth() + 1, 0);
 var tempDate = new Date(lastDay.toDateString());
 return(tempDate.getDate());
}

function clearFrame(iframe) {
 document.getElementById(iframe).src = 'about:blank';
}
/*****************************************************************************
 * Track events of GetXmlHttpObject.
 * param msgTextDiv - division containing msg text diaplay message eg.. Processing etc
 * param msgValue - String value of message to be displayed
 * @param oEvent - Progress event
 * ***************************************************************************/
function updateProgress(oEvent) {
 if (oEvent.lengthComputable) {
  var percentComplete = Math.round(oEvent.loaded / oEvent.total * 100, 2);
  document.getElementById("percentage").innerHTML = percentComplete + "%";
  //    msgTextDiv.value = msgValue;
  console.log("Completed: " + percentComplete);
  //      console.log("msg is " + msgValue);
 }
}

function show404Page(loadingDiv) {
 /* Calculate the center position to display pop up window */
 var myWidth = screen.width - (screen.width / 100 * 10); // minus 25%
 var myHeight = screen.height - (screen.height / 100 * 5); // minus 10%
 var left = (screen.width / 2) - (myWidth / 2);
 var top = (screen.height / 2) - (myHeight / 2);
 //alert();
 //alert("Href is " + window.location.href);        // gives full path of page from where this method if called
 //alert(window.location.hostname);        // localhost
 //alert(window.location.pathname);        //

 /* Build error file path name  */
 var path = window.location.href;
 var errorFile = "404"; //path.substring(0, path.lastIndexOf("SG")) + "SG/JSP/404.jsp";
 var message = "Oops!!! The resources that you are looking is not available at the moment. Try again later. ";
 /* Redirect to 404 page (pop up as window) on the same page */

 document.getElementById(loadingDiv).style.display = "none"; // Finally hide
 return window.open(errorFile + "?info=" + message, "Page Not Found",
         'toolbar=no, location=no, directories=no, status=no,\n\
                            menubar=no, scrollbars=no, resizable=no, copyhistory=no, \n\
                            width=' + myWidth + ', height=' + myHeight + ', \n\
                            top=' + top + ', left=' + left);
 /* Redirect to 404 page in a new windowe */
 //    window.open("${pageContext.request.contextPath}/JSP/404.jsp?info="+info, <name of iframe>
 //            "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");


}

function transferComplete(evt) {
 //    $("#divWithLoadingGif").hide();
 //  alert("Transfer Completed");
 //      alert(evt);
}

/******************************************************************************
 * This function is called from the submit() event of any form. Forms are of two
 * types. In one form, we may send / upload files of the file input along with 
 * some other data AND in another type, we are only sending non-file character 
 * data to the server. 
 * 
 * In the case where we are sending some data (may be alongwith 'file') through
 * xmlhttpRequest() object by appending FormData() object to the form, then we 
 * use 'POST' method and set form enctype="multipart/form-data" on the client 
 * side and annotate @MultipartConfig in the servlet.
 * 
 * FormData() Object CAN BE ONLY USED WITH THE POST METHOD, whereas, form
 * enctype="multipart/form-data" can be used in both 'POST' as well as 'GET'.
 * But we should then annotate @MultipartConfig in the servlet.   
 * 
 * This is because HTML5 FormData API sends a multipart/form-data request only 
 * and was initially designed to upload files through AJAX. The 
 * request.getParameter() on the server side by default recognizes 
 * application/x-www-form-urlendoded request only.
 * 
 * In another case, where we are sending some data (non-file) and expect the 
 * server to send some data (binary or character encoded), then we use 'GET'. 
 * In this also, we can use form enctype="multipart/form-data" and annotate
 * the servlet with @MultipartConfig, BUT we CANNOT append formData() object
 * to the form and send, because in GET we have to append data string with the 
 * URL.(POST and GET both implemetations are done in report_cards.jsp)
 * 
 * If we don't want to use MultipartConfig, we can use Apache Commons FileUpload
 * In case of sending non-file data, we can also explicitly specify 
 * xhttp.setRequestHeader("Content-type", "application/x-www-form-urlendoded")
 * which is default in case of non-file data.
 * 
 * We are keeping two flags as uploadFlag and downloadFlag for the purpose of 
 * showing % circle, which is only shown to display percentage of data uploaded
 * or downloaded. In the case of upload, the transfer starts immediately, but in
 * the case of download, it strats only when status becomes 3, and hence we make
 * it  visible accordingly.
 *  
 * @param requestType - GET or POST - formData is not used in case of GET
 * @param formID - in the case of POST - only id of the form that is submitted
 * ************* - in the case of 'GET'- entire URL string with appended data     
 * @param loadingDiv - id of Main loading Division
 * @param msgDiv - id of inner Text Message Div in Main loading Division
 * @param percentDiv -  To display percentage value - 99%
 * @param msgTextDiv - textDiv to diaplay message eg.. Processing etc
 * @param msgValue - String value of message to be displayed
 * @param formData - FormData() object, contains key-value pairs of form elements 
 * *************** when requestType is POST, is set to 'null' in case of GET
 * @param downloadFlag - true when binary file is to be received from the servlet
 * @param uploadFlag - true when binary file is to be send to the servlet
 * @param linkDiv - division to display url link to download Report card.
 * @param callback - To receive callback from the response
 * ***************************************************************************/
function sendAndReceiveData(requestType, formID, loadingDiv, msgDiv, percentDiv,
        msgTextDiv, msgValue, formData, uploadFlag, downloadFlag, linkDiv, callback) {
 try {
  //     alert("in send data");
  /* To access value of the form field stored in FormData() Object */
  //   alert(formData.getAll('d_name'));     
  //      alert(formData.getAll('C_FLAG')); 
  /* Division to show download link */
  if (linkDiv) {
   document.getElementById(linkDiv).style.display = "none"; // hide url link division
  }
  /* Main loading division */
  document.getElementById(loadingDiv).style.display = "block"; // show

  /* Hide percentage showing circle div of the Main loading div */
  document.getElementById('percentageDiv').style.display = "none"; // hide

  /* Hide rotating circle div of the Main loading div  */
  document.getElementById('rotatingDiv').style.display = "none"; // hide

  /* Show Message showing inner div of Main loading division */
  document.getElementById(msgDiv).style.display = "block"; // show

  /* Automatically resize the text box and its division */
//  msgTextDiv.style.width = ((msgValue.length) * 7) + 'px';
//  document.getElementById(msgDiv).style.width = msgTextDiv.style.width;

  /* Set value in the text box irrespective of type of message */
  //msgTextDiv.value = msgValue;

  msgTextDiv.innerHTML = msgValue;
  msgTextDiv.style.width = ((msgValue.length) * 7) + 'px';
  /**********************************************************************
   * When downloadFlag is true then we are uploading/ downloading a file and
   * hence percentage of transfer is shown.
   * *******************************************************************/

  var xhttp = GetXmlHttpObject();
//alert(uploadFlag);
  if (uploadFlag || downloadFlag) {
   /* Hide rotating cirlce div of Main loading division */
   document.getElementById('rotatingDiv').style.display = "none"; // hide
   if (uploadFlag) {
    /* Show percentage showing circle div of the Main loading div */
    document.getElementById('percentageDiv').style.display = "block"; // show
   }
   if (downloadFlag) {
    xhttp.responseType = "blob"; // For downloading report cards
   }
  } else {
   /* Show rotating cirlce div of Main loading division */
   document.getElementById('rotatingDiv').style.display = "block"; // show
  }

  /* Add event listener for the upload event */
  xhttp.upload.addEventListener('progress', updateProgress.bind(null), false);
  xhttp.upload.addEventListener('load', transferComplete);
  /* Add event listener for the download event */
  xhttp.addEventListener('progress', updateProgress.bind(null), false);
  xhttp.addEventListener('load', transferComplete);
  /* POST request may also be called without sending / receiving of binary 
   * data. In such case percentage division is not shown  */
  if (requestType === "POST") {
   xhttp.open("POST", formID.getAttribute('action'), true);
   xhttp.send(formData);
  } else {
   //      alert("in get action formID is " + formID);
   xhttp.open("GET", formID, true);
   xhttp.send();
  }
//alert(formID);

  //xhttp.send();
  xhttp.onreadystatechange = function () {
   /*******************************************************************
    * There can be 4 readyState values: 1,2,3,4. Final Response from the
    * server is contained in 4. Hence we are checking that only.
    * When binary data is expected from the servlet, then responseType 
    * is set as blob. This response is hence interpreted accordingly
    * in the Blob() data object. Problem is about interpretaion of 
    * text message received from the server as blob. In order to overcome
    * this, custom status is set in the servlet with response.setStatus(205)
    * and the text message is also set in the response header as 'ERROR'
    * which is interpreted here accordingly and displayed
    * *****************************************************************/
   //   alert(xhttp.readyState);
   //   alert(xhttp.status);

   if (xhttp.readyState === 4) {
    /* We are checking that even at the final response also, if 
     * no page on server is found (404) or some internal error
     * occurred in fetching the page on the server. then we display 
     * a 404 poup page
     ***************************************************************/

    if (xhttp.status === 404) {
     show404Page(loadingDiv);
    } else {

     /* Status is 200 on success, 205 (set in case of error/session timed out) */
     if (downloadFlag) {
      //    alert("in download flag");
      var blob = new Blob([this.response], {type: "application/octet-stream"});
      var reader = new FileReader();
      reader.addEventListener('loadend', function (e) {
       var txt = e.srcElement.result;
       if (xhttp.status === 200) {
        //  alert("200 status");
        if (txt !== 'null') {
         //     alert("The message  text is: " + txt);
         //     alert("Status is " + xhttp.getResponseHeader('STATUS'));
         //     alert("File name is " + xhttp.getResponseHeader('FILENAME'));
         //     alert("link div is " + linkDiv);
         /* Download automatically and create a link also */
         if (linkDiv && xhttp.getResponseHeader('STATUS') === 'OK') {
          //       alert(txt);
          var blobUrl = URL.createObjectURL(blob);
          var filename = xhttp.getResponseHeader('FILENAME');
          var link = document.createElement("a");
          link.href = blobUrl;
          link.download = filename;
          /* To provide link to download report cards */
          //    link.innerHTML = "Click here to download report cards";
          /* To start automatic download */
          link.click();
          URL.revokeObjectURL(link.href);
          //    document.getElementById(linkDiv).appendChild(link);
          //    document.getElementById(linkDiv).style.display = "block";      // show

         }
         /* Displayed for downloading (downloadFlag is set as true) 
          * any BLOB such as Report cards. 
          * Since we are receiving BLOB in the response, it cannot be 
          * displayed as a message with alert. Hence the text message 
          * may be passed seperately in the responseheader by the servlet.
          * This text message can be passed seperately in the calling 
          * stub without any JSON formatting. */
         //   alert(xhttp.getResponseHeader('MESSAGE'));
         var myResponse = (xhttp.getResponseHeader('MESSAGE'));
         if (callback) {
          callback(myResponse);
         }

        }
       } else if (xhttp.status === 205) {
        alert(xhttp.getResponseHeader('MESSAGE'));
       } else if (xhttp.status === 500) {
        alert("Error 500: Some internal error occurred. Please logout and retry");
       }
      });
      reader.readAsText(blob);
     } else {
      if (xhttp.status === 200) {
       /***********************************************************
        * downloadFlag = false means we are NOT downloading
        * any binary file with getOutputStream().write().
        * We are receiving the JSON response from the server, by 
        * simply using POST or GET request tothe server. 
        * Hence we can use callback code here if needed
        * ********************************************************/
       //    alert("in upload flag");
       //     alert(xhttp.responseText);
       //      alert(xhttp.status);
       var myResponse = JSON.parse(xhttp.responseText);
       //     alert("Here my response is "+myResponse);
       /* CALL BACK CODE  */
       /* Do not interprete here simply send as it is because it will be
        * appropriately interpreted in the calling stub */
       /* Send the result to the calling stub */
       if (callback) {
        callback(myResponse);
        //document.getElementById(loadingDiv).style.display = "none";        // Finally hide
       }
      } else if (xhttp.status === 500) {
       alert("Error 500: Some internal error occurred. Please logout and retry");
      }
     }
    }
    /* Ultimately Hide busy icon in all cases */
    document.getElementById(loadingDiv).style.display = "none";
   } else if (xhttp.readyState === 3) {
    /* We show the percentage division when we start receiving 
     * binary data from the server or when we start sending data from
     * the client. readyState 3 means client start receiving the data.
     * hence start showing the percentage of data received when 
     * readyState reaches 3. 
     * But in case where we are uploading the data, which starts 
     * immediately, we need to show the percentage of the data send
     * immediately with xhttp.send()
     ***************************************************************/
    // console.log("Ready state is 3...");
    if (downloadFlag) {
     document.getElementById('percentageDiv').style.display = "block"; // show
    }
   }

   console.log("ready state is " + xhttp.readyState);
   /* Other readyState can be interpreted here (2) if required */

  };
 } catch (err) {
  /* Hide Main loading division */
  document.getElementById(loadingDiv).style.display = "none"; // hide
  alert(err);
 }

}

/* THIS FUNCTION CAN BE CALLED THROUGH CALLBACK FROM THE CALLING JSP PAGE AND
 * CAN BE PROCESSED FURTHER
 * This is a function used for filling select combo with the key-value pair.
 * It calls the common servlet through Ajax Call and get the response based 
 * on the id_value, and FLAG.
 *  
 * dd_id1 = select 1 to be populated with the same data
 * dd_id2 = select second to be populated with the same data
 
 * FLAG is different for each call based on the requirement
 * SAMEFLAG is 'S' or 'D' for same or different.
 *  
 * flag = "CT"  - Gets all classes + sec taught by this employee
 * tempFlag is used to pass hashed client_id when called from submit_assignments.jsp
 * otherwise it is passed as null
 *****************************************************************************/
function getKeyValue(id_value1, id_value2, dd_id1, dd_id2, FLAG, SAME_FLAG, tempFlag)
{
//alert (tempFlag);
 var c_flag = null;
 if (tempFlag) {
  c_flag = tempFlag;
 }

 //  alert(id_value);
 if (id_value1) {
  id_value1 = id_value1.trim();
 }

 if (id_value2) {
  id_value2 = id_value2.trim();
 }

 var dd_id_array;
 if (!dd_id2) {
  if (dd_id1) {
   dd_id_array = [dd_id1]; // create s single element array and pass
  }
 } else {
  if (dd_id1) {
   dd_id_array = [dd_id1, dd_id2]; // create s single element array and pass
  }
 }

 if ((!dd_id_array) || (dd_id_array.length === 0)) {
  alert("Empty KeyValue Array. Logout and retry");
  return;
 } else {
  for (var i = 0; i < dd_id_array.length; i++) {
   clearSelect(dd_id_array[i]);
  }
 }

 var percent;
 var msg;
 if (document.getElementById("percentage")) {
  percent = document.getElementById("percentage");
 }
 if (document.getElementById("message")) {
  msg = document.getElementById("message");
 }

 var msgvalue = "Fetching data. Please wait..";
 var form1 = "getKeyValue?flag=" + FLAG
         + "&q1=" + id_value1
         + "&q2=" + id_value2
         + "&c_flag=" + c_flag;

 sendAndReceiveData('GET', form1, 'uploadingDiv', 'messageDiv',
         percent, msg, msgvalue, 'null', false, false, null, function (responseArray) {
          if (responseArray.length > 0) {
           if (responseArray[0].KEY === "ARRAY") {
            populate_value_content(responseArray, dd_id_array, SAME_FLAG); // D for different key and value
           } else {
            alert(responseArray[0].VALUE);
            return;
           }
          } else {
           alert("No data found.");
          }
          document.getElementById('uploadingDiv').style.display = "none"; // Finally hide
         });
}

function getKeyValueOLD(id_value1, id_value2, dd_id1, dd_id2, FLAG, SAME_FLAG, tempFlag)
{
//alert (tempFlag);
 var c_flag = null;
 if (tempFlag) {
  c_flag = tempFlag;
 }

 //  alert(id_value);
 if (id_value1) {
  id_value1 = id_value1.trim();
 }

 if (id_value2) {
  id_value2 = id_value2.trim();
 }

 var dd_id_array;
 if (!dd_id2) {
  if (dd_id1) {
   dd_id_array = [dd_id1]; // create s single element array and pass
  }
 } else {
  if (dd_id1) {
   dd_id_array = [dd_id1, dd_id2]; // create s single element array and pass
  }
 }

 if ((!dd_id_array) || (dd_id_array.length === 0)) {
  alert("Empty KeyValue Array. Logout and retry");
  return;
 } else {
  for (var i = 0; i < dd_id_array.length; i++) {
   clearSelect(dd_id_array[i]);
  }
 }

 var xhttp;
 xhttp = GetXmlHttpObject();
 xhttp.open("GET", "getKeyValue?flag=" + FLAG
         + "&q1=" + id_value1
         + "&q2=" + id_value2
         + "&c_flag=" + c_flag, true);
 xhttp.overrideMimeType('text/plain; charset=x-user-defined');
 xhttp.send(null);
 xhttp.onreadystatechange = function () {
  if (this.readyState === 4) {
   if (this.readyState === 0 || this.status === 200) {
    var myArr = JSON.parse(this.responseText);
    //alert("reached  "+ myArr.length);
    if (myArr.length > 0) {
     if (myArr[0].KEY === "ARRAY") {
      populate_value_content(myArr, dd_id_array, SAME_FLAG); // D for different key and value
     } else {
      alert(myArr[0].VALUE);
      return;
     }
    } else {
     alert("No data found.");
    }
   } else if (this.status === 500) {
    //    document.write(this.responseText);
    alert("Error Status: 500: Error Fetching document. Please Login again and retry!!!");
   } else if (this.status === 404) {
    //    When servlet is not accessible (NOT found message);
    alert("Error Status: " + this.status + " Could not connect to server. Login again and retry!!!");
   }
  }
 };
}

function getClassTeacherClasses(empID, selectID) {
 var percent = document.getElementById("percentage");
 var msg = document.getElementById("message");
 var msgvalue = "Retrieving classes. Please wait..";
 /* In case of GET request, we need to append data string to
  * the URL. Hence first create it by serialize() method and
  * then append it to the URL  */
 var classesArray = [selectID];
 clearDDArray(classesArray);
 var form1 = "getData?flag=PC&q2=" + empID;
 sendAndReceiveData('GET', form1, 'uploadingDiv', 'messageDiv',
         percent, msg, msgvalue, 'null', false, false, null, function (responseArray) {
          if (responseArray.length > 0) {
           //    alert(responseArray[0].VALUE);
           if (responseArray[0].STATUS === "ARRAY") {
            populate_value_content(responseArray, classesArray, 'D');
           } else {
            alert(responseArray[0].MESSAGE);
           }
          }
          document.getElementById('uploadingDiv').style.display = "none"; // Finally hide
         });
}

function getClassSubjectTeachers(studID, selectID) {
 //alert(studID);
 var percent = document.getElementById("percentage");
 var msg = document.getElementById("message");
 var msgvalue = "Retrieving subject teachers list. Please wait..";
 /* In case of GET request, we need to append data string to
  * the URL. Hence first create it by serialize() method and
  * then append it to the URL  */
 var classesArray = [selectID];
 clearDDArray(classesArray);
 var form1 = "getData?flag=CST&q2=" + studID;
 sendAndReceiveData('GET', form1, 'uploadingDiv', 'messageDiv',
         percent, msg, msgvalue, 'null', false, false, null, function (responseArray) {
          if (responseArray.length > 0) {
           //    alert(responseArray[0].VALUE);
           if (responseArray[0].STATUS === "ARRAY") {
            populate_value_content(responseArray, classesArray, 'D');
           } else {
            alert(responseArray[0].MESSAGE);
           }
          }
          document.getElementById('uploadingDiv').style.display = "none"; // Finally hide
         });
}

function getTeacherClasses(empID) {
 var percent = document.getElementById("percentage");
 var msg = document.getElementById("message");
 var msgvalue = "Retrieving classes. Please wait..";
 /* In case of GET request, we need to append data string to
  * the URL. Hence first create it by serialize() method and
  * then append it to the URL  */
 var classesArray = ["class_sec"];
 clearDDArray(classesArray);
 var form1 = "getData?flag=CT&q2=" + empID;
 sendAndReceiveData('GET', form1, 'uploadingDiv', 'messageDiv',
         percent, msg, msgvalue, 'null', false, false, null, function (responseArray) {
          if (responseArray.length > 0) {
           //    alert(responseArray[0].VALUE);
           if (responseArray[0].STATUS === "ARRAY") {
            populate_value_content(responseArray, classesArray, 'D');
           } else {
            alert(responseArray[0].MESSAGE);
           }
          }
          document.getElementById('uploadingDiv').style.display = "none"; // Finally hide
         });
}

/* Fetches and display all messages send or received by the given employee or teacher
 * S_DATE AND E_DATE ARE PASSED AS "AUM" to fetch all unread messages and q5 = AUM */
function fetchAndShowMessages(EMP_STUD, ID, S_DATE, E_DATE, MSG_SHOW_DIV) {
 var form1 = "";
 var FLAG = "";
 if (EMP_STUD === 'E') {
  FLAG = "FEM";  /* Fetch messages of this employee ID */
 } else if (EMP_STUD === 'S') {
  FLAG = "FSM";
 }
 if (document.getElementById("showAll").checked) {
  form1 = "getData?flag=" + FLAG
          + "&q2=" + ID
          + "&q3=" + S_DATE
          + "&q4=" + E_DATE
          + "&q5=ALL";
 } else {
  if (!S_DATE || !E_DATE) {
   alert("Please select date range");
   return false;
  }
   if(S_DATE === "AUM" && E_DATE === "AUM") {
    form1 = "getData?flag=" + FLAG
          + "&q2=" + ID
          + "&q3=" + S_DATE
          + "&q4=" + E_DATE
          + "&q5=AUM";
   }else{
     form1 = "getData?flag=" + FLAG
          + "&q2=" + ID
          + "&q3=" + S_DATE
          + "&q4=" + E_DATE
          + "&q5=SD";
   }
 
 }

 document.getElementById("msgCaption").value = "Message chat";
 var percent = document.getElementById("percentage");
 var msg = document.getElementById("message");
 var msgvalue = "Retrieving Messages. Please wait..";
 /* In case of GET request, we need to append data string to
  * the URL. Hence first create it by serialize() method and
  * then append it to the URL  */

 sendAndReceiveData('GET', form1, 'uploadingDiv', 'messageDiv',
         percent, msg, msgvalue, 'null', false, false, null, function (responseArray) {
          var last_read_msg_id = -1;  // by Default
          /* Clear division */
          document.getElementById(MSG_SHOW_DIV).innerHTML = null;
          if (responseArray.length > 0) {
           //    alert(responseArray[0].VALUE);
           if (responseArray[0].STATUS === "ARRAY") {
            var div;
            /* -1 because in browser we are not considering image whch is stored as
             * imageArray in te last and the 0th record that specifies that STATUS 
             * is an ARRAY*/
            last_read_msg_id = responseArray[1].MSG_ID;  // highest id because DESC
            for (var r = 1; r < (responseArray.length - 1); r++) {
             div = document.createElement("div");
             div.style.fontSize = "10pt";
             div.style.height = "auto";
             div.style.padding = "2px";
             div.style.width = "65%";
             div.style.margin = "5px";
             div.setAttribute('class', 'roundcorners');

             //var d = new Date(responseArray[r].DT).toLocaleString('en-GB');
             /* Replace new line with <br> to display in div */
             responseArray[r].MSG = responseArray[r].MSG.replace(/(?:\r\n|\r\|\n)/g, '<br>');
             var msgTxt;
             if (responseArray[r].SENDER.trim() === "You") {
              msgTxt = "<b>" + responseArray[r].SENDER + " to: "
                      + responseArray[r].RECEIVER + "</b> <br>"
                      + responseArray[r].MSG + "<br><br>"
                      + responseArray[r].DT;
              /* Messages are to be displayed on first column - 80% */
              div.style.backgroundColor = "white";
              div.style.textAlign = "left";
              div.style.float = "left";
             } else {
              msgTxt = "<b>" + responseArray[r].SENDER + "</b> <br>"
                      + responseArray[r].MSG + "<br><br>"
                      + responseArray[r].DT;

              div.style.backgroundColor = "lightyellow";
              div.style.textAlign = "right";
              div.style.float = "right";
             }
             div.innerHTML = msgTxt;
             document.getElementById(MSG_SHOW_DIV).appendChild(div);
            
            }

            /* After reading / showing all messages, update the last_msg_id 
             * field in DB with the last id through update_records sservlet */

            var form = document.createElement("form");
            form.setAttribute("action", "updateRecords");
            form.setAttribute("method", "POST");
            form.setAttribute("enctype", "multipart/form-data");
            var formData = new FormData(form);
            formData.append("flag", "ULRMSG_ID");
            formData.append("type", FLAG);
            formData.append("q1", ID);
            formData.append("q2", last_read_msg_id);

            sendAndReceiveData('POST', form, 'uploadingDiv', 'messageDiv',
                    percent, msg, msgvalue, formData, false, false, null, function (responseRecord) {
                     if (responseRecord.toString() !== "") {
                      // alert(responseRecord.MESSAGE);  // No need to display
                     }
                    });

           } else {
            alert(responseArray[0].MESSAGE);
           }
          } else {
           document.getElementById(MSG_SHOW_DIV).innerHTML = null;
           alert("No messages found");
          }
          document.getElementById('uploadingDiv').style.display = "none"; // Finally hide
         });
}


// INFO_ID_DD = select of class_key, 
// dd_id = Drop down to be filled, 
// INFO = Some Flag (Used as conditional parameter in getKeyValue)
// SAME_FLAG  = "S" for same key and value, or 'D' for different key and value
// CAN BE REPLACED WITH getKeyValue(id_value1, id_value2, dd_id1, dd_id2, FLAG, SAME_FLAG)
function get_ACTIVE_EXAMS(INFO_ID_DD, dd_id, FLAG, SAME_FLAG)
{
// var dd_id_array = [dd_id]; // create s single element array and pass
// clearDDArray(dd_id_array);
 var str1 = document.getElementById(INFO_ID_DD).value;
// var s = null; //RESET value of string array s
 if (str1) {
  getKeyValue(str1, null, dd_id, null, FLAG, SAME_FLAG);
 }

 /*
  var xhttp;
  xhttp = GetXmlHttpObject();
  xhttp.open("GET", "getKeyValue?flag=" + FLAG + "&q1=" + str1 + "&q2 = null", true);
  xhttp.overrideMimeType('text/plain; charset=x-user-defined');
  xhttp.send(null);
  xhttp.onreadystatechange = function () {
  if (this.readyState === 4) {
  if (this.readyState === 0 || this.status === 200) {
  s = this.responseText;
  if (s.length > 0) {
  var myArr = JSON.parse(this.responseText);
  // If error encountered       
  if (myArr[0].KEY === "ARRAY") {
  populate_value_content(myArr, dd_id_array, SAME_FLAG); // D for different key and value
  } else {
  alert(myArr[0].VALUE);
  return;
  }
  }
  }
  }
  };
  */
}



/* New version that fetches info in the form of JSON OBject..
 * Fetches various information from CCE DOMAIN through JSON 
 * When area list is to be fetched:
 *  INFO_ID_DD is passed as ""
 *  dd_id is the select in which AREA is to be fetched
 *  FLAG = ""
 * When subarea list is to be fetched:
 *  INFO_ID_DD is the select containing area_id
 *  dd_id is the select in which subarea list is to be fetched
 *  FLAG = 'SA' 
 * When activity list is to be fetched:
 *  INFO_ID_DD is the select containing subarea_id
 *  dd_id is the select in which activity list is to be fetched
 *  FLAG = 'A' 
 *  
 * When indicator list is to be fetched:
 *  INFO_ID_DD is the select containing subarea_id
 *  dd_id is the select in which indicator list is to be fetched
 *  FLAG = 'I' 
 
 * When gradeBlocks are to be fetched:
 *  INFO_ID_DD is the select containing subarea_id
 *  dd_id is the id of division(NOT SELECT)
 *  FLAG = 'B' 
 *  
 *  When grades are to be fetched.
 *  INFO_ID_DD is the id of select 
 *  dd_id is the select in which grades list is to be fetched
 *  FLAG = 'G' 
 *  Only, in this case, 
 *  EXTRA will fetch value from subareaid select of show_exam_students.jsp AND
 *  class_key of the selected class and section will be passed in CLASSKEY from show_exam_students.jsp
 *  In all other calls, CLASS_KEY will remain undefined 
 * */
function getCCEINFO(INFO_ID_DD, dd_id, FLAG, CLASSKEY)
{
 //alert();
 var EXTRA = null; // Only used when any third paramater need to be passsed
 var str1 = ""; // "" is passed by default instead of null for getting area
 //alert(INFO);
 // INFO_ID_DD is passed as null for populating dd_id with area_id, area_name
 if (INFO_ID_DD) {
  str1 = document.getElementById(INFO_ID_DD).value;
 }

 if (FLAG === "G") {
  EXTRA = document.getElementById(INFO_ID_DD).value; // sub_area_id
  str1 = CLASSKEY;
 }

 /* When B is passed as flag, that means to populate the gradeblock division
  * and not select. Therefore we will not clear this in a loop
  * */

 var dd_id_array = [dd_id]; // create s single element array and pass

 if (FLAG !== "B") {
  // Clear all selects for flag NOT = "B"  because 
  for (var i = 0; i < dd_id_array.length; i++) {
   clearSelect(dd_id_array[i]);
  }
 }

 var percent = document.getElementById("percentage");
 var msg = document.getElementById("message");
 var msgvalue = "Retrieving CCE details. Please wait..";
 var form1 = "getCCEInfo?q1=" + str1 + "&q2=" + FLAG + "&q3=" + EXTRA;
 sendAndReceiveData('GET', form1, 'uploadingDiv', 'messageDiv',
         percent, msg, msgvalue, 'null', false, false, null, function (myArr) {
          // If empty
          if (myArr.toString() === "") {
           if (FLAG === "G") {
            alert("No grade information found for the selected sub area");
           } else if (FLAG === "B") {
            alert("No grade block information found for the selected sub area");
           } else if (FLAG === "I") {
            alert("No indicator information found");
           } else if (FLAG === "") {
            alert("No area information found");
           } else if (FLAG === "SA") {
            alert("No sub area information found for the selected area");
           } else if (FLAG === "A") {
            alert("No activity information found under the selected sub area");
           }
           return;
          } else if (myArr[0].KEY === "ARRAY") {
           if (FLAG === 'B')    // If grade block(s) are sought, then create table and display it in the DD_ID
           {
            /* Display all grades blocks (with grades) for the selected 
             * subareaid in table. str1 contains selected subarea_id */
            displayGradeBlocks(myArr, dd_id, str1);
           } else {
            populate_value_content(myArr, dd_id_array, 'D');
           }

          } else {
           alert(myArr[0].VALUE);
           return;
          }
          document.getElementById('uploadingDiv').style.display = "none"; // Finally hide
         });


 //var s = null; //RESET value of string array s
 /*
  var xhttp;
  xhttp = GetXmlHttpObject();
  xhttp.open("GET", "getCCEInfo?q1=" + str1 + "&q2=" + FLAG + "&q3=" + EXTRA, true);
  xhttp.overrideMimeType('text/plain; charset=x-user-defined');
  xhttp.send(null);
  xhttp.onreadystatechange = function ()
  {
  if (this.readyState === 4) {
  if ((this.status === 200) || (this.status === 0)) {
  //     alert(this.responseText);
  if (this.responseText.length > 0) {
  var myArr = JSON.parse(this.responseText);
  // If empty
  if (myArr.toString() === "") {
  if (FLAG === "G") {
  alert("No grade information found for the selected sub area");
  } else if (FLAG === "B") {
  alert("No grade block information found for the selected sub area");
  } else if (FLAG === "I") {
  alert("No indicator information found");
  } else if (FLAG === "") {
  alert("No area information found");
  } else if (FLAG === "SA") {
  alert("No sub area information found for the selected area");
  } else if (FLAG === "A") {
  alert("No activity information found under the selected sub area");
  }
  return;
  } else if (myArr[0].KEY === "ARRAY") {
  if (FLAG === 'B')    // If grade block(s) are sought, then create table and display it in the DD_ID
  {
  // Display all grades blocks (with grades) for the selected 
  // subareaid in table. str1 contains selected subarea_id 
  displayGradeBlocks(myArr, dd_id, str1);
  } else {
  populate_value_content(myArr, dd_id_array, 'D');
  }
  
  } else {
  alert(myArr[0].VALUE);
  return;
  }
  }
  }
  }
  };
  */


}

/* CLEAR SELECT    */
function clearSelect(dd_id) {
 //  alert(dd_id === null);
 // Check for null, undefined or ""
 try {
  if (dd_id) {
   //alert("length is " + document.getElementById(dd_id).length);
   var s = document.getElementById(dd_id).length;
   if (s > 0)
   {
    var select = document.getElementById(dd_id);
    for (var i = s - 1; i >= 0; i--) {
     select.remove(i);
    }
   }
  }
 } catch (Exception) {
  alert(Exception);
 }
}

/* This function is used to update or delete records from the DB
 * through updateRecords 
 * FLAG is different for each call based on the requirement
 */
function updateRecords(Q1, Q2, Q3, Q4, FLAG)
{
//    alert(id_value);
 if (Q1) {
  Q1 = Q1.trim();
 }
 if (Q2) {
  Q2 = Q2.trim();
 }
 if (Q3) {
  Q3 = Q3.trim();
 }
 if (Q4) {
  Q4 = Q4.trim();
 }
 if (FLAG) {
  FLAG = FLAG.trim();
 }

 var form = document.createElement("form");
 form.setAttribute("action", "updateRecords");
 form.setAttribute("method", "POST");
 form.setAttribute("enctype", "multipart/form-data");
 var formData = new FormData(form);
 formData.append("flag", FLAG);
 formData.append("q1", Q1);
 formData.append("q2", Q2);
 formData.append("q3", Q3);
 formData.append("q4", Q4);
 var percent = document.getElementById("percentage");
 var msg = document.getElementById("message");
 var msgvalue = "Deleting. Please wait..";
 sendAndReceiveData('POST', form, 'uploadingDiv', 'messageDiv',
         percent, msg, msgvalue, formData, false, false, null, function
                 (responseRecord) {
          if (responseRecord.toString() !== "") {
           alert(responseRecord.MESSAGE);
          }
          document.getElementById('uploadingDiv').style.display = "none";
         });
}


function ShowImage(IMG_ID, ID, FLAG) {
 fetchImage(ID, FLAG, null, null, null, null, function (responseArray) {
  var image = document.getElementById(IMG_ID);
  image.src = ""; // Reset
  image.setAttribute("alt", "Fetching...");
//          alert(responseArray.length);
  if (responseArray[0].STATUS !== "OK") {
   image.src = "";
   image.setAttribute("alt", "Not found");
   alert(responseArray[0].MESSAGE);
  } else {
   image.src = "data:image/jpeg;base64," + responseArray[0].MESSAGE;
   image.setAttribute("alt", "Image");
  }
 });
}


/* This function fetches image or pdf document in the form of base64 string
 * and returns to the calling stub 
 * @param ID - id of student (S), emp (E), or applicationID(OA) 
 * @param FLAG - S,E, OA - Online Admission 
 * flag= "TA", id = emp_id - Uploaded Assignment by teacher
 * flag= "SA", id = stud_id - Submitted Assignment by student
 * flag = "SA", assignment_key is passed in CLASS_ID parameter
 * flag = "SD", id = stud_id - Uploaded document of student
 * @param CLASS_ID - class_id of online application, class_key or null otherwise
 * @param
 * */
//viewDocs(div_id, id, flag, key, exam_name, subject, ques_no)
//viewDocs(id, flag, key, exam_name, subject, ques_no)
//fetchImage(IMG_ID, ID, FLAG, CLASS_ID)

function fetchImage(ID, FLAG, CLASS_ID, exam_name, subject, ques_no, callback) {
 var xhttp;
 xhttp = GetXmlHttpObject();
 xhttp.open("GET", "GetBase64String?q1=" + ID +
         "&q2=" + FLAG +
         "&q3=" + CLASS_ID,
         "&q4=" + exam_name,
         "&q5=" + subject,
         "&q6=" + ques_no, true);
 xhttp.overrideMimeType('text/plain; charset=x-user-defined');
 xhttp.send(null);
 xhttp.onreadystatechange = function () {
  if (this.readyState === 4) {
   // alert(this.status);
   if ((this.status === 200) || (this.status === 0)) {
    var responseArray = JSON.parse(this.responseText);
    if (callback)
     callback(responseArray);
   } else {
    alert("Error " + this.status + " occurred. Please logout and retry!");
   }
  }
 };
}

/******************************************************************************
 * This function accepts select array of area, subarea, activity and inicators
 * and fills every subsequesnt select combo data with the corresponsding id of
 * the first element of the super using getCCEINFO servlet  
 * ****************************************************************************/
function fillCceData(areaArray, subareaArray, activityArray, indicatorArray) {
 /* Fill all area select list */
 var percent = document.getElementById("percentage");
 var msg = document.getElementById("message");
 var proceed = false;
 if (areaArray) {
  clearDDArray(areaArray);
 }

 if (subareaArray) {
  clearDDArray(subareaArray);
 }
 if (activityArray) {
  clearDDArray(activityArray);
 }
 if (indicatorArray) {
  clearDDArray(indicatorArray);
 }

 setTimeout(function () {
  var msgvalue = "Fetching CCE area. Please wait..";
  /* Empty parameter */
  var form1 = "getCCEInfo?q1&q2&q3=null";
  sendAndReceiveData('GET', form1, 'uploadingDiv', 'messageDiv',
          percent, msg, msgvalue, 'null', false, false, null, function (responseArray) {
           //  alert(responseArray.length);
           if (responseArray.length > 0) {
            //alert(responseArray[0].MESSAGE);
            if (responseArray[0].KEY === "ARRAY") {
             if (areaArray) {
              populate_value_content(responseArray, areaArray, 'D'); // D for different key and value
              if (subareaArray) {
               proceed = true;
              }
             }
            } else {
             alert(responseArray[0].VALUE);
             return;
            }
           } else {
            alert("No data found for CCE area");
           }
           document.getElementById('uploadingDiv').style.display = "none"; // Finally hide
          });
 }, 200);
 /* fill all subarea select list for this area id */
 setTimeout(function () {
  if (proceed) {
   proceed = false; // Reset
   var id = document.getElementById(areaArray[0]).options[0].value;
   var msgvalue = "Fetching CCE sub area. Please wait..";
   /* Empty parameter */
   var form1 = "getCCEInfo?q1=" + id + "&q2=SA&q3=null";
   sendAndReceiveData('GET', form1, 'uploadingDiv', 'messageDiv',
           percent, msg, msgvalue, 'null', false, false, null, function (responseArray) {
            //  alert(responseArray.length);
            if (responseArray.length > 0) {
             //alert(responseArray[0].MESSAGE);
             if (responseArray[0].KEY === "ARRAY") {
              populate_value_content(responseArray, subareaArray, 'D'); // D for different key and value
              if (activityArray) {
               proceed = true;
              }
             } else {
              alert(responseArray[0].VALUE);
              return;
             }
            } else {
             alert("No data found for CCE sub area");
            }
            document.getElementById('uploadingDiv').style.display = "none"; // Finally hide
           });
  }
 }, 1000);
 /* fill all activities select list for this subarea id */
 setTimeout(function () {
  if (proceed) {
   proceed = false; // Reset
   var id = document.getElementById(subareaArray[0]).value;
   var msgvalue = "Fetching CCE activity. Please wait..";
   /* Empty parameter */
   var form1 = "getCCEInfo?q1=" + id + "&q2=A&q3=null";
   sendAndReceiveData('GET', form1, 'uploadingDiv', 'messageDiv',
           percent, msg, msgvalue, 'null', false, false, null, function (responseArray) {
            //  alert(responseArray.length);
            if (responseArray.length > 0) {
             //alert(responseArray[0].MESSAGE);
             if (responseArray[0].KEY === "ARRAY") {
              populate_value_content(responseArray, activityArray, 'D'); // D for different key and value
              if (indicatorArray) {
               proceed = true;
              }
             } else {
              alert(responseArray[0].VALUE);
              return;
             }
            } else {
             alert("No data found for CCE activities");
            }
            document.getElementById('uploadingDiv').style.display = "none"; // Finally hide
           });
  }
 }, 1500);
 /* Fill all indicators list for the selected activity */
 setTimeout(function () {
  if (proceed) {
   proceed = false; // Reset
   var id = document.getElementById(activityArray[0]).options[0].value;
   var msgvalue = "Fetching CCE indicators. Please wait..";
   /* Empty parameter */
   var form1 = "getCCEInfo?q1=" + id + "&q2=I&q3=null";
   sendAndReceiveData('GET', form1, 'uploadingDiv', 'messageDiv',
           percent, msg, msgvalue, 'null', false, false, null, function (responseArray) {
            //  alert(responseArray.length);
            if (responseArray.length > 0) {
             //alert(responseArray[0].MESSAGE);
             if (responseArray[0].KEY === "ARRAY") {
              if (indicatorArray) {
               populate_value_content(responseArray, indicatorArray, 'D'); // D for different key and value
               proceed = true;
              }
             } else {
              alert(responseArray[0].VALUE);
              return;
             }
            } else {
             alert("No data found for CCE indicator");
            }
            document.getElementById('uploadingDiv').style.display = "none"; // Finally hide
           });
  }
 }, 2000);
}


/* Fetches relevant text as well as image questions from Database and displays
 in the division by appending
 TXT_QX_DD_ID is passed as 'NULL' while creating question paper so that text 
 questions can be listed in division as a label and checkbox AND not in select 
 **/
function showQuestions(TXT_QX_DD_ID, IMG_DIV_ID, TOPIC_DD, Q_TYPE_RADIO_NAME, TXT_QX_DIV_ID)
{
 /* REMOVE ALL CHILD OF IMAGE DIV */
 document.getElementById(IMG_DIV_ID).innerHTML = null;
 /* Clear text question drop down */
 if (TXT_QX_DD_ID !== 'NULL') {
  clearSelect(TXT_QX_DD_ID); // clear select
 } else {
  /* REMOVE ALL CHILD OF TEXT DIV */
  document.getElementById(TXT_QX_DIV_ID).innerHTML = null;
 }


 var Q;
// Extract value of selected radio button
 var length = document.getElementsByName(Q_TYPE_RADIO_NAME).length;
// id of QUES_TYPE radio button starts from 1001 and goes till the length-1
 for (var i = 1001; i <= (1000 + length); i++) {
  if (document.getElementById(i).checked) {
   Q = document.getElementById(i).value;
   break;
  }
 }

 var TOPIC_KEY = document.getElementById(TOPIC_DD).value;
 var percent = document.getElementById("percentage");
 var msg = document.getElementById("message");
 var msgvalue = "Fetching Questions. Please wait..";
 var form1 = "getData?flag=QUES&q1=" + Q + "&q2=" + TOPIC_KEY;
 sendAndReceiveData('GET', form1, 'uploadingDiv', 'messageDiv',
         percent, msg, msgvalue, 'null', false, false, null, function (myArr) {
          if (myArr.length > 0) {
           if (myArr[0].STATUS === "ARRAY") {
            /* This is passed as 'NULL' from create QuestionPaper and actual 
             * id from create question bank. 'NULL' because we are not 
             * populating select in this division, but creating labels and 
             * checkboxes, so that user can select any question to create 
             * question paper */

            if (TXT_QX_DD_ID === 'NULL') {
             /* REMOVE ALL CHILD (including select) OF TEXT DIVISION DIV */
             document.getElementById(TXT_QX_DIV_ID).innerHTML = "";
            }

            for (var i = 1; i < myArr.length; i++) {
             // If it is an image then display in the img division
             if (myArr[i].IS_IMAGE === 1) {
              var elem = document.createElement("img");

              var chkbox = document.createElement("input");
              var label = document.createElement('label');
              label.setAttribute("class", "checkboxlabel");
              label.setAttribute("for", i + 500);
              label.appendChild(document.createTextNode('Select this Question (^)'));

              elem.setAttribute("src", "data:image/jpeg;base64," + myArr[i].IMAGE);
              elem.setAttribute("height", "103");
              elem.setAttribute("width", "400");
              elem.setAttribute("border", "1");
              elem.setAttribute("alt", "Question ID" + myArr[i].QI_KEY);

              if (TXT_QX_DIV_ID !== 'NULL') {
               chkbox.type = 'checkbox'; // only when creating Ques. Paper
              } else
              {
               chkbox.type = 'radio';  // only when creating Ques. Bank
              }

              chkbox.name = "IMG_ID";
              chkbox.id = i + 500;
              chkbox.value = myArr[i].QI_KEY;

              var SELECTDIV = document.createElement("div");
              SELECTDIV.setAttribute("class", "LeftAlignedContainer");
              SELECTDIV.style.margin = "5px";
              SELECTDIV.style.width = "99%";
              SELECTDIV.appendChild(chkbox);
              SELECTDIV.appendChild(label);

              document.getElementById(IMG_DIV_ID).appendChild(elem);
              document.getElementById(IMG_DIV_ID).appendChild(SELECTDIV);

             } else
             {
              /* If text questions are to be populated in select list 
               * while creating question Bank, then simply add in select */
              if (TXT_QX_DD_ID !== 'NULL') {
               var select2 = document.getElementById(TXT_QX_DD_ID);
               var el = document.createElement("option");
               el.value = myArr[i].QI_KEY;
               el.textContent = myArr[i].IMAGE;
               select2.appendChild(el);
              } else {
               /* Otherwise add questions as a label and checkbox to 
                * drop down for creating question paper */
               var LeftAlignedContainer = document.createElement("div");
               LeftAlignedContainer.setAttribute("class", "LeftAlignedContainer");
               LeftAlignedContainer.style.margin = "5px";
               LeftAlignedContainer.style.width = "99%";

               // Append para element to the TXT_QX_DIV_ID
               var chkbox = document.createElement("input");
               chkbox.type = 'checkbox';
               chkbox.name = "TXT_QS_ID";
               chkbox.value = myArr[i].QI_KEY;
               chkbox.id = i + 1500;

               var lbl = document.createElement('label');
               lbl.style.backgroundColor = "whitesmoke";
               lbl.style.border = "1px solid";
               lbl.style.padding = "2px";
               lbl.style.cursor = "pointer";
               lbl.setAttribute("for", (i + 1500));
               lbl.appendChild(document.createTextNode(myArr[i].IMAGE));

               LeftAlignedContainer.appendChild(lbl);
               LeftAlignedContainer.appendChild(chkbox);
               document.getElementById(TXT_QX_DIV_ID).appendChild(LeftAlignedContainer);
              }

             }
            }
           } else {
            alert(myArr[0].MESSAGE);
           }
          }
          document.getElementById('uploadingDiv').style.display = "none";
         });
}

function GetXmlHttpObject() {
 var xmlHttp = null;
 try {
// Firefox, Opera 8.0+, Safari
  xmlHttp = new XMLHttpRequest();
 } catch (e) {
//Internet Explorer
  try {
   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
 return xmlHttp;
}

function internetConnected() {
 return (window.navigator.onLine ? true : false);
}

/*  FUNCTION TO POPULATE DROP DOWN dd_id WITH PARAMETER Json String 
 * flag = 'S' when key and value are to be same 
 * FLAG = 'd' when key and value are different JSONSTRING*/
function populate_value_content(myArr, dd_id_array, flag)
{
// alert("in new populate function: length of select array is " + dd_id_array.length);
 for (var i = 0; i < dd_id_array.length; i++) {
// alert (dd_id_array[i]);
  if (dd_id_array[i]) {
   var dd_id = dd_id_array[i];
   clearSelect(dd_id); // clear select
   var select = document.getElementById(dd_id);
   //  var myArr = JSON.parse(JSONSTRING);
   /* Start from 1 because 0 holds the data information such as OK or ARRAY */
   for (var j = 1; j < myArr.length; j++) {
    var el = document.createElement("option");
    if (flag === 'S') {
     el.value = myArr[j].VALUE;
     el.textContent = myArr[j].VALUE;
    } else {
     el.value = myArr[j].KEY;
     el.textContent = myArr[j].VALUE;
    }
    select.appendChild(el);
   }
   select.selectedIndex = 0;
  }
 }
}

function clearDDArray(dd_id_array) {
 for (var i = 0; i < dd_id_array.length; i++) {
// alert (dd_id_array[i]);
  if (dd_id_array[i]) {
   var dd_id = dd_id_array[i];
   clearSelect(dd_id); // clear select
  }
 }
}

/* Set given select id value as per the txt value of the given id setddtAsPerId */
function setDDTextAsPerId(dd_id, txtval_id) {
 // alert("in setdd text" + txtval_id);
 var select = document.getElementById(dd_id);
 var l = document.getElementById(dd_id).length;
 for (var i = 0; i < l; i++) {
  if (document.getElementById(txtval_id)) {
   if ((select.options[i].text).toString().toUpperCase() === (document.getElementById(txtval_id).value).toString().toUpperCase()) {
    //  alert(select.options[i].text);
    select.selectedIndex = i;
    break;
   }
  }
 }
}

/* Set select value as per the given value  setddAsPerValue Less used  */
function setDDTextAsPerText(dd_id, txtval) {
 //alert("txtval is" + txtval);
 var select = document.getElementById(dd_id);
 var l = document.getElementById(dd_id).length;
 for (var i = 0; i < l; i++) {
  if (txtval) {
   if ((select.options[i].text).toString().toUpperCase() === txtval.toString().toUpperCase()) {
    //  alert(select.options[i].text);
    select.selectedIndex = i;
    break;
   }
  }
 }
}


/* Set ddtext as per the given value  */
function getddTextAsPerValue(dd1, txtval) {
 //   alert("in setdd text" + txtval_id);
 var select = document.getElementById(dd1);
 var l = document.getElementById(dd1).length;
 for (var i = 0; i < l; i++) {
  if (txtval) {
   if ((select.options[i].value).toString().toUpperCase() === txtval.toString().toUpperCase()) {
    //  alert(select.options[i].text);
    return (select.options[i].text);
    break;
   }
  }
 }
}

// SETS text element (ddid) of SELECT TO TEXTBOX txtid old = setText()
function setDDTextToTextID(dd_id, txtid)
{
 document.getElementById(txtid).value = ""; // Reset
 if (dd_id) {
  var s = document.getElementById(dd_id);
  // alert(s.options[s.selectedIndex].text);
  if (s.options.length > 0) {
   if (document.getElementById(txtid)) {
    document.getElementById(txtid).value = s.options[s.selectedIndex].text;
   }
  }
 }
}

// SETS ddid Select value to txtid of TEXTBOX old =  setValue() - done
function setDDValueToTextID(dd_id, txtid)
{
 if (dd_id) {
  var select = document.getElementById(dd_id);
  if (select.length > 0) {
   document.getElementById(txtid).value = select.options[select.selectedIndex].value;
  }
 }
}


/* Return text of select dd getText */
function getDDText(selectdd) {
 if (selectdd) {
  var select = document.getElementById(selectdd);
  if (select.length > 0) {
   return  select.options[select.selectedIndex].text;
  }
 }
}


//import "java.text.SimpleDaeFormat";
// Set value of date into text box
function set_date(SOURCE_SELECT, TARGET_TEXT) {
 document.getElementById(TARGET_TEXT).value = ""; // Reset
 document.getElementById(TARGET_TEXT).value = document.getElementById(SOURCE_SELECT).value;
 //var d = ().toLocaleDateString('en-GB');
 //document.getElementById(SOURCE_SELECT).value;

 //  SimpleDateFormat frmatter = new SimpleDateFormat("dd/MM/yyyy");
 //var strDate = SimpleDateFormat.format(d);
 //alert(strDate);

}

function sortByKey(array, key) {
 return array.sort(function (a, b) {
  var x = a[key];
  var y = b[key];
  return((x < y) ? -1 : ((x > y) ? 1 : 0));
 });
}

/* This method prints the online application of the public portal
 Send this to another jsp page to print that opens in a pop up window */
function printApplication(APPLICATION_ID, CLASS_ID, STATUS) {
 if (!APPLICATION_ID) {
  alert("No application to print.");
  return;
 }
 //var APPLICATION_ID =  document.getElementById('appID').value; 
 // var CLASS_ID = document.getElementById('s_class').value;
 // var STATUS = "Received";

 /* Calculate the center position to display pop up window */
 var myWidth = screen.width - (screen.width / 100 * 10); // minus 25%
 var myHeight = screen.height - (screen.height / 100 * 5); // minus 10%
 var left = (screen.width / 2) - (myWidth / 2);
 var top = (screen.height / 2) - (myHeight / 2);
 /* Build error file path name  */
 //var path = window.location.href;
 //var printFile = path.substring(0, path.lastIndexOf("SG")) + "SG/JSP/printData.jsp";
 var printFile = "printData";
 /* Redirect to the required jsp page (pop up as window) on the same page */
 return window.open(printFile + "?flag='OA'&q1=" + CLASS_ID
         + "&q2=" + STATUS
         + "&q3=" + APPLICATION_ID,
         "Print Application",
         'toolbar=no, location=no, directories=no, status=no,\n\
  menubar=yes, scrollbars=no, resizable=no, copyhistory=no, \n\
  width=' + myWidth + ', height=' + myHeight + ', \n\
          top=' + top + ', left=' + left);
}