JavaScript.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<!--
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
-->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- datepicker -->
<!-- <script src="https://raw.githubusercontent.com/eternicode/bootstrap-datepicker/master/js/bootstrap-datepicker.js"></script> -->
<!-- how to use google drive: http://stackoverflow.com/questions/15110264/google-apps-script-how-to-link-to-js-or-css-file-on-google-drive -->
<!-- <script src="https://googledrive.com/host/0B2FwyaXvFk1efjBCOEZaUWV4M3NpMTU4Mk0xS0VTZzNKek9WNW5rSS1ZaDJVdFVtN2hvTmM/bootstrap-datepicker.js"></script> -->
<!-- from: https://cdnjs.com/libraries/bootstrap-datepicker -->


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>



<script>    

    var transactionTime = 500;
    
    var _photoLink = "";
    var _cvLink = "";
    var _coverLetterLink = "";
    var _reprimandExplanationLink = "";
    var _legalExplanationLink = "";
    var _USMLEScoresLink = "";
    
    var _submissionConfirmation = "<p>Thank you for submitting the fellowship application!</p> <br>Now you can close this page.";
    
    //var _FellowshipTypes = [];

    console.log("JS script started");
   
    $(document).ready(function() {
                  
      //document.onreadystatechange = function () {
      //  if(document.readyState === "complete"){
      //    $('#overlay').fadeOut(4000, "linear");
      //  }
      //}

      //remove please wait note. Embedded JS html's id is not accessable by this script: document.getElementById(...) is null)
      //document.getElementById("welcome-note").remove();
      //console.log("wait note removed");
      
      checkBrowserComptability();                 
    
      $('.panel-collapse').collapse({'toggle': false});
    
      initDatepicker();
      
      initSelect();  
      
      expandTextarea();
      
      $(document).scrollTop();
      
      addFileUlpoadOnchange();     
      
      autofillPermanentAddress();
      
      prePopulateForm();
      
      //sigh date today
      $("#signatureDate").datepicker().datepicker("setDate", new Date());
      
      //Training period for which applying
      var now = new Date();
      $("#trainingPeriodStart").datepicker().datepicker("setDate", new Date(now.getFullYear()+2,6,1));    
      //$("#trainingPeriodStart").datepicker().attr('readonly','readonly');        
      $("#trainingPeriodStart").datepicker("remove");
      
      $("#trainingPeriodEnd").datepicker().datepicker("setDate", new Date(now.getFullYear()+3,5,30 ));  
      $("#trainingPeriodEnd").datepicker("remove");
       
      //set the default value of the "Country" field to "United States"
      $('.container').find('input[id*="Country"]').each(function() {
         if( !$(this).val() ) { 
            $(this).val("United States");
         }
      });
                               
      //limit the input by 254 chars
      $('input').on('keyup', function() {
         limitInputText(this, 254);
      });
      
      
      //disable submit button
      //$('#submit-form-button').one('submit', function() {
      //   alert('clicked');
      //   $(this).find('input[type="submit"]').attr('disabled','disabled');
      //});
      
      $("#submit-form-button").click(
         function() {
            $(this).attr('disabled','disabled');
            $(this).val('Please wait...');             
            
            $('#formError').html('');
            var msg = "Your application is validating and submitting...<br><b>Please wait and do not close this page!</b><br>"+
            "It might take couple minutes to submit your application and receive the confirmation email.<br>"+
            "If your application is successfully submitted, you will receive an automated e-mail confirming submission of your application.<br>"+
            "You can close this page, once you receive the confirmation email.";
            var errorElement = '<div class="alert alert-info" role="alert">'+msg+'</div>';      
            $('#formError').html(errorElement); 
         }
      );
       
       //onFormSuccess('testID');
       
    
       google.script.run.withSuccessHandler(setFellowshipTypes).getJsData();
       
       google.script.run.withSuccessHandler(setVisaStatuses).getJsDataVisaStatuses();
       
    });   //document ready
    
    
    function prePopulateForm() {   
      if( typeof _serverData === 'undefined' ) {
        return false;
      }
    
      _submissionConfirmation = _serverData.submissionConfirmation;
      //alert(_submissionConfirmation);
    
      //alert(_serverData.applicationFormNote);
      //if( _serverData.applicationFormNote ) {
        $('#applicationNotes').html(_serverData.applicationFormNote);
      //}
      
      if( _serverData.visaNote ) {
        $('#visaNote').html(_serverData.visaNote);
      }
      
      if( _serverData.otherExperienceNote ) {
        $('#otherExperienceNote').html(_serverData.otherExperienceNote);
      }
      
      if( _serverData.nationalBoardNote ) {
        $('#nationalBoardNote').html(_serverData.nationalBoardNote);
      }      
      if( _serverData.medicalLicenseNote ) {
        $('#medicalLicenseNote').html(_serverData.medicalLicenseNote);
      }   
      if( _serverData.boardCertificationNote ) {
        $('#boardCertificationNote').html(_serverData.boardCertificationNote);
      }
      if( _serverData.referenceLetterNote ) {
        $('#referenceLetterNote').html(_serverData.referenceLetterNote);
      }
      if( _serverData.signatureStatement ) {
        $('#signatureStatement').html(_serverData.signatureStatement);
      }
    
      
    }
        
    function onFormFailure(error) {   
       //alert("Form failed!");
       $('#formError').html('');
       var errorElement = '<div class="alert alert-danger" role="alert">'+error+'</div>';      
       $('#formError').html(errorElement); 
       
       //enable button
       $("#submit-form-button").val('Submit');
       $("#submit-form-button").removeAttr('disabled');       
    }
    
    function onUploadFailure(error) {    
       //console.log(error);
       alert(error);
       
       //enable button
       $("#submit-form-button").val('Submit');
       $("#submit-form-button").removeAttr('disabled');
       
       return false;
    }
    
    //check if last, first name and email are not empty
    function onUploadFileOK() {  
      
      if( $('#lastName').val() == "" ) {
        onUploadFailure("Please fill in your Last Name before uploading");
        return false;
      }
      if( $('#firstName').val() == "") {
        onUploadFailure("Please fill in your First Name before uploading");
        return false;
      }
      if( $('#email').val() == "") {
        onUploadFailure("Please fill in your E-mail before uploading");
        return false;
      }
      return true;     
    }
    

    function onFormSuccess(uniqueId) {    
        
        //window.location.href = "http://google.com";
        console.log("Submited Form! uniqueId="+uniqueId);
        //alert("Submited Form! uniqueId="+uniqueId);
        //alert("Submited Form!");
        
        $('#submit-form-button').remove();
                
        //var textHtml = "<p>Thank you for submitting the fellowship application!</p> <p>Your unique ID is " + 
        //uniqueId + 
        //".</p><p>You will receive a confirmation email shortly with a copy of your application and all uploaded documents.<p>You can print this page for your reference.</p>";
        
        //_submissionConfirmation
        var textHtml = _submissionConfirmation + "<p>Your unique ID is " + uniqueId + "</p>";
        
        //textHtml = textHtml + "<br>Now you can close this page.";
        //textHtml = textHtml + "<br><button class='btn btn-primary' onclick='closePage();'>Close</button>"
        
        //var text = '<p>Your application has been successfully submitted!</p><p>You will receive a confirmation email shortly.<p>You can print this page for your reference.</p>';   
        //var containerEl = $('.container');    
        
        $('input').attr("disabled", true);
        $('textarea').attr("disabled", true);
        $('.usstates').select2("enable",false);
        $('select.combobox').select2("enable",false);
        $('.datepicker').attr('disabled', true);
        
        var succElement = '<br><br><div id="succSubmition" class="alert alert-success" role="alert">'+textHtml+'</div>';
        
        $('#formError').html(succElement);             
       
    }
    function closePage() {
      google.script.host.close();
      window.top.close();
      //window.parent.window.close();
      //window.close();
      //window.open("","_self","").close();
    }


    function fileUploadedReprimandExplanation(url) {
        _reprimandExplanationLink = fileUploaded(url,"uploadReprimandExplanationBtn","uploadedReprimandExplanationStatus","uploadedReprimandExplanationUrl");
    }
    function fileUploadedLegalExplanation(url) {
        _legalExplanationLink = fileUploaded(url,"uploadLegalExplanationBtn","uploadedLegalExplanationStatus","uploadedLegalExplanationUrl");
    }    
    function fileUploadedCoverLetter(url) {
        _coverLetterLink = fileUploaded(url,"uploadCoverLetterBtn","uploadedCoverLetterStatus","uploadedCoverLetterUrl");
    }
    function fileUploadedCV(url) {
        _cvLink = fileUploaded(url,"uploadCurriculumVitaeBtn","uploadedCVStatus","uploadedCVUrl");
    }
    function fileUploadedPhoto(url) {        
        _photoLink = fileUploaded(url,"uploadPhotoBtn","uploadedPhotoStatus","uploadedPhotoUrl");
    }
    function fileUploadedUSMLEScores(url) {
        _USMLEScoresLink = fileUploaded(url,"uploadUSMLEScoresBtn","uploadedUSMLEScoresStatus","uploadedUSMLEScoresUrl");
    }
    function fileUploaded(url,uploadBtnID,uploadedStatusID,uploadedUrlID) {       
        
        $('#'+uploadBtnID).hide();
        
        //$('#'+uploadedStatusID).attr('href',url);
        $('#'+uploadedStatusID).show();         
        
        $('#'+uploadedUrlID).val(url);
        //$('#'+uploadedUrlID).show();
        
        console.log('url='+url);
        return url;        
    }
     
    //listener for file input field    
    function addFileUlpoadOnchange() {    
    
       $('.upload-file-field').on( 'click', function() {                                                      
           if( !onUploadFileOK() ) {
             return false;
           }           
       });
    
       //Note: Chrome clear the file on cancel
       $('.upload-file-field').on( 'change', function() {
                                 
           var fileVal = $(this).val();
           var holder = $(this).closest('.row');
           var btnEl = holder.find('.uploadBtn');
           var statusEl = holder.find('.uploaded-file-status');
                      
           //console.log('file input listener fileVal='+fileVal);          
           
           if( fileVal != "" ) {
                                      
              //check if url is different. How to do it?                           
              if( !btnEl.is(":visible")  ) {
                  $(this).val('Press Here to Upload');
                  btnEl.show();
                  statusEl.hide();  
                  btnEl.siblings('.uploadedUrl').val("");
              }
           
              //btnEl.removeClass('disabled');
              btnEl.prop('disabled', false);
              
           } 
           
           if( fileVal == "" ) {
           
              //console.log('file input empty');
                                   
              if( !btnEl.is(":visible") ) {                 
                 btnEl.val('Press Here to Upload');
                 btnEl.show();
                 statusEl.hide(); 
                 btnEl.siblings('.uploadedUrl').val("");
              }              
            
              btnEl.prop('disabled', true);
                                          
           }
       
       });
                                       
    }
    
    function resetUploadBtn(wellEl) {     
      wellEl.find('.uploaded-file-status').hide();  
      var btnEl = wellEl.find('.uploadBtn');
      btnEl.val('Press Here to Upload');
      btnEl.show(); 
      btnEl.siblings('.uploadedUrl').val("");
      btnEl.prop('disabled', true);      
    }
    
       
    function collapseAll() {
        $('.panel-collapse').collapse('hide');
        $('#collapseAll').addClass('btn-pressed-default');
        $('#expandAll').removeClass('btn-pressed-default');
    }

    function expandAll() {
        $('.panel-collapse').collapse('show');
        $('#expandAll').addClass('btn-pressed-default');
        $('#collapseAll').removeClass('btn-pressed-default');
    }   
    
    
    function initSelect() {
      console.log('initSelect'); 
      //$(".combobox").select2();
      
      var combobox_width = '100%'; //'element'
      
      $("select.combobox").select2({
        width: combobox_width,
        dropdownAutoWidth: true,
        placeholder: "Select an option",
        allowClear: true
        //selectOnBlur: false
        //readonly: true
        //containerCssClass: 'combobox-width'
      });
    
      $(".fellowshipTypeCombobox").on("change", function(e) {
         //console.log("selecting val=" + e.val + " choice=" + e.object.text);
         if( e.val == "Other" ) {
           $("#otherFellowshipType").show(transactionTime);
         } else {
           $("#otherFellowshipType").hide(transactionTime);
           $("#otherFellowshipType").val("");
         }
      });
      
      
      $(".usstates").select2({        
        allowClear: true,
        width: combobox_width,
        dropdownAutoWidth: true,
        selectOnBlur: false,
        dataType: 'json',
        quietMillis: 100,
        multiple: false,
        data: _USStates,
        //createSearchChoice:function(term,data) {           
        //    return {id:term, text:term};
        //}
      });
      
      //init percentiles
      var _percentiles = [];
      for( var i=99; i>0; i-- ) {
        var percentile = ordinal_suffix_of(i);
        _percentiles.push({"id":i+"","text":percentile+""});
      }  
      $(".percentile").select2({        
        allowClear: true,
        width: combobox_width,
        dropdownAutoWidth: true,
        selectOnBlur: false,
        dataType: 'json',
        quietMillis: 100,
        multiple: false,
        data: _percentiles,
        //createSearchChoice:function(term,data) {           
        //    return {id:term, text:term};
        //}
      });
    
                  
    } //InitSelect
    
    
    function setFellowshipTypes(fellowshipTypes) {
      var combobox_width = '100%'; //'element'
      $(".fellowshipTypeCombobox").select2({        
        allowClear: true,
        width: combobox_width,
        dropdownAutoWidth: true,
        selectOnBlur: false,
        dataType: 'json',
        quietMillis: 100,
        multiple: false,      
        data: fellowshipTypes,
        //createSearchChoice:function(term,data) {           
        //    return {id:term, text:term};
        //}
      });
    }
    function setVisaStatuses(visaStatuses) {
      var combobox_width = '100%'; //'element'
      $(".fellowshipVisaStatusesCombobox").select2({        
        allowClear: true,
        width: combobox_width,
        dropdownAutoWidth: true,
        selectOnBlur: false,
        dataType: 'json',
        quietMillis: 100,
        multiple: false,
        data: visaStatuses,
        //createSearchChoice:function(term,data) {           
        //    return {id:term, text:term};
        //}
      });
    }
    
    
    function initDatepicker() {  
      console.log('initDatepicker');   
      var datepickers = $('.datepicker');
      //var datepickers = $('.input-group.date');
      initSingleDatepicker( datepickers );              
    }
    function initSingleDatepicker( datepickerElement ) {

        //printF(datepickerElement,'datepicker element:');
    
        var endDate = new Date(); //use current date as default
    
        if( datepickerElement.hasClass('allow-future-date') ) {
            endDate = false;//'End of time';
        }
        //console.log('endDate='+endDate);
    
        //datepickerElement = datepickerElement.find('.datepicker');
        //console.log(datepickerElement);
    
        //to prevent datepicker clear on Enter key, use the version from https://github.com/eternicode/bootstrap-datepicker/issues/775
        datepickerElement.datepicker({
            format: 'mm/dd/yyyy',
            autoclose: true,
            clearBtn: true,
            todayBtn: "linked",
            todayHighlight: true,
            endDate: endDate
        });
   }
   
   function hideWell(element) {
     $(element).closest('.form-holder-element').find('.wellcollapsable').hide(transactionTime);
     $(element).closest('.form-holder-element').find('.wellcollapsable').find('input,textarea').val('');  
     resetUploadBtn($(element).closest('.form-holder-element').find('.wellcollapsable'));
   }
   
   function showWell(element) {
     $(element).closest('.form-holder-element').find('.wellcollapsable').show(transactionTime);  
     
   }


