$(document).ready(function () {
   
      var latlng = $('#q58 input').val();
      if(latlng.length > 0)
      {
         drawMap(latlng);
      }
      $.getScript('http://localhost/Forms/js/jquery.mask.min.js', function () {
      $(".phone input").mask("(999)999-9999");           
      });   
   
  $('#q58').hide();

$.cachedScript = function( url, options ) {
  options = $.extend( options || {}, {
    dataType: "script",
    cache: true,
    url: url
  });
  
  return $.ajax( options );
};
 function drawMap(n) {
    var position =  n.split('|');
    var latitude = position[0];
    var longitude = position[1];
    document.getElementById("latlong-p").innerHTML = "Location found!<br />Latitude: " + latitude + "<br />Longitude: " + longitude;
    var google_tile = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=17&size=700x400&markers=color:red|" + latitude + "," + longitude;
    var canvas = document.getElementById("map-canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = google_tile;
    img.onload = function(){
      context.drawImage(img, 0, 0);
    }
  }
var gUrl = "https://maps.googleapis.com/maps/api/js?libraries=places";
var gcUrl = "https://ubilabs.github.io/geocomplete/jquery.geocomplete.js";
$.cachedScript(gUrl).done(
  function(){
    $.cachedScript(gcUrl).done(
  function( script, textStatus ) {
    //#Field4_DSG0 is the ID for the Street Address input on the Address widget
  $("#Field4_DSG0").geocomplete
            ({ details: "form", detailsAttribute: "class" }).bind(
              "geocode:result", 
              function(event, result){
                
                //https://developers.google.com/maps/documentation/geocoding/intro?csw=1#Types
                var ac = result.address_components;
                var lat = result.geometry.location.lat();
                var lng = result.geometry.location.lng();
                var c = {};
                $.each(ac, function(k,v1) {$.each(v1.types, function(k2, v2){c[v2]=v1.short_name});})
                
                var lo = c.locality;
                if(lo === undefined)
                  lo = c.postal_town;
                //#Field4_DSG2 is the ID for the City input on the Address widget
                $("#Field4_DSG2").val(lo);
                
                var aal = c.administrative_area_level_1;
                if(aal === undefined)
                  aal = c.administrative_area_level_2;
                
                //#Field4_DSG3 is the ID for the State / Province / Region input on the Address widget
                $("#Field4_DSG3").val(aal);
                
                var pc = c.postal_code;
                if(c.postal_code_suffix != undefined)
                  pc += "-" + c.postal_code_suffix;
                
                //#Field4_DSG4 is the ID for the Postal / Zip Code input on the Address widget
                $("#Field4_DSG4").val(pc);
                
                //#Field4_DSG5 is the ID for the Country input on the Address widget
                $("#Field4_DSG5").val(c.country);
                
                //Reformat Street Address to only have the address in it
                var addr = $("#Field4_DSG0").val().split(",");
                $("#Field4_DSG0").val(addr[0]);
                var position = lat + "|" + lng;
                $('#q58 input').val(position);
                $('#q54 input').val(lat);
                $('#q55 input').val(lng);
                drawMap(position);
                //console.log(result);
              });
       });    
   });
});