function ordinal_suffix_of(i) {
    var j = i % 10,
        k = i % 100;
    if (j == 1 && k != 11) {
        return i + "st";
    }
    if (j == 2 && k != 12) {
        return i + "nd";
    }
    if (j == 3 && k != 13) {
        return i + "rd";
    }
    return i + "th";
}

function expandTextarea() {  
  var elements = $('.textarea');  
  for (var i = 0; i < elements.length; ++i) {
    var element = elements[i];        
    addEvent('keyup', element, function() {
      this.style.overflow = 'hidden';
      this.style.height = 0;
      var newH = this.scrollHeight + 10;
      //console.log("cur h="+this.style.height+", newH="+newH);
      this.style.height = newH + 'px';
    }, false);
  }
} 

//Internet Explorer (up to version 8) used an alternate attachEvent method.
// The following should be an attempt to write a cross-browser addEvent function.
function addEvent(event, elem, func) {
if (elem.addEventListener)  // W3C DOM
elem.addEventListener(event,func,false);
else if (elem.attachEvent) { // IE DOM
//elem.attachEvent("on"+event, func);
elem.attachEvent("on" + event, function() {return(func.call(elem, window.event));});
}
else { // No much to do
elem[event] = func;
}
}


function autofillPermanentAddress() {

//on change
$('#samePAddress').on( "change", function() {
if( $(this).is(':checked') ) {
//copy address fields
copyAddressFields(true);
} else {
//clean address fields
copyAddressFields(false);
}

});


}


function copyAddressFields(copyFlag) {

var presentAddressStreet1 = $('#presentAddressStreet1');
var presentAddressStreet2 = $('#presentAddressStreet2');
var presentAddressCity = $('#presentAddressCity');
var presentAddressState = $('#presentAddressState');
var presentAddressZip = $('#presentAddressZip');
var presentAddressCountry = $('#presentAddressCountry');

var permanentAddressStreet1 = $('#permanentAddressStreet1');
var permanentAddressStreet2 = $('#permanentAddressStreet2');
var permanentAddressCity = $('#permanentAddressCity');
var permanentAddressState = $('#permanentAddressState');
var permanentAddressZip = $('#permanentAddressZip');
var permanentAddressCountry = $('#permanentAddressCountry');

if( copyFlag ) {

permanentAddressStreet1.val( presentAddressStreet1.val() );
permanentAddressStreet2.val( presentAddressStreet2.val() );
permanentAddressCity.val( presentAddressCity.val() );    
permanentAddressZip.val( presentAddressZip.val() );
permanentAddressCountry.val( presentAddressCountry.val() );

//permanentAddressState.select2( 'val', presentAddressState.select2('val') );
if( presentAddressState.select2('data') ) {
permanentAddressState.select2('data', { id: presentAddressState.select2('data').text, text: presentAddressState.select2('data').text })
}

} else {

permanentAddressStreet1.val('');
permanentAddressStreet2.val('');
permanentAddressCity.val('');    
permanentAddressZip.val('');
permanentAddressCountry.val('');

permanentAddressState.select2( 'val', null );

}
  
  

}


function limitInputText(field, maxChar){
    var ref = $(field);
    var val = ref.val();
    if ( val.length >= maxChar ){
        ref.val(function() {
            //console.log(val.substr(0, maxChar))
            alert("The length of the input field can not exceed " + maxChar + " characters.");
            return val.substr(0, maxChar);       
        });
    }
}


function isIE() {
  var myNav = navigator.userAgent.toLowerCase();
  return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

function checkBrowserComptability() {

    var block = false; 
    var msg = "";

    //console.log('IE='+isIE());
    if( isIE() && isIE() <= 7 ) {        
        // is IE version equal or less than 7
        block = true; 
        msg = "Internet Explorer 7 or lower";
    } 
    
    //console.log('navigator.userAgent='+navigator.userAgent);
    //if( navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) <= 3.6 ){ //Firefox
    //   console.log('Firefox => block');
    //   block = true;
    //   msg = "Firefox 3.6 or lower";
    //}
    //if( navigator.userAgent.indexOf('Chrome') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Chrome') + 7).split(' ')[0]) <= 15 ){//Chrome
    //  console.log('Chrome => block');
    //  block = true;
    //  msg = "Chrome 15 or lower";
    //}    
    //if( navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Version') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Version') + 8).split(' ')[0]) >= 5){//Safari
    //   //Allow
    //} else {
    //   console.log('Safari => block');
    //   block = true;
    //}
    //if( navigator.userAgent.indexOf('Safari') != -1 ) {
    //   var isNewSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/); //Safari 3.0+
    //   if( isNewSafari ) {
    //      //Allow
    //   } else {
    //      block = true;
    //      msg = "Safari 3.0 or lower";
    //   }
    //}
    
    if( block == true ) {
       
        var msg = "Warning! You are using an old version of browser " + msg + ". \n\
                    Please upgrade the browser or use the modern browsers such as \n\
                    Firefox or Google Chrome to have full features of this system.\n\
                    If you have any questions please email oli2002@med.cornell.edu.";
        var errorElement = '<div class="alert alert-danger" role="alert">'+msg+'</div>';      
        
        $('#headerHandle').html(errorElement); 
        
        $('.container').remove();
    }
    
}

</script>